@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-segmented.mjs

@@ -0,0 +1,218 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, Component, ElementRef, Renderer2, ChangeDetectorRef, DestroyRef, contentChildren, forwardRef, output, effect, Directive } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SelectionModel } from '@angular/cdk/collections';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i1 from '@ngstarter-ui/components/core';
+import { Ripple } from '@ngstarter-ui/components/core';
+
+const SEGMENTED = new InjectionToken('SEGMENTED');
+
+class SegmentedButton {
+    _segmented = inject(SEGMENTED, { skipSelf: true });
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    get _isSelected() {
+        return this._segmented.api.isSelected(this.value());
+    }
+    get api() {
+        return {
+            isSelected: () => this._isSelected
+        };
+    }
+    _handleClick() {
+        this._segmented.api.select(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SegmentedButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: SegmentedButton, isStandalone: true, selector: "ngs-segmented-button,[ngs-segmented-button]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_handleClick()" }, properties: { "class.icon-only": "iconOnly()", "class.is-selected": "_isSelected", "class.is-disabled": "disabled() || null" }, classAttribute: "ngs-segmented-button" }, exportAs: ["ngsSegmentedButton"], hostDirectives: [{ directive: i1.Ripple }], ngImport: i0, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsSegmentedIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n</div>\n", styles: [":host{display:flex;align-items:center;cursor:pointer;justify-content:center;color:var(--ngs-segmented-button-color);font-size:var(--ngs-segmented-button-font-size);min-width:var(--ngs-segmented-button-min-width);border-radius:var(--ngs-segmented-button-radius);gap:var(--ngs-segmented-button-gap);flex:none;padding:var(--ngs-segmented-button-padding);height:var(--ngs-segmented-button-height);position:relative;z-index:1}:host.icon-only{--ngs-segmented-button-min-width: 0;--ngs-segmented-button-icon-offset-margin: 0;width:var(--ngs-segmented-button-height);gap:0;padding:0}:host.icon-only .content{display:none}:host .icon{line-height:0;display:flex;align-items:center;justify-content:center;margin-inline-start:var(--ngs-segmented-button-icon-offset-margin)}:host .icon:empty{display:none}:host:hover{background:var(--ngs-segmented-button-hover-bg);color:var(--ngs-segmented-button-hover-color);text-decoration-line:none}:host.is-selected{pointer-events:none;color:var(--ngs-segmented-button-selected-color)}:host:disabled,:host.is-disabled{pointer-events:none;opacity:65%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SegmentedButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-segmented-button,[ngs-segmented-button]', exportAs: 'ngsSegmentedButton', hostDirectives: [
+                        Ripple
+                    ], host: {
+                        'class': 'ngs-segmented-button',
+                        '[class.icon-only]': 'iconOnly()',
+                        '[class.is-selected]': '_isSelected',
+                        '[class.is-disabled]': 'disabled() || null',
+                        '(click)': '_handleClick()',
+                    }, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsSegmentedIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n</div>\n", styles: [":host{display:flex;align-items:center;cursor:pointer;justify-content:center;color:var(--ngs-segmented-button-color);font-size:var(--ngs-segmented-button-font-size);min-width:var(--ngs-segmented-button-min-width);border-radius:var(--ngs-segmented-button-radius);gap:var(--ngs-segmented-button-gap);flex:none;padding:var(--ngs-segmented-button-padding);height:var(--ngs-segmented-button-height);position:relative;z-index:1}:host.icon-only{--ngs-segmented-button-min-width: 0;--ngs-segmented-button-icon-offset-margin: 0;width:var(--ngs-segmented-button-height);gap:0;padding:0}:host.icon-only .content{display:none}:host .icon{line-height:0;display:flex;align-items:center;justify-content:center;margin-inline-start:var(--ngs-segmented-button-icon-offset-margin)}:host .icon:empty{display:none}:host:hover{background:var(--ngs-segmented-button-hover-bg);color:var(--ngs-segmented-button-hover-color);text-decoration-line:none}:host.is-selected{pointer-events:none;color:var(--ngs-segmented-button-selected-color)}:host:disabled,:host.is-disabled{pointer-events:none;opacity:65%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
+
+class Segmented {
+    _elementRef = inject(ElementRef);
+    _renderer = inject(Renderer2);
+    _cdr = inject(ChangeDetectorRef);
+    _destroyRef = inject(DestroyRef);
+    _isDestroyed = false;
+    _disabled = false;
+    _buttons = contentChildren(forwardRef(() => SegmentedButton), { ...(ngDevMode ? { debugName: "_buttons" } : /* istanbul ignore next */ {}), descendants: true });
+    _buttonElements = contentChildren(forwardRef(() => SegmentedButton), { ...(ngDevMode ? { debugName: "_buttonElements" } : /* istanbul ignore next */ {}), read: ElementRef, descendants: true });
+    _thumbWidth = 0;
+    _thumbLeft = 0;
+    _thumbOpacity = 0;
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    _selectedValue = new SelectionModel(false, []);
+    _onChange = () => { };
+    _onTouched = () => { };
+    get api() {
+        return {
+            isSelected: (value) => this._selectedValue.isSelected(value),
+            select: (value) => this._select(value)
+        };
+    }
+    constructor() {
+        this._destroyRef.onDestroy(() => {
+            this._isDestroyed = true;
+        });
+        effect(() => {
+            const value = this.value();
+            if (value !== undefined) {
+                if (value !== null) {
+                    this._selectedValue.setSelection(value);
+                }
+                else {
+                    this._selectedValue.clear();
+                }
+                this._updateThumb();
+            }
+        });
+        toObservable(this._buttons).pipe(takeUntilDestroyed()).subscribe(() => {
+            this._updateThumb();
+        });
+    }
+    ngOnInit() {
+        this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-segmented-size', this.size());
+    }
+    ngAfterContentInit() {
+        this._updateThumb();
+    }
+    ngOnChanges(changes) {
+        if (changes['size']) {
+            this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-segmented-size', this.size());
+            this._updateThumb();
+        }
+        if (changes['value'] && changes['value'].currentValue !== undefined) {
+            const value = changes['value'].currentValue;
+            if (value !== null) {
+                this._selectedValue.setSelection(value);
+            }
+            else {
+                this._selectedValue.clear();
+            }
+            this._updateThumb();
+        }
+    }
+    _onResize() {
+        this._updateThumb();
+    }
+    _updateThumb() {
+        setTimeout(() => {
+            const buttons = this._buttons();
+            if (!buttons) {
+                return;
+            }
+            const index = buttons.findIndex(btn => btn._isSelected);
+            const element = this._buttonElements()[index]?.nativeElement;
+            if (element) {
+                this._thumbWidth = element.offsetWidth;
+                this._thumbLeft = element.offsetLeft;
+                this._thumbOpacity = 1;
+            }
+            else {
+                this._thumbWidth = 0;
+                this._thumbOpacity = 0;
+            }
+            if (this._isDestroyed) {
+                return;
+            }
+            this._cdr.detectChanges();
+        });
+    }
+    writeValue(value) {
+        if (value !== undefined && value !== null) {
+            this._selectedValue.setSelection(value);
+        }
+        else {
+            this._selectedValue.clear();
+        }
+        this._updateThumb();
+        this._cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled = coerceBooleanProperty(isDisabled);
+    }
+    _select(value) {
+        this._selectedValue.setSelection(value);
+        this.valueChange.emit(value);
+        this._onChange(value);
+        this._onTouched(value);
+        this._updateThumb();
+    }
+    isSelected(value) {
+        return this._selectedValue.isSelected(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Segmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Segmented, isStandalone: true, selector: "ngs-segmented", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "window:resize": "_onResize()" }, properties: { "class.is-disabled": "disabled() || _disabled || null" }, classAttribute: "ngs-segmented" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => Segmented),
+                multi: true
+            },
+            {
+                provide: SEGMENTED,
+                useExisting: forwardRef(() => Segmented)
+            }
+        ], queries: [{ propertyName: "_buttons", predicate: i0.forwardRef(() => SegmentedButton), descendants: true, isSignal: true }, { propertyName: "_buttonElements", predicate: i0.forwardRef(() => SegmentedButton), descendants: true, read: ElementRef, isSignal: true }], exportAs: ["ngsSegmented"], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngs-segmented-thumb\"\n     [style.width.px]=\"_thumbWidth\"\n     [style.opacity]=\"_thumbOpacity\"\n     [style.transform]=\"'translateX(' + _thumbLeft + 'px)'\"></div>\n<ng-content select=\"ngs-segmented-button,[ngs-segmented-button]\"/>\n", styles: [":host{--ngs-segmented-button-height: calc(var(--spacing, .25rem) * 8);--ngs-segmented-bg: var(--color-surface-container);--ngs-segmented-button-hover-bg: var(--color-surface-container-highest);--ngs-segmented-button-color: var(--color-on-surface-variant);--ngs-segmented-button-hover-color: var(--color-on-surface);--ngs-segmented-button-selected-color: var(--color-primary);--ngs-segmented-button-selected-bg: var(--color-surface);--ngs-segmented-button-selected-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--ngs-segmented-padding: calc(var(--spacing, .25rem) * 1);--ngs-segmented-radius: var(--btn-radius);--ngs-segmented-button-radius: calc(var(--btn-radius) - calc(var(--spacing, .25rem) * .5));--ngs-segmented-button-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-segmented-button-min-width: calc(var(--spacing, .25rem) * 12);--ngs-segmented-button-font-size: .875rem;--ngs-segmented-gap: calc(var(--spacing, .25rem) * 1);--ngs-segmented-button-gap: calc(var(--spacing, .25rem) * 1);--ngs-segmented-button-icon-offset-margin: -6px;--icon-size: calc(var(--spacing, .25rem) * 6)}:host[ngs-segmented-size=sm]{--ngs-segmented-button-height: calc(var(--spacing, .25rem) * 6);--ngs-segmented-button-font-size: .75rem;--ngs-segmented-button-padding: 0 calc(var(--spacing, .25rem) * 2);--ngs-segmented-button-gap: calc(var(--spacing, .25rem) * .5);--icon-size: calc(var(--spacing, .25rem) * 5)}:host{display:flex;align-items:center;-webkit-user-select:none;user-select:none;width:max-content;background:var(--ngs-segmented-bg);padding:var(--ngs-segmented-padding);border-radius:var(--ngs-segmented-radius);gap:var(--ngs-segmented-gap);position:relative}:host .ngs-segmented-thumb{position:absolute;top:var(--ngs-segmented-padding);bottom:var(--ngs-segmented-padding);left:0;background:var(--ngs-segmented-button-selected-bg);border-radius:var(--ngs-segmented-button-radius);box-shadow:var(--ngs-segmented-button-selected-shadow);transition:transform .2s cubic-bezier(.4,0,.2,1),width .2s cubic-bezier(.4,0,.2,1),opacity .2s;pointer-events:none;z-index:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Segmented, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-segmented', exportAs: 'ngsSegmented', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => Segmented),
+                            multi: true
+                        },
+                        {
+                            provide: SEGMENTED,
+                            useExisting: forwardRef(() => Segmented)
+                        }
+                    ], host: {
+                        'class': 'ngs-segmented',
+                        '[class.is-disabled]': 'disabled() || _disabled || null',
+                        '(window:resize)': '_onResize()',
+                    }, template: "<div class=\"ngs-segmented-thumb\"\n     [style.width.px]=\"_thumbWidth\"\n     [style.opacity]=\"_thumbOpacity\"\n     [style.transform]=\"'translateX(' + _thumbLeft + 'px)'\"></div>\n<ng-content select=\"ngs-segmented-button,[ngs-segmented-button]\"/>\n", styles: [":host{--ngs-segmented-button-height: calc(var(--spacing, .25rem) * 8);--ngs-segmented-bg: var(--color-surface-container);--ngs-segmented-button-hover-bg: var(--color-surface-container-highest);--ngs-segmented-button-color: var(--color-on-surface-variant);--ngs-segmented-button-hover-color: var(--color-on-surface);--ngs-segmented-button-selected-color: var(--color-primary);--ngs-segmented-button-selected-bg: var(--color-surface);--ngs-segmented-button-selected-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--ngs-segmented-padding: calc(var(--spacing, .25rem) * 1);--ngs-segmented-radius: var(--btn-radius);--ngs-segmented-button-radius: calc(var(--btn-radius) - calc(var(--spacing, .25rem) * .5));--ngs-segmented-button-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-segmented-button-min-width: calc(var(--spacing, .25rem) * 12);--ngs-segmented-button-font-size: .875rem;--ngs-segmented-gap: calc(var(--spacing, .25rem) * 1);--ngs-segmented-button-gap: calc(var(--spacing, .25rem) * 1);--ngs-segmented-button-icon-offset-margin: -6px;--icon-size: calc(var(--spacing, .25rem) * 6)}:host[ngs-segmented-size=sm]{--ngs-segmented-button-height: calc(var(--spacing, .25rem) * 6);--ngs-segmented-button-font-size: .75rem;--ngs-segmented-button-padding: 0 calc(var(--spacing, .25rem) * 2);--ngs-segmented-button-gap: calc(var(--spacing, .25rem) * .5);--icon-size: calc(var(--spacing, .25rem) * 5)}:host{display:flex;align-items:center;-webkit-user-select:none;user-select:none;width:max-content;background:var(--ngs-segmented-bg);padding:var(--ngs-segmented-padding);border-radius:var(--ngs-segmented-radius);gap:var(--ngs-segmented-gap);position:relative}:host .ngs-segmented-thumb{position:absolute;top:var(--ngs-segmented-padding);bottom:var(--ngs-segmented-padding);left:0;background:var(--ngs-segmented-button-selected-bg);border-radius:var(--ngs-segmented-button-radius);box-shadow:var(--ngs-segmented-button-selected-shadow);transition:transform .2s cubic-bezier(.4,0,.2,1),width .2s cubic-bezier(.4,0,.2,1),opacity .2s;pointer-events:none;z-index:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _buttons: [{ type: i0.ContentChildren, args: [forwardRef(() => SegmentedButton), { ...{ descendants: true }, isSignal: true }] }], _buttonElements: [{ type: i0.ContentChildren, args: [forwardRef(() => SegmentedButton), { ...{ read: ElementRef, descendants: true }, isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class SegmentedIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SegmentedIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: SegmentedIconDirective, isStandalone: true, selector: "[ngsSegmentedIcon]", host: { classAttribute: "ngs-segmented-icon" }, exportAs: ["ngsSegmentedIcon"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SegmentedIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsSegmentedIcon]',
+                    exportAs: 'ngsSegmentedIcon',
+                    host: {
+                        'class': 'ngs-segmented-icon'
+                    }
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Segmented, SegmentedButton, SegmentedIconDirective };
+//# sourceMappingURL=ngstarter-ui-components-segmented.mjs.map

