@ojiepermana/angular 21.2.2 → 21.3.0

package/fesm2022/ojiepermana-angular-ui-component-command.mjs

@@ -0,0 +1,268 @@
+import * as i0 from '@angular/core';
+import { Directive, model, input, signal, computed, forwardRef, ChangeDetectionStrategy, Component, inject, ElementRef, output, DestroyRef } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils';
+
+/** Base class exposed to children for context lookup. */
+class CommandContextBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CommandContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandContextBase, decorators: [{
+            type: Directive
+        }] });
+class CommandComponent extends CommandContextBase {
+    query = model('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    matches(text) {
+        const q = this.query().trim().toLowerCase();
+        if (!q)
+            return true;
+        return text.toLowerCase().includes(q);
+    }
+    registerItem(item) {
+        this.items.update((list) => [...list, item]);
+    }
+    unregisterItem(item) {
+        this.items.update((list) => list.filter((i) => i !== item));
+    }
+    /** Items currently visible (not filtered out). */
+    visibleItems() {
+        return this.items().filter((it) => it.visible());
+    }
+    focusNext(delta) {
+        const vis = this.visibleItems();
+        if (vis.length === 0)
+            return;
+        const active = vis.findIndex((i) => i.active());
+        const idx = active < 0 ? 0 : (active + delta + vis.length) % vis.length;
+        vis.forEach((i, k) => i._setActive(k === idx));
+        vis[idx].focus();
+    }
+    focusFirst() {
+        const vis = this.visibleItems();
+        vis.forEach((i, k) => i._setActive(k === 0));
+        vis[0]?.focus();
+    }
+    hasVisibleItems() {
+        return this.visibleItems().length > 0;
+    }
+    activateOnly(item) {
+        this.items().forEach((entry) => entry._setActive(entry === item));
+    }
+    /** Returns the first visible item's text if any. Used when user hits Enter with no active. */
+    getActive() {
+        return this.visibleItems().find((i) => i.active()) ?? this.visibleItems()[0] ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CommandComponent, isStandalone: true, selector: "ui-command", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange" }, host: { properties: { "class": "classes()" } }, providers: [{ provide: CommandContextBase, useExisting: forwardRef(() => CommandComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-command',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: CommandContextBase, useExisting: forwardRef(() => CommandComponent) }],
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class CommandInputComponent {
+    ctx = inject(CommandComponent);
+    placeholder = input('Type a command or search…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex h-11 w-full rounded-md bg-transparent px-3 py-3 text-sm outline-none', 'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', 'border-b border-border', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onInput(e) {
+        this.ctx.query.set(e.target.value);
+        queueMicrotask(() => this.ctx.focusFirst());
+    }
+    onArrow(e, delta) {
+        e.preventDefault();
+        this.ctx.focusNext(delta);
+    }
+    onEnter(e) {
+        const active = this.ctx.getActive();
+        if (active) {
+            e.preventDefault();
+            active._select(e);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CommandInputComponent, isStandalone: true, selector: "input[ui-command-input]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "autocomplete": "off" }, listeners: { "input": "onInput($any($event))", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.enter": "onEnter($any($event))" }, properties: { "class": "classes()", "value": "ctx.query()", "placeholder": "placeholder()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input[ui-command-input]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        type: 'text',
+                        role: 'combobox',
+                        'aria-autocomplete': 'list',
+                        'aria-expanded': 'true',
+                        autocomplete: 'off',
+                        '[value]': 'ctx.query()',
+                        '[placeholder]': 'placeholder()',
+                        '(input)': 'onInput($any($event))',
+                        '(keydown.arrowDown)': 'onArrow($any($event), 1)',
+                        '(keydown.arrowUp)': 'onArrow($any($event), -1)',
+                        '(keydown.enter)': 'onEnter($any($event))',
+                    },
+                    template: ``,
+                }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class CommandListComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('max-h-[300px] overflow-y-auto overflow-x-hidden p-1', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CommandListComponent, isStandalone: true, selector: "ui-command-list", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-command-list',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()', role: 'listbox' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class CommandEmptyComponent {
+    ctx = inject(CommandComponent);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('py-6 text-center text-sm text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CommandEmptyComponent, isStandalone: true, selector: "ui-command-empty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "hidden": "ctx.hasVisibleItems()" } }, ngImport: i0, template: `<ng-content>No results found.</ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandEmptyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-command-empty',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[hidden]': 'ctx.hasVisibleItems()',
+                    },
+                    template: `<ng-content>No results found.</ng-content>`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class CommandGroupComponent {
+    heading = input(null, ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('overflow-hidden p-1 text-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CommandGroupComponent, isStandalone: true, selector: "ui-command-group", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
+    @if (heading()) {
+      <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{{ heading() }}</div>
+    }
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-command-group',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()', role: 'group' },
+                    template: `
+    @if (heading()) {
+      <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{{ heading() }}</div>
+    }
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class CommandSeparatorComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('-mx-1 h-px bg-border block', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CommandSeparatorComponent, isStandalone: true, selector: "ui-command-separator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-command-separator',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()', role: 'separator' },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class CommandItemComponent {
+    ctx = inject(CommandComponent);
+    el = inject(ElementRef);
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    selected = output();
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    visible = computed(() => {
+        const text = this.value() || this.el.nativeElement.textContent || '';
+        return this.ctx.matches(text);
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none', 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.ctx.registerItem(this);
+        inject(DestroyRef).onDestroy(() => this.ctx.unregisterItem(this));
+    }
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    _setActive(active) {
+        this.active.set(active);
+    }
+    _select(e) {
+        if (this.disabled())
+            return;
+        this.selected.emit(e);
+    }
+    onHover() {
+        if (this.disabled())
+            return;
+        this.ctx.activateOnly(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CommandItemComponent, isStandalone: true, selector: "ui-command-item, button[ui-command-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "_select($any($event))", "mousemove": "onHover()" }, properties: { "class": "classes()", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.aria-selected": "active()", "attr.data-active": "active() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "hidden": "!visible()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-command-item, button[ui-command-item]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"option"',
+                        '[attr.tabindex]': '-1',
+                        '[attr.aria-selected]': 'active()',
+                        '[attr.data-active]': 'active() ? "true" : null',
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                        '[hidden]': '!visible()',
+                        '(click)': '_select($any($event))',
+                        '(mousemove)': 'onHover()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+class CommandShortcutComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CommandShortcutComponent, isStandalone: true, selector: "span[ui-command-shortcut]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandShortcutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[ui-command-shortcut]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CommandComponent, CommandContextBase, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandShortcutComponent };
+//# sourceMappingURL=ojiepermana-angular-ui-component-command.mjs.map

package/fesm2022/ojiepermana-angular-ui-component-command.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-ui-component-command.mjs","sources":["../../../projects/angular/ui/component/command/src/lib/command.component.ts","../../../projects/angular/ui/component/command/ojiepermana-angular-ui-component-command.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  QueryList,\n  ViewChild,\n  computed,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n/** Base class exposed to children for context lookup. */\n@Directive()\nexport abstract class CommandContextBase {\n  abstract query: ReturnType<typeof model<string>>;\n  abstract matches(text: string): boolean;\n  abstract registerItem(item: CommandItemComponent): void;\n  abstract unregisterItem(item: CommandItemComponent): void;\n  abstract focusNext(delta: number): void;\n  abstract focusFirst(): void;\n  abstract hasVisibleItems(): boolean;\n  abstract activateOnly(item: CommandItemComponent): void;\n}\n\n@Component({\n  selector: 'ui-command',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: CommandContextBase, useExisting: forwardRef(() => CommandComponent) }],\n  host: { '[class]': 'classes()' },\n  template: `<ng-content />`,\n})\nexport class CommandComponent extends CommandContextBase {\n  readonly query = model<string>('');\n  readonly class = input<string>('');\n\n  private readonly items = signal<CommandItemComponent[]>([]);\n  private readonly activeIndex = signal(0);\n\n  protected readonly classes = computed(() =>\n    cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', this.class()),\n  );\n\n  override matches(text: string): boolean {\n    const q = this.query().trim().toLowerCase();\n    if (!q) return true;\n    return text.toLowerCase().includes(q);\n  }\n\n  override registerItem(item: CommandItemComponent): void {\n    this.items.update((list) => [...list, item]);\n  }\n\n  override unregisterItem(item: CommandItemComponent): void {\n    this.items.update((list) => list.filter((i) => i !== item));\n  }\n\n  /** Items currently visible (not filtered out). */\n  private visibleItems(): CommandItemComponent[] {\n    return this.items().filter((it) => it.visible());\n  }\n\n  override focusNext(delta: number): void {\n    const vis = this.visibleItems();\n    if (vis.length === 0) return;\n    const active = vis.findIndex((i) => i.active());\n    const idx = active < 0 ? 0 : (active + delta + vis.length) % vis.length;\n    vis.forEach((i, k) => i._setActive(k === idx));\n    vis[idx].focus();\n  }\n\n  override focusFirst(): void {\n    const vis = this.visibleItems();\n    vis.forEach((i, k) => i._setActive(k === 0));\n    vis[0]?.focus();\n  }\n\n  override hasVisibleItems(): boolean {\n    return this.visibleItems().length > 0;\n  }\n\n  override activateOnly(item: CommandItemComponent): void {\n    this.items().forEach((entry) => entry._setActive(entry === item));\n  }\n\n  /** Returns the first visible item's text if any. Used when user hits Enter with no active. */\n  getActive(): CommandItemComponent | null {\n    return this.visibleItems().find((i) => i.active()) ?? this.visibleItems()[0] ?? null;\n  }\n}\n\n@Component({\n  selector: 'input[ui-command-input]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    type: 'text',\n    role: 'combobox',\n    'aria-autocomplete': 'list',\n    'aria-expanded': 'true',\n    autocomplete: 'off',\n    '[value]': 'ctx.query()',\n    '[placeholder]': 'placeholder()',\n    '(input)': 'onInput($any($event))',\n    '(keydown.arrowDown)': 'onArrow($any($event), 1)',\n    '(keydown.arrowUp)': 'onArrow($any($event), -1)',\n    '(keydown.enter)': 'onEnter($any($event))',\n  },\n  template: ``,\n})\nexport class CommandInputComponent {\n  protected readonly ctx = inject(CommandComponent);\n  readonly placeholder = input<string>('Type a command or search…');\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(\n      'flex h-11 w-full rounded-md bg-transparent px-3 py-3 text-sm outline-none',\n      'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n      'border-b border-border',\n      this.class(),\n    ),\n  );\n\n  protected onInput(e: Event): void {\n    this.ctx.query.set((e.target as HTMLInputElement).value);\n    queueMicrotask(() => this.ctx.focusFirst());\n  }\n\n  protected onArrow(e: KeyboardEvent, delta: number): void {\n    e.preventDefault();\n    this.ctx.focusNext(delta);\n  }\n\n  protected onEnter(e: KeyboardEvent): void {\n    const active = this.ctx.getActive();\n    if (active) {\n      e.preventDefault();\n      active._select(e);\n    }\n  }\n}\n\n@Component({\n  selector: 'ui-command-list',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'classes()', role: 'listbox' },\n  template: `<ng-content />`,\n})\nexport class CommandListComponent {\n  readonly class = input<string>('');\n  protected readonly classes = computed(() => cn('max-h-[300px] overflow-y-auto overflow-x-hidden p-1', this.class()));\n}\n\n@Component({\n  selector: 'ui-command-empty',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[hidden]': 'ctx.hasVisibleItems()',\n  },\n  template: `<ng-content>No results found.</ng-content>`,\n})\nexport class CommandEmptyComponent {\n  protected readonly ctx = inject(CommandComponent);\n  readonly class = input<string>('');\n  protected readonly classes = computed(() => cn('py-6 text-center text-sm text-muted-foreground', this.class()));\n}\n\n@Component({\n  selector: 'ui-command-group',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'classes()', role: 'group' },\n  template: `\n    @if (heading()) {\n      <div class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">{{ heading() }}</div>\n    }\n    <ng-content />\n  `,\n})\nexport class CommandGroupComponent {\n  readonly heading = input<string | null>(null);\n  readonly class = input<string>('');\n  protected readonly classes = computed(() => cn('overflow-hidden p-1 text-foreground', this.class()));\n}\n\n@Component({\n  selector: 'ui-command-separator',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'classes()', role: 'separator' },\n  template: '',\n})\nexport class CommandSeparatorComponent {\n  readonly class = input<string>('');\n  protected readonly classes = computed(() => cn('-mx-1 h-px bg-border block', this.class()));\n}\n\n@Component({\n  selector: 'ui-command-item, button[ui-command-item]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': '\"option\"',\n    '[attr.tabindex]': '-1',\n    '[attr.aria-selected]': 'active()',\n    '[attr.data-active]': 'active() ? \"true\" : null',\n    '[attr.data-disabled]': 'disabled() ? \"true\" : null',\n    '[hidden]': '!visible()',\n    '(click)': '_select($any($event))',\n    '(mousemove)': 'onHover()',\n  },\n  template: `<ng-content />`,\n})\nexport class CommandItemComponent {\n  protected readonly ctx = inject(CommandComponent);\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  readonly value = input<string>('');\n  readonly disabled = input<boolean>(false);\n  readonly class = input<string>('');\n\n  readonly selected = output<MouseEvent | KeyboardEvent>();\n\n  readonly active = signal(false);\n\n  readonly visible = computed(() => {\n    const text = this.value() || this.el.nativeElement.textContent || '';\n    return this.ctx.matches(text);\n  });\n\n  protected readonly classes = computed(() =>\n    cn(\n      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none',\n      'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',\n      'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      this.class(),\n    ),\n  );\n\n  constructor() {\n    this.ctx.registerItem(this);\n    inject(DestroyRef).onDestroy(() => this.ctx.unregisterItem(this));\n  }\n\n  focus(): void {\n    this.el.nativeElement.focus();\n  }\n\n  _setActive(active: boolean): void {\n    this.active.set(active);\n  }\n\n  _select(e: MouseEvent | KeyboardEvent): void {\n    if (this.disabled()) return;\n    this.selected.emit(e);\n  }\n\n  protected onHover(): void {\n    if (this.disabled()) return;\n    this.ctx.activateOnly(this);\n  }\n}\n\n@Component({\n  selector: 'span[ui-command-shortcut]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'classes()' },\n  template: `<ng-content />`,\n})\nexport class CommandShortcutComponent {\n  readonly class = input<string>('');\n  protected readonly classes = computed(() =>\n    cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class()),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ojiepermana-angular-ui-component-context-menu.mjs

@@ -0,0 +1,100 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, ElementRef, DestroyRef, input, output, signal, Directive } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+/**
+ * Opens a menu anchored to the cursor when the host fires `contextmenu`.
+ * Reuses `<ng-template uiMenuContent>` from the dropdown-menu entry.
+ *
+ * @example
+ * <div [uiContextMenuTrigger]="menu" class="p-12 border">Right-click me</div>
+ * <ng-template uiMenuContent #menu>
+ *   <ui-menu-surface>
+ *     <button ui-menu-item>Copy</button>
+ *     <button ui-menu-item>Paste</button>
+ *   </ui-menu-surface>
+ * </ng-template>
+ */
+class ContextMenuTriggerDirective {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    uiContextMenuTrigger = input.required(...(ngDevMode ? [{ debugName: "uiContextMenuTrigger" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    openedChange = output();
+    overlayRef = null;
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    onContextMenu(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.close();
+        this.openAt(event.clientX, event.clientY);
+    }
+    onKeyDown(event) {
+        const isContextMenuKey = event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10');
+        if (!isContextMenuKey || this.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        this.close();
+        this.openAt(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    }
+    openAt(x, y) {
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo({ x, y })
+                .withPositions([
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+                { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+                { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+            ]),
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+            hasBackdrop: false,
+            panelClass: 'ui-menu-panel',
+        });
+        const portal = new TemplatePortal(this.uiContextMenuTrigger().template, this.vcr);
+        this.overlayRef.attach(portal);
+        merge(this.overlayRef.outsidePointerEvents(), this.overlayRef.keydownEvents().pipe(filter((e) => e.key === 'Escape')), this.overlayRef.detachments())
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+        this.isOpen.set(true);
+        this.openedChange.emit(true);
+    }
+    close() {
+        if (!this.overlayRef)
+            return;
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        this.openedChange.emit(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ContextMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: ContextMenuTriggerDirective, isStandalone: true, selector: "[uiContextMenuTrigger]", inputs: { uiContextMenuTrigger: { classPropertyName: "uiContextMenuTrigger", publicName: "uiContextMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeyDown($event)" } }, exportAs: ["uiContextMenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ContextMenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiContextMenuTrigger]',
+                    exportAs: 'uiContextMenuTrigger',
+                    host: {
+                        '(contextmenu)': 'onContextMenu($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], propDecorators: { uiContextMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiContextMenuTrigger", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ContextMenuTriggerDirective };
+//# sourceMappingURL=ojiepermana-angular-ui-component-context-menu.mjs.map

package/fesm2022/ojiepermana-angular-ui-component-context-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-ui-component-context-menu.mjs","sources":["../../../projects/angular/ui/component/context-menu/src/lib/context-menu-trigger.directive.ts","../../../projects/angular/ui/component/context-menu/ojiepermana-angular-ui-component-context-menu.ts"],"sourcesContent":["import { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { DestroyRef, Directive, ElementRef, ViewContainerRef, inject, input, output, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { merge } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport type { MenuContentDirective } from '@ojiepermana/angular/component/dropdown-menu';\n\n/**\n * Opens a menu anchored to the cursor when the host fires `contextmenu`.\n * Reuses `<ng-template uiMenuContent>` from the dropdown-menu entry.\n *\n * @example\n * <div [uiContextMenuTrigger]=\"menu\" class=\"p-12 border\">Right-click me</div>\n * <ng-template uiMenuContent #menu>\n *   <ui-menu-surface>\n *     <button ui-menu-item>Copy</button>\n *     <button ui-menu-item>Paste</button>\n *   </ui-menu-surface>\n * </ng-template>\n */\n@Directive({\n  selector: '[uiContextMenuTrigger]',\n  exportAs: 'uiContextMenuTrigger',\n  host: {\n    '(contextmenu)': 'onContextMenu($event)',\n    '(keydown)': 'onKeyDown($event)',\n  },\n})\nexport class ContextMenuTriggerDirective {\n  private readonly overlay = inject(Overlay);\n  private readonly vcr = inject(ViewContainerRef);\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n\n  readonly uiContextMenuTrigger = input.required<MenuContentDirective>();\n  readonly disabled = input<boolean>(false);\n\n  readonly openedChange = output<boolean>();\n\n  private overlayRef: OverlayRef | null = null;\n  readonly isOpen = signal(false);\n\n  protected onContextMenu(event: MouseEvent): void {\n    if (this.disabled()) return;\n    event.preventDefault();\n    this.close();\n    this.openAt(event.clientX, event.clientY);\n  }\n\n  protected onKeyDown(event: KeyboardEvent): void {\n    const isContextMenuKey = event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10');\n\n    if (!isContextMenuKey || this.disabled()) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const rect = this.el.nativeElement.getBoundingClientRect();\n    this.close();\n    this.openAt(rect.left + rect.width / 2, rect.top + rect.height / 2);\n  }\n\n  openAt(x: number, y: number): void {\n    this.overlayRef = this.overlay.create({\n      positionStrategy: this.overlay\n        .position()\n        .flexibleConnectedTo({ x, y })\n        .withPositions([\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },\n        ]),\n      scrollStrategy: this.overlay.scrollStrategies.close(),\n      hasBackdrop: false,\n      panelClass: 'ui-menu-panel',\n    });\n\n    const portal = new TemplatePortal(this.uiContextMenuTrigger().template, this.vcr);\n    this.overlayRef.attach(portal);\n\n    merge(\n      this.overlayRef.outsidePointerEvents(),\n      this.overlayRef.keydownEvents().pipe(filter((e) => e.key === 'Escape')),\n      this.overlayRef.detachments(),\n    )\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.close());\n\n    this.isOpen.set(true);\n    this.openedChange.emit(true);\n  }\n\n  close(): void {\n    if (!this.overlayRef) return;\n    this.overlayRef.dispose();\n    this.overlayRef = null;\n    this.isOpen.set(false);\n    this.openedChange.emit(false);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ojiepermana-angular-ui-component-date-picker.mjs

@@ -0,0 +1,155 @@
+import * as i0 from '@angular/core';
+import { model, input, computed, effect, inject, DestroyRef, untracked, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatDatepicker, MatDatepickerInput } from '@angular/material/datepicker';
+import { MatFormField, MatSuffix } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '@ojiepermana/angular/component/utils';
+
+let nextDatePickerId = 0;
+/**
+ * Popup date picker. Requires a date adapter provider in the consumer app
+ * (e.g. `provideNativeDateAdapter()` from `@angular/material/core`).
+ */
+class DatePickerComponent {
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    placeholder = input('Pick a date', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    startView = input('month', ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    touchUi = input(false, ...(ngDevMode ? [{ debugName: "touchUi" }] : /* istanbul ignore next */ []));
+    dateFilter = input(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    panelClass = input('ui-datepicker-panel', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    fallbackId = `ui-date-picker-${nextDatePickerId++}`;
+    classes = computed(() => cn('inline-block', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    resolvedId = computed(() => this.id() ?? this.fallbackId, ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
+    control = new FormControl(null);
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    constructor() {
+        effect(() => {
+            const next = this.value();
+            if (this.control.value !== next) {
+                this.control.setValue(next, { emitEvent: false });
+            }
+        });
+        effect(() => {
+            const d = this.disabled();
+            d ? this.control.disable({ emitEvent: false }) : this.control.enable({ emitEvent: false });
+        });
+        this.control.valueChanges.pipe(takeUntilDestroyed(inject(DestroyRef))).subscribe((next) => {
+            untracked(() => this.value.set(next));
+            this.onChangeFn(next);
+            this.onTouchedFn();
+        });
+    }
+    handleTouched() {
+        this.onTouchedFn();
+    }
+    writeValue(v) {
+        this.value.set(v);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(state) {
+        this.disabled.set(state);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: DatePickerComponent, isStandalone: true, selector: "ui-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, touchUi: { classPropertyName: "touchUi", publicName: "touchUi", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class": "classes()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true }], ngImport: i0, template: `
+    <mat-form-field class="ui-date-picker w-full" appearance="outline" subscriptSizing="dynamic">
+      <input
+        matInput
+        [id]="resolvedId()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [matDatepicker]="picker"
+        [matDatepickerFilter]="dateFilter()"
+        [placeholder]="placeholder()"
+        [required]="required()"
+        [min]="min()"
+        [max]="max()"
+        [formControl]="control"
+        (blur)="handleTouched()" />
+      <button
+        matIconSuffix
+        type="button"
+        class="ui-date-picker-toggle"
+        aria-label="Open calendar"
+        [disabled]="control.disabled"
+        (click)="picker.open()">
+        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M8 2v4" />
+          <path d="M16 2v4" />
+          <rect width="18" height="18" x="3" y="4" rx="2" />
+          <path d="M3 10h18" />
+        </svg>
+      </button>
+      <mat-datepicker
+        #picker
+        [panelClass]="panelClass()"
+        [startAt]="startAt()"
+        [startView]="startView()"
+        [touchUi]="touchUi()"></mat-datepicker>
+    </mat-form-field>
+  `, isInline: true, styles: [":host{display:inline-block}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));width:100%;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-text-field-wrapper{height:2.25rem;padding:0 .25rem 0 .75rem;background:transparent}:host ::ng-deep .mat-mdc-form-field-flex{height:2.25rem;align-items:center}:host ::ng-deep .mat-mdc-form-field-infix{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;padding:0;width:auto}:host ::ng-deep .mat-mdc-form-field-icon-suffix{align-self:center;padding-right:.25rem!important;padding-left:.25rem!important;color:hsl(var(--muted-foreground))}.ui-date-picker-toggle{display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;color:hsl(var(--muted-foreground));border-radius:calc(var(--radius) - .125rem);transition:color .15s ease,background-color .15s ease}.ui-date-picker-toggle:hover{color:hsl(var(--foreground));background:hsl(var(--accent))}.ui-date-picker-toggle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.ui-date-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.ui-date-picker-toggle svg{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-input-element{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-input-element::placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-form-field.mat-focused .ui-date-picker-toggle{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .ui-date-picker-toggle{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, MatFormField, MatSuffix, MatInput, MatDatepicker, MatDatepickerInput], host: { '[class]': 'classes()' }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true }], template: `
+    <mat-form-field class="ui-date-picker w-full" appearance="outline" subscriptSizing="dynamic">
+      <input
+        matInput
+        [id]="resolvedId()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [matDatepicker]="picker"
+        [matDatepickerFilter]="dateFilter()"
+        [placeholder]="placeholder()"
+        [required]="required()"
+        [min]="min()"
+        [max]="max()"
+        [formControl]="control"
+        (blur)="handleTouched()" />
+      <button
+        matIconSuffix
+        type="button"
+        class="ui-date-picker-toggle"
+        aria-label="Open calendar"
+        [disabled]="control.disabled"
+        (click)="picker.open()">
+        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M8 2v4" />
+          <path d="M16 2v4" />
+          <rect width="18" height="18" x="3" y="4" rx="2" />
+          <path d="M3 10h18" />
+        </svg>
+      </button>
+      <mat-datepicker
+        #picker
+        [panelClass]="panelClass()"
+        [startAt]="startAt()"
+        [startView]="startView()"
+        [touchUi]="touchUi()"></mat-datepicker>
+    </mat-form-field>
+  `, styles: [":host{display:inline-block}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));width:100%;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-text-field-wrapper{height:2.25rem;padding:0 .25rem 0 .75rem;background:transparent}:host ::ng-deep .mat-mdc-form-field-flex{height:2.25rem;align-items:center}:host ::ng-deep .mat-mdc-form-field-infix{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;padding:0;width:auto}:host ::ng-deep .mat-mdc-form-field-icon-suffix{align-self:center;padding-right:.25rem!important;padding-left:.25rem!important;color:hsl(var(--muted-foreground))}.ui-date-picker-toggle{display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;color:hsl(var(--muted-foreground));border-radius:calc(var(--radius) - .125rem);transition:color .15s ease,background-color .15s ease}.ui-date-picker-toggle:hover{color:hsl(var(--foreground));background:hsl(var(--accent))}.ui-date-picker-toggle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.ui-date-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.ui-date-picker-toggle svg{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-input-element{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-input-element::placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-form-field.mat-focused .ui-date-picker-toggle{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .ui-date-picker-toggle{opacity:.5}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], touchUi: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUi", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatePickerComponent };
+//# sourceMappingURL=ojiepermana-angular-ui-component-date-picker.mjs.map