pdm-ui-kit 0.4.2 → 1.1.0

package/fesm2015/pdm-ui-kit-src-combobox.mjs

@@ -0,0 +1,200 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { mergeOverlayPanelClass, OVERLAY_BASE_Z_INDEX } from 'pdm-ui-kit/src/overlay';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class PdmComboboxComponent {
+    constructor(overlay, viewContainerRef, elementRef, cdr) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.open = false;
+        this.placeholder = "Select framework...";
+        this.searchPlaceholder = "Search framework";
+        this.className = "";
+        this.options = [
+            "Next.js",
+            "SvelteKit",
+            "Nuxt.js",
+            "Remix",
+            "Astro",
+        ];
+        this.value = "";
+        this.width = 200;
+        this.panelClassName = "";
+        this.openChange = new EventEmitter();
+        this.valueChange = new EventEmitter();
+        this.overlayRef = null;
+        this.outsideClickSub = null;
+    }
+    ngOnDestroy() {
+        this.destroyOverlay();
+    }
+    get selectedLabel() {
+        return this.value || this.placeholder;
+    }
+    toggle() {
+        if (this.open) {
+            this.close();
+        }
+        else {
+            this.openPanel();
+        }
+    }
+    select(option) {
+        this.valueChange.emit(option);
+        this.value = option;
+        this.close();
+    }
+    onEscape() {
+        if (this.open) {
+            this.close();
+        }
+    }
+    openPanel() {
+        var _a;
+        if (this.overlayRef)
+            return;
+        const triggerEl = (_a = this.triggerRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        if (!triggerEl)
+            return;
+        this.open = true;
+        this.openChange.emit(true);
+        this.cdr.markForCheck();
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(triggerEl)
+            .withPositions(this.getPositionConfigs())
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            panelClass,
+        });
+        const portal = new TemplatePortal(this.panelTemplateRef, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        // Close on click outside
+        this.outsideClickSub = this.overlayRef
+            .outsidePointerEvents()
+            .subscribe(() => {
+            this.close();
+        });
+        this.cdr.markForCheck();
+    }
+    close() {
+        if (!this.overlayRef)
+            return;
+        this.open = false;
+        this.openChange.emit(false);
+        this.cdr.markForCheck();
+        this.destroyOverlay();
+    }
+    destroyOverlay() {
+        if (this.outsideClickSub) {
+            this.outsideClickSub.unsubscribe();
+            this.outsideClickSub = null;
+        }
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    getPositionConfigs() {
+        return [
+            {
+                originX: "start",
+                originY: "bottom",
+                overlayX: "start",
+                overlayY: "top",
+                offsetY: 4,
+            },
+            {
+                originX: "start",
+                originY: "top",
+                overlayX: "start",
+                overlayY: "bottom",
+                offsetY: -4,
+            },
+            {
+                originX: "end",
+                originY: "bottom",
+                overlayX: "end",
+                overlayY: "top",
+                offsetY: 4,
+            },
+            {
+                originX: "start",
+                originY: "bottom",
+                overlayX: "end",
+                overlayY: "top",
+                offsetY: 4,
+            },
+        ];
+    }
+}
+PdmComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmComboboxComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmComboboxComponent, selector: "pdm-combobox", inputs: { open: "open", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", className: "className", options: "options", value: "value", width: "width", panelClassName: "panelClassName" }, outputs: { openChange: "openChange", valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"flex h-9 w-full appearance-none box-border items-center justify-between gap-2 rounded-md border border-solid border-input bg-background px-3 py-2 text-sm shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"min-w-0 flex-1 truncate text-left text-sm font-medium text-foreground\"\n      >{{ selectedLabel }}</span\n    >\n    <svg\n      viewBox=\"0 0 24 24\"\n      class=\"h-4 w-4 text-foreground\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7 15L12 20L17 15\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n      <path\n        d=\"M17 9L12 4L7 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </button>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"w-full rounded-md border border-solid border-border bg-popover p-0 text-popover-foreground shadow-md\"\n    >\n      <div class=\"flex items-center gap-2 border-b border-border px-3 py-2\">\n        <svg\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4 text-muted-foreground\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"11\"\n            cy=\"11\"\n            r=\"7\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n          ></circle>\n          <path\n            d=\"M20 20L16.6 16.6\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n          ></path>\n        </svg>\n        <div class=\"flex-1 py-2 text-sm text-muted-foreground\">\n          {{ searchPlaceholder }}\n        </div>\n      </div>\n\n      <div class=\"p-1\">\n        <button\n          *ngFor=\"let option of options\"\n          type=\"button\"\n          class=\"flex w-full appearance-none box-border items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"option === value ? 'bg-accent text-accent-foreground' : ''\"\n          role=\"option\"\n          [attr.aria-selected]=\"option === value\"\n          (click)=\"select(option)\"\n        >\n          <span class=\"min-w-0 flex-1 truncate\">{{ option }}</span>\n          <svg\n            *ngIf=\"option === value\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-4 w-4 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M5 12.5L9.2 16.7L19 7\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmComboboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "pdm-combobox", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"flex h-9 w-full appearance-none box-border items-center justify-between gap-2 rounded-md border border-solid border-input bg-background px-3 py-2 text-sm shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"min-w-0 flex-1 truncate text-left text-sm font-medium text-foreground\"\n      >{{ selectedLabel }}</span\n    >\n    <svg\n      viewBox=\"0 0 24 24\"\n      class=\"h-4 w-4 text-foreground\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7 15L12 20L17 15\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n      <path\n        d=\"M17 9L12 4L7 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </button>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"w-full rounded-md border border-solid border-border bg-popover p-0 text-popover-foreground shadow-md\"\n    >\n      <div class=\"flex items-center gap-2 border-b border-border px-3 py-2\">\n        <svg\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4 text-muted-foreground\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"11\"\n            cy=\"11\"\n            r=\"7\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n          ></circle>\n          <path\n            d=\"M20 20L16.6 16.6\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n          ></path>\n        </svg>\n        <div class=\"flex-1 py-2 text-sm text-muted-foreground\">\n          {{ searchPlaceholder }}\n        </div>\n      </div>\n\n      <div class=\"p-1\">\n        <button\n          *ngFor=\"let option of options\"\n          type=\"button\"\n          class=\"flex w-full appearance-none box-border items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"option === value ? 'bg-accent text-accent-foreground' : ''\"\n          role=\"option\"\n          [attr.aria-selected]=\"option === value\"\n          (click)=\"select(option)\"\n        >\n          <span class=\"min-w-0 flex-1 truncate\">{{ option }}</span>\n          <svg\n            *ngIf=\"option === value\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-4 w-4 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M5 12.5L9.2 16.7L19 7\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { open: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], panelClassName: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ["triggerEl"]
+            }], panelTemplateRef: [{
+                type: ViewChild,
+                args: ["panelTemplate"]
+            }], onEscape: [{
+                type: HostListener,
+                args: ["document:keydown.escape"]
+            }] } });
+
+const COMPONENTS = [
+    PdmComboboxComponent,
+];
+class PdmComboboxModule {
+}
+PdmComboboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PdmComboboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmComboboxModule, declarations: [PdmComboboxComponent], imports: [CommonModule, OverlayModule], exports: [PdmComboboxComponent] });
+PdmComboboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmComboboxModule, imports: [CommonModule, OverlayModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmComboboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, OverlayModule],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PdmComboboxComponent, PdmComboboxModule };
+//# sourceMappingURL=pdm-ui-kit-src-combobox.mjs.map