package/fesm2022/ngstarter-ui-components-segmented.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-segmented.mjs","sources":["../../../projects/components/segmented/src/types.ts","../../../projects/components/segmented/src/segmented-button/segmented-button.ts","../../../projects/components/segmented/src/segmented-button/segmented-button.html","../../../projects/components/segmented/src/segmented/segmented.ts","../../../projects/components/segmented/src/segmented/segmented.html","../../../projects/components/segmented/src/segmented-icon.directive.ts","../../../projects/components/segmented/ngstarter-ui-components-segmented.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const SEGMENTED = new InjectionToken('SEGMENTED');\nexport type SegmentedTriggerSize = 'sm' | 'default' | string;\n","import {\n  booleanAttribute,\n  Component,\n  inject,\n  input\n} from '@angular/core';\nimport { SEGMENTED } from '../types';\nimport { Segmented } from '../segmented/segmented';\nimport { Ripple } from '@ngstarter-ui/components/core';\n\n@Component({\n  selector: 'ngs-segmented-button,[ngs-segmented-button]',\n  exportAs: 'ngsSegmentedButton',\n  templateUrl: './segmented-button.html',\n  styleUrl: './segmented-button.scss',\n  hostDirectives: [\n    Ripple\n  ],\n  host: {\n    'class': 'ngs-segmented-button',\n    '[class.icon-only]': 'iconOnly()',\n    '[class.is-selected]': '_isSelected',\n    '[class.is-disabled]': 'disabled() || null',\n    '(click)': '_handleClick()',\n  }\n})\nexport class SegmentedButton {\n  private _segmented = inject<Segmented>(SEGMENTED, { skipSelf: true });\n\n  value = input.required<any>();\n  disabled = input(false, {\n    transform: booleanAttribute\n  });\n  iconOnly = input(false, {\n    transform: booleanAttribute\n  });\n\n  get _isSelected(): boolean {\n    return this._segmented.api.isSelected(this.value());\n  }\n\n  get api() {\n    return {\n      isSelected: () => this._isSelected\n    }\n  }\n\n  protected _handleClick() {\n    this._segmented.api.select(this.value());\n  }\n}\n","<div class=\"icon\">\n  <ng-content select=\"[ngsSegmentedIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n</div>\n","import {\n  AfterContentInit,\n  booleanAttribute,\n  ChangeDetectorRef,\n  Component, effect,\n  ElementRef,\n  forwardRef,\n  inject, input,\n  OnChanges,\n  OnInit, output,\n  Renderer2, SimpleChanges,\n  contentChildren,\n  Signal,\n  DestroyRef\n} from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { SegmentedTriggerSize, SEGMENTED } from '../types';\nimport { SelectionModel } from '@angular/cdk/collections';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { SegmentedButton } from '../segmented-button/segmented-button';\n\n@Component({\n  selector: 'ngs-segmented',\n  exportAs: 'ngsSegmented',\n  templateUrl: './segmented.html',\n  styleUrl: './segmented.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => Segmented),\n      multi: true\n    },\n    {\n      provide: SEGMENTED,\n      useExisting: forwardRef(() => Segmented)\n    }\n  ],\n  host: {\n    'class': 'ngs-segmented',\n    '[class.is-disabled]': 'disabled() || _disabled || null',\n    '(window:resize)': '_onResize()',\n  },\n})\nexport class Segmented implements OnInit, OnChanges, AfterContentInit, ControlValueAccessor {\n  private _elementRef = inject(ElementRef);\n  private _renderer = inject(Renderer2);\n  private _cdr = inject(ChangeDetectorRef);\n  private _destroyRef = inject(DestroyRef);\n  private _isDestroyed = false;\n  protected _disabled = false;\n\n  readonly _buttons = contentChildren(forwardRef(() => SegmentedButton), { descendants: true });\n\n  readonly _buttonElements = contentChildren(forwardRef(() => SegmentedButton), { read: ElementRef, descendants: true });\n\n  _thumbWidth = 0;\n  _thumbLeft = 0;\n  _thumbOpacity = 0;\n\n  value = input();\n  disabled = input(false, {\n    transform: booleanAttribute\n  });\n  size = input<SegmentedTriggerSize>('default');\n\n  readonly valueChange = output<any>();\n\n  private _selectedValue = new SelectionModel<any>(false, []);\n\n  _onChange: any = () => {};\n  _onTouched: any = () => {};\n\n  get api() {\n    return {\n      isSelected: (value: any) => this._selectedValue.isSelected(value),\n      select: (value: any) => this._select(value)\n    };\n  }\n\n  constructor() {\n    this._destroyRef.onDestroy(() => {\n      this._isDestroyed = true;\n    });\n\n    effect(() => {\n      const value = this.value();\n      if (value !== undefined) {\n        if (value !== null) {\n          this._selectedValue.setSelection(value);\n        } else {\n          this._selectedValue.clear();\n        }\n        this._updateThumb();\n      }\n    });\n\n    toObservable(this._buttons).pipe(takeUntilDestroyed()).subscribe(() => {\n      this._updateThumb();\n    });\n  }\n\n  ngOnInit() {\n    this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-segmented-size', this.size());\n  }\n\n  ngAfterContentInit() {\n    this._updateThumb();\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes['size']) {\n      this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-segmented-size', this.size());\n      this._updateThumb();\n    }\n\n    if (changes['value'] && changes['value'].currentValue !== undefined) {\n      const value = changes['value'].currentValue;\n      if (value !== null) {\n        this._selectedValue.setSelection(value);\n      } else {\n        this._selectedValue.clear();\n      }\n      this._updateThumb();\n    }\n  }\n\n  _onResize() {\n    this._updateThumb();\n  }\n\n  private _updateThumb() {\n    setTimeout(() => {\n      const buttons = this._buttons();\n      if (!buttons) {\n        return;\n      }\n      const index = buttons.findIndex(btn => btn._isSelected);\n      const element = this._buttonElements()[index]?.nativeElement;\n\n      if (element) {\n        this._thumbWidth = element.offsetWidth;\n        this._thumbLeft = element.offsetLeft;\n        this._thumbOpacity = 1;\n      } else {\n        this._thumbWidth = 0;\n        this._thumbOpacity = 0;\n      }\n      if (this._isDestroyed) {\n        return;\n      }\n      this._cdr.detectChanges();\n    });\n  }\n\n  writeValue(value: any): void {\n    if (value !== undefined && value !== null) {\n      this._selectedValue.setSelection(value);\n    } else {\n      this._selectedValue.clear();\n    }\n    this._updateThumb();\n    this._cdr.markForCheck();\n  }\n\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: BooleanInput): void {\n    this._disabled = coerceBooleanProperty(isDisabled);\n  }\n\n  private _select(value: any): void {\n    this._selectedValue.setSelection(value);\n    this.valueChange.emit(value);\n    this._onChange(value);\n    this._onTouched(value);\n    this._updateThumb();\n  }\n\n  isSelected(value: any): boolean {\n    return this._selectedValue.isSelected(value);\n  }\n}\n","<div class=\"ngs-segmented-thumb\"\n     [style.width.px]=\"_thumbWidth\"\n     [style.opacity]=\"_thumbOpacity\"\n     [style.transform]=\"'translateX(' + _thumbLeft + 'px)'\"></div>\n<ng-content select=\"ngs-segmented-button,[ngs-segmented-button]\"/>\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[ngsSegmentedIcon]',\n  exportAs: 'ngsSegmentedIcon',\n  host: {\n    'class': 'ngs-segmented-icon'\n  }\n})\nexport class SegmentedIconDirective {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAEO,MAAM,SAAS,GAAG,IAAI,cAAc,CAAC,WAAW,CAAC;;MCwB3C,eAAe,CAAA;IAClB,UAAU,GAAG,MAAM,CAAY,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAErE,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAO;IAC7B,QAAQ,GAAG,KAAK,CAAC,KAAK,gFACpB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;IACF,QAAQ,GAAG,KAAK,CAAC,KAAK,gFACpB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AAEF,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IACrD;AAEA,IAAA,IAAI,GAAG,GAAA;QACL,OAAO;AACL,YAAA,UAAU,EAAE,MAAM,IAAI,CAAC;SACxB;IACH;IAEU,YAAY,GAAA;AACpB,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IAC1C;uGAvBW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,sxBC1B5B,iIAMA,EAAA,MAAA,EAAA,CAAA,2nCAAA,CAAA,EAAA,CAAA;;2FDoBa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAhB3B,SAAS;+BACE,6CAA6C,EAAA,QAAA,EAC7C,oBAAoB,EAAA,cAAA,EAGd;wBACd;qBACD,EAAA,IAAA,EACK;AACJ,wBAAA,OAAO,EAAE,sBAAsB;AAC/B,wBAAA,mBAAmB,EAAE,YAAY;AACjC,wBAAA,qBAAqB,EAAE,aAAa;AACpC,wBAAA,qBAAqB,EAAE,oBAAoB;AAC3C,wBAAA,SAAS,EAAE,gBAAgB;AAC5B,qBAAA,EAAA,QAAA,EAAA,iIAAA,EAAA,MAAA,EAAA,CAAA,2nCAAA,CAAA,EAAA;;;MEoBU,SAAS,CAAA;AACZ,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,IAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;AAC7B,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAChC,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;IAChC,YAAY,GAAG,KAAK;IAClB,SAAS,GAAG,KAAK;AAElB,IAAA,QAAQ,GAAG,eAAe,CAAC,UAAU,CAAC,MAAM,eAAe,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,WAAW,EAAE,IAAI,GAAG;AAEpF,IAAA,eAAe,GAAG,eAAe,CAAC,UAAU,CAAC,MAAM,eAAe,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,IAAI,GAAG;IAEtH,WAAW,GAAG,CAAC;IACf,UAAU,GAAG,CAAC;IACd,aAAa,GAAG,CAAC;IAEjB,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAE;IACf,QAAQ,GAAG,KAAK,CAAC,KAAK,gFACpB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AACF,IAAA,IAAI,GAAG,KAAK,CAAuB,SAAS,2EAAC;IAEpC,WAAW,GAAG,MAAM,EAAO;IAE5B,cAAc,GAAG,IAAI,cAAc,CAAM,KAAK,EAAE,EAAE,CAAC;AAE3D,IAAA,SAAS,GAAQ,MAAK,EAAE,CAAC;AACzB,IAAA,UAAU,GAAQ,MAAK,EAAE,CAAC;AAE1B,IAAA,IAAI,GAAG,GAAA;QACL,OAAO;AACL,YAAA,UAAU,EAAE,CAAC,KAAU,KAAK,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC;YACjE,MAAM,EAAE,CAAC,KAAU,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK;SAC3C;IACH;AAEA,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAK;AAC9B,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AAC1B,QAAA,CAAC,CAAC;QAEF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,YAAA,IAAI,KAAK,KAAK,SAAS,EAAE;AACvB,gBAAA,IAAI,KAAK,KAAK,IAAI,EAAE;AAClB,oBAAA,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,KAAK,CAAC;gBACzC;qBAAO;AACL,oBAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;gBAC7B;gBACA,IAAI,CAAC,YAAY,EAAE;YACrB;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,SAAS,CAAC,MAAK;YACpE,IAAI,CAAC,YAAY,EAAE;AACrB,QAAA,CAAC,CAAC;IACJ;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,oBAAoB,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAChG;IAEA,kBAAkB,GAAA;QAChB,IAAI,CAAC,YAAY,EAAE;IACrB;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE;AACnB,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,oBAAoB,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;YAC9F,IAAI,CAAC,YAAY,EAAE;QACrB;AAEA,QAAA,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC,YAAY,KAAK,SAAS,EAAE;YACnE,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,YAAY;AAC3C,YAAA,IAAI,KAAK,KAAK,IAAI,EAAE;AAClB,gBAAA,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,KAAK,CAAC;YACzC;iBAAO;AACL,gBAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;YAC7B;YACA,IAAI,CAAC,YAAY,EAAE;QACrB;IACF;IAEA,SAAS,GAAA;QACP,IAAI,CAAC,YAAY,EAAE;IACrB;IAEQ,YAAY,GAAA;QAClB,UAAU,CAAC,MAAK;AACd,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE;YAC/B,IAAI,CAAC,OAAO,EAAE;gBACZ;YACF;AACA,YAAA,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC;YACvD,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa;YAE5D,IAAI,OAAO,EAAE;AACX,gBAAA,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;AACtC,gBAAA,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU;AACpC,gBAAA,IAAI,CAAC,aAAa,GAAG,CAAC;YACxB;iBAAO;AACL,gBAAA,IAAI,CAAC,WAAW,GAAG,CAAC;AACpB,gBAAA,IAAI,CAAC,aAAa,GAAG,CAAC;YACxB;AACA,YAAA,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB;YACF;AACA,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AAC3B,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,UAAU,CAAC,KAAU,EAAA;QACnB,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;AACzC,YAAA,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,KAAK,CAAC;QACzC;aAAO;AACL,YAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;QAC7B;QACA,IAAI,CAAC,YAAY,EAAE;AACnB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;IAC1B;AAEA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;IACtB;AAEA,IAAA,gBAAgB,CAAC,UAAwB,EAAA;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC;IACpD;AAEQ,IAAA,OAAO,CAAC,KAAU,EAAA;AACxB,QAAA,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,KAAK,CAAC;AACvC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QACtB,IAAI,CAAC,YAAY,EAAE;IACrB;AAEA,IAAA,UAAU,CAAC,KAAU,EAAA;QACnB,OAAO,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC;IAC9C;uGA/IW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,aAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,iCAAA,EAAA,EAAA,cAAA,EAAA,eAAA,EAAA,EAAA,SAAA,EAjBT;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,SAAS,CAAC;AACxC,gBAAA,KAAK,EAAE;AACR,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,SAAS;AACxC;AACF,SAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAAA,EAAA,CAAA,UAAA,CAAA,MAeoD,eAAe,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,EAAA,CAAA,UAAA,CAAA,MAER,eAAe,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAW,UAAU,8FCtDlG,iQAKA,EAAA,MAAA,EAAA,CAAA,qmEAAA,CAAA,EAAA,CAAA;;2FDuCa,SAAS,EAAA,UAAA,EAAA,CAAA;kBAtBrB,SAAS;+BACE,eAAe,EAAA,QAAA,EACf,cAAc,EAAA,SAAA,EAGb;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,eAAe,CAAC;AACxC,4BAAA,KAAK,EAAE;AACR,yBAAA;AACD,wBAAA;AACE,4BAAA,OAAO,EAAE,SAAS;AAClB,4BAAA,WAAW,EAAE,UAAU,CAAC,eAAe;AACxC;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,OAAO,EAAE,eAAe;AACxB,wBAAA,qBAAqB,EAAE,iCAAiC;AACxD,wBAAA,iBAAiB,EAAE,aAAa;AACjC,qBAAA,EAAA,QAAA,EAAA,iQAAA,EAAA,MAAA,EAAA,CAAA,qmEAAA,CAAA,EAAA;AAUmC,SAAA,CAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,IAAA,EAAA,CAAA,UAAU,CAAC,MAAM,eAAe,CAAC,EAAA,EAAA,GAAE,EAAE,WAAW,EAAE,IAAI,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,IAAA,EAAA,CAEjD,UAAU,CAAC,MAAM,eAAe,CAAC,EAAA,EAAA,GAAE,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,IAAI,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ME7C1G,sBAAsB,CAAA;uGAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,oBAAA,EAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,IAAI,EAAE;AACJ,wBAAA,OAAO,EAAE;AACV;AACF,iBAAA;;;ACRD;;AAEG;;;;"}