npm - @ngstarter-ui/components - Versions diffs - 1.0.28 → 1.0.31 - Mend

@ngstarter-ui/components 1.0.28 → 1.0.31

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 (230) hide show

package/fesm2022/ngstarter-ui-components-color-switcher.mjs CHANGED Viewed

@@ -48,7 +48,7 @@ class ColorSwitcher {
                 useExisting: forwardRef(() => ColorSwitcher),
                 multi: true
             }
-        ], exportAs: ["ngsColorSwitcher"], usesOnChanges: true, ngImport: i0, template: "@for (color of colors(); track color) {\n  <button class=\"color\"\n       [style.--color]=\"color\"\n       [class.is-selected]=\"_selectedColor === color\"\n       (click)=\"selectColor(color)\">\n  </button>\n}\n\n", styles: [":host{--ngs-brand-colors-color-size: calc(var(--spacing, .25rem) * 7);--ngs-brand-colors-gap: calc(var(--spacing, .25rem) * 3);display:inline-flex;flex-wrap:wrap;gap:var(--ngs-brand-colors-gap);line-height:0}:host .color{--color: transparent;width:var(--ngs-brand-colors-color-size);height:var(--ngs-brand-colors-color-size);border-radius:calc(infinity * 1px);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;position:relative;background:var(--color);line-height:0;flex:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:#32325d26 0 2px 8px inset}:host .color:hover{scale:1.05}:host .color:active{scale:.95}:host .color.is-selected:before{content:\"\";position:absolute;border-radius:calc(infinity * 1px);background:#fff;width:calc(var(--spacing, .25rem) * 3);height:calc(var(--spacing, .25rem) * 3);top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}:host.is-disabled{pointer-events:none;opacity:60%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+        ], exportAs: ["ngsColorSwitcher"], usesOnChanges: true, ngImport: i0, template: "@for (color of colors(); track color) {\n  <button class=\"color\"\n       [style.--color]=\"color\"\n       [class.is-selected]=\"_selectedColor === color\"\n       (click)=\"selectColor(color)\">\n  </button>\n}\n\n", styles: [":host{--ngs-brand-colors-color-size: calc(var(--spacing, .25rem) * 7);--ngs-brand-colors-gap: calc(var(--spacing, .25rem) * 3);display:inline-flex;flex-wrap:wrap;gap:var(--ngs-brand-colors-gap);line-height:0}:host .color{--color: transparent;width:var(--ngs-brand-colors-color-size);height:var(--ngs-brand-colors-color-size);border-radius:calc(infinity * 1px);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;position:relative;background:var(--color);line-height:0;flex:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:#32325d26 0 2px 8px inset}:host .color:hover{scale:1.05}:host .color:active{scale:.95}:host .color.is-selected:before{content:\"\";position:absolute;border-radius:calc(infinity * 1px);background:#fff;width:calc(var(--spacing, .25rem) * 3);height:calc(var(--spacing, .25rem) * 3);top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;box-shadow:var(--ngs-shadow-sm)}:host.is-disabled{pointer-events:none;opacity:60%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorSwitcher, decorators: [{
             type: Component,
@@ -61,7 +61,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                     ], host: {
                         'class': 'ngs-brand-colors',
                         '[class.is-disabled]': 'disabled() || _disabled',
-                    }, template: "@for (color of colors(); track color) {\n  <button class=\"color\"\n       [style.--color]=\"color\"\n       [class.is-selected]=\"_selectedColor === color\"\n       (click)=\"selectColor(color)\">\n  </button>\n}\n\n", styles: [":host{--ngs-brand-colors-color-size: calc(var(--spacing, .25rem) * 7);--ngs-brand-colors-gap: calc(var(--spacing, .25rem) * 3);display:inline-flex;flex-wrap:wrap;gap:var(--ngs-brand-colors-gap);line-height:0}:host .color{--color: transparent;width:var(--ngs-brand-colors-color-size);height:var(--ngs-brand-colors-color-size);border-radius:calc(infinity * 1px);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;position:relative;background:var(--color);line-height:0;flex:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:#32325d26 0 2px 8px inset}:host .color:hover{scale:1.05}:host .color:active{scale:.95}:host .color.is-selected:before{content:\"\";position:absolute;border-radius:calc(infinity * 1px);background:#fff;width:calc(var(--spacing, .25rem) * 3);height:calc(var(--spacing, .25rem) * 3);top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}:host.is-disabled{pointer-events:none;opacity:60%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "@for (color of colors(); track color) {\n  <button class=\"color\"\n       [style.--color]=\"color\"\n       [class.is-selected]=\"_selectedColor === color\"\n       (click)=\"selectColor(color)\">\n  </button>\n}\n\n", styles: [":host{--ngs-brand-colors-color-size: calc(var(--spacing, .25rem) * 7);--ngs-brand-colors-gap: calc(var(--spacing, .25rem) * 3);display:inline-flex;flex-wrap:wrap;gap:var(--ngs-brand-colors-gap);line-height:0}:host .color{--color: transparent;width:var(--ngs-brand-colors-color-size);height:var(--ngs-brand-colors-color-size);border-radius:calc(infinity * 1px);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;position:relative;background:var(--color);line-height:0;flex:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:#32325d26 0 2px 8px inset}:host .color:hover{scale:1.05}:host .color:active{scale:.95}:host .color.is-selected:before{content:\"\";position:absolute;border-radius:calc(infinity * 1px);background:#fff;width:calc(var(--spacing, .25rem) * 3);height:calc(var(--spacing, .25rem) * 3);top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;box-shadow:var(--ngs-shadow-sm)}:host.is-disabled{pointer-events:none;opacity:60%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
 /**

package/fesm2022/ngstarter-ui-components-color-switcher.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngstarter-ui-components-color-switcher.mjs","sources":["../../../projects/components/color-switcher/src/color-switcher/color-switcher.ts","../../../projects/components/color-switcher/src/color-switcher/color-switcher.html","../../../projects/components/color-switcher/ngstarter-ui-components-color-switcher.ts"],"sourcesContent":["import {\n Component,\n OnChanges,\n SimpleChanges,\n input,\n output,\n forwardRef,\n inject,\n ChangeDetectorRef, booleanAttribute\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\n\nconst defaultColors = [\n '#35d1b3', '#08b0fe', '#8268f2', '#ae52d3', '#eb4ea3',\n '#fb811e', '#fac624', '#c2c2c2', '#4ed7ff'\n];\n\n@Component({\n selector: 'ngs-color-switcher',\n exportAs: 'ngsColorSwitcher',\n imports: [],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ColorSwitcher),\n multi: true\n }\n ],\n templateUrl: './color-switcher.html',\n styleUrl: './color-switcher.scss',\n host: {\n 'class': 'ngs-brand-colors',\n '[class.is-disabled]': 'disabled() \|\| _disabled',\n }\n})\nexport class ColorSwitcher implements ControlValueAccessor, OnChanges {\n private _cdr = inject(ChangeDetectorRef);\n protected _disabled = false;\n protected _selectedColor: string;\n\n colors = input<string[]>(defaultColors);\n selectedColor = input<string>();\n disabled = input(false, {\n transform: booleanAttribute\n });\n\n readonly colorChange = output<string>();\n\n _onChange: any = () => {};\n _onTouched: any = () => {};\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes['selectedColor']) {\n this._selectedColor = changes['selectedColor'].currentValue;\n }\n }\n\n selectColor(color: string): void {\n this._selectedColor = color;\n this.colorChange.emit(color);\n this._onChange(color);\n this._onTouched(color);\n }\n\n writeValue(_selectedColor: any) {\n this._selectedColor = _selectedColor;\n this._cdr.detectChanges();\n }\n\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n\n setDisabledState(isDisabled: BooleanInput): void {\n this._disabled = coerceBooleanProperty(isDisabled);\n }\n}\n","@for (color of colors(); track color) {\n <button class=\"color\"\n [style.--color]=\"color\"\n [class.is-selected]=\"_selectedColor === color\"\n (click)=\"selectColor(color)\">\n </button>\n}\n\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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~~4nCAAA~~,CAAA,EAAA,CAAA;;2FD4Ba,aAAa,EAAA,UAAA,EAAA,CAAA;kBAlBzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAAA,QAAA,EACpB,kBAAkB,EAAA,OAAA,EACnB,EAAE,EAAA,SAAA,EACA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,mBAAmB,CAAC;AAC5C,4BAAA,KAAK,EAAE;AACR;qBACF,EAAA,IAAA,EAGK;AACJ,wBAAA,OAAO,EAAE,kBAAkB;AAC3B,wBAAA,qBAAqB,EAAE,yBAAyB;AACjD,qBAAA,EAAA,QAAA,EAAA,2NAAA,EAAA,MAAA,EAAA,CAAA,~~4nCAAA~~,CAAA,EAAA;;;AElCH;;AAEG;;;;"}
1	+ {"version":3,"file":"ngstarter-ui-components-color-switcher.mjs","sources":["../../../projects/components/color-switcher/src/color-switcher/color-switcher.ts","../../../projects/components/color-switcher/src/color-switcher/color-switcher.html","../../../projects/components/color-switcher/ngstarter-ui-components-color-switcher.ts"],"sourcesContent":["import {\n Component,\n OnChanges,\n SimpleChanges,\n input,\n output,\n forwardRef,\n inject,\n ChangeDetectorRef, booleanAttribute\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\n\nconst defaultColors = [\n '#35d1b3', '#08b0fe', '#8268f2', '#ae52d3', '#eb4ea3',\n '#fb811e', '#fac624', '#c2c2c2', '#4ed7ff'\n];\n\n@Component({\n selector: 'ngs-color-switcher',\n exportAs: 'ngsColorSwitcher',\n imports: [],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ColorSwitcher),\n multi: true\n }\n ],\n templateUrl: './color-switcher.html',\n styleUrl: './color-switcher.scss',\n host: {\n 'class': 'ngs-brand-colors',\n '[class.is-disabled]': 'disabled() \|\| _disabled',\n }\n})\nexport class ColorSwitcher implements ControlValueAccessor, OnChanges {\n private _cdr = inject(ChangeDetectorRef);\n protected _disabled = false;\n protected _selectedColor: string;\n\n colors = input<string[]>(defaultColors);\n selectedColor = input<string>();\n disabled = input(false, {\n transform: booleanAttribute\n });\n\n readonly colorChange = output<string>();\n\n _onChange: any = () => {};\n _onTouched: any = () => {};\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes['selectedColor']) {\n this._selectedColor = changes['selectedColor'].currentValue;\n }\n }\n\n selectColor(color: string): void {\n this._selectedColor = color;\n this.colorChange.emit(color);\n this._onChange(color);\n this._onTouched(color);\n }\n\n writeValue(_selectedColor: any) {\n this._selectedColor = _selectedColor;\n this._cdr.detectChanges();\n }\n\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n\n setDisabledState(isDisabled: BooleanInput): void {\n this._disabled = coerceBooleanProperty(isDisabled);\n }\n}\n","@for (color of colors(); track color) {\n <button class=\"color\"\n [style.--color]=\"color\"\n [class.is-selected]=\"_selectedColor === color\"\n (click)=\"selectColor(color)\">\n </button>\n}\n\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;AAaA,MAAM,aAAa,GAAG;AACpB,IAAA,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;AACrD,IAAA,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE;CAClC;MAoBY,aAAa,CAAA;AAChB,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;IAC9B,SAAS,GAAG,KAAK;AACjB,IAAA,cAAc;AAExB,IAAA,MAAM,GAAG,KAAK,CAAW,aAAa,6EAAC;IACvC,aAAa,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,eAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;IAC/B,QAAQ,GAAG,KAAK,CAAC,KAAK,gFACpB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;IAEO,WAAW,GAAG,MAAM,EAAU;AAEvC,IAAA,SAAS,GAAQ,MAAK,EAAE,CAAC;AACzB,IAAA,UAAU,GAAQ,MAAK,EAAE,CAAC;AAE1B,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,eAAe,CAAC,EAAE;YAC5B,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,YAAY;QAC7D;IACF;AAEA,IAAA,WAAW,CAAC,KAAa,EAAA;AACvB,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC3B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IACxB;AAEA,IAAA,UAAU,CAAC,cAAmB,EAAA;AAC5B,QAAA,IAAI,CAAC,cAAc,GAAG,cAAc;AACpC,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;IAC3B;AAEA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;IACtB;AAEA,IAAA,gBAAgB,CAAC,UAAwB,EAAA;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC;IACpD;uGA5CW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,yBAAA,EAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,EAAA,SAAA,EAdb;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,aAAa,CAAC;AAC5C,gBAAA,KAAK,EAAE;AACR;AACF,SAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5BH,2NAQA,EAAA,MAAA,EAAA,CAAA,omCAAA,CAAA,EAAA,CAAA;;2FD4Ba,aAAa,EAAA,UAAA,EAAA,CAAA;kBAlBzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAAA,QAAA,EACpB,kBAAkB,EAAA,OAAA,EACnB,EAAE,EAAA,SAAA,EACA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,mBAAmB,CAAC;AAC5C,4BAAA,KAAK,EAAE;AACR;qBACF,EAAA,IAAA,EAGK;AACJ,wBAAA,OAAO,EAAE,kBAAkB;AAC3B,wBAAA,qBAAqB,EAAE,yBAAyB;AACjD,qBAAA,EAAA,QAAA,EAAA,2NAAA,EAAA,MAAA,EAAA,CAAA,omCAAA,CAAA,EAAA;;;AElCH;;AAEG;;;;"}

package/fesm2022/ngstarter-ui-components-command-bar.mjs CHANGED Viewed

@@ -14,14 +14,14 @@ class CommandBar {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: CommandBar, isStandalone: true, selector: "ngs-command-bar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-open": "open()" }, classAttribute: "ngs-command-bar" }, exportAs: ["ngsCommandBar"], ngImport: i0, template: "<div class=\"content\"><ng-content/></div>\n<ng-content select=\"ngs-command-bar-command,[ngs-command-bar-command],ngs-command-bar-divider\" />\n", styles: [":host{--ngs-command-bar-height: calc(var(--spacing, .25rem) * 12);--ngs-command-bar-padding: 0 calc(var(--spacing, .25rem) * 1);--ngs-command-bar-margin: calc(var(--spacing, .25rem) * 8) 0;--ngs-command-bar-zindex: 50;--ngs-command-bar-bg: var(--color-neutral-950);--ngs-command-bar-color: var(--color-neutral-200);--ngs-command-bar-border: 1px solid var(--color-neutral-700);--ngs-command-bar-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ngs-command-bar-border-radius: calc(infinity * 1px);--ngs-command-bar-command-height: calc(var(--spacing, .25rem) * 10);--ngs-command-bar-command-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-command-bar-command-font-size: .875rem;--ngs-command-bar-command-color: var(--color-neutral-200);--ngs-command-bar-command-hover-color: var(--color-neutral-100);--ngs-command-bar-command-hover-bg: var(--color-neutral-800);--ngs-command-bar-value-color: var(--color-neutral-200);--ngs-command-bar-command-gap: calc(var(--spacing, .25rem) * 3);--ngs-command-bar-content-padding: 0 calc(var(--spacing, .25rem) * 4);--ngs-command-bar-font-size: .875rem;--ngs-command-bar-divider-width: 1px;--ngs-command-bar-divider-height: calc(var(--spacing, .25rem) * 6);--ngs-command-bar-divider-bg: var(--color-neutral-600);--ngs-command-bar-command-shortcut-bg: var(--color-neutral-700);--ngs-command-bar-command-shortcut-border-radius: .5rem;--ngs-command-bar-command-shortcut-font-size: .75rem;--ngs-command-bar-command-shortcut-color: var(--color-neutral-300);--ngs-command-bar-command-shortcut-padding: 0 5px;--ngs-command-bar-command-shortcut-border: 1px solid var(--color-neutral-600);--ngs-command-bar-command-shortcut-size: calc(var(--spacing, .25rem) * 5);left:50%;translate:-50% 0;height:var(--ngs-command-bar-height);border:var(--ngs-command-bar-border);box-shadow:var(--ngs-command-bar-shadow);border-radius:var(--ngs-command-bar-border-radius);z-index:-1;font-size:var(--ngs-command-bar-font-size);color:var(--ngs-command-bar-color);padding:var(--ngs-command-bar-padding);overflow:hidden;opacity:0;display:flex;align-items:center;width:min-content;position:fixed;background:var(--ngs-command-bar-bg);margin:var(--ngs-command-bar-margin);gap:calc(var(--spacing, .25rem) * 1)}:host .content:empty{display:none}:host .content{white-space:nowrap;padding:var(--ngs-command-bar-content-padding)}:host.is-open{opacity:1;z-index:var(--ngs-command-bar-zindex)}:host[ngs-command-bar-position=top]{top:0}:host[ngs-command-bar-position=top].is-open{animation:.3s ngs-command-bar-animation-from-top}:host[ngs-command-bar-position=bottom]{bottom:0}:host[ngs-command-bar-position=bottom].is-open{animation:.3s ngs-command-bar-animation-from-bottom}@keyframes ngs-command-bar-animation-from-top{0%{transform:translateY(-150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes ngs-command-bar-animation-from-bottom{0%{transform:translateY(150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}:host-context(html.dark){--ngs-command-bar-bg: var(--color-primary-200);--ngs-command-bar-color: var(--color-neutral-950);--ngs-command-bar-command-color: var(--color-neutral-950)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: CommandBar, isStandalone: true, selector: "ngs-command-bar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-open": "open()" }, classAttribute: "ngs-command-bar" }, exportAs: ["ngsCommandBar"], ngImport: i0, template: "<div class=\"content\"><ng-content/></div>\n<ng-content select=\"ngs-command-bar-command,[ngs-command-bar-command],ngs-command-bar-divider\" />\n", styles: [":host{--ngs-command-bar-height: calc(var(--spacing, .25rem) * 12);--ngs-command-bar-padding: 0 calc(var(--spacing, .25rem) * 1);--ngs-command-bar-margin: calc(var(--spacing, .25rem) * 8) 0;--ngs-command-bar-zindex: 50;--ngs-command-bar-bg: var(--ngs-color-neutral-950);--ngs-command-bar-color: var(--ngs-color-neutral-200);--ngs-command-bar-border: 1px solid var(--ngs-color-neutral-700);--ngs-command-bar-shadow: var(--ngs-shadow-lg);--ngs-command-bar-border-radius: calc(infinity * 1px);--ngs-command-bar-command-height: calc(var(--spacing, .25rem) * 10);--ngs-command-bar-command-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-command-bar-command-font-size: var(--ngs-font-size-sm);--ngs-command-bar-command-color: var(--ngs-color-neutral-200);--ngs-command-bar-command-hover-color: var(--ngs-color-neutral-100);--ngs-command-bar-command-hover-bg: var(--ngs-color-neutral-800);--ngs-command-bar-value-color: var(--ngs-color-neutral-200);--ngs-command-bar-command-gap: calc(var(--spacing, .25rem) * 3);--ngs-command-bar-content-padding: 0 calc(var(--spacing, .25rem) * 4);--ngs-command-bar-font-size: var(--ngs-font-size-sm);--ngs-command-bar-divider-width: 1px;--ngs-command-bar-divider-height: calc(var(--spacing, .25rem) * 6);--ngs-command-bar-divider-bg: var(--ngs-color-neutral-600);--ngs-command-bar-command-shortcut-bg: var(--ngs-color-neutral-700);--ngs-command-bar-command-shortcut-border-radius: var(--ngs-radius-lg);--ngs-command-bar-command-shortcut-font-size: var(--ngs-font-size-xs);--ngs-command-bar-command-shortcut-color: var(--ngs-color-neutral-300);--ngs-command-bar-command-shortcut-padding: 0 5px;--ngs-command-bar-command-shortcut-border: 1px solid var(--ngs-color-neutral-600);--ngs-command-bar-command-shortcut-size: calc(var(--spacing, .25rem) * 5);left:50%;translate:-50% 0;height:var(--ngs-command-bar-height);border:var(--ngs-command-bar-border);box-shadow:var(--ngs-command-bar-shadow);border-radius:var(--ngs-command-bar-border-radius);z-index:-1;font-size:var(--ngs-command-bar-font-size);color:var(--ngs-command-bar-color);padding:var(--ngs-command-bar-padding);overflow:hidden;opacity:0;display:flex;align-items:center;width:min-content;position:fixed;background:var(--ngs-command-bar-bg);margin:var(--ngs-command-bar-margin);gap:calc(var(--spacing, .25rem) * 1)}:host .content:empty{display:none}:host .content{white-space:nowrap;padding:var(--ngs-command-bar-content-padding)}:host.is-open{opacity:1;z-index:var(--ngs-command-bar-zindex)}:host[ngs-command-bar-position=top]{top:0}:host[ngs-command-bar-position=top].is-open{animation:.3s ngs-command-bar-animation-from-top}:host[ngs-command-bar-position=bottom]{bottom:0}:host[ngs-command-bar-position=bottom].is-open{animation:.3s ngs-command-bar-animation-from-bottom}@keyframes ngs-command-bar-animation-from-top{0%{transform:translateY(-150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes ngs-command-bar-animation-from-bottom{0%{transform:translateY(150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}:host-context(html.dark){--ngs-command-bar-bg: var(--ngs-color-primary-200);--ngs-command-bar-color: var(--ngs-color-neutral-950);--ngs-command-bar-command-color: var(--ngs-color-neutral-950)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBar, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-command-bar', exportAs: 'ngsCommandBar', standalone: true, host: {
                         'class': 'ngs-command-bar',
                         '[class.is-open]': 'open()',
-                    }, template: "<div class=\"content\"><ng-content/></div>\n<ng-content select=\"ngs-command-bar-command,[ngs-command-bar-command],ngs-command-bar-divider\" />\n", styles: [":host{--ngs-command-bar-height: calc(var(--spacing, .25rem) * 12);--ngs-command-bar-padding: 0 calc(var(--spacing, .25rem) * 1);--ngs-command-bar-margin: calc(var(--spacing, .25rem) * 8) 0;--ngs-command-bar-zindex: 50;--ngs-command-bar-bg: var(--color-neutral-950);--ngs-command-bar-color: var(--color-neutral-200);--ngs-command-bar-border: 1px solid var(--color-neutral-700);--ngs-command-bar-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ngs-command-bar-border-radius: calc(infinity * 1px);--ngs-command-bar-command-height: calc(var(--spacing, .25rem) * 10);--ngs-command-bar-command-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-command-bar-command-font-size: .875rem;--ngs-command-bar-command-color: var(--color-neutral-200);--ngs-command-bar-command-hover-color: var(--color-neutral-100);--ngs-command-bar-command-hover-bg: var(--color-neutral-800);--ngs-command-bar-value-color: var(--color-neutral-200);--ngs-command-bar-command-gap: calc(var(--spacing, .25rem) * 3);--ngs-command-bar-content-padding: 0 calc(var(--spacing, .25rem) * 4);--ngs-command-bar-font-size: .875rem;--ngs-command-bar-divider-width: 1px;--ngs-command-bar-divider-height: calc(var(--spacing, .25rem) * 6);--ngs-command-bar-divider-bg: var(--color-neutral-600);--ngs-command-bar-command-shortcut-bg: var(--color-neutral-700);--ngs-command-bar-command-shortcut-border-radius: .5rem;--ngs-command-bar-command-shortcut-font-size: .75rem;--ngs-command-bar-command-shortcut-color: var(--color-neutral-300);--ngs-command-bar-command-shortcut-padding: 0 5px;--ngs-command-bar-command-shortcut-border: 1px solid var(--color-neutral-600);--ngs-command-bar-command-shortcut-size: calc(var(--spacing, .25rem) * 5);left:50%;translate:-50% 0;height:var(--ngs-command-bar-height);border:var(--ngs-command-bar-border);box-shadow:var(--ngs-command-bar-shadow);border-radius:var(--ngs-command-bar-border-radius);z-index:-1;font-size:var(--ngs-command-bar-font-size);color:var(--ngs-command-bar-color);padding:var(--ngs-command-bar-padding);overflow:hidden;opacity:0;display:flex;align-items:center;width:min-content;position:fixed;background:var(--ngs-command-bar-bg);margin:var(--ngs-command-bar-margin);gap:calc(var(--spacing, .25rem) * 1)}:host .content:empty{display:none}:host .content{white-space:nowrap;padding:var(--ngs-command-bar-content-padding)}:host.is-open{opacity:1;z-index:var(--ngs-command-bar-zindex)}:host[ngs-command-bar-position=top]{top:0}:host[ngs-command-bar-position=top].is-open{animation:.3s ngs-command-bar-animation-from-top}:host[ngs-command-bar-position=bottom]{bottom:0}:host[ngs-command-bar-position=bottom].is-open{animation:.3s ngs-command-bar-animation-from-bottom}@keyframes ngs-command-bar-animation-from-top{0%{transform:translateY(-150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes ngs-command-bar-animation-from-bottom{0%{transform:translateY(150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}:host-context(html.dark){--ngs-command-bar-bg: var(--color-primary-200);--ngs-command-bar-color: var(--color-neutral-950);--ngs-command-bar-command-color: var(--color-neutral-950)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"content\"><ng-content/></div>\n<ng-content select=\"ngs-command-bar-command,[ngs-command-bar-command],ngs-command-bar-divider\" />\n", styles: [":host{--ngs-command-bar-height: calc(var(--spacing, .25rem) * 12);--ngs-command-bar-padding: 0 calc(var(--spacing, .25rem) * 1);--ngs-command-bar-margin: calc(var(--spacing, .25rem) * 8) 0;--ngs-command-bar-zindex: 50;--ngs-command-bar-bg: var(--ngs-color-neutral-950);--ngs-command-bar-color: var(--ngs-color-neutral-200);--ngs-command-bar-border: 1px solid var(--ngs-color-neutral-700);--ngs-command-bar-shadow: var(--ngs-shadow-lg);--ngs-command-bar-border-radius: calc(infinity * 1px);--ngs-command-bar-command-height: calc(var(--spacing, .25rem) * 10);--ngs-command-bar-command-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-command-bar-command-font-size: var(--ngs-font-size-sm);--ngs-command-bar-command-color: var(--ngs-color-neutral-200);--ngs-command-bar-command-hover-color: var(--ngs-color-neutral-100);--ngs-command-bar-command-hover-bg: var(--ngs-color-neutral-800);--ngs-command-bar-value-color: var(--ngs-color-neutral-200);--ngs-command-bar-command-gap: calc(var(--spacing, .25rem) * 3);--ngs-command-bar-content-padding: 0 calc(var(--spacing, .25rem) * 4);--ngs-command-bar-font-size: var(--ngs-font-size-sm);--ngs-command-bar-divider-width: 1px;--ngs-command-bar-divider-height: calc(var(--spacing, .25rem) * 6);--ngs-command-bar-divider-bg: var(--ngs-color-neutral-600);--ngs-command-bar-command-shortcut-bg: var(--ngs-color-neutral-700);--ngs-command-bar-command-shortcut-border-radius: var(--ngs-radius-lg);--ngs-command-bar-command-shortcut-font-size: var(--ngs-font-size-xs);--ngs-command-bar-command-shortcut-color: var(--ngs-color-neutral-300);--ngs-command-bar-command-shortcut-padding: 0 5px;--ngs-command-bar-command-shortcut-border: 1px solid var(--ngs-color-neutral-600);--ngs-command-bar-command-shortcut-size: calc(var(--spacing, .25rem) * 5);left:50%;translate:-50% 0;height:var(--ngs-command-bar-height);border:var(--ngs-command-bar-border);box-shadow:var(--ngs-command-bar-shadow);border-radius:var(--ngs-command-bar-border-radius);z-index:-1;font-size:var(--ngs-command-bar-font-size);color:var(--ngs-command-bar-color);padding:var(--ngs-command-bar-padding);overflow:hidden;opacity:0;display:flex;align-items:center;width:min-content;position:fixed;background:var(--ngs-command-bar-bg);margin:var(--ngs-command-bar-margin);gap:calc(var(--spacing, .25rem) * 1)}:host .content:empty{display:none}:host .content{white-space:nowrap;padding:var(--ngs-command-bar-content-padding)}:host.is-open{opacity:1;z-index:var(--ngs-command-bar-zindex)}:host[ngs-command-bar-position=top]{top:0}:host[ngs-command-bar-position=top].is-open{animation:.3s ngs-command-bar-animation-from-top}:host[ngs-command-bar-position=bottom]{bottom:0}:host[ngs-command-bar-position=bottom].is-open{animation:.3s ngs-command-bar-animation-from-bottom}@keyframes ngs-command-bar-animation-from-top{0%{transform:translateY(-150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes ngs-command-bar-animation-from-bottom{0%{transform:translateY(150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}:host-context(html.dark){--ngs-command-bar-bg: var(--ngs-color-primary-200);--ngs-command-bar-color: var(--ngs-color-neutral-950);--ngs-command-bar-command-color: var(--ngs-color-neutral-950)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 class CommandBarDivider {

package/fesm2022/ngstarter-ui-components-command-bar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngstarter-ui-components-command-bar.mjs","sources":["../../../projects/components/command-bar/src/command-bar/command-bar.ts","../../../projects/components/command-bar/src/command-bar/command-bar.html","../../../projects/components/command-bar/src/command-bar-divider/command-bar-divider.ts","../../../projects/components/command-bar/src/command-bar-divider/command-bar-divider.html","../../../projects/components/command-bar/src/command-bar-command/command-bar-command.ts","../../../projects/components/command-bar/src/command-bar-command/command-bar-command.html","../../../projects/components/command-bar/ngstarter-ui-components-command-bar.ts"],"sourcesContent":["import {\n booleanAttribute,\n Component,\n effect,\n ElementRef,\n inject,\n input,\n Renderer2\n} from '@angular/core';\nimport { CommandBarPosition } from '../types';\n\n@Component({\n selector: 'ngs-command-bar',\n exportAs: 'ngsCommandBar',\n standalone: true,\n templateUrl: './command-bar.html',\n styleUrl: './command-bar.scss',\n host: {\n 'class': 'ngs-command-bar',\n '[class.is-open]': 'open()',\n }\n})\nexport class CommandBar {\n private _elementRef = inject(ElementRef);\n private _renderer = inject(Renderer2);\n\n open = input(false, {\n transform: booleanAttribute\n });\n position = input<CommandBarPosition>('bottom');\n\n constructor() {\n effect(() => {\n this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-command-bar-position', this.position());\n });\n }\n}\n","<div class=\"content\"><ng-content/></div>\n<ng-content select=\"ngs-command-bar-command,[ngs-command-bar-command],ngs-command-bar-divider\" />\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-command-bar-divider',\n exportAs: 'ngsCommandBarDivider',\n templateUrl: './command-bar-divider.html',\n styleUrl: './command-bar-divider.scss',\n host: {\n 'class': 'ngs-command-bar-divider'\n }\n})\nexport class CommandBarDivider {\n}\n","\n","import { Component, input, Input } from '@angular/core';\nimport { Ripple } from '@ngstarter-ui/components/core';\n\n@Component({\n selector: 'ngs-command-bar-command,[ngs-command-bar-command]',\n exportAs: 'ngsCommandBarCommand',\n standalone: true,\n templateUrl: './command-bar-command.html',\n styleUrl: './command-bar-command.scss',\n hostDirectives: [\n Ripple,\n ],\n host: {\n 'class': 'ngs-command-bar-command'\n }\n})\nexport class CommandBarCommand {\n shortcut = input('');\n}\n","<ng-content/>\n@if (shortcut()) {\n <div class=\"shortcut\">{{ shortcut() }}</div>\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;MAsBa,UAAU,CAAA;AACb,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,IAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;IAErC,IAAI,GAAG,KAAK,CAAC,KAAK,4EAChB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AACF,IAAA,QAAQ,GAAG,KAAK,CAAqB,QAAQ,+EAAC;AAE9C,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC1G,QAAA,CAAC,CAAC;IACJ;uGAbW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,kcCtBvB,mJAEA,EAAA,MAAA,EAAA,CAAA,~~uqGAAA~~,CAAA,EAAA,CAAA;;2FDoBa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAXtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,QAAA,EACjB,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,IAAA,EAGV;AACJ,wBAAA,OAAO,EAAE,iBAAiB;AAC1B,wBAAA,iBAAiB,EAAE,QAAQ;AAC5B,qBAAA,EAAA,QAAA,EAAA,mJAAA,EAAA,MAAA,EAAA,CAAA,~~uqGAAA~~,CAAA,EAAA;;;METU,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,4KCX9B,IACA,EAAA,MAAA,EAAA,CAAA,gOAAA,CAAA,EAAA,CAAA;;2FDUa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAT7B,SAAS;+BACE,yBAAyB,EAAA,QAAA,EACzB,sBAAsB,EAAA,IAAA,EAG1B;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,gOAAA,CAAA,EAAA;;;MEOU,iBAAiB,CAAA;AAC5B,IAAA,QAAQ,GAAG,KAAK,CAAC,EAAE,+EAAC;uGADT,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,+XChB9B,0FAIA,EAAA,MAAA,EAAA,CAAA,onCAAA,CAAA,EAAA,CAAA;;2FDYa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAb7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mDAAmD,EAAA,QAAA,EACnD,sBAAsB,EAAA,UAAA,EACpB,IAAI,EAAA,cAAA,EAGA;wBACd,MAAM;qBACP,EAAA,IAAA,EACK;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,0FAAA,EAAA,MAAA,EAAA,CAAA,onCAAA,CAAA,EAAA;;;AEdH;;AAEG;;;;"}
1	+ {"version":3,"file":"ngstarter-ui-components-command-bar.mjs","sources":["../../../projects/components/command-bar/src/command-bar/command-bar.ts","../../../projects/components/command-bar/src/command-bar/command-bar.html","../../../projects/components/command-bar/src/command-bar-divider/command-bar-divider.ts","../../../projects/components/command-bar/src/command-bar-divider/command-bar-divider.html","../../../projects/components/command-bar/src/command-bar-command/command-bar-command.ts","../../../projects/components/command-bar/src/command-bar-command/command-bar-command.html","../../../projects/components/command-bar/ngstarter-ui-components-command-bar.ts"],"sourcesContent":["import {\n booleanAttribute,\n Component,\n effect,\n ElementRef,\n inject,\n input,\n Renderer2\n} from '@angular/core';\nimport { CommandBarPosition } from '../types';\n\n@Component({\n selector: 'ngs-command-bar',\n exportAs: 'ngsCommandBar',\n standalone: true,\n templateUrl: './command-bar.html',\n styleUrl: './command-bar.scss',\n host: {\n 'class': 'ngs-command-bar',\n '[class.is-open]': 'open()',\n }\n})\nexport class CommandBar {\n private _elementRef = inject(ElementRef);\n private _renderer = inject(Renderer2);\n\n open = input(false, {\n transform: booleanAttribute\n });\n position = input<CommandBarPosition>('bottom');\n\n constructor() {\n effect(() => {\n this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-command-bar-position', this.position());\n });\n }\n}\n","<div class=\"content\"><ng-content/></div>\n<ng-content select=\"ngs-command-bar-command,[ngs-command-bar-command],ngs-command-bar-divider\" />\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-command-bar-divider',\n exportAs: 'ngsCommandBarDivider',\n templateUrl: './command-bar-divider.html',\n styleUrl: './command-bar-divider.scss',\n host: {\n 'class': 'ngs-command-bar-divider'\n }\n})\nexport class CommandBarDivider {\n}\n","\n","import { Component, input, Input } from '@angular/core';\nimport { Ripple } from '@ngstarter-ui/components/core';\n\n@Component({\n selector: 'ngs-command-bar-command,[ngs-command-bar-command]',\n exportAs: 'ngsCommandBarCommand',\n standalone: true,\n templateUrl: './command-bar-command.html',\n styleUrl: './command-bar-command.scss',\n hostDirectives: [\n Ripple,\n ],\n host: {\n 'class': 'ngs-command-bar-command'\n }\n})\nexport class CommandBarCommand {\n shortcut = input('');\n}\n","<ng-content/>\n@if (shortcut()) {\n <div class=\"shortcut\">{{ shortcut() }}</div>\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;MAsBa,UAAU,CAAA;AACb,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,IAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;IAErC,IAAI,GAAG,KAAK,CAAC,KAAK,4EAChB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AACF,IAAA,QAAQ,GAAG,KAAK,CAAqB,QAAQ,+EAAC;AAE9C,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC1G,QAAA,CAAC,CAAC;IACJ;uGAbW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,kcCtBvB,mJAEA,EAAA,MAAA,EAAA,CAAA,mvGAAA,CAAA,EAAA,CAAA;;2FDoBa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAXtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,QAAA,EACjB,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,IAAA,EAGV;AACJ,wBAAA,OAAO,EAAE,iBAAiB;AAC1B,wBAAA,iBAAiB,EAAE,QAAQ;AAC5B,qBAAA,EAAA,QAAA,EAAA,mJAAA,EAAA,MAAA,EAAA,CAAA,mvGAAA,CAAA,EAAA;;;METU,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,4KCX9B,IACA,EAAA,MAAA,EAAA,CAAA,gOAAA,CAAA,EAAA,CAAA;;2FDUa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAT7B,SAAS;+BACE,yBAAyB,EAAA,QAAA,EACzB,sBAAsB,EAAA,IAAA,EAG1B;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,gOAAA,CAAA,EAAA;;;MEOU,iBAAiB,CAAA;AAC5B,IAAA,QAAQ,GAAG,KAAK,CAAC,EAAE,+EAAC;uGADT,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,+XChB9B,0FAIA,EAAA,MAAA,EAAA,CAAA,onCAAA,CAAA,EAAA,CAAA;;2FDYa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAb7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mDAAmD,EAAA,QAAA,EACnD,sBAAsB,EAAA,UAAA,EACpB,IAAI,EAAA,cAAA,EAGA;wBACd,MAAM;qBACP,EAAA,IAAA,EACK;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,0FAAA,EAAA,MAAA,EAAA,CAAA,onCAAA,CAAA,EAAA;;;AEdH;;AAEG;;;;"}

package/fesm2022/ngstarter-ui-components-comment-editor.mjs CHANGED Viewed

@@ -571,7 +571,7 @@ class CommentEditor {
                 provide: COMMENT_EDITOR,
                 useExisting: forwardRef(() => CommentEditor)
             }
-        ], viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "_bubbleMenu", first: true, predicate: ["bubbleMenu"], descendants: true, isSignal: true }, { propertyName: "_imageBubbleMenu", first: true, predicate: ["imageBubbleMenu"], descendants: true, isSignal: true }], exportAs: ["ngsCommentEditor"], ngImport: i0, template: "@if ((isToolbarVisible || toolbarAlwaysVisible()) && (isFullViewVisible || fullViewMode())) {\n  <div class=\"toolbar\">\n    <ng-content select=\"ngs-comment-editor-toolbar\"/>\n  </div>\n}\n<div #content class=\"content prose dark:prose-invert max-w-full\"></div>\n<div class=\"editor-content\">\n  <ng-content/>\n</div>\n<div class=\"footer\">\n  <div class=\"flex items-center gap-0.5 grow pe-3\">\n    <ng-content select=\"ngs-comment-editor-footer-bar\"/>\n  </div>\n  <div class=\"flex items-center gap-2\">\n    @if ((isFullViewVisible && !fullViewMode()) || cancelButtonAlwaysVisible()) {\n      <button ngsButton (click)=\"cancel($event)\">{{ buttonCancelLabel() }}</button>\n    }\n    <button ngsButton=\"filled\"\n            [disabled]=\"(!allowEmptyContent() && !_value) || null\"\n            [loading]=\"loading()\"\n            (click)=\"send($event)\">{{ buttonSendLabel() }}\n    </button>\n  </div>\n</div>\n<div #imageBubbleMenu class=\"ngs-comment-editor-bubble-menu\">\n</div>\n<div #bubbleMenu>\n  <ng-content select=\"ngs-comment-editor-bubble-menu\"/>\n</div>\n<!--<div #floatingMenu class=\"floating-menu\">-->\n<!--  @if (editor) {-->\n<!--    <div class=\"flex items-center gap-1.5\">-->\n<!--      <button class=\"button\"-->\n<!--              [disabled]=\"isCommandDisabled('toggleCodeBlock')\"-->\n<!--              [class.active]=\"editor && editor.isActive('codeBlock')\"-->\n<!--              (click)=\"onButtonClick('toggleCodeBlock')\">-->\n<!--        <ngs-icon name=\"fluent:code-24-regular\"/>-->\n<!--      </button>-->\n<!--      <button class=\"button\">-->\n<!--        <ngs-icon name=\"fluent:image-24-regular\"/>-->\n<!--      </button>-->\n<!--    </div>-->\n<!--  }-->\n<!--</div>-->\n", styles: [":host{--ngs-comment-editor-bg: transparent;--ngs-comment-editor-content-max-height: 9999px;display:block;position:relative;overflow:hidden;background:var(--ngs-comment-editor-bg)}:host .floating-menu{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;background:var(--dropdown-bg);padding-top:calc(var(--spacing, .25rem) * 1.5);padding-bottom:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2);border:1px solid var(--color-border);border-radius:calc(infinity * 1px)}:host .floating-menu .button:hover{color:var(--color-primary);border-radius:calc(infinity * 1px)}:host .floating-menu .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:1.25rem;line-height:1.25}:host .floating-menu .button:disabled{pointer-events:none;opacity:70%}:host .content{position:absolute;inset:0;height:calc(var(--spacing, .25rem) * 14)}:host .content ::ng-deep .single-emoji{font-size:1.875rem}:host .content ::ng-deep .tiptap{padding:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 10)}:host .content ::ng-deep .tiptap:focus{outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video]{cursor:move;background:var(--color-neutral-100);padding:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;justify-content:center}:host .content ::ng-deep .tiptap div[data-youtube-video] iframe{width:100%;aspect-ratio:16/9;border:none;display:block;min-height:200px;min-width:200px;outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video].ProseMirror-selectednode iframe{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap img{display:block;height:auto;margin:calc(var(--spacing, .25rem) * 6) 0;max-width:100%}:host .content ::ng-deep .tiptap img.ProseMirror-selectednode{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep .tiptap.ProseMirror-focused p.is-editor-empty:first-child:before{content:none}:host .content ::ng-deep .tiptap p.is-empty:before{content:attr(data-placeholder);color:var(--color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep p:first-child,:host .content ::ng-deep pre:first-child{margin-top:0}:host .content ::ng-deep p:last-child,:host .content ::ng-deep pre:last-child{margin-bottom:0}:host .editor-content{padding:0 calc(var(--spacing, .25rem) * 4)}:host .editor-content:empty{display:none}:host.full-view .content{position:static;height:auto;min-height:calc(var(--spacing, .25rem) * 12);max-height:var(--ngs-comment-editor-content-max-height);overflow-y:auto}:host .footer{height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 2.5);display:flex;align-items:center;justify-content:space-between}:host .toolbar{border-bottom:1px solid var(--color-border);height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:space-between}:host .button.active,:host ::ng-deep .button.active{background:var(--color-neutral-200)}:host-context(html.dark) .button.active,:host-context(html.dark) ::ng-deep .button.active{background:var(--color-neutral-650);color:var(--color-neutral-200)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }] });
+        ], viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "_bubbleMenu", first: true, predicate: ["bubbleMenu"], descendants: true, isSignal: true }, { propertyName: "_imageBubbleMenu", first: true, predicate: ["imageBubbleMenu"], descendants: true, isSignal: true }], exportAs: ["ngsCommentEditor"], ngImport: i0, template: "@if ((isToolbarVisible || toolbarAlwaysVisible()) && (isFullViewVisible || fullViewMode())) {\n  <div class=\"toolbar\">\n    <ng-content select=\"ngs-comment-editor-toolbar\"/>\n  </div>\n}\n<div #content class=\"content prose dark:prose-invert max-w-full\"></div>\n<div class=\"editor-content\">\n  <ng-content/>\n</div>\n<div class=\"footer\">\n  <div class=\"flex items-center gap-0.5 grow pe-3\">\n    <ng-content select=\"ngs-comment-editor-footer-bar\"/>\n  </div>\n  <div class=\"flex items-center gap-2\">\n    @if ((isFullViewVisible && !fullViewMode()) || cancelButtonAlwaysVisible()) {\n      <button ngsButton (click)=\"cancel($event)\">{{ buttonCancelLabel() }}</button>\n    }\n    <button ngsButton=\"filled\"\n            [disabled]=\"(!allowEmptyContent() && !_value) || null\"\n            [loading]=\"loading()\"\n            (click)=\"send($event)\">{{ buttonSendLabel() }}\n    </button>\n  </div>\n</div>\n<div #imageBubbleMenu class=\"ngs-comment-editor-bubble-menu\">\n</div>\n<div #bubbleMenu>\n  <ng-content select=\"ngs-comment-editor-bubble-menu\"/>\n</div>\n<!--<div #floatingMenu class=\"floating-menu\">-->\n<!--  @if (editor) {-->\n<!--    <div class=\"flex items-center gap-1.5\">-->\n<!--      <button class=\"button\"-->\n<!--              [disabled]=\"isCommandDisabled('toggleCodeBlock')\"-->\n<!--              [class.active]=\"editor && editor.isActive('codeBlock')\"-->\n<!--              (click)=\"onButtonClick('toggleCodeBlock')\">-->\n<!--        <ngs-icon name=\"fluent:code-24-regular\"/>-->\n<!--      </button>-->\n<!--      <button class=\"button\">-->\n<!--        <ngs-icon name=\"fluent:image-24-regular\"/>-->\n<!--      </button>-->\n<!--    </div>-->\n<!--  }-->\n<!--</div>-->\n", styles: [":host{--ngs-comment-editor-bg: transparent;--ngs-comment-editor-content-max-height: 9999px;display:block;position:relative;overflow:hidden;background:var(--ngs-comment-editor-bg)}:host .floating-menu{box-shadow:var(--ngs-shadow-sm);background:var(--ngs-dropdown-bg);padding-top:calc(var(--spacing, .25rem) * 1.5);padding-bottom:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2);border:1px solid var(--ngs-color-border);border-radius:calc(infinity * 1px)}:host .floating-menu .button:hover{color:var(--ngs-color-primary);border-radius:calc(infinity * 1px)}:host .floating-menu .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:var(--ngs-font-size-xl);line-height:1.25}:host .floating-menu .button:disabled{pointer-events:none;opacity:70%}:host .content{position:absolute;inset:0;height:calc(var(--spacing, .25rem) * 14)}:host .content ::ng-deep .single-emoji{font-size:1.875rem}:host .content ::ng-deep .tiptap{padding:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 10)}:host .content ::ng-deep .tiptap:focus{outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video]{cursor:move;background:var(--ngs-color-neutral-100);padding:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;justify-content:center}:host .content ::ng-deep .tiptap div[data-youtube-video] iframe{width:100%;aspect-ratio:16/9;border:none;display:block;min-height:200px;min-width:200px;outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video].ProseMirror-selectednode iframe{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap img{display:block;height:auto;margin:calc(var(--spacing, .25rem) * 6) 0;max-width:100%}:host .content ::ng-deep .tiptap img.ProseMirror-selectednode{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ngs-color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep .tiptap.ProseMirror-focused p.is-editor-empty:first-child:before{content:none}:host .content ::ng-deep .tiptap p.is-empty:before{content:attr(data-placeholder);color:var(--ngs-color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep p:first-child,:host .content ::ng-deep pre:first-child{margin-top:0}:host .content ::ng-deep p:last-child,:host .content ::ng-deep pre:last-child{margin-bottom:0}:host .editor-content{padding:0 calc(var(--spacing, .25rem) * 4)}:host .editor-content:empty{display:none}:host.full-view .content{position:static;height:auto;min-height:calc(var(--spacing, .25rem) * 12);max-height:var(--ngs-comment-editor-content-max-height);overflow-y:auto}:host .footer{height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 2.5);display:flex;align-items:center;justify-content:space-between}:host .toolbar{border-bottom:1px solid var(--ngs-color-border);height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:space-between}:host .button.active,:host ::ng-deep .button.active{background:var(--ngs-color-neutral-200)}:host-context(html.dark) .button.active,:host-context(html.dark) ::ng-deep .button.active{background:var(--ngs-color-neutral-650);color:var(--ngs-color-neutral-200)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditor, decorators: [{
             type: Component,
@@ -586,16 +586,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         'class': 'ngs-comment-editor',
                         '[class.full-view]': 'isFullViewVisible || fullViewMode()',
                         '(click)': 'activateFullView($event)'
-                    }, template: "@if ((isToolbarVisible || toolbarAlwaysVisible()) && (isFullViewVisible || fullViewMode())) {\n  <div class=\"toolbar\">\n    <ng-content select=\"ngs-comment-editor-toolbar\"/>\n  </div>\n}\n<div #content class=\"content prose dark:prose-invert max-w-full\"></div>\n<div class=\"editor-content\">\n  <ng-content/>\n</div>\n<div class=\"footer\">\n  <div class=\"flex items-center gap-0.5 grow pe-3\">\n    <ng-content select=\"ngs-comment-editor-footer-bar\"/>\n  </div>\n  <div class=\"flex items-center gap-2\">\n    @if ((isFullViewVisible && !fullViewMode()) || cancelButtonAlwaysVisible()) {\n      <button ngsButton (click)=\"cancel($event)\">{{ buttonCancelLabel() }}</button>\n    }\n    <button ngsButton=\"filled\"\n            [disabled]=\"(!allowEmptyContent() && !_value) || null\"\n            [loading]=\"loading()\"\n            (click)=\"send($event)\">{{ buttonSendLabel() }}\n    </button>\n  </div>\n</div>\n<div #imageBubbleMenu class=\"ngs-comment-editor-bubble-menu\">\n</div>\n<div #bubbleMenu>\n  <ng-content select=\"ngs-comment-editor-bubble-menu\"/>\n</div>\n<!--<div #floatingMenu class=\"floating-menu\">-->\n<!--  @if (editor) {-->\n<!--    <div class=\"flex items-center gap-1.5\">-->\n<!--      <button class=\"button\"-->\n<!--              [disabled]=\"isCommandDisabled('toggleCodeBlock')\"-->\n<!--              [class.active]=\"editor && editor.isActive('codeBlock')\"-->\n<!--              (click)=\"onButtonClick('toggleCodeBlock')\">-->\n<!--        <ngs-icon name=\"fluent:code-24-regular\"/>-->\n<!--      </button>-->\n<!--      <button class=\"button\">-->\n<!--        <ngs-icon name=\"fluent:image-24-regular\"/>-->\n<!--      </button>-->\n<!--    </div>-->\n<!--  }-->\n<!--</div>-->\n", styles: [":host{--ngs-comment-editor-bg: transparent;--ngs-comment-editor-content-max-height: 9999px;display:block;position:relative;overflow:hidden;background:var(--ngs-comment-editor-bg)}:host .floating-menu{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;background:var(--dropdown-bg);padding-top:calc(var(--spacing, .25rem) * 1.5);padding-bottom:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2);border:1px solid var(--color-border);border-radius:calc(infinity * 1px)}:host .floating-menu .button:hover{color:var(--color-primary);border-radius:calc(infinity * 1px)}:host .floating-menu .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:1.25rem;line-height:1.25}:host .floating-menu .button:disabled{pointer-events:none;opacity:70%}:host .content{position:absolute;inset:0;height:calc(var(--spacing, .25rem) * 14)}:host .content ::ng-deep .single-emoji{font-size:1.875rem}:host .content ::ng-deep .tiptap{padding:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 10)}:host .content ::ng-deep .tiptap:focus{outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video]{cursor:move;background:var(--color-neutral-100);padding:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;justify-content:center}:host .content ::ng-deep .tiptap div[data-youtube-video] iframe{width:100%;aspect-ratio:16/9;border:none;display:block;min-height:200px;min-width:200px;outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video].ProseMirror-selectednode iframe{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap img{display:block;height:auto;margin:calc(var(--spacing, .25rem) * 6) 0;max-width:100%}:host .content ::ng-deep .tiptap img.ProseMirror-selectednode{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep .tiptap.ProseMirror-focused p.is-editor-empty:first-child:before{content:none}:host .content ::ng-deep .tiptap p.is-empty:before{content:attr(data-placeholder);color:var(--color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep p:first-child,:host .content ::ng-deep pre:first-child{margin-top:0}:host .content ::ng-deep p:last-child,:host .content ::ng-deep pre:last-child{margin-bottom:0}:host .editor-content{padding:0 calc(var(--spacing, .25rem) * 4)}:host .editor-content:empty{display:none}:host.full-view .content{position:static;height:auto;min-height:calc(var(--spacing, .25rem) * 12);max-height:var(--ngs-comment-editor-content-max-height);overflow-y:auto}:host .footer{height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 2.5);display:flex;align-items:center;justify-content:space-between}:host .toolbar{border-bottom:1px solid var(--color-border);height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:space-between}:host .button.active,:host ::ng-deep .button.active{background:var(--color-neutral-200)}:host-context(html.dark) .button.active,:host-context(html.dark) ::ng-deep .button.active{background:var(--color-neutral-650);color:var(--color-neutral-200)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "@if ((isToolbarVisible || toolbarAlwaysVisible()) && (isFullViewVisible || fullViewMode())) {\n  <div class=\"toolbar\">\n    <ng-content select=\"ngs-comment-editor-toolbar\"/>\n  </div>\n}\n<div #content class=\"content prose dark:prose-invert max-w-full\"></div>\n<div class=\"editor-content\">\n  <ng-content/>\n</div>\n<div class=\"footer\">\n  <div class=\"flex items-center gap-0.5 grow pe-3\">\n    <ng-content select=\"ngs-comment-editor-footer-bar\"/>\n  </div>\n  <div class=\"flex items-center gap-2\">\n    @if ((isFullViewVisible && !fullViewMode()) || cancelButtonAlwaysVisible()) {\n      <button ngsButton (click)=\"cancel($event)\">{{ buttonCancelLabel() }}</button>\n    }\n    <button ngsButton=\"filled\"\n            [disabled]=\"(!allowEmptyContent() && !_value) || null\"\n            [loading]=\"loading()\"\n            (click)=\"send($event)\">{{ buttonSendLabel() }}\n    </button>\n  </div>\n</div>\n<div #imageBubbleMenu class=\"ngs-comment-editor-bubble-menu\">\n</div>\n<div #bubbleMenu>\n  <ng-content select=\"ngs-comment-editor-bubble-menu\"/>\n</div>\n<!--<div #floatingMenu class=\"floating-menu\">-->\n<!--  @if (editor) {-->\n<!--    <div class=\"flex items-center gap-1.5\">-->\n<!--      <button class=\"button\"-->\n<!--              [disabled]=\"isCommandDisabled('toggleCodeBlock')\"-->\n<!--              [class.active]=\"editor && editor.isActive('codeBlock')\"-->\n<!--              (click)=\"onButtonClick('toggleCodeBlock')\">-->\n<!--        <ngs-icon name=\"fluent:code-24-regular\"/>-->\n<!--      </button>-->\n<!--      <button class=\"button\">-->\n<!--        <ngs-icon name=\"fluent:image-24-regular\"/>-->\n<!--      </button>-->\n<!--    </div>-->\n<!--  }-->\n<!--</div>-->\n", styles: [":host{--ngs-comment-editor-bg: transparent;--ngs-comment-editor-content-max-height: 9999px;display:block;position:relative;overflow:hidden;background:var(--ngs-comment-editor-bg)}:host .floating-menu{box-shadow:var(--ngs-shadow-sm);background:var(--ngs-dropdown-bg);padding-top:calc(var(--spacing, .25rem) * 1.5);padding-bottom:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2);border:1px solid var(--ngs-color-border);border-radius:calc(infinity * 1px)}:host .floating-menu .button:hover{color:var(--ngs-color-primary);border-radius:calc(infinity * 1px)}:host .floating-menu .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:var(--ngs-font-size-xl);line-height:1.25}:host .floating-menu .button:disabled{pointer-events:none;opacity:70%}:host .content{position:absolute;inset:0;height:calc(var(--spacing, .25rem) * 14)}:host .content ::ng-deep .single-emoji{font-size:1.875rem}:host .content ::ng-deep .tiptap{padding:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 10)}:host .content ::ng-deep .tiptap:focus{outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video]{cursor:move;background:var(--ngs-color-neutral-100);padding:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;justify-content:center}:host .content ::ng-deep .tiptap div[data-youtube-video] iframe{width:100%;aspect-ratio:16/9;border:none;display:block;min-height:200px;min-width:200px;outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video].ProseMirror-selectednode iframe{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap img{display:block;height:auto;margin:calc(var(--spacing, .25rem) * 6) 0;max-width:100%}:host .content ::ng-deep .tiptap img.ProseMirror-selectednode{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ngs-color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep .tiptap.ProseMirror-focused p.is-editor-empty:first-child:before{content:none}:host .content ::ng-deep .tiptap p.is-empty:before{content:attr(data-placeholder);color:var(--ngs-color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep p:first-child,:host .content ::ng-deep pre:first-child{margin-top:0}:host .content ::ng-deep p:last-child,:host .content ::ng-deep pre:last-child{margin-bottom:0}:host .editor-content{padding:0 calc(var(--spacing, .25rem) * 4)}:host .editor-content:empty{display:none}:host.full-view .content{position:static;height:auto;min-height:calc(var(--spacing, .25rem) * 12);max-height:var(--ngs-comment-editor-content-max-height);overflow-y:auto}:host .footer{height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 2.5);display:flex;align-items:center;justify-content:space-between}:host .toolbar{border-bottom:1px solid var(--ngs-color-border);height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:space-between}:host .button.active,:host ::ng-deep .button.active{background:var(--ngs-color-neutral-200)}:host-context(html.dark) .button.active,:host-context(html.dark) ::ng-deep .button.active{background:var(--ngs-color-neutral-650);color:var(--ngs-color-neutral-200)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { _content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], _bubbleMenu: [{ type: i0.ViewChild, args: ['bubbleMenu', { isSignal: true }] }], _imageBubbleMenu: [{ type: i0.ViewChild, args: ['imageBubbleMenu', { isSignal: true }] }], contentMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentMaxHeight", required: false }] }], buttonCancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonCancelLabel", required: false }] }], buttonSendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSendLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], toolbarAlwaysVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarAlwaysVisible", required: false }] }], fullViewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullViewMode", required: false }] }], cancelButtonAlwaysVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAlwaysVisible", required: false }] }], allowEmptyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmptyContent", required: false }] }], autoClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], imageUploadFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUploadFn", required: false }] }], sent: [{ type: i0.Output, args: ["sent"] }], canceled: [{ type: i0.Output, args: ["canceled"] }] } });
 class CommentEditorDivider {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorDivider, isStandalone: true, selector: "ngs-comment-editor-divider", ngImport: i0, template: "<div class=\"divider\"></div>\n", styles: [":host{display:block;padding:0 calc(var(--spacing, .25rem) * 2)}:host .divider{height:calc(var(--spacing, .25rem) * 6);background:var(--color-neutral-300);width:1px}:host-context(html.dark) .divider{background:var(--color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorDivider, isStandalone: true, selector: "ngs-comment-editor-divider", ngImport: i0, template: "<div class=\"divider\"></div>\n", styles: [":host{display:block;padding:0 calc(var(--spacing, .25rem) * 2)}:host .divider{height:calc(var(--spacing, .25rem) * 6);background:var(--ngs-color-neutral-300);width:1px}:host-context(html.dark) .divider{background:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorDivider, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-comment-editor-divider', imports: [], template: "<div class=\"divider\"></div>\n", styles: [":host{display:block;padding:0 calc(var(--spacing, .25rem) * 2)}:host .divider{height:calc(var(--spacing, .25rem) * 6);background:var(--color-neutral-300);width:1px}:host-context(html.dark) .divider{background:var(--color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ngs-comment-editor-divider', imports: [], template: "<div class=\"divider\"></div>\n", styles: [":host{display:block;padding:0 calc(var(--spacing, .25rem) * 2)}:host .divider{height:calc(var(--spacing, .25rem) * 6);background:var(--ngs-color-neutral-300);width:1px}:host-context(html.dark) .divider{background:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 class CommentEditorToolbar {
@@ -620,7 +620,7 @@ class CommentEditorBubbleMenu {
                 provide: COMMENT_EDITOR_BUBBLE_MENU,
                 useExisting: forwardRef(() => CommentEditorBubbleMenu)
             }
-        ], exportAs: ["ngsCommentEditorBubbleMenu"], ngImport: i0, template: "@if (this.commentEditor.api.isActive('link') && getLinkUrl()) {\n  <div class=\"flex items-center gap-1 h-11 border-b border-b-muted border-b-neutral-700\">\n    <div class=\"grow text-sm overflow-hidden text-ellipsis whitespace-nowrap w-[116px]\">\n      <a [href]=\"getLinkUrl()\" target=\"_blank\" class=\"link\">{{ getLinkUrl() }}</a>\n    </div>\n    <div class=\"flex items-center flex-none\">\n      <ng-content select=\"[ngsCommentEditorCommandEditLink],[ngsCommentEditorCommandUnsetLink]\" />\n    </div>\n  </div>\n}\n<div class=\"h-12 flex items-center justify-center gap-0.5\">\n  <ng-content select=\"[ngsCommentEditorCommand],ngs-comment-editor-divider\" />\n</div>\n", styles: [":host{display:block;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;background:var(--color-neutral-950);color:var(--color-neutral-200);min-height:calc(var(--spacing, .25rem) * 12);border-radius:1rem;top:1px;padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2)}:host .button,:host ::ng-deep .button{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--icon-size: 1.25rem}:host .button:hover,:host ::ng-deep .button:hover{color:var(--color-tertiary-300);background:var(--color-neutral-700);border-radius:calc(infinity * 1px);padding:calc(var(--spacing, .25rem) * 1.5)}:host .button.active,:host ::ng-deep .button.active{color:var(--color-tertiary-300);background:var(--color-neutral-700)}:host .button ngs-icon,:host ::ng-deep .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:1.25rem;line-height:1.25}:host .button:disabled,:host ::ng-deep .button:disabled{pointer-events:none;opacity:70%}:host .link{color:var(--color-tertiary-300);position:relative;top:1px}:host .link:hover{color:var(--color-tertiary-100)}:host-context(html.dark){background:var(--color-tertiary-200);color:var(--color-neutral-900)}:host-context(html.dark) .link{color:var(--color-tertiary-700)}:host-context(html.dark) .link:hover{color:var(--color-tertiary-800)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+        ], exportAs: ["ngsCommentEditorBubbleMenu"], ngImport: i0, template: "@if (this.commentEditor.api.isActive('link') && getLinkUrl()) {\n  <div class=\"flex items-center gap-1 h-11 border-b border-b-muted border-b-neutral-700\">\n    <div class=\"grow text-sm overflow-hidden text-ellipsis whitespace-nowrap w-[116px]\">\n      <a [href]=\"getLinkUrl()\" target=\"_blank\" class=\"link\">{{ getLinkUrl() }}</a>\n    </div>\n    <div class=\"flex items-center flex-none\">\n      <ng-content select=\"[ngsCommentEditorCommandEditLink],[ngsCommentEditorCommandUnsetLink]\" />\n    </div>\n  </div>\n}\n<div class=\"h-12 flex items-center justify-center gap-0.5\">\n  <ng-content select=\"[ngsCommentEditorCommand],ngs-comment-editor-divider\" />\n</div>\n", styles: [":host{display:block;box-shadow:var(--ngs-shadow-sm);background:var(--ngs-color-neutral-950);color:var(--ngs-color-neutral-200);min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--ngs-radius-xl);top:1px;padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2)}:host .button,:host ::ng-deep .button{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--icon-size: var(--ngs-font-size-xl)}:host .button:hover,:host ::ng-deep .button:hover{color:var(--ngs-color-tertiary-300);background:var(--ngs-color-neutral-700);border-radius:calc(infinity * 1px);padding:calc(var(--spacing, .25rem) * 1.5)}:host .button.active,:host ::ng-deep .button.active{color:var(--ngs-color-tertiary-300);background:var(--ngs-color-neutral-700)}:host .button ngs-icon,:host ::ng-deep .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:var(--ngs-font-size-xl);line-height:1.25}:host .button:disabled,:host ::ng-deep .button:disabled{pointer-events:none;opacity:70%}:host .link{color:var(--ngs-color-tertiary-300);position:relative;top:1px}:host .link:hover{color:var(--ngs-color-tertiary-100)}:host-context(html.dark){background:var(--ngs-color-tertiary-200);color:var(--ngs-color-neutral-900)}:host-context(html.dark) .link{color:var(--ngs-color-tertiary-700)}:host-context(html.dark) .link:hover{color:var(--ngs-color-tertiary-800)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorBubbleMenu, decorators: [{
             type: Component,
@@ -631,7 +631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         }
                     ], host: {
                         'class': 'ngs-comment-editor-bubble-menu',
-                    }, template: "@if (this.commentEditor.api.isActive('link') && getLinkUrl()) {\n  <div class=\"flex items-center gap-1 h-11 border-b border-b-muted border-b-neutral-700\">\n    <div class=\"grow text-sm overflow-hidden text-ellipsis whitespace-nowrap w-[116px]\">\n      <a [href]=\"getLinkUrl()\" target=\"_blank\" class=\"link\">{{ getLinkUrl() }}</a>\n    </div>\n    <div class=\"flex items-center flex-none\">\n      <ng-content select=\"[ngsCommentEditorCommandEditLink],[ngsCommentEditorCommandUnsetLink]\" />\n    </div>\n  </div>\n}\n<div class=\"h-12 flex items-center justify-center gap-0.5\">\n  <ng-content select=\"[ngsCommentEditorCommand],ngs-comment-editor-divider\" />\n</div>\n", styles: [":host{display:block;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;background:var(--color-neutral-950);color:var(--color-neutral-200);min-height:calc(var(--spacing, .25rem) * 12);border-radius:1rem;top:1px;padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2)}:host .button,:host ::ng-deep .button{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--icon-size: 1.25rem}:host .button:hover,:host ::ng-deep .button:hover{color:var(--color-tertiary-300);background:var(--color-neutral-700);border-radius:calc(infinity * 1px);padding:calc(var(--spacing, .25rem) * 1.5)}:host .button.active,:host ::ng-deep .button.active{color:var(--color-tertiary-300);background:var(--color-neutral-700)}:host .button ngs-icon,:host ::ng-deep .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:1.25rem;line-height:1.25}:host .button:disabled,:host ::ng-deep .button:disabled{pointer-events:none;opacity:70%}:host .link{color:var(--color-tertiary-300);position:relative;top:1px}:host .link:hover{color:var(--color-tertiary-100)}:host-context(html.dark){background:var(--color-tertiary-200);color:var(--color-neutral-900)}:host-context(html.dark) .link{color:var(--color-tertiary-700)}:host-context(html.dark) .link:hover{color:var(--color-tertiary-800)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "@if (this.commentEditor.api.isActive('link') && getLinkUrl()) {\n  <div class=\"flex items-center gap-1 h-11 border-b border-b-muted border-b-neutral-700\">\n    <div class=\"grow text-sm overflow-hidden text-ellipsis whitespace-nowrap w-[116px]\">\n      <a [href]=\"getLinkUrl()\" target=\"_blank\" class=\"link\">{{ getLinkUrl() }}</a>\n    </div>\n    <div class=\"flex items-center flex-none\">\n      <ng-content select=\"[ngsCommentEditorCommandEditLink],[ngsCommentEditorCommandUnsetLink]\" />\n    </div>\n  </div>\n}\n<div class=\"h-12 flex items-center justify-center gap-0.5\">\n  <ng-content select=\"[ngsCommentEditorCommand],ngs-comment-editor-divider\" />\n</div>\n", styles: [":host{display:block;box-shadow:var(--ngs-shadow-sm);background:var(--ngs-color-neutral-950);color:var(--ngs-color-neutral-200);min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--ngs-radius-xl);top:1px;padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2)}:host .button,:host ::ng-deep .button{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--icon-size: var(--ngs-font-size-xl)}:host .button:hover,:host ::ng-deep .button:hover{color:var(--ngs-color-tertiary-300);background:var(--ngs-color-neutral-700);border-radius:calc(infinity * 1px);padding:calc(var(--spacing, .25rem) * 1.5)}:host .button.active,:host ::ng-deep .button.active{color:var(--ngs-color-tertiary-300);background:var(--ngs-color-neutral-700)}:host .button ngs-icon,:host ::ng-deep .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:var(--ngs-font-size-xl);line-height:1.25}:host .button:disabled,:host ::ng-deep .button:disabled{pointer-events:none;opacity:70%}:host .link{color:var(--ngs-color-tertiary-300);position:relative;top:1px}:host .link:hover{color:var(--ngs-color-tertiary-100)}:host-context(html.dark){background:var(--ngs-color-tertiary-200);color:var(--ngs-color-neutral-900)}:host-context(html.dark) .link{color:var(--ngs-color-tertiary-700)}:host-context(html.dark) .link:hover{color:var(--ngs-color-tertiary-800)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 class CommentEditorFooterBar {