package/fesm2015/pdm-ui-kit-src-combobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdm-ui-kit-src-combobox.mjs","sources":["../../../src/combobox/combobox.component.ts","../../../src/combobox/combobox.component.html","../../../src/combobox/combobox.module.ts","../../../src/combobox/pdm-ui-kit-src-combobox.ts"],"sourcesContent":["import {\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tEventEmitter,\n\tHostListener,\n\tInput,\n\tOnDestroy,\n\tOutput,\n\tViewChild,\n\tViewContainerRef,\n} from \"@angular/core\";\nimport { Overlay, OverlayRef, ConnectedPosition } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport {\n\tmergeOverlayPanelClass,\n\tOVERLAY_BASE_Z_INDEX,\n} from \"pdm-ui-kit/src/overlay\";\n\n@Component({\n\tselector: \"pdm-combobox\",\n\ttemplateUrl: \"./combobox.component.html\",\n\tstyles: [\":host { display: block; }\"],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PdmComboboxComponent implements OnDestroy {\n\t@Input() open = false;\n\t@Input() placeholder = \"Select framework...\";\n\t@Input() searchPlaceholder = \"Search framework\";\n\t@Input() className = \"\";\n\t@Input() options: string[] = [\n\t\t\"Next.js\",\n\t\t\"SvelteKit\",\n\t\t\"Nuxt.js\",\n\t\t\"Remix\",\n\t\t\"Astro\",\n\t];\n\t@Input() value = \"\";\n\t@Input() width = 200;\n\t@Input() panelClassName = \"\";\n\n\t@Output() openChange = new EventEmitter<boolean>();\n\t@Output() valueChange = new EventEmitter<string>();\n\n\t@ViewChild(\"triggerEl\") triggerRef?: ElementRef<HTMLElement>;\n\t@ViewChild(\"panelTemplate\") panelTemplateRef: any;\n\n\tprivate overlayRef: OverlayRef | null = null;\n\tprivate outsideClickSub: any = null;\n\n\tconstructor(\n\t\tprivate readonly overlay: Overlay,\n\t\tprivate readonly viewContainerRef: ViewContainerRef,\n\t\tprivate readonly elementRef: ElementRef<HTMLElement>,\n\t\tprivate readonly cdr: ChangeDetectorRef,\n\t) {}\n\n\tngOnDestroy(): void {\n\t\tthis.destroyOverlay();\n\t}\n\n\tget selectedLabel(): string {\n\t\treturn this.value || this.placeholder;\n\t}\n\n\ttoggle(): void {\n\t\tif (this.open) {\n\t\t\tthis.close();\n\t\t} else {\n\t\t\tthis.openPanel();\n\t\t}\n\t}\n\n\tselect(option: string): void {\n\t\tthis.valueChange.emit(option);\n\t\tthis.value = option;\n\t\tthis.close();\n\t}\n\n\t@HostListener(\"document:keydown.escape\")\n\tonEscape(): void {\n\t\tif (this.open) {\n\t\t\tthis.close();\n\t\t}\n\t}\n\n\tprivate openPanel(): void {\n\t\tif (this.overlayRef) return;\n\n\t\tconst triggerEl = this.triggerRef?.nativeElement;\n\t\tif (!triggerEl) return;\n\n\t\tthis.open = true;\n\t\tthis.openChange.emit(true);\n\t\tthis.cdr.markForCheck();\n\n\t\tconst positionStrategy = this.overlay\n\t\t\t.position()\n\t\t\t.flexibleConnectedTo(triggerEl)\n\t\t\t.withPositions(this.getPositionConfigs())\n\t\t\t.withFlexibleDimensions(false)\n\t\t\t.withPush(true);\n\n\t\tconst panelClass = mergeOverlayPanelClass(\n\t\t\tOVERLAY_BASE_Z_INDEX,\n\t\t\tthis.panelClassName,\n\t\t);\n\n\t\tthis.overlayRef = this.overlay.create({\n\t\t\tpositionStrategy,\n\t\t\tpanelClass,\n\t\t});\n\n\t\tconst portal = new TemplatePortal(\n\t\t\tthis.panelTemplateRef,\n\t\t\tthis.viewContainerRef,\n\t\t);\n\t\tthis.overlayRef.attach(portal);\n\n\t\t// Close on click outside\n\t\tthis.outsideClickSub = this.overlayRef\n\t\t\t.outsidePointerEvents()\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.close();\n\t\t\t});\n\n\t\tthis.cdr.markForCheck();\n\t}\n\n\tprivate close(): void {\n\t\tif (!this.overlayRef) return;\n\n\t\tthis.open = false;\n\t\tthis.openChange.emit(false);\n\t\tthis.cdr.markForCheck();\n\t\tthis.destroyOverlay();\n\t}\n\n\tprivate destroyOverlay(): void {\n\t\tif (this.outsideClickSub) {\n\t\t\tthis.outsideClickSub.unsubscribe();\n\t\t\tthis.outsideClickSub = null;\n\t\t}\n\t\tif (this.overlayRef) {\n\t\t\tthis.overlayRef.detach();\n\t\t\tthis.overlayRef.dispose();\n\t\t\tthis.overlayRef = null;\n\t\t}\n\t}\n\n\tprivate getPositionConfigs(): ConnectedPosition[] {\n\t\treturn [\n\t\t\t{\n\t\t\t\toriginX: \"start\",\n\t\t\t\toriginY: \"bottom\",\n\t\t\t\toverlayX: \"start\",\n\t\t\t\toverlayY: \"top\",\n\t\t\t\toffsetY: 4,\n\t\t\t},\n\t\t\t{\n\t\t\t\toriginX: \"start\",\n\t\t\t\toriginY: \"top\",\n\t\t\t\toverlayX: \"start\",\n\t\t\t\toverlayY: \"bottom\",\n\t\t\t\toffsetY: -4,\n\t\t\t},\n\t\t\t{\n\t\t\t\toriginX: \"end\",\n\t\t\t\toriginY: \"bottom\",\n\t\t\t\toverlayX: \"end\",\n\t\t\t\toverlayY: \"top\",\n\t\t\t\toffsetY: 4,\n\t\t\t},\n\t\t\t{\n\t\t\t\toriginX: \"start\",\n\t\t\t\toriginY: \"bottom\",\n\t\t\t\toverlayX: \"end\",\n\t\t\t\toverlayY: \"top\",\n\t\t\t\toffsetY: 4,\n\t\t\t},\n\t\t];\n\t}\n}\n","<div [ngClass]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"flex h-9 w-full appearance-none box-border items-center justify-between gap-2 rounded-md border border-solid border-input bg-background px-3 py-2 text-sm shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"min-w-0 flex-1 truncate text-left text-sm font-medium text-foreground\"\n      >{{ selectedLabel }}</span\n    >\n    <svg\n      viewBox=\"0 0 24 24\"\n      class=\"h-4 w-4 text-foreground\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7 15L12 20L17 15\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n      <path\n        d=\"M17 9L12 4L7 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </button>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"w-full rounded-md border border-solid border-border bg-popover p-0 text-popover-foreground shadow-md\"\n    >\n      <div class=\"flex items-center gap-2 border-b border-border px-3 py-2\">\n        <svg\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4 text-muted-foreground\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"11\"\n            cy=\"11\"\n            r=\"7\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n          ></circle>\n          <path\n            d=\"M20 20L16.6 16.6\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n          ></path>\n        </svg>\n        <div class=\"flex-1 py-2 text-sm text-muted-foreground\">\n          {{ searchPlaceholder }}\n        </div>\n      </div>\n\n      <div class=\"p-1\">\n        <button\n          *ngFor=\"let option of options\"\n          type=\"button\"\n          class=\"flex w-full appearance-none box-border items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"option === value ? 'bg-accent text-accent-foreground' : ''\"\n          role=\"option\"\n          [attr.aria-selected]=\"option === value\"\n          (click)=\"select(option)\"\n        >\n          <span class=\"min-w-0 flex-1 truncate\">{{ option }}</span>\n          <svg\n            *ngIf=\"option === value\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-4 w-4 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M5 12.5L9.2 16.7L19 7\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { PdmComboboxComponent } from './combobox.component';\n\nconst COMPONENTS = [\n  PdmComboboxComponent,\n];\n\n@NgModule({\n  imports: [CommonModule, OverlayModule],\n  declarations: COMPONENTS,\n  exports: COMPONENTS\n})\nexport class PdmComboboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/pdm-ui-kit-src-command.mjs

