@ngstarter-ui/components 21.0.11 → 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 (10) hide show
  1. package/ai/component-registry.json +118 -2
  2. package/fesm2022/ngstarter-ui-components-button-toggle.mjs +19 -16
  3. package/fesm2022/ngstarter-ui-components-button-toggle.mjs.map +1 -1
  4. package/fesm2022/ngstarter-ui-components-digit-roller.mjs +748 -0
  5. package/fesm2022/ngstarter-ui-components-digit-roller.mjs.map +1 -0
  6. package/fesm2022/ngstarter-ui-components-image-designer.mjs +1 -1
  7. package/fesm2022/ngstarter-ui-components-image-designer.mjs.map +1 -1
  8. package/package.json +5 -1
  9. package/types/ngstarter-ui-components-button-toggle.d.ts +23 -22
  10. package/types/ngstarter-ui-components-digit-roller.d.ts +143 -0
package/ai/component-registry.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "generatedBy": "scripts/generate-ai-metadata.mjs",
4
4
  "package": "@ngstarter-ui/components",
5
5
  "description": "AI-readable registry for NgStarter UI Angular secondary entry points.",
6
- "componentCount": 121,
6
+ "componentCount": 122,
7
7
  "conventions": {
8
8
  "importPattern": "@ngstarter-ui/components/<component>",
9
9
  "selectorPrefix": "ngs",
@@ -93,10 +93,11 @@
93
93
  "Do not make ordinary table rows, labels, descriptions, sidebar items, or status text bold to imitate a screenshot."
94
94
  ],
95
95
  "styling": {
96
- "template": "Use TailwindCSS utility classes for layout, responsive behavior, sizing, spacing, flex, grid, alignment, and routine margins/padding such as mt-10 and p-6 instead of custom margin-top: 2.5rem and padding: 1.5rem in SCSS.",
96
+ "template": "Treat TailwindCSS utility classes in templates as the primary styling surface for layout, responsive behavior, sizing, spacing, flex, grid, alignment, and routine margins/padding such as mt-10 and p-6 instead of custom margin-top: 2.5rem and padding: 1.5rem in SCSS.",
97
97
  "localScss": [
98
98
  "Start local SCSS files that use Tailwind tokens with @reference 'tailwindcss';",
99
99
  "Use --spacing(N) for spacing values in local SCSS.",
100
+ "Use local SCSS for CSS custom property/token overrides, especially --ngs-* component variables, and necessary component selector overrides. Do not move routine layout, spacing, sizing, flex/grid, or alignment styling from templates into SCSS.",
100
101
  "Override NgStarter components through component or directive selectors such as ngs-card, ngs-navigation, ngs-form-field, table[ngs-table], button[ngsButton], and button[ngsIconButton]."
101
102
  ],
102
103
  "globalStyles": "Use CSS custom properties and theme tokens, especially --ngs-* variables, for global visual customization."
@@ -1001,6 +1002,7 @@
1001
1002
  "useWhen": "Use for mode switching, view density, filters, or mutually exclusive short choices.",
1002
1003
  "exampleTopics": [
1003
1004
  "Basic Button Toggle",
1005
+ "Icon Only Button Toggle",
1004
1006
  "Selection Mode",
1005
1007
  "Button toggle selection mode"
1006
1008
  ],
@@ -1017,6 +1019,12 @@
1017
1019
  "title": "Button toggle selection mode",
1018
1020
  "file": "projects/docs/src/app/forms/button-toggle/_examples/button-toggle-selection-mode-example/button-toggle-selection-mode-example.html",
1019
1021
  "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>"
1022
+ },
1023
+ {
1024
+ "name": "icon-only-button-toggle-example",
1025
+ "title": "Icon only button toggle",
1026
+ "file": "projects/docs/src/app/forms/button-toggle/_examples/icon-only-button-toggle-example/icon-only-button-toggle-example.html",
1027
+ "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>"
1020
1028
  }
1021
1029
  ],
1022
1030
  "previewAsset": "projects/components/button-toggle/preview.svg",
@@ -1037,6 +1045,7 @@
1037
1045
  "id",
1038
1046
  "multiple",
1039
1047
  "name",
1048
+ "onlyIcon",
1040
1049
  "value",
1041
1050
  "vertical"
1042
1051
  ],
