@acorex/components 21.0.1-next.6 → 21.0.1-next.7

package/fesm2022/acorex-components-color-palette.mjs

@@ -913,7 +913,7 @@ class AXColorPaletteComponent extends MXValueComponent {
             },
             { provide: AXComponent, useExisting: AXColorPaletteComponent },
             AXColorPaletteService,
-        ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n\n@if (_children?.length) {\n  <ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n}\n<ng-template #custom>\n  <ng-content select=\"ax-color-palette-preview\"></ng-content>\n  <ng-content select=\"ax-color-palette-picker\"></ng-content>\n  <ng-content select=\"ax-color-palette-swatches\"></ng-content>\n  <ng-content select=\"ax-color-palette-favorite\"></ng-content>\n  <ng-content select=\"ax-color-palette-input\"></ng-content>\n</ng-template>\n<ng-template #default>\n  <ax-color-palette-preview></ax-color-palette-preview>\n  <ax-color-palette-picker></ax-color-palette-picker>\n  <ax-color-palette-swatches></ax-color-palette-swatches>\n  <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["ax-color-palette{display:flex;width:100%;flex-direction:column;padding:.5rem;gap:.5rem}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;text-transform:uppercase;border-radius:.25rem}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(11,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem;scrollbar-width:thin}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{border-color:rgba(var(--ax-sys-color-border-lighter-surface));border-width:2px}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0;text-align:center}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{overflow:hidden;border-radius:.25rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);touch-action:none}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:1rem;width:1rem;border-radius:9999px;border-width:.25rem;background-color:transparent;box-shadow:#00000080 0 0 5px;border-color:rgba(var(--ax-sys-color-light))}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:1rem;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{width:100%;gap:.5rem;display:flex;flex-direction:column}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{--ax-comp-range-slider-ring-size: 0;--ax-comp-range-slider-bar-height: 1rem;--ax-comp-range-slider-handler-size: 1rem;--ax-comp-range-slider-ring-color: var(--ax-sys-color-border-surface);padding:0}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{border-width:.25rem;border-color:rgba(var(--ax-sys-color-light));box-shadow:#00000080 0 0 5px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler:hover{box-shadow:#00000080 0 0 7px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,rgba(255,255,255,0),var(--ax-comp-color-palette-transparent-color)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:var(--ax-comp-color-palette-color-sample-width, 3.5rem);border-radius:.25rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n\n@if (_children?.length) {\n  <ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n}\n<ng-template #custom>\n  <ng-content select=\"ax-color-palette-preview\"></ng-content>\n  <ng-content select=\"ax-color-palette-picker\"></ng-content>\n  <ng-content select=\"ax-color-palette-swatches\"></ng-content>\n  <ng-content select=\"ax-color-palette-favorite\"></ng-content>\n  <ng-content select=\"ax-color-palette-input\"></ng-content>\n</ng-template>\n<ng-template #default>\n  <ax-color-palette-preview></ax-color-palette-preview>\n  <ax-color-palette-picker></ax-color-palette-picker>\n  <ax-color-palette-swatches></ax-color-palette-swatches>\n  <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-content:\"\";--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{ax-color-palette{--trans-bg:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);gap:calc(var(--spacing,.25rem)*2);width:100%;padding:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}@media (min-width:48rem){ax-color-palette{width:calc(var(--spacing,.25rem)*80)}}ax-color-palette.ax-state-disabled,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div:hover,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex}ax-color-palette ax-color-palette-preview{height:calc(var(--spacing,.25rem)*24);gap:calc(var(--spacing,.25rem)*2);background-color:var(--trans-bg)left center;width:100%;position:relative}ax-color-palette ax-color-palette-preview .palette-preview-overlay{border-bottom-style:var(--tw-border-style);text-transform:uppercase;width:100%;height:100%;border-bottom-width:1px;border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{max-height:calc(var(--spacing,.25rem)*36);gap:calc(var(--spacing,.25rem)*2);padding:calc(var(--spacing,.25rem)*2);scrollbar-width:thin;grid-template-columns:repeat(11,minmax(0,1fr));display:grid;overflow:hidden auto}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:relative}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{--tw-content:\"\";content:var(--tw-content)}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before{float:left;padding-top:100%}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{clear:both;display:block}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:hover,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div.ax-state-selected{border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)))}ax-color-palette ax-color-palette-input{gap:calc(var(--spacing,.25rem)*2);display:flex}ax-color-palette ax-color-palette-input .palette-inputs{gap:calc(var(--spacing,.25rem)*2);flex:1;display:flex}ax-color-palette ax-color-palette-input .palette-inputs .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{text-align:center;width:100%}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:calc(var(--spacing,.25rem)*0);text-align:center}ax-color-palette ax-color-palette-picker{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{touch-action:none;background-image:var(--trans-bg);border-radius:.25rem;overflow:hidden}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{height:calc(var(--spacing,.25rem)*32);width:100%;display:flex;position:relative}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{z-index:10;height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:#000;background-color:#0000;border-radius:3.40282e38px;position:relative}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{inset-inline-start:calc(var(--spacing,.25rem)*0);inset-inline-end:calc(var(--spacing,.25rem)*0);top:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);width:100%;height:100%;position:absolute}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{z-index:0;background-image:linear-gradient(90deg,#fff,#fff0)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background-image:linear-gradient(#0000,#000)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:calc(var(--spacing,.25rem)*4);display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;width:100%;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{padding:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:#000;background-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(to right,#fff0,var(--ax-comp-color-palette-transparent-color)),var(--trans-bg)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:calc(var(--spacing,.25rem)*14);border-radius:.25rem}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteComponent, decorators: [{
             type: Component,
