pdm-ui-kit 1.3.0 → 1.5.0

package/fesm2020/pdm-ui-kit-src-alert.mjs

@@ -2,6 +2,9 @@ import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { responsive, Z_INDEX, cn } from 'pdm-ui-kit/src/utils';
+import * as i2 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
 
 class PdmAlertComponent {
     constructor() {
@@ -39,12 +42,17 @@ class PdmAlertDialogComponent {
     constructor() {
         this.open = false;
         this.showTrigger = false;
-        this.triggerText = 'Show dialog';
-        this.title = 'Are you absolutely sure?';
-        this.description = '';
-        this.confirmText = 'Continue';
-        this.cancelText = 'Cancel';
-        this.className = '';
+        this.triggerText = "Show dialog";
+        this.title = "Are you absolutely sure?";
+        this.description = "";
+        this.confirmText = "Continue";
+        this.cancelText = "Cancel";
+        this.size = "responsive";
+        this.maxWidth = "";
+        this.className = "";
+        this.bodyClassName = "";
+        this.showFooter = true;
+        this.closeOnBackdrop = true;
         /** Close when the ESC key is pressed. Default: `true`. */
         this.closeOnEsc = true;
         this.openChange = new EventEmitter();
@@ -59,6 +67,70 @@ class PdmAlertDialogComponent {
     get isControlled() {
         return this.openChange.observed;
     }
+    get panelClassName() {
+        if (this.size === "desktop") {
+            return this.buildPanelClasses([
+                "max-w-[640px]",
+                "max-h-[calc(100vh-2rem)]",
+                "rounded-[10px]",
+            ]);
+        }
+        if (this.size === "mobile") {
+            return this.buildPanelClasses([
+                "max-w-[320px]",
+                "min-h-[240px]",
+                "rounded-[10px]",
+            ]);
+        }
+        if (this.size === "mobile-fullscreen") {
+            return this.buildPanelClasses([
+                "max-w-[320px]",
+                "h-[min(100dvh,640px)]",
+                "rounded-none",
+                "sm:rounded-[10px]",
+            ]);
+        }
+        if (this.size === "responsive") {
+            return this.buildPanelClasses([
+                "w-full",
+                "h-full",
+                "max-h-[100dvh]",
+                "rounded-t-[10px]",
+                "sm:rounded-[10px]",
+                "sm:w-auto",
+                "sm:h-auto",
+                "sm:max-w-[640px]",
+                "sm:max-h-[calc(100vh-4rem)]",
+            ]);
+        }
+        const sizeMap = {
+            sm: "sm:max-w-[400px]",
+            md: "sm:max-w-[500px]",
+            lg: "sm:max-w-[640px]",
+            xl: "sm:max-w-[800px]",
+        };
+        const maxWidth = sizeMap[this.size] || sizeMap.lg;
+        return this.buildPanelClasses([
+            "w-full",
+            "h-full",
+            "max-h-[100dvh]",
+            "rounded-t-[10px]",
+            "sm:rounded-[10px]",
+            "sm:w-auto",
+            "sm:h-auto",
+            maxWidth,
+            "sm:max-h-[calc(100vh-4rem)]",
+        ]);
+    }
+    get containerClassName() {
+        return responsive({
+            default: `fixed inset-x-0 bottom-0 ${Z_INDEX.modalBackdrop} flex items-end justify-center`,
+            sm: `fixed inset-0 ${Z_INDEX.modalBackdrop} flex items-center justify-center p-4`,
+        });
+    }
+    get bodyWrapperClassName() {
+        return cn("flex-1 min-h-0 overflow-y-auto px-4 py-4 sm:px-6", this.bodyClassName);
+    }
     onTriggerClick() {
         if (!this.isControlled) {
             this.open = true;
@@ -79,17 +151,26 @@ class PdmAlertDialogComponent {
         }
         this.openChange.emit(false);
     }
+    onBackdropClick() {
+        if (this.closeOnBackdrop) {
+            this.onCancel();
+        }
+    }
     onEsc() {
         if (this.open && this.closeOnEsc) {
             this.onCancel();
         }
     }
+    buildPanelClasses(sizeClasses) {
+        const maxWidthClass = this.maxWidth ? `sm:max-w-[${this.maxWidth}]` : "";
+        return cn("relative", Z_INDEX.modal, "flex flex-col border border-solid border-border bg-background text-foreground shadow-lg overflow-hidden", ...sizeClasses, maxWidthClass, this.className);
+    }
 }
 PdmAlertDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertDialogComponent, selector: "pdm-alert-dialog", inputs: { open: "open", showTrigger: "showTrigger", triggerText: "triggerText", title: "title", description: "description", confirmText: "confirmText", cancelText: "cancelText", className: "className", closeOnEsc: "closeOnEsc" }, outputs: { openChange: "openChange", confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-[60] w-full max-w-lg rounded-lg border border-solid border-border bg-background p-6 text-foreground shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div class=\"mt-4 flex items-center justify-end gap-2\">\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText }}\n      </button>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertDialogComponent, selector: "pdm-alert-dialog", inputs: { open: "open", showTrigger: "showTrigger", triggerText: "triggerText", title: "title", description: "description", confirmText: "confirmText", cancelText: "cancelText", size: "size", maxWidth: "maxWidth", className: "className", bodyClassName: "bodyClassName", showFooter: "showFooter", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc" }, outputs: { openChange: "openChange", confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  <section role=\"alertdialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <div class=\"flex flex-col gap-2 p-4 sm:p-6\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"showFooter\" class=\"flex flex-col gap-2 p-4 sm:p-6 border-t border-border sm:flex-row sm:justify-end\">\n      <button type=\"button\" class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\" (click)=\"onCancel()\">{{ cancelText }}</button>\n      <button type=\"button\" class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\" (click)=\"onConfirm()\">{{ confirmText }}</button>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-alert-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-[60] w-full max-w-lg rounded-lg border border-solid border-border bg-background p-6 text-foreground shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div class=\"mt-4 flex items-center justify-end gap-2\">\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText }}\n      </button>\n    </div>\n  </section>\n</div>\n" }]
+            args: [{ selector: "pdm-alert-dialog", changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  <section role=\"alertdialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <div class=\"flex flex-col gap-2 p-4 sm:p-6\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"showFooter\" class=\"flex flex-col gap-2 p-4 sm:p-6 border-t border-border sm:flex-row sm:justify-end\">\n      <button type=\"button\" class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\" (click)=\"onCancel()\">{{ cancelText }}</button>\n      <button type=\"button\" class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\" (click)=\"onConfirm()\">{{ confirmText }}</button>\n    </div>\n  </section>\n</div>\n" }]
         }], propDecorators: { open: [{
                 type: Input
             }], showTrigger: [{
@@ -104,8 +185,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], cancelText: [{
                 type: Input
+            }], size: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
             }], className: [{
                 type: Input
+            }], bodyClassName: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
+            }], closeOnBackdrop: [{
+                type: Input
             }], closeOnEsc: [{
                 type: Input
             }], openChange: [{
@@ -116,7 +207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }], onEsc: [{
                 type: HostListener,
-                args: ['document:keydown.escape']
+                args: ["document:keydown.escape"]
             }] } });
 
 const COMPONENTS = [
@@ -127,13 +218,13 @@ class PdmAlertModule {
 }
 PdmAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 PdmAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertModule, declarations: [PdmAlertComponent,
-        PdmAlertDialogComponent], imports: [CommonModule], exports: [PdmAlertComponent,
+        PdmAlertDialogComponent], imports: [CommonModule, A11yModule], exports: [PdmAlertComponent,
         PdmAlertDialogComponent] });
-PdmAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertModule, imports: [CommonModule] });
+PdmAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertModule, imports: [CommonModule, A11yModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [CommonModule, A11yModule],
                     declarations: COMPONENTS,
                     exports: COMPONENTS
                 }]

package/fesm2020/pdm-ui-kit-src-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pdm-ui-kit-src-alert.mjs","sources":["../../../src/alert/alert.component.ts","../../../src/alert/alert.component.html","../../../src/alert/alert-dialog.component.ts","../../../src/alert/alert-dialog.component.html","../../../src/alert/alert.module.ts","../../../src/alert/pdm-ui-kit-src-alert.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\nexport type PdmAlertVariant = 'default' | 'title-only' | 'destructive';\n\n@Component({\n  selector: 'pdm-alert',\n  templateUrl: './alert.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PdmAlertComponent {\n  @Input() variant: PdmAlertVariant = 'default';\n  @Input() title = 'Success! Your changes have been saved';\n  @Input() description = 'This is an alert with icon, title and description.';\n  @Input() details: string[] = [];\n  @Input() className = '';\n\n  get isDestructive(): boolean {\n    return this.variant === 'destructive';\n  }\n\n  get isTitleOnly(): boolean {\n    return this.variant === 'title-only';\n  }\n}\n\n","<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-lg border border-solid border-border bg-background p-4',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['flex gap-3', isDestructive ? 'items-start' : 'items-center']\">\n    <span class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center\">\n      <svg *ngIf=\"!isDestructive && !isTitleOnly\" aria-label=\"Success\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isTitleOnly\" aria-label=\"Info\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5 8H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isDestructive\" aria-label=\"Error\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-destructive\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M12 8V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n      </svg>\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <h4\n        [ngClass]=\"[\n          'm-0 text-sm font-medium',\n          isDestructive ? 'text-destructive' : 'text-foreground'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-sm',\n          isDestructive ? 'text-destructive' : 'text-muted-foreground'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-sm text-destructive\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n","import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';\n\n@Component({\n  selector: 'pdm-alert-dialog',\n  templateUrl: './alert-dialog.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PdmAlertDialogComponent {\n  @Input() open = false;\n  @Input() showTrigger = false;\n  @Input() triggerText = 'Show dialog';\n  @Input() title = 'Are you absolutely sure?';\n  @Input() description = '';\n  @Input() confirmText = 'Continue';\n  @Input() cancelText = 'Cancel';\n  @Input() className = '';\n\n  /** Close when the ESC key is pressed. Default: `true`. */\n  @Input() closeOnEsc = true;\n\n  @Output() openChange = new EventEmitter<boolean>();\n  @Output() confirm = new EventEmitter<void>();\n  @Output() cancel = new EventEmitter<void>();\n\n  /**\n   * Returns `true` when at least one consumer listens to `openChange`.\n   * - **Controlled** (has observers): parent manages `open` via two-way binding → only emit.\n   * - **Uncontrolled** (no observers): we own the `open` state → mutate it locally.\n   */\n  private get isControlled(): boolean {\n    return this.openChange.observed;\n  }\n\n  onTriggerClick(): void {\n    if (!this.isControlled) {\n      this.open = true;\n    }\n    this.openChange.emit(true);\n  }\n\n  onCancel(): void {\n    this.cancel.emit();\n    if (!this.isControlled) {\n      this.open = false;\n    }\n    this.openChange.emit(false);\n  }\n\n  onConfirm(): void {\n    this.confirm.emit();\n    if (!this.isControlled) {\n      this.open = false;\n    }\n    this.openChange.emit(false);\n  }\n\n  @HostListener('document:keydown.escape')\n  onEsc(): void {\n    if (this.open && this.closeOnEsc) {\n      this.onCancel();\n    }\n  }\n}\n","<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-[60] w-full max-w-lg rounded-lg border border-solid border-border bg-background p-6 text-foreground shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div class=\"mt-4 flex items-center justify-end gap-2\">\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText }}\n      </button>\n    </div>\n  </section>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { PdmAlertComponent } from './alert.component';\nimport { PdmAlertDialogComponent } from './alert-dialog.component';\n\nconst COMPONENTS = [\n  PdmAlertComponent,\n  PdmAlertDialogComponent,\n];\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: COMPONENTS,\n  exports: COMPONENTS\n})\nexport class PdmAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pdm-ui-kit-src-alert.mjs","sources":["../../../src/alert/alert.component.ts","../../../src/alert/alert.component.html","../../../src/alert/alert-dialog.component.ts","../../../src/alert/alert-dialog.component.html","../../../src/alert/alert.module.ts","../../../src/alert/pdm-ui-kit-src-alert.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\nexport type PdmAlertVariant = 'default' | 'title-only' | 'destructive';\n\n@Component({\n  selector: 'pdm-alert',\n  templateUrl: './alert.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PdmAlertComponent {\n  @Input() variant: PdmAlertVariant = 'default';\n  @Input() title = 'Success! Your changes have been saved';\n  @Input() description = 'This is an alert with icon, title and description.';\n  @Input() details: string[] = [];\n  @Input() className = '';\n\n  get isDestructive(): boolean {\n    return this.variant === 'destructive';\n  }\n\n  get isTitleOnly(): boolean {\n    return this.variant === 'title-only';\n  }\n}\n\n","<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-lg border border-solid border-border bg-background p-4',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['flex gap-3', isDestructive ? 'items-start' : 'items-center']\">\n    <span class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center\">\n      <svg *ngIf=\"!isDestructive && !isTitleOnly\" aria-label=\"Success\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isTitleOnly\" aria-label=\"Info\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5 8H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isDestructive\" aria-label=\"Error\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-destructive\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M12 8V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n      </svg>\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <h4\n        [ngClass]=\"[\n          'm-0 text-sm font-medium',\n          isDestructive ? 'text-destructive' : 'text-foreground'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-sm',\n          isDestructive ? 'text-destructive' : 'text-muted-foreground'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-sm text-destructive\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n","import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tEventEmitter,\n\tHostListener,\n\tInput,\n\tOutput,\n} from \"@angular/core\";\nimport { cn, responsive, Z_INDEX } from \"pdm-ui-kit/src/utils\";\n\ntype PdmAlertDialogSize =\n\t| \"desktop\"\n\t| \"mobile\"\n\t| \"mobile-fullscreen\"\n\t| \"sm\"\n\t| \"md\"\n\t| \"lg\"\n\t| \"xl\"\n\t| \"responsive\";\n\n@Component({\n\tselector: \"pdm-alert-dialog\",\n\ttemplateUrl: \"./alert-dialog.component.html\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PdmAlertDialogComponent {\n\t@Input() open = false;\n\t@Input() showTrigger = false;\n\t@Input() triggerText = \"Show dialog\";\n\t@Input() title = \"Are you absolutely sure?\";\n\t@Input() description = \"\";\n\t@Input() confirmText = \"Continue\";\n\t@Input() cancelText = \"Cancel\";\n\t@Input() size: PdmAlertDialogSize = \"responsive\";\n\t@Input() maxWidth = \"\";\n\t@Input() className = \"\";\n\t@Input() bodyClassName = \"\";\n\t@Input() showFooter = true;\n\t@Input() closeOnBackdrop = true;\n\n\t/** Close when the ESC key is pressed. Default: `true`. */\n\t@Input() closeOnEsc = true;\n\n\t@Output() openChange = new EventEmitter<boolean>();\n\t@Output() confirm = new EventEmitter<void>();\n\t@Output() cancel = new EventEmitter<void>();\n\n\t/**\n\t * Returns `true` when at least one consumer listens to `openChange`.\n\t * - **Controlled** (has observers): parent manages `open` via two-way binding → only emit.\n\t * - **Uncontrolled** (no observers): we own the `open` state → mutate it locally.\n\t */\n\tprivate get isControlled(): boolean {\n\t\treturn this.openChange.observed;\n\t}\n\n\tget panelClassName(): string {\n\t\tif (this.size === \"desktop\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t\"max-w-[640px]\",\n\t\t\t\t\"max-h-[calc(100vh-2rem)]\",\n\t\t\t\t\"rounded-[10px]\",\n\t\t\t]);\n\t\t}\n\n\t\tif (this.size === \"mobile\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t\"max-w-[320px]\",\n\t\t\t\t\"min-h-[240px]\",\n\t\t\t\t\"rounded-[10px]\",\n\t\t\t]);\n\t\t}\n\n\t\tif (this.size === \"mobile-fullscreen\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t\"max-w-[320px]\",\n\t\t\t\t\"h-[min(100dvh,640px)]\",\n\t\t\t\t\"rounded-none\",\n\t\t\t\t\"sm:rounded-[10px]\",\n\t\t\t]);\n\t\t}\n\n\t\tif (this.size === \"responsive\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t\"w-full\",\n\t\t\t\t\"h-full\",\n\t\t\t\t\"max-h-[100dvh]\",\n\t\t\t\t\"rounded-t-[10px]\",\n\t\t\t\t\"sm:rounded-[10px]\",\n\t\t\t\t\"sm:w-auto\",\n\t\t\t\t\"sm:h-auto\",\n\t\t\t\t\"sm:max-w-[640px]\",\n\t\t\t\t\"sm:max-h-[calc(100vh-4rem)]\",\n\t\t\t]);\n\t\t}\n\n\t\tconst sizeMap = {\n\t\t\tsm: \"sm:max-w-[400px]\",\n\t\t\tmd: \"sm:max-w-[500px]\",\n\t\t\tlg: \"sm:max-w-[640px]\",\n\t\t\txl: \"sm:max-w-[800px]\",\n\t\t};\n\t\tconst maxWidth = sizeMap[this.size as keyof typeof sizeMap] || sizeMap.lg;\n\n\t\treturn this.buildPanelClasses([\n\t\t\t\"w-full\",\n\t\t\t\"h-full\",\n\t\t\t\"max-h-[100dvh]\",\n\t\t\t\"rounded-t-[10px]\",\n\t\t\t\"sm:rounded-[10px]\",\n\t\t\t\"sm:w-auto\",\n\t\t\t\"sm:h-auto\",\n\t\t\tmaxWidth,\n\t\t\t\"sm:max-h-[calc(100vh-4rem)]\",\n\t\t]);\n\t}\n\n\tget containerClassName(): string {\n\t\treturn responsive({\n\t\t\tdefault: `fixed inset-x-0 bottom-0 ${Z_INDEX.modalBackdrop} flex items-end justify-center`,\n\t\t\tsm: `fixed inset-0 ${Z_INDEX.modalBackdrop} flex items-center justify-center p-4`,\n\t\t});\n\t}\n\n\tget bodyWrapperClassName(): string {\n\t\treturn cn(\n\t\t\t\"flex-1 min-h-0 overflow-y-auto px-4 py-4 sm:px-6\",\n\t\t\tthis.bodyClassName,\n\t\t);\n\t}\n\n\tonTriggerClick(): void {\n\t\tif (!this.isControlled) {\n\t\t\tthis.open = true;\n\t\t}\n\t\tthis.openChange.emit(true);\n\t}\n\n\tonCancel(): void {\n\t\tthis.cancel.emit();\n\t\tif (!this.isControlled) {\n\t\t\tthis.open = false;\n\t\t}\n\t\tthis.openChange.emit(false);\n\t}\n\n\tonConfirm(): void {\n\t\tthis.confirm.emit();\n\t\tif (!this.isControlled) {\n\t\t\tthis.open = false;\n\t\t}\n\t\tthis.openChange.emit(false);\n\t}\n\n\tonBackdropClick(): void {\n\t\tif (this.closeOnBackdrop) {\n\t\t\tthis.onCancel();\n\t\t}\n\t}\n\n\t@HostListener(\"document:keydown.escape\")\n\tonEsc(): void {\n\t\tif (this.open && this.closeOnEsc) {\n\t\t\tthis.onCancel();\n\t\t}\n\t}\n\n\tprivate buildPanelClasses(sizeClasses: string[]): string {\n\t\tconst maxWidthClass = this.maxWidth ? `sm:max-w-[${this.maxWidth}]` : \"\";\n\n\t\treturn cn(\n\t\t\t\"relative\",\n\t\t\tZ_INDEX.modal,\n\t\t\t\"flex flex-col border border-solid border-border bg-background text-foreground shadow-lg overflow-hidden\",\n\t\t\t...sizeClasses,\n\t\t\tmaxWidthClass,\n\t\t\tthis.className,\n\t\t);\n\t}\n}\n","<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  <section role=\"alertdialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <div class=\"flex flex-col gap-2 p-4 sm:p-6\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"showFooter\" class=\"flex flex-col gap-2 p-4 sm:p-6 border-t border-border sm:flex-row sm:justify-end\">\n      <button type=\"button\" class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\" (click)=\"onCancel()\">{{ cancelText }}</button>\n      <button type=\"button\" class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\" (click)=\"onConfirm()\">{{ confirmText }}</button>\n    </div>\n  </section>\n</div>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { PdmAlertComponent } from './alert.component';\nimport { PdmAlertDialogComponent } from './alert-dialog.component';\n\nconst COMPONENTS = [\n  PdmAlertComponent,\n  PdmAlertDialogComponent,\n];\n\n@NgModule({\n  imports: [CommonModule, A11yModule],\n  declarations: COMPONENTS,\n  exports: COMPONENTS\n})\nexport class PdmAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/pdm-ui-kit-src-calendar.mjs

@@ -555,6 +555,7 @@ class PdmDatePickerComponent {
         this.labelClassName = "";
         this.className = "";
         this.triggerClassName = "";
+        this.iconOnly = false;
         /**
          * Additional CSS classes applied to the overlay panel.
          * Backward-compatible: mapped to `overlayOptions.panelClass` when `overlayOptions` is not set.
@@ -657,15 +658,22 @@ class PdmDatePickerComponent {
     get rootClasses() {
         return [
             "grid gap-2",
-            this.resolvedVariant === "range" ? "w-[280px]" : "w-[197px]",
+            this.iconOnly
+                ? "inline-grid w-auto"
+                : this.resolvedVariant === "range"
+                    ? "w-[280px]"
+                    : "w-[197px]",
             this.className,
         ];
     }
     get triggerClasses() {
         const focusStyle = this._open || this.triggerFocused;
         return [
-            "border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive relative flex w-full appearance-none box-border items-center gap-2 overflow-hidden rounded-lg border border-solid bg-background px-3 py-[7.5px] text-left text-sm shadow-sm outline-none transition-colors",
+            "border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive relative flex appearance-none box-border items-center overflow-hidden rounded-lg border border-solid bg-background text-sm shadow-sm outline-none transition-colors",
             "min-h-[36px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+            this.iconOnly
+                ? "size-9 justify-center p-0"
+                : "w-full gap-2 px-3 py-[7.5px] text-left",
             focusStyle ? "border-ring ring-2 ring-ring/50" : "",
             this.invalid ? "border-destructive ring-destructive/20" : "",
             this.triggerClassName,
@@ -813,10 +821,10 @@ class PdmDatePickerComponent {
     }
 }
 PdmDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDatePickerComponent, selector: "pdm-date-picker", inputs: { id: "id", variant: "variant", label: "label", labelClassName: "labelClassName", className: "className", triggerClassName: "triggerClassName", panelClassName: "panelClassName", overlayOptions: "overlayOptions", placeholder: "placeholder", rangePlaceholder: "rangePlaceholder", format: "format", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", allowSameDayRange: "allowSameDayRange", closeOnSelect: "closeOnSelect", minDate: "minDate", maxDate: "maxDate", minYear: "minYear", maxYear: "maxYear", disabledDates: "disabledDates", isDateDisabled: "isDateDisabled", open: "open", value: "value", rangeValue: "rangeValue" }, outputs: { valueChange: "valueChange", rangeValueChange: "rangeValueChange", openChange: "openChange", monthChange: "monthChange" }, 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]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"triggerId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"triggerClasses\"\n    [attr.title]=\"displayText\"\n    (click)=\"toggleOpen()\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n        <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n        <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n\n    <span [ngClass]=\"textClasses\">{{ displayText }}</span>\n  </button>\n</div>\n\n<ng-template #panelTemplate>\n  <div [id]=\"panelId\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n    <pdm-calendar\n      [variant]=\"resolvedVariant\"\n      [value]=\"value\"\n      [rangeValue]=\"rangeValue\"\n      [readonly]=\"readonly\"\n      [allowSameDayRange]=\"allowSameDayRange\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [minYear]=\"minYear\"\n      [maxYear]=\"maxYear\"\n      [disabledDates]=\"disabledDates\"\n      [isDateDisabled]=\"isDateDisabled\"\n      (valueChange)=\"onCalendarValueChange($event)\"\n      (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n      (monthChange)=\"onCalendarMonthChange($event)\"\n    ></pdm-calendar>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PdmLabelComponent, selector: "pdm-label", inputs: ["forId", "required", "className"] }, { kind: "component", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: ["variant", "className", "disabledDates", "minDate", "maxDate", "minYear", "maxYear", "isDateDisabled", "allowSameDayRange", "readonly", "value", "rangeValue", "month"], outputs: ["valueChange", "rangeValueChange", "monthChange", "dateClick", "disabledDateClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDatePickerComponent, selector: "pdm-date-picker", inputs: { id: "id", variant: "variant", label: "label", labelClassName: "labelClassName", className: "className", triggerClassName: "triggerClassName", iconOnly: "iconOnly", panelClassName: "panelClassName", overlayOptions: "overlayOptions", placeholder: "placeholder", rangePlaceholder: "rangePlaceholder", format: "format", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", allowSameDayRange: "allowSameDayRange", closeOnSelect: "closeOnSelect", minDate: "minDate", maxDate: "maxDate", minYear: "minYear", maxYear: "maxYear", disabledDates: "disabledDates", isDateDisabled: "isDateDisabled", open: "open", value: "value", rangeValue: "rangeValue" }, outputs: { valueChange: "valueChange", rangeValueChange: "rangeValueChange", openChange: "openChange", monthChange: "monthChange" }, 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]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"triggerId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-label]=\"iconOnly ? displayText : null\"\n    [ngClass]=\"triggerClasses\"\n    [attr.title]=\"displayText\"\n    (click)=\"toggleOpen()\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n        <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n        <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n\n    <span *ngIf=\"!iconOnly\" [ngClass]=\"textClasses\">{{ displayText }}</span>\n  </button>\n</div>\n\n<ng-template #panelTemplate>\n  <div [id]=\"panelId\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n    <pdm-calendar\n      [variant]=\"resolvedVariant\"\n      [value]=\"value\"\n      [rangeValue]=\"rangeValue\"\n      [readonly]=\"readonly\"\n      [allowSameDayRange]=\"allowSameDayRange\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [minYear]=\"minYear\"\n      [maxYear]=\"maxYear\"\n      [disabledDates]=\"disabledDates\"\n      [isDateDisabled]=\"isDateDisabled\"\n      (valueChange)=\"onCalendarValueChange($event)\"\n      (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n      (monthChange)=\"onCalendarMonthChange($event)\"\n    ></pdm-calendar>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PdmLabelComponent, selector: "pdm-label", inputs: ["forId", "required", "className"] }, { kind: "component", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: ["variant", "className", "disabledDates", "minDate", "maxDate", "minYear", "maxYear", "isDateDisabled", "allowSameDayRange", "readonly", "value", "rangeValue", "month"], outputs: ["valueChange", "rangeValueChange", "monthChange", "dateClick", "disabledDateClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-date-picker", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"triggerId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"triggerClasses\"\n    [attr.title]=\"displayText\"\n    (click)=\"toggleOpen()\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n        <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n        <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n\n    <span [ngClass]=\"textClasses\">{{ displayText }}</span>\n  </button>\n</div>\n\n<ng-template #panelTemplate>\n  <div [id]=\"panelId\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n    <pdm-calendar\n      [variant]=\"resolvedVariant\"\n      [value]=\"value\"\n      [rangeValue]=\"rangeValue\"\n      [readonly]=\"readonly\"\n      [allowSameDayRange]=\"allowSameDayRange\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [minYear]=\"minYear\"\n      [maxYear]=\"maxYear\"\n      [disabledDates]=\"disabledDates\"\n      [isDateDisabled]=\"isDateDisabled\"\n      (valueChange)=\"onCalendarValueChange($event)\"\n      (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n      (monthChange)=\"onCalendarMonthChange($event)\"\n    ></pdm-calendar>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: "pdm-date-picker", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"triggerId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-label]=\"iconOnly ? displayText : null\"\n    [ngClass]=\"triggerClasses\"\n    [attr.title]=\"displayText\"\n    (click)=\"toggleOpen()\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n        <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n        <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n\n    <span *ngIf=\"!iconOnly\" [ngClass]=\"textClasses\">{{ displayText }}</span>\n  </button>\n</div>\n\n<ng-template #panelTemplate>\n  <div [id]=\"panelId\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n    <pdm-calendar\n      [variant]=\"resolvedVariant\"\n      [value]=\"value\"\n      [rangeValue]=\"rangeValue\"\n      [readonly]=\"readonly\"\n      [allowSameDayRange]=\"allowSameDayRange\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [minYear]=\"minYear\"\n      [maxYear]=\"maxYear\"\n      [disabledDates]=\"disabledDates\"\n      [isDateDisabled]=\"isDateDisabled\"\n      (valueChange)=\"onCalendarValueChange($event)\"\n      (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n      (monthChange)=\"onCalendarMonthChange($event)\"\n    ></pdm-calendar>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { triggerRef: [{
                 type: ViewChild,
                 args: ["triggerEl"]
@@ -835,6 +843,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], triggerClassName: [{
                 type: Input
+            }], iconOnly: [{
+                type: Input
             }], panelClassName: [{
                 type: Input
             }], overlayOptions: [{