[ADF-3746] Add style lint rules (#3975)

* add stylelint * fix style first part * fix style second part * fix style third part * fix style fourth part * Fix e2e tests first part * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * fix insights * fix style abotu component * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * [ADF-3746] Rebase branch * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * Fix e2e tests second part * Rebase branch * Fix list error * fix new style added * tslint fix * [ADF-3746] Fix scss errors on Process Filters Cloud component
2025-07-24 17:32:15 +00:00 · 2018-11-28 14:43:18 +00:00
parent 5fc03cf26b
commit 1a21f234b6
234 changed files with 2328 additions and 1058 deletions
--- a/lib/core/viewer/components/imgViewer.component.html
+++ b/lib/core/viewer/components/imgViewer.component.html
@@ -1,4 +1,4 @@
-<div class="image-container" [ngStyle]="{ transform: transform }" data-automation-id="adf-image-container">
+<div class="adf-image-container" [ngStyle]="{ transform: transform }" data-automation-id="adf-image-container">
    <img id="viewer-image" [src]="urlFile" [alt]="nameFile" [ngStyle]="{ 'cursor' : isDragged ? 'move': 'default' } " />
 </div>

--- a/lib/core/viewer/components/imgViewer.component.scss
+++ b/lib/core/viewer/components/imgViewer.component.scss
@@ -2,7 +2,7 @@
    $background: map-get($theme, background);

    .adf-image-viewer {
-        .image-container {
+        .adf-image-container {
            display: flex;
            flex: 1;
            text-align: center;
--- a/lib/core/viewer/components/pdfViewer-thumbnails.component.html
+++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.html
@@ -1,10 +1,10 @@
-<div class="pdf-thumbnails__content"
-     data-automation-id='adf-thumbnails-content'
+<div class="adf-pdf-thumbnails__content"
+    data-automation-id='adf-thumbnails-content'
    [style.height.px]="virtualHeight"
    [style.transform]="'translate(-50%, ' + translateY + 'px)'">
    <adf-pdf-thumb *ngFor="let page of renderItems; trackBy: trackByFn"
-        class="pdf-thumbnails__thumb"
-        [ngClass]="{'pdf-thumbnails__thumb--selected' : isSelected(page.id)}"
+        class="adf-pdf-thumbnails__thumb"
+        [ngClass]="{'adf-pdf-thumbnails__thumb--selected' : isSelected(page.id)}"
        [page]="page"
        (click)="goTo(page.id)">
    </adf-pdf-thumb>
--- a/lib/core/viewer/components/pdfViewer-thumbnails.component.scss
+++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.scss
@@ -1,7 +1,7 @@
@mixin adf-pdf-thumbnails-theme($theme) {
    $background: map-get($theme, background);

-    .pdf-thumbnails {
+    .adf-pdf-thumbnails {
        display: block;
        overflow: hidden;
        overflow-y: auto;
@@ -24,11 +24,11 @@
        }

        &__thumb:hover {
-            box-shadow: 0px 0px 5px 0px $black-87-opacity;
+            box-shadow: 0 0 5px 0 $black-87-opacity;
        }

        &__thumb--selected:not(:hover) {
-            box-shadow: 0px 0px 5px 0px $black-87-opacity;
+            box-shadow: 0 0 5px 0 $black-87-opacity;
        }
    }
 }
--- a/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts
+++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts
@@ -77,7 +77,7 @@ describe('PdfThumbListComponent', () => {
        fixture.nativeElement.style.display = 'block';
        fixture.nativeElement.style.height = '700px';
        fixture.nativeElement.style.overflow = 'scroll';
-        fixture.debugElement.query(By.css('.pdf-thumbnails__content'))
+        fixture.debugElement.query(By.css('.adf-pdf-thumbnails__content'))
            .nativeElement.style.height = '2000px';
    }));

--- a/lib/core/viewer/components/pdfViewer-thumbnails.component.ts
+++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.ts
@@ -24,7 +24,7 @@ import {
    selector: 'adf-pdf-thumbnails',
    templateUrl: './pdfViewer-thumbnails.component.html',
    styleUrls: ['./pdfViewer-thumbnails.component.scss'],
-    host: { 'class': 'pdf-thumbnails' },
+    host: { 'class': 'adf-pdf-thumbnails' },
    encapsulation: ViewEncapsulation.None
 })
 export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
--- a/lib/core/viewer/components/pdfViewer.component.html
+++ b/lib/core/viewer/components/pdfViewer.component.html
@@ -1,8 +1,8 @@
 <div class="adf-pdf-viewer__container">
    <ng-container *ngIf="showThumbnails">
        <div class="adf-pdf-viewer__thumbnails">
-            <div class="thumbnails-template__container">
-                <div class="thumbnails-template__buttons">
+            <div class="adf-thumbnails-template__container">
+                <div class="adf-thumbnails-template__buttons">
                    <button mat-icon-button data-automation-id='adf-thumbnails-close' (click)="toggleThumbnails()">
                        <mat-icon>close</mat-icon>
                    </button>
@@ -20,10 +20,10 @@
    </ng-container>

    <div class="adf-pdf-viewer__content">
-        <div id="viewer-pdf-viewer" class="viewer-pdf-viewer" (window:resize)="onResize()">
-            <div id="viewer-viewerPdf" class="pdfViewer">
-                <div id="loader-container" class="loader-container">
-                    <div class="loader-item">
+        <div id="viewer-pdf-viewer" class="adf-viewer-pdf-viewer" (window:resize)="onResize()">
+            <div id="viewer-viewerPdf" class="adf-pdfViewer">
+                <div id="loader-container" class="adf-loader-container">
+                    <div class="adf-loader-item">
                        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                    </div >
                </div>
--- a/lib/core/viewer/components/pdfViewer.component.scss
+++ b/lib/core/viewer/components/pdfViewer.component.scss
@@ -10,7 +10,7 @@
        width: 100%;
        margin: 0;

-        .loader-container {
+        .adf-loader-container {
            display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
            display: -webkit-flex;     /* NEW - Chrome */
@@ -29,7 +29,7 @@
            background-color: rgba(0, 0, 0, 0.12);
        }

-        .thumbnails-template {
+        .adf-thumbnails-template {
            &__container {
                display: flex;
                flex-direction: column;
@@ -46,14 +46,16 @@
        }

        &__container {
-            display: flex; height: 100%;
+            display: flex;
+ height: 100%;
        }

        &__content {
-            flex: 1 1 auto; position: relative;
+            flex: 1 1 auto;
+ position: relative;
        }

-        .loader-item {
+        .adf-loader-item {
            margin: auto;
            max-height:100px;
            max-width:300px;
--- a/lib/core/viewer/components/pdfViewer.component.spec.ts
+++ b/lib/core/viewer/components/pdfViewer.component.spec.ts
@@ -159,7 +159,7 @@ describe('Test PdfViewer component', () => {
        });
    });
    it('should Loader be present', () => {
-        expect(element.querySelector('.loader-container')).not.toBeNull();
+        expect(element.querySelector('.adf-loader-container')).not.toBeNull();
    });

    describe('Required values', () => {
@@ -204,8 +204,8 @@ describe('Test PdfViewer component', () => {
        it('should Canvas be present', (done) => {
            fixtureUrlTestComponent.detectChanges();
            fixtureUrlTestComponent.whenStable().then(() => {
-                expect(elementUrlTestComponent.querySelector('.pdfViewer')).not.toBeNull();
-                expect(elementUrlTestComponent.querySelector('.viewer-pdf-viewer')).not.toBeNull();
+                expect(elementUrlTestComponent.querySelector('.adf-pdfViewer')).not.toBeNull();
+                expect(elementUrlTestComponent.querySelector('.adf-viewer-pdf-viewer')).not.toBeNull();
                done();
            });
        }, 5000);
@@ -273,8 +273,8 @@ describe('Test PdfViewer component', () => {
            fixtureBlobTestComponent.detectChanges();

            fixtureBlobTestComponent.whenStable().then(() => {
-                expect(elementBlobTestComponent.querySelector('.pdfViewer')).not.toBeNull();
-                expect(elementBlobTestComponent.querySelector('.viewer-pdf-viewer')).not.toBeNull();
+                expect(elementBlobTestComponent.querySelector('.adf-pdfViewer')).not.toBeNull();
+                expect(elementBlobTestComponent.querySelector('.adf-viewer-pdf-viewer')).not.toBeNull();
                done();
            });
        });
@@ -294,8 +294,8 @@ describe('Test PdfViewer component', () => {

            fixtureBlobTestComponent.whenStable().then(() => {
                /* cspell:disable-next-line */
-                expect(elementBlobTestComponent.querySelector('.viewer-pagenumber-input')).toBeDefined();
-                expect(elementBlobTestComponent.querySelector('.viewer-total-pages')).toBeDefined();
+                expect(elementBlobTestComponent.querySelector('.adf-viewer-pagenumber-input')).toBeDefined();
+                expect(elementBlobTestComponent.querySelector('.adf-viewer-total-pages')).toBeDefined();

                expect(elementBlobTestComponent.querySelector('#viewer-previous-page-button')).not.toBeNull();
                expect(elementBlobTestComponent.querySelector('#viewer-next-page-button')).not.toBeNull();
--- a/lib/core/viewer/components/pdfViewerHost.component.scss
+++ b/lib/core/viewer/components/pdfViewerHost.component.scss
@@ -7,7 +7,7 @@
        bottom: 0;
        overflow: hidden;
        opacity: 0.2;
-        line-height: 1.0;
+        line-height: 1;
        border: 1px solid gray;

        & > div {
@@ -22,40 +22,40 @@
            transform-origin: 0% 0%;
        }

-        .highlight {
+        .adf-highlight {
            margin: -1px;
            padding: 1px;

            background-color: rgb(180, 0, 170);
            border-radius: 4px;

-            &.begin {
-                border-radius: 4px 0px 0px 4px;
+            &.adf-begin {
+                border-radius: 4px 0 0 4px;
            }

-            &.end {
-                border-radius: 0px 4px 4px 0px;
+            &.adf-end {
+                border-radius: 0 4px 4px 0;
            }

-            &.middle {
-                border-radius: 0px;
+            &.adf-middle {
+                border-radius: 0;
            }

-            &.selected {
+            &.adf-selected {
                background-color: rgb(0, 100, 0);
            }
        }

-        &::selection { background: rgb(0,0,255); }
-        &::-moz-selection { background: rgb(0,0,255); }
+        &::selection { background: rgb(0, 0, 255); }
+        &::-moz-selection { background: rgb(0, 0, 255); }

-        .endOfContent {
+        .adf-endOfContent {
            display: block;
            position: absolute;
-            left: 0px;
+            left: 0;
            top: 100%;
-            right: 0px;
-            bottom: 0px;
+            right: 0;
+            bottom: 0;
            z-index: -1;
            cursor: default;
            user-select: none;
@@ -63,18 +63,18 @@
            -ms-user-select: none;
            -moz-user-select: none;

-            &.active {
-                top: 0px;
+            &.adf-active {
+                top: 0;
            }
        }
    }

-    .annotationLayer {
+    .adf-annotationLayer {
        section {
            position: absolute;
        }

-        .linkAnnotation {
+        .adf-linkAnnotation {
            & > a {
                position: absolute;
                font-size: 1em;
@@ -82,34 +82,36 @@
                left: 0;
                width: 100%;
                height: 100%;
-                background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
+                /* stylelint-disable */
+                background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') 0 0 repeat;
+                /* stylelint-enable */

                &:hover {
                    opacity: 0.2;
                    background: #ff0;
-                    box-shadow: 0px 2px 10px #ff0;
+                    box-shadow: 0 2px 10px #ff0;
                }
            }
        }

-        .textAnnotation {
+        .adf-textAnnotation {
            img {
                position: absolute;
                cursor: pointer;
            }
        }

-        .popupWrapper {
+        .adf-popupWrapper {
            position: absolute;
            width: 20em;
        }

-        .popup {
+        .adf-popup {
            position: absolute;
            z-index: 200;
            max-width: 20em;
-            background-color: #FFFF99;
-            box-shadow: 0px 2px 5px #333;
+            background-color: #ffff99;
+            box-shadow: 0 2px 5px #333;
            border-radius: 2px;
            padding: 0.6em;
            margin-left: 5px;
@@ -127,21 +129,21 @@
            }
        }

-        .highlightAnnotation,
-        .underlineAnnotation,
-        .squigglyAnnotation,
-        .strikeoutAnnotation,
-        .fileAttachmentAnnotation {
+        .adf-highlightAnnotation,
+        .adf-underlineAnnotation,
+        .adf-squigglyAnnotation,
+        .adf-strikeoutAnnotation,
+        .adf-fileAttachmentAnnotation {
            cursor: pointer;
        }
    }

-    .pdfViewer {
-        canvasWrapper {
+    .adf-pdfViewer {
+        .canvasWrapper {
            overflow: hidden;
        }

-        .page {
+        .adf-page {
            direction: ltr;
            width: 816px;
            height: 1056px;
@@ -157,7 +159,7 @@
                display: block;
            }

-            .loadingIcon {
+            .adf-loadingIcon {
                position: absolute;
                display: block;
                left: 0;
@@ -172,14 +174,14 @@
            }
        }

-        &.removePageBorders {
-            .page {
-                margin: 0px auto 10px auto;
+        &.adf-removePageBorders {
+            .adf-page {
+                margin: 0 auto 10px;
                border: none;
            }
        }

-        .loadingIcon {
+        .adf-loadingIcon {
            width: 100px;
            height: 100px;
            left: 50% !important;
@@ -190,9 +192,9 @@

            font-size: 5px;
            text-indent: -9999em;
-            border-top: 1.1em solid rgba(3,0,2, 0.2);
-            border-right: 1.1em solid rgba(3,0,2, 0.2);
-            border-bottom: 1.1em solid rgba(3,0,2, 0.2);
+            border-top: 1.1em solid rgba(3, 0, 2, 0.2);
+            border-right: 1.1em solid rgba(3, 0, 2, 0.2);
+            border-bottom: 1.1em solid rgba(3, 0, 2, 0.2);
            border-left: 1.1em solid #030002;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
@@ -201,7 +203,7 @@
            animation: load8 1.1s infinite linear;

            border-radius: 50%;
-            &:after {
+            &::after {
                border-radius: 50%;
            }
        }
@@ -209,7 +211,7 @@



-    .hidden, [hidden] {
+    .adf-hidden, [hidden] {
        display: none !important;
    }
 }
@@ -235,7 +237,7 @@
    }
 }

-.viewer-pdf-viewer {
+.adf-viewer-pdf-viewer {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
@@ -245,9 +247,9 @@
    left: 0;
    outline: none;
 }
-html[dir='ltr'] .viewer-pdf-viewer {
-    box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
+html[dir='ltr'] .adf-viewer-pdf-viewer {
+    box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, 0.05);
 }
-html[dir='rtl'] .viewer-pdf-viewer {
-    box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05);
+html[dir='rtl'] .adf-viewer-pdf-viewer {
+    box-shadow: inset -1px 0 0 hsla(0, 0%, 100%, 0.05);
 }
--- a/lib/core/viewer/components/viewer.component.scss
+++ b/lib/core/viewer/components/viewer.component.scss
@@ -3,7 +3,7 @@
    $foreground: map-get($theme, foreground);
    $adf-viewer-background-color: mat-color($background, card);

-    .full-screen {
+    .adf-full-screen {
        width: 100%;
        height: 100%;
        background-color: $adf-viewer-background-color;
@@ -58,7 +58,7 @@

        &-container {
            .adf-viewer-layout-content {
-                @extend .full-screen;
+                @extend .adf-full-screen;
                position: relative;
                overflow-y: hidden;
                overflow-x: hidden;
@@ -80,7 +80,7 @@
            }

            .adf-viewer-layout {
-                @extend .full-screen;
+                @extend .adf-full-screen;

                display: flex;
                flex-direction: row;
@@ -90,7 +90,7 @@
            }

            .adf-viewer-content {
-                @extend .full-screen;
+                @extend .adf-full-screen;
                flex: 1;

                & > div {
@@ -102,14 +102,14 @@
        &-overlay-container {
            .adf-viewer-content {
                position: fixed;
-                top: 0px;
-                left: 0px;
+                top: 0;
+                left: 0;
                z-index: 1000;
            }
        }

        &-inline-container {
-            @extend .full-screen;
+            @extend .adf-full-screen;
        }

        &-content-container {
@@ -179,7 +179,7 @@
                overflow: hidden;
            }

-            .info-drawer-content {
+            .adf-info-drawer-content {
                height: 100%;
            }