@ojiepermana/angular 21.3.4 → 22.0.1

package/fesm2022/ojiepermana-angular-component-composer.mjs

@@ -0,0 +1,352 @@
+import * as i0 from '@angular/core';
+import { numberAttribute, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, signal, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '@ojiepermana/angular/component/utils';
+
+const COMPOSER_BASE = 'block w-full min-w-0 text-sm text-foreground';
+const COMPOSER_SHELL_BASE = [
+    'relative min-w-0 border border-input bg-background shadow-sm',
+    'transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+    'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive',
+    'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+    '[&>[data-slot=composer-input]]:min-w-0 [&>[data-slot=composer-input]]:flex-1',
+].join(' ');
+const composerShellVariantClasses = {
+    default: 'rounded-xl',
+    input: 'rounded-md',
+};
+const COMPOSER_BODY_BASE = '[&>[data-slot=composer-input]]:min-w-0 [&>[data-slot=composer-input]]:flex-1';
+const nullableNumberAttribute = (value) => {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+    return numberAttribute(value);
+};
+class ComposerComponent {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    submit = input('cmd-enter', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "submit" }] : /* istanbul ignore next */ []));
+    submitForm = input(true, { ...(ngDevMode ? { debugName: "submitForm" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    submitRequested = output();
+    classes = computed(() => cn(COMPOSER_BASE, this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    shellClasses = computed(() => cn(COMPOSER_SHELL_BASE, composerShellVariantClasses[this.variant()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
+    bodyClasses = computed(() => cn(COMPOSER_BODY_BASE, this.inline()
+        ? [
+            'flex items-end gap-1 px-1 py-1',
+            '[&>[data-slot=composer-actions-leading]]:order-10',
+            '[&>[data-slot=composer-input]]:order-20',
+            '[&>[data-slot=composer-actions-trailing]]:order-30',
+        ].join(' ')
+        : [
+            'flex flex-wrap items-end gap-1.5 px-2 py-1.5',
+            '[&>[data-slot=composer-input]]:order-10 [&>[data-slot=composer-input]]:basis-full',
+            '[&>[data-slot=composer-actions-leading]]:order-20',
+            '[&>[data-slot=composer-actions-trailing]]:order-30 [&>[data-slot=composer-actions-trailing]]:ml-auto',
+        ].join(' ')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyClasses" }] : /* istanbul ignore next */ []));
+    handleInputKeydown(event) {
+        if (this.disabled() || event.key !== 'Enter' || event.defaultPrevented) {
+            return;
+        }
+        const shouldSubmit = this.submit() === 'enter' ? !event.shiftKey && !event.isComposing : event.metaKey || event.ctrlKey;
+        if (!shouldSubmit) {
+            return;
+        }
+        event.preventDefault();
+        this.submitRequested.emit(event);
+        if (this.submitForm()) {
+            this.requestNearestFormSubmit(event.target);
+        }
+    }
+    requestNearestFormSubmit(target) {
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const form = target.closest('form');
+        if (form && typeof form.requestSubmit === 'function') {
+            form.requestSubmit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ComposerComponent, isStandalone: true, selector: "ui-composer", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", 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 }, submit: { classPropertyName: "submit", publicName: "submit", isSignal: true, isRequired: false, transformFunction: null }, submitForm: { classPropertyName: "submitForm", publicName: "submitForm", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitRequested: "submitRequested" }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer\"", "attr.data-variant": "variant()", "attr.data-inline": "inline() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.inert": "disabled() ? \"\" : null" } }, ngImport: i0, template: `
+    <div
+      data-slot="composer-shell"
+      [class]="shellClasses()"
+      [attr.data-disabled]="disabled() ? 'true' : null"
+      [attr.aria-invalid]="invalid() ? 'true' : null">
+      <ng-content select="ui-composer-header" />
+      <div data-slot="composer-body" [class]="bodyClasses()">
+        <ng-content select="ui-composer-actions-leading" />
+        <ng-content select="textarea[ui-composer-input], ui-composer-input" />
+        <ng-content select="ui-composer-actions-trailing" />
+      </div>
+      <ng-content select="ui-composer-footer" />
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-composer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"composer"',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-inline]': 'inline() ? "true" : null',
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                        '[attr.inert]': 'disabled() ? "" : null',
+                    },
+                    template: `
+    <div
+      data-slot="composer-shell"
+      [class]="shellClasses()"
+      [attr.data-disabled]="disabled() ? 'true' : null"
+      [attr.aria-invalid]="invalid() ? 'true' : null">
+      <ng-content select="ui-composer-header" />
+      <div data-slot="composer-body" [class]="bodyClasses()">
+        <ng-content select="ui-composer-actions-leading" />
+        <ng-content select="textarea[ui-composer-input], ui-composer-input" />
+        <ng-content select="ui-composer-actions-trailing" />
+      </div>
+      <ng-content select="ui-composer-footer" />
+    </div>
+  `,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], submit: [{ type: i0.Input, args: [{ isSignal: true, alias: "submit", required: false }] }], submitForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitForm", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], submitRequested: [{ type: i0.Output, args: ["submitRequested"] }] } });
+class ComposerHeaderComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex min-w-0 flex-wrap gap-2 border-b border-border/70 px-2.5 py-2', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ComposerHeaderComponent, isStandalone: true, selector: "ui-composer-header", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-header\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-composer-header',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"composer-header"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ComposerFooterComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('border-t border-border/70 px-2.5 py-1.5 text-xs leading-5 text-muted-foreground', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ComposerFooterComponent, isStandalone: true, selector: "ui-composer-footer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-composer-footer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"composer-footer"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ComposerActionsLeadingComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex min-h-8 shrink-0 items-center gap-1', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerActionsLeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ComposerActionsLeadingComponent, isStandalone: true, selector: "ui-composer-actions-leading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-leading\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerActionsLeadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-composer-actions-leading',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"composer-actions-leading"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ComposerActionsTrailingComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex min-h-8 shrink-0 items-center justify-end gap-1', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerActionsTrailingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ComposerActionsTrailingComponent, isStandalone: true, selector: "ui-composer-actions-trailing", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-trailing\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerActionsTrailingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-composer-actions-trailing',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"composer-actions-trailing"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ComposerInputComponent {
+    composer = inject(ComposerComponent, { optional: true });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+    invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: 'aria-invalid', transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.disabledInput() || this.composer?.disabled() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.invalidInput() || this.composer?.invalid() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('min-h-10 w-full rounded-sm bg-transparent px-2 py-2 text-sm leading-6 outline-none', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    handleKeydown(event) {
+        this.composer?.handleInputKeydown(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ComposerInputComponent, isStandalone: true, selector: "ui-composer-input", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"composer-input\"", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-composer-input',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"composer-input"',
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                        '(keydown)': 'handleKeydown($event)',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ComposerTextareaComponent {
+    el = inject(ElementRef);
+    composer = inject(ComposerComponent, { optional: true });
+    rows = input(2, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    maxRows = input(null, { ...(ngDevMode ? { debugName: "maxRows" } : /* istanbul ignore next */ {}), transform: nullableNumberAttribute });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+    invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: 'aria-invalid', transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.disabledInput() || this.disabledState() || this.composer?.disabled() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.invalidInput() || this.composer?.invalid() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn([
+        'max-h-none min-h-10 w-full resize-none bg-transparent px-2 py-2 text-sm leading-6 text-foreground shadow-none outline-none',
+        'placeholder:text-muted-foreground',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+    ].join(' '), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    ngAfterViewInit() {
+        queueMicrotask(() => this.resizeToContent());
+    }
+    writeValue(value) {
+        this.el.nativeElement.value = value ?? '';
+        queueMicrotask(() => this.resizeToContent());
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledState.set(isDisabled);
+    }
+    resizeToContent() {
+        const textarea = this.el.nativeElement;
+        textarea.style.height = 'auto';
+        const maxRows = this.maxRows();
+        if (!maxRows) {
+            textarea.style.height = `${textarea.scrollHeight}px`;
+            textarea.style.overflowY = 'hidden';
+            return;
+        }
+        const lineHeight = this.getLineHeight(textarea);
+        const maxHeight = lineHeight * Math.max(maxRows, this.rows());
+        const nextHeight = Math.min(textarea.scrollHeight, maxHeight);
+        textarea.style.height = `${nextHeight}px`;
+        textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
+    }
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    handleInput() {
+        this.resizeToContent();
+        this.onChange(this.el.nativeElement.value);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    handleKeydown(event) {
+        this.composer?.handleInputKeydown(event);
+    }
+    getLineHeight(textarea) {
+        const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight);
+        return Number.isFinite(lineHeight) ? lineHeight : 24;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ComposerTextareaComponent, isStandalone: true, selector: "textarea[ui-composer-input]", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "handleInput()", "blur": "handleBlur()", "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"composer-input\"", "attr.rows": "rows()", "attr.disabled": "disabled() ? \"\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ComposerTextareaComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ComposerTextareaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'textarea[ui-composer-input]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ComposerTextareaComponent),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"composer-input"',
+                        '[attr.rows]': 'rows()',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                        '(input)': 'handleInput()',
+                        '(blur)': 'handleBlur()',
+                        '(keydown)': 'handleKeydown($event)',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComposerActionsLeadingComponent, ComposerActionsTrailingComponent, ComposerComponent, ComposerFooterComponent, ComposerHeaderComponent, ComposerInputComponent, ComposerTextareaComponent };
+//# sourceMappingURL=ojiepermana-angular-component-composer.mjs.map

package/fesm2022/ojiepermana-angular-component-composer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-composer.mjs","sources":["../../../projects/angular/component/composer/composer.component.ts","../../../projects/angular/component/composer/ojiepermana-angular-component-composer.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  forwardRef,\n  ElementRef,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  numberAttribute,\n  output,\n  signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nexport type ComposerVariant = 'default' | 'input';\nexport type ComposerSubmitBehavior = 'cmd-enter' | 'enter';\n\nconst COMPOSER_BASE = 'block w-full min-w-0 text-sm text-foreground';\n\nconst COMPOSER_SHELL_BASE = [\n  'relative min-w-0 border border-input bg-background shadow-sm',\n  'transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',\n  'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive',\n  'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',\n  '[&>[data-slot=composer-input]]:min-w-0 [&>[data-slot=composer-input]]:flex-1',\n].join(' ');\n\nconst composerShellVariantClasses: Record<ComposerVariant, string> = {\n  default: 'rounded-xl',\n  input: 'rounded-md',\n};\n\nconst COMPOSER_BODY_BASE = '[&>[data-slot=composer-input]]:min-w-0 [&>[data-slot=composer-input]]:flex-1';\n\nconst nullableNumberAttribute = (value: unknown): number | null => {\n  if (value === null || value === undefined || value === '') {\n    return null;\n  }\n\n  return numberAttribute(value);\n};\n\n@Component({\n  selector: 'ui-composer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"composer\"',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-inline]': 'inline() ? \"true\" : null',\n    '[attr.data-disabled]': 'disabled() ? \"true\" : null',\n    '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n    '[attr.aria-invalid]': 'invalid() ? \"true\" : null',\n    '[attr.inert]': 'disabled() ? \"\" : null',\n  },\n  template: `\n    <div\n      data-slot=\"composer-shell\"\n      [class]=\"shellClasses()\"\n      [attr.data-disabled]=\"disabled() ? 'true' : null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\">\n      <ng-content select=\"ui-composer-header\" />\n      <div data-slot=\"composer-body\" [class]=\"bodyClasses()\">\n        <ng-content select=\"ui-composer-actions-leading\" />\n        <ng-content select=\"textarea[ui-composer-input], ui-composer-input\" />\n        <ng-content select=\"ui-composer-actions-trailing\" />\n      </div>\n      <ng-content select=\"ui-composer-footer\" />\n    </div>\n  `,\n})\nexport class ComposerComponent {\n  readonly variant = input<ComposerVariant>('default');\n  readonly inline = input(false, { transform: booleanAttribute });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly invalid = input(false, { transform: booleanAttribute });\n  readonly submit = input<ComposerSubmitBehavior>('cmd-enter');\n  readonly submitForm = input(true, { transform: booleanAttribute });\n  readonly class = input<string>('');\n\n  readonly submitRequested = output<KeyboardEvent>();\n\n  protected readonly classes = computed(() => cn(COMPOSER_BASE, this.class()));\n  protected readonly shellClasses = computed(() =>\n    cn(COMPOSER_SHELL_BASE, composerShellVariantClasses[this.variant()]),\n  );\n  protected readonly bodyClasses = computed(() =>\n    cn(\n      COMPOSER_BODY_BASE,\n      this.inline()\n        ? [\n            'flex items-end gap-1 px-1 py-1',\n            '[&>[data-slot=composer-actions-leading]]:order-10',\n            '[&>[data-slot=composer-input]]:order-20',\n            '[&>[data-slot=composer-actions-trailing]]:order-30',\n          ].join(' ')\n        : [\n            'flex flex-wrap items-end gap-1.5 px-2 py-1.5',\n            '[&>[data-slot=composer-input]]:order-10 [&>[data-slot=composer-input]]:basis-full',\n            '[&>[data-slot=composer-actions-leading]]:order-20',\n            '[&>[data-slot=composer-actions-trailing]]:order-30 [&>[data-slot=composer-actions-trailing]]:ml-auto',\n          ].join(' '),\n    ),\n  );\n\n  handleInputKeydown(event: KeyboardEvent): void {\n    if (this.disabled() || event.key !== 'Enter' || event.defaultPrevented) {\n      return;\n    }\n\n    const shouldSubmit =\n      this.submit() === 'enter' ? !event.shiftKey && !event.isComposing : event.metaKey || event.ctrlKey;\n\n    if (!shouldSubmit) {\n      return;\n    }\n\n    event.preventDefault();\n    this.submitRequested.emit(event);\n\n    if (this.submitForm()) {\n      this.requestNearestFormSubmit(event.target);\n    }\n  }\n\n  private requestNearestFormSubmit(target: EventTarget | null): void {\n    if (!(target instanceof Element)) {\n      return;\n    }\n\n    const form = target.closest('form');\n    if (form && typeof form.requestSubmit === 'function') {\n      form.requestSubmit();\n    }\n  }\n}\n\n@Component({\n  selector: 'ui-composer-header',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"composer-header\"',\n  },\n  template: `<ng-content />`,\n})\nexport class ComposerHeaderComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn('flex min-w-0 flex-wrap gap-2 border-b border-border/70 px-2.5 py-2', this.class()),\n  );\n}\n\n@Component({\n  selector: 'ui-composer-footer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"composer-footer\"',\n  },\n  template: `<ng-content />`,\n})\nexport class ComposerFooterComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn('border-t border-border/70 px-2.5 py-1.5 text-xs leading-5 text-muted-foreground', this.class()),\n  );\n}\n\n@Component({\n  selector: 'ui-composer-actions-leading',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"composer-actions-leading\"',\n  },\n  template: `<ng-content />`,\n})\nexport class ComposerActionsLeadingComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn('flex min-h-8 shrink-0 items-center gap-1', this.class()));\n}\n\n@Component({\n  selector: 'ui-composer-actions-trailing',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"composer-actions-trailing\"',\n  },\n  template: `<ng-content />`,\n})\nexport class ComposerActionsTrailingComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn('flex min-h-8 shrink-0 items-center justify-end gap-1', this.class()));\n}\n\n@Component({\n  selector: 'ui-composer-input',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"composer-input\"',\n    '[attr.data-disabled]': 'disabled() ? \"true\" : null',\n    '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n    '[attr.aria-invalid]': 'invalid() ? \"true\" : null',\n    '(keydown)': 'handleKeydown($event)',\n  },\n  template: `<ng-content />`,\n})\nexport class ComposerInputComponent {\n  private readonly composer = inject(ComposerComponent, { optional: true });\n\n  readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n  readonly invalidInput = input(false, { alias: 'aria-invalid', transform: booleanAttribute });\n  readonly class = input<string>('');\n\n  protected readonly disabled = computed(() => this.disabledInput() || this.composer?.disabled() === true);\n  protected readonly invalid = computed(() => this.invalidInput() || this.composer?.invalid() === true);\n  protected readonly classes = computed(() =>\n    cn(\n      'min-h-10 w-full rounded-sm bg-transparent px-2 py-2 text-sm leading-6 outline-none',\n      'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      this.class(),\n    ),\n  );\n\n  protected handleKeydown(event: KeyboardEvent): void {\n    this.composer?.handleInputKeydown(event);\n  }\n}\n\n@Component({\n  selector: 'textarea[ui-composer-input]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ComposerTextareaComponent),\n      multi: true,\n    },\n  ],\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"composer-input\"',\n    '[attr.rows]': 'rows()',\n    '[attr.disabled]': 'disabled() ? \"\" : null',\n    '[attr.aria-invalid]': 'invalid() ? \"true\" : null',\n    '(input)': 'handleInput()',\n    '(blur)': 'handleBlur()',\n    '(keydown)': 'handleKeydown($event)',\n  },\n  template: '',\n})\nexport class ComposerTextareaComponent implements AfterViewInit, ControlValueAccessor {\n  private readonly el = inject<ElementRef<HTMLTextAreaElement>>(ElementRef);\n  private readonly composer = inject(ComposerComponent, { optional: true });\n\n  readonly rows = input(2, { transform: numberAttribute });\n  readonly maxRows = input<number | null>(null, { transform: nullableNumberAttribute });\n  readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n  readonly invalidInput = input(false, { alias: 'aria-invalid', transform: booleanAttribute });\n  readonly class = input<string>('');\n\n  private readonly disabledState = signal(false);\n  protected readonly disabled = computed(\n    () => this.disabledInput() || this.disabledState() || this.composer?.disabled() === true,\n  );\n  protected readonly invalid = computed(() => this.invalidInput() || this.composer?.invalid() === true);\n  protected readonly classes = computed(() =>\n    cn(\n      [\n        'max-h-none min-h-10 w-full resize-none bg-transparent px-2 py-2 text-sm leading-6 text-foreground shadow-none outline-none',\n        'placeholder:text-muted-foreground',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n      ].join(' '),\n      this.class(),\n    ),\n  );\n\n  private onChange: (value: string) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  ngAfterViewInit(): void {\n    queueMicrotask(() => this.resizeToContent());\n  }\n\n  writeValue(value: string | null): void {\n    this.el.nativeElement.value = value ?? '';\n    queueMicrotask(() => this.resizeToContent());\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledState.set(isDisabled);\n  }\n\n  resizeToContent(): void {\n    const textarea = this.el.nativeElement;\n    textarea.style.height = 'auto';\n\n    const maxRows = this.maxRows();\n    if (!maxRows) {\n      textarea.style.height = `${textarea.scrollHeight}px`;\n      textarea.style.overflowY = 'hidden';\n      return;\n    }\n\n    const lineHeight = this.getLineHeight(textarea);\n    const maxHeight = lineHeight * Math.max(maxRows, this.rows());\n    const nextHeight = Math.min(textarea.scrollHeight, maxHeight);\n\n    textarea.style.height = `${nextHeight}px`;\n    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';\n  }\n\n  focus(): void {\n    this.el.nativeElement.focus();\n  }\n\n  protected handleInput(): void {\n    this.resizeToContent();\n    this.onChange(this.el.nativeElement.value);\n  }\n\n  protected handleBlur(): void {\n    this.onTouched();\n  }\n\n  protected handleKeydown(event: KeyboardEvent): void {\n    this.composer?.handleInputKeydown(event);\n  }\n\n  private getLineHeight(textarea: HTMLTextAreaElement): number {\n    const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight);\n    return Number.isFinite(lineHeight) ? lineHeight : 24;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -24,11 +24,14 @@ class ContextMenuTriggerDirective {
     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 */ []));
+    uiContextMenuTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uiContextMenuTrigger" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     openedChange = output();
     overlayRef = null;
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     onContextMenu(event) {
         if (this.disabled())
             return;
@@ -77,10 +80,10 @@ class ContextMenuTriggerDirective {
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ContextMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ContextMenuTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[uiContextMenuTrigger]',

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

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-component-context-menu.mjs","sources":["../../../projects/angular/component/context-menu/src/lib/context-menu-trigger.directive.ts","../../../projects/angular/component/context-menu/ojiepermana-angular-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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"}
+{"version":3,"file":"ojiepermana-angular-component-context-menu.mjs","sources":["../../../projects/angular/component/context-menu/context-menu-trigger.directive.ts","../../../projects/angular/component/context-menu/ojiepermana-angular-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 './index';\n"],"names":[],"mappings":";;;;;;;;AAQA;;;;;;;;;;;;AAYG;MASU,2BAA2B,CAAA;AACrB,IAAA,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AACzB,IAAA,GAAG,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC9B,IAAA,EAAE,GAAG,MAAM,CAA0B,UAAU,CAAC;AAChD,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IAEvC,oBAAoB,GAAG,KAAK,CAAC,QAAQ;6FAAwB;IAC7D,QAAQ,GAAG,KAAK,CAAU,KAAK;iFAAC;IAEhC,YAAY,GAAG,MAAM,EAAW;IAEjC,UAAU,GAAsB,IAAI;IACnC,MAAM,GAAG,MAAM,CAAC,KAAK;+EAAC;AAErB,IAAA,aAAa,CAAC,KAAiB,EAAA;QACvC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;QACrB,KAAK,CAAC,cAAc,EAAE;QACtB,IAAI,CAAC,KAAK,EAAE;QACZ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC;IAC3C;AAEU,IAAA,SAAS,CAAC,KAAoB,EAAA;AACtC,QAAA,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,KAAK,aAAa,KAAK,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC;QAE/F,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACxC;QACF;QAEA,KAAK,CAAC,cAAc,EAAE;QAEtB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,EAAE;QAC1D,IAAI,CAAC,KAAK,EAAE;QACZ,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IACrE;IAEA,MAAM,CAAC,CAAS,EAAE,CAAS,EAAA;QACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;YACpC,gBAAgB,EAAE,IAAI,CAAC;AACpB,iBAAA,QAAQ;AACR,iBAAA,mBAAmB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC5B,iBAAA,aAAa,CAAC;AACb,gBAAA,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE;AAC3E,gBAAA,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE;AAC3E,gBAAA,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE;AACvE,gBAAA,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE;aACxE,CAAC;YACJ,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,EAAE;AACrD,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,UAAU,EAAE,eAAe;AAC5B,SAAA,CAAC;AAEF,QAAA,MAAM,MAAM,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC;AACjF,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC;AAE9B,QAAA,KAAK,CACH,IAAI,CAAC,UAAU,CAAC,oBAAoB,EAAE,EACtC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,EACvE,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE;AAE5B,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;AAEhC,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;IAC9B;IAEA,KAAK,GAAA;QACH,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE;AACtB,QAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;AACzB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;IAC/B;uGAxEW,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAA3B,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,aAAA,EAAA,uBAAA,EAAA,SAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,sBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAA3B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBARvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,QAAQ,EAAE,sBAAsB;AAChC,oBAAA,IAAI,EAAE;AACJ,wBAAA,eAAe,EAAE,uBAAuB;AACxC,wBAAA,WAAW,EAAE,mBAAmB;AACjC,qBAAA;AACF,iBAAA;;;AC5BD;;AAEG;;;;"}

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

@@ -14,24 +14,39 @@ let nextDatePickerId = 0;
  * (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 */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    placeholder = input('Pick a date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    startAt = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    startView = input('month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    touchUi = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touchUi" }] : /* istanbul ignore next */ []));
+    dateFilter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    panelClass = input('ui-datepicker-panel', /* @ts-ignore */
+    ...(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 */ []));
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(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 */ []));
+    classes = computed(() => cn('inline-block', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    resolvedId = computed(() => this.id() ?? this.fallbackId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
     control = new FormControl(null);
     onChangeFn = () => { };
     onTouchedFn = () => { };
@@ -67,8 +82,8 @@ class DatePickerComponent {
     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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", 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
@@ -104,9 +119,9 @@ class DatePickerComponent {
         [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 });
+  `, 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", 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">