@@ -1046,6 +1055,10 @@
1046
1055
  "cssTokens": [
1047
1056
  "--ngs-button-height",
1048
1057
  "--ngs-button-radius",
1058
+ "--ngs-button-toggle-button-font-size",
1059
+ "--ngs-button-toggle-button-font-weight",
1060
+ "--ngs-button-toggle-button-only-icon-padding",
1061
+ "--ngs-button-toggle-button-padding",
1049
1062
  "--ngs-button-toggle-checked-bg-color",
1050
1063
  "--ngs-button-toggle-checked-text-color",
1051
1064
  "--ngs-button-toggle-group-bg",
@@ -3426,6 +3439,109 @@
3426
3439
  ],
3427
3440
  "example": "inject(Dialog).open(MyDialogComponent, { data })"
3428
3441
  },
3442
+ {
3443
+ "name": "digit-roller",
3444
+ "title": "Digit Roller",
3445
+ "overviewName": "Digit Roller",
3446
+ "category": "components",
3447
+ "package": "@ngstarter-ui/components",
3448
+ "importPath": "@ngstarter-ui/components/digit-roller",
3449
+ "publicApi": "projects/components/digit-roller/public-api.ts",
3450
+ "sourceRoot": "projects/components/digit-roller/src",
3451
+ "docsPath": "/components/digit-roller",
3452
+ "docsOverviewSource": "projects/docs/src/app/components/digit-roller/overview/overview.html",
3453
+ "purpose": "The NgStarter Angular Digit Roller component animates individual digits in formatted numbers with a slot-machine style reel effect.",
3454
+ "useWhen": "Choose Digit Roller when the workflow matches examples such as Number Sizes, Social Actions, Progress Bar, Gauge, Digit roller dashboard.",
3455
+ "exampleTopics": [
3456
+ "Number Sizes",
3457
+ "Social Actions",
3458
+ "Progress Bar",
3459
+ "Gauge",
3460
+ "Digit roller dashboard",
3461
+ "Digit roller social actions",
3462
+ "Digit roller progress bar",
3463
+ "Digit roller gauge"
3464
+ ],
3465
+ "minimalExample": "<div class=\"grid gap-4\" ngsDigitRollerGroup>\n @for (example of examples; track example.label) {\n <div class=\"grid gap-4 rounded-lg border border-neutral-200 bg-white p-5 md:grid-cols-[160px_minmax(0,1fr)] md:items-center\">\n <div>\n <p class=\"font-medium text-neutral-900\">{{ example.label }}</p>\n <p class=\"mt-1 text-sm leading-6 text-neutral-500\">{{ example.description }}</p>\n </div>\n <div class=\"flex min-w-0 flex-wrap items-baseline gap-2\">\n <ngs-digit-roller\n [class]=\"example.className\"\n [value]=\"example.value()\"\n [format]=\"example.format\"\n [prefix]=\"example.prefix ?? ''\"\n [continuous]=\"example.continuous ?? false\"\n [duration]=\"example.duration ?? 900\"\n [stagger]=\"example.stagger ?? 0\"\n spinEasing=\"spring\"\n />\n @if (example.unit) {\n <span class=\"text-sm text-neutral-500\">{{ example.unit }}</span>\n }\n </div>\n </div>\n }\n</div>",
3466
+ "exampleFiles": [
3467
+ {
3468
+ "name": "digit-roller-dashboard-example",
3469
+ "title": "Digit roller dashboard",
3470
+ "file": "projects/docs/src/app/components/digit-roller/_examples/digit-roller-dashboard-example/digit-roller-dashboard-example.html",
3471
+ "source": "<div class=\"grid gap-4\" ngsDigitRollerGroup>\n @for (example of examples; track example.label) {\n <div class=\"grid gap-4 rounded-lg border border-neutral-200 bg-white p-5 md:grid-cols-[160px_minmax(0,1fr)] md:items-center\">\n <div>\n <p class=\"font-medium text-neutral-900\">{{ example.label }}</p>\n <p class=\"mt-1 text-sm leading-6 text-neutral-500\">{{ example.description }}</p>\n </div>\n <div class=\"flex min-w-0 flex-wrap items-baseline gap-2\">\n <ngs-digit-roller\n [class]=\"example.className\"\n [value]=\"example.value()\"\n [format]=\"example.format\"\n [prefix]=\"example.prefix ?? ''\"\n [continuous]=\"example.continuous ?? false\"\n [duration]=\"example.duration ?? 900\"\n [stagger]=\"example.stagger ?? 0\"\n spinEasing=\"spring\"\n />\n @if (example.unit) {\n <span class=\"text-sm text-neutral-500\">{{ example.unit }}</span>\n }\n </div>\n </div>\n }\n</div>"
3472
+ },
3473
+ {
3474
+ "name": "digit-roller-gauge-example",
3475
+ "title": "Digit roller gauge",
3476
+ "file": "projects/docs/src/app/components/digit-roller/_examples/digit-roller-gauge-example/digit-roller-gauge-example.html",
3477
+ "source": "<div class=\"grid gap-6 rounded-lg border border-neutral-200 bg-white p-6 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center\" ngsDigitRollerGroup>\n <ngs-gauge class=\"size-28\" [value]=\"score()\" [radius]=\"50\" [strokeWidth]=\"8\">\n <ngs-gauge-value>\n <ngs-digit-roller\n class=\"text-xl font-bold leading-none text-primary\"\n [value]=\"score()\"\n [format]=\"integerFormat\"\n suffix=\"%\"\n [continuous]=\"true\"\n [stagger]=\"12\"\n />\n </ngs-gauge-value>\n </ngs-gauge>\n <div>\n <p class=\"text-sm font-medium text-neutral-900\">Health score</p>\n <p class=\"mt-1 text-sm leading-6 text-neutral-500\">\n The same value drives the gauge arc and the animated number in the center.\n </p>\n </div>\n</div>"
3478
+ },
3479
+ {
3480
+ "name": "digit-roller-progress-bar-example",
3481
+ "title": "Digit roller progress bar",
3482
+ "file": "projects/docs/src/app/components/digit-roller/_examples/digit-roller-progress-bar-example/digit-roller-progress-bar-example.html",
3483
+ "source": "<div class=\"grid gap-4 rounded-lg border border-neutral-200 bg-white p-5\" ngsDigitRollerGroup>\n <div class=\"flex items-end justify-between gap-4\">\n <div>\n <p class=\"text-sm font-medium text-neutral-900\">Deployment progress</p>\n <p class=\"mt-1 flex flex-wrap items-baseline gap-1 text-sm text-neutral-500\">\n <ngs-digit-roller [value]=\"remaining()\" [format]=\"integerFormat\"/>\n <span>steps remaining</span>\n </p>\n </div>\n <ngs-digit-roller\n class=\"text-2xl font-bold leading-none text-primary\"\n [value]=\"progress() / 100\"\n [format]=\"percentFormat\"\n [continuous]=\"true\"\n [stagger]=\"14\"\n />\n </div>\n <ngs-progress-bar [value]=\"progress()\"/>\n</div>"
3484
+ }
3485
+ ],
3486
+ "previewAsset": "projects/components/digit-roller/preview.svg",
3487
+ "selectors": [
3488
+ "[ngsDigitRollerGroup]",
3489
+ "ngs-digit-roller"
3490
+ ],
3491
+ "exportedSymbols": [
3492
+ "canAnimateDigitRoller",
3493
+ "DIGIT_ROLLER_EMPTY_FORMATTED",
3494
+ "DIGIT_ROLLER_GROUP",
3495
+ "DigitRoller",
3496
+ "DigitRollerCapabilityOptions",
3497
+ "DigitRollerDigitConfig",
3498
+ "DigitRollerDigits",
3499
+ "DigitRollerEasing",
3500
+ "DigitRollerFormattedNumber",
3501
+ "DigitRollerGlyph",
3502
+ "DigitRollerGroupCoordinator",
3503
+ "DigitRollerGroupDirective",
3504
+ "DigitRollerGroupMember",
3505
+ "DigitRollerNumberPart",
3506
+ "DigitRollerTiming",
3507
+ "DigitRollerTrend",
3508
+ "formatDigitRollerValue",
3509
+ "getDigitRollerGlyphs",
3510
+ "resetDigitRollerCapabilityCache"
3511
+ ],
3512
+ "inputs": [
3513
+ "animated",
3514
+ "colorOnDecrease",
3515
+ "colorOnIncrease",
3516
+ "continuous",
3517
+ "digits",
3518
+ "duration",
3519
+ "flipEasing",
3520
+ "format",
3521
+ "locales",
3522
+ "opacityDuration",
3523
+ "opacityTiming",
3524
+ "prefix",
3525
+ "respectMotionPreference",
3526
+ "spinEasing",
3527
+ "spinTiming",
3528
+ "stagger",
3529
+ "suffix",
3530
+ "transformTiming",
3531
+ "trend",
3532
+ "value"
3533
+ ],
3534
+ "outputs": [
3535
+ "animationsFinish",
3536
+ "animationsStart"
3537
+ ],
3538
+ "cssTokens": [
3539
+ "--ngs-digit-roller-mask-height",
3540
+ "--ngs-digit-roller-mask-width",
3541
+ "--ngs-digit-roller-min-digit-width"
3542
+ ],
3543
+ "example": null
3544
+ },
3429
3545
  {
3430
3546
  "name": "divider",
3431
3547
  "title": "Divider",
package/fesm2022/ngstarter-ui-components-button-toggle.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { contentChildren, forwardRef, input, booleanAttribute, model, output, effect, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef } from '@angular/core';
3
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
4
3
  import { Icon } from '@ngstarter-ui/components/icon';
4
+ import { NG_VALUE_ACCESSOR } from '@angular/forms';
5
+ import { Ripple } from '@ngstarter-ui/components/core';
5
6
 
6
- let nextId = 0;
7
7
  class ButtonToggleGroup {
8
8
  _buttonToggles = contentChildren(forwardRef(() => ButtonToggle), { ...(ngDevMode ? { debugName: "_buttonToggles" } : /* istanbul ignore next */ {}), descendants: true });
9
9
  appearance = input('standard', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
@@ -12,6 +12,7 @@ class ButtonToggleGroup {
12
12
  hideSelectionIndicator = input(false, { ...(ngDevMode ? { debugName: "hideSelectionIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
13
13
  vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
14
14
  value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
15
+ onlyIcon = input(false, { ...(ngDevMode ? { debugName: "onlyIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
15
16
  change = output();
16
17
  _onChange = () => { };
17
18
  _onTouched = () => { };
@@ -82,13 +83,13 @@ class ButtonToggleGroup {
82
83
  this._emitChangeEvent(newValue);
83
84
  }
84
85
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
85
- 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: [
86
+ 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: [
86
87
  {
87
88
  provide: NG_VALUE_ACCESSOR,
88
89
  useExisting: forwardRef(() => ButtonToggleGroup),
89
90
  multi: true
90
91
  }
91
- ], 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 });
92
+ ], 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 });
92
93
  }
93
94
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggleGroup, decorators: [{
94
95
  type: Component,
@@ -102,16 +103,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
102
103
  'class': 'ngs-button-toggle-group',
103
104
  '[class.ngs-button-toggle-group-vertical]': 'vertical()',
104
105
  '[attr.role]': 'multiple() ? "group" : "radiogroup"',
106
+ '[class.only-icon]': 'onlyIcon()',
105
107
  '[attr.aria-disabled]': 'disabled()',
106
- }, 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"] }]
107
- }], 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"] }] } });
108
+ }, 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"] }]
109
+ }], 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"] }] } });
110
+
111
+ let nextId = 0;
108
112
  class ButtonToggle {
109
- _id = `ngs-button-toggle-${nextId++}`;
110
113
  id = input(`ngs-button-toggle-${nextId++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
111
114
  value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
112
115
  name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
113
116
  checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
114
117
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
118
+ onlyIcon = input(false, { ...(ngDevMode ? { debugName: "onlyIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
115
119
  _internalChecked = false;
116
120
  get isChecked() {
117
121
  return this.checked() || this._internalChecked;
@@ -149,23 +153,22 @@ class ButtonToggle {
149
153
  this.change.emit({ source: this, value: this.value() });
150
154
  }
151
155
  }
152
- _markForCheck() {
153
- this._changeDetectorRef.markForCheck();
154
- }
155
156
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
156
- 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 });
157
+ 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 });
157
158
  }
158
159
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggle, decorators: [{
159
160
  type: Component,
160
- args: [{ selector: 'ngs-button-toggle', host: {
161
+ args: [{ selector: 'ngs-button-toggle', exportAs: 'ngsButtonToggle', imports: [
162
+ Icon,
163
+ Ripple
164
+ ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
161
165
  '[class.ngs-button-toggle-checked]': 'isChecked',
162
166
  '[class.ngs-button-toggle-disabled]': 'isDisabled',
167
+ '[class.only-icon]': 'onlyIcon()',
163
168
  '[attr.id]': 'id()',
164
169
  'class': 'ngs-button-toggle',
165
- }, standalone: true, imports: [
166
- Icon
167
- ], 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"] }]
168
- }], 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"] }] } });
170
+ }, 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"] }]
171
+ }], 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"] }] } });
169
172
 
170
173
  /**
171
174
  * Generated bundle index. Do not edit.
package/fesm2022/ngstarter-ui-components-button-toggle.mjs.map CHANGED
@@ -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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"}