pdm-ui-kit 0.1.34 → 0.1.36

package/fesm2020/pdm-ui-kit.mjs

@@ -2288,18 +2288,20 @@ class PdmDialogComponent {
     constructor() {
         this.open = false;
         this.variant = 'default';
+        this.size = 'desktop';
         this.title = 'Edit profile';
         this.description = 'Make changes to your profile here. Click save when you\'re done.';
         this.closeOnBackdrop = true;
         this.closeOnEsc = true;
         this.showCloseButton = true;
+        this.showHeader = true;
+        this.showFooter = true;
         this.primaryActionText = 'Save changes';
         this.secondaryActionText = 'Cancel';
-        this.nameLabel = 'Name';
-        this.nameValue = 'Pedro Duarte';
-        this.usernameLabel = 'Username';
-        this.usernameValue = '@peduarte';
-        this.linkValue = 'https://ui.shadcn.com/docs/installation';
+        this.alignFooter = 'right';
+        this.headerClassName = '';
+        this.bodyClassName = '';
+        this.footerClassName = '';
         this.className = '';
         this.openChange = new EventEmitter();
         this.primaryAction = new EventEmitter();
@@ -2324,16 +2326,54 @@ class PdmDialogComponent {
             this.close();
         }
     }
+    get panelClassName() {
+        const base = [
+            'relative z-10 w-full border border-border bg-background text-foreground shadow-lg',
+            this.size === 'desktop' ? 'max-w-[640px] max-h-[calc(100vh-2rem)] rounded-[10px] overflow-hidden' : '',
+            this.size === 'mobile' ? 'max-w-[320px] min-h-[240px] rounded-[10px] overflow-hidden' : '',
+            this.size === 'mobile-fullscreen'
+                ? 'max-w-[320px] h-[min(100dvh,640px)] rounded-none sm:rounded-[10px] overflow-hidden'
+                : '',
+            this.className
+        ];
+        return base.filter(Boolean).join(' ');
+    }
+    get bodyWrapperClassName() {
+        const base = [
+            'min-h-0 flex-1',
+            this.size === 'mobile-fullscreen' ? 'overflow-y-auto px-4 py-6' : 'px-6 py-6',
+            this.bodyClassName
+        ];
+        return base.filter(Boolean).join(' ');
+    }
+    get headerWrapperClassName() {
+        return ['flex items-start justify-between gap-3 p-4', this.headerClassName].filter(Boolean).join(' ');
+    }
+    get footerWrapperClassName() {
+        const effectiveAlign = this.alignFooter === 'right' && this.variant === 'custom-close' ? 'left' : this.alignFooter;
+        const base = [
+            'p-4',
+            effectiveAlign === 'full-width'
+                ? 'flex flex-col gap-2'
+                : effectiveAlign === 'left'
+                    ? 'flex items-center gap-2 justify-start'
+                    : 'flex items-center gap-2 justify-end',
+            this.footerClassName
+        ];
+        return base.filter(Boolean).join(' ');
+    }
 }
 PdmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", nameLabel: "nameLabel", nameValue: "nameValue", usernameLabel: "usernameLabel", usernameValue: "usernameValue", linkValue: "linkValue", className: "className" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n  <section\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-10 w-full max-w-lg rounded-lg border border-border bg-background p-6 shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex items-start justify-between gap-3\">\n      <div class=\"min-w-0\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <ng-container *ngIf=\"variant === 'default'; else customCloseDialog\">\n      <div class=\"mt-4 flex flex-col gap-4\">\n        <div class=\"flex flex-col gap-3\">\n          <label class=\"text-sm font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-9 rounded-md border border-border bg-background px-3 py-1 text-sm text-muted-foreground shadow-sm\">{{ nameValue }}</div>\n        </div>\n        <div class=\"flex flex-col gap-3\">\n          <label class=\"text-sm font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-9 rounded-md border border-border bg-background px-3 py-1 text-sm text-muted-foreground shadow-sm\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <div class=\"mt-4 flex justify-end gap-2\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </div>\n    </ng-container>\n\n    <ng-template #customCloseDialog>\n      <div class=\"mt-4 h-9 rounded-md border border-border bg-background px-3 py-1 text-sm text-muted-foreground shadow-sm\">\n        {{ linkValue }}\n      </div>\n      <div class=\"mt-4 flex\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm\"\n          (click)=\"onSecondaryAction()\"\n        >\n          Close\n        </button>\n      </div>\n    </ng-template>\n\n    <div class=\"mt-4\">\n      <ng-content></ng-content>\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 });
+PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", size: "size", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton", showHeader: "showHeader", showFooter: "showFooter", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", alignFooter: "alignFooter", headerClassName: "headerClassName", bodyClassName: "bodyClassName", footerClassName: "footerClassName", className: "className" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n  <section\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-10 w-full max-w-lg rounded-lg border border-border bg-background p-6 shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex items-start justify-between gap-3\">\n      <div class=\"min-w-0\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <ng-container *ngIf=\"variant === 'default'; else customCloseDialog\">\n      <div class=\"mt-4 flex flex-col gap-4\">\n        <div class=\"flex flex-col gap-3\">\n          <label class=\"text-sm font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-9 rounded-md border border-border bg-background px-3 py-1 text-sm text-muted-foreground shadow-sm\">{{ nameValue }}</div>\n        </div>\n        <div class=\"flex flex-col gap-3\">\n          <label class=\"text-sm font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-9 rounded-md border border-border bg-background px-3 py-1 text-sm text-muted-foreground shadow-sm\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <div class=\"mt-4 flex justify-end gap-2\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </div>\n    </ng-container>\n\n    <ng-template #customCloseDialog>\n      <div class=\"mt-4 h-9 rounded-md border border-border bg-background px-3 py-1 text-sm text-muted-foreground shadow-sm\">\n        {{ linkValue }}\n      </div>\n      <div class=\"mt-4 flex\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm\"\n          (click)=\"onSecondaryAction()\"\n        >\n          Close\n        </button>\n      </div>\n    </ng-template>\n\n    <div class=\"mt-4\">\n      <ng-content></ng-content>\n    </div>\n  </section>\n</div>\n" }]
+            args: [{ selector: 'pdm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n" }]
         }], propDecorators: { open: [{
                 type: Input
             }], variant: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], title: [{
                 type: Input
             }], description: [{
@@ -2344,19 +2384,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], showCloseButton: [{
                 type: Input
+            }], showHeader: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
             }], primaryActionText: [{
                 type: Input
             }], secondaryActionText: [{
                 type: Input
-            }], nameLabel: [{
+            }], alignFooter: [{
                 type: Input
-            }], nameValue: [{
-                type: Input
-            }], usernameLabel: [{
+            }], headerClassName: [{
                 type: Input
-            }], usernameValue: [{
+            }], bodyClassName: [{
                 type: Input
-            }], linkValue: [{
+            }], footerClassName: [{
                 type: Input
             }], className: [{
                 type: Input