@seniorsistemas/data-seniorx-core 2.1.0 → 2.2.0

package/esm2022/features/color-picker/color-picker.component.mjs

@@ -121,7 +121,7 @@ export class ColorPickerComponent extends InputsComponent {
                 useExisting: forwardRef(() => ColorPickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sdc-color-picker\">\n  @if (labelKey() || hasTooltip) {\n    <div class=\"sdc-color-picker__label-row\">\n      @if (labelKey()) {\n        <label [for]=\"controlId\" class=\"sdc-color-picker__label\">\n          <span class=\"sdc-color-picker__label-text\">\n            {{ labelKey() | translate }}\n            @if (required) {\n              <span class=\"required-field\" aria-hidden=\"true\">*</span>\n            }\n            @if (required) {\n              <span class=\"sr-only\">\n                {{ 'platform.datacore.accessibility.required_field' | translate }}\n              </span>\n            }\n          </span>\n        </label>\n      }\n      @if (hasTooltip) {\n        <sdc-tooltip\n          class=\"sdc-color-picker__info-tooltip-wrap\"\n          [pTooltip]=\"infoTooltip\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipEvent]=\"infoTooltipEvent\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\"\n          >\n          <i class=\"fas fa-info-circle sdc-color-picker__info-tooltip-icon\" aria-hidden=\"true\"></i>\n        </sdc-tooltip>\n      }\n    </div>\n  }\n\n  <div\n    class=\"sdc-color-picker__control\"\n    [ngStyle]=\"getInputStyle()\"\n    [class.sdc-color-picker__control--invalid]=\"invalid\"\n    [class.sdc-color-picker__control--disabled]=\"disabled\"\n    >\n    <input\n      class=\"sdc-color-picker__input\"\n      [id]=\"controlId\"\n      [name]=\"identity.name\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [value]=\"displayValue\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [attr.aria-label]=\"resolvedAriaLabel\"\n      [attr.aria-required]=\"required ? 'true' : null\"\n      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n      [attr.aria-describedby]=\"messageKey() ? controlId + '-error' : null\"\n      [ngClass]=\"getInvalidClass()\"\n      type=\"text\"\n      inputmode=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      (input)=\"onTextInput($event)\"\n      (blur)=\"onBlur()\"\n      />\n\n      <button\n        type=\"button\"\n        class=\"sdc-color-picker__trigger\"\n        [disabled]=\"disabled\"\n        [attr.aria-label]=\"resolvedTriggerAriaLabel\"\n        (click)=\"openNativePicker()\"\n        >\n        <span class=\"sdc-color-picker__swatch\" [style.background]=\"previewColor\"></span>\n        <i class=\"fas fa-eye-dropper sdc-color-picker__trigger-icon\" aria-hidden=\"true\"></i>\n      </button>\n      <label [for]=\"controlId + '-native'\" class=\"sr-only\">{{ resolvedTriggerAriaLabel }}</label>\n      <input\n        #nativeInputRef\n        class=\"sdc-color-picker__native\"\n        [id]=\"controlId + '-native'\"\n        type=\"color\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [value]=\"nativeColorValue\"\n        [attr.aria-label]=\"resolvedTriggerAriaLabel\"\n        (input)=\"onNativeColorInput($event)\"\n        />\n      </div>\n\n      @if (messageKey()) {\n        <small\n          [id]=\"controlId + '-error'\"\n          [ngClass]=\"getInvalidMessageClass()\"\n          role=\"alert\"\n          aria-live=\"polite\"\n          >\n          {{ messageKey() | translate }}\n        </small>\n      }\n    </div>\n", styles: [".sdc-color-picker .sdc-color-picker__label-row{display:flex;align-items:center;gap:var(--sdc-form-label-row-gap);margin-bottom:var(--sdc-form-label-row-mb)}.sdc-color-picker .sdc-color-picker__label{display:inline-flex;align-items:center;margin-bottom:0;line-height:1;padding-top:var(--sdc-form-label-py);padding-bottom:var(--sdc-form-label-py);min-width:0}.sdc-color-picker .sdc-color-picker__label-text{display:inline-flex;align-items:center}.sdc-color-picker .required-field{margin-left:var(--sdc-form-required-ml);color:var(--sdc-form-required-color, var(--sdc-error-color, #d98888));font-weight:400}.sdc-color-picker .sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sdc-color-picker .sdc-color-picker__info-tooltip-wrap{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;margin:0}.sdc-color-picker .sdc-color-picker__info-tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--sdc-form-tooltip-size);height:var(--sdc-form-tooltip-size);line-height:1;cursor:pointer;color:var(--sdc-form-tooltip-color)}.sdc-color-picker .sdc-color-picker__control{position:relative;display:flex;align-items:stretch;width:100%;min-height:var(--sdc-formfield-default-height);height:var(--sdc-formfield-default-height);border:1px solid var(--sdc-formfield-default-border);border-radius:var(--sdc-formfield-border-radius);background-color:var(--sdc-formfield-default-bg);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;box-sizing:border-box}.sdc-color-picker .sdc-color-picker__control:focus-within{border-color:var(--sdc-formfield-focus-color, var(--sdc-tab-primary, #007bff));box-shadow:var(--sdc-formfield-focus-shadow, 0 0 0 2px rgba(0, 123, 255, .14))}.sdc-color-picker .sdc-color-picker__control--invalid,.sdc-color-picker .sdc-color-picker__control--invalid:focus-within{border-color:var(--sdc-formfield-invalid-border, var(--sdc-error-color, #d98888));box-shadow:var(--sdc-formfield-invalid-focus-shadow, 0 0 0 2px rgba(217, 136, 136, .16))}.sdc-color-picker .sdc-color-picker__control--disabled{background-color:var(--sdc-formfield-disabled-bg)}.sdc-color-picker .sdc-color-picker__input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;color:var(--p-text-color, #111827);font:inherit;padding:0 var(--sdc-form-input-padding-x)}.sdc-color-picker .sdc-color-picker__input::placeholder{color:var(--sdc-formfield-placeholder-color, #9ca3af)}.sdc-color-picker .sdc-color-picker__input:disabled{cursor:not-allowed}.sdc-color-picker .sdc-color-picker__trigger{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex:0 0 var(--sdc-color-picker-trigger-width, 3.5rem);width:var(--sdc-color-picker-trigger-width, 3.5rem);border:0;border-left:1px solid var(--sdc-formfield-default-border);background:var(--sdc-color-picker-trigger-bg, #f8fafc);color:var(--sdc-color-picker-trigger-color, var(--sdc-text-default, #111827));cursor:pointer;transition:background-color .18s ease}.sdc-color-picker .sdc-color-picker__trigger:disabled{cursor:not-allowed;background:var(--sdc-formfield-disabled-bg)}.sdc-color-picker .sdc-color-picker__trigger:hover:not(:disabled){background:var(--sdc-color-picker-trigger-hover-bg, #eef2f7)}.sdc-color-picker .sdc-color-picker__swatch{width:var(--sdc-color-picker-swatch-size, 1.125rem);height:var(--sdc-color-picker-swatch-size, 1.125rem);border-radius:999px;border:1px solid var(--sdc-color-picker-swatch-border, rgba(17, 24, 39, .14));box-shadow:inset 0 0 0 1px #ffffff2e;flex:0 0 auto}.sdc-color-picker .sdc-color-picker__trigger-icon{font-size:.875rem}.sdc-color-picker .sdc-color-picker__native{position:absolute;inset:0;width:1px;height:1px;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: TooltipComponent, selector: "sdc-tooltip", inputs: ["pTooltip", "tooltipPosition", "tooltipEvent", "fitContent", "tooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sdc-color-picker\">\n  @if (labelKey() || hasTooltip) {\n    <div class=\"sdc-color-picker__label-row\">\n      @if (labelKey()) {\n        <label [for]=\"controlId\" class=\"sdc-color-picker__label\">\n          <span class=\"sdc-color-picker__label-text\">\n            {{ labelKey() | translate }}\n            @if (required) {\n              <span class=\"required-field\" aria-hidden=\"true\">*</span>\n            }\n            @if (required) {\n              <span class=\"sr-only\">\n                {{ 'platform.datacore.accessibility.required_field' | translate }}\n              </span>\n            }\n          </span>\n        </label>\n      }\n      @if (hasTooltip) {\n        <sdc-tooltip\n          class=\"sdc-color-picker__info-tooltip-wrap\"\n          [pTooltip]=\"infoTooltip\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipEvent]=\"infoTooltipEvent\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\"\n          >\n          <i class=\"fas fa-info-circle sdc-color-picker__info-tooltip-icon\" aria-hidden=\"true\"></i>\n        </sdc-tooltip>\n      }\n    </div>\n  }\n\n  <div\n    class=\"sdc-color-picker__control\"\n    [ngStyle]=\"getInputStyle()\"\n    [class.sdc-color-picker__control--invalid]=\"invalid\"\n    [class.sdc-color-picker__control--disabled]=\"disabled\"\n    >\n    <input\n      class=\"sdc-color-picker__input\"\n      [id]=\"controlId\"\n      [name]=\"identity.name\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [value]=\"displayValue\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [attr.aria-label]=\"resolvedAriaLabel\"\n      [attr.aria-required]=\"required ? 'true' : null\"\n      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n      [attr.aria-describedby]=\"messageKey() ? controlId + '-error' : null\"\n      [ngClass]=\"getInvalidClass()\"\n      type=\"text\"\n      inputmode=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      (input)=\"onTextInput($event)\"\n      (blur)=\"onBlur()\"\n      />\n\n      <button\n        type=\"button\"\n        class=\"sdc-color-picker__trigger\"\n        [disabled]=\"disabled\"\n        [attr.aria-label]=\"resolvedTriggerAriaLabel\"\n        (click)=\"openNativePicker()\"\n        >\n        <span class=\"sdc-color-picker__swatch\" [style.background]=\"previewColor\"></span>\n        <i class=\"fas fa-eye-dropper sdc-color-picker__trigger-icon\" aria-hidden=\"true\"></i>\n      </button>\n      <label [for]=\"controlId + '-native'\" class=\"sr-only\">{{ resolvedTriggerAriaLabel }}</label>\n      <input\n        #nativeInputRef\n        class=\"sdc-color-picker__native\"\n        [id]=\"controlId + '-native'\"\n        type=\"color\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [value]=\"nativeColorValue\"\n        [attr.aria-label]=\"resolvedTriggerAriaLabel\"\n        (input)=\"onNativeColorInput($event)\"\n        />\n      </div>\n\n      @if (messageKey()) {\n        <small\n          [id]=\"controlId + '-error'\"\n          [ngClass]=\"getInvalidMessageClass()\"\n          role=\"alert\"\n          aria-live=\"polite\"\n          >\n          {{ messageKey() | translate }}\n        </small>\n      }\n    </div>\n", styles: [".sdc-color-picker .sdc-color-picker__label-row{display:flex;align-items:center;gap:var(--sdc-form-label-row-gap);margin-bottom:var(--sdc-form-label-row-mb)}.sdc-color-picker .sdc-color-picker__label{display:inline-flex;align-items:center;margin-bottom:0;line-height:1;padding-top:var(--sdc-form-label-py);padding-bottom:var(--sdc-form-label-py);min-width:0}.sdc-color-picker .sdc-color-picker__label-text{display:inline-flex;align-items:center}.sdc-color-picker .required-field{margin-left:var(--sdc-form-required-ml);color:var(--sdc-form-required-color, var(--sdc-error-color, #d98888));font-weight:400}.sdc-color-picker .sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sdc-color-picker .sdc-color-picker__info-tooltip-wrap{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;margin:0}.sdc-color-picker .sdc-color-picker__info-tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--sdc-form-tooltip-size);height:var(--sdc-form-tooltip-size);line-height:1;cursor:pointer;color:var(--sdc-form-tooltip-color)}.sdc-color-picker .sdc-color-picker__control{position:relative;display:flex;align-items:stretch;width:100%;min-height:var(--sdc-formfield-default-height);height:var(--sdc-formfield-default-height);border:1px solid var(--sdc-formfield-default-border);border-radius:var(--sdc-formfield-border-radius);background-color:var(--sdc-formfield-default-bg);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;box-sizing:border-box}.sdc-color-picker .sdc-color-picker__control:focus-within{border-color:var(--sdc-formfield-focus-color, var(--sdc-tab-primary, #007bff));box-shadow:var(--sdc-formfield-focus-shadow, 0 0 0 2px rgba(0, 123, 255, .14))}.sdc-color-picker .sdc-color-picker__control--invalid,.sdc-color-picker .sdc-color-picker__control--invalid:focus-within{border-color:var(--sdc-formfield-invalid-border, var(--sdc-error-color, #d98888));box-shadow:var(--sdc-formfield-invalid-focus-shadow, 0 0 0 2px rgba(217, 136, 136, .16))}.sdc-color-picker .sdc-color-picker__control--disabled{background-color:var(--sdc-formfield-disabled-bg)}.sdc-color-picker .sdc-color-picker__input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;color:var(--p-text-color, #111827);font:inherit;padding:0 var(--sdc-form-input-padding-x)}.sdc-color-picker .sdc-color-picker__input::placeholder{color:var(--sdc-formfield-placeholder-color, #9ca3af)}.sdc-color-picker .sdc-color-picker__input:disabled{cursor:not-allowed}.sdc-color-picker .sdc-color-picker__trigger{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex:0 0 var(--sdc-color-picker-trigger-width, 3.5rem);width:var(--sdc-color-picker-trigger-width, 3.5rem);border:0;border-left:1px solid var(--sdc-formfield-default-border);background:var(--sdc-color-picker-trigger-bg, #f8fafc);color:var(--sdc-color-picker-trigger-color, var(--sdc-text-default, #111827));cursor:pointer;transition:background-color .18s ease}.sdc-color-picker .sdc-color-picker__trigger:disabled{cursor:not-allowed;background:var(--sdc-formfield-disabled-bg)}.sdc-color-picker .sdc-color-picker__trigger:hover:not(:disabled){background:var(--sdc-color-picker-trigger-hover-bg, #eef2f7)}.sdc-color-picker .sdc-color-picker__swatch{width:var(--sdc-color-picker-swatch-size, 1.125rem);height:var(--sdc-color-picker-swatch-size, 1.125rem);border-radius:999px;border:1px solid var(--sdc-color-picker-swatch-border, rgba(17, 24, 39, .14));box-shadow:inset 0 0 0 1px #ffffff2e;flex:0 0 auto}.sdc-color-picker .sdc-color-picker__trigger-icon{font-size:.875rem}.sdc-color-picker .sdc-color-picker__native{position:absolute;inset:0;width:1px;height:1px;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: TooltipComponent, selector: "sdc-tooltip", inputs: ["pTooltip", "tooltipPosition", "tooltipEvent", "fitContent", "tooltipDisabled", "allowHtml"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,