@@ -0,0 +1,100 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from 'pdm-ui-kit/src/icon';
+import { PdmIconModule } from 'pdm-ui-kit/src/icon';
+
+class PdmCommandComponent {
+    constructor() {
+        this.open = true;
+        this.hintLabel = 'Press';
+        this.hintKey = 'J';
+        this.placeholder = 'Type a command or search...';
+        this.emptyMessage = 'No results found.';
+        this.items = [
+            { label: 'Calendar', value: 'calendar', group: 'Suggestions', icon: 'calendar' },
+            { label: 'Search emoji', value: 'emoji', group: 'Suggestions', icon: 'smile' },
+            { label: 'Calculator', value: 'calculator', group: 'Suggestions', icon: 'calculator', disabled: true },
+            { label: 'Profile', value: 'profile', group: 'Settings', icon: 'user', shortcut: '⌘P' },
+            { label: 'Billing', value: 'billing', group: 'Settings', icon: 'credit-card', shortcut: '⌘B' },
+            { label: 'Settings', value: 'settings', group: 'Settings', icon: 'settings', shortcut: '⌘S' }
+        ];
+        this.className = '';
+        this.itemSelect = new EventEmitter();
+        this.openChange = new EventEmitter();
+        this.query = '';
+    }
+    get filteredItems() {
+        const q = this.query.toLowerCase().trim();
+        if (!q)
+            return this.items;
+        return this.items.filter((item) => item.label.toLowerCase().includes(q));
+    }
+    get groupedItems() {
+        var _a;
+        const map = new Map();
+        for (const item of this.filteredItems) {
+            const key = item.group || '';
+            const arr = (_a = map.get(key)) !== null && _a !== void 0 ? _a : [];
+            arr.push(item);
+            map.set(key, arr);
+        }
+        return Array.from(map.entries()).map(([name, items]) => ({ name, items }));
+    }
+    onQueryChange(event) {
+        this.query = event.target.value;
+    }
+    toggleOpen() {
+        this.openChange.emit(!this.open);
+    }
+    select(value) {
+        this.itemSelect.emit(value);
+    }
+}
+PdmCommandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmCommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCommandComponent, selector: "pdm-command", inputs: { open: "open", hintLabel: "hintLabel", hintKey: "hintKey", placeholder: "placeholder", emptyMessage: "emptyMessage", items: "items", className: "className" }, outputs: { itemSelect: "itemSelect", openChange: "openChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngIf=\"!open\" class=\"flex items-center gap-1\">\n    <span class=\"text-sm font-medium text-muted-foreground\">{{\n      hintLabel\n    }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 appearance-none box-border items-center gap-0.5 rounded-sm border border-solid border-border bg-muted px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon\n        name=\"command\"\n        [size]=\"12\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <span class=\"text-xs text-muted-foreground\">{{ hintKey }}</span>\n    </button>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    class=\"flex w-full flex-col overflow-hidden rounded-lg border border-solid border-border bg-popover text-popover-foreground shadow-md\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-border px-3\">\n      <pdm-icon\n        name=\"search\"\n        [size]=\"16\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full appearance-none box-border bg-transparent py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground\"\n      />\n    </div>\n\n    <div class=\"max-h-[50vh] overflow-y-auto p-1 md:max-h-72\">\n      <ng-container *ngFor=\"let group of groupedItems; let groupIndex = index\">\n        <div\n          *ngIf=\"group.name\"\n          class=\"px-2 py-1.5 text-xs text-muted-foreground\"\n        >\n          {{ group.name }}\n        </div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full appearance-none box-border items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-accent text-accent-foreground' : '',\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span\n            class=\"inline-flex h-4 w-4 items-center justify-center text-foreground\"\n          >\n            <pdm-icon\n              *ngIf=\"item.icon\"\n              [name]=\"item.icon\"\n              [size]=\"16\"\n              [decorative]=\"true\"\n            ></pdm-icon>\n          </span>\n          <span class=\"min-w-0 flex-1 text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n            item.shortcut\n          }}</span>\n        </button>\n        <div\n          *ngIf=\"groupIndex === 0 && groupedItems.length > 1\"\n          class=\"my-1 border-t border-border\"\n        ></div>\n      </ng-container>\n\n      <p\n        *ngIf=\"filteredItems.length === 0\"\n        class=\"m-0 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ emptyMessage }}\n      </p>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-command', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngIf=\"!open\" class=\"flex items-center gap-1\">\n    <span class=\"text-sm font-medium text-muted-foreground\">{{\n      hintLabel\n    }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 appearance-none box-border items-center gap-0.5 rounded-sm border border-solid border-border bg-muted px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon\n        name=\"command\"\n        [size]=\"12\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <span class=\"text-xs text-muted-foreground\">{{ hintKey }}</span>\n    </button>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    class=\"flex w-full flex-col overflow-hidden rounded-lg border border-solid border-border bg-popover text-popover-foreground shadow-md\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-border px-3\">\n      <pdm-icon\n        name=\"search\"\n        [size]=\"16\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full appearance-none box-border bg-transparent py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground\"\n      />\n    </div>\n\n    <div class=\"max-h-[50vh] overflow-y-auto p-1 md:max-h-72\">\n      <ng-container *ngFor=\"let group of groupedItems; let groupIndex = index\">\n        <div\n          *ngIf=\"group.name\"\n          class=\"px-2 py-1.5 text-xs text-muted-foreground\"\n        >\n          {{ group.name }}\n        </div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full appearance-none box-border items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-accent text-accent-foreground' : '',\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span\n            class=\"inline-flex h-4 w-4 items-center justify-center text-foreground\"\n          >\n            <pdm-icon\n              *ngIf=\"item.icon\"\n              [name]=\"item.icon\"\n              [size]=\"16\"\n              [decorative]=\"true\"\n            ></pdm-icon>\n          </span>\n          <span class=\"min-w-0 flex-1 text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n            item.shortcut\n          }}</span>\n        </button>\n        <div\n          *ngIf=\"groupIndex === 0 && groupedItems.length > 1\"\n          class=\"my-1 border-t border-border\"\n        ></div>\n      </ng-container>\n\n      <p\n        *ngIf=\"filteredItems.length === 0\"\n        class=\"m-0 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ emptyMessage }}\n      </p>\n    </div>\n  </section>\n</div>\n" }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], hintLabel: [{
+                type: Input
+            }], hintKey: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], itemSelect: [{
+                type: Output
+            }], openChange: [{
+                type: Output
+            }] } });
+
+const COMPONENTS = [PdmCommandComponent];
+class PdmCommandModule {
+}
+PdmCommandModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PdmCommandModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandModule, declarations: [PdmCommandComponent], imports: [CommonModule, PdmIconModule], exports: [PdmCommandComponent] });
+PdmCommandModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandModule, imports: [CommonModule, PdmIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PdmIconModule],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PdmCommandComponent, PdmCommandModule };
+//# sourceMappingURL=pdm-ui-kit-src-command.mjs.map

