npm - @ngstarter-ui/components - Versions diffs - 21.0.12 → 21.0.13 - Mend

@ngstarter-ui/components 21.0.12 → 21.0.13

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

package/ai/component-registry.json CHANGED Viewed

@@ -1002,6 +1002,7 @@
       "useWhen": "Use for mode switching, view density, filters, or mutually exclusive short choices.",
       "exampleTopics": [
         "Basic Button Toggle",
+        "Icon Only Button Toggle",
         "Selection Mode",
         "Button toggle selection mode"
       ],
@@ -1018,6 +1019,12 @@
           "title": "Button toggle selection mode",
           "file": "projects/docs/src/app/forms/button-toggle/_examples/button-toggle-selection-mode-example/button-toggle-selection-mode-example.html",
           "source": "<div>\n  <p class=\"mt-0\">Single selection:</p>\n  <ngs-button-toggle-group name=\"favoriteColor\" aria-label=\"Favorite Color\">\n    <ngs-button-toggle value=\"red\">Red</ngs-button-toggle>\n    <ngs-button-toggle value=\"green\">Green</ngs-button-toggle>\n    <ngs-button-toggle value=\"blue\">Blue</ngs-button-toggle>\n  </ngs-button-toggle-group>\n</div>\n<div class=\"mt-8\">\n  <p>Single selection (hidden indicator):</p>\n  <ngs-button-toggle-group name=\"favoriteColorHidden\" aria-label=\"Favorite Color Hidden\" hideSelectionIndicator>\n    <ngs-button-toggle value=\"red\">Red</ngs-button-toggle>\n    <ngs-button-toggle value=\"green\">Green</ngs-button-toggle>\n    <ngs-button-toggle value=\"blue\">Blue</ngs-button-toggle>\n  </ngs-button-toggle-group>\n</div>\n<div class=\"mt-8\">\n  <p>Multiple selection:</p>\n  <ngs-button-toggle-group name=\"ingredients\" aria-label=\"Ingredients\" multiple>\n    <ngs-button-toggle value=\"flour\">Flour</ngs-button-toggle>\n    <ngs-button-toggle value=\"eggs\">Eggs</ngs-button-toggle>\n    <ngs-button-toggle value=\"sugar\">Sugar</ngs-button-toggle>\n  </ngs-button-toggle-group>\n</div>"
+        },
+        {
+          "name": "icon-only-button-toggle-example",
+          "title": "Icon only button toggle",
+          "file": "projects/docs/src/app/forms/button-toggle/_examples/icon-only-button-toggle-example/icon-only-button-toggle-example.html",
+          "source": "<ngs-button-toggle-group value=\"grid\" hideSelectionIndicator onlyIcon aria-label=\"View mode\">\n  <ngs-button-toggle value=\"list\">\n    <ngs-icon name=\"fluent:text-bullet-list-ltr-24-regular\" />\n    <span class=\"sr-only\">List</span>\n  </ngs-button-toggle>\n  <ngs-button-toggle value=\"grid\">\n    <ngs-icon name=\"fluent:grid-24-regular\" />\n    <span class=\"sr-only\">Grid</span>\n  </ngs-button-toggle>\n  <ngs-button-toggle value=\"board\">\n    <ngs-icon name=\"fluent:board-24-regular\" />\n    <span class=\"sr-only\">Board</span>\n  </ngs-button-toggle>\n</ngs-button-toggle-group>"
         }
       ],
       "previewAsset": "projects/components/button-toggle/preview.svg",
@@ -1038,6 +1045,7 @@
         "id",
         "multiple",
         "name",
+        "onlyIcon",
         "value",
         "vertical"
       ],