@@ -936,7 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AXColorPalettePickerComponent,
                         AXColorPaletteSwatchesComponent,
                         AXColorPaletteInputComponent,
-                    ], template: "<ng-content select=\"ax-header\"></ng-content>\n\n@if (_children?.length) {\n  <ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n}\n<ng-template #custom>\n  <ng-content select=\"ax-color-palette-preview\"></ng-content>\n  <ng-content select=\"ax-color-palette-picker\"></ng-content>\n  <ng-content select=\"ax-color-palette-swatches\"></ng-content>\n  <ng-content select=\"ax-color-palette-favorite\"></ng-content>\n  <ng-content select=\"ax-color-palette-input\"></ng-content>\n</ng-template>\n<ng-template #default>\n  <ax-color-palette-preview></ax-color-palette-preview>\n  <ax-color-palette-picker></ax-color-palette-picker>\n  <ax-color-palette-swatches></ax-color-palette-swatches>\n  <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["ax-color-palette{display:flex;width:100%;flex-direction:column;padding:.5rem;gap:.5rem}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;text-transform:uppercase;border-radius:.25rem}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(11,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem;scrollbar-width:thin}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{border-color:rgba(var(--ax-sys-color-border-lighter-surface));border-width:2px}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0;text-align:center}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{overflow:hidden;border-radius:.25rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);touch-action:none}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:1rem;width:1rem;border-radius:9999px;border-width:.25rem;background-color:transparent;box-shadow:#00000080 0 0 5px;border-color:rgba(var(--ax-sys-color-light))}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:1rem;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{width:100%;gap:.5rem;display:flex;flex-direction:column}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{--ax-comp-range-slider-ring-size: 0;--ax-comp-range-slider-bar-height: 1rem;--ax-comp-range-slider-handler-size: 1rem;--ax-comp-range-slider-ring-color: var(--ax-sys-color-border-surface);padding:0}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{border-width:.25rem;border-color:rgba(var(--ax-sys-color-light));box-shadow:#00000080 0 0 5px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler:hover{box-shadow:#00000080 0 0 7px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,rgba(255,255,255,0),var(--ax-comp-color-palette-transparent-color)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:var(--ax-comp-color-palette-color-sample-width, 3.5rem);border-radius:.25rem}\n"] }]
+                    ], template: "<ng-content select=\"ax-header\"></ng-content>\n\n@if (_children?.length) {\n  <ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n}\n<ng-template #custom>\n  <ng-content select=\"ax-color-palette-preview\"></ng-content>\n  <ng-content select=\"ax-color-palette-picker\"></ng-content>\n  <ng-content select=\"ax-color-palette-swatches\"></ng-content>\n  <ng-content select=\"ax-color-palette-favorite\"></ng-content>\n  <ng-content select=\"ax-color-palette-input\"></ng-content>\n</ng-template>\n<ng-template #default>\n  <ax-color-palette-preview></ax-color-palette-preview>\n  <ax-color-palette-picker></ax-color-palette-picker>\n  <ax-color-palette-swatches></ax-color-palette-swatches>\n  <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-content:\"\";--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{ax-color-palette{--trans-bg:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);gap:calc(var(--spacing,.25rem)*2);width:100%;padding:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}@media (min-width:48rem){ax-color-palette{width:calc(var(--spacing,.25rem)*80)}}ax-color-palette.ax-state-disabled,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div:hover,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex}ax-color-palette ax-color-palette-preview{height:calc(var(--spacing,.25rem)*24);gap:calc(var(--spacing,.25rem)*2);background-color:var(--trans-bg)left center;width:100%;position:relative}ax-color-palette ax-color-palette-preview .palette-preview-overlay{border-bottom-style:var(--tw-border-style);text-transform:uppercase;width:100%;height:100%;border-bottom-width:1px;border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{max-height:calc(var(--spacing,.25rem)*36);gap:calc(var(--spacing,.25rem)*2);padding:calc(var(--spacing,.25rem)*2);scrollbar-width:thin;grid-template-columns:repeat(11,minmax(0,1fr));display:grid;overflow:hidden auto}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:relative}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{--tw-content:\"\";content:var(--tw-content)}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before{float:left;padding-top:100%}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{clear:both;display:block}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:hover,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div.ax-state-selected{border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)))}ax-color-palette ax-color-palette-input{gap:calc(var(--spacing,.25rem)*2);display:flex}ax-color-palette ax-color-palette-input .palette-inputs{gap:calc(var(--spacing,.25rem)*2);flex:1;display:flex}ax-color-palette ax-color-palette-input .palette-inputs .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{text-align:center;width:100%}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:calc(var(--spacing,.25rem)*0);text-align:center}ax-color-palette ax-color-palette-picker{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{touch-action:none;background-image:var(--trans-bg);border-radius:.25rem;overflow:hidden}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{height:calc(var(--spacing,.25rem)*32);width:100%;display:flex;position:relative}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{z-index:10;height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:#000;background-color:#0000;border-radius:3.40282e38px;position:relative}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{inset-inline-start:calc(var(--spacing,.25rem)*0);inset-inline-end:calc(var(--spacing,.25rem)*0);top:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);width:100%;height:100%;position:absolute}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{z-index:0;background-image:linear-gradient(90deg,#fff,#fff0)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background-image:linear-gradient(#0000,#000)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:calc(var(--spacing,.25rem)*4);display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;width:100%;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{padding:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:#000;background-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(to right,#fff0,var(--ax-comp-color-palette-transparent-color)),var(--trans-bg)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:calc(var(--spacing,.25rem)*14);border-radius:.25rem}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { _children: [{
                 type: ContentChildren,
                 args: [AXColorPaletteChildComponent]