vhobjects-admin 0.4.9 → 0.5.0

package/fesm2015/vhobjects-admin.js

@@ -12322,7 +12322,7 @@ class ColorContrastComponent {
     }
 }
 ColorContrastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ColorContrastComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i2.MatDialogRef }, { token: i3$1.FunctionService }, { token: i3$1.ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ColorContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ColorContrastComponent, selector: "app-color-contrast", ngImport: i0, template: "<!-- BOX: CH\u1ECCN M\u00C0U CH\u1EEE/M\u00C0U BI\u1EC2U T\u01AF\u1EE2NG -->\r\n<div class=\"title-box\">\r\n  <!-- Ti\u00EAu \u0111\u1EC1 -->\r\n  <h2 class=\"title-container\">{{'phan_tich_do_tuong_phan_mau' | translate}}</h2>\r\n  \r\n  <!-- Icon close -->\r\n  <mat-icon *ngIf=\"data?.hasOwnProperty('colorContrast')\" class=\"close-icon\" (click)=\"close()\">\r\n    close\r\n  </mat-icon>\r\n</div>\r\n<div class=\"select-box\">\r\n  <!-- Ti\u00EAu \u0111\u1EC1 box -->\r\n  <h3 class=\"title\">{{ 'mau_chu_dao' | translate }}</h3>\r\n\r\n  <!-- L\u1EF1a ch\u1ECDn m\u00E0u ch\u1EE7 \u0111\u1EA1o c\u1EE7a ch\u1EEF hay n\u1EC1n -->\r\n  <select [(ngModel)]=\"mainColorType\" (ngModelChange)=\"suggestedColors = getSuggestedColors()\">\r\n    <option [value]=\"'text_or_icon_color'\">\r\n      {{ \r\n        (\r\n          data?.hasOwnProperty('colorContrast') \r\n          ? (data.colorContrast.typeFgColor == 'text' ? 'mau_chu' : 'mau_bieu_tuong') \r\n          : 'mau_chu_mau_bieu_tuong'\r\n        ) | translate \r\n      }}\r\n    </option>\r\n    <option [value]=\"'bg_color'\">{{ 'mau_nen' | translate }}</option>\r\n  </select>\r\n</div>\r\n<div class=\"color-box\">\r\n  <!-- Ti\u00EAu \u0111\u1EC1 box -->\r\n  <h3 class=\"title\">\r\n    {{ \r\n      (\r\n        data?.hasOwnProperty('colorContrast') \r\n        ? (data.colorContrast.typeFgColor == 'text' ? 'mau_chu' : 'mau_bieu_tuong') \r\n        : 'mau_chu_mau_bieu_tuong'\r\n      ) | translate \r\n    }}\r\n  </h3>\r\n  <div class=\"row\">\r\n    <!-- Nh\u1EADp m\u00E3 m\u00E0u HEX -->\r\n    <div>\r\n      <label>Hex:</label>\r\n      <input [(ngModel)]=\"fgHex\" (change)=\"onHexChange('fg')\" maxlength=\"7\" />\r\n    </div>\r\n    <!-- Nh\u1EADp rgb -->\r\n    <div>\r\n      <label>RGB:</label>\r\n      <input [(ngModel)]=\"fgRgb\" (change)=\"onRgbChange('fg')\" maxlength=\"14\" />\r\n    </div>\r\n    <!-- Ch\u1ECDn m\u00E0u -->\r\n    <div>\r\n      <label>{{'mau' | translate}}:</label>\r\n      <input \r\n        class=\"input-color\" \r\n        type=\"button\" \r\n        [cpOKButton]=\"true\" \r\n        [(colorPicker)]=\"fgHex\" \r\n        [style.background]=\"fgHex\" \r\n        [cpWidth]=\"'230px'\" \r\n        (colorPickerClose)=\"onPickerChange('fg')\"\r\n        [cpMaxPresetColorsLength]=\"themeService.cpMaxPresetColorsLength\"\r\n        [cpAddColorButton]=\"true\"\r\n        [cpAddColorButtonText]=\"'them_mau' | translate\"\r\n        [cpPresetLabel]=\"'bang_mau_mau' | translate\"\r\n        [cpPresetEmptyMessage]=\"'chua_co_mau_nao_duoc_them' | translate\"\r\n        [cpPresetColors]=\"themeService.themeColors\"\r\n        (cpPresetColorsChange)=\"themeService.presetColorsChange($event)\"\r\n      />\r\n    </div>\r\n    <!-- Box ch\u1ECDn m\u00E0u -->\r\n    <div>\r\n      <label>{{'ten_mau' | translate}}:</label>\r\n      <select [ngModel]=\"getColorName('fg')\" (ngModelChange)=\"setColor($event, 'fg')\">\r\n        <option *ngFor=\"let c of colorList\" [value]=\"c.name\"\r\n        [style.background]=\"c.hex\" [style.color]=\"c.color\">\r\n          {{c.name}}\r\n        </option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n  <!-- Ch\u1EC9nh \u0111\u1ED9 s\u00E1ng -->\r\n  <div class=\"slider-row\">\r\n    <label>{{'dieu_chinh_do_sang' | translate}}: {{fgLightness}}%</label>\r\n    <nz-slider [nzMin]=\"0\" [nzMax]=\"100\" [nzStep]=\"1\"\r\n      [(ngModel)]=\"fgLightness\"\r\n      (ngModelChange)=\"setLightness($event, 'fg')\"\r\n      [nzTooltipVisible]=\"'never'\"\r\n      class=\"brightness-slider brightness-fg-slider\"\r\n      [style.--fg-slider-gradient]=\"'linear-gradient(to right, #000, ' + fgOriginColor + ' 50%, #fff)'\"\r\n    ></nz-slider>\r\n  </div>\r\n  <!-- M\u00E0u g\u1EE3i \u00FD: C\u00F3 t\u1EF7 l\u1EC7 t\u01B0\u01A1ng ph\u1EA3n \u0111\u1EA1t ti\u00EAu chu\u1EA9n WCAG -->\r\n  <div *ngIf=\"mainColorType == 'bg_color' && suggestedColors.length\" class=\"suggested-colors mt-4\">\r\n    <button\r\n      *ngFor=\"let item of suggestedColors\"\r\n      class=\"suggested-colors__item\"\r\n      (click)=\"onClickSuggestedColors(item, 'fg')\"\r\n      [style.background]=\"item.hex\"\r\n      [class.active]=\"item.hex == fgHex\"\r\n      [matTooltip]=\"item.hex\"\r\n    ></button>\r\n  </div>\r\n</div>\r\n\r\n<!-- BOX: CH\u1ECCN M\u00C0U N\u1EC0N -->\r\n<div class=\"color-box\">\r\n  <!-- Ti\u00EAu \u0111\u1EC1 box -->\r\n  <h3 class=\"title\">{{'mau_nen' | translate}}</h3>\r\n  <div class=\"row\">\r\n    <!-- Nh\u1EADp m\u00E3 m\u00E0u HEX -->\r\n    <div>\r\n      <label>Hex:</label>\r\n      <input [(ngModel)]=\"bgHex\" (change)=\"onHexChange('bg')\" maxlength=\"7\" />\r\n    </div>\r\n    <!-- Nh\u1EADp rgb -->\r\n    <div>\r\n      <label>RGB:</label>\r\n      <input [(ngModel)]=\"bgRgb\" (change)=\"onRgbChange('bg')\" maxlength=\"14\" />\r\n    </div>\r\n    <!-- Ch\u1ECDn m\u00E0u -->\r\n    <div>\r\n      <label>{{'mau' | translate}}:</label>\r\n      <input \r\n        class=\"input-color\" \r\n        type=\"button\" \r\n        [cpOKButton]=\"true\" \r\n        [(colorPicker)]=\"bgHex\" \r\n        [style.background]=\"bgHex\" \r\n        [cpWidth]=\"'230px'\" \r\n        (colorPickerClose)=\"onPickerChange('bg')\"\r\n        [cpMaxPresetColorsLength]=\"themeService.cpMaxPresetColorsLength\"\r\n        [cpAddColorButton]=\"true\"\r\n        [cpAddColorButtonText]=\"'them_mau' | translate\"\r\n        [cpPresetLabel]=\"'bang_mau_mau' | translate\"\r\n        [cpPresetEmptyMessage]=\"'chua_co_mau_nao_duoc_them' | translate\"\r\n        [cpPresetColors]=\"themeService.themeColors\"\r\n        (cpPresetColorsChange)=\"themeService.presetColorsChange($event)\"\r\n      />\r\n    </div>\r\n    <!-- Box ch\u1ECDn m\u00E0u -->\r\n    <div>\r\n      <label>{{'ten_mau' | translate}}:</label>\r\n      <select [ngModel]=\"getColorName('bg')\" (ngModelChange)=\"setColor($event, 'bg')\">\r\n        <option *ngFor=\"let c of colorList\" [value]=\"c.name\"\r\n        [style.background]=\"c.hex\" [style.color]=\"c.color\">\r\n          {{c.name}}\r\n        </option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n  <!-- Ch\u1EC9nh \u0111\u1ED9 s\u00E1ng -->\r\n  <div class=\"slider-row\">\r\n    <label>{{'dieu_chinh_do_sang' | translate}}: {{bgLightness}}%</label>\r\n    <nz-slider [nzMin]=\"0\" [nzMax]=\"100\" [nzStep]=\"1\"\r\n      [(ngModel)]=\"bgLightness\"\r\n      (ngModelChange)=\"setLightness($event, 'bg')\"\r\n      [nzTooltipVisible]=\"'never'\"\r\n      class=\"brightness-slider brightness-bg-slider\"\r\n      [style.--bg-slider-gradient]=\"'linear-gradient(to right, #000, ' + bgOriginColor + ' 50%, #fff)'\"\r\n    ></nz-slider>\r\n  </div>\r\n  <!-- M\u00E0u g\u1EE3i \u00FD: C\u00F3 t\u1EF7 l\u1EC7 t\u01B0\u01A1ng ph\u1EA3n \u0111\u1EA1t ti\u00EAu chu\u1EA9n WCAG -->\r\n  <div *ngIf=\"mainColorType == 'text_or_icon_color' && suggestedColors.length\" class=\"suggested-colors mt-4\">\r\n    <button\r\n      *ngFor=\"let item of suggestedColors\"\r\n      class=\"suggested-colors__item\"\r\n      (click)=\"onClickSuggestedColors(item, 'bg')\"\r\n      [style.background]=\"item.hex\"\r\n      [class.active]=\"item.hex == bgHex\"\r\n      [matTooltip]=\"item.hex\"\r\n    ></button>\r\n  </div>\r\n</div>\r\n\r\n<!-- BOX: k\u1EBET QU\u1EA2 -->\r\n<div class=\"result-box\">\r\n  <!-- Ti\u00EAu \u0111\u1EC1 box -->\r\n  <h3 class=\"title\">{{'ket_qua' | translate}}</h3>\r\n  <!-- M\u1EABu \u0111\u1EC3 xem khi \u0111\u1ED5i m\u00E0u -->\r\n  <div class=\"sample-text\" [style.background]=\"bgHex\" [style.color]=\"fgHex\">\r\n    <span style=\"font-size: 1rem;\">Small sample text.</span>\r\n    <br>\r\n    <span style=\"font-size: 2rem;\">Large sample text.</span>\r\n  </div>\r\n  <!-- T\u1EF7 l\u1EC7 t\u01B0\u01A1ng ph\u1EA3n -->\r\n  <div class=\"contrast-ratio my-3\">\r\n    <b>\r\n      {{'ty_le_tuong_phan' | translate}} = {{getContrastRatio()}} : 1 \r\n      <span [style.color]=\"getContrastRatio() >= 4.5 ? 'green' : 'red'\">\r\n        &#8658; {{'lon_hon_hoac_bang_4.5_la_DAT' | translate}}\r\n      </span>\r\n    </b>\r\n  </div>\r\n  <!-- B\u1EA3ng \u0111\u00E1nh gi\u00E1 \u0111\u1ED9 t\u01B0\u01A1ng ph\u1EA3n c\u00F3 \u0111\u1EA1t hay kh\u00F4ng \u0111\u1EA1t -->\r\n  <table class=\"wcag-table\">\r\n    <tr>\r\n      <th style=\"width: 20%\">{{'tieu_chuan_wcag' | translate}}</th>\r\n      <th style=\"width: 30%\">{{'van_ban_nho' | translate}}</th>\r\n      <th>{{'van_ban_lon_icon_thanh_phan_ui_va_doi_tuong_do_hoa' | translate}}</th>\r\n    </tr>\r\n    <tr *ngFor=\"let item of levelsWCAG\">\r\n      <td style=\"font-weight: 600\" [matTooltip]=\"item.tooltip | translate\">\r\n        {{item.key}} <i class=\"bi bi-question-square\"></i>\r\n      </td>\r\n      <td class=\"fail\" [ngClass]=\"{'pass': getWCAGResults()[item.key + '_small']}\">\r\n        {{(getWCAGResults()[item.key + '_small'] ? 'dat' : 'khong_dat') | translate}}\r\n      </td>\r\n      <td class=\"fail\" [ngClass]=\"{'pass': getWCAGResults()[item.key + '_large']}\">\r\n        {{(getWCAGResults()[item.key + '_large'] ? 'dat' : 'khong_dat') | translate}}\r\n      </td>\r\n    </tr>\r\n  </table>\r\n</div>\r\n", styles: [".title-box{display:flex}.title-box .title-container{font-weight:bold;text-align:center;margin:0 0 8px;flex:1}.title-box .close-icon{color:#900;cursor:pointer}.title-box .close-icon:hover{opacity:.8}.title{font-weight:500!important;text-align:center!important;margin:0 0 4px!important;font-size:18px!important}.select-box{display:flex;justify-content:space-between;margin-bottom:4px}.color-box{background:#fff;border:1px solid #ddd;border-radius:8px;padding:12px;margin-bottom:12px}.row{display:flex;grid-gap:8px;gap:8px;margin:0 0 8px;justify-content:space-between}.row>div{display:flex;flex-direction:column}.input-color{width:50px!important}.slider-row{text-align:center}.brightness-slider{width:100%;margin:20px 0}.brightness-slider ::ng-deep .ant-slider-handle{width:18px;height:28px;background:#fff;border:2px solid #000;border-radius:2px;margin-top:-9px}.brightness-slider ::ng-deep .ant-slider-handle:hover{box-shadow:none}.brightness-slider ::ng-deep .ant-slider-track{background:none!important}.brightness-bg-slider ::ng-deep .ant-slider-track,.brightness-bg-slider ::ng-deep .ant-slider-rail{background:var(--bg-slider-gradient);height:10px;border-radius:0}.brightness-fg-slider ::ng-deep .ant-slider-track,.brightness-fg-slider ::ng-deep .ant-slider-rail{background:var(--fg-slider-gradient);height:10px;border-radius:0}.suggested-colors{display:flex;grid-gap:8px;gap:8px}.suggested-colors__item{border-radius:100px;width:30px;height:30px;border:2px solid #a0a0a0;cursor:pointer}.suggested-colors__item.active{border-color:#00a859}.result-box{background:#fff;border:1px solid #bbb;border-radius:8px;padding:12px}.sample-text{text-align:center;border-radius:4px;margin-bottom:12px;border:1px solid #ddd;padding:8px;min-height:60px}.contrast-ratio{font-size:1.1rem;margin-bottom:8px}.wcag-table{width:100%;border-collapse:collapse;margin-top:8px}.wcag-table th,.wcag-table td{border:1px solid #bbb;padding:6px 10px;text-align:center}.wcag-table th{background:#eee}.pass{background:#acf79b!important;color:#000!important;font-weight:400!important;text-transform:capitalize!important}.fail{background:#900;color:#fff;font-weight:600;text-transform:uppercase}::ng-deep .mat-tooltip{font-size:14px!important;text-align:justify!important;white-space:pre-line!important;max-width:300px!important}\n"], components: [{ type: i12$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.NzSliderComponent, selector: "nz-slider", inputs: ["nzDisabled", "nzDots", "nzIncluded", "nzRange", "nzVertical", "nzReverse", "nzMarks", "nzMax", "nzMin", "nzStep", "nzTooltipVisible", "nzTooltipPlacement", "nzDefaultValue", "nzTipFormatter"], outputs: ["nzOnAfterChange"], exportAs: ["nzSlider"] }], directives: [{ type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i12.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i16$2.ColorPickerDirective, selector: "[colorPicker]", inputs: ["cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpPresetLabel", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "colorPicker", "cpPresetColors"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { type: i12$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i7.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { type: i7.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { type: i7.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { type: i12$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i12$2.TranslatePipe } });
+ColorContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ColorContrastComponent, selector: "app-color-contrast", ngImport: i0, template: "<div class=\"color-contrast-dialog\">\r\n  <!-- BOX: CH\u1ECCN M\u00C0U CH\u1EEE/M\u00C0U BI\u1EC2U T\u01AF\u1EE2NG -->\r\n  <div class=\"title-box\">\r\n    <!-- Ti\u00EAu \u0111\u1EC1 -->\r\n    <h2 class=\"title-container\">{{'phan_tich_do_tuong_phan_mau' | translate}}</h2>\r\n    \r\n    <!-- Icon close -->\r\n    <mat-icon *ngIf=\"data?.hasOwnProperty('colorContrast')\" class=\"close-icon\" (click)=\"close()\">\r\n      close\r\n    </mat-icon>\r\n  </div>\r\n  <div class=\"select-box\">\r\n    <!-- Ti\u00EAu \u0111\u1EC1 box -->\r\n    <h3 class=\"title\">{{ 'mau_chu_dao' | translate }}</h3>\r\n\r\n    <!-- L\u1EF1a ch\u1ECDn m\u00E0u ch\u1EE7 \u0111\u1EA1o c\u1EE7a ch\u1EEF hay n\u1EC1n -->\r\n    <select [(ngModel)]=\"mainColorType\" (ngModelChange)=\"suggestedColors = getSuggestedColors()\">\r\n      <option [value]=\"'text_or_icon_color'\">\r\n        {{ \r\n          (\r\n            data?.hasOwnProperty('colorContrast') \r\n            ? (data.colorContrast.typeFgColor == 'text' ? 'mau_chu' : 'mau_bieu_tuong') \r\n            : 'mau_chu_mau_bieu_tuong'\r\n          ) | translate \r\n        }}\r\n      </option>\r\n      <option [value]=\"'bg_color'\">{{ 'mau_nen' | translate }}</option>\r\n    </select>\r\n  </div>\r\n  <div class=\"color-box\">\r\n    <!-- Ti\u00EAu \u0111\u1EC1 box -->\r\n    <h3 class=\"title\">\r\n      {{ \r\n        (\r\n          data?.hasOwnProperty('colorContrast') \r\n          ? (data.colorContrast.typeFgColor == 'text' ? 'mau_chu' : 'mau_bieu_tuong') \r\n          : 'mau_chu_mau_bieu_tuong'\r\n        ) | translate \r\n      }}\r\n    </h3>\r\n    <div class=\"row-dialog\">\r\n      <!-- Nh\u1EADp m\u00E3 m\u00E0u HEX -->\r\n      <div>\r\n        <label>Hex:</label>\r\n        <input [(ngModel)]=\"fgHex\" (change)=\"onHexChange('fg')\" maxlength=\"7\" />\r\n      </div>\r\n      <!-- Nh\u1EADp rgb -->\r\n      <div>\r\n        <label>RGB:</label>\r\n        <input [(ngModel)]=\"fgRgb\" (change)=\"onRgbChange('fg')\" maxlength=\"14\" />\r\n      </div>\r\n      <!-- Ch\u1ECDn m\u00E0u -->\r\n      <div>\r\n        <label>{{'mau' | translate}}:</label>\r\n        <input \r\n          class=\"input-color\" \r\n          type=\"button\" \r\n          [cpOKButton]=\"true\" \r\n          [(colorPicker)]=\"fgHex\" \r\n          [style.background]=\"fgHex\" \r\n          [cpWidth]=\"'230px'\" \r\n          (colorPickerClose)=\"onPickerChange('fg')\"\r\n          [cpMaxPresetColorsLength]=\"themeService.cpMaxPresetColorsLength\"\r\n          [cpAddColorButton]=\"true\"\r\n          [cpAddColorButtonText]=\"'them_mau' | translate\"\r\n          [cpPresetLabel]=\"'bang_mau_mau' | translate\"\r\n          [cpPresetEmptyMessage]=\"'chua_co_mau_nao_duoc_them' | translate\"\r\n          [cpPresetColors]=\"themeService.themeColors\"\r\n          (cpPresetColorsChange)=\"themeService.presetColorsChange($event)\"\r\n        />\r\n      </div>\r\n      <!-- Box ch\u1ECDn m\u00E0u -->\r\n      <div>\r\n        <label>{{'ten_mau' | translate}}:</label>\r\n        <select [ngModel]=\"getColorName('fg')\" (ngModelChange)=\"setColor($event, 'fg')\">\r\n          <option *ngFor=\"let c of colorList\" [value]=\"c.name\"\r\n          [style.background]=\"c.hex\" [style.color]=\"c.color\">\r\n            {{c.name}}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n    <!-- Ch\u1EC9nh \u0111\u1ED9 s\u00E1ng -->\r\n    <div class=\"slider-row-dialog\">\r\n      <label>{{'dieu_chinh_do_sang' | translate}}: {{fgLightness}}%</label>\r\n      <nz-slider [nzMin]=\"0\" [nzMax]=\"100\" [nzStep]=\"1\"\r\n        [(ngModel)]=\"fgLightness\"\r\n        (ngModelChange)=\"setLightness($event, 'fg')\"\r\n        [nzTooltipVisible]=\"'never'\"\r\n        class=\"brightness-slider brightness-fg-slider\"\r\n        [style.--fg-slider-gradient]=\"'linear-gradient(to right, #000, ' + fgOriginColor + ' 50%, #fff)'\"\r\n      ></nz-slider>\r\n    </div>\r\n    <!-- M\u00E0u g\u1EE3i \u00FD: C\u00F3 t\u1EF7 l\u1EC7 t\u01B0\u01A1ng ph\u1EA3n \u0111\u1EA1t ti\u00EAu chu\u1EA9n WCAG -->\r\n    <div *ngIf=\"mainColorType == 'bg_color' && suggestedColors.length\" class=\"suggested-colors mt-4\">\r\n      <button\r\n        *ngFor=\"let item of suggestedColors\"\r\n        class=\"suggested-colors__item\"\r\n        (click)=\"onClickSuggestedColors(item, 'fg')\"\r\n        [style.background]=\"item.hex\"\r\n        [class.active]=\"item.hex == fgHex\"\r\n        [matTooltip]=\"item.hex\"\r\n      ></button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- BOX: CH\u1ECCN M\u00C0U N\u1EC0N -->\r\n  <div class=\"color-box\">\r\n    <!-- Ti\u00EAu \u0111\u1EC1 box -->\r\n    <h3 class=\"title\">{{'mau_nen' | translate}}</h3>\r\n    <div class=\"row-dialog\">\r\n      <!-- Nh\u1EADp m\u00E3 m\u00E0u HEX -->\r\n      <div>\r\n        <label>Hex:</label>\r\n        <input [(ngModel)]=\"bgHex\" (change)=\"onHexChange('bg')\" maxlength=\"7\" />\r\n      </div>\r\n      <!-- Nh\u1EADp rgb -->\r\n      <div>\r\n        <label>RGB:</label>\r\n        <input [(ngModel)]=\"bgRgb\" (change)=\"onRgbChange('bg')\" maxlength=\"14\" />\r\n      </div>\r\n      <!-- Ch\u1ECDn m\u00E0u -->\r\n      <div>\r\n        <label>{{'mau' | translate}}:</label>\r\n        <input \r\n          class=\"input-color\" \r\n          type=\"button\" \r\n          [cpOKButton]=\"true\" \r\n          [(colorPicker)]=\"bgHex\" \r\n          [style.background]=\"bgHex\" \r\n          [cpWidth]=\"'230px'\" \r\n          (colorPickerClose)=\"onPickerChange('bg')\"\r\n          [cpMaxPresetColorsLength]=\"themeService.cpMaxPresetColorsLength\"\r\n          [cpAddColorButton]=\"true\"\r\n          [cpAddColorButtonText]=\"'them_mau' | translate\"\r\n          [cpPresetLabel]=\"'bang_mau_mau' | translate\"\r\n          [cpPresetEmptyMessage]=\"'chua_co_mau_nao_duoc_them' | translate\"\r\n          [cpPresetColors]=\"themeService.themeColors\"\r\n          (cpPresetColorsChange)=\"themeService.presetColorsChange($event)\"\r\n        />\r\n      </div>\r\n      <!-- Box ch\u1ECDn m\u00E0u -->\r\n      <div>\r\n        <label>{{'ten_mau' | translate}}:</label>\r\n        <select [ngModel]=\"getColorName('bg')\" (ngModelChange)=\"setColor($event, 'bg')\">\r\n          <option *ngFor=\"let c of colorList\" [value]=\"c.name\"\r\n          [style.background]=\"c.hex\" [style.color]=\"c.color\">\r\n            {{c.name}}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n    <!-- Ch\u1EC9nh \u0111\u1ED9 s\u00E1ng -->\r\n    <div class=\"slider-row-dialog\">\r\n      <label>{{'dieu_chinh_do_sang' | translate}}: {{bgLightness}}%</label>\r\n      <nz-slider [nzMin]=\"0\" [nzMax]=\"100\" [nzStep]=\"1\"\r\n        [(ngModel)]=\"bgLightness\"\r\n        (ngModelChange)=\"setLightness($event, 'bg')\"\r\n        [nzTooltipVisible]=\"'never'\"\r\n        class=\"brightness-slider brightness-bg-slider\"\r\n        [style.--bg-slider-gradient]=\"'linear-gradient(to right, #000, ' + bgOriginColor + ' 50%, #fff)'\"\r\n      ></nz-slider>\r\n    </div>\r\n    <!-- M\u00E0u g\u1EE3i \u00FD: C\u00F3 t\u1EF7 l\u1EC7 t\u01B0\u01A1ng ph\u1EA3n \u0111\u1EA1t ti\u00EAu chu\u1EA9n WCAG -->\r\n    <div *ngIf=\"mainColorType == 'text_or_icon_color' && suggestedColors.length\" class=\"suggested-colors mt-4\">\r\n      <button\r\n        *ngFor=\"let item of suggestedColors\"\r\n        class=\"suggested-colors__item\"\r\n        (click)=\"onClickSuggestedColors(item, 'bg')\"\r\n        [style.background]=\"item.hex\"\r\n        [class.active]=\"item.hex == bgHex\"\r\n        [matTooltip]=\"item.hex\"\r\n      ></button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- BOX: k\u1EBET QU\u1EA2 -->\r\n  <div class=\"result-box\">\r\n    <!-- Ti\u00EAu \u0111\u1EC1 box -->\r\n    <h3 class=\"title\">{{'ket_qua' | translate}}</h3>\r\n    <!-- M\u1EABu \u0111\u1EC3 xem khi \u0111\u1ED5i m\u00E0u -->\r\n    <div class=\"sample-text\" [style.background]=\"bgHex\" [style.color]=\"fgHex\">\r\n      <span style=\"font-size: 1rem;\">Small sample text.</span>\r\n      <br>\r\n      <span style=\"font-size: 2rem;\">Large sample text.</span>\r\n    </div>\r\n    <!-- T\u1EF7 l\u1EC7 t\u01B0\u01A1ng ph\u1EA3n -->\r\n    <div class=\"contrast-ratio my-3\">\r\n      <b>\r\n        {{'ty_le_tuong_phan' | translate}} = {{getContrastRatio()}} : 1 \r\n        <span [style.color]=\"getContrastRatio() >= 4.5 ? 'green' : 'red'\">\r\n          &#8658; {{'lon_hon_hoac_bang_4.5_la_DAT' | translate}}\r\n        </span>\r\n      </b>\r\n    </div>\r\n    <!-- B\u1EA3ng \u0111\u00E1nh gi\u00E1 \u0111\u1ED9 t\u01B0\u01A1ng ph\u1EA3n c\u00F3 \u0111\u1EA1t hay kh\u00F4ng \u0111\u1EA1t -->\r\n    <table class=\"wcag-table\">\r\n      <tr>\r\n        <th style=\"width: 20%\">{{'tieu_chuan_wcag' | translate}}</th>\r\n        <th style=\"width: 30%\">{{'van_ban_nho' | translate}}</th>\r\n        <th>{{'van_ban_lon_icon_thanh_phan_ui_va_doi_tuong_do_hoa' | translate}}</th>\r\n      </tr>\r\n      <tr *ngFor=\"let item of levelsWCAG\">\r\n        <td style=\"font-weight: 600\" [matTooltip]=\"item.tooltip | translate\">\r\n          {{item.key}} <i class=\"bi bi-question-square\"></i>\r\n        </td>\r\n        <td class=\"fail\" [ngClass]=\"{'pass': getWCAGResults()[item.key + '_small']}\">\r\n          {{(getWCAGResults()[item.key + '_small'] ? 'dat' : 'khong_dat') | translate}}\r\n        </td>\r\n        <td class=\"fail\" [ngClass]=\"{'pass': getWCAGResults()[item.key + '_large']}\">\r\n          {{(getWCAGResults()[item.key + '_large'] ? 'dat' : 'khong_dat') | translate}}\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n</div>\r\n", styles: [".color-contrast-dialog .title-box{display:flex}.color-contrast-dialog .title-box .title-container{font-weight:bold;text-align:center;margin:0 0 8px;flex:1}.color-contrast-dialog .title-box .close-icon{color:#900;cursor:pointer}.color-contrast-dialog .title-box .close-icon:hover{opacity:.8}.color-contrast-dialog .title{font-weight:500!important;text-align:center!important;margin:0 0 4px!important;font-size:18px!important}.color-contrast-dialog .select-box{display:flex;justify-content:space-between;margin-bottom:4px}.color-contrast-dialog .color-box{background:#fff;border:1px solid #ddd;border-radius:8px;padding:12px;margin-bottom:12px}.color-contrast-dialog .row-dialog{display:flex;grid-gap:8px;gap:8px;margin:0 0 8px;justify-content:space-between}.color-contrast-dialog .row-dialog>div{display:flex;flex-direction:column}.color-contrast-dialog .input-color{width:50px!important}.color-contrast-dialog .slider-row-dialog{text-align:center}.color-contrast-dialog .brightness-slider{width:100%;margin:20px 0}.color-contrast-dialog .brightness-slider ::ng-deep .ant-slider-handle{width:18px;height:28px;background:#fff;border:2px solid #000;border-radius:2px;margin-top:-9px}.color-contrast-dialog .brightness-slider ::ng-deep .ant-slider-handle:hover{box-shadow:none}.color-contrast-dialog .brightness-slider ::ng-deep .ant-slider-track{background:none!important}.color-contrast-dialog .brightness-bg-slider ::ng-deep .ant-slider-track,.color-contrast-dialog .brightness-bg-slider ::ng-deep .ant-slider-rail{background:var(--bg-slider-gradient);height:10px;border-radius:0}.color-contrast-dialog .brightness-fg-slider ::ng-deep .ant-slider-track,.color-contrast-dialog .brightness-fg-slider ::ng-deep .ant-slider-rail{background:var(--fg-slider-gradient);height:10px;border-radius:0}.color-contrast-dialog .suggested-colors{display:flex;grid-gap:8px;gap:8px}.color-contrast-dialog .suggested-colors__item{border-radius:100px;width:30px;height:30px;border:2px solid #a0a0a0;cursor:pointer}.color-contrast-dialog .suggested-colors__item.active{border-color:#00a859}.color-contrast-dialog .result-box{background:#fff;border:1px solid #bbb;border-radius:8px;padding:12px}.color-contrast-dialog .sample-text{text-align:center;border-radius:4px;margin-bottom:12px;border:1px solid #ddd;padding:8px;min-height:60px}.color-contrast-dialog .contrast-ratio{font-size:1.1rem;margin-bottom:8px}.color-contrast-dialog .wcag-table{width:100%;border-collapse:collapse;margin-top:8px}.color-contrast-dialog .wcag-table th,.color-contrast-dialog .wcag-table td{border:1px solid #bbb;padding:6px 10px;text-align:center}.color-contrast-dialog .wcag-table th{background:#eee}.color-contrast-dialog .pass{background:#acf79b!important;color:#000!important;font-weight:400!important;text-transform:capitalize!important}.color-contrast-dialog .fail{background:#900;color:#fff;font-weight:600;text-transform:uppercase}.color-contrast-dialog ::ng-deep .mat-tooltip{font-size:14px!important;text-align:justify!important;white-space:pre-line!important;max-width:300px!important}\n"], components: [{ type: i12$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.NzSliderComponent, selector: "nz-slider", inputs: ["nzDisabled", "nzDots", "nzIncluded", "nzRange", "nzVertical", "nzReverse", "nzMarks", "nzMax", "nzMin", "nzStep", "nzTooltipVisible", "nzTooltipPlacement", "nzDefaultValue", "nzTipFormatter"], outputs: ["nzOnAfterChange"], exportAs: ["nzSlider"] }], directives: [{ type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i12.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i16$2.ColorPickerDirective, selector: "[colorPicker]", inputs: ["cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpPresetLabel", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "colorPicker", "cpPresetColors"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { type: i12$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i7.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { type: i7.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { type: i7.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { type: i12$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i12$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ColorContrastComponent, decorators: [{
             type: Component,
             args: [{