npm - @elementar-rt/components - Versions diffs - 0.6.58 → 0.7.1 - Mend

@elementar-rt/components 0.6.58 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (414) hide show

package/fesm2022/elementar-rt-components-clipboard-copy.mjs CHANGED Viewed

@@ -2,11 +2,11 @@ import * as i0 from '@angular/core';
 import { input, numberAttribute, output, signal, HostListener, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
 class CopyToClipboardDirective {
-    emrCopyToClipboard = input.required(...(ngDevMode ? [{ debugName: "emrCopyToClipboard" }] : []));
-    resetDelay = input(2000, ...(ngDevMode ? [{ debugName: "resetDelay", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    emrCopyToClipboard = input.required(...(ngDevMode ? [{ debugName: "emrCopyToClipboard" }] : /* istanbul ignore next */ []));
+    resetDelay = input(2000, { ...(ngDevMode ? { debugName: "resetDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     copied = output();
     copyError = output();
-    _copied = signal(false, ...(ngDevMode ? [{ debugName: "_copied" }] : []));
+    _copied = signal(false, ...(ngDevMode ? [{ debugName: "_copied" }] : /* istanbul ignore next */ []));
     _timer = null;
     async onClick() {
         const text = this.emrCopyToClipboard();
@@ -22,10 +22,10 @@ class CopyToClipboardDirective {
             this.copyError.emit(err);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CopyToClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: CopyToClipboardDirective, isStandalone: true, selector: "[emrCopyToClipboard]", inputs: { emrCopyToClipboard: { classPropertyName: "emrCopyToClipboard", publicName: "emrCopyToClipboard", isSignal: true, isRequired: true, transformFunction: null }, resetDelay: { classPropertyName: "resetDelay", publicName: "resetDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied", copyError: "copyError" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.data-copied": "_copied() || null" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CopyToClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: CopyToClipboardDirective, isStandalone: true, selector: "[emrCopyToClipboard]", inputs: { emrCopyToClipboard: { classPropertyName: "emrCopyToClipboard", publicName: "emrCopyToClipboard", isSignal: true, isRequired: true, transformFunction: null }, resetDelay: { classPropertyName: "resetDelay", publicName: "resetDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied", copyError: "copyError" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.data-copied": "_copied() || null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CopyToClipboardDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CopyToClipboardDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrCopyToClipboard]',
@@ -40,12 +40,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 class CopyButtonComponent {
-    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
-    copyLabel = input('Copy', ...(ngDevMode ? [{ debugName: "copyLabel" }] : []));
-    copiedLabel = input('Copied!', ...(ngDevMode ? [{ debugName: "copiedLabel" }] : []));
-    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
-    resetDelay = input(2000, ...(ngDevMode ? [{ debugName: "resetDelay", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-    _copied = signal(false, ...(ngDevMode ? [{ debugName: "_copied" }] : []));
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    copyLabel = input('Copy', ...(ngDevMode ? [{ debugName: "copyLabel" }] : /* istanbul ignore next */ []));
+    copiedLabel = input('Copied!', ...(ngDevMode ? [{ debugName: "copiedLabel" }] : /* istanbul ignore next */ []));
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    resetDelay = input(2000, { ...(ngDevMode ? { debugName: "resetDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    _copied = signal(false, ...(ngDevMode ? [{ debugName: "_copied" }] : /* istanbul ignore next */ []));
     _timer = null;
     async _copy() {
         try {
@@ -57,8 +57,8 @@ class CopyButtonComponent {
         }
         catch { /* ignore */ }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CopyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: CopyButtonComponent, isStandalone: true, selector: "emr-copy-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, copyLabel: { classPropertyName: "copyLabel", publicName: "copyLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedLabel: { classPropertyName: "copiedLabel", publicName: "copiedLabel", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, resetDelay: { classPropertyName: "resetDelay", publicName: "resetDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CopyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: CopyButtonComponent, isStandalone: true, selector: "emr-copy-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, copyLabel: { classPropertyName: "copyLabel", publicName: "copyLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedLabel: { classPropertyName: "copiedLabel", publicName: "copiedLabel", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, resetDelay: { classPropertyName: "resetDelay", publicName: "resetDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <button
       type="button"
       class="copy-btn"
@@ -79,9 +79,9 @@ class CopyButtonComponent {
         @if (showLabel()) { <span>{{ copyLabel() }}</span> }
       }
     </button>
-  `, isInline: true, styles: [".copy-btn{display:inline-flex;align-items:center;gap:var(--spacing, .25rem);background:transparent;border:1px solid var(--color-outline-variant);border-radius:.375rem;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2);cursor:pointer;font-size:.875rem;color:var(--color-on-surface-variant);transition:all .15s ease}.copy-btn:hover{background:var(--color-surface-container);color:var(--color-on-surface)}.copy-btn[data-copied]{color:var(--color-green);border-color:var(--color-green)}.copy-btn .icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".copy-btn{display:inline-flex;align-items:center;gap:var(--spacing, .25rem);background:transparent;border:1px solid var(--color-outline-variant);border-radius:.375rem;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2);cursor:pointer;font-size:.875rem;color:var(--color-on-surface-variant);transition:all .15s ease}.copy-btn:hover{background:var(--color-surface-container);color:var(--color-on-surface)}.copy-btn[data-copied]{color:var(--color-green);border-color:var(--color-green)}.copy-btn .icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CopyButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CopyButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-copy-button', standalone: true, template: `
     <button
@@ -104,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         @if (showLabel()) { <span>{{ copyLabel() }}</span> }
       }
     </button>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".copy-btn{display:inline-flex;align-items:center;gap:var(--spacing, .25rem);background:transparent;border:1px solid var(--color-outline-variant);border-radius:.375rem;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2);cursor:pointer;font-size:.875rem;color:var(--color-on-surface-variant);transition:all .15s ease}.copy-btn:hover{background:var(--color-surface-container);color:var(--color-on-surface)}.copy-btn[data-copied]{color:var(--color-green);border-color:var(--color-green)}.copy-btn .icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".copy-btn{display:inline-flex;align-items:center;gap:var(--spacing, .25rem);background:transparent;border:1px solid var(--color-outline-variant);border-radius:.375rem;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2);cursor:pointer;font-size:.875rem;color:var(--color-on-surface-variant);transition:all .15s ease}.copy-btn:hover{background:var(--color-surface-container);color:var(--color-on-surface)}.copy-btn[data-copied]{color:var(--color-green);border-color:var(--color-green)}.copy-btn .icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], copyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyLabel", required: false }] }], copiedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedLabel", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], resetDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetDelay", required: false }] }] } });
 /**

package/fesm2022/elementar-rt-components-clipboard-copy.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"elementar-rt-components-clipboard-copy.mjs","sources":["../../../projects/components/clipboard-copy/src/copy-to-clipboard.directive.ts","../../../projects/components/clipboard-copy/src/copy-button.component.ts","../../../projects/components/clipboard-copy/elementar-rt-components-clipboard-copy.ts"],"sourcesContent":["import { Directive, input, output, signal, HostListener, numberAttribute } from '@angular/core';\n\n@Directive({\n selector: '[emrCopyToClipboard]',\n standalone: true,\n host: {\n '[attr.data-copied]': '_copied() \|\| null',\n }\n})\nexport class CopyToClipboardDirective {\n emrCopyToClipboard = input.required<string>();\n resetDelay = input(2000, { transform: numberAttribute });\n\n copied = output<string>();\n copyError = output<Error>();\n\n protected _copied = signal(false);\n\n private _timer: ReturnType<typeof setTimeout> \| null = null;\n\n @HostListener('click')\n async onClick(): Promise<void> {\n const text = this.emrCopyToClipboard();\n try {\n await navigator.clipboard.writeText(text);\n this._copied.set(true);\n this.copied.emit(text);\n if (this._timer) clearTimeout(this._timer);\n this._timer = setTimeout(() => this._copied.set(false), this.resetDelay());\n } catch (err) {\n this.copyError.emit(err as Error);\n }\n }\n}\n","import { Component, input, signal, ChangeDetectionStrategy, numberAttribute } from '@angular/core';\n\n@Component({\n selector: 'emr-copy-button',\n standalone: true,\n template: `\n <button\n type=\"button\"\n class=\"copy-btn\"\n [attr.data-copied]=\"_copied() \|\| null\"\n [attr.aria-label]=\"_copied() ? copiedLabel() : copyLabel()\"\n (click)=\"_copy()\"\n >\n @if (_copied()) {\n <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"/>\n </svg>\n @if (showLabel()) { <span>{{ copiedLabel() }}</span> }\n } @else {\n <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"/>\n <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/>\n </svg>\n @if (showLabel()) { <span>{{ copyLabel() }}</span> }\n }\n </button>\n `,\n styles: [`\n @reference 'tailwindcss';\n\n .copy-btn {\n display: inline-flex;\n align-items: center;\n gap: --spacing(1);\n background: transparent;\n border: 1px solid var(--color-outline-variant);\n border-radius: theme(--radius-md);\n padding: --spacing(1.5) --spacing(2);\n cursor: pointer;\n font-size: theme(--text-sm);\n color: var(--color-on-surface-variant);\n transition: all 150ms ease;\n\n &:hover { background: var(--color-surface-container); color: var(--color-on-surface); }\n &[data-copied] { color: var(--color-green); border-color: var(--color-green); }\n\n .icon { width: --spacing(4); height: --spacing(4); flex-shrink: 0; }\n }\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CopyButtonComponent {\n text = input.required<string>();\n copyLabel = input('Copy');\n copiedLabel = input('Copied!');\n showLabel = input(false);\n resetDelay = input(2000, { transform: numberAttribute });\n\n protected _copied = signal(false);\n private _timer: ReturnType<typeof setTimeout> \| null = null;\n\n protected async _copy(): Promise<void> {\n try {\n await navigator.clipboard.writeText(this.text());\n this._copied.set(true);\n if (this._timer) clearTimeout(this._timer);\n this._timer = setTimeout(() => this._copied.set(false), this.resetDelay());\n } catch { /* ignore / }\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;MASa,wBAAwB,CAAA;AACnC,IAAA,kBAAkB,GAAG,KAAK,CAAC,QAAQ,~~6DAAU~~;~~AAC7C~~,~~IAAA,~~UAAU,GAAG,KAAK,CAAC,IAAI,~~8CAAI~~,SAAS,EAAE,eAAe,EAAA,~~CAAA,GAAA,CAA5B,EAAE,SAAS,EAAE,eAAe,EAAE,GAAC~~;IAExD,MAAM,GAAG,MAAM,EAAU;IACzB,SAAS,GAAG,MAAM,EAAS;AAEjB,IAAA,OAAO,GAAG,MAAM,CAAC,KAAK,~~mDAAC~~;IAEzB,MAAM,GAAyC,IAAI;AAG3D,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,kBAAkB,EAAE;AACtC,QAAA,IAAI;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AACzC,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;AACtB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;YACtB,IAAI,IAAI,CAAC,MAAM;AAAE,gBAAA,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;YAC1C,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;QAC5E;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAY,CAAC;QACnC;IACF;wGAvBW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,UAAA,EAAA,EAAA,kBAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AAChC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,oBAAoB,EAAE,mBAAmB;AAC1C;AACF,iBAAA;;sBAYE,YAAY;uBAAC,OAAO;;;MC+BV,mBAAmB,CAAA;AAC9B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ~~,+CAAU~~;AAC/B,IAAA,SAAS,GAAG,KAAK,CAAC,MAAM,~~qDAAC~~;AACzB,IAAA,WAAW,GAAG,KAAK,CAAC,SAAS,~~uDAAC~~;AAC9B,IAAA,SAAS,GAAG,KAAK,CAAC,KAAK,~~qDAAC~~;~~AACxB~~,~~IAAA,~~UAAU,GAAG,KAAK,CAAC,IAAI,~~8CAAI~~,SAAS,EAAE,eAAe,EAAA,~~CAAA,GAAA,CAA5B,EAAE,SAAS,EAAE,eAAe,EAAE,GAAC~~;AAE9C,IAAA,OAAO,GAAG,MAAM,CAAC,KAAK,~~mDAAC~~;IACzB,MAAM,GAAyC,IAAI;AAEjD,IAAA,MAAM,KAAK,GAAA;AACnB,QAAA,IAAI;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AAChD,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;YACtB,IAAI,IAAI,CAAC,MAAM;AAAE,gBAAA,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;YAC1C,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;QAC5E;AAAE,QAAA,MAAM,eAAe;IACzB;wGAjBW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA9CpB;;;;;;;;;;;;;;;;;;;;;AAqBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+qBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAyBU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAjD/B,SAAS;+BACE,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,QAAA,EACN;;;;;;;;;;;;;;;;;;;;;GAqBT,EAAA,eAAA,EAuBgB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,+qBAAA,CAAA,EAAA;;;ACjDjD;;AAEG~~;;;;~~"}
1	+ {"version":3,"file":"elementar-rt-components-clipboard-copy.mjs","sources":["../../../projects/components/clipboard-copy/src/copy-to-clipboard.directive.ts","../../../projects/components/clipboard-copy/src/copy-button.component.ts","../../../projects/components/clipboard-copy/elementar-rt-components-clipboard-copy.ts"],"sourcesContent":["import { Directive, input, output, signal, HostListener, numberAttribute } from '@angular/core';\n\n@Directive({\n selector: '[emrCopyToClipboard]',\n standalone: true,\n host: {\n '[attr.data-copied]': '_copied() \|\| null',\n }\n})\nexport class CopyToClipboardDirective {\n emrCopyToClipboard = input.required<string>();\n resetDelay = input(2000, { transform: numberAttribute });\n\n copied = output<string>();\n copyError = output<Error>();\n\n protected _copied = signal(false);\n\n private _timer: ReturnType<typeof setTimeout> \| null = null;\n\n @HostListener('click')\n async onClick(): Promise<void> {\n const text = this.emrCopyToClipboard();\n try {\n await navigator.clipboard.writeText(text);\n this._copied.set(true);\n this.copied.emit(text);\n if (this._timer) clearTimeout(this._timer);\n this._timer = setTimeout(() => this._copied.set(false), this.resetDelay());\n } catch (err) {\n this.copyError.emit(err as Error);\n }\n }\n}\n","import { Component, input, signal, ChangeDetectionStrategy, numberAttribute } from '@angular/core';\n\n@Component({\n selector: 'emr-copy-button',\n standalone: true,\n template: `\n <button\n type=\"button\"\n class=\"copy-btn\"\n [attr.data-copied]=\"_copied() \|\| null\"\n [attr.aria-label]=\"_copied() ? copiedLabel() : copyLabel()\"\n (click)=\"_copy()\"\n >\n @if (_copied()) {\n <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"/>\n </svg>\n @if (showLabel()) { <span>{{ copiedLabel() }}</span> }\n } @else {\n <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"/>\n <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/>\n </svg>\n @if (showLabel()) { <span>{{ copyLabel() }}</span> }\n }\n </button>\n `,\n styles: [`\n @reference 'tailwindcss';\n\n .copy-btn {\n display: inline-flex;\n align-items: center;\n gap: --spacing(1);\n background: transparent;\n border: 1px solid var(--color-outline-variant);\n border-radius: theme(--radius-md);\n padding: --spacing(1.5) --spacing(2);\n cursor: pointer;\n font-size: theme(--text-sm);\n color: var(--color-on-surface-variant);\n transition: all 150ms ease;\n\n &:hover { background: var(--color-surface-container); color: var(--color-on-surface); }\n &[data-copied] { color: var(--color-green); border-color: var(--color-green); }\n\n .icon { width: --spacing(4); height: --spacing(4); flex-shrink: 0; }\n }\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CopyButtonComponent {\n text = input.required<string>();\n copyLabel = input('Copy');\n copiedLabel = input('Copied!');\n showLabel = input(false);\n resetDelay = input(2000, { transform: numberAttribute });\n\n protected _copied = signal(false);\n private _timer: ReturnType<typeof setTimeout> \| null = null;\n\n protected async _copy(): Promise<void> {\n try {\n await navigator.clipboard.writeText(this.text());\n this._copied.set(true);\n if (this._timer) clearTimeout(this._timer);\n this._timer = setTimeout(() => this._copied.set(false), this.resetDelay());\n } catch { /* ignore / }\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/elementar-rt-components-code-highlighter.mjs CHANGED Viewed

@@ -5,14 +5,14 @@ import { codeToHtml } from 'shiki';
 class CodeHighlighter {
     sanitizer = inject(DomSanitizer);
-    code = input.required(...(ngDevMode ? [{ debugName: "code" }] : []));
-    language = input('bash', ...(ngDevMode ? [{ debugName: "language" }] : []));
-    theme = input('dracula-soft', ...(ngDevMode ? [{ debugName: "theme" }] : []));
-    inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : []));
-    showCopyButton = input(true, ...(ngDevMode ? [{ debugName: "showCopyButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    _copied = signal(false, ...(ngDevMode ? [{ debugName: "_copied" }] : []));
+    code = input.required(...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    language = input('bash', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    theme = input('dracula-soft', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
+    showCopyButton = input(true, { ...(ngDevMode ? { debugName: "showCopyButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    _copied = signal(false, ...(ngDevMode ? [{ debugName: "_copied" }] : /* istanbul ignore next */ []));
     _copyTimer = null;
     async _copyCode() {
         try {
@@ -51,15 +51,15 @@ class CodeHighlighter {
             this.isLoading.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CodeHighlighter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: CodeHighlighter, isStandalone: true, selector: "emr-code-highlighter", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, showCopyButton: { classPropertyName: "showCopyButton", publicName: "showCopyButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-inline": "inline()" }, classAttribute: "emr-code-highlighter" }, exportAs: ["emrCodeHighlighter"], usesOnChanges: true, ngImport: i0, template: "@if (!inline() && showCopyButton()) {\n  <button\n    type=\"button\"\n    class=\"copy-btn\"\n    [attr.data-copied]=\"_copied() || null\"\n    [attr.aria-label]=\"_copied() ? 'Copied!' : 'Copy code'\"\n    (click)=\"_copyCode()\"\n  >\n    @if (_copied()) {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n    } @else {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/></svg>\n    }\n  </button>\n}\n@if (content()) {\n  <div [innerHTML]=\"content()\"></div>\n} @else {\n  <div class=\"loading\">Loading\u2026</div>\n}\n", styles: [":host{display:block;position:relative;margin:calc(var(--spacing, .25rem) * 5) 0}:host.inline{display:inline}:host ::ng-deep pre.shiki{padding:calc(var(--spacing, .25rem) * 5);border-radius:1rem;overflow:auto;line-height:1.5;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875rem}:host ::ng-deep code{white-space:pre}:host.loading{opacity:.6}.copy-btn{position:absolute;top:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);z-index:2;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);display:flex;align-items:center;justify-content:center;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:.375rem;cursor:pointer;color:#ffffffb3;transition:all .15s ease;opacity:0}:host:hover .copy-btn{opacity:1}.copy-btn:hover{background:#fff3;color:#fff}.copy-btn[data-copied]{color:#4ade80;border-color:#4ade8066}.copy-btn svg{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CodeHighlighter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: CodeHighlighter, isStandalone: true, selector: "emr-code-highlighter", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, showCopyButton: { classPropertyName: "showCopyButton", publicName: "showCopyButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-inline": "inline()" }, classAttribute: "emr-code-highlighter" }, exportAs: ["emrCodeHighlighter"], usesOnChanges: true, ngImport: i0, template: "@if (!inline() && showCopyButton()) {\n  <button\n    type=\"button\"\n    class=\"copy-btn\"\n    [attr.data-copied]=\"_copied() || null\"\n    [attr.aria-label]=\"_copied() ? 'Copied!' : 'Copy code'\"\n    (click)=\"_copyCode()\"\n  >\n    @if (_copied()) {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n    } @else {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/></svg>\n    }\n  </button>\n}\n@if (content()) {\n  <div [innerHTML]=\"content()\"></div>\n} @else {\n  <div class=\"loading\">Loading\u2026</div>\n}\n", styles: [":host{display:block;position:relative;margin:calc(var(--spacing, .25rem) * 5) 0}:host.inline{display:inline}:host ::ng-deep pre.shiki{padding:calc(var(--spacing, .25rem) * 5);border-radius:1rem;overflow:auto;line-height:1.5;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875rem}:host ::ng-deep code{white-space:pre}:host.loading{opacity:.6}.copy-btn{position:absolute;top:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);z-index:2;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);display:flex;align-items:center;justify-content:center;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:.375rem;cursor:pointer;color:#ffffffb3;transition:all .15s ease;opacity:0}:host:hover .copy-btn{opacity:1}.copy-btn:hover{background:#fff3;color:#fff}.copy-btn[data-copied]{color:#4ade80;border-color:#4ade8066}.copy-btn svg{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CodeHighlighter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CodeHighlighter, decorators: [{
             type: Component,
             args: [{ selector: 'emr-code-highlighter', exportAs: 'emrCodeHighlighter', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'emr-code-highlighter',
                         '[class.is-inline]': 'inline()',
-                    }, template: "@if (!inline() && showCopyButton()) {\n  <button\n    type=\"button\"\n    class=\"copy-btn\"\n    [attr.data-copied]=\"_copied() || null\"\n    [attr.aria-label]=\"_copied() ? 'Copied!' : 'Copy code'\"\n    (click)=\"_copyCode()\"\n  >\n    @if (_copied()) {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n    } @else {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/></svg>\n    }\n  </button>\n}\n@if (content()) {\n  <div [innerHTML]=\"content()\"></div>\n} @else {\n  <div class=\"loading\">Loading\u2026</div>\n}\n", styles: [":host{display:block;position:relative;margin:calc(var(--spacing, .25rem) * 5) 0}:host.inline{display:inline}:host ::ng-deep pre.shiki{padding:calc(var(--spacing, .25rem) * 5);border-radius:1rem;overflow:auto;line-height:1.5;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875rem}:host ::ng-deep code{white-space:pre}:host.loading{opacity:.6}.copy-btn{position:absolute;top:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);z-index:2;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);display:flex;align-items:center;justify-content:center;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:.375rem;cursor:pointer;color:#ffffffb3;transition:all .15s ease;opacity:0}:host:hover .copy-btn{opacity:1}.copy-btn:hover{background:#fff3;color:#fff}.copy-btn[data-copied]{color:#4ade80;border-color:#4ade8066}.copy-btn svg{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "@if (!inline() && showCopyButton()) {\n  <button\n    type=\"button\"\n    class=\"copy-btn\"\n    [attr.data-copied]=\"_copied() || null\"\n    [attr.aria-label]=\"_copied() ? 'Copied!' : 'Copy code'\"\n    (click)=\"_copyCode()\"\n  >\n    @if (_copied()) {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n    } @else {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/></svg>\n    }\n  </button>\n}\n@if (content()) {\n  <div [innerHTML]=\"content()\"></div>\n} @else {\n  <div class=\"loading\">Loading\u2026</div>\n}\n", styles: [":host{display:block;position:relative;margin:calc(var(--spacing, .25rem) * 5) 0}:host.inline{display:inline}:host ::ng-deep pre.shiki{padding:calc(var(--spacing, .25rem) * 5);border-radius:1rem;overflow:auto;line-height:1.5;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875rem}:host ::ng-deep code{white-space:pre}:host.loading{opacity:.6}.copy-btn{position:absolute;top:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);z-index:2;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);display:flex;align-items:center;justify-content:center;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:.375rem;cursor:pointer;color:#ffffffb3;transition:all .15s ease;opacity:0}:host:hover .copy-btn{opacity:1}.copy-btn:hover{background:#fff3;color:#fff}.copy-btn[data-copied]{color:#4ade80;border-color:#4ade8066}.copy-btn svg{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: true }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], showCopyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCopyButton", required: false }] }] } });
 /**

package/fesm2022/elementar-rt-components-code-highlighter.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"elementar-rt-components-code-highlighter.mjs","sources":["../../../projects/components/code-highlighter/src/code-highlighter/code-highlighter.ts","../../../projects/components/code-highlighter/src/code-highlighter/code-highlighter.html","../../../projects/components/code-highlighter/elementar-rt-components-code-highlighter.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, OnChanges, SimpleChanges, signal, inject, booleanAttribute } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { codeToHtml } from 'shiki';\n\n@Component({\n selector: 'emr-code-highlighter',\n exportAs: 'emrCodeHighlighter',\n templateUrl: './code-highlighter.html',\n styleUrl: './code-highlighter.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'emr-code-highlighter',\n '[class.is-inline]': 'inline()',\n }\n})\nexport class CodeHighlighter implements OnChanges {\n private sanitizer = inject(DomSanitizer);\n\n code = input.required<string>();\n language = input<string>('bash');\n theme = input<string>('dracula-soft');\n inline = input<boolean>(false);\n showCopyButton = input(true, { transform: booleanAttribute });\n\n readonly content = signal<SafeHtml \| null>(null);\n readonly isLoading = signal<boolean>(false);\n readonly _copied = signal(false);\n private _copyTimer: ReturnType<typeof setTimeout> \| null = null;\n\n protected async _copyCode(): Promise<void> {\n try {\n await navigator.clipboard.writeText(this.code());\n this._copied.set(true);\n if (this._copyTimer) clearTimeout(this._copyTimer);\n this._copyTimer = setTimeout(() => this._copied.set(false), 2000);\n } catch { /* ignore / }\n }\n\n async ngOnChanges(changes: SimpleChanges) {\n if (!this.code()) {\n this.content.set(null);\n return;\n }\n this.isLoading.set(true);\n try {\n const highlighted = await codeToHtml(\n this.code(),\n {\n lang: this.language(),\n theme: this.theme(),\n }\n );\n this.content.set(this.sanitizer.bypassSecurityTrustHtml(highlighted));\n } catch (e) {\n // Fallback: raw code escaped inside pre\n const escaped = this.code()\n .replace(/&/g, '&')\n .replace(/</g, '<')\n .replace(/>/g, '>');\n const fallback = this.inline() ? `<code>${escaped}</code>` : `<pre class=\"shiki\"><code>${escaped}</code></pre>`;\n this.content.set(this.sanitizer.bypassSecurityTrustHtml(fallback));\n console.error('CodeHighlighter error:', e);\n } finally {\n this.isLoading.set(false);\n }\n }\n}\n","@if (!inline() && showCopyButton()) {\n <button\n type=\"button\"\n class=\"copy-btn\"\n [attr.data-copied]=\"_copied() \|\| null\"\n [attr.aria-label]=\"_copied() ? 'Copied!' : 'Copy code'\"\n (click)=\"_copyCode()\"\n >\n @if (_copied()) {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/></svg>\n }\n </button>\n}\n@if (content()) {\n <div [innerHTML]=\"content()\"></div>\n} @else {\n <div class=\"loading\">Loading…</div>\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;MAea,eAAe,CAAA;AAClB,IAAA,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC;AAExC,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ~~,+CAAU~~;AAC/B,IAAA,QAAQ,GAAG,KAAK,CAAS,MAAM~~,oDAAC~~;AAChC,IAAA,KAAK,GAAG,KAAK,CAAS,cAAc,~~iDAAC~~;AACrC,IAAA,MAAM,GAAG,KAAK,CAAU,KAAK,~~kDAAC~~;~~AAC9B~~,~~IAAA,~~cAAc,GAAG,KAAK,CAAC,IAAI,~~kDAAI~~,SAAS,EAAE,gBAAgB,EAAA,~~CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC~~;AAEpD,IAAA,OAAO,GAAG,MAAM,CAAkB,IAAI,~~mDAAC~~;AACvC,IAAA,SAAS,GAAG,MAAM,CAAU,KAAK,~~qDAAC~~;AAClC,IAAA,OAAO,GAAG,MAAM,CAAC,KAAK,~~mDAAC~~;IACxB,UAAU,GAAyC,IAAI;AAErD,IAAA,MAAM,SAAS,GAAA;AACvB,QAAA,IAAI;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AAChD,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;YACtB,IAAI,IAAI,CAAC,UAAU;AAAE,gBAAA,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AAClD,YAAA,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;QACnE;AAAE,QAAA,MAAM,eAAe;IACzB;IAEA,MAAM,WAAW,CAAC,OAAsB,EAAA;AACtC,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;YACtB;QACF;AACA,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI;YACF,MAAM,WAAW,GAAG,MAAM,UAAU,CAClC,IAAI,CAAC,IAAI,EAAE,EACX;AACE,gBAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE;AACrB,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACpB,aAAA,CACF;AACD,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC;QACvE;QAAE,OAAO,CAAC,EAAE;;AAEV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI;AACtB,iBAAA,OAAO,CAAC,IAAI,EAAE,OAAO;AACrB,iBAAA,OAAO,CAAC,IAAI,EAAE,MAAM;AACpB,iBAAA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;AACxB,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAA,MAAA,EAAS,OAAO,SAAS,GAAG,CAAA,yBAAA,EAA4B,OAAO,eAAe;AAC/G,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;AAClE,YAAA,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,CAAC,CAAC;QAC5C;gBAAU;AACR,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;QAC3B;IACF;wGAlDW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,+2BCf5B,gxBAoBA,EAAA,MAAA,EAAA,CAAA,2kCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDLa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAX3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,YACtB,oBAAoB,EAAA,eAAA,EAGb,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,OAAO,EAAE,sBAAsB;AAC/B,wBAAA,mBAAmB,EAAE,UAAU;AAChC,qBAAA,EAAA,QAAA,EAAA,gxBAAA,EAAA,MAAA,EAAA,CAAA,2kCAAA,CAAA,EAAA;;;AEbH;;AAEG~~;;;;~~"}
1	+ {"version":3,"file":"elementar-rt-components-code-highlighter.mjs","sources":["../../../projects/components/code-highlighter/src/code-highlighter/code-highlighter.ts","../../../projects/components/code-highlighter/src/code-highlighter/code-highlighter.html","../../../projects/components/code-highlighter/elementar-rt-components-code-highlighter.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, OnChanges, SimpleChanges, signal, inject, booleanAttribute } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { codeToHtml } from 'shiki';\n\n@Component({\n selector: 'emr-code-highlighter',\n exportAs: 'emrCodeHighlighter',\n templateUrl: './code-highlighter.html',\n styleUrl: './code-highlighter.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'emr-code-highlighter',\n '[class.is-inline]': 'inline()',\n }\n})\nexport class CodeHighlighter implements OnChanges {\n private sanitizer = inject(DomSanitizer);\n\n code = input.required<string>();\n language = input<string>('bash');\n theme = input<string>('dracula-soft');\n inline = input<boolean>(false);\n showCopyButton = input(true, { transform: booleanAttribute });\n\n readonly content = signal<SafeHtml \| null>(null);\n readonly isLoading = signal<boolean>(false);\n readonly _copied = signal(false);\n private _copyTimer: ReturnType<typeof setTimeout> \| null = null;\n\n protected async _copyCode(): Promise<void> {\n try {\n await navigator.clipboard.writeText(this.code());\n this._copied.set(true);\n if (this._copyTimer) clearTimeout(this._copyTimer);\n this._copyTimer = setTimeout(() => this._copied.set(false), 2000);\n } catch { /* ignore / }\n }\n\n async ngOnChanges(changes: SimpleChanges) {\n if (!this.code()) {\n this.content.set(null);\n return;\n }\n this.isLoading.set(true);\n try {\n const highlighted = await codeToHtml(\n this.code(),\n {\n lang: this.language(),\n theme: this.theme(),\n }\n );\n this.content.set(this.sanitizer.bypassSecurityTrustHtml(highlighted));\n } catch (e) {\n // Fallback: raw code escaped inside pre\n const escaped = this.code()\n .replace(/&/g, '&')\n .replace(/</g, '<')\n .replace(/>/g, '>');\n const fallback = this.inline() ? `<code>${escaped}</code>` : `<pre class=\"shiki\"><code>${escaped}</code></pre>`;\n this.content.set(this.sanitizer.bypassSecurityTrustHtml(fallback));\n console.error('CodeHighlighter error:', e);\n } finally {\n this.isLoading.set(false);\n }\n }\n}\n","@if (!inline() && showCopyButton()) {\n <button\n type=\"button\"\n class=\"copy-btn\"\n [attr.data-copied]=\"_copied() \|\| null\"\n [attr.aria-label]=\"_copied() ? 'Copied!' : 'Copy code'\"\n (click)=\"_copyCode()\"\n >\n @if (_copied()) {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/></svg>\n }\n </button>\n}\n@if (content()) {\n <div [innerHTML]=\"content()\"></div>\n} @else {\n <div class=\"loading\">Loading…</div>\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/elementar-rt-components-color-picker.mjs CHANGED Viewed

@@ -73,18 +73,18 @@ class BaseComponent {
         this.subscriptions.forEach((subscription) => subscription.unsubscribe());
         this.subscriptions.length = 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: BaseComponent, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: BaseComponent, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 class SaturationComponent extends BaseComponent {
     _renderer = inject(Renderer2);
     pointer = viewChild.required('pointer');
-    tinyColor = model.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : []));
-    colorFromHue = input(...(ngDevMode ? [undefined, { debugName: "colorFromHue" }] : []));
+    tinyColor = model.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : /* istanbul ignore next */ []));
+    colorFromHue = input(...(ngDevMode ? [undefined, { debugName: "colorFromHue" }] : /* istanbul ignore next */ []));
     tmpColor;
     pointerColor;
     colorChange = output();
@@ -171,21 +171,21 @@ class SaturationComponent extends BaseComponent {
         this.pointerColor = tinyColor;
         this._renderer.setStyle(this.pointer().nativeElement, 'background-color', tinyColor.toRgbString());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SaturationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: SaturationComponent, isStandalone: true, selector: "emr-saturation", inputs: { tinyColor: { classPropertyName: "tinyColor", publicName: "tinyColor", isSignal: true, isRequired: true, transformFunction: null }, colorFromHue: { classPropertyName: "colorFromHue", publicName: "colorFromHue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tinyColor: "tinyColorChange", colorChange: "colorChange" }, host: { classAttribute: "emr-saturation" }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }], exportAs: ["emrSaturation"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\"></div>\n", styles: [":host{display:block;flex:none;position:relative;width:var(--emr-color-picker-saturation-width);height:var(--emr-color-picker-saturation-height);border-radius:var(--emr-color-picker-border-radius)}:host:before{content:\"\";background:linear-gradient(to right,#fff,#fff0);position:absolute;inset:0;z-index:0;border-radius:inherit}:host:after{content:\"\";background:linear-gradient(to top,#000,#0000);position:absolute;inset:0;z-index:1;border-radius:inherit}:host .pointer{z-index:2;flex:none;position:absolute;cursor:pointer;border:var(--emr-color-picker-saturation-pointer-border);top:0;left:0;border-radius:50%;width:var(--emr-color-picker-saturation-pointer-size);height:var(--emr-color-picker-saturation-pointer-size);transform:translate(-50%,-50%);box-shadow:var(--emr-color-picker-saturation-pointer-shadow)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SaturationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.22", type: SaturationComponent, isStandalone: true, selector: "emr-saturation", inputs: { tinyColor: { classPropertyName: "tinyColor", publicName: "tinyColor", isSignal: true, isRequired: true, transformFunction: null }, colorFromHue: { classPropertyName: "colorFromHue", publicName: "colorFromHue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tinyColor: "tinyColorChange", colorChange: "colorChange" }, host: { classAttribute: "emr-saturation" }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }], exportAs: ["emrSaturation"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\"></div>\n", styles: [":host{display:block;flex:none;position:relative;width:var(--emr-color-picker-saturation-width);height:var(--emr-color-picker-saturation-height);border-radius:var(--emr-color-picker-border-radius)}:host:before{content:\"\";background:linear-gradient(to right,#fff,#fff0);position:absolute;inset:0;z-index:0;border-radius:inherit}:host:after{content:\"\";background:linear-gradient(to top,#000,#0000);position:absolute;inset:0;z-index:1;border-radius:inherit}:host .pointer{z-index:2;flex:none;position:absolute;cursor:pointer;border:var(--emr-color-picker-saturation-pointer-border);top:0;left:0;border-radius:50%;width:var(--emr-color-picker-saturation-pointer-size);height:var(--emr-color-picker-saturation-pointer-size);transform:translate(-50%,-50%);box-shadow:var(--emr-color-picker-saturation-pointer-shadow)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SaturationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SaturationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-saturation', exportAs: 'emrSaturation', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'emr-saturation'
-                    }, template: "<div #pointer class=\"pointer\"></div>\n", styles: [":host{display:block;flex:none;position:relative;width:var(--emr-color-picker-saturation-width);height:var(--emr-color-picker-saturation-height);border-radius:var(--emr-color-picker-border-radius)}:host:before{content:\"\";background:linear-gradient(to right,#fff,#fff0);position:absolute;inset:0;z-index:0;border-radius:inherit}:host:after{content:\"\";background:linear-gradient(to top,#000,#0000);position:absolute;inset:0;z-index:1;border-radius:inherit}:host .pointer{z-index:2;flex:none;position:absolute;cursor:pointer;border:var(--emr-color-picker-saturation-pointer-border);top:0;left:0;border-radius:50%;width:var(--emr-color-picker-saturation-pointer-size);height:var(--emr-color-picker-saturation-pointer-size);transform:translate(-50%,-50%);box-shadow:var(--emr-color-picker-saturation-pointer-shadow)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div #pointer class=\"pointer\"></div>\n", styles: [":host{display:block;flex:none;position:relative;width:var(--emr-color-picker-saturation-width);height:var(--emr-color-picker-saturation-height);border-radius:var(--emr-color-picker-border-radius)}:host:before{content:\"\";background:linear-gradient(to right,#fff,#fff0);position:absolute;inset:0;z-index:0;border-radius:inherit}:host:after{content:\"\";background:linear-gradient(to top,#000,#0000);position:absolute;inset:0;z-index:1;border-radius:inherit}:host .pointer{z-index:2;flex:none;position:absolute;cursor:pointer;border:var(--emr-color-picker-saturation-pointer-border);top:0;left:0;border-radius:50%;width:var(--emr-color-picker-saturation-pointer-size);height:var(--emr-color-picker-saturation-pointer-size);transform:translate(-50%,-50%);box-shadow:var(--emr-color-picker-saturation-pointer-shadow)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { pointer: [{ type: i0.ViewChild, args: ['pointer', { isSignal: true }] }], tinyColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tinyColor", required: true }] }, { type: i0.Output, args: ["tinyColorChange"] }], colorFromHue: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorFromHue", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
 class HueComponent extends BaseComponent {
     cdr = inject(ChangeDetectorRef);
     _renderer = inject(Renderer2);
     pointer = viewChild.required('pointer');
-    tinyColor = input.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : []));
+    tinyColor = input.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : /* istanbul ignore next */ []));
     colorChange = output();
     ngOnChanges(changes) {
         if (changes['tinyColor'] && changes['tinyColor'].previousValue !== changes['tinyColor'].currentValue) {
@@ -216,22 +216,22 @@ class HueComponent extends BaseComponent {
         const newColor = new TinyColor(`hsv(${hsv.h}, 100%, 100%)`).setAlpha(1);
         this._renderer.setStyle(this.pointer().nativeElement, 'background-color', newColor.toRgbString());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HueComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: HueComponent, isStandalone: true, selector: "emr-hue", inputs: { tinyColor: { classPropertyName: "tinyColor", publicName: "tinyColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { colorChange: "colorChange" }, host: { classAttribute: "emr-hue" }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }], exportAs: ["emrHue"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\"></div>\n", styles: [":host{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwkUFWbCCAAAAFxJREFUaN7t0kEKg0AQAME2x83/n2qu5qCgD1iDhCoYdpnbQC9bbY1qVO/jvc6k3ad91s7/7F1/csgPrujuQ17BDYSFsBAWwgJhISyEBcJCWAgLhIWwEBYIi2f7Ar/1TCgFH2X9AAAAAElFTkSuQmCC);background-size:100% 100%;touch-action:none;display:block;width:var(--emr-color-picker-hue-width);height:var(--emr-color-picker-hue-height);position:relative;border-radius:var(--emr-color-picker-border-radius)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-hue-pointer-size);height:var(--emr-color-picker-hue-pointer-size);box-shadow:var(--emr-color-picker-hue-pointer-shadow);border:var(--emr-color-picker-hue-pointer-border);top:50%;transform:translate(-50%,-50%)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HueComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.22", type: HueComponent, isStandalone: true, selector: "emr-hue", inputs: { tinyColor: { classPropertyName: "tinyColor", publicName: "tinyColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { colorChange: "colorChange" }, host: { classAttribute: "emr-hue" }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }], exportAs: ["emrHue"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\"></div>\n", styles: [":host{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwkUFWbCCAAAAFxJREFUaN7t0kEKg0AQAME2x83/n2qu5qCgD1iDhCoYdpnbQC9bbY1qVO/jvc6k3ad91s7/7F1/csgPrujuQ17BDYSFsBAWwgJhISyEBcJCWAgLhIWwEBYIi2f7Ar/1TCgFH2X9AAAAAElFTkSuQmCC);background-size:100% 100%;touch-action:none;display:block;width:var(--emr-color-picker-hue-width);height:var(--emr-color-picker-hue-height);position:relative;border-radius:var(--emr-color-picker-border-radius)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-hue-pointer-size);height:var(--emr-color-picker-hue-pointer-size);box-shadow:var(--emr-color-picker-hue-pointer-shadow);border:var(--emr-color-picker-hue-pointer-border);top:50%;transform:translate(-50%,-50%)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-hue', exportAs: 'emrHue', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'emr-hue',
-                    }, template: "<div #pointer class=\"pointer\"></div>\n", styles: [":host{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwkUFWbCCAAAAFxJREFUaN7t0kEKg0AQAME2x83/n2qu5qCgD1iDhCoYdpnbQC9bbY1qVO/jvc6k3ad91s7/7F1/csgPrujuQ17BDYSFsBAWwgJhISyEBcJCWAgLhIWwEBYIi2f7Ar/1TCgFH2X9AAAAAElFTkSuQmCC);background-size:100% 100%;touch-action:none;display:block;width:var(--emr-color-picker-hue-width);height:var(--emr-color-picker-hue-height);position:relative;border-radius:var(--emr-color-picker-border-radius)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-hue-pointer-size);height:var(--emr-color-picker-hue-pointer-size);box-shadow:var(--emr-color-picker-hue-pointer-shadow);border:var(--emr-color-picker-hue-pointer-border);top:50%;transform:translate(-50%,-50%)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div #pointer class=\"pointer\"></div>\n", styles: [":host{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwkUFWbCCAAAAFxJREFUaN7t0kEKg0AQAME2x83/n2qu5qCgD1iDhCoYdpnbQC9bbY1qVO/jvc6k3ad91s7/7F1/csgPrujuQ17BDYSFsBAWwgJhISyEBcJCWAgLhIWwEBYIi2f7Ar/1TCgFH2X9AAAAAElFTkSuQmCC);background-size:100% 100%;touch-action:none;display:block;width:var(--emr-color-picker-hue-width);height:var(--emr-color-picker-hue-height);position:relative;border-radius:var(--emr-color-picker-border-radius)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-hue-pointer-size);height:var(--emr-color-picker-hue-pointer-size);box-shadow:var(--emr-color-picker-hue-pointer-shadow);border:var(--emr-color-picker-hue-pointer-border);top:50%;transform:translate(-50%,-50%)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { pointer: [{ type: i0.ViewChild, args: ['pointer', { isSignal: true }] }], tinyColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tinyColor", required: true }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
 class AlphaComponent extends BaseComponent {
     _renderer = inject(Renderer2);
     _pointer = viewChild.required('pointer');
     _pointerBg = viewChild.required('pointerBg');
-    tinyColor = input.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : []));
-    colorFromHue = input(...(ngDevMode ? [undefined, { debugName: "colorFromHue" }] : []));
+    tinyColor = input.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : /* istanbul ignore next */ []));
+    colorFromHue = input(...(ngDevMode ? [undefined, { debugName: "colorFromHue" }] : /* istanbul ignore next */ []));
     tmpColor;
     alpha = 1;
     alphaChange = output();
@@ -282,39 +282,33 @@ class AlphaComponent extends BaseComponent {
     _setPointerBgColor(tinyColor) {
         this._renderer.setStyle(this._pointerBg().nativeElement, 'background-color', tinyColor.clone().setAlpha(this.alpha).toRgbString());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AlphaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: AlphaComponent, isStandalone: true, selector: "emr-alpha", inputs: { tinyColor: { classPropertyName: "tinyColor", publicName: "tinyColor", isSignal: true, isRequired: true, transformFunction: null }, colorFromHue: { classPropertyName: "colorFromHue", publicName: "colorFromHue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { alphaChange: "alphaChange" }, host: { classAttribute: "emr-alpha" }, viewQueries: [{ propertyName: "_pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }, { propertyName: "_pointerBg", first: true, predicate: ["pointerBg"], descendants: true, isSignal: true }], exportAs: ["emrAlpha"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\">\n  <div #pointerBg class=\"pointer-bg\"></div>\n</div>\n<div class=\"gradient\" [ngStyle]=\"{ 'background': gradient }\"></div>\n", styles: [":host{touch-action:none;display:block;width:var(--emr-color-picker-alpha-width);height:var(--emr-color-picker-alpha-height);position:relative;border-radius:var(--emr-color-picker-border-radius);background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .gradient{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute}:host[vertical]{width:var(--emr-color-picker-alpha-height);height:var(--emr-color-picker-alpha-width)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-alpha-pointer-size);height:var(--emr-color-picker-alpha-pointer-size);box-shadow:var(--emr-color-picker-alpha-pointer-shadow);border:var(--emr-color-picker-alpha-pointer-border);top:50%;transform:translate(-50%,-50%)}:host .pointer:before{content:\"\";position:absolute;inset:0;border-radius:inherit;background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .pointer-bg{position:absolute;inset:0;border-radius:inherit}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AlphaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.22", type: AlphaComponent, isStandalone: true, selector: "emr-alpha", inputs: { tinyColor: { classPropertyName: "tinyColor", publicName: "tinyColor", isSignal: true, isRequired: true, transformFunction: null }, colorFromHue: { classPropertyName: "colorFromHue", publicName: "colorFromHue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { alphaChange: "alphaChange" }, host: { classAttribute: "emr-alpha" }, viewQueries: [{ propertyName: "_pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }, { propertyName: "_pointerBg", first: true, predicate: ["pointerBg"], descendants: true, isSignal: true }], exportAs: ["emrAlpha"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\">\n  <div #pointerBg class=\"pointer-bg\"></div>\n</div>\n<div class=\"gradient\" [ngStyle]=\"{ 'background': gradient }\"></div>\n", styles: [":host{touch-action:none;display:block;width:var(--emr-color-picker-alpha-width);height:var(--emr-color-picker-alpha-height);position:relative;border-radius:var(--emr-color-picker-border-radius);background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .gradient{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute}:host[vertical]{width:var(--emr-color-picker-alpha-height);height:var(--emr-color-picker-alpha-width)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-alpha-pointer-size);height:var(--emr-color-picker-alpha-pointer-size);box-shadow:var(--emr-color-picker-alpha-pointer-shadow);border:var(--emr-color-picker-alpha-pointer-border);top:50%;transform:translate(-50%,-50%)}:host .pointer:before{content:\"\";position:absolute;inset:0;border-radius:inherit;background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .pointer-bg{position:absolute;inset:0;border-radius:inherit}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AlphaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AlphaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-alpha', exportAs: 'emrAlpha', imports: [
                         NgStyle
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'emr-alpha'
-                    }, template: "<div #pointer class=\"pointer\">\n  <div #pointerBg class=\"pointer-bg\"></div>\n</div>\n<div class=\"gradient\" [ngStyle]=\"{ 'background': gradient }\"></div>\n", styles: [":host{touch-action:none;display:block;width:var(--emr-color-picker-alpha-width);height:var(--emr-color-picker-alpha-height);position:relative;border-radius:var(--emr-color-picker-border-radius);background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .gradient{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute}:host[vertical]{width:var(--emr-color-picker-alpha-height);height:var(--emr-color-picker-alpha-width)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-alpha-pointer-size);height:var(--emr-color-picker-alpha-pointer-size);box-shadow:var(--emr-color-picker-alpha-pointer-shadow);border:var(--emr-color-picker-alpha-pointer-border);top:50%;transform:translate(-50%,-50%)}:host .pointer:before{content:\"\";position:absolute;inset:0;border-radius:inherit;background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .pointer-bg{position:absolute;inset:0;border-radius:inherit}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div #pointer class=\"pointer\">\n  <div #pointerBg class=\"pointer-bg\"></div>\n</div>\n<div class=\"gradient\" [ngStyle]=\"{ 'background': gradient }\"></div>\n", styles: [":host{touch-action:none;display:block;width:var(--emr-color-picker-alpha-width);height:var(--emr-color-picker-alpha-height);position:relative;border-radius:var(--emr-color-picker-border-radius);background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .gradient{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute}:host[vertical]{width:var(--emr-color-picker-alpha-height);height:var(--emr-color-picker-alpha-width)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-alpha-pointer-size);height:var(--emr-color-picker-alpha-pointer-size);box-shadow:var(--emr-color-picker-alpha-pointer-shadow);border:var(--emr-color-picker-alpha-pointer-border);top:50%;transform:translate(-50%,-50%)}:host .pointer:before{content:\"\";position:absolute;inset:0;border-radius:inherit;background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .pointer-bg{position:absolute;inset:0;border-radius:inherit}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { _pointer: [{ type: i0.ViewChild, args: ['pointer', { isSignal: true }] }], _pointerBg: [{ type: i0.ViewChild, args: ['pointerBg', { isSignal: true }] }], tinyColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tinyColor", required: true }] }], colorFromHue: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorFromHue", required: false }] }], alphaChange: [{ type: i0.Output, args: ["alphaChange"] }] } });
 class ColorPickerComponent {
     cdr = inject(ChangeDetectorRef);
-    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
-    asDropdown = input(true, ...(ngDevMode ? [{ debugName: "asDropdown", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
-    showOpacity = input(true, ...(ngDevMode ? [{ debugName: "showOpacity", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
-    resultFormat = input('rgb', ...(ngDevMode ? [{ debugName: "resultFormat" }] : []));
+    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    asDropdown = input(true, { ...(ngDevMode ? { debugName: "asDropdown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showOpacity = input(true, { ...(ngDevMode ? { debugName: "showOpacity" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    resultFormat = input('rgb', ...(ngDevMode ? [{ debugName: "resultFormat" }] : /* istanbul ignore next */ []));
     colorChange = output();
     rawColorChange = output();
     tmpColor;
     hexColor;
-    _color = signal(new TinyColor('red'), ...(ngDevMode ? [{ debugName: "_color" }] : []));
-    _colorFromHue = signal(null, ...(ngDevMode ? [{ debugName: "_colorFromHue" }] : []));
-    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-    alpha = signal(1, ...(ngDevMode ? [{ debugName: "alpha" }] : []));
+    _color = signal(new TinyColor('red'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _colorFromHue = signal(null, ...(ngDevMode ? [{ debugName: "_colorFromHue" }] : /* istanbul ignore next */ []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    alpha = signal(1, ...(ngDevMode ? [{ debugName: "alpha" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         if (this.color()) {
             this._setColor(this.color());
@@ -430,16 +424,16 @@ class ColorPickerComponent {
         this.colorChange.emit(format);
         this.onChange(format);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorPickerComponent, isStandalone: true, selector: "emr-color-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, asDropdown: { classPropertyName: "asDropdown", publicName: "asDropdown", isSignal: true, isRequired: false, transformFunction: null }, showOpacity: { classPropertyName: "showOpacity", publicName: "showOpacity", isSignal: true, isRequired: false, transformFunction: null }, resultFormat: { classPropertyName: "resultFormat", publicName: "resultFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", rawColorChange: "rawColorChange" }, host: { listeners: { "contextmenu": "_handleContextMenu($event)" }, properties: { "class.is-disabled": "_disabled()", "class.as-dropdown": "asDropdown()" }, classAttribute: "emr-color-picker" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ColorPickerComponent, isStandalone: true, selector: "emr-color-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, asDropdown: { classPropertyName: "asDropdown", publicName: "asDropdown", isSignal: true, isRequired: false, transformFunction: null }, showOpacity: { classPropertyName: "showOpacity", publicName: "showOpacity", isSignal: true, isRequired: false, transformFunction: null }, resultFormat: { classPropertyName: "resultFormat", publicName: "resultFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", rawColorChange: "rawColorChange" }, host: { listeners: { "contextmenu": "_handleContextMenu($event)" }, properties: { "class.is-disabled": "_disabled()", "class.as-dropdown": "asDropdown()" }, classAttribute: "emr-color-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPickerComponent),
                 multi: true
             }
-        ], exportAs: ["emrColorPicker"], usesOnChanges: true, ngImport: i0, template: "<emr-saturation [colorFromHue]=\"_colorFromHue()\"\n                [tinyColor]=\"_color()\"\n                (colorChange)=\"onSaturationColorChange($event)\"/>\n<emr-hue [tinyColor]=\"_color()\"\n         (colorChange)=\"onHueColorChange($event)\"/>\n@if (showOpacity()) {\n  <emr-alpha [colorFromHue]=\"_colorFromHue()\"\n             [tinyColor]=\"_color()\"\n             (alphaChange)=\"onAlphaChange($event)\"/>\n}\n<div class=\"relative h-12 bg-surface-container-highest\n            has-[:focus]:bg-surface-container-lowest has-[:focus]:shadow-sm rounded-lg\">\n  <div class=\"text-4xs absolute start-3 top-1\">HEX</div>\n  <input #hexInput\n         type=\"text\" maxlength=\"7\"\n         class=\"h-10 mt-2 px-3 focus:outline-none w-full\"\n         [(ngModel)]=\"hexColor\"\n         (ngModelChange)=\"onHexColorChange($event)\"\n         (blur)=\"onHexColorBlur()\">\n  <div class=\"absolute right-0 top-1/2 -translate-y-1/2 z-1\">\n    <button mat-icon-button (mousedown)=\"copyToClipboard($event, hexInput)\">\n      <mat-icon>content_copy</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host{--emr-color-picker-bg: var(--color-surface-container);--emr-color-picker-border-radius: .375rem;--emr-color-picker-margin-offset: calc(var(--spacing, .25rem) * 2);--emr-color-picker-border: 0 solid var(--color-neutral-200);--emr-color-picker-padding: calc(var(--spacing, .25rem) * 3);--emr-color-picker-gap: calc(var(--spacing, .25rem) * 2.5);--emr-color-picker-as-dropdown-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--emr-color-picker-saturation-width: 260px;--emr-color-picker-saturation-height: 110px;--emr-color-picker-saturation-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-saturation-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-saturation-pointer-border: 2px solid white;--emr-color-picker-hue-width: var(--emr-color-picker-saturation-width);--emr-color-picker-hue-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-hue-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-hue-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-hue-pointer-border: 2px solid white;--emr-color-picker-alpha-width: var(--emr-color-picker-saturation-width);--emr-color-picker-alpha-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-alpha-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-alpha-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-alpha-pointer-border: 2px solid white;display:inline-grid;-webkit-user-select:none;user-select:none;position:relative;flex:none;gap:var(--emr-color-picker-gap);background:var(--emr-color-picker-bg);border-radius:var(--emr-color-picker-border-radius);border:var(--emr-color-picker-border);padding:var(--emr-color-picker-padding)}:host.is-disabled{pointer-events:none}:host.as-dropdown{box-shadow:var(--emr-color-picker-as-dropdown-shadow)}@keyframes emr-color-picker-animation{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}:host-context(.emr-color-picker-overlay-panel){animation:.15s emr-color-picker-animation}:host-context(.emr-color-picker-above){margin-bottom:var(--emr-color-picker-margin-offset);transform-origin:bottom}:host-context(.emr-color-picker-below){margin-top:var(--emr-color-picker-margin-offset);transform-origin:top}:host-context(.emr-color-picker-before){margin-inline-end:var(--emr-color-picker-margin-offset);transform-origin:right}:host-context(.emr-color-picker-after){margin-inline-start:var(--emr-color-picker-margin-offset);transform-origin:left}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AlphaComponent, selector: "emr-alpha", inputs: ["tinyColor", "colorFromHue"], outputs: ["alphaChange"], exportAs: ["emrAlpha"] }, { kind: "component", type: SaturationComponent, selector: "emr-saturation", inputs: ["tinyColor", "colorFromHue"], outputs: ["tinyColorChange", "colorChange"], exportAs: ["emrSaturation"] }, { kind: "component", type: HueComponent, selector: "emr-hue", inputs: ["tinyColor"], outputs: ["colorChange"], exportAs: ["emrHue"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], exportAs: ["emrColorPicker"], usesOnChanges: true, ngImport: i0, template: "<emr-saturation [colorFromHue]=\"_colorFromHue()\"\n                [tinyColor]=\"_color()\"\n                (colorChange)=\"onSaturationColorChange($event)\"/>\n<emr-hue [tinyColor]=\"_color()\"\n         (colorChange)=\"onHueColorChange($event)\"/>\n@if (showOpacity()) {\n  <emr-alpha [colorFromHue]=\"_colorFromHue()\"\n             [tinyColor]=\"_color()\"\n             (alphaChange)=\"onAlphaChange($event)\"/>\n}\n<div class=\"relative h-12 bg-surface-container-highest\n            has-[:focus]:bg-surface-container-lowest has-[:focus]:shadow-sm rounded-lg\">\n  <div class=\"text-4xs absolute start-3 top-1\">HEX</div>\n  <input #hexInput\n         type=\"text\" maxlength=\"7\"\n         class=\"h-10 mt-2 px-3 focus:outline-none w-full\"\n         [(ngModel)]=\"hexColor\"\n         (ngModelChange)=\"onHexColorChange($event)\"\n         (blur)=\"onHexColorBlur()\">\n  <div class=\"absolute right-0 top-1/2 -translate-y-1/2 z-1\">\n    <button mat-icon-button (mousedown)=\"copyToClipboard($event, hexInput)\">\n      <mat-icon>content_copy</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host{--emr-color-picker-bg: var(--color-surface-container);--emr-color-picker-border-radius: .375rem;--emr-color-picker-margin-offset: calc(var(--spacing, .25rem) * 2);--emr-color-picker-border: 0 solid var(--color-neutral-200);--emr-color-picker-padding: calc(var(--spacing, .25rem) * 3);--emr-color-picker-gap: calc(var(--spacing, .25rem) * 2.5);--emr-color-picker-as-dropdown-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--emr-color-picker-saturation-width: 260px;--emr-color-picker-saturation-height: 110px;--emr-color-picker-saturation-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-saturation-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-saturation-pointer-border: 2px solid white;--emr-color-picker-hue-width: var(--emr-color-picker-saturation-width);--emr-color-picker-hue-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-hue-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-hue-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-hue-pointer-border: 2px solid white;--emr-color-picker-alpha-width: var(--emr-color-picker-saturation-width);--emr-color-picker-alpha-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-alpha-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-alpha-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-alpha-pointer-border: 2px solid white;display:inline-grid;-webkit-user-select:none;user-select:none;position:relative;flex:none;gap:var(--emr-color-picker-gap);background:var(--emr-color-picker-bg);border-radius:var(--emr-color-picker-border-radius);border:var(--emr-color-picker-border);padding:var(--emr-color-picker-padding)}:host.is-disabled{pointer-events:none}:host.as-dropdown{box-shadow:var(--emr-color-picker-as-dropdown-shadow)}@keyframes emr-color-picker-animation{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}:host-context(.emr-color-picker-overlay-panel){animation:.15s emr-color-picker-animation}:host-context(.emr-color-picker-above){margin-bottom:var(--emr-color-picker-margin-offset);transform-origin:bottom}:host-context(.emr-color-picker-below){margin-top:var(--emr-color-picker-margin-offset);transform-origin:top}:host-context(.emr-color-picker-before){margin-inline-end:var(--emr-color-picker-margin-offset);transform-origin:right}:host-context(.emr-color-picker-after){margin-inline-start:var(--emr-color-picker-margin-offset);transform-origin:left}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AlphaComponent, selector: "emr-alpha", inputs: ["tinyColor", "colorFromHue"], outputs: ["alphaChange"], exportAs: ["emrAlpha"] }, { kind: "component", type: SaturationComponent, selector: "emr-saturation", inputs: ["tinyColor", "colorFromHue"], outputs: ["tinyColorChange", "colorChange"], exportAs: ["emrSaturation"] }, { kind: "component", type: HueComponent, selector: "emr-hue", inputs: ["tinyColor"], outputs: ["colorChange"], exportAs: ["emrHue"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-color-picker', exportAs: 'emrColorPicker', imports: [
                         FormsModule,
@@ -459,26 +453,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '[class.is-disabled]': '_disabled()',
                         '[class.as-dropdown]': 'asDropdown()',
                         '(contextmenu)': '_handleContextMenu($event)'
-                    }, template: "<emr-saturation [colorFromHue]=\"_colorFromHue()\"\n                [tinyColor]=\"_color()\"\n                (colorChange)=\"onSaturationColorChange($event)\"/>\n<emr-hue [tinyColor]=\"_color()\"\n         (colorChange)=\"onHueColorChange($event)\"/>\n@if (showOpacity()) {\n  <emr-alpha [colorFromHue]=\"_colorFromHue()\"\n             [tinyColor]=\"_color()\"\n             (alphaChange)=\"onAlphaChange($event)\"/>\n}\n<div class=\"relative h-12 bg-surface-container-highest\n            has-[:focus]:bg-surface-container-lowest has-[:focus]:shadow-sm rounded-lg\">\n  <div class=\"text-4xs absolute start-3 top-1\">HEX</div>\n  <input #hexInput\n         type=\"text\" maxlength=\"7\"\n         class=\"h-10 mt-2 px-3 focus:outline-none w-full\"\n         [(ngModel)]=\"hexColor\"\n         (ngModelChange)=\"onHexColorChange($event)\"\n         (blur)=\"onHexColorBlur()\">\n  <div class=\"absolute right-0 top-1/2 -translate-y-1/2 z-1\">\n    <button mat-icon-button (mousedown)=\"copyToClipboard($event, hexInput)\">\n      <mat-icon>content_copy</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host{--emr-color-picker-bg: var(--color-surface-container);--emr-color-picker-border-radius: .375rem;--emr-color-picker-margin-offset: calc(var(--spacing, .25rem) * 2);--emr-color-picker-border: 0 solid var(--color-neutral-200);--emr-color-picker-padding: calc(var(--spacing, .25rem) * 3);--emr-color-picker-gap: calc(var(--spacing, .25rem) * 2.5);--emr-color-picker-as-dropdown-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--emr-color-picker-saturation-width: 260px;--emr-color-picker-saturation-height: 110px;--emr-color-picker-saturation-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-saturation-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-saturation-pointer-border: 2px solid white;--emr-color-picker-hue-width: var(--emr-color-picker-saturation-width);--emr-color-picker-hue-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-hue-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-hue-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-hue-pointer-border: 2px solid white;--emr-color-picker-alpha-width: var(--emr-color-picker-saturation-width);--emr-color-picker-alpha-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-alpha-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-alpha-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-alpha-pointer-border: 2px solid white;display:inline-grid;-webkit-user-select:none;user-select:none;position:relative;flex:none;gap:var(--emr-color-picker-gap);background:var(--emr-color-picker-bg);border-radius:var(--emr-color-picker-border-radius);border:var(--emr-color-picker-border);padding:var(--emr-color-picker-padding)}:host.is-disabled{pointer-events:none}:host.as-dropdown{box-shadow:var(--emr-color-picker-as-dropdown-shadow)}@keyframes emr-color-picker-animation{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}:host-context(.emr-color-picker-overlay-panel){animation:.15s emr-color-picker-animation}:host-context(.emr-color-picker-above){margin-bottom:var(--emr-color-picker-margin-offset);transform-origin:bottom}:host-context(.emr-color-picker-below){margin-top:var(--emr-color-picker-margin-offset);transform-origin:top}:host-context(.emr-color-picker-before){margin-inline-end:var(--emr-color-picker-margin-offset);transform-origin:right}:host-context(.emr-color-picker-after){margin-inline-start:var(--emr-color-picker-margin-offset);transform-origin:left}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<emr-saturation [colorFromHue]=\"_colorFromHue()\"\n                [tinyColor]=\"_color()\"\n                (colorChange)=\"onSaturationColorChange($event)\"/>\n<emr-hue [tinyColor]=\"_color()\"\n         (colorChange)=\"onHueColorChange($event)\"/>\n@if (showOpacity()) {\n  <emr-alpha [colorFromHue]=\"_colorFromHue()\"\n             [tinyColor]=\"_color()\"\n             (alphaChange)=\"onAlphaChange($event)\"/>\n}\n<div class=\"relative h-12 bg-surface-container-highest\n            has-[:focus]:bg-surface-container-lowest has-[:focus]:shadow-sm rounded-lg\">\n  <div class=\"text-4xs absolute start-3 top-1\">HEX</div>\n  <input #hexInput\n         type=\"text\" maxlength=\"7\"\n         class=\"h-10 mt-2 px-3 focus:outline-none w-full\"\n         [(ngModel)]=\"hexColor\"\n         (ngModelChange)=\"onHexColorChange($event)\"\n         (blur)=\"onHexColorBlur()\">\n  <div class=\"absolute right-0 top-1/2 -translate-y-1/2 z-1\">\n    <button mat-icon-button (mousedown)=\"copyToClipboard($event, hexInput)\">\n      <mat-icon>content_copy</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host{--emr-color-picker-bg: var(--color-surface-container);--emr-color-picker-border-radius: .375rem;--emr-color-picker-margin-offset: calc(var(--spacing, .25rem) * 2);--emr-color-picker-border: 0 solid var(--color-neutral-200);--emr-color-picker-padding: calc(var(--spacing, .25rem) * 3);--emr-color-picker-gap: calc(var(--spacing, .25rem) * 2.5);--emr-color-picker-as-dropdown-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--emr-color-picker-saturation-width: 260px;--emr-color-picker-saturation-height: 110px;--emr-color-picker-saturation-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-saturation-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-saturation-pointer-border: 2px solid white;--emr-color-picker-hue-width: var(--emr-color-picker-saturation-width);--emr-color-picker-hue-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-hue-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-hue-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-hue-pointer-border: 2px solid white;--emr-color-picker-alpha-width: var(--emr-color-picker-saturation-width);--emr-color-picker-alpha-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-alpha-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-alpha-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-alpha-pointer-border: 2px solid white;display:inline-grid;-webkit-user-select:none;user-select:none;position:relative;flex:none;gap:var(--emr-color-picker-gap);background:var(--emr-color-picker-bg);border-radius:var(--emr-color-picker-border-radius);border:var(--emr-color-picker-border);padding:var(--emr-color-picker-padding)}:host.is-disabled{pointer-events:none}:host.as-dropdown{box-shadow:var(--emr-color-picker-as-dropdown-shadow)}@keyframes emr-color-picker-animation{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}:host-context(.emr-color-picker-overlay-panel){animation:.15s emr-color-picker-animation}:host-context(.emr-color-picker-above){margin-bottom:var(--emr-color-picker-margin-offset);transform-origin:bottom}:host-context(.emr-color-picker-below){margin-top:var(--emr-color-picker-margin-offset);transform-origin:top}:host-context(.emr-color-picker-before){margin-inline-end:var(--emr-color-picker-margin-offset);transform-origin:right}:host-context(.emr-color-picker-after){margin-inline-start:var(--emr-color-picker-margin-offset);transform-origin:left}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], asDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "asDropdown", required: false }] }], showOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOpacity", required: false }] }], resultFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultFormat", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], rawColorChange: [{ type: i0.Output, args: ["rawColorChange"] }] } });
 class ColorPickerThumbnailComponent {
     _elementRef = inject(ElementRef);
-    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     ngOnChanges(changes) {
         if (!this.color()) {
             return;
         }
         this._elementRef.nativeElement.style.setProperty('--emr-color-picker-thumbnail-bg', this.color());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: ColorPickerThumbnailComponent, isStandalone: true, selector: "emr-color-picker-thumbnail,[emr-color-picker-thumbnail]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "emr-color-picker-thumbnail" }, exportAs: ["emrColorPickerThumbnail"], usesOnChanges: true, ngImport: i0, template: "", styles: [":host{--emr-color-picker-thumbnail-bg: transparent;--emr-color-picker-thumbnail-size: calc(var(--spacing, .25rem) * 8);--emr-color-picker-thumbnail-border-radius: calc(infinity * 1px);display:inline-block;position:relative;border-radius:var(--emr-color-picker-thumbnail-border-radius);width:var(--emr-color-picker-thumbnail-size);height:var(--emr-color-picker-thumbnail-size);flex:none}:host:before{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute;background-position:0 0,4px 4px;background-size:8px 8px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host:after{display:block;content:\"\";border-radius:inherit;z-index:1;inset:0;position:absolute;background:var(--emr-color-picker-thumbnail-bg)}:host:active{transition:var(--emr-transition-transform);transform:scale(.97)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorPickerThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: ColorPickerThumbnailComponent, isStandalone: true, selector: "emr-color-picker-thumbnail,[emr-color-picker-thumbnail]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "emr-color-picker-thumbnail" }, exportAs: ["emrColorPickerThumbnail"], usesOnChanges: true, ngImport: i0, template: "", styles: [":host{--emr-color-picker-thumbnail-bg: transparent;--emr-color-picker-thumbnail-size: calc(var(--spacing, .25rem) * 8);--emr-color-picker-thumbnail-border-radius: calc(infinity * 1px);display:inline-block;position:relative;border-radius:var(--emr-color-picker-thumbnail-border-radius);width:var(--emr-color-picker-thumbnail-size);height:var(--emr-color-picker-thumbnail-size);flex:none}:host:before{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute;background-position:0 0,4px 4px;background-size:8px 8px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host:after{display:block;content:\"\";border-radius:inherit;z-index:1;inset:0;position:absolute;background:var(--emr-color-picker-thumbnail-bg)}:host:active{transition:var(--emr-transition-transform);transform:scale(.97)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerThumbnailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorPickerThumbnailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-color-picker-thumbnail,[emr-color-picker-thumbnail]', exportAs: 'emrColorPickerThumbnail', host: {
                         'class': 'emr-color-picker-thumbnail'
-                    }, template: "", styles: [":host{--emr-color-picker-thumbnail-bg: transparent;--emr-color-picker-thumbnail-size: calc(var(--spacing, .25rem) * 8);--emr-color-picker-thumbnail-border-radius: calc(infinity * 1px);display:inline-block;position:relative;border-radius:var(--emr-color-picker-thumbnail-border-radius);width:var(--emr-color-picker-thumbnail-size);height:var(--emr-color-picker-thumbnail-size);flex:none}:host:before{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute;background-position:0 0,4px 4px;background-size:8px 8px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host:after{display:block;content:\"\";border-radius:inherit;z-index:1;inset:0;position:absolute;background:var(--emr-color-picker-thumbnail-bg)}:host:active{transition:var(--emr-transition-transform);transform:scale(.97)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "", styles: [":host{--emr-color-picker-thumbnail-bg: transparent;--emr-color-picker-thumbnail-size: calc(var(--spacing, .25rem) * 8);--emr-color-picker-thumbnail-border-radius: calc(infinity * 1px);display:inline-block;position:relative;border-radius:var(--emr-color-picker-thumbnail-border-radius);width:var(--emr-color-picker-thumbnail-size);height:var(--emr-color-picker-thumbnail-size);flex:none}:host:before{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute;background-position:0 0,4px 4px;background-size:8px 8px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host:after{display:block;content:\"\";border-radius:inherit;z-index:1;inset:0;position:absolute;background:var(--emr-color-picker-thumbnail-bg)}:host:active{transition:var(--emr-transition-transform);transform:scale(.97)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 class PositionManager {
@@ -594,10 +588,8 @@ class ColorPickerTriggerForDirective {
     _viewContainerRef = inject(ViewContainerRef);
     _injector = inject(Injector);
     _destroyRef = inject(DestroyRef);
-    colorPickerTemplateRef = input.required(...(ngDevMode ? [{ debugName: "colorPickerTemplateRef", alias: 'emrColorPickerTriggerFor' }] : [{
-            alias: 'emrColorPickerTriggerFor'
-        }]));
-    position = input('below-center', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    colorPickerTemplateRef = input.required({ ...(ngDevMode ? { debugName: "colorPickerTemplateRef" } : /* istanbul ignore next */ {}), alias: 'emrColorPickerTriggerFor' });
+    position = input('below-center', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     opened = output();
     closed = output();
     _portal;
@@ -685,10 +677,10 @@ class ColorPickerTriggerForDirective {
             element.setAttribute('type', 'button');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerTriggerForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: ColorPickerTriggerForDirective, isStandalone: true, selector: "[emrColorPickerTriggerFor]", inputs: { colorPickerTemplateRef: { classPropertyName: "colorPickerTemplateRef", publicName: "emrColorPickerTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "_handleClick($event)" }, classAttribute: "emr-color-picker-trigger-for" }, exportAs: ["emrColorPickerTriggerFor"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorPickerTriggerForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: ColorPickerTriggerForDirective, isStandalone: true, selector: "[emrColorPickerTriggerFor]", inputs: { colorPickerTemplateRef: { classPropertyName: "colorPickerTemplateRef", publicName: "emrColorPickerTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "_handleClick($event)" }, classAttribute: "emr-color-picker-trigger-for" }, exportAs: ["emrColorPickerTriggerFor"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerTriggerForDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorPickerTriggerForDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrColorPickerTriggerFor]',