@ojiepermana/angular 22.1.10 → 22.1.12

package/fesm2022/ojiepermana-angular-component-segmented-control.mjs

@@ -1,7 +1,231 @@
-export * from '@ojiepermana/angular-component/segmented-control';
+import * as i0 from '@angular/core';
+import { input, model, booleanAttribute, signal, viewChildren, computed, Component } from '@angular/core';
+import { IconComponent } from '@ojiepermana/angular/component/icon';
+import { cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const appearanceClasses = {
+    text: 'px-3',
+    'icon-text': 'gap-2 px-2.5',
+    icon: 'size-11',
+};
+const spaceBaseValues = {
+    compact: '0.215rem',
+    normal: '0.25rem',
+};
+const SEGMENTED_CONTROL_ICON_SIZE = 16;
+/**
+ * A compact, exclusive selection control with a floating selected surface.
+ *
+ * The control uses the radio-group interaction model: arrow keys, Home, and
+ * End move focus and select the corresponding enabled option.
+ */
+class SegmentedControlComponent {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    appearance = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /**
+     * `default` inherits the active `theme-space` value. Explicit values apply
+     * the same theme-space base locally to this control and its segments.
+     */
+    space = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "space" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    optionButtons = viewChildren('optionButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionButtons" }] : /* istanbul ignore next */ []));
+    enabledIndexes = computed(() => this.options()
+        .map((option, index) => ({ option, index }))
+        .filter(({ option }) => !option.disabled)
+        .map(({ index }) => index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enabledIndexes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('SegmentedControl relative isolate inline-flex w-fit max-w-full min-w-0 items-stretch overflow-x-auto rounded-2xl bg-muted p-[calc(var(--spacing-base)*0.75)] text-sm font-medium', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    spaceBase = computed(() => {
+        const space = this.space();
+        return space === 'default' ? null : spaceBaseValues[space];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spaceBase" }] : /* istanbul ignore next */ []));
+    iconSize = SEGMENTED_CONTROL_ICON_SIZE;
+    selected(value) {
+        return this.value() === value;
+    }
+    isDisabled(option) {
+        return this.disabled() || option.disabled === true;
+    }
+    optionAriaLabel(option) {
+        return this.appearance() === 'icon' ? (option.ariaLabel ?? option.label) : null;
+    }
+    optionClasses(option) {
+        const isSelected = this.selected(option.value);
+        const isDisabled = this.isDisabled(option);
+        return cn('relative z-10 inline-flex min-h-control-11 shrink-0 items-center justify-center rounded-xl text-sm font-medium', 'transition-[background-color,color,box-shadow] duration-200 motion-reduce:transition-none', 'focus-visible:z-20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', this.optionAppearanceClass(option), isSelected
+            ? 'bg-background text-foreground shadow-sm'
+            : 'text-muted-foreground hover:bg-background/50 hover:text-foreground', isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer');
+    }
+    tabindexFor(index, option) {
+        if (this.isDisabled(option))
+            return -1;
+        const focusedIndex = this.focusedIndex();
+        if (focusedIndex !== null && this.enabledIndexes().includes(focusedIndex)) {
+            return focusedIndex === index ? 0 : -1;
+        }
+        const selectedIndex = this.options().findIndex((item) => this.selected(item.value));
+        if (selectedIndex >= 0 && this.enabledIndexes().includes(selectedIndex)) {
+            return selectedIndex === index ? 0 : -1;
+        }
+        return this.enabledIndexes()[0] === index ? 0 : -1;
+    }
+    select(index) {
+        const option = this.options()[index];
+        if (!option || this.isDisabled(option))
+            return;
+        this.focusedIndex.set(index);
+        this.value.set(option.value);
+    }
+    markFocused(index) {
+        const option = this.options()[index];
+        if (!option || this.isDisabled(option))
+            return;
+        this.focusedIndex.set(index);
+    }
+    handleKeydown(event, index) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                event.preventDefault();
+                this.moveSelection(index, 1);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveSelection(index, -1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.selectAndFocus(this.enabledIndexes()[0]);
+                break;
+            case 'End': {
+                event.preventDefault();
+                const enabledIndexes = this.enabledIndexes();
+                this.selectAndFocus(enabledIndexes[enabledIndexes.length - 1]);
+                break;
+            }
+        }
+    }
+    moveSelection(index, offset) {
+        const enabledIndexes = this.enabledIndexes();
+        const currentPosition = enabledIndexes.indexOf(index);
+        if (currentPosition < 0 || enabledIndexes.length === 0)
+            return;
+        const nextPosition = (currentPosition + offset + enabledIndexes.length) % enabledIndexes.length;
+        this.selectAndFocus(enabledIndexes[nextPosition]);
+    }
+    selectAndFocus(index) {
+        if (index === undefined)
+            return;
+        this.select(index);
+        this.optionButtons()[index]?.nativeElement.focus();
+    }
+    optionAppearanceClass(option) {
+        if (this.appearance() === 'icon' && !option.icon) {
+            return 'min-w-20 px-3';
+        }
+        return appearanceClasses[this.appearance()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SegmentedControlComponent, isStandalone: true, selector: "SegmentedControl", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.aria-describedby": "ariaDescribedby()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-orientation": "\"horizontal\"", "attr.data-appearance": "appearance()", "attr.data-space": "space()", "attr.data-layout": "\"single-line\"", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-slot": "\"segmented-control\"", "style.--spacing-base": "spaceBase()" } }, viewQueries: [{ propertyName: "optionButtons", predicate: ["optionButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @for (option of options(); track option.value; let index = $index) {
+      <button
+        #optionButton
+        type="button"
+        role="radio"
+        [class]="optionClasses(option)"
+        [attr.aria-checked]="selected(option.value)"
+        [attr.aria-label]="optionAriaLabel(option)"
+        [attr.data-disabled]="isDisabled(option) ? '' : null"
+        [attr.data-state]="selected(option.value) ? 'on' : 'off'"
+        [attr.tabindex]="tabindexFor(index, option)"
+        [disabled]="isDisabled(option) || null"
+        (click)="select(index)"
+        (focus)="markFocused(index)"
+        (keydown)="handleKeydown($event, index)"
+      >
+        @if (appearance() !== 'text' && option.icon; as icon) {
+          <Icon [name]="icon" [size]="iconSize" class="shrink-0" />
+        }
+
+        @if (appearance() === 'icon' && option.icon) {
+          <span class="sr-only">{{ option.label }}</span>
+        } @else {
+          <span class="min-w-0 truncate">{{ option.label }}</span>
+        }
+      </button>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SegmentedControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'SegmentedControl',
+                    imports: [IconComponent],
+                    host: {
+                        role: 'radiogroup',
+                        '[class]': 'classes()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()',
+                        '[attr.aria-describedby]': 'ariaDescribedby()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-orientation]': '"horizontal"',
+                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-space]': 'space()',
+                        '[attr.data-layout]': '"single-line"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-slot]': '"segmented-control"',
+                        '[style.--spacing-base]': 'spaceBase()',
+                    },
+                    template: `
+    @for (option of options(); track option.value; let index = $index) {
+      <button
+        #optionButton
+        type="button"
+        role="radio"
+        [class]="optionClasses(option)"
+        [attr.aria-checked]="selected(option.value)"
+        [attr.aria-label]="optionAriaLabel(option)"
+        [attr.data-disabled]="isDisabled(option) ? '' : null"
+        [attr.data-state]="selected(option.value) ? 'on' : 'off'"
+        [attr.tabindex]="tabindexFor(index, option)"
+        [disabled]="isDisabled(option) || null"
+        (click)="select(index)"
+        (focus)="markFocused(index)"
+        (keydown)="handleKeydown($event, index)"
+      >
+        @if (appearance() !== 'text' && option.icon; as icon) {
+          <Icon [name]="icon" [size]="iconSize" class="shrink-0" />
+        }
+
+        @if (appearance() === 'icon' && option.icon) {
+          <span class="sr-only">{{ option.label }}</span>
+        } @else {
+          <span class="min-w-0 truncate">{{ option.label }}</span>
+        }
+      </button>
+    }
+  `,
+                }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], space: [{ type: i0.Input, args: [{ isSignal: true, alias: "space", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], optionButtons: [{ type: i0.ViewChildren, args: ['optionButton', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { SegmentedControlComponent };