package/fesm2015/pdm-ui-kit-src-command.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdm-ui-kit-src-command.mjs","sources":["../../../src/command/command.component.ts","../../../src/command/command.component.html","../../../src/command/command.module.ts","../../../src/command/pdm-ui-kit-src-command.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport type { PdmIconName } from 'pdm-ui-kit/src/icon';\n\nexport interface PdmCommandItem {\n  label: string;\n  value: string;\n  group?: string;\n  icon?: PdmIconName;\n  shortcut?: string;\n  disabled?: boolean;\n}\n\n@Component({\n  selector: 'pdm-command',\n  templateUrl: './command.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PdmCommandComponent {\n  @Input() open = true;\n  @Input() hintLabel = 'Press';\n  @Input() hintKey = 'J';\n  @Input() placeholder = 'Type a command or search...';\n  @Input() emptyMessage = 'No results found.';\n  @Input() items: PdmCommandItem[] = [\n    { label: 'Calendar', value: 'calendar', group: 'Suggestions', icon: 'calendar' },\n    { label: 'Search emoji', value: 'emoji', group: 'Suggestions', icon: 'smile' },\n    { label: 'Calculator', value: 'calculator', group: 'Suggestions', icon: 'calculator', disabled: true },\n    { label: 'Profile', value: 'profile', group: 'Settings', icon: 'user', shortcut: '⌘P' },\n    { label: 'Billing', value: 'billing', group: 'Settings', icon: 'credit-card', shortcut: '⌘B' },\n    { label: 'Settings', value: 'settings', group: 'Settings', icon: 'settings', shortcut: '⌘S' }\n  ];\n  @Input() className = '';\n\n  @Output() itemSelect = new EventEmitter<string>();\n  @Output() openChange = new EventEmitter<boolean>();\n\n  query = '';\n\n  get filteredItems(): PdmCommandItem[] {\n    const q = this.query.toLowerCase().trim();\n    if (!q) return this.items;\n    return this.items.filter((item) => item.label.toLowerCase().includes(q));\n  }\n\n  get groupedItems(): { name: string; items: PdmCommandItem[] }[] {\n    const map = new Map<string, PdmCommandItem[]>();\n    for (const item of this.filteredItems) {\n      const key = item.group || '';\n      const arr = map.get(key) ?? [];\n      arr.push(item);\n      map.set(key, arr);\n    }\n    return Array.from(map.entries()).map(([name, items]) => ({ name, items }));\n  }\n\n  onQueryChange(event: Event): void {\n    this.query = (event.target as HTMLInputElement).value;\n  }\n\n  toggleOpen(): void {\n    this.openChange.emit(!this.open);\n  }\n\n  select(value: string): void {\n    this.itemSelect.emit(value);\n  }\n}\n","<div [ngClass]=\"['w-full', className]\">\n  <div *ngIf=\"!open\" class=\"flex items-center gap-1\">\n    <span class=\"text-sm font-medium text-muted-foreground\">{{\n      hintLabel\n    }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 appearance-none box-border items-center gap-0.5 rounded-sm border border-solid border-border bg-muted px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon\n        name=\"command\"\n        [size]=\"12\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <span class=\"text-xs text-muted-foreground\">{{ hintKey }}</span>\n    </button>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    class=\"flex w-full flex-col overflow-hidden rounded-lg border border-solid border-border bg-popover text-popover-foreground shadow-md\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-border px-3\">\n      <pdm-icon\n        name=\"search\"\n        [size]=\"16\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full appearance-none box-border bg-transparent py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground\"\n      />\n    </div>\n\n    <div class=\"max-h-[50vh] overflow-y-auto p-1 md:max-h-72\">\n      <ng-container *ngFor=\"let group of groupedItems; let groupIndex = index\">\n        <div\n          *ngIf=\"group.name\"\n          class=\"px-2 py-1.5 text-xs text-muted-foreground\"\n        >\n          {{ group.name }}\n        </div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full appearance-none box-border items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-accent text-accent-foreground' : '',\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span\n            class=\"inline-flex h-4 w-4 items-center justify-center text-foreground\"\n          >\n            <pdm-icon\n              *ngIf=\"item.icon\"\n              [name]=\"item.icon\"\n              [size]=\"16\"\n              [decorative]=\"true\"\n            ></pdm-icon>\n          </span>\n          <span class=\"min-w-0 flex-1 text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n            item.shortcut\n          }}</span>\n        </button>\n        <div\n          *ngIf=\"groupIndex === 0 && groupedItems.length > 1\"\n          class=\"my-1 border-t border-border\"\n        ></div>\n      </ng-container>\n\n      <p\n        *ngIf=\"filteredItems.length === 0\"\n        class=\"m-0 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ emptyMessage }}\n      </p>\n    </div>\n  </section>\n</div>\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { PdmIconModule } from \"pdm-ui-kit/src/icon\";\nimport { PdmCommandComponent } from \"./command.component\";\n\nconst COMPONENTS = [PdmCommandComponent];\n\n@NgModule({\n\timports: [CommonModule, PdmIconModule],\n\tdeclarations: COMPONENTS,\n\texports: COMPONENTS,\n})\nexport class PdmCommandModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/pdm-ui-kit-src-context-menu.mjs

@@ -0,0 +1,191 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { mergeOverlayPanelClass, OVERLAY_BASE_Z_INDEX } from 'pdm-ui-kit/src/overlay';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class PdmContextMenuComponent {
+    constructor(overlay, viewContainerRef, _elementRef, cdr) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this._elementRef = _elementRef;
+        this.cdr = cdr;
+        this.items = [
+            { type: "item", label: "Back", value: "back", inset: true, shortcut: "⌘[" },
+            {
+                type: "item",
+                label: "Forward",
+                value: "forward",
+                inset: true,
+                shortcut: "⌘]",
+                disabled: true,
+            },
+            {
+                type: "item",
+                label: "Reload",
+                value: "reload",
+                inset: true,
+                shortcut: "⌘R",
+            },
+            {
+                type: "item",
+                label: "More Tools",
+                value: "more-tools",
+                inset: true,
+                showChevron: true,
+            },
+            { type: "separator" },
+            {
+                type: "item",
+                label: "Show Bookmarks Bar",
+                value: "show-bookmarks",
+                checked: true,
+            },
+            { type: "item", label: "Show Full URLs", value: "show-urls", inset: true },
+            { type: "separator" },
+            { type: "label", label: "People" },
+            { type: "separator" },
+            { type: "item", label: "Pedro Duarte", value: "pedro", selectedDot: true },
+            { type: "item", label: "Colm Tuite", value: "colm", inset: true },
+        ];
+        this.className = "";
+        this.triggerLabel = "Right click here";
+        this.width = 300;
+        this.height = 150;
+        this.panelClassName = "";
+        this.itemSelect = new EventEmitter();
+        this.open = false;
+        this.x = 0;
+        this.y = 0;
+        this.overlayRef = null;
+        this.outsideClickSub = null;
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.destroyOverlay();
+    }
+    onContextMenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.x = event.clientX;
+        this.y = event.clientY;
+        this.open = true;
+        this.cdr.markForCheck();
+        this.createOverlay();
+    }
+    select(item) {
+        if (item.disabled ||
+            item.type === "separator" ||
+            item.type === "label" ||
+            !item.value)
+            return;
+        this.itemSelect.emit(item.value);
+        this.open = false;
+        this.cdr.markForCheck();
+        this.destroyOverlay();
+    }
+    onDocumentClick(event) {
+        if (this.open && event.type === "click") {
+            // Don't close on click inside the menu
+            if (this.overlayRef &&
+                this.overlayRef.overlayElement.contains(event.target)) {
+                return;
+            }
+            this.close();
+        }
+    }
+    createOverlay() {
+        this.destroyOverlay();
+        // Create global position strategy at cursor position
+        const positionStrategy = this.overlay
+            .position()
+            .global()
+            .left(`${this.x}px`)
+            .top(`${this.y}px`);
+        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            panelClass,
+        });
+        const portal = new TemplatePortal(this.menuTemplateRef, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        // Close on click outside
+        this.outsideClickSub = this.overlayRef
+            .outsidePointerEvents()
+            .subscribe(() => {
+            this.close();
+        });
+    }
+    close() {
+        this.open = false;
+        this.cdr.markForCheck();
+        this.destroyOverlay();
+    }
+    destroyOverlay() {
+        if (this.outsideClickSub) {
+            this.outsideClickSub.unsubscribe();
+            this.outsideClickSub = null;
+        }
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+}
+PdmContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmContextMenuComponent, selector: "pdm-context-menu", inputs: { items: "items", className: "className", triggerLabel: "triggerLabel", width: "width", height: "height", panelClassName: "panelClassName" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentClick()", "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "menuTemplateRef", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<div\n  class=\"relative\"\n  [ngClass]=\"className\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <div\n    class=\"flex items-center justify-center rounded-md border border-solid border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-48 max-w-xs rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    >\n      <div>\n        <ng-container *ngFor=\"let item of items\">\n          <div\n            *ngIf=\"item.type === 'separator'\"\n            class=\"-mx-1 my-1 h-px bg-muted\"\n          ></div>\n\n          <div\n            *ngIf=\"item.type === 'label'\"\n            class=\"px-2 py-1.5 text-sm font-semibold text-foreground\"\n          >\n            {{ item.label }}\n          </div>\n\n          <button\n            *ngIf=\"!item.type || item.type === 'item'\"\n            type=\"button\"\n            [disabled]=\"item.disabled\"\n            class=\"relative flex w-full appearance-none box-border cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n            [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n            (click)=\"select(item)\"\n          >\n            <span\n              class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\"\n            >\n              <svg\n                *ngIf=\"item.checked\"\n                viewBox=\"0 0 24 24\"\n                class=\"h-3.5 w-3.5\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M5 12.5L9.2 16.7L19 7\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                ></path>\n              </svg>\n              <span\n                *ngIf=\"item.selectedDot\"\n                class=\"h-2 w-2 rounded-full bg-foreground\"\n              ></span>\n            </span>\n            <span class=\"min-w-0 flex-1 truncate text-foreground\">{{\n              item.label\n            }}</span>\n            <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n              item.shortcut\n            }}</span>\n            <svg\n              *ngIf=\"item.showChevron\"\n              viewBox=\"0 0 24 24\"\n              class=\"h-3.5 w-3.5 text-muted-foreground\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M9 6L15 12L9 18\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "pdm-context-menu", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"relative\"\n  [ngClass]=\"className\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <div\n    class=\"flex items-center justify-center rounded-md border border-solid border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-48 max-w-xs rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    >\n      <div>\n        <ng-container *ngFor=\"let item of items\">\n          <div\n            *ngIf=\"item.type === 'separator'\"\n            class=\"-mx-1 my-1 h-px bg-muted\"\n          ></div>\n\n          <div\n            *ngIf=\"item.type === 'label'\"\n            class=\"px-2 py-1.5 text-sm font-semibold text-foreground\"\n          >\n            {{ item.label }}\n          </div>\n\n          <button\n            *ngIf=\"!item.type || item.type === 'item'\"\n            type=\"button\"\n            [disabled]=\"item.disabled\"\n            class=\"relative flex w-full appearance-none box-border cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n            [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n            (click)=\"select(item)\"\n          >\n            <span\n              class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\"\n            >\n              <svg\n                *ngIf=\"item.checked\"\n                viewBox=\"0 0 24 24\"\n                class=\"h-3.5 w-3.5\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M5 12.5L9.2 16.7L19 7\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                ></path>\n              </svg>\n              <span\n                *ngIf=\"item.selectedDot\"\n                class=\"h-2 w-2 rounded-full bg-foreground\"\n              ></span>\n            </span>\n            <span class=\"min-w-0 flex-1 truncate text-foreground\">{{\n              item.label\n            }}</span>\n            <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n              item.shortcut\n            }}</span>\n            <svg\n              *ngIf=\"item.showChevron\"\n              viewBox=\"0 0 24 24\"\n              class=\"h-3.5 w-3.5 text-muted-foreground\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M9 6L15 12L9 18\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], triggerLabel: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], panelClassName: [{
+                type: Input
+            }], itemSelect: [{
+                type: Output
+            }], menuTemplateRef: [{
+                type: ViewChild,
+                args: ["menuTemplate"]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ["document:keydown.escape"]
+            }, {
+                type: HostListener,
+                args: ["document:click"]
+            }] } });
+
+const COMPONENTS = [
+    PdmContextMenuComponent,
+];
+class PdmContextMenuModule {
+}
+PdmContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PdmContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuModule, declarations: [PdmContextMenuComponent], imports: [CommonModule, OverlayModule], exports: [PdmContextMenuComponent] });
+PdmContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuModule, imports: [CommonModule, OverlayModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, OverlayModule],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PdmContextMenuComponent, PdmContextMenuModule };
+//# sourceMappingURL=pdm-ui-kit-src-context-menu.mjs.map