@ojiepermana/angular 22.1.14 → 22.2.0

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

@@ -1,205 +1,292 @@
-import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, InjectionToken, ViewContainerRef, ElementRef, DestroyRef, input, output, signal } from '@angular/core';
-import * as i1 from '@ojiepermana/angular/component/utils/scale';
-import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
-import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { UI_ID_GENERATOR } from '@ojiepermana/angular/component/utils/core';
-import { connectedPositionFor, oppositeSide, overlayDismissals } from '@ojiepermana/angular/component/utils/overlay';
-
-class PopoverContentDirective {
-    componentScale = inject(ComponentScaleDirective);
-    radius = this.componentScale.radius;
-    density = this.componentScale.density;
-    template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: PopoverContentDirective, isStandalone: true, selector: "ng-template[PopoverContent]", exportAs: ["PopoverContent"], hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PopoverContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[PopoverContent]',
-                    hostDirectives: [
-                        {
-                            directive: ComponentScaleDirective,
-                            inputs: ['radius', 'density'],
-                        },
-                    ],
-                    exportAs: 'PopoverContent',
-                    host: {},
-                }]
-        }] });
-
-const POPOVER_TRIGGER_DEFAULTS = new InjectionToken('POPOVER_TRIGGER_DEFAULTS');
-/**
- * Where initial focus lands inside an opened pane. Deliberately the plain
- * tabbable set rather than a CDK focus trap: the pane is a NON-modal dialog, so
- * focus has to be able to walk straight out of it again.
- */
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, InjectionToken, TemplateRef, ViewContainerRef, inject, input, output, signal } from "@angular/core";
+import * as i1 from "@ojiepermana/angular/component/utils/scale";
+import { ComponentScaleDirective } from "@ojiepermana/angular/component/utils/scale";
+import { Overlay } from "@angular/cdk/overlay";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { UI_ID_GENERATOR } from "@ojiepermana/angular/component/utils/core";
+import { connectedPositionFor, oppositeSide, overlayDismissals } from "@ojiepermana/angular/component/utils/overlay";
+var PopoverContentDirective = class PopoverContentDirective {
+	componentScale = inject(ComponentScaleDirective);
+	radius = this.componentScale.radius;
+	density = this.componentScale.density;
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PopoverContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: PopoverContentDirective,
+		isStandalone: true,
+		selector: "ng-template[PopoverContent]",
+		exportAs: ["PopoverContent"],
+		hostDirectives: [{
+			directive: i1.ComponentScaleDirective,
+			inputs: [
+				"radius",
+				"radius",
+				"density",
+				"density"
+			]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: PopoverContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[PopoverContent]",
+			hostDirectives: [{
+				directive: ComponentScaleDirective,
+				inputs: ["radius", "density"]
+			}],
+			exportAs: "PopoverContent",
+			host: {}
+		}]
+	}]
+});
+const POPOVER_TRIGGER_DEFAULTS = new InjectionToken("POPOVER_TRIGGER_DEFAULTS");
 const PANE_FOCUSABLE_SELECTOR = [
-    'a[href]',
-    'button:not([disabled])',
-    'input:not([disabled])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    '[tabindex]:not([tabindex="-1"])',
-].join(',');
-class PopoverTriggerDirective {
-    overlay = inject(Overlay);
-    vcr = inject(ViewContainerRef);
-    el = inject(ElementRef);
-    destroyRef = inject(DestroyRef);
-    defaults = inject(POPOVER_TRIGGER_DEFAULTS, { optional: true });
-    idGenerator = inject(UI_ID_GENERATOR);
-    PopoverTrigger = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "PopoverTrigger" }] : /* istanbul ignore next */ []));
-    side = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-    align = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    sideOffset = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    openedChange = output();
-    overlayRef = null;
-    isOpen = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.destroyRef.onDestroy(() => this.close({ restoreFocus: false, emitOpenedChange: false }));
-    }
-    toggle() {
-        if (this.disabled())
-            return;
-        if (this.isOpen()) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    onKeyboardToggle(event) {
-        if (this.disabled() || this.usesNativeKeyboardActivation()) {
-            return;
-        }
-        event.preventDefault();
-        this.toggle();
-    }
-    open() {
-        if (this.isOpen() || this.disabled())
-            return;
-        const side = this.side() ?? this.defaults?.side?.() ?? 'bottom';
-        const align = this.align() ?? this.defaults?.align?.() ?? 'center';
-        const sideOffset = this.sideOffset() ?? this.defaults?.sideOffset?.() ?? 8;
-        const primary = connectedPositionFor(side, align, sideOffset);
-        const fallback = connectedPositionFor(oppositeSide(side), align, sideOffset);
-        const positionStrategy = this.overlay
-            .position()
-            .flexibleConnectedTo(this.el)
-            .withPositions([primary, fallback])
-            .withPush(true)
-            .withViewportMargin(8)
-            .withFlexibleDimensions(false);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            hasBackdrop: false,
-            panelClass: 'popover-panel',
-        });
-        const pane = this.overlayRef.overlayElement;
-        const portal = new TemplatePortal(this.PopoverTrigger().template, this.vcr);
-        this.overlayRef.attach(portal);
-        this.applyDialogSemantics(pane);
-        this.focusPane(pane);
-        overlayDismissals(this.overlayRef, this.el.nativeElement)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((dismissal) => {
-            // A pointer press outside is already handing focus to whatever was
-            // pressed; pulling it back to the trigger would steal it. Escape and
-            // detachment have no such destination, so they do restore.
-            this.close({ restoreFocus: !(dismissal instanceof MouseEvent) });
-        });
-        this.isOpen.set(true);
-        this.openedChange.emit(true);
-    }
-    close(options = {}) {
-        const { restoreFocus = true, emitOpenedChange = true } = options;
-        if (!this.isOpen())
-            return;
-        const overlayRef = this.overlayRef;
-        this.overlayRef = null;
-        this.isOpen.set(false);
-        overlayRef?.dispose();
-        if (emitOpenedChange) {
-            this.openedChange.emit(false);
-        }
-        if (restoreFocus) {
-            this.el.nativeElement.focus();
-        }
-    }
-    /**
-     * The pane opens with focus, because the trigger is the only way into it: a
-     * keyboard user who is left standing on the trigger can never reach the content
-     * at all (WCAG 2.4.3). A pane with nothing tabbable takes focus itself, so the
-     * content is at least announced and Escape still reaches the overlay.
-     */
-    focusPane(pane) {
-        const first = Array.from(pane.querySelectorAll(PANE_FOCUSABLE_SELECTOR)).find((element) => !element.hidden && !element.inert && element.getAttribute('aria-hidden') !== 'true');
-        if (first) {
-            first.focus();
-            return;
-        }
-        if (!pane.hasAttribute('tabindex')) {
-            pane.setAttribute('tabindex', '-1');
-        }
-        pane.focus();
-    }
-    /**
-     * The trigger advertises `aria-haspopup="dialog"`, so the opened pane must be
-     * a dialog: non-modal, labelled by its trigger so screen readers announce
-     * which control the content belongs to.
-     */
-    applyDialogSemantics(pane) {
-        const trigger = this.el.nativeElement;
-        if (!trigger.id) {
-            trigger.id = this.idGenerator.next('popover-trigger');
-        }
-        pane.setAttribute('role', 'dialog');
-        pane.setAttribute('aria-modal', 'false');
-        pane.setAttribute('aria-labelledby', trigger.id);
-    }
-    usesNativeKeyboardActivation() {
-        const host = this.el.nativeElement;
-        const tagName = host.tagName;
-        return (tagName === 'BUTTON' ||
-            tagName === 'INPUT' ||
-            tagName === 'SELECT' ||
-            tagName === 'TEXTAREA' ||
-            tagName === 'SUMMARY' ||
-            (tagName === 'A' && host.hasAttribute('href')));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: PopoverTriggerDirective, isStandalone: true, selector: "[PopoverTrigger]", inputs: { PopoverTrigger: { classPropertyName: "PopoverTrigger", publicName: "PopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.enter": "onKeyboardToggle($event)", "keydown.space": "onKeyboardToggle($event)", "keydown.escape": "close()" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"" } }, exportAs: ["PopoverTrigger"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[PopoverTrigger]',
-                    exportAs: 'PopoverTrigger',
-                    host: {
-                        '[attr.aria-expanded]': 'isOpen()',
-                        '[attr.aria-haspopup]': '"dialog"',
-                        '(click)': 'toggle()',
-                        '(keydown.enter)': 'onKeyboardToggle($event)',
-                        '(keydown.space)': 'onKeyboardToggle($event)',
-                        '(keydown.escape)': 'close()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { PopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "PopoverTrigger", required: true }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { POPOVER_TRIGGER_DEFAULTS, PopoverContentDirective, PopoverTriggerDirective };
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+var PopoverTriggerDirective = class PopoverTriggerDirective {
+	overlay = inject(Overlay);
+	vcr = inject(ViewContainerRef);
+	el = inject(ElementRef);
+	destroyRef = inject(DestroyRef);
+	defaults = inject(POPOVER_TRIGGER_DEFAULTS, { optional: true });
+	idGenerator = inject(UI_ID_GENERATOR);
+	PopoverTrigger = input.required(...ngDevMode ? [{ debugName: "PopoverTrigger" }] : /* istanbul ignore next */ []);
+	side = input(void 0, ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	align = input(void 0, ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	sideOffset = input(void 0, ...ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	openedChange = output();
+	overlayRef = null;
+	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.destroyRef.onDestroy(() => this.close({
+			restoreFocus: false,
+			emitOpenedChange: false
+		}));
+	}
+	toggle() {
+		if (this.disabled()) return;
+		if (this.isOpen()) this.close();
+		else this.open();
+	}
+	onKeyboardToggle(event) {
+		if (this.disabled() || this.usesNativeKeyboardActivation()) return;
+		event.preventDefault();
+		this.toggle();
+	}
+	open() {
+		if (this.isOpen() || this.disabled()) return;
+		const side = this.side() ?? this.defaults?.side?.() ?? "bottom";
+		const align = this.align() ?? this.defaults?.align?.() ?? "center";
+		const sideOffset = this.sideOffset() ?? this.defaults?.sideOffset?.() ?? 8;
+		const primary = connectedPositionFor(side, align, sideOffset);
+		const fallback = connectedPositionFor(oppositeSide(side), align, sideOffset);
+		const positionStrategy = this.overlay.position().flexibleConnectedTo(this.el).withPositions([primary, fallback]).withPush(true).withViewportMargin(8).withFlexibleDimensions(false);
+		this.overlayRef = this.overlay.create({
+			positionStrategy,
+			scrollStrategy: this.overlay.scrollStrategies.reposition(),
+			hasBackdrop: false,
+			panelClass: "popover-panel"
+		});
+		const pane = this.overlayRef.overlayElement;
+		const portal = new TemplatePortal(this.PopoverTrigger().template, this.vcr);
+		this.overlayRef.attach(portal);
+		this.applyDialogSemantics(pane);
+		this.focusPane(pane);
+		overlayDismissals(this.overlayRef, this.el.nativeElement).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((dismissal) => {
+			this.close({ restoreFocus: !(dismissal instanceof MouseEvent) });
+		});
+		this.isOpen.set(true);
+		this.openedChange.emit(true);
+	}
+	close(options = {}) {
+		const { restoreFocus = true, emitOpenedChange = true } = options;
+		if (!this.isOpen()) return;
+		const overlayRef = this.overlayRef;
+		this.overlayRef = null;
+		this.isOpen.set(false);
+		overlayRef?.dispose();
+		if (emitOpenedChange) this.openedChange.emit(false);
+		if (restoreFocus) this.el.nativeElement.focus();
+	}
+	focusPane(pane) {
+		const first = Array.from(pane.querySelectorAll(PANE_FOCUSABLE_SELECTOR)).find((element) => !element.hidden && !element.inert && element.getAttribute("aria-hidden") !== "true");
+		if (first) {
+			first.focus();
+			return;
+		}
+		if (!pane.hasAttribute("tabindex")) pane.setAttribute("tabindex", "-1");
+		pane.focus();
+	}
+	applyDialogSemantics(pane) {
+		const trigger = this.el.nativeElement;
+		if (!trigger.id) trigger.id = this.idGenerator.next("popover-trigger");
+		pane.setAttribute("role", "dialog");
+		pane.setAttribute("aria-modal", "false");
+		pane.setAttribute("aria-labelledby", trigger.id);
+	}
+	usesNativeKeyboardActivation() {
+		const host = this.el.nativeElement;
+		const tagName = host.tagName;
+		return tagName === "BUTTON" || tagName === "INPUT" || tagName === "SELECT" || tagName === "TEXTAREA" || tagName === "SUMMARY" || tagName === "A" && host.hasAttribute("href");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PopoverTriggerDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: PopoverTriggerDirective,
+		isStandalone: true,
+		selector: "[PopoverTrigger]",
+		inputs: {
+			PopoverTrigger: {
+				classPropertyName: "PopoverTrigger",
+				publicName: "PopoverTrigger",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sideOffset: {
+				classPropertyName: "sideOffset",
+				publicName: "sideOffset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { openedChange: "openedChange" },
+		host: {
+			listeners: {
+				"click": "toggle()",
+				"keydown.enter": "onKeyboardToggle($event)",
+				"keydown.space": "onKeyboardToggle($event)",
+				"keydown.escape": "close()"
+			},
+			properties: {
+				"attr.aria-expanded": "isOpen()",
+				"attr.aria-haspopup": "\"dialog\""
+			}
+		},
+		exportAs: ["PopoverTrigger"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: PopoverTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[PopoverTrigger]",
+			exportAs: "PopoverTrigger",
+			host: {
+				"[attr.aria-expanded]": "isOpen()",
+				"[attr.aria-haspopup]": "\"dialog\"",
+				"(click)": "toggle()",
+				"(keydown.enter)": "onKeyboardToggle($event)",
+				"(keydown.space)": "onKeyboardToggle($event)",
+				"(keydown.escape)": "close()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		PopoverTrigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "PopoverTrigger",
+				required: true
+			}]
+		}],
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		sideOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideOffset",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		openedChange: [{
+			type: i0.Output,
+			args: ["openedChange"]
+		}]
+	}
+});
+export { POPOVER_TRIGGER_DEFAULTS, PopoverContentDirective, PopoverTriggerDirective };