@star-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/star-ng-ui-select-button.mjs

@@ -0,0 +1,613 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, computed, inject, input, model, output } from "@angular/core";
+import { optionText, readOption, starInlineKey } from "@star-ng/ui/core";
+var StarSelectButton = class StarSelectButton {
+	host = inject(ElementRef);
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	optionLabel = input(null, ...ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []);
+	optionValue = input(null, ...ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []);
+	optionIcon = input(null, ...ngDevMode ? [{ debugName: "optionIcon" }] : /* istanbul ignore next */ []);
+	optionDisabled = input(null, ...ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []);
+	multiple = input(false, {
+		...ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	allowEmpty = input(true, {
+		...ngDevMode ? { debugName: "allowEmpty" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	selectedIndex = computed(() => this.options().findIndex((option) => this.isSelected(option)), ...ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []);
+	labelOf(option) {
+		return optionText(option, this.optionLabel());
+	}
+	iconOf(option) {
+		const key = this.optionIcon();
+		return key ? readOption(option, key) ?? null : null;
+	}
+	isDisabled(option) {
+		const key = this.optionDisabled();
+		return key ? !!readOption(option, key) : false;
+	}
+	valueOf(option) {
+		return readOption(option, this.optionValue());
+	}
+	isSelected(option) {
+		const value = this.value();
+		const optionValue = this.valueOf(option);
+		return Array.isArray(value) ? value.some((v) => Object.is(v, optionValue)) : Object.is(value, optionValue);
+	}
+	tabIndexFor(index) {
+		if (this.multiple()) return 0;
+		const selected = this.selectedIndex();
+		return index === (selected >= 0 ? selected : 0) ? 0 : -1;
+	}
+	toggle(option) {
+		if (this.disabled() || this.isDisabled(option)) return;
+		const optionValue = this.valueOf(option);
+		if (this.multiple()) {
+			const current = Array.isArray(this.value()) ? this.value() : [];
+			this.value.set(this.isSelected(option) ? current.filter((v) => !Object.is(v, optionValue)) : [...current, optionValue]);
+		} else this.value.set(this.isSelected(option) && this.allowEmpty() ? null : optionValue);
+	}
+	onKeydown(event, index) {
+		if (this.multiple()) return;
+		const step = {
+			ArrowRight: 1,
+			ArrowDown: 1,
+			ArrowLeft: -1,
+			ArrowUp: -1
+		}[starInlineKey(event)];
+		if (!step) return;
+		event.preventDefault();
+		const options = this.options();
+		for (let i = 1; i <= options.length; i++) {
+			const next = (index + step * i + options.length) % options.length;
+			if (!this.isDisabled(options[next])) {
+				this.value.set(this.valueOf(options[next]));
+				this.host.nativeElement.querySelectorAll("button")[next]?.focus();
+				return;
+			}
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarSelectButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarSelectButton,
+		isStandalone: true,
+		selector: "star-select-button",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			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
+			},
+			optionIcon: {
+				classPropertyName: "optionIcon",
+				publicName: "optionIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			optionDisabled: {
+				classPropertyName: "optionDisabled",
+				publicName: "optionDisabled",
+				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
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			properties: {
+				"attr.role": "multiple() ? 'group' : 'radiogroup'",
+				"attr.aria-label": "ariaLabel()",
+				"attr.aria-disabled": "disabled() || null",
+				"class.star-segmented--invalid": "invalid() && touched()",
+				"class.star-segmented--sm": "size() === 'sm'"
+			},
+			classAttribute: "star-segmented"
+		},
+		ngImport: i0,
+		template: `
+    @for (option of options(); track $index; let i = $index) {
+      <button
+        type="button"
+        class="star-segmented__item"
+        [attr.role]="multiple() ? null : 'radio'"
+        [attr.aria-checked]="multiple() ? null : isSelected(option)"
+        [attr.aria-pressed]="multiple() ? isSelected(option) : null"
+        [attr.tabindex]="tabIndexFor(i)"
+        [class.star-segmented__item--on]="isSelected(option)"
+        [disabled]="disabled() || isDisabled(option)"
+        (click)="toggle(option)"
+        (keydown)="onKeydown($event, i)"
+        (blur)="touch.emit()"
+      >
+        @if (iconOf(option); as icon) {
+          <i [class]="icon" aria-hidden="true"></i>
+        }
+        <span>{{ labelOf(option) }}</span>
+      </button>
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarSelectButton,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-select-button",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-segmented",
+				"[attr.role]": "multiple() ? 'group' : 'radiogroup'",
+				"[attr.aria-label]": "ariaLabel()",
+				"[attr.aria-disabled]": "disabled() || null",
+				"[class.star-segmented--invalid]": "invalid() && touched()",
+				"[class.star-segmented--sm]": "size() === 'sm'"
+			},
+			template: `
+    @for (option of options(); track $index; let i = $index) {
+      <button
+        type="button"
+        class="star-segmented__item"
+        [attr.role]="multiple() ? null : 'radio'"
+        [attr.aria-checked]="multiple() ? null : isSelected(option)"
+        [attr.aria-pressed]="multiple() ? isSelected(option) : null"
+        [attr.tabindex]="tabIndexFor(i)"
+        [class.star-segmented__item--on]="isSelected(option)"
+        [disabled]="disabled() || isDisabled(option)"
+        (click)="toggle(option)"
+        (keydown)="onKeydown($event, i)"
+        (blur)="touch.emit()"
+      >
+        @if (iconOf(option); as icon) {
+          <i [class]="icon" aria-hidden="true"></i>
+        }
+        <span>{{ labelOf(option) }}</span>
+      </button>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		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
+			}]
+		}],
+		optionIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionIcon",
+				required: false
+			}]
+		}],
+		optionDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionDisabled",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		allowEmpty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowEmpty",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+var StarToggleButton = class StarToggleButton {
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	onLabel = input("On", ...ngDevMode ? [{ debugName: "onLabel" }] : /* istanbul ignore next */ []);
+	offLabel = input("Off", ...ngDevMode ? [{ debugName: "offLabel" }] : /* istanbul ignore next */ []);
+	onIcon = input(null, ...ngDevMode ? [{ debugName: "onIcon" }] : /* istanbul ignore next */ []);
+	offIcon = input(null, ...ngDevMode ? [{ debugName: "offIcon" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarToggleButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarToggleButton,
+		isStandalone: true,
+		selector: "star-toggle-button",
+		inputs: {
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			onLabel: {
+				classPropertyName: "onLabel",
+				publicName: "onLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			offLabel: {
+				classPropertyName: "offLabel",
+				publicName: "offLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			onIcon: {
+				classPropertyName: "onIcon",
+				publicName: "onIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			offIcon: {
+				classPropertyName: "offIcon",
+				publicName: "offIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			checked: "checkedChange",
+			touch: "touch"
+		},
+		host: { classAttribute: "star-toggle-btn-host" },
+		ngImport: i0,
+		template: `
+    <button
+      type="button"
+      class="star-segmented__item star-toggle-btn"
+      [class.star-segmented__item--on]="checked()"
+      [attr.aria-pressed]="checked()"
+      [attr.aria-label]="ariaLabel()"
+      [disabled]="disabled()"
+      (click)="!readonly() && checked.set(!checked())"
+      (blur)="touch.emit()"
+    >
+      @if (checked() ? onIcon() : offIcon(); as icon) {
+        <i [class]="icon" aria-hidden="true"></i>
+      }
+      <span>{{ checked() ? onLabel() : offLabel() }}</span>
+    </button>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarToggleButton,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-toggle-button",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-toggle-btn-host" },
+			template: `
+    <button
+      type="button"
+      class="star-segmented__item star-toggle-btn"
+      [class.star-segmented__item--on]="checked()"
+      [attr.aria-pressed]="checked()"
+      [attr.aria-label]="ariaLabel()"
+      [disabled]="disabled()"
+      (click)="!readonly() && checked.set(!checked())"
+      (blur)="touch.emit()"
+    >
+      @if (checked() ? onIcon() : offIcon(); as icon) {
+        <i [class]="icon" aria-hidden="true"></i>
+      }
+      <span>{{ checked() ? onLabel() : offLabel() }}</span>
+    </button>
+  `
+		}]
+	}],
+	propDecorators: {
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}],
+		onLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "onLabel",
+				required: false
+			}]
+		}],
+		offLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "offLabel",
+				required: false
+			}]
+		}],
+		onIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "onIcon",
+				required: false
+			}]
+		}],
+		offIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "offIcon",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+export { StarSelectButton, StarToggleButton };
+
+//# sourceMappingURL=star-ng-ui-select-button.mjs.map

package/fesm2022/star-ng-ui-select-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-select-button.mjs","names":[],"sources":["../../../projects/star-ng/select-button/select-button.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport type { FormCheckboxControl, FormValueControl } from '@angular/forms/signals';\nimport { optionText, readOption, starInlineKey, StarOptionKey } from '@star-ng/ui/core';\n\n/**\n * Segmented choice (PrimeNG `p-selectbutton`). Single mode is a radio group (Arrow keys move and\n * select); `multiple` mode is a group of toggle buttons (`aria-pressed`).\n *\n * `<star-select-button [options]=\"views\" optionLabel=\"label\" optionValue=\"id\" [(value)]=\"view\" ariaLabel=\"View\" />`\n */\n@Component({\n  selector: 'star-select-button',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'star-segmented',\n    '[attr.role]': \"multiple() ? 'group' : 'radiogroup'\",\n    '[attr.aria-label]': 'ariaLabel()',\n    '[attr.aria-disabled]': 'disabled() || null',\n    '[class.star-segmented--invalid]': 'invalid() && touched()',\n    '[class.star-segmented--sm]': \"size() === 'sm'\",\n  },\n  template: `\n    @for (option of options(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        class=\"star-segmented__item\"\n        [attr.role]=\"multiple() ? null : 'radio'\"\n        [attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n        [attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n        [attr.tabindex]=\"tabIndexFor(i)\"\n        [class.star-segmented__item--on]=\"isSelected(option)\"\n        [disabled]=\"disabled() || isDisabled(option)\"\n        (click)=\"toggle(option)\"\n        (keydown)=\"onKeydown($event, i)\"\n        (blur)=\"touch.emit()\"\n      >\n        @if (iconOf(option); as icon) {\n          <i [class]=\"icon\" aria-hidden=\"true\"></i>\n        }\n        <span>{{ labelOf(option) }}</span>\n      </button>\n    }\n  `,\n})\nexport class StarSelectButton<TOption = unknown, TValue = TOption> implements FormValueControl<\n  TValue | readonly TValue[] | null\n> {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  readonly value = model<TValue | readonly TValue[] | null>(null);\n  readonly options = input<readonly TOption[]>([]);\n  readonly optionLabel = input<StarOptionKey<TOption> | null>(null);\n  readonly optionValue = input<StarOptionKey<TOption> | null>(null);\n  readonly optionIcon = input<StarOptionKey<TOption> | null>(null);\n  readonly optionDisabled = input<StarOptionKey<TOption> | null>(null);\n  readonly multiple = input(false, { transform: booleanAttribute });\n  /** Single mode: clicking the selected item clears it. */\n  readonly allowEmpty = input(true, { transform: booleanAttribute });\n  readonly size = input<'sm' | 'md'>('md');\n  readonly ariaLabel = input<string | null>(null);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly invalid = input(false, { transform: booleanAttribute });\n  readonly touched = input(false, { transform: booleanAttribute });\n  readonly touch = output<void>();\n\n  private readonly selectedIndex = computed(() =>\n    this.options().findIndex((option) => this.isSelected(option)),\n  );\n\n  protected labelOf(option: TOption): string {\n    return optionText(option, this.optionLabel());\n  }\n  protected iconOf(option: TOption): string | null {\n    const key = this.optionIcon();\n    return key ? ((readOption(option, key) as string) ?? null) : null;\n  }\n  protected isDisabled(option: TOption): boolean {\n    const key = this.optionDisabled();\n    return key ? !!readOption(option, key) : false;\n  }\n  private valueOf(option: TOption): TValue {\n    return readOption(option, this.optionValue()) as TValue;\n  }\n\n  protected isSelected(option: TOption): boolean {\n    const value = this.value();\n    const optionValue = this.valueOf(option);\n    return Array.isArray(value)\n      ? value.some((v) => Object.is(v, optionValue))\n      : Object.is(value, optionValue);\n  }\n\n  /** Roving tabindex in single mode: the selected (or first) item is the tab stop. */\n  protected tabIndexFor(index: number): number {\n    if (this.multiple()) return 0;\n    const selected = this.selectedIndex();\n    return index === (selected >= 0 ? selected : 0) ? 0 : -1;\n  }\n\n  protected toggle(option: TOption): void {\n    if (this.disabled() || this.isDisabled(option)) return;\n    const optionValue = this.valueOf(option);\n    if (this.multiple()) {\n      const current = Array.isArray(this.value()) ? (this.value() as readonly TValue[]) : [];\n      this.value.set(\n        this.isSelected(option)\n          ? current.filter((v) => !Object.is(v, optionValue))\n          : [...current, optionValue],\n      );\n    } else {\n      this.value.set(this.isSelected(option) && this.allowEmpty() ? null : optionValue);\n    }\n  }\n\n  protected onKeydown(event: KeyboardEvent, index: number): void {\n    if (this.multiple()) return;\n    // The horizontal arrows follow the reading order: left is \"next\" in right-to-left.\n    const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[starInlineKey(event)];\n    if (!step) return;\n    event.preventDefault();\n    const options = this.options();\n    for (let i = 1; i <= options.length; i++) {\n      const next = (index + step * i + options.length) % options.length;\n      if (!this.isDisabled(options[next])) {\n        this.value.set(this.valueOf(options[next]));\n        this.host.nativeElement.querySelectorAll<HTMLButtonElement>('button')[next]?.focus();\n        return;\n      }\n    }\n  }\n}\n\n/**\n * Two-state button (PrimeNG `p-togglebutton`): `aria-pressed`, on / off labels and icons.\n * `<star-toggle-button [(checked)]=\"starred\" onLabel=\"Starred\" offLabel=\"Star\" onIcon=\"ph-fill ph-star\" offIcon=\"ph-bold ph-star\" />`\n */\n@Component({\n  selector: 'star-toggle-button',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'star-toggle-btn-host' },\n  template: `\n    <button\n      type=\"button\"\n      class=\"star-segmented__item star-toggle-btn\"\n      [class.star-segmented__item--on]=\"checked()\"\n      [attr.aria-pressed]=\"checked()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [disabled]=\"disabled()\"\n      (click)=\"!readonly() && checked.set(!checked())\"\n      (blur)=\"touch.emit()\"\n    >\n      @if (checked() ? onIcon() : offIcon(); as icon) {\n        <i [class]=\"icon\" aria-hidden=\"true\"></i>\n      }\n      <span>{{ checked() ? onLabel() : offLabel() }}</span>\n    </button>\n  `,\n})\nexport class StarToggleButton implements FormCheckboxControl {\n  readonly checked = model(false);\n  readonly onLabel = input('On');\n  readonly offLabel = input('Off');\n  readonly onIcon = input<string | null>(null);\n  readonly offIcon = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly touch = output<void>();\n}\n"],"mappings":";;;AAsDA,IAAa,mBAAb,MAAa,iBAAgB;CAGV,OAAO,OAAgC,UAAU;CAEzD,QAAQ,MAAyC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACtD,UAAU,MAA0B,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACvC,cAAc,MAAqC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CACxD,cAAc,MAAqC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CACxD,aAAa,MAAqC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CACvD,iBAAiB,MAAqC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAC3D,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAErD,aAAa,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACtD,OAAO,MAAmB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,YAAY,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACtC,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,UAAU,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACpD,UAAU,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACpD,QAAQ,OAAM;CAEN,gBAAgB,eAC/B,KAAK,QAAO,CAAE,CAAC,WAAW,WAAW,KAAK,WAAW,MAAM,CAAC,GAC7D,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAES,QAAQ,QAAe;EAC/B,OAAO,WAAW,QAAQ,KAAK,YAAW,CAAE;CAC9C;CACU,OAAO,QAAe;EAC9B,MAAM,MAAM,KAAK,WAAU;EAC3B,OAAO,MAAQ,WAAW,QAAQ,GAAG,KAAgB,OAAQ;CAC/D;CACU,WAAW,QAAe;EAClC,MAAM,MAAM,KAAK,eAAc;EAC/B,OAAO,MAAM,CAAC,CAAC,WAAW,QAAQ,GAAG,IAAI;CAC3C;CACQ,QAAQ,QAAe;EAC7B,OAAO,WAAW,QAAQ,KAAK,YAAW,CAAE;CAC9C;CAEU,WAAW,QAAe;EAClC,MAAM,QAAQ,KAAK,MAAK;EACxB,MAAM,cAAc,KAAK,QAAQ,MAAM;EACvC,OAAO,MAAM,QAAQ,KAAK,IACtB,MAAM,MAAM,MAAM,OAAO,GAAG,GAAG,WAAW,CAAC,IAC3C,OAAO,GAAG,OAAO,WAAW;CAClC;CAGU,YAAY,OAAa;EACjC,IAAI,KAAK,SAAQ,GAAI,OAAO;EAC5B,MAAM,WAAW,KAAK,cAAa;EACnC,OAAO,WAAW,YAAY,IAAI,WAAW,KAAK,IAAI;CACxD;CAEU,OAAO,QAAe;EAC9B,IAAI,KAAK,SAAQ,KAAM,KAAK,WAAW,MAAM,GAAG;EAChD,MAAM,cAAc,KAAK,QAAQ,MAAM;EACvC,IAAI,KAAK,SAAQ,GAAI;GACnB,MAAM,UAAU,MAAM,QAAQ,KAAK,MAAK,CAAE,IAAK,KAAK,MAAK,IAA2B,CAAA;GACpF,KAAK,MAAM,IACT,KAAK,WAAW,MAAM,IAClB,QAAQ,QAAQ,MAAM,CAAC,OAAO,GAAG,GAAG,WAAW,CAAC,IAChD,CAAC,GAAG,SAAS,WAAW,CAAC;EAEjC,OACE,KAAK,MAAM,IAAI,KAAK,WAAW,MAAM,KAAK,KAAK,WAAU,IAAK,OAAO,WAAW;CAEpF;CAEU,UAAU,OAAsB,OAAa;EACrD,IAAI,KAAK,SAAQ,GAAI;EAErB,MAAM,OAAO;GAAE,YAAY;GAAG,WAAW;GAAG,WAAW;GAAI,SAAS;EAAE,EAAG,cAAc,KAAK;EAC5F,IAAI,CAAC,MAAM;EACX,MAAM,eAAc;EACpB,MAAM,UAAU,KAAK,QAAO;EAC5B,KAAK,IAAI,IAAI,GAAG,KAAK,QAAQ,QAAQ,KAAK;GACxC,MAAM,QAAQ,QAAQ,OAAO,IAAI,QAAQ,UAAU,QAAQ;GAC3D,IAAI,CAAC,KAAK,WAAW,QAAQ,KAAK,GAAG;IACnC,KAAK,MAAM,IAAI,KAAK,QAAQ,QAAQ,KAAK,CAAC;IAC1C,KAAK,KAAK,cAAc,iBAAoC,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAK;IAClF;GACF;EACF;CACF;CArFW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,OAAA;GAAA,OAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,aAAA;IAAA,mBAAA;IAAA,sBAAA;IAAA,iCAAA;IAAA,4BAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UAvBjB;;;;;;;;;;;;;;;;;;;;;;EAqBT,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAlC5B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,iBAAiB,wBAAwB;GACzC,MAAM;IACJ,OAAO;IACP,eAAe;IACf,qBAAqB;IACrB,wBAAwB;IACxB,mCAAmC;IACnC,8BAA8B;GAC/B;GACD,UAAU;;;;;;;;;;;;;;;;;;;;;;EAsBX,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHD,IAAa,mBAAb,MAAa,iBAAgB;CAClB,UAAU,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACtB,UAAU,MAAM,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACrB,WAAW,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACvB,SAAS,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACnC,UAAU,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACpC,YAAY,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACtC,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,QAAQ,OAAM;CATZ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,SAAA;GAAA,OAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,uBAAA;EAAA,UAAA;EAAA,UAlBjB;;;;;;;;;;;;;;;;;EAgBT,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAtB5B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,iBAAiB,wBAAwB;GACzC,MAAM,EAAE,OAAO,uBAAsB;GACrC,UAAU;;;;;;;;;;;;;;;;;EAiBX,CAAA"}