@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-selectbutton.mjs

@@ -0,0 +1,627 @@
+export * from '@wawjs/ngx-prime/types/selectbutton';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, inject, ElementRef, input, booleanAttribute, output, model, contentChildren, computed, forwardRef, Directive, InjectionToken, numberAttribute, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { equals, resolveFieldData } from '@wawjs/css-prime-utils';
+import { PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
+import { PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import { BaseEditableHolder } from '@wawjs/ngx-prime/baseeditableholder';
+import * as i1 from '@wawjs/ngx-prime/bind';
+import { Bind, BindModule } from '@wawjs/ngx-prime/bind';
+import { ToggleButtonStyle, ToggleButton } from '@wawjs/ngx-prime/togglebutton';
+import { style as style$1 } from '@wawjs/css-prime-styles/selectbutton';
+import { BaseStyle } from '@wawjs/ngx-prime/base';
+
+const style = /*css*/ `
+    ${style$1}
+
+    /* For ngx-prime */
+    .p-selectbutton.ng-invalid.ng-dirty {
+        outline: 1px solid dt('selectbutton.invalid.border.color');
+        outline-offset: 0;
+    }
+`;
+const classes = {
+    root: ({ instance }) => [
+        'p-selectbutton p-component',
+        {
+            'p-invalid': instance.invalid(),
+            'p-disabled': instance.$disabled(),
+            'p-selectbutton-fluid': instance.fluid()
+        }
+    ]
+};
+class SelectButtonStyle extends BaseStyle {
+    name = 'selectbutton';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButtonStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButtonStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * SelectButton is used to choose single or multiple items from a list using buttons.
+ *
+ * [Live Demo](https://www.ngx-prime.org/selectbutton/)
+ *
+ * @module selectbuttonstyle
+ *
+ */
+var SelectButtonClasses;
+(function (SelectButtonClasses) {
+    /**
+     * Class name of the root element
+     */
+    SelectButtonClasses["root"] = "p-selectbutton";
+})(SelectButtonClasses || (SelectButtonClasses = {}));
+
+/** Manages selection for a group of native `button[pSelectButtonOption]` elements. */
+class SelectButtonDirective extends BaseEditableHolder {
+    componentName = 'SelectButton';
+    _componentStyle = inject(SelectButtonStyle);
+    element = inject(ElementRef);
+    bindDirectiveInstance = inject(Bind, { self: true });
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    allowEmpty = input(true, { ...(ngDevMode ? { debugName: "allowEmpty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    unselectable = input(false, { ...(ngDevMode ? { debugName: "unselectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    dataKey = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dataKey" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    fluid = input(false, { ...(ngDevMode ? { debugName: "fluid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    onOptionClick = output();
+    onChange = output();
+    onFocus = output();
+    onBlur = output();
+    /** Signal Forms value contract. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    touch = output();
+    optionDirectives = contentChildren(SelectButtonOptionDirective, { ...(ngDevMode ? { debugName: "optionDirectives" } : /* istanbul ignore next */ {}), descendants: true });
+    role = computed(() => (this.multiple() ? 'group' : 'radiogroup'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['group', 'root']));
+    }
+    isSelected(value) {
+        const modelValue = this.value();
+        return this.multiple() ? Array.isArray(modelValue) && modelValue.some((selected) => equals(selected, value, this.dataKey() || undefined)) : equals(modelValue, value, this.dataKey() || undefined);
+    }
+    select(event, option, index) {
+        if (this.$disabled()) {
+            return;
+        }
+        const selected = this.isSelected(option);
+        let value;
+        if (this.multiple()) {
+            const current = this.value() ?? [];
+            if (selected) {
+                if (this.unselectable() || (!this.allowEmpty() && current.length === 1)) {
+                    return;
+                }
+                value = current.filter((selectedValue) => !equals(selectedValue, option, this.dataKey() || undefined));
+            }
+            else {
+                value = [...current, option];
+            }
+        }
+        else {
+            if (selected && (this.unselectable() || !this.allowEmpty())) {
+                return;
+            }
+            value = selected ? null : option;
+        }
+        this.value.set(value);
+        this.writeModelValue(value);
+        this.onModelChange(value);
+        this.onChange.emit({ originalEvent: event, value });
+        this.onOptionClick.emit({ originalEvent: event, option, index });
+    }
+    getOptionIndex(option) {
+        return this.optionDirectives().indexOf(option);
+    }
+    isFirstEnabledOption(option) {
+        return this.optionDirectives().find((candidate) => !candidate.isDisabled()) === option;
+    }
+    onKeyDown(event) {
+        const option = this.optionDirectives().find((candidate) => candidate.element.nativeElement === event.target);
+        if (!option || this.$disabled())
+            return;
+        const options = this.optionDirectives().filter((candidate) => !candidate.isDisabled());
+        const currentIndex = options.indexOf(option);
+        let nextIndex;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                nextIndex = (currentIndex - 1 + options.length) % options.length;
+                break;
+            case 'ArrowRight':
+            case 'ArrowDown':
+                nextIndex = (currentIndex + 1) % options.length;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = options.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const next = options[nextIndex];
+        next.focus();
+        if (!this.multiple())
+            this.select(event, next.value(), next.resolvedIndex());
+    }
+    onFocusOut(event) {
+        if (this.element.nativeElement.contains(event.relatedTarget))
+            return;
+        this.onModelTouched();
+        this.touch.emit();
+        this.onBlur.emit(event);
+    }
+    writeControlValue(value, setModelValue) {
+        setModelValue(value);
+        this.value.set(value);
+    }
+    focus(options) {
+        this.optionDirectives()
+            .find((option) => !option.isDisabled() && (option.selected() || this.isFirstEnabledOption(option)))
+            ?.focus(options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: SelectButtonDirective, isStandalone: true, selector: "[pSelectButton]", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, unselectable: { classPropertyName: "unselectable", publicName: "unselectable", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionClick: "onOptionClick", onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur", value: "valueChange", touch: "touch" }, host: { listeners: { "keydown": "onKeyDown($event)", "focusin": "onFocus.emit($event)", "focusout": "onFocusOut($event)" }, properties: { "class": "cx('root')", "attr.role": "role()", "attr.data-pc-name": "'selectbutton'", "attr.data-pc-section": "'root'", "attr.data-p-invalid": "invalid() || null", "attr.data-p-disabled": "$disabled() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy() || null", "attr.aria-describedby": "ariaDescribedBy() || null", "attr.aria-disabled": "$disabled() || null" } }, providers: [SelectButtonStyle, ToggleButtonStyle, { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectButtonDirective), multi: true }], queries: [{ propertyName: "optionDirectives", predicate: SelectButtonOptionDirective, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pSelectButton]',
+                    standalone: true,
+                    host: {
+                        '[class]': "cx('root')",
+                        '[attr.role]': 'role()',
+                        '[attr.data-pc-name]': "'selectbutton'",
+                        '[attr.data-pc-section]': "'root'",
+                        '[attr.data-p-invalid]': 'invalid() || null',
+                        '[attr.data-p-disabled]': '$disabled() || null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy() || null',
+                        '[attr.aria-describedby]': 'ariaDescribedBy() || null',
+                        '[attr.aria-disabled]': '$disabled() || null',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focusin)': 'onFocus.emit($event)',
+                        '(focusout)': 'onFocusOut($event)'
+                    },
+                    providers: [SelectButtonStyle, ToggleButtonStyle, { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectButtonDirective), multi: true }],
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], unselectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "unselectable", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], onOptionClick: [{ type: i0.Output, args: ["onOptionClick"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], optionDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectButtonOptionDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+/** Registers a native button as an option in a `pSelectButton` group. */
+class SelectButtonOptionDirective {
+    group = inject(SelectButtonDirective, { host: true });
+    element = inject(ElementRef);
+    bindDirectiveInstance = inject(Bind, { self: true });
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    index = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "index" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    selected = () => this.group.isSelected(this.value());
+    resolvedIndex = computed(() => this.index() ?? this.group.getOptionIndex(this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedIndex" }] : /* istanbul ignore next */ []));
+    tabindex = computed(() => {
+        if (this.isDisabled())
+            return -1;
+        if (this.group.multiple())
+            return 0;
+        return this.selected() || (!this.group.optionDirectives().some((option) => option.selected()) && this.group.isFirstEnabledOption(this)) ? 0 : -1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.group.ptm('option', { instance: this }));
+    }
+    isDisabled() {
+        return this.disabled() || this.group.$disabled();
+    }
+    select(event) {
+        if (!this.isDisabled()) {
+            this.group.select(event, this.value(), this.resolvedIndex());
+        }
+    }
+    focus(options) {
+        this.element.nativeElement.focus(options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButtonOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: SelectButtonOptionDirective, isStandalone: true, selector: "button[pSelectButtonOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "select($event)" }, properties: { "class.p-togglebutton-checked": "selected()", "class.p-disabled": "isDisabled()", "attr.type": "type()", "attr.role": "group.multiple() ? null : \"radio\"", "attr.aria-checked": "group.multiple() ? null : selected()", "attr.aria-pressed": "group.multiple() ? selected() : null", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy() || null", "attr.aria-describedby": "ariaDescribedBy() || null", "attr.aria-disabled": "isDisabled() || null", "attr.tabindex": "tabindex()", "disabled": "isDisabled()", "value": "value() ?? \"\"" }, classAttribute: "p-togglebutton p-component" }, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButtonOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[pSelectButtonOption]',
+                    standalone: true,
+                    host: {
+                        class: 'p-togglebutton p-component',
+                        '[class.p-togglebutton-checked]': 'selected()',
+                        '[class.p-disabled]': 'isDisabled()',
+                        '[attr.type]': 'type()',
+                        '[attr.role]': 'group.multiple() ? null : "radio"',
+                        '[attr.aria-checked]': 'group.multiple() ? null : selected()',
+                        '[attr.aria-pressed]': 'group.multiple() ? selected() : null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy() || null',
+                        '[attr.aria-describedby]': 'ariaDescribedBy() || null',
+                        '[attr.aria-disabled]': 'isDisabled() || null',
+                        '[attr.tabindex]': 'tabindex()',
+                        '[disabled]': 'isDisabled()',
+                        '[value]': 'value() ?? ""',
+                        '(click)': 'select($event)'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }] } });
+
+const SELECTBUTTON_INSTANCE = new InjectionToken('SELECTBUTTON_INSTANCE');
+const SELECTBUTTON_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SelectButton),
+    multi: true
+};
+/**
+ * Legacy SelectButton component.
+ * @deprecated since v22, use native `pSelectButton` and `pSelectButtonOption` directives. The legacy component selectors will be removed in v23.
+ * @group Components
+ */
+class SelectButton extends BaseEditableHolder {
+    componentName = 'SelectButton';
+    /**
+     * An array of selectitems to display as the available options.
+     * @group Props
+     */
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the label field of an option.
+     * @group Props
+     */
+    optionLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the value field of an option.
+     * @group Props
+     */
+    optionValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the disabled field of an option.
+     * @group Props
+     */
+    optionDisabled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether selection can be cleared.
+     * @group Props
+     */
+    unselectable = input(false, { ...(ngDevMode ? { debugName: "unselectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * When specified, allows selecting multiple values.
+     * @group Props
+     */
+    multiple = input(undefined, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether selection can not be cleared.
+     * @group Props
+     */
+    allowEmpty = input(true, { ...(ngDevMode ? { debugName: "allowEmpty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Style class of the component.
+     * @group Props
+     */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     * @group Props
+     */
+    ariaLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * A property to uniquely identify a value in options.
+     * @group Props
+     */
+    dataKey = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dataKey" }] : /* istanbul ignore next */ []));
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    autofocus = input(undefined, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Specifies the size of the component.
+     * @defaultValue undefined
+     * @group Props
+     */
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue undefined
+     * @group Props
+     */
+    fluid = input(undefined, { ...(ngDevMode ? { debugName: "fluid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Callback to invoke on input click.
+     * @param {SelectButtonOptionClickEvent} event - Custom click event.
+     * @group Emits
+     */
+    onOptionClick = output();
+    /**
+     * Callback to invoke on selection change.
+     * @param {SelectButtonChangeEvent} event - Custom change event.
+     * @group Emits
+     */
+    onChange = output();
+    /**
+     * Custom item template.
+     * @param {SelectButtonItemTemplateContext} context - item context.
+     * @see {@link SelectButtonItemTemplateContext}
+     * @group Templates
+     */
+    itemTemplate;
+    _itemTemplate;
+    get equalityKey() {
+        return this.optionValue() ? null : this.dataKey();
+    }
+    value;
+    focusedIndex = 0;
+    _componentStyle = inject(SelectButtonStyle);
+    $pcSelectButton = inject(SELECTBUTTON_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    getAllowEmpty() {
+        if (this.unselectable()) {
+            return false;
+        }
+        if (this.multiple()) {
+            return this.allowEmpty() || this.value?.length !== 1;
+        }
+        return this.allowEmpty();
+    }
+    getOptionLabel(option) {
+        const optionLabel = this.optionLabel();
+        return optionLabel ? resolveFieldData(option, optionLabel) : option.label != undefined ? option.label : option;
+    }
+    getOptionValue(option) {
+        const optionValue = this.optionValue();
+        return optionValue ? resolveFieldData(option, optionValue) : this.optionLabel() || option.value === undefined ? option : option.value;
+    }
+    isOptionDisabled(option) {
+        const optionDisabled = this.optionDisabled();
+        return optionDisabled ? resolveFieldData(option, optionDisabled) : option.disabled !== undefined ? option.disabled : false;
+    }
+    onOptionSelect(event, option, index) {
+        if (this.$disabled() || this.isOptionDisabled(option)) {
+            return;
+        }
+        let selected = this.isSelected(option);
+        if (selected && this.unselectable()) {
+            return;
+        }
+        let optionValue = this.getOptionValue(option);
+        let newValue;
+        if (this.multiple()) {
+            if (selected)
+                newValue = this.value.filter((val) => !equals(val, optionValue, this.equalityKey || undefined));
+            else
+                newValue = this.value ? [...this.value, optionValue] : [optionValue];
+        }
+        else {
+            if (selected && !this.allowEmpty()) {
+                return;
+            }
+            newValue = selected ? null : optionValue;
+        }
+        this.focusedIndex = index;
+        this.value = newValue;
+        this.writeModelValue(this.value);
+        this.onModelChange(this.value);
+        this.onChange.emit({
+            originalEvent: event,
+            value: this.value
+        });
+        this.onOptionClick.emit({
+            originalEvent: event,
+            option: option,
+            index: index
+        });
+    }
+    changeTabIndexes(event, direction) {
+        let firstTabableChild, index;
+        for (let i = 0; i <= this.el.nativeElement.children.length - 1; i++) {
+            if (this.el.nativeElement.children[i].getAttribute('tabindex') === '0')
+                firstTabableChild = { elem: this.el.nativeElement.children[i], index: i };
+        }
+        if (direction === 'prev') {
+            if (firstTabableChild.index === 0)
+                index = this.el.nativeElement.children.length - 1;
+            else
+                index = firstTabableChild.index - 1;
+        }
+        else {
+            if (firstTabableChild.index === this.el.nativeElement.children.length - 1)
+                index = 0;
+            else
+                index = firstTabableChild.index + 1;
+        }
+        this.focusedIndex = index;
+        this.el.nativeElement.children[index].focus();
+    }
+    onFocus(event, index) {
+        this.focusedIndex = index;
+    }
+    onBlur() {
+        this.onModelTouched();
+    }
+    removeOption(option) {
+        this.value = this.value.filter((val) => !equals(val, this.getOptionValue(option), this.dataKey()));
+    }
+    isSelected(option) {
+        let selected = false;
+        const optionValue = this.getOptionValue(option);
+        if (this.multiple()) {
+            if (this.value && Array.isArray(this.value)) {
+                for (let val of this.value) {
+                    if (equals(val, optionValue, this.dataKey())) {
+                        selected = true;
+                        break;
+                    }
+                }
+            }
+        }
+        else {
+            selected = equals(this.getOptionValue(option), this.value, this.equalityKey || undefined);
+        }
+        return selected;
+    }
+    templates = contentChildren(PrimeTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    onAfterContentInit() {
+        this.templates().forEach((item) => {
+            switch (item.getType()) {
+                case 'item':
+                    this._itemTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    /**
+     * @override
+     *
+     * @see {@link BaseEditableHolder.writeControlValue}
+     * Writes the value to the control.
+     */
+    writeControlValue(value, setModelValue) {
+        this.value = value;
+        setModelValue(this.value);
+        this.cd.markForCheck();
+    }
+    get dataP() {
+        return this.cn({
+            invalid: this.invalid()
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SelectButton, isStandalone: true, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, unselectable: { classPropertyName: "unselectable", publicName: "unselectable", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionClick: "onOptionClick", onChange: "onChange" }, host: { properties: { "class": "cx('root')", "attr.role": "\"group\"", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-p": "dataP" } }, providers: [SELECTBUTTON_VALUE_ACCESSOR, SelectButtonStyle, { provide: SELECTBUTTON_INSTANCE, useExisting: SelectButton }, { provide: PARENT_INSTANCE, useExisting: SelectButton }], queries: [{ propertyName: "templates", predicate: PrimeTemplate, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        @for (option of options(); track getOptionLabel(option); let i = $index) {
+            <p-togglebutton
+                [autofocus]="autofocus()"
+                [styleClass]="styleClass()"
+                [ngModel]="isSelected(option)"
+                [onLabel]="this.getOptionLabel(option)"
+                [offLabel]="this.getOptionLabel(option)"
+                [disabled]="$disabled() || isOptionDisabled(option)"
+                (onChange)="onOptionSelect($event, option, i)"
+                [allowEmpty]="getAllowEmpty()"
+                [size]="size()"
+                [fluid]="fluid()"
+                [pt]="ptm('pcToggleButton')"
+                [unstyled]="unstyled()"
+            >
+                @if (itemTemplate || _itemTemplate) {
+                    <ng-template #content>
+                        <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: option, index: i }"></ng-container>
+                    </ng-template>
+                }
+            </p-togglebutton>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-selectButton, p-selectbutton, p-select-button',
+                    standalone: true,
+                    imports: [ToggleButton, FormsModule, CommonModule, SharedModule, BindModule],
+                    template: `
+        @for (option of options(); track getOptionLabel(option); let i = $index) {
+            <p-togglebutton
+                [autofocus]="autofocus()"
+                [styleClass]="styleClass()"
+                [ngModel]="isSelected(option)"
+                [onLabel]="this.getOptionLabel(option)"
+                [offLabel]="this.getOptionLabel(option)"
+                [disabled]="$disabled() || isOptionDisabled(option)"
+                (onChange)="onOptionSelect($event, option, i)"
+                [allowEmpty]="getAllowEmpty()"
+                [size]="size()"
+                [fluid]="fluid()"
+                [pt]="ptm('pcToggleButton')"
+                [unstyled]="unstyled()"
+            >
+                @if (itemTemplate || _itemTemplate) {
+                    <ng-template #content>
+                        <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: option, index: i }"></ng-container>
+                    </ng-template>
+                }
+            </p-togglebutton>
+        }
+    `,
+                    providers: [SELECTBUTTON_VALUE_ACCESSOR, SelectButtonStyle, { provide: SELECTBUTTON_INSTANCE, useExisting: SelectButton }, { provide: PARENT_INSTANCE, useExisting: SelectButton }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cx('root')",
+                        '[attr.role]': '"group"',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy()',
+                        '[attr.data-p]': 'dataP'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], unselectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "unselectable", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], onOptionClick: [{ type: i0.Output, args: ["onOptionClick"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], itemTemplate: [{
+                type: ContentChild,
+                args: ['item', { descendants: false }]
+            }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }] } });
+class SelectButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SelectButtonModule, imports: [SelectButton, SelectButtonDirective, SelectButtonOptionDirective, SharedModule], exports: [SelectButton, SelectButtonDirective, SelectButtonOptionDirective, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButtonModule, imports: [SelectButton, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SelectButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SelectButton, SelectButtonDirective, SelectButtonOptionDirective, SharedModule],
+                    exports: [SelectButton, SelectButtonDirective, SelectButtonOptionDirective, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SELECTBUTTON_VALUE_ACCESSOR, SelectButton, SelectButtonClasses, SelectButtonDirective, SelectButtonModule, SelectButtonOptionDirective, SelectButtonStyle };
+//# sourceMappingURL=wawjs-ngx-prime-selectbutton.mjs.map