@ojiepermana/angular 22.1.11 → 22.1.12

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

@@ -1,7 +1,363 @@
-export * from '@ojiepermana/angular-component/composer';
+import * as i0 from '@angular/core';
+import { numberAttribute, input, booleanAttribute, output, computed, Component, inject, ElementRef, signal, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+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.1.4", ngImport: i0, type: ComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ComposerComponent, isStandalone: true, selector: "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="ComposerHeader" />
+      <div data-slot="composer-body" [class]="bodyClasses()">
+        <ng-content select="ComposerActionsLeading" />
+        <ng-content select="textarea[ComposerInput], ComposerInput" />
+        <ng-content select="ComposerActionsTrailing" />
+      </div>
+      <ng-content select="ComposerFooter" />
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComposerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Composer',
+                    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="ComposerHeader" />
+      <div data-slot="composer-body" [class]="bodyClasses()">
+        <ng-content select="ComposerActionsLeading" />
+        <ng-content select="textarea[ComposerInput], ComposerInput" />
+        <ng-content select="ComposerActionsTrailing" />
+      </div>
+      <ng-content select="ComposerFooter" />
+    </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-[hsl(var(--border)/var(--opacity-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.1.4", ngImport: i0, type: ComposerHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ComposerHeaderComponent, isStandalone: true, selector: "ComposerHeader", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComposerHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ComposerHeader',
+                    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-[hsl(var(--border)/var(--opacity-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.1.4", ngImport: i0, type: ComposerFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ComposerFooterComponent, isStandalone: true, selector: "ComposerFooter", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComposerFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ComposerFooter',
+                    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-control-sm 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.1.4", ngImport: i0, type: ComposerActionsLeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ComposerActionsLeadingComponent, isStandalone: true, selector: "ComposerActionsLeading", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComposerActionsLeadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ComposerActionsLeading',
+                    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-control-sm 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.1.4", ngImport: i0, type: ComposerActionsTrailingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ComposerActionsTrailingComponent, isStandalone: true, selector: "ComposerActionsTrailing", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComposerActionsTrailingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ComposerActionsTrailing',
+                    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-control-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 */ []));
+    // The key was typed INTO this slot, so this slot's disabled state is the one
+    // that decides. Asking the parent `Composer` alone let a disabled slot inside
+    // an enabled composer submit anyway, which is the very thing its disabled
+    // state promises not to do. `disabled()` here already folds in the parent, so
+    // both ways of turning the slot off are covered by one check.
+    handleKeydown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        this.composer?.handleInputKeydown(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComposerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ComposerInputComponent, isStandalone: true, selector: "ComposerInput", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComposerInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ComposerInput',
+                    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-control-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();
+    }
+    // Same rule as the slot part: this textarea's own disabled state decides. A
+    // native `disabled` textarea does not fire keydown in a browser, but one
+    // disabled through a reactive control is reached by anything that dispatches
+    // the event directly, and the guard costs nothing.
+    handleKeydown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        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.1.4", ngImport: i0, type: ComposerTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ComposerTextareaComponent, isStandalone: true, selector: "textarea[ComposerInput]", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComposerTextareaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'textarea[ComposerInput]',
+                    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 };

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

@@ -1,7 +1,162 @@
-export * from '@ojiepermana/angular-component/context-menu';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, ElementRef, DestroyRef, Injector, input, output, signal, Directive } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs/operators';
+import { injectUniqueId } from '@ojiepermana/angular/component/utils/core';
+import { overlayDismissals } from '@ojiepermana/angular/component/utils/overlay';
+import { MENU_OVERLAY } from '@ojiepermana/angular/component/dropdown-menu';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/** `MouseEvent.button` for the secondary (right) button. */
+const SECONDARY_BUTTON = 2;
+/**
+ * Opens a menu anchored to the cursor when the host fires `contextmenu`.
+ * Reuses `<ng-template MenuContent>` from the dropdown-menu entry.
+ *
+ * @example
+ * <div [ContextMenuTrigger]="menu" class="p-12 border">Right-click me</div>
+ * <ng-template MenuContent #menu>
+ *   <MenuSurface>
+ *     <button MenuItem>Copy</button>
+ *     <button MenuItem>Paste</button>
+ *   </MenuSurface>
+ * </ng-template>
+ */
+class ContextMenuTriggerDirective {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    ContextMenuTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ContextMenuTrigger" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Ties `aria-controls` here to `aria-labelledby` on the surface. */
+    triggerId = this.el.nativeElement.id || injectUniqueId('ContextMenuTrigger');
+    surfaceId = injectUniqueId('MenuSurface');
+    openedChange = output();
+    overlayRef = null;
+    /** Set while the right click that opened the menu is still waiting on its `auxclick`. */
+    pendingGestureRelease = false;
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.destroyRef.onDestroy(() => this.close(false));
+    }
+    onContextMenu(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.close();
+        this.openAt(event.clientX, event.clientY);
+        // `contextmenu` arrives at mouse *down*; this press has an `auxclick` still
+        // to come at mouse *up*. Arm the guard after `openAt`, which disarms it.
+        this.pendingGestureRelease = true;
+    }
+    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.pendingGestureRelease = false;
+        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: 'menu-panel',
+        });
+        // The surface is rendered from a template declared in the CONSUMER's
+        // component, so its injector chain never reaches this directive. Handing it
+        // a controller is what makes it a real menu rather than a floating panel:
+        // without one it cannot name itself, cannot close after a pick, and -- the
+        // reason the shared conformance suite caught it -- a nested `[MenuTrigger]`
+        // inside it does not know it is a submenu, so ArrowLeft leaves the user
+        // stuck one level in. `MenuTrigger` has always done this; this surface was
+        // simply never wired the same way.
+        const controller = {
+            surfaceId: this.surfaceId,
+            triggerId: this.triggerId,
+            // A context menu is opened by a pointer or a key on its own host, never
+            // from an item of another menu, so it is always a root menu.
+            isSubmenu: false,
+            close: () => this.close(),
+            closeAfterSelect: () => this.close(),
+        };
+        const portal = new TemplatePortal(this.ContextMenuTrigger().template, this.vcr, undefined, Injector.create({
+            parent: this.injector,
+            providers: [{ provide: MENU_OVERLAY, useValue: controller }],
+        }));
+        this.overlayRef.attach(portal);
+        overlayDismissals(this.overlayRef)
+            .pipe(filter((event) => !this.isOpeningGestureRelease(event)), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+        this.isOpen.set(true);
+        this.openedChange.emit(true);
+    }
+    close(emitOpenedChange = true) {
+        if (!this.overlayRef)
+            return;
+        const overlayRef = this.overlayRef;
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        overlayRef.dispose();
+        if (emitOpenedChange) {
+            this.openedChange.emit(false);
+        }
+    }
+    /**
+     * A right click delivers `contextmenu` at mouse down and a trailing `auxclick`
+     * at mouse up. The overlay is created on the first, so the CDK outside-pointer
+     * dispatcher hands the second to the menu that very press just opened and it
+     * dismisses itself before the user releases the button.
+     *
+     * Swallow that one release, and only that one: the guard is armed by
+     * `onContextMenu` alone (never by the Shift+F10 path) and is spent on the next
+     * dismissal whatever it is, so a left click, a middle click, or a later right
+     * click on the trigger still closes the menu.
+     */
+    isOpeningGestureRelease(event) {
+        if (!this.pendingGestureRelease) {
+            return false;
+        }
+        this.pendingGestureRelease = false;
+        return (event instanceof MouseEvent && event.type === 'auxclick' && event.button === SECONDARY_BUTTON);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ContextMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: ContextMenuTriggerDirective, isStandalone: true, selector: "[ContextMenuTrigger]", inputs: { ContextMenuTrigger: { classPropertyName: "ContextMenuTrigger", publicName: "ContextMenuTrigger", 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)" }, properties: { "attr.id": "triggerId", "attr.aria-controls": "isOpen() ? surfaceId : null" } }, exportAs: ["ContextMenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ContextMenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ContextMenuTrigger]',
+                    exportAs: 'ContextMenuTrigger',
+                    host: {
+                        '[attr.id]': 'triggerId',
+                        '[attr.aria-controls]': 'isOpen() ? surfaceId : null',
+                        '(contextmenu)': 'onContextMenu($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { ContextMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "ContextMenuTrigger", 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 };