@@ -1047,6 +1055,10 @@
       "cssTokens": [
         "--ngs-button-height",
         "--ngs-button-radius",
+        "--ngs-button-toggle-button-font-size",
+        "--ngs-button-toggle-button-font-weight",
+        "--ngs-button-toggle-button-only-icon-padding",
+        "--ngs-button-toggle-button-padding",
         "--ngs-button-toggle-checked-bg-color",
         "--ngs-button-toggle-checked-text-color",
         "--ngs-button-toggle-group-bg",

package/fesm2022/ngstarter-ui-components-button-toggle.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { contentChildren, forwardRef, input, booleanAttribute, model, output, effect, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Icon } from '@ngstarter-ui/components/icon';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Ripple } from '@ngstarter-ui/components/core';
-let nextId = 0;
 class ButtonToggleGroup {
     _buttonToggles = contentChildren(forwardRef(() => ButtonToggle), { ...(ngDevMode ? { debugName: "_buttonToggles" } : /* istanbul ignore next */ {}), descendants: true });
     appearance = input('standard', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
@@ -12,6 +12,7 @@ class ButtonToggleGroup {
     hideSelectionIndicator = input(false, { ...(ngDevMode ? { debugName: "hideSelectionIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    onlyIcon = input(false, { ...(ngDevMode ? { debugName: "onlyIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     change = output();
     _onChange = () => { };
     _onTouched = () => { };
@@ -82,13 +83,13 @@ class ButtonToggleGroup {
         this._emitChangeEvent(newValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ButtonToggleGroup, isStandalone: true, selector: "ngs-button-toggle-group", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideSelectionIndicator: { classPropertyName: "hideSelectionIndicator", publicName: "hideSelectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { properties: { "class.ngs-button-toggle-group-vertical": "vertical()", "attr.role": "multiple() ? \"group\" : \"radiogroup\"", "attr.aria-disabled": "disabled()" }, classAttribute: "ngs-button-toggle-group" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ButtonToggleGroup, isStandalone: true, selector: "ngs-button-toggle-group", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideSelectionIndicator: { classPropertyName: "hideSelectionIndicator", publicName: "hideSelectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, onlyIcon: { classPropertyName: "onlyIcon", publicName: "onlyIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { properties: { "class.ngs-button-toggle-group-vertical": "vertical()", "attr.role": "multiple() ? \"group\" : \"radiogroup\"", "class.only-icon": "onlyIcon()", "attr.aria-disabled": "disabled()" }, classAttribute: "ngs-button-toggle-group" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ButtonToggleGroup),
                 multi: true
             }
-        ], queries: [{ propertyName: "_buttonToggles", predicate: i0.forwardRef(() => ButtonToggle), descendants: true, isSignal: true }], exportAs: ["ngsButtonToggleGroup"], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-button-toggle-group-border-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-group-bg: var(--ngs-color-surface-container);display:inline-flex;flex-direction:row;white-space:nowrap;overflow:hidden;border-radius:var(--ngs-button-toggle-group-border-radius, var(--ngs-button-radius));background:var(--ngs-button-toggle-group-bg);height:var(--ngs-button-height)}:host.ngs-button-toggle-group-vertical{flex-direction:column}:host.ngs-button-toggle-group-vertical ::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-top:1px solid var(--ngs-button-toggle-group-border-color);border-left:none}::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-left:1px solid var(--ngs-button-toggle-group-border-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "_buttonToggles", predicate: i0.forwardRef(() => ButtonToggle), descendants: true, isSignal: true }], exportAs: ["ngsButtonToggleGroup"], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-button-toggle-group-border-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-group-bg: var(--ngs-color-surface-container);--ngs-button-toggle-text-color: var(--ngs-color-on-surface-variant);--ngs-button-toggle-hover-bg-color: var(--ngs-color-surface-container-high);--ngs-button-toggle-checked-bg-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-checked-text-color: var(--ngs-color-on-surface);--ngs-button-toggle-selection-indicator-color: var(--ngs-color-primary);--ngs-button-toggle-button-padding: 0 calc(var(--spacing, .25rem) * 4);--ngs-button-toggle-button-only-icon-padding: 0 calc(var(--spacing, .25rem) * 2.5);--ngs-button-toggle-button-font-size: .875rem;--ngs-button-toggle-button-font-weight: 500;display:inline-flex;flex-direction:row;white-space:nowrap;overflow:hidden;border-radius:var(--ngs-button-toggle-group-border-radius, var(--ngs-button-radius));background:var(--ngs-button-toggle-group-bg);height:var(--ngs-button-height)}:host ::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-left:1px solid var(--ngs-button-toggle-group-border-color)}:host.ngs-button-toggle-group-vertical{flex-direction:column}:host.ngs-button-toggle-group-vertical ::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-top:1px solid var(--ngs-button-toggle-group-border-color);border-left:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggleGroup, decorators: [{
             type: Component,
@@ -102,16 +103,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         'class': 'ngs-button-toggle-group',
                         '[class.ngs-button-toggle-group-vertical]': 'vertical()',
                         '[attr.role]': 'multiple() ? "group" : "radiogroup"',
+                        '[class.only-icon]': 'onlyIcon()',
                         '[attr.aria-disabled]': 'disabled()',
-                    }, template: "<ng-content />\n", styles: [":host{--ngs-button-toggle-group-border-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-group-bg: var(--ngs-color-surface-container);display:inline-flex;flex-direction:row;white-space:nowrap;overflow:hidden;border-radius:var(--ngs-button-toggle-group-border-radius, var(--ngs-button-radius));background:var(--ngs-button-toggle-group-bg);height:var(--ngs-button-height)}:host.ngs-button-toggle-group-vertical{flex-direction:column}:host.ngs-button-toggle-group-vertical ::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-top:1px solid var(--ngs-button-toggle-group-border-color);border-left:none}::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-left:1px solid var(--ngs-button-toggle-group-border-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _buttonToggles: [{ type: i0.ContentChildren, args: [forwardRef(() => ButtonToggle), { ...{ descendants: true }, isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideSelectionIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelectionIndicator", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], change: [{ type: i0.Output, args: ["change"] }] } });
+                    }, template: "<ng-content />\n", styles: [":host{--ngs-button-toggle-group-border-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-group-bg: var(--ngs-color-surface-container);--ngs-button-toggle-text-color: var(--ngs-color-on-surface-variant);--ngs-button-toggle-hover-bg-color: var(--ngs-color-surface-container-high);--ngs-button-toggle-checked-bg-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-checked-text-color: var(--ngs-color-on-surface);--ngs-button-toggle-selection-indicator-color: var(--ngs-color-primary);--ngs-button-toggle-button-padding: 0 calc(var(--spacing, .25rem) * 4);--ngs-button-toggle-button-only-icon-padding: 0 calc(var(--spacing, .25rem) * 2.5);--ngs-button-toggle-button-font-size: .875rem;--ngs-button-toggle-button-font-weight: 500;display:inline-flex;flex-direction:row;white-space:nowrap;overflow:hidden;border-radius:var(--ngs-button-toggle-group-border-radius, var(--ngs-button-radius));background:var(--ngs-button-toggle-group-bg);height:var(--ngs-button-height)}:host ::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-left:1px solid var(--ngs-button-toggle-group-border-color)}:host.ngs-button-toggle-group-vertical{flex-direction:column}:host.ngs-button-toggle-group-vertical ::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-top:1px solid var(--ngs-button-toggle-group-border-color);border-left:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _buttonToggles: [{ type: i0.ContentChildren, args: [forwardRef(() => ButtonToggle), { ...{ descendants: true }, isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideSelectionIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelectionIndicator", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onlyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyIcon", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+let nextId = 0;
 class ButtonToggle {
-    _id = `ngs-button-toggle-${nextId++}`;
     id = input(`ngs-button-toggle-${nextId++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    onlyIcon = input(false, { ...(ngDevMode ? { debugName: "onlyIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     _internalChecked = false;
     get isChecked() {
         return this.checked() || this._internalChecked;
@@ -149,23 +153,22 @@ class ButtonToggle {
             this.change.emit({ source: this, value: this.value() });
         }
     }
-    _markForCheck() {
-        this._changeDetectorRef.markForCheck();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ButtonToggle, isStandalone: true, selector: "ngs-button-toggle", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.ngs-button-toggle-checked": "isChecked", "class.ngs-button-toggle-disabled": "isDisabled", "attr.id": "id()" }, classAttribute: "ngs-button-toggle" }, ngImport: i0, template: "<button type=\"button\"\n        class=\"ngs-button-toggle-button\"\n        [attr.id]=\"id() + '-button'\"\n        [disabled]=\"isDisabled\"\n        [attr.name]=\"name()\"\n        [attr.aria-pressed]=\"isChecked\"\n        (click)=\"_onButtonClick()\">\n  @if (_shouldShowSelectionIndicator) {\n    <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ngs-button-toggle-selection-indicator size-5\"/>\n  }\n  <span class=\"ngs-button-toggle-label-content\">\n    <ng-content />\n  </span>\n</button>\n", styles: [":host{--ngs-button-toggle-text-color: var(--ngs-color-on-surface-variant);--ngs-button-toggle-hover-bg-color: var(--ngs-color-surface-container-high);--ngs-button-toggle-checked-bg-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-checked-text-color: var(--ngs-color-on-surface);--ngs-button-toggle-selection-indicator-color: var(--ngs-color-primary);display:inline-block;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:host .ngs-button-toggle-button{display:flex;align-items:center;justify-content:center;padding:0 16px;cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;font-size:.875rem;line-height:1.25rem;font-weight:500;border:none;background:none;color:var(--ngs-button-toggle-text-color);width:100%;height:100%;outline:none}:host .ngs-button-toggle-button:hover:not(:disabled){background:var(--ngs-button-toggle-hover-bg-color)}:host .ngs-button-toggle-button:disabled{cursor:not-allowed;color:var(--ngs-color-on-surface);background:transparent}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button .ngs-button-toggle-selection-indicator{display:inline-flex;align-items:center;justify-content:center;font-size:1rem;color:var(--ngs-button-toggle-selection-indicator-color);margin-right:8px;animation:ngs-button-toggle-indicator-fade-in .2s cubic-bezier(0,0,.2,1)}:host.ngs-button-toggle-checked .ngs-button-toggle-button{background:var(--ngs-button-toggle-checked-bg-color);color:var(--ngs-button-toggle-checked-text-color)}:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:var(--ngs-color-on-surface);color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:color-mix(in srgb,var(--ngs-color-on-surface),transparent 88%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-label-content{line-height:1}@keyframes ngs-button-toggle-indicator-fade-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ButtonToggle, isStandalone: true, selector: "ngs-button-toggle", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, onlyIcon: { classPropertyName: "onlyIcon", publicName: "onlyIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.ngs-button-toggle-checked": "isChecked", "class.ngs-button-toggle-disabled": "isDisabled", "class.only-icon": "onlyIcon()", "attr.id": "id()" }, classAttribute: "ngs-button-toggle" }, exportAs: ["ngsButtonToggle"], ngImport: i0, template: "<button type=\"button\"\n        ngsRipple\n        class=\"ngs-button-toggle-button\"\n        [attr.id]=\"id() + '-button'\"\n        [disabled]=\"isDisabled\"\n        [attr.name]=\"name()\"\n        [attr.aria-pressed]=\"isChecked\"\n        (click)=\"_onButtonClick()\">\n  @if (_shouldShowSelectionIndicator) {\n    <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ngs-button-toggle-selection-indicator size-5\"/>\n  }\n  <span class=\"ngs-button-toggle-label-content\">\n    <ng-content />\n  </span>\n</button>\n", styles: [":host{display:inline-block;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:host .ngs-button-toggle-button{display:flex;align-items:center;justify-content:center;padding:var(--ngs-button-toggle-button-padding);cursor:pointer;font-size:var(--ngs-button-toggle-button-font-size);line-height:1.25rem;font-weight:var(--ngs-button-toggle-button-font-weight);border:none;background:none;color:var(--ngs-button-toggle-text-color);width:100%;height:100%;outline:none}:host .ngs-button-toggle-button:hover:not(:disabled){background:var(--ngs-button-toggle-hover-bg-color)}:host .ngs-button-toggle-button:disabled{cursor:not-allowed;color:var(--ngs-color-on-surface);background:transparent}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button .ngs-button-toggle-selection-indicator{display:inline-flex;align-items:center;justify-content:center;font-size:1rem;color:var(--ngs-button-toggle-selection-indicator-color);margin-right:8px;animation:ngs-button-toggle-indicator-fade-in .2s cubic-bezier(0,0,.2,1)}:host.only-icon{padding:var(--ngs-button-toggle-button-only-icon-padding)}:host:has(.ngs-button-toggle-label-content:has(ngs-icon)){padding:0 12px}:host.ngs-button-toggle-checked .ngs-button-toggle-button{background:var(--ngs-button-toggle-checked-bg-color);color:var(--ngs-button-toggle-checked-text-color)}:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:var(--ngs-color-on-surface);color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:color-mix(in srgb,var(--ngs-color-on-surface),transparent 88%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-label-content{line-height:0}:host-context(ngs-button-toggle-group.only-icon) .ngs-button-toggle-button{padding:var(--ngs-button-toggle-button-only-icon-padding)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggle, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-button-toggle', host: {
+            args: [{ selector: 'ngs-button-toggle', exportAs: 'ngsButtonToggle', imports: [
+                        Icon,
+                        Ripple
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ngs-button-toggle-checked]': 'isChecked',
                         '[class.ngs-button-toggle-disabled]': 'isDisabled',
+                        '[class.only-icon]': 'onlyIcon()',
                         '[attr.id]': 'id()',
                         'class': 'ngs-button-toggle',
-                    }, standalone: true, imports: [
-                        Icon
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\"\n        class=\"ngs-button-toggle-button\"\n        [attr.id]=\"id() + '-button'\"\n        [disabled]=\"isDisabled\"\n        [attr.name]=\"name()\"\n        [attr.aria-pressed]=\"isChecked\"\n        (click)=\"_onButtonClick()\">\n  @if (_shouldShowSelectionIndicator) {\n    <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ngs-button-toggle-selection-indicator size-5\"/>\n  }\n  <span class=\"ngs-button-toggle-label-content\">\n    <ng-content />\n  </span>\n</button>\n", styles: [":host{--ngs-button-toggle-text-color: var(--ngs-color-on-surface-variant);--ngs-button-toggle-hover-bg-color: var(--ngs-color-surface-container-high);--ngs-button-toggle-checked-bg-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-checked-text-color: var(--ngs-color-on-surface);--ngs-button-toggle-selection-indicator-color: var(--ngs-color-primary);display:inline-block;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:host .ngs-button-toggle-button{display:flex;align-items:center;justify-content:center;padding:0 16px;cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;font-size:.875rem;line-height:1.25rem;font-weight:500;border:none;background:none;color:var(--ngs-button-toggle-text-color);width:100%;height:100%;outline:none}:host .ngs-button-toggle-button:hover:not(:disabled){background:var(--ngs-button-toggle-hover-bg-color)}:host .ngs-button-toggle-button:disabled{cursor:not-allowed;color:var(--ngs-color-on-surface);background:transparent}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button .ngs-button-toggle-selection-indicator{display:inline-flex;align-items:center;justify-content:center;font-size:1rem;color:var(--ngs-button-toggle-selection-indicator-color);margin-right:8px;animation:ngs-button-toggle-indicator-fade-in .2s cubic-bezier(0,0,.2,1)}:host.ngs-button-toggle-checked .ngs-button-toggle-button{background:var(--ngs-button-toggle-checked-bg-color);color:var(--ngs-button-toggle-checked-text-color)}:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:var(--ngs-color-on-surface);color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:color-mix(in srgb,var(--ngs-color-on-surface),transparent 88%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-label-content{line-height:1}@keyframes ngs-button-toggle-indicator-fade-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+                    }, template: "<button type=\"button\"\n        ngsRipple\n        class=\"ngs-button-toggle-button\"\n        [attr.id]=\"id() + '-button'\"\n        [disabled]=\"isDisabled\"\n        [attr.name]=\"name()\"\n        [attr.aria-pressed]=\"isChecked\"\n        (click)=\"_onButtonClick()\">\n  @if (_shouldShowSelectionIndicator) {\n    <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ngs-button-toggle-selection-indicator size-5\"/>\n  }\n  <span class=\"ngs-button-toggle-label-content\">\n    <ng-content />\n  </span>\n</button>\n", styles: [":host{display:inline-block;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:host .ngs-button-toggle-button{display:flex;align-items:center;justify-content:center;padding:var(--ngs-button-toggle-button-padding);cursor:pointer;font-size:var(--ngs-button-toggle-button-font-size);line-height:1.25rem;font-weight:var(--ngs-button-toggle-button-font-weight);border:none;background:none;color:var(--ngs-button-toggle-text-color);width:100%;height:100%;outline:none}:host .ngs-button-toggle-button:hover:not(:disabled){background:var(--ngs-button-toggle-hover-bg-color)}:host .ngs-button-toggle-button:disabled{cursor:not-allowed;color:var(--ngs-color-on-surface);background:transparent}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button .ngs-button-toggle-selection-indicator{display:inline-flex;align-items:center;justify-content:center;font-size:1rem;color:var(--ngs-button-toggle-selection-indicator-color);margin-right:8px;animation:ngs-button-toggle-indicator-fade-in .2s cubic-bezier(0,0,.2,1)}:host.only-icon{padding:var(--ngs-button-toggle-button-only-icon-padding)}:host:has(.ngs-button-toggle-label-content:has(ngs-icon)){padding:0 12px}:host.ngs-button-toggle-checked .ngs-button-toggle-button{background:var(--ngs-button-toggle-checked-bg-color);color:var(--ngs-button-toggle-checked-text-color)}:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:var(--ngs-color-on-surface);color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:color-mix(in srgb,var(--ngs-color-on-surface),transparent 88%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-label-content{line-height:0}:host-context(ngs-button-toggle-group.only-icon) .ngs-button-toggle-button{padding:var(--ngs-button-toggle-button-only-icon-padding)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onlyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyIcon", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngstarter-ui-components-button-toggle.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngstarter-ui-components-button-toggle.mjs","sources":["../../../projects/components/button-toggle/src/button-toggle/button-toggle.ts","../../../projects/components/button-toggle/src/button-toggle-group/button-toggle-group.html","../../../projects/components/button-toggle/src/button-toggle/button-toggle.html","../../../projects/components/button-toggle/ngstarter-ui-components-button-toggle.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n forwardRef,\n inject,\n input,\n OnInit,\n booleanAttribute,\n output,\n model,\n contentChildren,\n effect\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Icon } from '@ngstarter-ui/components/icon';\n\nlet nextId = 0;\n\nexport type ButtonToggleAppearance = 'standard' \| 'legacy';\n\n@Component({\n selector: 'ngs-button-toggle-group',\n exportAs: 'ngsButtonToggleGroup',\n templateUrl: '../button-toggle-group/button-toggle-group.html',\n styleUrl: '../button-toggle-group/button-toggle-group.scss',\n standalone: true,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ButtonToggleGroup),\n multi: true\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'ngs-button-toggle-group',\n '[class.ngs-button-toggle-group-vertical]': 'vertical()',\n '[attr.role]': 'multiple() ? \"group\" : \"radiogroup\"',\n '[attr.aria-disabled]': 'disabled()',\n },\n})\nexport class ButtonToggleGroup implements ControlValueAccessor, AfterContentInit {\n readonly _buttonToggles = contentChildren(forwardRef(() => ButtonToggle), { descendants: true });\n\n appearance = input<ButtonToggleAppearance>('standard');\n disabled = input(false, { transform: booleanAttribute });\n multiple = input(false, { transform: booleanAttribute });\n hideSelectionIndicator = input(false, { transform: booleanAttribute });\n vertical = input(false, { transform: booleanAttribute });\n value = model<any>(undefined);\n\n readonly change = output<any>();\n\n _onChange: (value: any) => void = () => {};\n _onTouched: () => void = () => {};\n\n constructor() {\n effect(() => {\n this.value();\n this._buttonToggles();\n this._updateSelectedButtonsFromValue();\n });\n }\n\n ngAfterContentInit() {\n this._updateSelectedButtonsFromValue();\n }\n\n writeValue(value: any): void {\n this.value.set(value);\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: boolean): void {\n // Note: If we want to support setDisabledState with input signals,\n // we might need a separate internal signal or just accept that it won't work well with reactive inputs\n // but typically CVA's setDisabledState is for the form control to disable the component.\n // For now, let's use a private signal if we need to combine them.\n }\n\n _emitChangeEvent(value: any): void {\n this._onChange(value);\n this.change.emit({ source: this, value });\n }\n\n private _updateSelectedButtonsFromValue() {\n const _buttonToggles = this._buttonToggles();\n if (_buttonToggles) {\n _buttonToggles.forEach(toggle => {\n toggle._setChecked(this._isSelected(toggle.value()));\n });\n }\n }\n\n private _isSelected(val: any): boolean {\n if (this.multiple()) {\n return Array.isArray(this.value()) && this.value().includes(val);\n }\n return this.value() === val;\n }\n\n _onButtonClick(toggle: ButtonToggle) {\n if (this.disabled() \|\| toggle.disabled()) {\n return;\n }\n\n if (this.multiple()) {\n const currentValue = Array.isArray(this.value()) ? [...this.value()] : [];\n const index = currentValue.indexOf(toggle.value());\n\n if (index !== -1) {\n currentValue.splice(index, 1);\n } else {\n currentValue.push(toggle.value());\n }\n this._updateValue(currentValue);\n } else {\n this._updateValue(toggle.value());\n }\n }\n\n private _updateValue(newValue: any) {\n this.value.set(newValue);\n this._emitChangeEvent(newValue);\n }\n}\n\n@Component({\n selector: 'ngs-button-toggle',\n templateUrl: './button-toggle.html',\n styleUrl: './button-toggle.scss',\n host: {\n '[class.ngs-button-toggle-checked]': 'isChecked',\n '[class.ngs-button-toggle-disabled]': 'isDisabled',\n '[attr.id]': 'id()',\n 'class': 'ngs-button-toggle',\n },\n standalone: true,\n imports: [\n Icon\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonToggle implements OnInit {\n private _id = `ngs-button-toggle-${nextId++}`;\n\n id = input<string>(`ngs-button-toggle-${nextId++}`);\n value = input<any>(undefined);\n name = input<string \| undefined>(undefined);\n checked = input(false, { transform: booleanAttribute });\n disabled = input(false, { transform: booleanAttribute });\n private _internalChecked = false;\n get isChecked(): boolean {\n return this.checked() \|\| this._internalChecked;\n }\n _setChecked(value: boolean) {\n this._internalChecked = value;\n this._changeDetectorRef.markForCheck();\n }\n\n readonly change = output<any>();\n\n public buttonToggleGroup = inject(forwardRef(() => ButtonToggleGroup), { optional: true });\n private _changeDetectorRef = inject(ChangeDetectorRef);\n\n get isDisabled(): boolean {\n return this.disabled() \|\| (this.buttonToggleGroup && this.buttonToggleGroup.disabled());\n }\n\n get _shouldShowSelectionIndicator(): boolean {\n if (!this.isChecked) {\n return false;\n }\n\n if (!this.buttonToggleGroup) {\n return false;\n }\n\n return !this.buttonToggleGroup.hideSelectionIndicator();\n }\n\n ngOnInit() {\n if (this.buttonToggleGroup && this.buttonToggleGroup.value() === this.value()) {\n this._setChecked(true);\n }\n }\n\n _onButtonClick() {\n if (this.buttonToggleGroup) {\n this.buttonToggleGroup._onButtonClick(this);\n } else {\n this._setChecked(!this.isChecked);\n this.change.emit({ source: this, value: this.value() });\n }\n }\n\n _markForCheck() {\n this._changeDetectorRef.markForCheck();\n }\n}\n","<ng-content />\n","<button type=\"button\"\n class=\"ngs-button-toggle-button\"\n [attr.id]=\"id() + '-button'\"\n [disabled]=\"isDisabled\"\n [attr.name]=\"name()\"\n [attr.aria-pressed]=\"isChecked\"\n (click)=\"_onButtonClick()\">\n @if (_shouldShowSelectionIndicator) {\n <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ngs-button-toggle-selection-indicator size-5\"/>\n }\n <span class=\"ngs-button-toggle-label-content\">\n <ng-content />\n </span>\n</button>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ngstarter-ui-components-button-toggle.mjs","sources":["../../../projects/components/button-toggle/src/button-toggle-group/button-toggle-group.ts","../../../projects/components/button-toggle/src/button-toggle-group/button-toggle-group.html","../../../projects/components/button-toggle/src/button-toggle/button-toggle.ts","../../../projects/components/button-toggle/src/button-toggle/button-toggle.html","../../../projects/components/button-toggle/ngstarter-ui-components-button-toggle.ts"],"sourcesContent":["import {\n AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n effect,\n forwardRef,\n input,\n model,\n output\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ButtonToggle } from '../button-toggle/button-toggle';\n\nexport type ButtonToggleAppearance = 'standard' \| 'legacy';\n\n@Component({\n selector: 'ngs-button-toggle-group',\n exportAs: 'ngsButtonToggleGroup',\n templateUrl: './button-toggle-group.html',\n styleUrl: './button-toggle-group.scss',\n standalone: true,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ButtonToggleGroup),\n multi: true\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'ngs-button-toggle-group',\n '[class.ngs-button-toggle-group-vertical]': 'vertical()',\n '[attr.role]': 'multiple() ? \"group\" : \"radiogroup\"',\n '[class.only-icon]': 'onlyIcon()',\n '[attr.aria-disabled]': 'disabled()',\n },\n})\nexport class ButtonToggleGroup implements ControlValueAccessor, AfterContentInit {\n readonly _buttonToggles = contentChildren(forwardRef(() => ButtonToggle), { descendants: true });\n\n appearance = input<ButtonToggleAppearance>('standard');\n disabled = input(false, { transform: booleanAttribute });\n multiple = input(false, { transform: booleanAttribute });\n hideSelectionIndicator = input(false, { transform: booleanAttribute });\n vertical = input(false, { transform: booleanAttribute });\n value = model<any>(undefined);\n onlyIcon = input(false, { transform: booleanAttribute });\n\n readonly change = output<any>();\n\n _onChange: (value: any) => void = () => {};\n _onTouched: () => void = () => {};\n\n constructor() {\n effect(() => {\n this.value();\n this._buttonToggles();\n this._updateSelectedButtonsFromValue();\n });\n }\n\n ngAfterContentInit() {\n this._updateSelectedButtonsFromValue();\n }\n\n writeValue(value: any): void {\n this.value.set(value);\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: boolean): void {\n // Note: If we want to support setDisabledState with input signals,\n // we might need a separate internal signal or just accept that it won't work well with reactive inputs\n // but typically CVA's setDisabledState is for the form control to disable the component.\n // For now, let's use a private signal if we need to combine them.\n }\n\n _emitChangeEvent(value: any): void {\n this._onChange(value);\n this.change.emit({ source: this, value });\n }\n\n private _updateSelectedButtonsFromValue() {\n const _buttonToggles = this._buttonToggles();\n if (_buttonToggles) {\n _buttonToggles.forEach(toggle => {\n toggle._setChecked(this._isSelected(toggle.value()));\n });\n }\n }\n\n private _isSelected(val: any): boolean {\n if (this.multiple()) {\n return Array.isArray(this.value()) && this.value().includes(val);\n }\n return this.value() === val;\n }\n\n _onButtonClick(toggle: ButtonToggle) {\n if (this.disabled() \|\| toggle.disabled()) {\n return;\n }\n\n if (this.multiple()) {\n const currentValue = Array.isArray(this.value()) ? [...this.value()] : [];\n const index = currentValue.indexOf(toggle.value());\n\n if (index !== -1) {\n currentValue.splice(index, 1);\n } else {\n currentValue.push(toggle.value());\n }\n this._updateValue(currentValue);\n } else {\n this._updateValue(toggle.value());\n }\n }\n\n private _updateValue(newValue: any) {\n this.value.set(newValue);\n this._emitChangeEvent(newValue);\n }\n}\n","<ng-content />\n","import {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n forwardRef,\n inject,\n input,\n OnInit,\n output,\n} from '@angular/core';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport { ButtonToggleGroup } from '../button-toggle-group/button-toggle-group';\nimport {Ripple} from \"@ngstarter-ui/components/core\";\n\nlet nextId = 0;\n\n@Component({\n selector: 'ngs-button-toggle',\n exportAs: 'ngsButtonToggle',\n imports: [\n Icon,\n Ripple\n ],\n templateUrl: './button-toggle.html',\n styleUrl: './button-toggle.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.ngs-button-toggle-checked]': 'isChecked',\n '[class.ngs-button-toggle-disabled]': 'isDisabled',\n '[class.only-icon]': 'onlyIcon()',\n '[attr.id]': 'id()',\n 'class': 'ngs-button-toggle',\n },\n})\nexport class ButtonToggle implements OnInit {\n id = input<string>(`ngs-button-toggle-${nextId++}`);\n value = input<any>(undefined);\n name = input<string \| undefined>(undefined);\n checked = input(false, { transform: booleanAttribute });\n disabled = input(false, { transform: booleanAttribute });\n onlyIcon = input(false, { transform: booleanAttribute });\n\n private _internalChecked = false;\n get isChecked(): boolean {\n return this.checked() \|\| this._internalChecked;\n }\n _setChecked(value: boolean) {\n this._internalChecked = value;\n this._changeDetectorRef.markForCheck();\n }\n\n readonly change = output<any>();\n\n public buttonToggleGroup = inject(forwardRef(() => ButtonToggleGroup), { optional: true });\n private _changeDetectorRef = inject(ChangeDetectorRef);\n\n get isDisabled(): boolean {\n return this.disabled() \|\| (this.buttonToggleGroup && this.buttonToggleGroup.disabled());\n }\n\n get _shouldShowSelectionIndicator(): boolean {\n if (!this.isChecked) {\n return false;\n }\n\n if (!this.buttonToggleGroup) {\n return false;\n }\n\n return !this.buttonToggleGroup.hideSelectionIndicator();\n }\n\n ngOnInit() {\n if (this.buttonToggleGroup && this.buttonToggleGroup.value() === this.value()) {\n this._setChecked(true);\n }\n }\n\n _onButtonClick() {\n if (this.buttonToggleGroup) {\n this.buttonToggleGroup._onButtonClick(this);\n } else {\n this._setChecked(!this.isChecked);\n this.change.emit({ source: this, value: this.value() });\n }\n }\n}\n","<button type=\"button\"\n ngsRipple\n class=\"ngs-button-toggle-button\"\n [attr.id]=\"id() + '-button'\"\n [disabled]=\"isDisabled\"\n [attr.name]=\"name()\"\n [attr.aria-pressed]=\"isChecked\"\n (click)=\"_onButtonClick()\">\n @if (_shouldShowSelectionIndicator) {\n <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ngs-button-toggle-selection-indicator size-5\"/>\n }\n <span class=\"ngs-button-toggle-label-content\">\n <ng-content />\n </span>\n</button>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-image-designer.mjs CHANGED Viewed

@@ -3038,7 +3038,7 @@ class Settings {
         this.imageDesigner?.openEffects();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Settings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Settings, isStandalone: true, selector: "ngs-settings", ngImport: i0, template: "@let layer = selectedLayer();\n\n@if (layer) {\n  <ngs-toolbar\n    class=\"h-14 z-10 bg-surface-container-lowest border-b border-border px-5 absolute top-0 left-0 right-0\">\n    <!-- Color -->\n    @if (showColorPicker()) {\n      <ngs-toolbar-item>\n        <button [ngsPopoverTriggerFor]=\"colorPopover\"\n                position=\"below-center\"\n                class=\"size-7 cursor-pointer hover:ring-2 hover:ring-primary rounded-full border border-border\"\n                ngsRipple\n                [style.backgroundColor]=\"layer['fill'] || '#000000'\">\n        </button>\n        <ngs-popover #colorPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-72\">\n              <div class=\"text-xs font-medium uppercase text-muted-foreground mb-4\">\n                {{ layer.type === 'text' ? 'Text Color' : 'Fill Color' }}\n              </div>\n              <ngs-color-switcher [colors]=\"presetColors()\"\n                                  [selectedColor]=\"layer['fill'] || '#000000'\"\n                                  (colorChange)=\"updateColor($event)\"/>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n      <ngs-divider vertical/>\n    }\n\n    <!-- Opacity -->\n    <ngs-toolbar-item>\n      <button ngsIconButton\n              [ngsPopoverTriggerFor]=\"opacityPopover\"\n              position=\"below-center\">\n        <ngs-icon name=\"fluent:blur-24-regular\"/>\n      </button>\n      <ngs-popover #opacityPopover>\n        <ng-template ngsPopoverContent>\n          <div class=\"p-4 w-60 space-y-3\">\n            <div class=\"flex justify-between items-center\">\n              <label class=\"text-xs font-medium uppercase text-muted-foreground\">Opacity</label>\n              <span class=\"text-xs text-muted-foreground\">{{ (layer['opacity'] ?? 1) * 100 | number:'1.0-0' }}%</span>\n            </div>\n            <ngs-slider [min]=\"0\" [max]=\"1\" [step]=\"0.01\">\n              <input ngsSliderThumb\n                     [value]=\"layer['opacity'] ?? 1\"\n                     (valueChange)=\"updateOpacity($event)\"/>\n            </ngs-slider>\n          </div>\n        </ng-template>\n      </ngs-popover>\n    </ngs-toolbar-item>\n\n    <!-- Font Selection for text layers -->\n    @if (layer.type === 'text') {\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"fontMenu\">\n          <span class=\"truncate max-w-[100px]\">{{ layer['fontFamily'] }}</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #fontMenu=\"ngsMenu\">\n          <div class=\"min-w-[200px]\">\n            @for (font of fonts(); track font) {\n              <button ngs-menu-item\n                      [selected]=\"layer['fontFamily'] === font\"\n                      (click)=\"updateFont(font)\">\n                {{ font }}\n              </button>\n            }\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n\n      <!-- Text Styles -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"boldPopover\"\n                position=\"below-center\"\n                [class.text-primary]=\"layer['fontWeight'] && layer['fontWeight'] !== 'normal' && layer['fontWeight'] !== 400\"\n                title=\"Bold\">\n          <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n        </button>\n        <ngs-popover #boldPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-60 space-y-3\">\n              <div class=\"flex justify-between items-center\">\n                <label class=\"text-xs font-medium uppercase text-muted-foreground\">Font Weight</label>\n                <span class=\"text-xs text-muted-foreground\">{{ getFontWeightName(layer['fontWeight']) }}</span>\n              </div>\n              <ngs-slider [min]=\"300\" [max]=\"900\" [step]=\"100\">\n                <input ngsSliderThumb\n                       [value]=\"layer['fontWeight'] === 'bold' ? 700 : (layer['fontWeight'] === 'normal' ? 400 : (layer['fontWeight'] || 400))\"\n                       (valueChange)=\"updateFontWeight($event)\"/>\n              </ngs-slider>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n\n      <!-- Uppercase -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                (click)=\"toggleUppercase()\"\n                [class.text-primary]=\"layer['textCase'] === 'upper'\"\n                title=\"Uppercase\">\n          <ngs-icon name=\"fluent:text-case-uppercase-24-regular\"/>\n        </button>\n      </ngs-toolbar-item>\n\n      <ngs-toolbar-item>\n        <ngs-button-toggle-group multiple\n                                 hideSelectionIndicator\n                                 [value]=\"getTextStyle()\"\n                                 (valueChange)=\"updateTextStyle($event)\">\n          <ngs-button-toggle value=\"italic\" title=\"Italic\">\n            <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n          </ngs-button-toggle>\n          <ngs-button-toggle value=\"underline\" title=\"Underline\">\n            <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n          </ngs-button-toggle>\n          <ngs-button-toggle value=\"line-through\" title=\"Strikethrough\">\n            <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n          </ngs-button-toggle>\n        </ngs-button-toggle-group>\n      </ngs-toolbar-item>\n\n      <!-- Text Alignment -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"alignPopover\"\n                position=\"below-center\"\n                title=\"Alignment\">\n          <ngs-icon [name]=\"'fluent:text-align-' + (layer['align'] || 'left') + '-24-regular'\"/>\n        </button>\n        <ngs-popover #alignPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-2 flex gap-1\">\n              <button ngsIconButton (click)=\"updateTextAlign('left')\" [class.text-primary]=\"layer['align'] === 'left'\">\n                <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('center')\" [class.text-primary]=\"layer['align'] === 'center'\">\n                <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('right')\" [class.text-primary]=\"layer['align'] === 'right'\">\n                <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('justify')\" [class.text-primary]=\"layer['align'] === 'justify'\">\n                <ngs-icon name=\"fluent:text-align-justify-24-regular\"/>\n              </button>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n\n      <!-- Spacing (Line Height & Letter Spacing) -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"spacingPopover\"\n                position=\"below-center\"\n                title=\"Spacing\">\n          <ngs-icon name=\"fluent:text-line-spacing-24-regular\"/>\n        </button>\n        <ngs-popover #spacingPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-60 space-y-6\">\n              <div class=\"space-y-3\">\n                <div class=\"flex justify-between items-center\">\n                  <label class=\"text-xs font-medium uppercase text-muted-foreground\">Line Height</label>\n                  <span class=\"text-xs text-muted-foreground\">{{ layer['lineHeight'] || 1.2 | number:'1.1-1' }}</span>\n                </div>\n                <ngs-slider [min]=\"0.5\" [max]=\"3\" [step]=\"0.1\">\n                  <input ngsSliderThumb\n                         [value]=\"layer['lineHeight'] || 1.2\"\n                         (valueChange)=\"updateLineHeight($event)\"/>\n                </ngs-slider>\n              </div>\n              <div class=\"space-y-3\">\n                <div class=\"flex justify-between items-center\">\n                  <label class=\"text-xs font-medium uppercase text-muted-foreground\">Letter Spacing</label>\n                  <span class=\"text-xs text-muted-foreground\">{{ layer['letterSpacing'] || 0 }}</span>\n                </div>\n                <ngs-slider [min]=\"-5\" [max]=\"50\" [step]=\"1\">\n                  <input ngsSliderThumb\n                         [value]=\"layer['letterSpacing'] || 0\"\n                         (valueChange)=\"updateLetterSpacing($event)\"/>\n                </ngs-slider>\n              </div>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n    }\n\n    @if (layer.type === 'image') {\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"flipMenu\">\n          <span>Flip</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #flipMenu=\"ngsMenu\">\n          <div class=\"min-w-[150px]\">\n            <button ngs-menu-item (click)=\"flipHorizontal()\">\n              <ngs-icon name=\"fluent:flip-horizontal-24-regular\" class=\"mr-2\"/>\n              <span>Flip horizontally</span>\n            </button>\n            <button ngs-menu-item (click)=\"flipVertical()\">\n              <ngs-icon name=\"fluent:flip-vertical-24-regular\" class=\"mr-2\"/>\n              <span>Flip vertically</span>\n            </button>\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"fitMenu\">\n          <span>Fit to</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #fitMenu=\"ngsMenu\">\n          <div class=\"min-w-[150px]\">\n            <button ngs-menu-item (click)=\"fitToPage()\">\n              <span>Fit to page</span>\n            </button>\n            <button ngs-menu-item (click)=\"fillPage()\">\n              <span>Fill page</span>\n            </button>\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n    }\n\n    <ngs-toolbar-item>\n      <button ngsButton reverse (click)=\"openEffects()\">\n        <span>Effects</span>\n      </button>\n    </ngs-toolbar-item>\n\n    <ngs-toolbar-spacer/>\n\n    <!--  <ngs-divider vertical/>-->\n\n    <ngs-toolbar-item>\n      <button ngsIconButton (click)=\"toggleLock()\">\n        <ngs-icon [name]=\"layer['locked'] ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"/>\n      </button>\n    </ngs-toolbar-item>\n\n  </ngs-toolbar>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ColorSwitcher, selector: "ngs-color-switcher", inputs: ["colors", "selectedColor", "disabled"], outputs: ["colorChange"], exportAs: ["ngsColorSwitcher"] }, { kind: "component", type: Slider, selector: "ngs-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["ngsSlider"] }, { kind: "directive", type: SliderThumb, selector: "input[ngsSliderThumb]", inputs: ["value"], outputs: ["valueChange"], exportAs: ["ngsSliderThumb"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarItem, selector: "ngs-toolbar-item", inputs: ["hidden"], outputs: ["hiddenChange"] }, { kind: "component", type: Popover, selector: "ngs-popover", exportAs: ["ngsPopover"] }, { kind: "directive", type: PopoverContent, selector: "[ngsPopoverContent]" }, { kind: "directive", type: PopoverTriggerForDirective, selector: "[ngsPopoverTriggerFor]", inputs: ["ngsPopoverTriggerFor", "ngsPopoverContext", "trigger", "position", "delay", "origin", "closeOnOriginClick", "closeOnOriginMouseLeave", "hasBackdrop"], outputs: ["opened", "closed"], exportAs: ["ngsPopoverTriggerFor"] }, { 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"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ButtonToggle, selector: "ngs-button-toggle", inputs: ["id", "value", "name", "checked", "disabled"], outputs: ["change"] }, { kind: "component", type: ButtonToggleGroup, selector: "ngs-button-toggle-group", inputs: ["appearance", "disabled", "multiple", "hideSelectionIndicator", "vertical", "value"], outputs: ["valueChange", "change"], exportAs: ["ngsButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Settings, isStandalone: true, selector: "ngs-settings", ngImport: i0, template: "@let layer = selectedLayer();\n\n@if (layer) {\n  <ngs-toolbar\n    class=\"h-14 z-10 bg-surface-container-lowest border-b border-border px-5 absolute top-0 left-0 right-0\">\n    <!-- Color -->\n    @if (showColorPicker()) {\n      <ngs-toolbar-item>\n        <button [ngsPopoverTriggerFor]=\"colorPopover\"\n                position=\"below-center\"\n                class=\"size-7 cursor-pointer hover:ring-2 hover:ring-primary rounded-full border border-border\"\n                ngsRipple\n                [style.backgroundColor]=\"layer['fill'] || '#000000'\">\n        </button>\n        <ngs-popover #colorPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-72\">\n              <div class=\"text-xs font-medium uppercase text-muted-foreground mb-4\">\n                {{ layer.type === 'text' ? 'Text Color' : 'Fill Color' }}\n              </div>\n              <ngs-color-switcher [colors]=\"presetColors()\"\n                                  [selectedColor]=\"layer['fill'] || '#000000'\"\n                                  (colorChange)=\"updateColor($event)\"/>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n      <ngs-divider vertical/>\n    }\n\n    <!-- Opacity -->\n    <ngs-toolbar-item>\n      <button ngsIconButton\n              [ngsPopoverTriggerFor]=\"opacityPopover\"\n              position=\"below-center\">\n        <ngs-icon name=\"fluent:blur-24-regular\"/>\n      </button>\n      <ngs-popover #opacityPopover>\n        <ng-template ngsPopoverContent>\n          <div class=\"p-4 w-60 space-y-3\">\n            <div class=\"flex justify-between items-center\">\n              <label class=\"text-xs font-medium uppercase text-muted-foreground\">Opacity</label>\n              <span class=\"text-xs text-muted-foreground\">{{ (layer['opacity'] ?? 1) * 100 | number:'1.0-0' }}%</span>\n            </div>\n            <ngs-slider [min]=\"0\" [max]=\"1\" [step]=\"0.01\">\n              <input ngsSliderThumb\n                     [value]=\"layer['opacity'] ?? 1\"\n                     (valueChange)=\"updateOpacity($event)\"/>\n            </ngs-slider>\n          </div>\n        </ng-template>\n      </ngs-popover>\n    </ngs-toolbar-item>\n\n    <!-- Font Selection for text layers -->\n    @if (layer.type === 'text') {\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"fontMenu\">\n          <span class=\"truncate max-w-[100px]\">{{ layer['fontFamily'] }}</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #fontMenu=\"ngsMenu\">\n          <div class=\"min-w-[200px]\">\n            @for (font of fonts(); track font) {\n              <button ngs-menu-item\n                      [selected]=\"layer['fontFamily'] === font\"\n                      (click)=\"updateFont(font)\">\n                {{ font }}\n              </button>\n            }\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n\n      <!-- Text Styles -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"boldPopover\"\n                position=\"below-center\"\n                [class.text-primary]=\"layer['fontWeight'] && layer['fontWeight'] !== 'normal' && layer['fontWeight'] !== 400\"\n                title=\"Bold\">\n          <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n        </button>\n        <ngs-popover #boldPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-60 space-y-3\">\n              <div class=\"flex justify-between items-center\">\n                <label class=\"text-xs font-medium uppercase text-muted-foreground\">Font Weight</label>\n                <span class=\"text-xs text-muted-foreground\">{{ getFontWeightName(layer['fontWeight']) }}</span>\n              </div>\n              <ngs-slider [min]=\"300\" [max]=\"900\" [step]=\"100\">\n                <input ngsSliderThumb\n                       [value]=\"layer['fontWeight'] === 'bold' ? 700 : (layer['fontWeight'] === 'normal' ? 400 : (layer['fontWeight'] || 400))\"\n                       (valueChange)=\"updateFontWeight($event)\"/>\n              </ngs-slider>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n\n      <!-- Uppercase -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                (click)=\"toggleUppercase()\"\n                [class.text-primary]=\"layer['textCase'] === 'upper'\"\n                title=\"Uppercase\">\n          <ngs-icon name=\"fluent:text-case-uppercase-24-regular\"/>\n        </button>\n      </ngs-toolbar-item>\n\n      <ngs-toolbar-item>\n        <ngs-button-toggle-group multiple\n                                 hideSelectionIndicator\n                                 [value]=\"getTextStyle()\"\n                                 (valueChange)=\"updateTextStyle($event)\">\n          <ngs-button-toggle value=\"italic\" title=\"Italic\">\n            <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n          </ngs-button-toggle>\n          <ngs-button-toggle value=\"underline\" title=\"Underline\">\n            <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n          </ngs-button-toggle>\n          <ngs-button-toggle value=\"line-through\" title=\"Strikethrough\">\n            <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n          </ngs-button-toggle>\n        </ngs-button-toggle-group>\n      </ngs-toolbar-item>\n\n      <!-- Text Alignment -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"alignPopover\"\n                position=\"below-center\"\n                title=\"Alignment\">\n          <ngs-icon [name]=\"'fluent:text-align-' + (layer['align'] || 'left') + '-24-regular'\"/>\n        </button>\n        <ngs-popover #alignPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-2 flex gap-1\">\n              <button ngsIconButton (click)=\"updateTextAlign('left')\" [class.text-primary]=\"layer['align'] === 'left'\">\n                <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('center')\" [class.text-primary]=\"layer['align'] === 'center'\">\n                <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('right')\" [class.text-primary]=\"layer['align'] === 'right'\">\n                <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('justify')\" [class.text-primary]=\"layer['align'] === 'justify'\">\n                <ngs-icon name=\"fluent:text-align-justify-24-regular\"/>\n              </button>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n\n      <!-- Spacing (Line Height & Letter Spacing) -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"spacingPopover\"\n                position=\"below-center\"\n                title=\"Spacing\">\n          <ngs-icon name=\"fluent:text-line-spacing-24-regular\"/>\n        </button>\n        <ngs-popover #spacingPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-60 space-y-6\">\n              <div class=\"space-y-3\">\n                <div class=\"flex justify-between items-center\">\n                  <label class=\"text-xs font-medium uppercase text-muted-foreground\">Line Height</label>\n                  <span class=\"text-xs text-muted-foreground\">{{ layer['lineHeight'] || 1.2 | number:'1.1-1' }}</span>\n                </div>\n                <ngs-slider [min]=\"0.5\" [max]=\"3\" [step]=\"0.1\">\n                  <input ngsSliderThumb\n                         [value]=\"layer['lineHeight'] || 1.2\"\n                         (valueChange)=\"updateLineHeight($event)\"/>\n                </ngs-slider>\n              </div>\n              <div class=\"space-y-3\">\n                <div class=\"flex justify-between items-center\">\n                  <label class=\"text-xs font-medium uppercase text-muted-foreground\">Letter Spacing</label>\n                  <span class=\"text-xs text-muted-foreground\">{{ layer['letterSpacing'] || 0 }}</span>\n                </div>\n                <ngs-slider [min]=\"-5\" [max]=\"50\" [step]=\"1\">\n                  <input ngsSliderThumb\n                         [value]=\"layer['letterSpacing'] || 0\"\n                         (valueChange)=\"updateLetterSpacing($event)\"/>\n                </ngs-slider>\n              </div>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n    }\n\n    @if (layer.type === 'image') {\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"flipMenu\">\n          <span>Flip</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #flipMenu=\"ngsMenu\">\n          <div class=\"min-w-[150px]\">\n            <button ngs-menu-item (click)=\"flipHorizontal()\">\n              <ngs-icon name=\"fluent:flip-horizontal-24-regular\" class=\"mr-2\"/>\n              <span>Flip horizontally</span>\n            </button>\n            <button ngs-menu-item (click)=\"flipVertical()\">\n              <ngs-icon name=\"fluent:flip-vertical-24-regular\" class=\"mr-2\"/>\n              <span>Flip vertically</span>\n            </button>\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"fitMenu\">\n          <span>Fit to</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #fitMenu=\"ngsMenu\">\n          <div class=\"min-w-[150px]\">\n            <button ngs-menu-item (click)=\"fitToPage()\">\n              <span>Fit to page</span>\n            </button>\n            <button ngs-menu-item (click)=\"fillPage()\">\n              <span>Fill page</span>\n            </button>\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n    }\n\n    <ngs-toolbar-item>\n      <button ngsButton reverse (click)=\"openEffects()\">\n        <span>Effects</span>\n      </button>\n    </ngs-toolbar-item>\n\n    <ngs-toolbar-spacer/>\n\n    <!--  <ngs-divider vertical/>-->\n\n    <ngs-toolbar-item>\n      <button ngsIconButton (click)=\"toggleLock()\">\n        <ngs-icon [name]=\"layer['locked'] ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"/>\n      </button>\n    </ngs-toolbar-item>\n\n  </ngs-toolbar>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ColorSwitcher, selector: "ngs-color-switcher", inputs: ["colors", "selectedColor", "disabled"], outputs: ["colorChange"], exportAs: ["ngsColorSwitcher"] }, { kind: "component", type: Slider, selector: "ngs-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["ngsSlider"] }, { kind: "directive", type: SliderThumb, selector: "input[ngsSliderThumb]", inputs: ["value"], outputs: ["valueChange"], exportAs: ["ngsSliderThumb"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarItem, selector: "ngs-toolbar-item", inputs: ["hidden"], outputs: ["hiddenChange"] }, { kind: "component", type: Popover, selector: "ngs-popover", exportAs: ["ngsPopover"] }, { kind: "directive", type: PopoverContent, selector: "[ngsPopoverContent]" }, { kind: "directive", type: PopoverTriggerForDirective, selector: "[ngsPopoverTriggerFor]", inputs: ["ngsPopoverTriggerFor", "ngsPopoverContext", "trigger", "position", "delay", "origin", "closeOnOriginClick", "closeOnOriginMouseLeave", "hasBackdrop"], outputs: ["opened", "closed"], exportAs: ["ngsPopoverTriggerFor"] }, { 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"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ButtonToggle, selector: "ngs-button-toggle", inputs: ["id", "value", "name", "checked", "disabled", "onlyIcon"], outputs: ["change"], exportAs: ["ngsButtonToggle"] }, { kind: "component", type: ButtonToggleGroup, selector: "ngs-button-toggle-group", inputs: ["appearance", "disabled", "multiple", "hideSelectionIndicator", "vertical", "value", "onlyIcon"], outputs: ["valueChange", "change"], exportAs: ["ngsButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Settings, decorators: [{
             type: Component,