pdm-ui-kit 0.1.4 → 0.1.6

package/dist/pdm-ui-kit/fesm2020/pdm-ui-kit.mjs

@@ -1,2975 +0,0 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, ViewChildren, NgModule } from '@angular/core';
-
-class PdmAccordionComponent {
-    constructor() {
-        this.items = [];
-        this.expandedIndex = -1;
-        this.className = '';
-        this.expandedIndexChange = new EventEmitter();
-    }
-    isExpanded(index) {
-        return this.expandedIndex === index;
-    }
-    contentLines(content) {
-        if (Array.isArray(content))
-            return content;
-        return content
-            .split('\n')
-            .map((line) => line.trim())
-            .filter((line) => line.length > 0);
-    }
-    toggle(index) {
-        if (this.items[index]?.disabled)
-            return;
-        this.expandedIndexChange.emit(this.expandedIndex === index ? -1 : index);
-    }
-}
-PdmAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmAccordionComponent, selector: "pdm-accordion", inputs: { items: "items", expandedIndex: "expandedIndex", className: "className" }, outputs: { expandedIndexChange: "expandedIndexChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngFor=\"let item of items; let i = index\" class=\"border-b border-[#e5e5e5]\">\n    <h3>\n      <button\n        type=\"button\"\n        class=\"flex h-[52px] w-full items-center justify-between py-4 text-left text-[14px] font-medium leading-5 text-[#0a0a0a] transition-colors\"\n        [disabled]=\"item.disabled\"\n        [attr.aria-expanded]=\"isExpanded(i)\"\n        [attr.aria-controls]=\"item.id + '-panel'\"\n        (click)=\"toggle(i)\"\n      >\n        <span class=\"pr-[10px]\">{{ item.title }}</span>\n        <span class=\"inline-flex h-6 w-6 items-center justify-center text-[#0a0a0a]\" aria-hidden=\"true\">\n          <svg\n            class=\"h-4 w-4 transition-transform\"\n            [ngClass]=\"isExpanded(i) ? 'rotate-180' : ''\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M3.5 6.5L8 11L12.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </button>\n    </h3>\n    <div\n      *ngIf=\"isExpanded(i)\"\n      [id]=\"item.id + '-panel'\"\n      class=\"flex flex-col gap-4 pb-4 text-[14px] font-normal leading-5 text-[#0a0a0a]\"\n    >\n      <p *ngFor=\"let line of contentLines(item.content)\" class=\"m-0\">{{ line }}</p>\n    </div>\n  </div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmAccordionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-accordion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngFor=\"let item of items; let i = index\" class=\"border-b border-[#e5e5e5]\">\n    <h3>\n      <button\n        type=\"button\"\n        class=\"flex h-[52px] w-full items-center justify-between py-4 text-left text-[14px] font-medium leading-5 text-[#0a0a0a] transition-colors\"\n        [disabled]=\"item.disabled\"\n        [attr.aria-expanded]=\"isExpanded(i)\"\n        [attr.aria-controls]=\"item.id + '-panel'\"\n        (click)=\"toggle(i)\"\n      >\n        <span class=\"pr-[10px]\">{{ item.title }}</span>\n        <span class=\"inline-flex h-6 w-6 items-center justify-center text-[#0a0a0a]\" aria-hidden=\"true\">\n          <svg\n            class=\"h-4 w-4 transition-transform\"\n            [ngClass]=\"isExpanded(i) ? 'rotate-180' : ''\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M3.5 6.5L8 11L12.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </button>\n    </h3>\n    <div\n      *ngIf=\"isExpanded(i)\"\n      [id]=\"item.id + '-panel'\"\n      class=\"flex flex-col gap-4 pb-4 text-[14px] font-normal leading-5 text-[#0a0a0a]\"\n    >\n      <p *ngFor=\"let line of contentLines(item.content)\" class=\"m-0\">{{ line }}</p>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], expandedIndex: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], expandedIndexChange: [{
-                type: Output
-            }] } });
-
-class PdmAlertComponent {
-    constructor() {
-        this.variant = 'default';
-        this.title = 'Success! Your changes have been saved';
-        this.description = 'This is an alert with icon, title and description.';
-        this.details = [];
-        this.className = '';
-    }
-    get isDestructive() {
-        return this.variant === 'destructive';
-    }
-    get isTitleOnly() {
-        return this.variant === 'title-only';
-    }
-}
-PdmAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmAlertComponent, selector: "pdm-alert", inputs: { variant: "variant", title: "title", description: "description", details: "details", className: "className" }, ngImport: i0, template: "<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-[10px] border border-[#e5e5e5] bg-white px-4 py-3',\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\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-[#0a0a0a]\" 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\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-[#0a0a0a]\" 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\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-[#dc2626]\" 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-[14px] font-medium leading-5',\n          isDestructive ? 'text-[#dc2626]' : 'text-[#0a0a0a]'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-[14px] leading-5',\n          isDestructive ? 'text-[#dc2626]' : 'text-[#0a0a0a] font-light'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-[14px] leading-5 text-[#dc2626]\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmAlertComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-[10px] border border-[#e5e5e5] bg-white px-4 py-3',\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\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-[#0a0a0a]\" 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\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-[#0a0a0a]\" 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\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-[#dc2626]\" 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-[14px] font-medium leading-5',\n          isDestructive ? 'text-[#dc2626]' : 'text-[#0a0a0a]'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-[14px] leading-5',\n          isDestructive ? 'text-[#dc2626]' : 'text-[#0a0a0a] font-light'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-[14px] leading-5 text-[#dc2626]\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n\n" }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], details: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-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.openChange = new EventEmitter();
-        this.confirm = new EventEmitter();
-        this.cancel = new EventEmitter();
-    }
-    onTriggerClick() {
-        this.open = true;
-        this.openChange.emit(true);
-    }
-    onCancel() {
-        this.cancel.emit();
-        this.open = false;
-        this.openChange.emit(false);
-    }
-    onConfirm() {
-        this.confirm.emit();
-        this.open = false;
-        this.openChange.emit(false);
-    }
-    onEsc() {
-        if (this.open) {
-            this.onCancel();
-        }
-    }
-}
-PdmAlertDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmAlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmAlertDialogComponent, selector: "pdm-alert-dialog", inputs: { open: "open", showTrigger: "showTrigger", triggerText: "triggerText", title: "title", description: "description", confirmText: "confirmText", cancelText: "cancelText", className: "className" }, 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 items-center justify-center rounded-[8px] border border-[#e5e5e5] bg-[#f5f5f5] px-4 py-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\"\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-[rgba(0,0,0,0.3)]\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-10 w-full max-w-[552px] rounded-[10px] border border-[#e5e5e5] bg-white p-6 text-[#0a0a0a] shadow-[0px_10px_15px_0px_rgba(0,0,0,0.1),0px_4px_6px_0px_rgba(0,0,0,0.1)]',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"text-[18px] font-semibold leading-7 tracking-normal\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"text-[14px] font-normal leading-5 text-[#737373]\">{{ 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 items-center justify-center rounded-[10px] border border-[#e5e5e5] bg-white px-4 py-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 items-center justify-center rounded-[10px] bg-[#171717] px-4 py-2 text-[14px] font-medium leading-5 text-[#fafafa] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\"\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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 items-center justify-center rounded-[8px] border border-[#e5e5e5] bg-[#f5f5f5] px-4 py-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\"\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-[rgba(0,0,0,0.3)]\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-10 w-full max-w-[552px] rounded-[10px] border border-[#e5e5e5] bg-white p-6 text-[#0a0a0a] shadow-[0px_10px_15px_0px_rgba(0,0,0,0.1),0px_4px_6px_0px_rgba(0,0,0,0.1)]',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"text-[18px] font-semibold leading-7 tracking-normal\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"text-[14px] font-normal leading-5 text-[#737373]\">{{ 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 items-center justify-center rounded-[10px] border border-[#e5e5e5] bg-white px-4 py-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 items-center justify-center rounded-[10px] bg-[#171717] px-4 py-2 text-[14px] font-medium leading-5 text-[#fafafa] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText }}\n      </button>\n    </div>\n  </section>\n</div>\n" }]
-        }], propDecorators: { open: [{
-                type: Input
-            }], showTrigger: [{
-                type: Input
-            }], triggerText: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], confirmText: [{
-                type: Input
-            }], cancelText: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }], confirm: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], onEsc: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
-
-class PdmAspectRatioComponent {
-    constructor() {
-        this.ratio = 16 / 9;
-        this.imageSrc = '';
-        this.imageAlt = '';
-        this.className = '';
-    }
-    get paddingTop() {
-        if (!this.ratio || this.ratio <= 0)
-            return '56.25%';
-        return (100 / this.ratio).toFixed(4) + '%';
-    }
-}
-PdmAspectRatioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmAspectRatioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAspectRatioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmAspectRatioComponent, selector: "pdm-aspect-ratio", inputs: { ratio: "ratio", imageSrc: "imageSrc", imageAlt: "imageAlt", className: "className" }, ngImport: i0, template: "<div class=\"relative w-full\" [ngClass]=\"className\" [style.paddingTop]=\"paddingTop\">\n  <div class=\"absolute inset-0 overflow-hidden rounded-[10px]\">\n    <img\n      *ngIf=\"imageSrc\"\n      [src]=\"imageSrc\"\n      [alt]=\"imageAlt\"\n      class=\"pointer-events-none h-full w-full rounded-[10px] object-cover\"\n    />\n    <ng-content></ng-content>\n  </div>\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: "15.2.10", ngImport: i0, type: PdmAspectRatioComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-aspect-ratio', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative w-full\" [ngClass]=\"className\" [style.paddingTop]=\"paddingTop\">\n  <div class=\"absolute inset-0 overflow-hidden rounded-[10px]\">\n    <img\n      *ngIf=\"imageSrc\"\n      [src]=\"imageSrc\"\n      [alt]=\"imageAlt\"\n      class=\"pointer-events-none h-full w-full rounded-[10px] object-cover\"\n    />\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
-        }], propDecorators: { ratio: [{
-                type: Input
-            }], imageSrc: [{
-                type: Input
-            }], imageAlt: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmAvatarComponent {
-    constructor() {
-        this.src = '';
-        this.alt = 'Avatar';
-        this.fallback = 'U';
-        this.shape = 'circle';
-        this.size = 'md';
-        this.groupSources = [];
-        this.className = '';
-        this.sizeClasses = {
-            sm: 'h-8 w-8',
-            md: 'h-10 w-10',
-            lg: 'h-12 w-12'
-        };
-    }
-    get isGroup() {
-        return this.groupSources.length > 0;
-    }
-    get radiusClass() {
-        return this.shape === 'square' ? 'rounded-[8px]' : 'rounded-full';
-    }
-}
-PdmAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmAvatarComponent, selector: "pdm-avatar", inputs: { src: "src", alt: "alt", fallback: "fallback", shape: "shape", size: "size", groupSources: "groupSources", className: "className" }, ngImport: i0, template: "<div *ngIf=\"!isGroup\" [ngClass]=\"['relative flex shrink-0 overflow-hidden', radiusClass, sizeClasses[size], className]\">\n  <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" [ngClass]=\"['aspect-square h-full w-full object-cover', radiusClass]\" />\n  <div\n    *ngIf=\"!src\"\n    [ngClass]=\"['flex h-full w-full items-center justify-center bg-[hsl(var(--muted))] text-xs text-[hsl(var(--muted-foreground))]', radiusClass]\"\n  >\n    {{ fallback }}\n  </div>\n</div>\n\n<div *ngIf=\"isGroup\" [ngClass]=\"['inline-flex items-center pr-2', className]\">\n  <div\n    *ngFor=\"let groupSrc of groupSources; let i = index\"\n    [ngClass]=\"[\n      'relative h-8 w-8 shrink-0 overflow-hidden rounded-full',\n      i > 0 ? '-mr-2 border border-[#e5e5e5]' : '-mr-2'\n    ]\"\n  >\n    <img [src]=\"groupSrc\" [alt]=\"alt + ' ' + (i + 1)\" class=\"h-full w-full rounded-full object-cover\" />\n  </div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmAvatarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!isGroup\" [ngClass]=\"['relative flex shrink-0 overflow-hidden', radiusClass, sizeClasses[size], className]\">\n  <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" [ngClass]=\"['aspect-square h-full w-full object-cover', radiusClass]\" />\n  <div\n    *ngIf=\"!src\"\n    [ngClass]=\"['flex h-full w-full items-center justify-center bg-[hsl(var(--muted))] text-xs text-[hsl(var(--muted-foreground))]', radiusClass]\"\n  >\n    {{ fallback }}\n  </div>\n</div>\n\n<div *ngIf=\"isGroup\" [ngClass]=\"['inline-flex items-center pr-2', className]\">\n  <div\n    *ngFor=\"let groupSrc of groupSources; let i = index\"\n    [ngClass]=\"[\n      'relative h-8 w-8 shrink-0 overflow-hidden rounded-full',\n      i > 0 ? '-mr-2 border border-[#e5e5e5]' : '-mr-2'\n    ]\"\n  >\n    <img [src]=\"groupSrc\" [alt]=\"alt + ' ' + (i + 1)\" class=\"h-full w-full rounded-full object-cover\" />\n  </div>\n</div>\n" }]
-        }], propDecorators: { src: [{
-                type: Input
-            }], alt: [{
-                type: Input
-            }], fallback: [{
-                type: Input
-            }], shape: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], groupSources: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmBadgeComponent {
-    constructor() {
-        this.variant = 'default';
-        this.text = 'Badge';
-        this.className = '';
-    }
-}
-PdmBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmBadgeComponent, selector: "pdm-badge", inputs: { variant: "variant", text: "text", className: "className" }, ngImport: i0, template: "<span\n  [ngClass]=\"[\n    'inline-flex items-center justify-center text-center align-middle',\n    variant === 'default' ? 'h-[22px] rounded-[10px] bg-[#171717] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',\n    variant === 'secondary' ? 'h-[22px] rounded-[10px] bg-[#f5f5f5] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',\n    variant === 'destructive' ? 'h-[22px] rounded-[10px] bg-[#dc2626] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[rgba(255,255,255,0.95)]' : '',\n    variant === 'outline' ? 'h-[22px] rounded-[10px] border border-[#e5e5e5] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',\n    variant === 'icon' ? 'h-[22px] gap-1 rounded-[10px] bg-[#171717] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',\n    variant === 'number' ? 'h-5 min-w-[20px] rounded-full bg-[#171717] px-[6px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',\n    variant === 'destructive-number' ? 'h-5 min-w-[20px] rounded-full bg-[#dc2626] px-[6px] py-[2px] text-[12px] font-medium leading-4 text-[rgba(255,255,255,0.95)]' : '',\n    variant === 'secondary-number' ? 'h-5 min-w-[20px] rounded-full border border-[#e5e5e5] px-1 py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',\n    className\n  ]\"\n>\n  <svg\n    *ngIf=\"variant === 'icon'\"\n    viewBox=\"0 0 24 24\"\n    class=\"h-4 w-4\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\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  <span [ngClass]=\"[variant === 'secondary-number' ? 'font-mono' : '']\">{{ text }}</span>\n</span>\n\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: "15.2.10", ngImport: i0, type: PdmBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [ngClass]=\"[\n    'inline-flex items-center justify-center text-center align-middle',\n    variant === 'default' ? 'h-[22px] rounded-[10px] bg-[#171717] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',\n    variant === 'secondary' ? 'h-[22px] rounded-[10px] bg-[#f5f5f5] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',\n    variant === 'destructive' ? 'h-[22px] rounded-[10px] bg-[#dc2626] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[rgba(255,255,255,0.95)]' : '',\n    variant === 'outline' ? 'h-[22px] rounded-[10px] border border-[#e5e5e5] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',\n    variant === 'icon' ? 'h-[22px] gap-1 rounded-[10px] bg-[#171717] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',\n    variant === 'number' ? 'h-5 min-w-[20px] rounded-full bg-[#171717] px-[6px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',\n    variant === 'destructive-number' ? 'h-5 min-w-[20px] rounded-full bg-[#dc2626] px-[6px] py-[2px] text-[12px] font-medium leading-4 text-[rgba(255,255,255,0.95)]' : '',\n    variant === 'secondary-number' ? 'h-5 min-w-[20px] rounded-full border border-[#e5e5e5] px-1 py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',\n    className\n  ]\"\n>\n  <svg\n    *ngIf=\"variant === 'icon'\"\n    viewBox=\"0 0 24 24\"\n    class=\"h-4 w-4\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\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  <span [ngClass]=\"[variant === 'secondary-number' ? 'font-mono' : '']\">{{ text }}</span>\n</span>\n\n" }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmBreadcrumbComponent {
-    constructor() {
-        this.mode = 'link-component';
-        this.items = ['Home', 'Components', 'Breadcrumb'];
-        this.className = '';
-    }
-    get renderedItems() {
-        if ((this.mode === 'collapsed' || this.mode === 'responsive') && this.items.length > 3) {
-            return [this.items[0], '...', this.items[this.items.length - 2], this.items[this.items.length - 1]];
-        }
-        return this.items;
-    }
-}
-PdmBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmBreadcrumbComponent, selector: "pdm-breadcrumb", inputs: { mode: "mode", items: "items", className: "className" }, ngImport: i0, template: "<nav\n  aria-label=\"breadcrumb\"\n  [ngClass]=\"['inline-flex items-center gap-[6px] text-[14px] leading-5', className]\"\n>\n  <ng-container *ngFor=\"let item of renderedItems; let i = index; let last = last\">\n    <span [ngClass]=\"[last ? 'text-[#0a0a0a]' : 'text-[#737373]']\">{{ item }}</span>\n\n    <ng-container *ngIf=\"!last\">\n      <span class=\"inline-flex h-6 w-6 items-center justify-center text-[#737373]\" aria-hidden=\"true\">\n        <svg\n          *ngIf=\"mode === 'custom-separator' && item !== '...'\"\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M8 20L16 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        <svg\n          *ngIf=\"(mode !== 'custom-separator' && item !== '...') || item === '...'\"\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"mode === 'dropdown' && i === 1 && item !== '...' && !last\">\n      <span class=\"-ml-2 inline-flex h-6 w-6 items-center justify-center text-[#737373]\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n    </ng-container>\n  </ng-container>\n</nav>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmBreadcrumbComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  aria-label=\"breadcrumb\"\n  [ngClass]=\"['inline-flex items-center gap-[6px] text-[14px] leading-5', className]\"\n>\n  <ng-container *ngFor=\"let item of renderedItems; let i = index; let last = last\">\n    <span [ngClass]=\"[last ? 'text-[#0a0a0a]' : 'text-[#737373]']\">{{ item }}</span>\n\n    <ng-container *ngIf=\"!last\">\n      <span class=\"inline-flex h-6 w-6 items-center justify-center text-[#737373]\" aria-hidden=\"true\">\n        <svg\n          *ngIf=\"mode === 'custom-separator' && item !== '...'\"\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M8 20L16 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        <svg\n          *ngIf=\"(mode !== 'custom-separator' && item !== '...') || item === '...'\"\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"mode === 'dropdown' && i === 1 && item !== '...' && !last\">\n      <span class=\"-ml-2 inline-flex h-6 w-6 items-center justify-center text-[#737373]\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n    </ng-container>\n  </ng-container>\n</nav>\n" }]
-        }], propDecorators: { mode: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmButtonGroupComponent {
-    constructor() {
-        this.variant = 'default';
-        this.items = ['Archive', 'Report'];
-        this.className = '';
-    }
-}
-PdmButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmButtonGroupComponent, selector: "pdm-button-group", inputs: { variant: "variant", items: "items", className: "className" }, ngImport: i0, template: "<div [ngClass]=\"['inline-flex items-center gap-2', className]\">\n  <ng-container [ngSwitch]=\"variant\">\n    <ng-container *ngSwitchCase=\"'orientation'\">\n      <div class=\"inline-flex flex-col overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center border-b border-[#e5e5e5] text-[#0a0a0a]\">+</button>\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center text-[#0a0a0a]\">-</button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'separator'\">\n      <div class=\"inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-[#f5f5f5] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button type=\"button\" class=\"inline-flex h-8 items-center justify-center border-r border-[#e5e5e5] px-3 text-[14px] font-medium leading-5 text-[#0a0a0a]\">Copy</button>\n        <button type=\"button\" class=\"inline-flex h-8 items-center justify-center px-3 text-[14px] font-medium leading-5 text-[#0a0a0a]\">Paste</button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'nested'\">\n      <div class=\"inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button *ngFor=\"let item of ['1', '2', '3', '4', '5']; let last = last\" type=\"button\" [ngClass]=\"['inline-flex h-8 items-center justify-center px-3 text-[14px] font-medium leading-5 text-[#0a0a0a]', !last ? 'border-r border-[#e5e5e5]' : '']\">{{ item }}</button>\n      </div>\n      <div class=\"inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center border-r border-[#e5e5e5] text-[#0a0a0a]\">\u2190</button>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center text-[#0a0a0a]\">\u2192</button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <div class=\"inline-flex h-9 w-9 items-center justify-center overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)] text-[#0a0a0a]\">\u2190</div>\n      <div class=\"inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button *ngFor=\"let item of items; let last = last\" type=\"button\" [ngClass]=\"['inline-flex h-9 items-center justify-center px-4 text-[14px] font-medium leading-5 text-[#0a0a0a]', !last ? 'border-r border-[#e5e5e5]' : '']\">{{ item }}</button>\n      </div>\n      <div class=\"inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button type=\"button\" class=\"inline-flex h-9 items-center justify-center border-r border-[#e5e5e5] px-4 text-[14px] font-medium leading-5 text-[#0a0a0a]\">Snooze</button>\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center text-[#0a0a0a]\">\u2026</button>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmButtonGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-button-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['inline-flex items-center gap-2', className]\">\n  <ng-container [ngSwitch]=\"variant\">\n    <ng-container *ngSwitchCase=\"'orientation'\">\n      <div class=\"inline-flex flex-col overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center border-b border-[#e5e5e5] text-[#0a0a0a]\">+</button>\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center text-[#0a0a0a]\">-</button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'separator'\">\n      <div class=\"inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-[#f5f5f5] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button type=\"button\" class=\"inline-flex h-8 items-center justify-center border-r border-[#e5e5e5] px-3 text-[14px] font-medium leading-5 text-[#0a0a0a]\">Copy</button>\n        <button type=\"button\" class=\"inline-flex h-8 items-center justify-center px-3 text-[14px] font-medium leading-5 text-[#0a0a0a]\">Paste</button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'nested'\">\n      <div class=\"inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button *ngFor=\"let item of ['1', '2', '3', '4', '5']; let last = last\" type=\"button\" [ngClass]=\"['inline-flex h-8 items-center justify-center px-3 text-[14px] font-medium leading-5 text-[#0a0a0a]', !last ? 'border-r border-[#e5e5e5]' : '']\">{{ item }}</button>\n      </div>\n      <div class=\"inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center border-r border-[#e5e5e5] text-[#0a0a0a]\">\u2190</button>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center text-[#0a0a0a]\">\u2192</button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <div class=\"inline-flex h-9 w-9 items-center justify-center overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)] text-[#0a0a0a]\">\u2190</div>\n      <div class=\"inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button *ngFor=\"let item of items; let last = last\" type=\"button\" [ngClass]=\"['inline-flex h-9 items-center justify-center px-4 text-[14px] font-medium leading-5 text-[#0a0a0a]', !last ? 'border-r border-[#e5e5e5]' : '']\">{{ item }}</button>\n      </div>\n      <div class=\"inline-flex overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">\n        <button type=\"button\" class=\"inline-flex h-9 items-center justify-center border-r border-[#e5e5e5] px-4 text-[14px] font-medium leading-5 text-[#0a0a0a]\">Snooze</button>\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center text-[#0a0a0a]\">\u2026</button>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n" }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmButtonComponent {
-    constructor() {
-        this.type = 'button';
-        this.variant = 'default';
-        this.state = 'default';
-        this.size = 'default';
-        this.disabled = false;
-        this.loading = false;
-        this.className = '';
-        this.pressed = new EventEmitter();
-        this.toneClassMap = {
-            default: { default: 'bg-primary text-primary-foreground', hover: 'bg-primary text-primary-foreground opacity-90' },
-            primary: { default: 'bg-primary text-primary-foreground', hover: 'bg-primary text-primary-foreground opacity-90' },
-            destructive: { default: 'bg-destructive text-background', hover: 'bg-destructive text-background opacity-90' },
-            outline: { default: 'border border-border bg-background text-foreground', hover: 'border border-border bg-accent text-accent-foreground' },
-            subtle: { default: 'bg-secondary text-secondary-foreground', hover: 'bg-accent text-accent-foreground' },
-            secondary: { default: 'bg-secondary text-secondary-foreground', hover: 'bg-accent text-accent-foreground' },
-            ghost: { default: 'bg-transparent text-foreground', hover: 'bg-accent text-accent-foreground' },
-            link: { default: 'bg-transparent text-primary', hover: 'bg-transparent text-primary' },
-            'with-icon': { default: 'bg-primary text-primary-foreground', hover: 'bg-primary text-primary-foreground opacity-90' },
-            icon: { default: 'border border-border bg-background text-foreground', hover: 'border border-border bg-accent text-accent-foreground' },
-            'icon-circle': { default: 'border border-border bg-background text-foreground', hover: 'border border-border bg-accent text-accent-foreground' },
-            rounded: { default: 'border border-border bg-background text-foreground', hover: 'border border-border bg-accent text-accent-foreground' },
-            loading: { default: 'bg-primary text-primary-foreground opacity-70', hover: 'bg-primary text-primary-foreground opacity-70' }
-        };
-    }
-    get isDisabled() {
-        return this.disabled || this.loading || this.variant === 'loading';
-    }
-    get rootClasses() {
-        const currentState = this.state === 'hover' ? 'hover' : 'default';
-        const toneClass = this.toneClassMap[this.variant][currentState];
-        return [
-            'inline-flex items-center justify-center gap-2 rounded-[6px] border border-transparent text-[14px] font-medium leading-6 transition-colors outline-none focus:outline-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
-            this.variant === 'link' ? 'px-4 py-2 h-9' : '',
-            this.variant === 'icon' ? 'h-8 w-8 p-2' : '',
-            this.variant === 'icon-circle' ? 'h-10 w-10 rounded-[96px] p-3' : '',
-            this.variant === 'rounded' ? 'h-9 w-9 rounded-full p-0' : '',
-            this.variant !== 'icon' && this.variant !== 'icon-circle' && this.variant !== 'rounded'
-                ? this.size === 'small'
-                    ? 'h-8 px-3'
-                    : this.size === 'large'
-                        ? 'h-10 px-5'
-                        : 'h-9 px-4'
-                : '',
-            this.variant === 'link' && this.state === 'hover' ? 'underline [text-decoration-skip-ink:none]' : '',
-            toneClass,
-            this.className
-        ];
-    }
-    onClick(event) {
-        if (!this.isDisabled) {
-            this.pressed.emit(event);
-        }
-    }
-}
-PdmButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmButtonComponent, selector: "pdm-button", inputs: { type: "type", variant: "variant", state: "state", size: "size", disabled: "disabled", loading: "loading", className: "className" }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"variant === 'with-icon' || variant === 'icon' || variant === 'icon-circle' || variant === 'rounded'\"></ng-content>\n  <ng-content></ng-content>\n</button>\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: "15.2.10", ngImport: i0, type: PdmButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"variant === 'with-icon' || variant === 'icon' || variant === 'icon-circle' || variant === 'rounded'\"></ng-content>\n  <ng-content></ng-content>\n</button>\n" }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], state: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], pressed: [{
-                type: Output
-            }] } });
-
-class PdmCalendarComponent {
-    constructor() {
-        this.mode = 'single';
-        this.month = 6;
-        this.year = 2025;
-        this.selectedDay = 25;
-        this.rangeStartDay = 25;
-        this.rangeEndDay = 9;
-        this.className = '';
-        this.weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-    }
-    get leftMonthName() {
-        return this.monthName(this.month - 1);
-    }
-    get rightMonthName() {
-        const rightMonth = this.month % 12;
-        return this.monthName(rightMonth);
-    }
-    get leftCells() {
-        return this.buildMonthCells(this.year, this.month - 1, this.selectedDay, this.mode === 'range' ? this.rangeStartDay : undefined, this.mode === 'range' ? 31 : undefined);
-    }
-    get rightCells() {
-        const rightMonth = this.month % 12;
-        const rightYear = this.month === 12 ? this.year + 1 : this.year;
-        return this.buildMonthCells(rightYear, rightMonth, this.mode === 'range' ? this.rangeEndDay : undefined, 1, this.mode === 'range' ? this.rangeEndDay : undefined);
-    }
-    monthName(monthIndex) {
-        const safe = ((monthIndex % 12) + 12) % 12;
-        return new Date(this.year, safe, 1).toLocaleString('en-US', { month: 'long' });
-    }
-    buildMonthCells(year, monthIndex, selectedDay, rangeStartDay, rangeEndDay) {
-        const firstDay = new Date(year, monthIndex, 1);
-        const startWeekday = firstDay.getDay();
-        const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
-        const cells = [];
-        for (let i = 0; i < 42; i += 1) {
-            const dayNumber = i - startWeekday + 1;
-            const date = new Date(year, monthIndex, dayNumber);
-            const outside = dayNumber < 1 || dayNumber > daysInMonth;
-            const day = date.getDate();
-            const selected = !outside && !!selectedDay && day === selectedDay;
-            const inRange = !outside && !!rangeStartDay && !!rangeEndDay && day >= rangeStartDay && day <= rangeEndDay;
-            cells.push({ date, day, outside, selected, inRange });
-        }
-        return cells;
-    }
-}
-PdmCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: { mode: "mode", month: "month", year: "year", selectedDay: "selectedDay", rangeStartDay: "rangeStartDay", rangeEndDay: "rangeEndDay", className: "className" }, ngImport: i0, template: "<section\n  [ngClass]=\"[\n    'rounded-[10px] border border-[#e5e5e5] bg-white p-3 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)]',\n    mode === 'range' ? 'w-[488px]' : 'w-[250px]',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['grid gap-4', mode === 'range' ? 'grid-cols-2' : 'grid-cols-1']\">\n    <div class=\"space-y-4\">\n      <header class=\"flex items-center justify-between\">\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-[6px] text-[#0a0a0a]\">\u2039</button>\n        <div [ngClass]=\"['flex items-center justify-center gap-1', mode === 'range' ? 'w-full' : 'w-[160px]']\">\n          <ng-container *ngIf=\"mode === 'single'; else monthText\">\n            <span class=\"inline-flex h-8 items-center rounded-[8px] border border-[#e5e5e5] px-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">Jun</span>\n            <span class=\"inline-flex h-8 items-center rounded-[8px] border border-[#e5e5e5] px-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">2025</span>\n          </ng-container>\n          <ng-template #monthText>\n            <span class=\"text-[28px] text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ leftMonthName }} {{ year }}</span>\n          </ng-template>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-[6px] text-[#0a0a0a]\">{{ mode === 'range' ? '' : '\u203A' }}</button>\n      </header>\n\n      <div>\n        <div class=\"grid grid-cols-7\">\n          <span *ngFor=\"let day of weekdays\" class=\"inline-flex h-[21px] items-center justify-center text-[12px] font-normal leading-4 text-[#737373]\">{{ day }}</span>\n        </div>\n        <div class=\"mt-2 grid grid-cols-7 gap-y-2\">\n          <button\n            *ngFor=\"let cell of leftCells\"\n            type=\"button\"\n            [ngClass]=\"[\n              'inline-flex h-8 w-8 items-center justify-center rounded-[8px] text-[14px] font-normal leading-5',\n              cell.outside ? 'text-[#0a0a0a] opacity-50' : 'text-[#0a0a0a]',\n              cell.inRange ? 'bg-[#f5f5f5]' : '',\n              cell.selected ? 'bg-[#171717] text-[#fafafa]' : ''\n            ]\"\n          >\n            {{ cell.day }}\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"mode === 'range'\" class=\"space-y-4\">\n      <header class=\"flex items-center justify-between\">\n        <span class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ rightMonthName }} {{ month === 12 ? year + 1 : year }}</span>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-[6px] text-[#0a0a0a]\">\u203A</button>\n      </header>\n\n      <div>\n        <div class=\"grid grid-cols-7\">\n          <span *ngFor=\"let day of weekdays\" class=\"inline-flex h-[21px] items-center justify-center text-[12px] font-normal leading-4 text-[#737373]\">{{ day }}</span>\n        </div>\n        <div class=\"mt-2 grid grid-cols-7 gap-y-2\">\n          <button\n            *ngFor=\"let cell of rightCells\"\n            type=\"button\"\n            [ngClass]=\"[\n              'inline-flex h-8 w-8 items-center justify-center rounded-[8px] text-[14px] font-normal leading-5',\n              cell.outside ? 'text-[#0a0a0a] opacity-50' : 'text-[#0a0a0a]',\n              cell.inRange ? 'bg-[#f5f5f5]' : '',\n              cell.selected ? 'bg-[#171717] text-[#fafafa]' : ''\n            ]\"\n          >\n            {{ cell.day }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmCalendarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  [ngClass]=\"[\n    'rounded-[10px] border border-[#e5e5e5] bg-white p-3 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)]',\n    mode === 'range' ? 'w-[488px]' : 'w-[250px]',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['grid gap-4', mode === 'range' ? 'grid-cols-2' : 'grid-cols-1']\">\n    <div class=\"space-y-4\">\n      <header class=\"flex items-center justify-between\">\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-[6px] text-[#0a0a0a]\">\u2039</button>\n        <div [ngClass]=\"['flex items-center justify-center gap-1', mode === 'range' ? 'w-full' : 'w-[160px]']\">\n          <ng-container *ngIf=\"mode === 'single'; else monthText\">\n            <span class=\"inline-flex h-8 items-center rounded-[8px] border border-[#e5e5e5] px-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">Jun</span>\n            <span class=\"inline-flex h-8 items-center rounded-[8px] border border-[#e5e5e5] px-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]\">2025</span>\n          </ng-container>\n          <ng-template #monthText>\n            <span class=\"text-[28px] text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ leftMonthName }} {{ year }}</span>\n          </ng-template>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-[6px] text-[#0a0a0a]\">{{ mode === 'range' ? '' : '\u203A' }}</button>\n      </header>\n\n      <div>\n        <div class=\"grid grid-cols-7\">\n          <span *ngFor=\"let day of weekdays\" class=\"inline-flex h-[21px] items-center justify-center text-[12px] font-normal leading-4 text-[#737373]\">{{ day }}</span>\n        </div>\n        <div class=\"mt-2 grid grid-cols-7 gap-y-2\">\n          <button\n            *ngFor=\"let cell of leftCells\"\n            type=\"button\"\n            [ngClass]=\"[\n              'inline-flex h-8 w-8 items-center justify-center rounded-[8px] text-[14px] font-normal leading-5',\n              cell.outside ? 'text-[#0a0a0a] opacity-50' : 'text-[#0a0a0a]',\n              cell.inRange ? 'bg-[#f5f5f5]' : '',\n              cell.selected ? 'bg-[#171717] text-[#fafafa]' : ''\n            ]\"\n          >\n            {{ cell.day }}\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"mode === 'range'\" class=\"space-y-4\">\n      <header class=\"flex items-center justify-between\">\n        <span class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ rightMonthName }} {{ month === 12 ? year + 1 : year }}</span>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-[6px] text-[#0a0a0a]\">\u203A</button>\n      </header>\n\n      <div>\n        <div class=\"grid grid-cols-7\">\n          <span *ngFor=\"let day of weekdays\" class=\"inline-flex h-[21px] items-center justify-center text-[12px] font-normal leading-4 text-[#737373]\">{{ day }}</span>\n        </div>\n        <div class=\"mt-2 grid grid-cols-7 gap-y-2\">\n          <button\n            *ngFor=\"let cell of rightCells\"\n            type=\"button\"\n            [ngClass]=\"[\n              'inline-flex h-8 w-8 items-center justify-center rounded-[8px] text-[14px] font-normal leading-5',\n              cell.outside ? 'text-[#0a0a0a] opacity-50' : 'text-[#0a0a0a]',\n              cell.inRange ? 'bg-[#f5f5f5]' : '',\n              cell.selected ? 'bg-[#171717] text-[#fafafa]' : ''\n            ]\"\n          >\n            {{ cell.day }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n" }]
-        }], propDecorators: { mode: [{
-                type: Input
-            }], month: [{
-                type: Input
-            }], year: [{
-                type: Input
-            }], selectedDay: [{
-                type: Input
-            }], rangeStartDay: [{
-                type: Input
-            }], rangeEndDay: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmCarouselComponent {
-    constructor() {
-        this.variant = 'default';
-        this.className = '';
-        this.slides = [1, 2, 3, 4, 5];
-        this.startIndex = 0;
-        this.loop = false;
-        this.indexChange = new EventEmitter();
-        this._index = 0;
-    }
-    ngOnInit() {
-        this._index = this.normalizeIndex(this.startIndex);
-    }
-    get index() {
-        return this._index;
-    }
-    get canPrev() {
-        return this.loop || this._index > 0;
-    }
-    get canNext() {
-        return this.loop || this._index < this.maxIndex;
-    }
-    get maxIndex() {
-        if (this.slides.length === 0) {
-            return 0;
-        }
-        if (this.variant === 'sizes') {
-            return Math.max(0, this.slides.length - 3);
-        }
-        if (this.variant === 'orientation') {
-            return Math.max(0, this.slides.length - 2);
-        }
-        return Math.max(0, this.slides.length - 1);
-    }
-    get visibleSlides() {
-        if (this.slides.length === 0) {
-            return [];
-        }
-        if (this.variant === 'sizes') {
-            return this.sliceWindow(3);
-        }
-        if (this.variant === 'orientation') {
-            return this.sliceWindow(2);
-        }
-        return [this.slides[this._index]];
-    }
-    onPrev() {
-        if (!this.canPrev) {
-            return;
-        }
-        const next = this._index - 1;
-        this.setIndex(this.loop && next < 0 ? this.maxIndex : next);
-    }
-    onNext() {
-        if (!this.canNext) {
-            return;
-        }
-        const next = this._index + 1;
-        this.setIndex(this.loop && next > this.maxIndex ? 0 : next);
-    }
-    setIndex(value) {
-        const normalized = this.normalizeIndex(value);
-        this._index = normalized;
-        this.indexChange.emit(this._index);
-    }
-    normalizeIndex(value) {
-        if (this.slides.length === 0) {
-            return 0;
-        }
-        return Math.min(this.maxIndex, Math.max(0, value));
-    }
-    sliceWindow(size) {
-        return this.slides.slice(this._index, this._index + size);
-    }
-}
-PdmCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmCarouselComponent, selector: "pdm-carousel", inputs: { variant: "variant", className: "className", slides: "slides", startIndex: "startIndex", loop: "loop" }, outputs: { indexChange: "indexChange" }, ngImport: i0, template: "<section [ngClass]=\"[className]\">\n  <div *ngIf=\"variant !== 'orientation'\" class=\"flex items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <ng-container [ngSwitch]=\"variant\">\n      <div *ngSwitchCase=\"'sizes'\" class=\"flex items-center\">\n        <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex items-center\" [ngClass]=\"i > 0 ? 'pl-4' : ''\">\n          <div class=\"flex h-[165px] w-[125px] items-center p-1\">\n            <div class=\"flex h-full w-full items-center justify-center rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]\">\n              <div class=\"text-center text-[30px] font-semibold leading-9 text-[#0a0a0a]\">{{ slide }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchDefault class=\"flex flex-col items-center justify-center\">\n        <div class=\"flex h-[360px] w-[318px] items-center p-1\">\n          <div class=\"flex h-full w-full items-center justify-center rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]\">\n            <div class=\"text-center text-[36px] font-semibold leading-10 text-[#0a0a0a]\">{{ visibleSlides[0] }}</div>\n          </div>\n        </div>\n        <p *ngIf=\"variant === 'api'\" class=\"m-0 pt-2 text-[14px] font-medium leading-5 text-[#737373]\">Slide {{ index + 1 }} of {{ slides.length }}</p>\n      </div>\n    </ng-container>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div *ngIf=\"variant === 'orientation'\" class=\"flex flex-col items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M18 15L12 9L6 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div class=\"flex w-[320px] flex-col\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex h-[142px] w-full items-center p-1\" [ngClass]=\"i > 0 ? 'pt-1' : ''\">\n        <div class=\"flex h-full w-full items-center justify-center rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]\">\n          <div class=\"text-center text-[30px] font-semibold leading-9 text-[#0a0a0a]\">{{ slide }}</div>\n        </div>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n</section>\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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmCarouselComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-carousel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"[className]\">\n  <div *ngIf=\"variant !== 'orientation'\" class=\"flex items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <ng-container [ngSwitch]=\"variant\">\n      <div *ngSwitchCase=\"'sizes'\" class=\"flex items-center\">\n        <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex items-center\" [ngClass]=\"i > 0 ? 'pl-4' : ''\">\n          <div class=\"flex h-[165px] w-[125px] items-center p-1\">\n            <div class=\"flex h-full w-full items-center justify-center rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]\">\n              <div class=\"text-center text-[30px] font-semibold leading-9 text-[#0a0a0a]\">{{ slide }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchDefault class=\"flex flex-col items-center justify-center\">\n        <div class=\"flex h-[360px] w-[318px] items-center p-1\">\n          <div class=\"flex h-full w-full items-center justify-center rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]\">\n            <div class=\"text-center text-[36px] font-semibold leading-10 text-[#0a0a0a]\">{{ visibleSlides[0] }}</div>\n          </div>\n        </div>\n        <p *ngIf=\"variant === 'api'\" class=\"m-0 pt-2 text-[14px] font-medium leading-5 text-[#737373]\">Slide {{ index + 1 }} of {{ slides.length }}</p>\n      </div>\n    </ng-container>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div *ngIf=\"variant === 'orientation'\" class=\"flex flex-col items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M18 15L12 9L6 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div class=\"flex w-[320px] flex-col\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex h-[142px] w-full items-center p-1\" [ngClass]=\"i > 0 ? 'pt-1' : ''\">\n        <div class=\"flex h-full w-full items-center justify-center rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]\">\n          <div class=\"text-center text-[30px] font-semibold leading-9 text-[#0a0a0a]\">{{ slide }}</div>\n        </div>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 items-center justify-center rounded-full border border-[#e5e5e5] bg-white p-[10px]\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n</section>\n" }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], slides: [{
-                type: Input
-            }], startIndex: [{
-                type: Input
-            }], loop: [{
-                type: Input
-            }], indexChange: [{
-                type: Output
-            }] } });
-
-class PdmCardComponent {
-    constructor() {
-        this.variant = 'default';
-        this.className = '';
-        this.title = 'Login to your account';
-        this.description = 'Enter your email below to login to your account';
-        this.actionText = 'Sign up';
-        this.emailLabel = 'Email';
-        this.emailPlaceholder = 'm@example.com';
-        this.passwordLabel = 'Password';
-        this.passwordHint = 'Forgot password?';
-        this.primaryActionText = 'Login';
-        this.secondaryActionText = 'Login with Google';
-        this.primaryAction = new EventEmitter();
-        this.secondaryAction = new EventEmitter();
-        this.actionPressed = new EventEmitter();
-    }
-    onPrimaryAction() {
-        this.primaryAction.emit();
-    }
-    onSecondaryAction() {
-        this.secondaryAction.emit();
-    }
-    onActionPressed() {
-        this.actionPressed.emit();
-    }
-}
-PdmCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmCardComponent, selector: "pdm-card", inputs: { variant: "variant", className: "className", title: "title", description: "description", actionText: "actionText", emailLabel: "emailLabel", emailPlaceholder: "emailPlaceholder", passwordLabel: "passwordLabel", passwordHint: "passwordHint", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction", actionPressed: "actionPressed" }, ngImport: i0, template: "<section\n  [ngClass]=\"[\n    'w-full rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]',\n    className\n  ]\"\n>\n  <ng-container *ngIf=\"variant === 'login'; else defaultCard\">\n    <div class=\"flex w-full items-start gap-1.5 px-6\">\n      <div class=\"min-w-0 flex-1\">\n        <h3 class=\"m-0 text-[14px] font-semibold leading-5 text-[#0a0a0a]\">{{ title }}</h3>\n        <p class=\"m-0 mt-1.5 text-[14px] leading-5 text-[#737373]\">{{ description }}</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 items-center justify-center rounded-[10px] px-4 py-2 text-[14px] font-medium leading-5 text-[#171717]\"\n        (click)=\"onActionPressed()\"\n      >\n        {{ actionText }}\n      </button>\n    </div>\n\n    <div class=\"mt-6 flex flex-col gap-4 px-6\">\n      <div class=\"w-full\">\n        <label class=\"mb-3 block text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ emailLabel }}</label>\n        <input\n          type=\"email\"\n          [placeholder]=\"emailPlaceholder\"\n          class=\"h-9 w-full rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] placeholder:text-[#737373] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#171717]\"\n        />\n      </div>\n\n      <div class=\"w-full\">\n        <div class=\"mb-3 flex w-full items-center justify-between gap-4\">\n          <label class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ passwordLabel }}</label>\n          <button type=\"button\" class=\"text-[14px] leading-5 text-[#0a0a0a]\">\n            {{ passwordHint }}\n          </button>\n        </div>\n        <input\n          type=\"password\"\n          class=\"h-9 w-full rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#171717]\"\n        />\n      </div>\n    </div>\n\n    <div class=\"mt-6 flex w-full flex-col gap-2 px-6\">\n      <button\n        type=\"button\"\n        class=\"flex h-9 w-full items-center justify-center rounded-[10px] bg-[#171717] px-4 py-2 text-[14px] font-medium leading-5 text-[#fafafa] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\n        (click)=\"onPrimaryAction()\"\n      >\n        {{ primaryActionText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"flex h-9 w-full items-center justify-center rounded-[10px] border border-[#e5e5e5] bg-white px-4 py-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\n        (click)=\"onSecondaryAction()\"\n      >\n        {{ secondaryActionText }}\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultCard>\n    <div class=\"flex w-full flex-col gap-6\">\n      <div class=\"px-6\">\n        <ng-content select=\"[pdmCardHeader]\"></ng-content>\n      </div>\n      <div class=\"px-6\">\n        <ng-content select=\"[pdmCardContent]\"></ng-content>\n      </div>\n      <div class=\"px-6\">\n        <ng-content select=\"[pdmCardFooter]\"></ng-content>\n      </div>\n    </div>\n  </ng-template>\n</section>\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: "15.2.10", ngImport: i0, type: PdmCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  [ngClass]=\"[\n    'w-full rounded-[14px] border border-[#e5e5e5] bg-white py-6 shadow-[0_1px_3px_rgba(0,0,0,0.1)]',\n    className\n  ]\"\n>\n  <ng-container *ngIf=\"variant === 'login'; else defaultCard\">\n    <div class=\"flex w-full items-start gap-1.5 px-6\">\n      <div class=\"min-w-0 flex-1\">\n        <h3 class=\"m-0 text-[14px] font-semibold leading-5 text-[#0a0a0a]\">{{ title }}</h3>\n        <p class=\"m-0 mt-1.5 text-[14px] leading-5 text-[#737373]\">{{ description }}</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 items-center justify-center rounded-[10px] px-4 py-2 text-[14px] font-medium leading-5 text-[#171717]\"\n        (click)=\"onActionPressed()\"\n      >\n        {{ actionText }}\n      </button>\n    </div>\n\n    <div class=\"mt-6 flex flex-col gap-4 px-6\">\n      <div class=\"w-full\">\n        <label class=\"mb-3 block text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ emailLabel }}</label>\n        <input\n          type=\"email\"\n          [placeholder]=\"emailPlaceholder\"\n          class=\"h-9 w-full rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] placeholder:text-[#737373] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#171717]\"\n        />\n      </div>\n\n      <div class=\"w-full\">\n        <div class=\"mb-3 flex w-full items-center justify-between gap-4\">\n          <label class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ passwordLabel }}</label>\n          <button type=\"button\" class=\"text-[14px] leading-5 text-[#0a0a0a]\">\n            {{ passwordHint }}\n          </button>\n        </div>\n        <input\n          type=\"password\"\n          class=\"h-9 w-full rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#171717]\"\n        />\n      </div>\n    </div>\n\n    <div class=\"mt-6 flex w-full flex-col gap-2 px-6\">\n      <button\n        type=\"button\"\n        class=\"flex h-9 w-full items-center justify-center rounded-[10px] bg-[#171717] px-4 py-2 text-[14px] font-medium leading-5 text-[#fafafa] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\n        (click)=\"onPrimaryAction()\"\n      >\n        {{ primaryActionText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"flex h-9 w-full items-center justify-center rounded-[10px] border border-[#e5e5e5] bg-white px-4 py-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\n        (click)=\"onSecondaryAction()\"\n      >\n        {{ secondaryActionText }}\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultCard>\n    <div class=\"flex w-full flex-col gap-6\">\n      <div class=\"px-6\">\n        <ng-content select=\"[pdmCardHeader]\"></ng-content>\n      </div>\n      <div class=\"px-6\">\n        <ng-content select=\"[pdmCardContent]\"></ng-content>\n      </div>\n      <div class=\"px-6\">\n        <ng-content select=\"[pdmCardFooter]\"></ng-content>\n      </div>\n    </div>\n  </ng-template>\n</section>\n" }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], actionText: [{
-                type: Input
-            }], emailLabel: [{
-                type: Input
-            }], emailPlaceholder: [{
-                type: Input
-            }], passwordLabel: [{
-                type: Input
-            }], passwordHint: [{
-                type: Input
-            }], primaryActionText: [{
-                type: Input
-            }], secondaryActionText: [{
-                type: Input
-            }], primaryAction: [{
-                type: Output
-            }], secondaryAction: [{
-                type: Output
-            }], actionPressed: [{
-                type: Output
-            }] } });
-
-class PdmChartComponent {
-    constructor() {
-        this.type = 'bar';
-        this.className = '';
-        this.title = 'Bar Chart - Interactive';
-        this.description = 'Showing total visitors for the last 3 months';
-        this.desktopLabel = 'Desktop';
-        this.desktopValue = '24,828';
-        this.mobileLabel = 'Mobile';
-        this.mobileValue = '25,010';
-        this.labels = ['Apr 9', 'Apr 19', 'Apr 29', 'May 9', 'May 19', 'May 29', 'Jun 9', 'Jun 19', 'Jun 30'];
-        this.bars = [
-            48, 21, 53, 69, 56, 77, 12, 54, 61, 59, 66, 27, 24, 27, 84, 62, 44, 18, 45, 57,
-            45, 72, 56, 15, 73, 25, 59, 86, 49, 59, 69, 93, 96, 72, 30, 58, 75, 67, 43, 43,
-            84, 89, 62, 96, 59, 72, 82, 34, 34, 70, 62, 42, 40, 80, 60, 33, 67, 34, 34, 88,
-            22, 84, 19, 62, 56, 43, 95, 70, 67, 89, 84, 31, 18, 92, 16, 87, 54, 44, 91, 23,
-            67, 77, 49, 59, 93, 26, 29, 81, 84, 30, 22, 84
-        ];
-        this.line = [40, 28, 56, 49, 73, 67, 81, 58, 92];
-        this.pie = [35, 28, 20, 17];
-        this.radar = [72, 58, 88, 64, 79, 70];
-        this.radialValue = 76;
-        this.radialLabel = 'Completion';
-        this.radialDescription = 'Updated monthly';
-        this.tooltipTitle = 'June 2024';
-        this.tooltipPrimaryLabel = 'Desktop';
-        this.tooltipPrimaryValue = '12,450';
-        this.tooltipSecondaryLabel = 'Mobile';
-        this.tooltipSecondaryValue = '8,110';
-        this.pieLabels = ['Desktop', 'Mobile', 'Tablet', 'Other'];
-    }
-    get normalizedBars() {
-        if (!this.bars.length) {
-            return [];
-        }
-        const max = Math.max(...this.bars);
-        if (max === 0) {
-            return this.bars.map(() => 0);
-        }
-        return this.bars.map((value) => Math.max(8, Math.round((value / max) * 183)));
-    }
-    get normalizedLine() {
-        if (!this.line.length) {
-            return [];
-        }
-        const max = Math.max(...this.line);
-        if (max === 0) {
-            return this.line.map(() => 170);
-        }
-        return this.line.map((value) => 180 - Math.round((value / max) * 150));
-    }
-    get linePath() {
-        const points = this.normalizedLine;
-        if (!points.length) {
-            return '';
-        }
-        const step = points.length > 1 ? 320 / (points.length - 1) : 0;
-        return points
-            .map((y, index) => `${index === 0 ? 'M' : 'L'} ${Math.round(index * step)} ${y}`)
-            .join(' ');
-    }
-    get areaPath() {
-        const linePath = this.linePath;
-        if (!linePath) {
-            return '';
-        }
-        return `${linePath} L 320 180 L 0 180 Z`;
-    }
-    get pieSegments() {
-        const total = this.pie.reduce((acc, value) => acc + Math.max(value, 0), 0);
-        if (total === 0) {
-            return [];
-        }
-        let offset = 0;
-        const colors = ['#0090ff', '#34d399', '#f59e0b', '#f43f5e'];
-        return this.pie.map((value, index) => {
-            const size = (Math.max(value, 0) / total) * 100;
-            const segment = {
-                color: colors[index % colors.length],
-                size,
-                offset,
-                label: this.pieLabels[index] ?? `Series ${index + 1}`
-            };
-            offset += size;
-            return segment;
-        });
-    }
-    get pieGradient() {
-        const segments = this.pieSegments;
-        if (!segments.length) {
-            return 'conic-gradient(#e5e5e5 0 100%)';
-        }
-        return `conic-gradient(${segments
-            .map((segment) => `${segment.color} ${segment.offset}% ${segment.offset + segment.size}%`)
-            .join(', ')})`;
-    }
-    get radarPoints() {
-        const values = this.radar.slice(0, 6);
-        if (!values.length) {
-            return '';
-        }
-        const max = Math.max(...values, 1);
-        const radius = 72;
-        const center = 80;
-        return values
-            .map((value, index) => {
-            const angle = ((Math.PI * 2) / values.length) * index - Math.PI / 2;
-            const valueRadius = (Math.max(value, 0) / max) * radius;
-            const x = center + Math.cos(angle) * valueRadius;
-            const y = center + Math.sin(angle) * valueRadius;
-            return `${x},${y}`;
-        })
-            .join(' ');
-    }
-    get radialStrokeOffset() {
-        const bounded = Math.max(0, Math.min(this.radialValue, 100));
-        const circumference = 2 * Math.PI * 42;
-        return circumference - (bounded / 100) * circumference;
-    }
-}
-PdmChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmChartComponent, selector: "pdm-chart", inputs: { type: "type", className: "className", title: "title", description: "description", desktopLabel: "desktopLabel", desktopValue: "desktopValue", mobileLabel: "mobileLabel", mobileValue: "mobileValue", labels: "labels", bars: "bars", line: "line", pie: "pie", radar: "radar", radialValue: "radialValue", radialLabel: "radialLabel", radialDescription: "radialDescription", tooltipTitle: "tooltipTitle", tooltipPrimaryLabel: "tooltipPrimaryLabel", tooltipPrimaryValue: "tooltipPrimaryValue", tooltipSecondaryLabel: "tooltipSecondaryLabel", tooltipSecondaryValue: "tooltipSecondaryValue", pieLabels: "pieLabels" }, ngImport: i0, template: "<section [ngClass]=\"['w-full rounded-[14px] border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]', className]\">\n  <div class=\"flex w-full items-stretch border-b border-[hsl(var(--border))]\">\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1 px-6 pb-3 pt-4\">\n      <h3 class=\"m-0 text-sm font-semibold leading-5\">{{ title }}</h3>\n      <p class=\"m-0 text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ description }}</p>\n    </div>\n\n    <div class=\"flex h-[92px]\">\n      <div class=\"flex h-full w-[171px] flex-col justify-center border-l border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-6 py-4\">\n        <span class=\"text-xs leading-4 text-[hsl(var(--muted-foreground))]\">{{ desktopLabel }}</span>\n        <span class=\"mt-1 text-[28px] font-semibold leading-8\">{{ desktopValue }}</span>\n      </div>\n      <div class=\"flex h-full w-[171px] flex-col justify-center px-6 py-4\">\n        <span class=\"text-xs leading-4 text-[hsl(var(--muted-foreground))]\">{{ mobileLabel }}</span>\n        <span class=\"mt-1 text-[28px] font-semibold leading-8\">{{ mobileValue }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"w-full p-6\">\n    <ng-container [ngSwitch]=\"type\">\n      <div *ngSwitchCase=\"'bar'\" class=\"flex h-[236px] w-full flex-col justify-end gap-2\">\n        <div class=\"relative h-[183px] w-full overflow-hidden\">\n          <div class=\"absolute bottom-0 left-0 right-0 border-t border-[hsl(var(--border))] opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-[54px] border-t border-[hsl(var(--border))] opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-[108px] border-t border-[hsl(var(--border))] opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-[162px] border-t border-[hsl(var(--border))] opacity-50\"></div>\n          <div class=\"absolute inset-x-0 bottom-0 flex h-[183px] items-end gap-[2px] px-0.5\">\n            <div *ngFor=\"let bar of normalizedBars\" class=\"w-[5px] rounded-[2px] bg-[hsl(var(--primary))]\" [style.height.px]=\"bar\"></div>\n          </div>\n        </div>\n        <div class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs leading-4 text-[hsl(var(--muted-foreground))]\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'line'\" class=\"flex h-[236px] w-full flex-col gap-2\">\n        <svg viewBox=\"0 0 320 180\" class=\"h-[183px] w-full\">\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs leading-4 text-[hsl(var(--muted-foreground))]\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'area'\" class=\"flex h-[236px] w-full flex-col gap-2\">\n        <svg viewBox=\"0 0 320 180\" class=\"h-[183px] w-full\">\n          <defs>\n            <linearGradient id=\"pdm-chart-area-gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.35\"></stop>\n              <stop offset=\"100%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.02\"></stop>\n            </linearGradient>\n          </defs>\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"areaPath\" fill=\"url(#pdm-chart-area-gradient)\"></path>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs leading-4 text-[hsl(var(--muted-foreground))]\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'pie'\" class=\"flex items-center gap-6\">\n        <div class=\"relative h-40 w-40 rounded-full\" [style.background]=\"pieGradient\">\n          <div class=\"absolute inset-7 rounded-full bg-[hsl(var(--card))]\"></div>\n        </div>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let segment of pieSegments\" class=\"flex items-center justify-between rounded-md border border-[hsl(var(--border))] px-3 py-2\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"size-2.5 rounded-full\" [style.background]=\"segment.color\"></span>\n              <span class=\"text-sm leading-5\">{{ segment.label }}</span>\n            </div>\n            <span class=\"text-sm font-medium leading-5\">{{ segment.size | number: '1.0-0' }}%</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radar'\" class=\"flex items-center gap-6\">\n        <svg viewBox=\"0 0 160 160\" class=\"h-44 w-44\">\n          <polygon points=\"80,8 144,44 144,116 80,152 16,116 16,44\" fill=\"none\" stroke=\"hsl(var(--border))\"></polygon>\n          <polygon points=\"80,28 126,54 126,106 80,132 34,106 34,54\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.75\"></polygon>\n          <polygon points=\"80,48 109,64 109,96 80,112 51,96 51,64\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.55\"></polygon>\n          <polygon [attr.points]=\"radarPoints\" fill=\"hsl(var(--primary))\" fill-opacity=\"0.22\" stroke=\"hsl(var(--primary))\" stroke-width=\"2\"></polygon>\n        </svg>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let item of radar; index as i\" class=\"flex items-center justify-between rounded-md border border-[hsl(var(--border))] px-3 py-2 text-sm\">\n            <span class=\"text-[hsl(var(--muted-foreground))]\">Metric {{ i + 1 }}</span>\n            <span class=\"font-medium\">{{ item }}</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radial'\" class=\"flex items-center justify-between gap-6\">\n        <div class=\"relative flex size-44 items-center justify-center\">\n          <svg viewBox=\"0 0 96 96\" class=\"size-40 -rotate-90\">\n            <circle cx=\"48\" cy=\"48\" r=\"42\" fill=\"none\" stroke=\"hsl(var(--muted))\" stroke-width=\"10\"></circle>\n            <circle\n              cx=\"48\"\n              cy=\"48\"\n              r=\"42\"\n              fill=\"none\"\n              stroke=\"hsl(var(--primary))\"\n              stroke-width=\"10\"\n              stroke-linecap=\"round\"\n              stroke-dasharray=\"263.89\"\n              [attr.stroke-dashoffset]=\"radialStrokeOffset\"\n            ></circle>\n          </svg>\n          <div class=\"absolute text-center\">\n            <div class=\"text-[30px] font-semibold leading-9\">{{ radialValue }}%</div>\n            <div class=\"text-xs text-[hsl(var(--muted-foreground))]\">{{ radialLabel }}</div>\n          </div>\n        </div>\n        <div class=\"flex-1\">\n          <p class=\"m-0 text-sm font-medium leading-5\">{{ radialLabel }}</p>\n          <p class=\"m-0 mt-1 text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ radialDescription }}</p>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'tooltips'\" class=\"grid gap-3\">\n        <div class=\"inline-flex w-fit min-w-[220px] flex-col gap-2 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-3 shadow-sm\">\n          <p class=\"m-0 text-xs font-medium leading-4 text-[hsl(var(--muted-foreground))]\">{{ tooltipTitle }}</p>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipPrimaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipPrimaryValue }}</span>\n          </div>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipSecondaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipSecondaryValue }}</span>\n          </div>\n        </div>\n        <p class=\"m-0 text-xs text-[hsl(var(--muted-foreground))]\">Tooltip style preparado para charts de l\u00EDnea, \u00E1rea y barras.</p>\n      </div>\n    </ng-container>\n  </div>\n</section>\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['w-full rounded-[14px] border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]', className]\">\n  <div class=\"flex w-full items-stretch border-b border-[hsl(var(--border))]\">\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1 px-6 pb-3 pt-4\">\n      <h3 class=\"m-0 text-sm font-semibold leading-5\">{{ title }}</h3>\n      <p class=\"m-0 text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ description }}</p>\n    </div>\n\n    <div class=\"flex h-[92px]\">\n      <div class=\"flex h-full w-[171px] flex-col justify-center border-l border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-6 py-4\">\n        <span class=\"text-xs leading-4 text-[hsl(var(--muted-foreground))]\">{{ desktopLabel }}</span>\n        <span class=\"mt-1 text-[28px] font-semibold leading-8\">{{ desktopValue }}</span>\n      </div>\n      <div class=\"flex h-full w-[171px] flex-col justify-center px-6 py-4\">\n        <span class=\"text-xs leading-4 text-[hsl(var(--muted-foreground))]\">{{ mobileLabel }}</span>\n        <span class=\"mt-1 text-[28px] font-semibold leading-8\">{{ mobileValue }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"w-full p-6\">\n    <ng-container [ngSwitch]=\"type\">\n      <div *ngSwitchCase=\"'bar'\" class=\"flex h-[236px] w-full flex-col justify-end gap-2\">\n        <div class=\"relative h-[183px] w-full overflow-hidden\">\n          <div class=\"absolute bottom-0 left-0 right-0 border-t border-[hsl(var(--border))] opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-[54px] border-t border-[hsl(var(--border))] opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-[108px] border-t border-[hsl(var(--border))] opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-[162px] border-t border-[hsl(var(--border))] opacity-50\"></div>\n          <div class=\"absolute inset-x-0 bottom-0 flex h-[183px] items-end gap-[2px] px-0.5\">\n            <div *ngFor=\"let bar of normalizedBars\" class=\"w-[5px] rounded-[2px] bg-[hsl(var(--primary))]\" [style.height.px]=\"bar\"></div>\n          </div>\n        </div>\n        <div class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs leading-4 text-[hsl(var(--muted-foreground))]\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'line'\" class=\"flex h-[236px] w-full flex-col gap-2\">\n        <svg viewBox=\"0 0 320 180\" class=\"h-[183px] w-full\">\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs leading-4 text-[hsl(var(--muted-foreground))]\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'area'\" class=\"flex h-[236px] w-full flex-col gap-2\">\n        <svg viewBox=\"0 0 320 180\" class=\"h-[183px] w-full\">\n          <defs>\n            <linearGradient id=\"pdm-chart-area-gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.35\"></stop>\n              <stop offset=\"100%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.02\"></stop>\n            </linearGradient>\n          </defs>\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"areaPath\" fill=\"url(#pdm-chart-area-gradient)\"></path>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs leading-4 text-[hsl(var(--muted-foreground))]\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'pie'\" class=\"flex items-center gap-6\">\n        <div class=\"relative h-40 w-40 rounded-full\" [style.background]=\"pieGradient\">\n          <div class=\"absolute inset-7 rounded-full bg-[hsl(var(--card))]\"></div>\n        </div>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let segment of pieSegments\" class=\"flex items-center justify-between rounded-md border border-[hsl(var(--border))] px-3 py-2\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"size-2.5 rounded-full\" [style.background]=\"segment.color\"></span>\n              <span class=\"text-sm leading-5\">{{ segment.label }}</span>\n            </div>\n            <span class=\"text-sm font-medium leading-5\">{{ segment.size | number: '1.0-0' }}%</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radar'\" class=\"flex items-center gap-6\">\n        <svg viewBox=\"0 0 160 160\" class=\"h-44 w-44\">\n          <polygon points=\"80,8 144,44 144,116 80,152 16,116 16,44\" fill=\"none\" stroke=\"hsl(var(--border))\"></polygon>\n          <polygon points=\"80,28 126,54 126,106 80,132 34,106 34,54\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.75\"></polygon>\n          <polygon points=\"80,48 109,64 109,96 80,112 51,96 51,64\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.55\"></polygon>\n          <polygon [attr.points]=\"radarPoints\" fill=\"hsl(var(--primary))\" fill-opacity=\"0.22\" stroke=\"hsl(var(--primary))\" stroke-width=\"2\"></polygon>\n        </svg>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let item of radar; index as i\" class=\"flex items-center justify-between rounded-md border border-[hsl(var(--border))] px-3 py-2 text-sm\">\n            <span class=\"text-[hsl(var(--muted-foreground))]\">Metric {{ i + 1 }}</span>\n            <span class=\"font-medium\">{{ item }}</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radial'\" class=\"flex items-center justify-between gap-6\">\n        <div class=\"relative flex size-44 items-center justify-center\">\n          <svg viewBox=\"0 0 96 96\" class=\"size-40 -rotate-90\">\n            <circle cx=\"48\" cy=\"48\" r=\"42\" fill=\"none\" stroke=\"hsl(var(--muted))\" stroke-width=\"10\"></circle>\n            <circle\n              cx=\"48\"\n              cy=\"48\"\n              r=\"42\"\n              fill=\"none\"\n              stroke=\"hsl(var(--primary))\"\n              stroke-width=\"10\"\n              stroke-linecap=\"round\"\n              stroke-dasharray=\"263.89\"\n              [attr.stroke-dashoffset]=\"radialStrokeOffset\"\n            ></circle>\n          </svg>\n          <div class=\"absolute text-center\">\n            <div class=\"text-[30px] font-semibold leading-9\">{{ radialValue }}%</div>\n            <div class=\"text-xs text-[hsl(var(--muted-foreground))]\">{{ radialLabel }}</div>\n          </div>\n        </div>\n        <div class=\"flex-1\">\n          <p class=\"m-0 text-sm font-medium leading-5\">{{ radialLabel }}</p>\n          <p class=\"m-0 mt-1 text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ radialDescription }}</p>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'tooltips'\" class=\"grid gap-3\">\n        <div class=\"inline-flex w-fit min-w-[220px] flex-col gap-2 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-3 shadow-sm\">\n          <p class=\"m-0 text-xs font-medium leading-4 text-[hsl(var(--muted-foreground))]\">{{ tooltipTitle }}</p>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipPrimaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipPrimaryValue }}</span>\n          </div>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipSecondaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipSecondaryValue }}</span>\n          </div>\n        </div>\n        <p class=\"m-0 text-xs text-[hsl(var(--muted-foreground))]\">Tooltip style preparado para charts de l\u00EDnea, \u00E1rea y barras.</p>\n      </div>\n    </ng-container>\n  </div>\n</section>\n" }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], desktopLabel: [{
-                type: Input
-            }], desktopValue: [{
-                type: Input
-            }], mobileLabel: [{
-                type: Input
-            }], mobileValue: [{
-                type: Input
-            }], labels: [{
-                type: Input
-            }], bars: [{
-                type: Input
-            }], line: [{
-                type: Input
-            }], pie: [{
-                type: Input
-            }], radar: [{
-                type: Input
-            }], radialValue: [{
-                type: Input
-            }], radialLabel: [{
-                type: Input
-            }], radialDescription: [{
-                type: Input
-            }], tooltipTitle: [{
-                type: Input
-            }], tooltipPrimaryLabel: [{
-                type: Input
-            }], tooltipPrimaryValue: [{
-                type: Input
-            }], tooltipSecondaryLabel: [{
-                type: Input
-            }], tooltipSecondaryValue: [{
-                type: Input
-            }], pieLabels: [{
-                type: Input
-            }] } });
-
-class PdmCheckboxComponent {
-    constructor() {
-        this.id = '';
-        this.checked = false;
-        this.disabled = false;
-        this.variant = 'default';
-        this.label = 'Accept terms and conditions';
-        this.description = '';
-        this.className = '';
-        this.checkedChange = new EventEmitter();
-    }
-    get hasDescription() {
-        return this.variant === 'subtext' || this.variant === 'card' ? !!this.description : false;
-    }
-    onToggle() {
-        if (this.disabled) {
-            return;
-        }
-        this.checkedChange.emit(!this.checked);
-    }
-}
-PdmCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmCheckboxComponent, selector: "pdm-checkbox", inputs: { id: "id", checked: "checked", disabled: "disabled", variant: "variant", label: "label", description: "description", className: "className" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"id || null\"\n  [attr.aria-checked]=\"checked\"\n  [attr.aria-disabled]=\"disabled\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"[\n    'w-full border-0 bg-transparent p-0 text-left outline-none focus:outline-none focus-visible:outline-none',\n    variant === 'card'\n      ? checked\n        ? 'flex items-start gap-3 rounded-[10px] border border-foreground bg-muted p-3'\n        : 'flex items-start gap-3 rounded-[10px] border border-border bg-background p-3'\n      : hasDescription\n        ? 'flex items-start gap-3'\n        : 'flex items-center gap-3',\n    disabled ? 'opacity-50' : '',\n    className\n  ]\"\n  (click)=\"onToggle()\"\n>\n  <span\n    [ngClass]=\"[\n      'mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[6px] border shadow-[0_1px_2px_rgba(0,0,0,0.1)]',\n      checked ? 'border-foreground bg-foreground text-background' : 'border-input bg-background text-transparent'\n    ]\"\n    aria-hidden=\"true\"\n  >\n    <svg viewBox=\"0 0 16 16\" class=\"h-3 w-3\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3 8.5L6.4 12L13 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </span>\n\n  <span [ngClass]=\"['min-w-0 flex-1', hasDescription ? 'flex flex-col gap-2' : 'flex items-center']\">\n    <span class=\"text-[14px] font-medium leading-5 text-foreground\">{{ label }}</span>\n    <span *ngIf=\"hasDescription\" class=\"text-[14px] leading-5 text-muted-foreground\">{{ description }}</span>\n  </span>\n</button>\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: "15.2.10", ngImport: i0, type: PdmCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"id || null\"\n  [attr.aria-checked]=\"checked\"\n  [attr.aria-disabled]=\"disabled\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"[\n    'w-full border-0 bg-transparent p-0 text-left outline-none focus:outline-none focus-visible:outline-none',\n    variant === 'card'\n      ? checked\n        ? 'flex items-start gap-3 rounded-[10px] border border-foreground bg-muted p-3'\n        : 'flex items-start gap-3 rounded-[10px] border border-border bg-background p-3'\n      : hasDescription\n        ? 'flex items-start gap-3'\n        : 'flex items-center gap-3',\n    disabled ? 'opacity-50' : '',\n    className\n  ]\"\n  (click)=\"onToggle()\"\n>\n  <span\n    [ngClass]=\"[\n      'mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[6px] border shadow-[0_1px_2px_rgba(0,0,0,0.1)]',\n      checked ? 'border-foreground bg-foreground text-background' : 'border-input bg-background text-transparent'\n    ]\"\n    aria-hidden=\"true\"\n  >\n    <svg viewBox=\"0 0 16 16\" class=\"h-3 w-3\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3 8.5L6.4 12L13 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </span>\n\n  <span [ngClass]=\"['min-w-0 flex-1', hasDescription ? 'flex flex-col gap-2' : 'flex items-center']\">\n    <span class=\"text-[14px] font-medium leading-5 text-foreground\">{{ label }}</span>\n    <span *ngIf=\"hasDescription\" class=\"text-[14px] leading-5 text-muted-foreground\">{{ description }}</span>\n  </span>\n</button>\n" }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], checkedChange: [{
-                type: Output
-            }] } });
-
-class PdmCollapsibleComponent {
-    constructor() {
-        this.title = '@peduarte starred 3 repositories';
-        this.open = false;
-        this.disabled = false;
-        this.items = ['@radix-ui/primitives', '@radix-ui/colors', '@stitches/react'];
-        this.className = '';
-        this.openChange = new EventEmitter();
-    }
-    get visibleItems() {
-        if (!this.items.length) {
-            return [];
-        }
-        return this.open ? this.items : this.items.slice(0, 1);
-    }
-    toggle() {
-        if (!this.disabled) {
-            this.openChange.emit(!this.open);
-        }
-    }
-}
-PdmCollapsibleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmCollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCollapsibleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmCollapsibleComponent, selector: "pdm-collapsible", inputs: { title: "title", open: "open", disabled: "disabled", items: "items", className: "className" }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<div [ngClass]=\"['flex w-[350px] flex-col gap-2', className]\">\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"flex w-full items-center justify-between px-4 text-left\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"text-[14px] font-semibold leading-5 text-[#0a0a0a]\">{{ title }}</span>\n    <span class=\"inline-flex h-8 w-8 items-center justify-center text-[#0a0a0a]\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n  </button>\n\n  <div class=\"flex w-full flex-col gap-2\">\n    <div\n      *ngFor=\"let item of visibleItems\"\n      class=\"w-full rounded-[8px] border border-[#e5e5e5] bg-white px-4 py-2\"\n    >\n      <span class=\"font-mono text-[14px] leading-5 text-[#0a0a0a]\">{{ item }}</span>\n    </div>\n  </div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmCollapsibleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-collapsible', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex w-[350px] flex-col gap-2', className]\">\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"flex w-full items-center justify-between px-4 text-left\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"text-[14px] font-semibold leading-5 text-[#0a0a0a]\">{{ title }}</span>\n    <span class=\"inline-flex h-8 w-8 items-center justify-center text-[#0a0a0a]\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n  </button>\n\n  <div class=\"flex w-full flex-col gap-2\">\n    <div\n      *ngFor=\"let item of visibleItems\"\n      class=\"w-full rounded-[8px] border border-[#e5e5e5] bg-white px-4 py-2\"\n    >\n      <span class=\"font-mono text-[14px] leading-5 text-[#0a0a0a]\">{{ item }}</span>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }] } });
-
-class PdmComboboxComponent {
-    constructor() {
-        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.openChange = new EventEmitter();
-        this.valueChange = new EventEmitter();
-    }
-    get selectedLabel() {
-        return this.value || this.placeholder;
-    }
-    toggle() {
-        this.openChange.emit(!this.open);
-    }
-    select(option) {
-        this.valueChange.emit(option);
-        this.openChange.emit(false);
-    }
-}
-PdmComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmComboboxComponent, selector: "pdm-combobox", inputs: { open: "open", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", className: "className", options: "options", value: "value", width: "width" }, outputs: { openChange: "openChange", valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    type=\"button\"\n    class=\"flex h-9 w-full items-center gap-2 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-2 shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"min-w-0 flex-1 truncate text-left text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ selectedLabel }}</span>\n    <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div\n    *ngIf=\"open\"\n    class=\"w-full rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-[#e5e5e5] px-3\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#737373]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M20 20L16.6 16.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <div class=\"h-9 flex-1 py-2 text-[14px] leading-5 text-[#737373]\">{{ searchPlaceholder }}</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 items-center gap-2 rounded-[4px] px-2 py-[6px] text-left\"\n        [ngClass]=\"option === value ? 'bg-[#f5f5f5]' : ''\"\n        (click)=\"select(option)\"\n      >\n        <span [ngClass]=\"['min-w-0 flex-1 truncate text-[14px] leading-5', option === value ? 'text-[#171717]' : 'text-[#0a0a0a]']\">{{ option }}</span>\n        <svg *ngIf=\"option === value\" viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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    type=\"button\"\n    class=\"flex h-9 w-full items-center gap-2 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-2 shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"min-w-0 flex-1 truncate text-left text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ selectedLabel }}</span>\n    <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div\n    *ngIf=\"open\"\n    class=\"w-full rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-[#e5e5e5] px-3\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#737373]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M20 20L16.6 16.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <div class=\"h-9 flex-1 py-2 text-[14px] leading-5 text-[#737373]\">{{ searchPlaceholder }}</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 items-center gap-2 rounded-[4px] px-2 py-[6px] text-left\"\n        [ngClass]=\"option === value ? 'bg-[#f5f5f5]' : ''\"\n        (click)=\"select(option)\"\n      >\n        <span [ngClass]=\"['min-w-0 flex-1 truncate text-[14px] leading-5', option === value ? 'text-[#171717]' : 'text-[#0a0a0a]']\">{{ option }}</span>\n        <svg *ngIf=\"option === value\" viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { open: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], searchPlaceholder: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class PdmIconComponent {
-    constructor() {
-        this.name = 'check';
-        this.library = 'lucide';
-        this.assetUrl = null;
-        this.size = 16;
-        this.strokeWidth = 1.5;
-        this.className = '';
-        this.ariaLabel = null;
-        this.decorative = false;
-        this.aliasMapByLibrary = {
-            lucide: {},
-            tabler: {
-                'alert-triangle': 'alert-circle',
-                'chevron-down': 'chevron-down',
-                'chevron-right': 'chevron-right',
-                'user-circle': 'user',
-                'settings-2': 'settings',
-                'external-link': 'external-link'
-            },
-            hugeicons: {
-                'alert-02': 'alert-circle',
-                'user-circle': 'user',
-                'search-01': 'search',
-                'settings-01': 'settings',
-                'arrow-right-01': 'chevron-right',
-                'arrow-down-01': 'chevron-down'
-            },
-            phosphor: {
-                'warning-circle': 'alert-circle',
-                'caret-down': 'chevron-down',
-                'caret-right': 'chevron-right',
-                'user-circle': 'user',
-                gear: 'settings',
-                'arrow-square-out': 'external-link'
-            },
-            remix: {
-                'alert-line': 'alert-circle',
-                'arrow-right-line': 'chevron-right',
-                'arrow-down-s-line': 'chevron-down',
-                'external-link-line': 'external-link',
-                'user-line': 'user',
-                'settings-3-line': 'settings'
-            }
-        };
-    }
-    get resolvedStrokeWidth() {
-        if (this.strokeWidth) {
-            return this.strokeWidth;
-        }
-        if (this.library === 'phosphor') {
-            return 1.6;
-        }
-        if (this.library === 'tabler') {
-            return 1.8;
-        }
-        return 1.5;
-    }
-    get iconKey() {
-        const raw = `${this.name || ''}`.trim();
-        if (!raw) {
-            return 'circle';
-        }
-        const trimmed = raw.replace(/^(lucide|tabler|hugeicons|phosphor|remix)\//, '');
-        const aliases = this.aliasMapByLibrary[this.library] ?? {};
-        return aliases[trimmed] ?? trimmed;
-    }
-}
-PdmIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmIconComponent, selector: "pdm-icon", inputs: { name: "name", library: "library", assetUrl: "assetUrl", size: "size", strokeWidth: "strokeWidth", className: "className", ariaLabel: "ariaLabel", decorative: "decorative" }, ngImport: i0, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"size\"\n    [style.height.px]=\"size\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <svg\n    [attr.width]=\"size\"\n    [attr.height]=\"size\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <ng-container [ngSwitch]=\"iconKey\">\n    <g *ngSwitchCase=\"'command'\">\n      <path d=\"M9 9V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 9V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 9H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 15H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 9H7.5C6.12 9 5 7.88 5 6.5C5 5.12 6.12 4 7.5 4C8.88 4 10 5.12 10 6.5V8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 9H16.5C17.88 9 19 7.88 19 6.5C19 5.12 17.88 4 16.5 4C15.12 4 14 5.12 14 6.5V8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 15H7.5C6.12 15 5 16.12 5 17.5C5 18.88 6.12 20 7.5 20C8.88 20 10 18.88 10 17.5V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 15H16.5C17.88 15 19 16.12 19 17.5C19 18.88 17.88 20 16.5 20C15.12 20 14 18.88 14 17.5V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'check'\">\n      <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'check-circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M8.5 12.2L11 14.7L15.8 9.9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'dot'\">\n      <circle cx=\"12\" cy=\"12\" r=\"2.5\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'x'\">\n      <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'alert-circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 8V12\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'info'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 11V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"12\" cy=\"8\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'loader-2'\">\n      <path d=\"M12 3A9 9 0 1 0 21 12\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'menu'\">\n      <path d=\"M4 7H20M4 12H20M4 17H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'search'\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M20 20L16.6 16.6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'calendar'\">\n      <path d=\"M8 3V6M16 3V6M4 10H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <rect x=\"4\" y=\"6\" width=\"16\" height=\"14\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n    </g>\n\n    <g *ngSwitchCase=\"'panel-left'\">\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M9 4V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'monitor'\">\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"13\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M8 20H16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M12 17V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'laptop'\">\n      <rect x=\"5\" y=\"5\" width=\"14\" height=\"10\" rx=\"1.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M3 18H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sun'\">\n      <circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 2V4M12 20V22M4 12H2M22 12H20M19.07 4.93L17.66 6.34M6.34 17.66L4.93 19.07M19.07 19.07L17.66 17.66M6.34 6.34L4.93 4.93\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'moon'\">\n      <path d=\"M20 14.5C19.1 17.9 16 20.5 12.3 20.5C7.9 20.5 4.3 16.9 4.3 12.5C4.3 8.8 6.8 5.8 10.2 4.8C9.6 5.8 9.3 7 9.3 8.2C9.3 11.8 12.2 14.7 15.8 14.7C17 14.7 18.1 14.4 19.1 13.8C19.4 13.6 20.1 14 20 14.5Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-down'\">\n      <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-up'\">\n      <path d=\"M17 14L12 9L7 14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-left'\">\n      <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-right'\">\n      <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-left'\">\n      <path d=\"M14 18L8 12L14 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M20 18L14 12L20 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-right'\">\n      <path d=\"M10 18L16 12L10 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M4 18L10 12L4 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-up-down'\">\n      <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'arrow-up-down'\">\n      <path d=\"M12 4V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 8L12 4L16 8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M8 16L12 20L16 16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'ellipsis'\">\n      <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n      <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n      <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'filter'\">\n      <path d=\"M4 6H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M7 12H17\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M10 18H14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sort-asc'\">\n      <path d=\"M7 18V6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M4 9L7 6L10 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 8H20M14 12H18M14 16H16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sort-desc'\">\n      <path d=\"M7 6V18\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M4 15L7 18L10 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 8H16M14 12H18M14 16H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'plus'\">\n      <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'minus'\">\n      <path d=\"M5 12H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'copy'\">\n      <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <rect x=\"4\" y=\"4\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n    </g>\n\n    <g *ngSwitchCase=\"'pencil'\">\n      <path d=\"M12 20H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M16.5 4.5C17.1 3.9 18 3.9 18.6 4.5L19.5 5.4C20.1 6 20.1 6.9 19.5 7.5L9 18L4 19L5 14L16.5 4.5Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'trash-2'\">\n      <path d=\"M4 7H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 7V5C9 4.4 9.4 4 10 4H14C14.6 4 15 4.4 15 5V7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M7 7L8 19C8 19.6 8.4 20 9 20H15C15.6 20 16 19.6 16 19L17 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 11V17M14 11V17\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'download'\">\n      <path d=\"M12 4V14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 10L12 14L16 10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M5 19H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'upload'\">\n      <path d=\"M12 20V10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 14L12 10L16 14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M5 5H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'home'\">\n      <path d=\"M4 10.5L12 4L20 10.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M6 9.5V20H18V9.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'mail'\">\n      <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M4 7L12 13L20 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'phone'\">\n      <path d=\"M8.8 4.6C9.2 3.8 10.2 3.5 11 4L13.3 5.2C14.1 5.6 14.4 6.6 14 7.4L13 9.2C12.8 9.6 12.9 10.1 13.2 10.4L14.9 12.1C15.2 12.4 15.7 12.5 16.1 12.3L17.9 11.3C18.7 10.9 19.7 11.2 20.1 12L21.3 14.3C21.8 15.1 21.5 16.1 20.7 16.5L18.8 17.5C16.9 18.5 14.5 18.1 12.9 16.5L7.5 11.1C5.9 9.5 5.5 7.1 6.5 5.2L8.8 4.6Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'log-in'\">\n      <path d=\"M15 3H18C19.1 3 20 3.9 20 5V19C20 20.1 19.1 21 18 21H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M10 17L14 13L10 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 13H4\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'log-out'\">\n      <path d=\"M9 3H6C4.9 3 4 3.9 4 5V19C4 20.1 4.9 21 6 21H9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M14 17L10 13L14 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 13H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'user'\">\n      <circle cx=\"12\" cy=\"8\" r=\"3\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M6 19C6.8 16.7 8.9 15.5 12 15.5C15.1 15.5 17.2 16.7 18 19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'settings'\">\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M19 12A7 7 0 1 0 12 19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'credit-card'\">\n      <rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M3 10H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'smile'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M9 15C9.7 16 10.7 16.5 12 16.5C13.3 16.5 14.3 16 15 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"9\" cy=\"10\" r=\"1\" fill=\"currentColor\"></circle>\n      <circle cx=\"15\" cy=\"10\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'calculator'\">\n      <rect x=\"6\" y=\"3\" width=\"12\" height=\"18\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M9 7H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 12H10M14 12H15M9 16H10M14 16H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'external-link'\">\n      <path d=\"M14 5H19V10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 14L19 5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M19 14V19H5V5H10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'folder'\">\n      <path d=\"M3 7C3 5.9 3.9 5 5 5H9L11 7H19C20.1 7 21 7.9 21 9V17C21 18.1 20.1 19 19 19H5C3.9 19 3 18.1 3 17V7Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'arrow-up-right'\">\n      <path d=\"M7 17L17 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 7H17V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchDefault>\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n    </g>\n    </ng-container>\n  </svg>\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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"size\"\n    [style.height.px]=\"size\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <svg\n    [attr.width]=\"size\"\n    [attr.height]=\"size\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <ng-container [ngSwitch]=\"iconKey\">\n    <g *ngSwitchCase=\"'command'\">\n      <path d=\"M9 9V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 9V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 9H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 15H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 9H7.5C6.12 9 5 7.88 5 6.5C5 5.12 6.12 4 7.5 4C8.88 4 10 5.12 10 6.5V8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 9H16.5C17.88 9 19 7.88 19 6.5C19 5.12 17.88 4 16.5 4C15.12 4 14 5.12 14 6.5V8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 15H7.5C6.12 15 5 16.12 5 17.5C5 18.88 6.12 20 7.5 20C8.88 20 10 18.88 10 17.5V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 15H16.5C17.88 15 19 16.12 19 17.5C19 18.88 17.88 20 16.5 20C15.12 20 14 18.88 14 17.5V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'check'\">\n      <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'check-circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M8.5 12.2L11 14.7L15.8 9.9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'dot'\">\n      <circle cx=\"12\" cy=\"12\" r=\"2.5\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'x'\">\n      <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'alert-circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 8V12\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'info'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 11V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"12\" cy=\"8\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'loader-2'\">\n      <path d=\"M12 3A9 9 0 1 0 21 12\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'menu'\">\n      <path d=\"M4 7H20M4 12H20M4 17H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'search'\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M20 20L16.6 16.6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'calendar'\">\n      <path d=\"M8 3V6M16 3V6M4 10H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <rect x=\"4\" y=\"6\" width=\"16\" height=\"14\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n    </g>\n\n    <g *ngSwitchCase=\"'panel-left'\">\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M9 4V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'monitor'\">\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"13\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M8 20H16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M12 17V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'laptop'\">\n      <rect x=\"5\" y=\"5\" width=\"14\" height=\"10\" rx=\"1.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M3 18H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sun'\">\n      <circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 2V4M12 20V22M4 12H2M22 12H20M19.07 4.93L17.66 6.34M6.34 17.66L4.93 19.07M19.07 19.07L17.66 17.66M6.34 6.34L4.93 4.93\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'moon'\">\n      <path d=\"M20 14.5C19.1 17.9 16 20.5 12.3 20.5C7.9 20.5 4.3 16.9 4.3 12.5C4.3 8.8 6.8 5.8 10.2 4.8C9.6 5.8 9.3 7 9.3 8.2C9.3 11.8 12.2 14.7 15.8 14.7C17 14.7 18.1 14.4 19.1 13.8C19.4 13.6 20.1 14 20 14.5Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-down'\">\n      <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-up'\">\n      <path d=\"M17 14L12 9L7 14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-left'\">\n      <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-right'\">\n      <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-left'\">\n      <path d=\"M14 18L8 12L14 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M20 18L14 12L20 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-right'\">\n      <path d=\"M10 18L16 12L10 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M4 18L10 12L4 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-up-down'\">\n      <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'arrow-up-down'\">\n      <path d=\"M12 4V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 8L12 4L16 8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M8 16L12 20L16 16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'ellipsis'\">\n      <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n      <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n      <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'filter'\">\n      <path d=\"M4 6H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M7 12H17\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M10 18H14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sort-asc'\">\n      <path d=\"M7 18V6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M4 9L7 6L10 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 8H20M14 12H18M14 16H16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sort-desc'\">\n      <path d=\"M7 6V18\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M4 15L7 18L10 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 8H16M14 12H18M14 16H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'plus'\">\n      <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'minus'\">\n      <path d=\"M5 12H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'copy'\">\n      <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <rect x=\"4\" y=\"4\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n    </g>\n\n    <g *ngSwitchCase=\"'pencil'\">\n      <path d=\"M12 20H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M16.5 4.5C17.1 3.9 18 3.9 18.6 4.5L19.5 5.4C20.1 6 20.1 6.9 19.5 7.5L9 18L4 19L5 14L16.5 4.5Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'trash-2'\">\n      <path d=\"M4 7H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 7V5C9 4.4 9.4 4 10 4H14C14.6 4 15 4.4 15 5V7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M7 7L8 19C8 19.6 8.4 20 9 20H15C15.6 20 16 19.6 16 19L17 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 11V17M14 11V17\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'download'\">\n      <path d=\"M12 4V14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 10L12 14L16 10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M5 19H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'upload'\">\n      <path d=\"M12 20V10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 14L12 10L16 14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M5 5H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'home'\">\n      <path d=\"M4 10.5L12 4L20 10.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M6 9.5V20H18V9.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'mail'\">\n      <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M4 7L12 13L20 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'phone'\">\n      <path d=\"M8.8 4.6C9.2 3.8 10.2 3.5 11 4L13.3 5.2C14.1 5.6 14.4 6.6 14 7.4L13 9.2C12.8 9.6 12.9 10.1 13.2 10.4L14.9 12.1C15.2 12.4 15.7 12.5 16.1 12.3L17.9 11.3C18.7 10.9 19.7 11.2 20.1 12L21.3 14.3C21.8 15.1 21.5 16.1 20.7 16.5L18.8 17.5C16.9 18.5 14.5 18.1 12.9 16.5L7.5 11.1C5.9 9.5 5.5 7.1 6.5 5.2L8.8 4.6Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'log-in'\">\n      <path d=\"M15 3H18C19.1 3 20 3.9 20 5V19C20 20.1 19.1 21 18 21H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M10 17L14 13L10 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 13H4\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'log-out'\">\n      <path d=\"M9 3H6C4.9 3 4 3.9 4 5V19C4 20.1 4.9 21 6 21H9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M14 17L10 13L14 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 13H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'user'\">\n      <circle cx=\"12\" cy=\"8\" r=\"3\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M6 19C6.8 16.7 8.9 15.5 12 15.5C15.1 15.5 17.2 16.7 18 19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'settings'\">\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M19 12A7 7 0 1 0 12 19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'credit-card'\">\n      <rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M3 10H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'smile'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M9 15C9.7 16 10.7 16.5 12 16.5C13.3 16.5 14.3 16 15 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"9\" cy=\"10\" r=\"1\" fill=\"currentColor\"></circle>\n      <circle cx=\"15\" cy=\"10\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'calculator'\">\n      <rect x=\"6\" y=\"3\" width=\"12\" height=\"18\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M9 7H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 12H10M14 12H15M9 16H10M14 16H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'external-link'\">\n      <path d=\"M14 5H19V10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 14L19 5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M19 14V19H5V5H10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'folder'\">\n      <path d=\"M3 7C3 5.9 3.9 5 5 5H9L11 7H19C20.1 7 21 7.9 21 9V17C21 18.1 20.1 19 19 19H5C3.9 19 3 18.1 3 17V7Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'arrow-up-right'\">\n      <path d=\"M7 17L17 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 7H17V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchDefault>\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n    </g>\n    </ng-container>\n  </svg>\n</ng-template>\n" }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], library: [{
-                type: Input
-            }], assetUrl: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], strokeWidth: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], decorative: [{
-                type: Input
-            }] } });
-
-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() {
-        const map = new Map();
-        for (const item of this.filteredItems) {
-            const key = item.group || '';
-            const arr = map.get(key) ?? [];
-            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: "15.2.10", ngImport: i0, type: PdmCommandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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-[14px] font-medium leading-5 text-[#737373]\">{{ hintLabel }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 items-center gap-0.5 rounded-[6px] border border-[#e5e5e5] bg-[#f5f5f5] px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon name=\"command\" [size]=\"12\" className=\"text-[#737373]\" [decorative]=\"true\"></pdm-icon>\n      <span class=\"text-[12px] leading-4 text-[#737373]\">{{ hintKey }}</span>\n    </button>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    class=\"flex w-full flex-col overflow-hidden rounded-[10px] border border-[#e5e5e5] bg-white shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-[#e5e5e5] px-3\">\n      <pdm-icon name=\"search\" [size]=\"16\" className=\"text-[#737373]\" [decorative]=\"true\"></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full bg-transparent py-3 text-[14px] leading-5 text-[#0a0a0a] outline-none placeholder:text-[#737373]\"\n      />\n    </div>\n\n    <div class=\"max-h-[300px] overflow-y-auto p-1\">\n      <ng-container *ngFor=\"let group of groupedItems; let groupIndex = index\">\n        <div *ngIf=\"group.name\" class=\"px-2 py-[6px] text-[12px] leading-4 text-[#737373]\">{{ group.name }}</div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full items-center gap-2 rounded-[6px] px-2 py-[6px] text-left\"\n          [ngClass]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-[#f5f5f5]' : ''\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span class=\"inline-flex h-4 w-4 items-center justify-center text-[#0a0a0a]\">\n            <pdm-icon *ngIf=\"item.icon\" [name]=\"item.icon\" [size]=\"16\" [decorative]=\"true\"></pdm-icon>\n          </span>\n          <span class=\"min-w-0 flex-1 text-[14px] leading-5 text-[#0a0a0a]\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-[12px] leading-4 text-[#737373]\">{{ item.shortcut }}</span>\n        </button>\n        <div *ngIf=\"groupIndex === 0 && groupedItems.length > 1\" class=\"my-1 border-t border-[#e5e5e5]\"></div>\n      </ng-container>\n\n      <p *ngIf=\"filteredItems.length === 0\" class=\"py-6 text-center text-[14px] text-[#737373]\">{{ emptyMessage }}</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: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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-[14px] font-medium leading-5 text-[#737373]\">{{ hintLabel }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 items-center gap-0.5 rounded-[6px] border border-[#e5e5e5] bg-[#f5f5f5] px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon name=\"command\" [size]=\"12\" className=\"text-[#737373]\" [decorative]=\"true\"></pdm-icon>\n      <span class=\"text-[12px] leading-4 text-[#737373]\">{{ hintKey }}</span>\n    </button>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    class=\"flex w-full flex-col overflow-hidden rounded-[10px] border border-[#e5e5e5] bg-white shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-[#e5e5e5] px-3\">\n      <pdm-icon name=\"search\" [size]=\"16\" className=\"text-[#737373]\" [decorative]=\"true\"></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full bg-transparent py-3 text-[14px] leading-5 text-[#0a0a0a] outline-none placeholder:text-[#737373]\"\n      />\n    </div>\n\n    <div class=\"max-h-[300px] overflow-y-auto p-1\">\n      <ng-container *ngFor=\"let group of groupedItems; let groupIndex = index\">\n        <div *ngIf=\"group.name\" class=\"px-2 py-[6px] text-[12px] leading-4 text-[#737373]\">{{ group.name }}</div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full items-center gap-2 rounded-[6px] px-2 py-[6px] text-left\"\n          [ngClass]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-[#f5f5f5]' : ''\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span class=\"inline-flex h-4 w-4 items-center justify-center text-[#0a0a0a]\">\n            <pdm-icon *ngIf=\"item.icon\" [name]=\"item.icon\" [size]=\"16\" [decorative]=\"true\"></pdm-icon>\n          </span>\n          <span class=\"min-w-0 flex-1 text-[14px] leading-5 text-[#0a0a0a]\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-[12px] leading-4 text-[#737373]\">{{ item.shortcut }}</span>\n        </button>\n        <div *ngIf=\"groupIndex === 0 && groupedItems.length > 1\" class=\"my-1 border-t border-[#e5e5e5]\"></div>\n      </ng-container>\n\n      <p *ngIf=\"filteredItems.length === 0\" class=\"py-6 text-center text-[14px] text-[#737373]\">{{ emptyMessage }}</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
-            }] } });
-
-class PdmContextMenuComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        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.itemSelect = new EventEmitter();
-        this.open = false;
-        this.x = 0;
-        this.y = 0;
-    }
-    onContextMenu(event) {
-        event.preventDefault();
-        this.x = event.clientX;
-        this.y = event.clientY;
-        this.open = true;
-    }
-    select(item) {
-        if (item.disabled || item.type === 'separator' || item.type === 'label' || !item.value)
-            return;
-        this.itemSelect.emit(item.value);
-        this.open = false;
-    }
-    onEsc() {
-        this.open = false;
-    }
-    onDocumentClick(event) {
-        if (!this.open)
-            return;
-        const target = event.target;
-        if (target && !this.elementRef.nativeElement.contains(target)) {
-            this.open = false;
-        }
-    }
-}
-PdmContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmContextMenuComponent, selector: "pdm-context-menu", inputs: { items: "items", className: "className", triggerLabel: "triggerLabel", width: "width", height: "height" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:keydown.escape": "onEsc()", "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"relative\" [ngClass]=\"className\" (contextmenu)=\"onContextMenu($event)\">\n  <div\n    class=\"flex items-center justify-center rounded-[8px] border border-dashed border-[#e5e5e5]\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ triggerLabel }}</span>\n  </div>\n\n  <div\n    *ngIf=\"open\"\n    class=\"fixed z-50 w-[208px] rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]\"\n    [style.left.px]=\"x + 4\"\n    [style.top.px]=\"y + 2\"\n  >\n    <div class=\"px-1 pt-1\">\n      <ng-container *ngFor=\"let item of items\">\n        <div *ngIf=\"item.type === 'separator'\" class=\"my-1 border-t border-[#e5e5e5]\"></div>\n\n        <div *ngIf=\"item.type === 'label'\" class=\"h-8 px-8 py-[6px] text-[14px] font-semibold leading-5 text-[#0a0a0a]\">\n          {{ item.label }}\n        </div>\n\n        <button\n          *ngIf=\"!item.type || item.type === 'item'\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex h-8 w-full items-center rounded-[6px] py-[6px] pr-2 text-left disabled:opacity-50\"\n          [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n          (click)=\"select(item)\"\n        >\n          <span class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-[#0a0a0a]\">\n            <svg *ngIf=\"item.checked\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n            <span *ngIf=\"item.selectedDot\" class=\"h-2 w-2 rounded-full bg-[#0a0a0a]\"></span>\n          </span>\n          <span class=\"min-w-0 flex-1 truncate text-[14px] leading-5 text-[#0a0a0a]\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-[12px] leading-4 text-[#737373]\">{{ item.shortcut }}</span>\n          <svg *ngIf=\"item.showChevron\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmContextMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\" [ngClass]=\"className\" (contextmenu)=\"onContextMenu($event)\">\n  <div\n    class=\"flex items-center justify-center rounded-[8px] border border-dashed border-[#e5e5e5]\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ triggerLabel }}</span>\n  </div>\n\n  <div\n    *ngIf=\"open\"\n    class=\"fixed z-50 w-[208px] rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]\"\n    [style.left.px]=\"x + 4\"\n    [style.top.px]=\"y + 2\"\n  >\n    <div class=\"px-1 pt-1\">\n      <ng-container *ngFor=\"let item of items\">\n        <div *ngIf=\"item.type === 'separator'\" class=\"my-1 border-t border-[#e5e5e5]\"></div>\n\n        <div *ngIf=\"item.type === 'label'\" class=\"h-8 px-8 py-[6px] text-[14px] font-semibold leading-5 text-[#0a0a0a]\">\n          {{ item.label }}\n        </div>\n\n        <button\n          *ngIf=\"!item.type || item.type === 'item'\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex h-8 w-full items-center rounded-[6px] py-[6px] pr-2 text-left disabled:opacity-50\"\n          [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n          (click)=\"select(item)\"\n        >\n          <span class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-[#0a0a0a]\">\n            <svg *ngIf=\"item.checked\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n            <span *ngIf=\"item.selectedDot\" class=\"h-2 w-2 rounded-full bg-[#0a0a0a]\"></span>\n          </span>\n          <span class=\"min-w-0 flex-1 truncate text-[14px] leading-5 text-[#0a0a0a]\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-[12px] leading-4 text-[#737373]\">{{ item.shortcut }}</span>\n          <svg *ngIf=\"item.showChevron\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { items: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], triggerLabel: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], itemSelect: [{
-                type: Output
-            }], onEsc: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-class PdmDataTableComponent {
-    constructor() {
-        this.className = '';
-        this.filterPlaceholder = 'Filter emails...';
-        this.columnsLabel = 'Columns';
-        this.rows = [
-            { id: '1', status: 'Success', email: 'ken99@yahoo.com', amount: '$316.00' },
-            { id: '2', status: 'Success', email: 'abe45@gmail.com', amount: '$242.00' },
-            { id: '3', status: 'Processing', email: 'monserrat44@gmail.com', amount: '$837.00' },
-            { id: '4', status: 'Success', email: 'silas22@gmail.com', amount: '$874.00' },
-            { id: '5', status: 'Failed', email: 'carmella@hotmail.com', amount: '$721.00' }
-        ];
-        this.page = 1;
-        this.pageSize = 5;
-        this.query = '';
-        this.queryChange = new EventEmitter();
-        this.rowAction = new EventEmitter();
-        this.pageChange = new EventEmitter();
-        this.selectionChange = new EventEmitter();
-    }
-    get filteredRows() {
-        const q = this.query.trim().toLowerCase();
-        if (!q)
-            return this.rows;
-        return this.rows.filter((r) => r.email.toLowerCase().includes(q));
-    }
-    get pagedRows() {
-        const start = (this.page - 1) * this.pageSize;
-        return this.filteredRows.slice(start, start + this.pageSize);
-    }
-    get totalPages() {
-        return Math.max(1, Math.ceil(this.filteredRows.length / this.pageSize));
-    }
-    get selectedCount() {
-        return this.rows.filter((row) => row.selected).length;
-    }
-    onQueryInput(event) {
-        const value = event.target.value;
-        this.queryChange.emit(value);
-    }
-    onToggleRow(row, event) {
-        this.selectionChange.emit({ id: row.id, selected: event.target.checked });
-    }
-    previous() {
-        if (this.page <= 1)
-            return;
-        this.pageChange.emit(this.page - 1);
-    }
-    next() {
-        if (this.page >= this.totalPages)
-            return;
-        this.pageChange.emit(this.page + 1);
-    }
-    onAction(row) {
-        this.rowAction.emit(row.id);
-    }
-}
-PdmDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmDataTableComponent, selector: "pdm-data-table", inputs: { className: "className", filterPlaceholder: "filterPlaceholder", columnsLabel: "columnsLabel", rows: "rows", page: "page", pageSize: "pageSize", query: "query" }, outputs: { queryChange: "queryChange", rowAction: "rowAction", pageChange: "pageChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<section [ngClass]=\"['flex w-[590px] flex-col items-end', className]\">\n  <div class=\"flex w-full items-center justify-between py-4\">\n    <input\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 w-[384px] rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] placeholder:text-[#737373] outline-none\"\n    />\n\n    <button type=\"button\" class=\"inline-flex h-9 items-center gap-2 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-2 shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">\n      <span class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"w-full overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white\">\n    <table class=\"w-full border-collapse text-[14px] leading-5 text-[#0a0a0a]\">\n      <thead>\n        <tr class=\"border-b border-[#e5e5e5]\">\n          <th class=\"w-[32px] px-2 text-left font-medium\"><input type=\"checkbox\" class=\"h-4 w-4 rounded-[4px] border border-[#e5e5e5]\" /></th>\n          <th class=\"w-[120px] px-2 py-2 text-left font-medium\">Status</th>\n          <th class=\"w-[270px] px-2 py-2 text-left font-medium\">\n            <button type=\"button\" class=\"inline-flex items-center gap-1 rounded-[6px] px-3 py-2\">\n              <span>Email</span>\n              <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M8 6L4 10L8 14M16 18L20 14L16 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n              </svg>\n            </button>\n          </th>\n          <th class=\"w-[100px] px-2 py-2 text-right font-medium\">Amount</th>\n          <th class=\"px-2 py-2\"></th>\n        </tr>\n      </thead>\n\n      <tbody>\n        <tr *ngFor=\"let row of pagedRows\" class=\"border-b border-[#e5e5e5] last:border-b-0\">\n          <td class=\"px-2 py-2\"><input type=\"checkbox\" [checked]=\"row.selected\" (change)=\"onToggleRow(row, $event)\" class=\"h-4 w-4 rounded-[4px] border border-[#e5e5e5]\" /></td>\n          <td class=\"px-2 py-2\">{{ row.status }}</td>\n          <td class=\"px-2 py-2\">{{ row.email }}</td>\n          <td class=\"px-2 py-2 text-right\">{{ row.amount }}</td>\n          <td class=\"px-2 py-2\">\n            <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center\" (click)=\"onAction(row)\">\n              <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n                <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n                <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              </svg>\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <div class=\"flex w-full items-center gap-2 py-4\">\n    <p class=\"flex-1 pr-2 text-[14px] leading-5 text-[#737373]\">{{ selectedCount }} of {{ rows.length }} row(s) selected.</p>\n    <button type=\"button\" class=\"h-9 rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] disabled:opacity-50\" [disabled]=\"page <= 1\" (click)=\"previous()\">Previous</button>\n    <button type=\"button\" class=\"h-9 rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] disabled:opacity-50\" [disabled]=\"page >= totalPages\" (click)=\"next()\">Next</button>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmDataTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex w-[590px] flex-col items-end', className]\">\n  <div class=\"flex w-full items-center justify-between py-4\">\n    <input\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 w-[384px] rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] placeholder:text-[#737373] outline-none\"\n    />\n\n    <button type=\"button\" class=\"inline-flex h-9 items-center gap-2 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-2 shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">\n      <span class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"w-full overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white\">\n    <table class=\"w-full border-collapse text-[14px] leading-5 text-[#0a0a0a]\">\n      <thead>\n        <tr class=\"border-b border-[#e5e5e5]\">\n          <th class=\"w-[32px] px-2 text-left font-medium\"><input type=\"checkbox\" class=\"h-4 w-4 rounded-[4px] border border-[#e5e5e5]\" /></th>\n          <th class=\"w-[120px] px-2 py-2 text-left font-medium\">Status</th>\n          <th class=\"w-[270px] px-2 py-2 text-left font-medium\">\n            <button type=\"button\" class=\"inline-flex items-center gap-1 rounded-[6px] px-3 py-2\">\n              <span>Email</span>\n              <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M8 6L4 10L8 14M16 18L20 14L16 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n              </svg>\n            </button>\n          </th>\n          <th class=\"w-[100px] px-2 py-2 text-right font-medium\">Amount</th>\n          <th class=\"px-2 py-2\"></th>\n        </tr>\n      </thead>\n\n      <tbody>\n        <tr *ngFor=\"let row of pagedRows\" class=\"border-b border-[#e5e5e5] last:border-b-0\">\n          <td class=\"px-2 py-2\"><input type=\"checkbox\" [checked]=\"row.selected\" (change)=\"onToggleRow(row, $event)\" class=\"h-4 w-4 rounded-[4px] border border-[#e5e5e5]\" /></td>\n          <td class=\"px-2 py-2\">{{ row.status }}</td>\n          <td class=\"px-2 py-2\">{{ row.email }}</td>\n          <td class=\"px-2 py-2 text-right\">{{ row.amount }}</td>\n          <td class=\"px-2 py-2\">\n            <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center\" (click)=\"onAction(row)\">\n              <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n                <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n                <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              </svg>\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <div class=\"flex w-full items-center gap-2 py-4\">\n    <p class=\"flex-1 pr-2 text-[14px] leading-5 text-[#737373]\">{{ selectedCount }} of {{ rows.length }} row(s) selected.</p>\n    <button type=\"button\" class=\"h-9 rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] disabled:opacity-50\" [disabled]=\"page <= 1\" (click)=\"previous()\">Previous</button>\n    <button type=\"button\" class=\"h-9 rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] disabled:opacity-50\" [disabled]=\"page >= totalPages\" (click)=\"next()\">Next</button>\n  </div>\n</section>\n" }]
-        }], propDecorators: { className: [{
-                type: Input
-            }], filterPlaceholder: [{
-                type: Input
-            }], columnsLabel: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], page: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], query: [{
-                type: Input
-            }], queryChange: [{
-                type: Output
-            }], rowAction: [{
-                type: Output
-            }], pageChange: [{
-                type: Output
-            }], selectionChange: [{
-                type: Output
-            }] } });
-
-class PdmDatePickerComponent {
-    constructor() {
-        this.variant = 'default';
-        this.className = '';
-        this.open = false;
-        this.label = 'Date of Birth';
-        this.value = 'Select a date';
-        this.month = 6;
-        this.year = 2025;
-        this.selectedDay = 25;
-        this.time = '10:30:00';
-        this.naturalLanguageValue = 'In 2 days';
-        this.naturalLanguageHint = 'Your post will be published on June 21, 2025.';
-        this.openChange = new EventEmitter();
-        this.valueChange = new EventEmitter();
-    }
-    toggle() {
-        this.openChange.emit(!this.open);
-    }
-    selectPreset(value) {
-        this.valueChange.emit(value);
-    }
-    get monthLabel() {
-        return new Date(this.year, this.month - 1, 1).toLocaleString('en-US', { month: 'short' });
-    }
-}
-PdmDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmDatePickerComponent, selector: "pdm-date-picker", inputs: { variant: "variant", className: "className", open: "open", label: "label", value: "value", month: "month", year: "year", selectedDay: "selectedDay", time: "time", naturalLanguageValue: "naturalLanguageValue", naturalLanguageHint: "naturalLanguageHint" }, outputs: { openChange: "openChange", valueChange: "valueChange" }, ngImport: i0, template: "<section [ngClass]=\"['flex flex-col gap-3', className]\" class=\"w-[250px]\">\n  <label class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ label }}</label>\n\n  <div class=\"flex items-center gap-2\" *ngIf=\"variant === 'date-time'\">\n    <button type=\"button\" class=\"flex h-9 w-[150px] items-center justify-between rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 shadow-[0_1px_2px_rgba(0,0,0,0.1)]\" (click)=\"toggle()\">\n      <span class=\"truncate text-[12px] leading-4 text-[#0a0a0a]\">{{ value }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n    </button>\n    <div class=\"flex h-9 w-[92px] items-center rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[12px] leading-4 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">{{ time }}</div>\n  </div>\n\n  <div *ngIf=\"variant !== 'date-time'\" class=\"flex flex-col gap-2\">\n    <button type=\"button\" class=\"flex h-9 w-[192px] items-center justify-between rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 shadow-[0_1px_2px_rgba(0,0,0,0.1)]\" (click)=\"toggle()\">\n      <span class=\"truncate text-[16px] leading-6 text-[#0a0a0a]\">{{ variant === 'natural-language' ? naturalLanguageValue : value }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n    </button>\n\n    <p *ngIf=\"variant === 'natural-language'\" class=\"max-w-[192px] text-[12px] leading-4 text-[#737373]\">{{ naturalLanguageHint }}</p>\n  </div>\n\n  <div *ngIf=\"open\" class=\"w-[250px] rounded-[10px] border border-[#e5e5e5] bg-white p-3 shadow-[0_1px_3px_rgba(0,0,0,0.1)]\">\n    <div class=\"mb-4 flex items-center justify-between\">\n      <button type=\"button\" class=\"h-8 w-8 rounded-[6px] text-[#0a0a0a]\">\u2039</button>\n      <div class=\"flex items-center gap-1.5\">\n        <button type=\"button\" class=\"inline-flex h-8 items-center gap-1 rounded-[6px] border border-[#e5e5e5] px-2 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">{{ monthLabel }} <span>\u02C5</span></button>\n        <button type=\"button\" class=\"inline-flex h-8 items-center gap-1 rounded-[6px] border border-[#e5e5e5] px-2 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">{{ year }} <span>\u02C5</span></button>\n      </div>\n      <button type=\"button\" class=\"h-8 w-8 rounded-[6px] text-[#0a0a0a]\">\u203A</button>\n    </div>\n\n    <pdm-calendar [month]=\"month\" [year]=\"year\" [selectedDay]=\"selectedDay\" mode=\"single\"></pdm-calendar>\n\n    <div *ngIf=\"variant === 'with-input' || variant === 'natural-language'\" class=\"mt-3 flex gap-2\">\n      <button type=\"button\" class=\"h-8 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#0a0a0a]\" (click)=\"selectPreset('Today')\">Today</button>\n      <button type=\"button\" class=\"h-8 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#0a0a0a]\" (click)=\"selectPreset('Tomorrow')\">Tomorrow</button>\n    </div>\n  </div>\n</section>\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: PdmCalendarComponent, selector: "pdm-calendar", inputs: ["mode", "month", "year", "selectedDay", "rangeStartDay", "rangeEndDay", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmDatePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex flex-col gap-3', className]\" class=\"w-[250px]\">\n  <label class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ label }}</label>\n\n  <div class=\"flex items-center gap-2\" *ngIf=\"variant === 'date-time'\">\n    <button type=\"button\" class=\"flex h-9 w-[150px] items-center justify-between rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 shadow-[0_1px_2px_rgba(0,0,0,0.1)]\" (click)=\"toggle()\">\n      <span class=\"truncate text-[12px] leading-4 text-[#0a0a0a]\">{{ value }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n    </button>\n    <div class=\"flex h-9 w-[92px] items-center rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[12px] leading-4 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">{{ time }}</div>\n  </div>\n\n  <div *ngIf=\"variant !== 'date-time'\" class=\"flex flex-col gap-2\">\n    <button type=\"button\" class=\"flex h-9 w-[192px] items-center justify-between rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 shadow-[0_1px_2px_rgba(0,0,0,0.1)]\" (click)=\"toggle()\">\n      <span class=\"truncate text-[16px] leading-6 text-[#0a0a0a]\">{{ variant === 'natural-language' ? naturalLanguageValue : value }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-[#0a0a0a]\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n    </button>\n\n    <p *ngIf=\"variant === 'natural-language'\" class=\"max-w-[192px] text-[12px] leading-4 text-[#737373]\">{{ naturalLanguageHint }}</p>\n  </div>\n\n  <div *ngIf=\"open\" class=\"w-[250px] rounded-[10px] border border-[#e5e5e5] bg-white p-3 shadow-[0_1px_3px_rgba(0,0,0,0.1)]\">\n    <div class=\"mb-4 flex items-center justify-between\">\n      <button type=\"button\" class=\"h-8 w-8 rounded-[6px] text-[#0a0a0a]\">\u2039</button>\n      <div class=\"flex items-center gap-1.5\">\n        <button type=\"button\" class=\"inline-flex h-8 items-center gap-1 rounded-[6px] border border-[#e5e5e5] px-2 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">{{ monthLabel }} <span>\u02C5</span></button>\n        <button type=\"button\" class=\"inline-flex h-8 items-center gap-1 rounded-[6px] border border-[#e5e5e5] px-2 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">{{ year }} <span>\u02C5</span></button>\n      </div>\n      <button type=\"button\" class=\"h-8 w-8 rounded-[6px] text-[#0a0a0a]\">\u203A</button>\n    </div>\n\n    <pdm-calendar [month]=\"month\" [year]=\"year\" [selectedDay]=\"selectedDay\" mode=\"single\"></pdm-calendar>\n\n    <div *ngIf=\"variant === 'with-input' || variant === 'natural-language'\" class=\"mt-3 flex gap-2\">\n      <button type=\"button\" class=\"h-8 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#0a0a0a]\" (click)=\"selectPreset('Today')\">Today</button>\n      <button type=\"button\" class=\"h-8 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#0a0a0a]\" (click)=\"selectPreset('Tomorrow')\">Tomorrow</button>\n    </div>\n  </div>\n</section>\n" }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], month: [{
-                type: Input
-            }], year: [{
-                type: Input
-            }], selectedDay: [{
-                type: Input
-            }], time: [{
-                type: Input
-            }], naturalLanguageValue: [{
-                type: Input
-            }], naturalLanguageHint: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class PdmDialogComponent {
-    constructor() {
-        this.open = false;
-        this.variant = 'default';
-        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.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.className = '';
-        this.openChange = new EventEmitter();
-        this.primaryAction = new EventEmitter();
-        this.secondaryAction = new EventEmitter();
-    }
-    onEsc() {
-        if (this.open && this.closeOnEsc) {
-            this.close();
-        }
-    }
-    close() {
-        this.openChange.emit(false);
-    }
-    onPrimaryAction() {
-        this.primaryAction.emit();
-    }
-    onSecondaryAction() {
-        this.secondaryAction.emit();
-    }
-    onBackdropClick() {
-        if (this.closeOnBackdrop) {
-            this.close();
-        }
-    }
-}
-PdmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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-[rgba(0,0,0,0.3)]\" (click)=\"onBackdropClick()\"></div>\n  <section\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-10 w-full max-w-[423px] rounded-[10px] border border-[#e5e5e5] bg-white p-6 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]',\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-[18px] font-semibold leading-7 text-[#0a0a0a]\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-[14px] leading-5 text-[#737373]\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 items-center justify-center text-[#0a0a0a] opacity-70\"\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-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ nameLabel }}</label>\n          <div class=\"h-9 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">{{ nameValue }}</div>\n        </div>\n        <div class=\"flex flex-col gap-3\">\n          <label class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ usernameLabel }}</label>\n          <div class=\"h-9 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <div class=\"mt-4 flex justify-end gap-2\">\n        <button\n          type=\"button\"\n          class=\"h-9 rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"h-9 rounded-[10px] bg-[#171717] px-4 text-[14px] font-medium leading-5 text-[#fafafa] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\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-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">\n        {{ linkValue }}\n      </div>\n      <div class=\"mt-4 flex\">\n        <button\n          type=\"button\"\n          class=\"h-9 rounded-[10px] bg-[#f5f5f5] px-4 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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-[rgba(0,0,0,0.3)]\" (click)=\"onBackdropClick()\"></div>\n  <section\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-10 w-full max-w-[423px] rounded-[10px] border border-[#e5e5e5] bg-white p-6 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]',\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-[18px] font-semibold leading-7 text-[#0a0a0a]\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-[14px] leading-5 text-[#737373]\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 items-center justify-center text-[#0a0a0a] opacity-70\"\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-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ nameLabel }}</label>\n          <div class=\"h-9 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">{{ nameValue }}</div>\n        </div>\n        <div class=\"flex flex-col gap-3\">\n          <label class=\"text-[14px] font-medium leading-5 text-[#0a0a0a]\">{{ usernameLabel }}</label>\n          <div class=\"h-9 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <div class=\"mt-4 flex justify-end gap-2\">\n        <button\n          type=\"button\"\n          class=\"h-9 rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"h-9 rounded-[10px] bg-[#171717] px-4 text-[14px] font-medium leading-5 text-[#fafafa] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\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-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\">\n        {{ linkValue }}\n      </div>\n      <div class=\"mt-4 flex\">\n        <button\n          type=\"button\"\n          class=\"h-9 rounded-[10px] bg-[#f5f5f5] px-4 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\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" }]
-        }], propDecorators: { open: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], closeOnBackdrop: [{
-                type: Input
-            }], closeOnEsc: [{
-                type: Input
-            }], showCloseButton: [{
-                type: Input
-            }], primaryActionText: [{
-                type: Input
-            }], secondaryActionText: [{
-                type: Input
-            }], nameLabel: [{
-                type: Input
-            }], nameValue: [{
-                type: Input
-            }], usernameLabel: [{
-                type: Input
-            }], usernameValue: [{
-                type: Input
-            }], linkValue: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }], primaryAction: [{
-                type: Output
-            }], secondaryAction: [{
-                type: Output
-            }], onEsc: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
-
-class PdmDropdownMenuComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.triggerText = 'Open';
-        this.variant = 'default';
-        this.items = [];
-        this.closeOnSelect = true;
-        this.panelClassName = '';
-        this.className = '';
-        this.itemSelect = new EventEmitter();
-        this.itemsChange = new EventEmitter();
-        this.open = false;
-    }
-    toggle() {
-        this.open = !this.open;
-    }
-    get resolvedItems() {
-        if (this.items.length) {
-            return this.items;
-        }
-        if (this.variant === 'checkboxes') {
-            return [
-                { type: 'label', label: 'Appearance' },
-                { type: 'separator' },
-                { type: 'item', label: 'Status Bar', value: 'status-bar', checked: true },
-                { type: 'item', label: 'Activity Bar', value: 'activity-bar', checked: false },
-                { type: 'item', label: 'Panel', value: 'panel', checked: false }
-            ];
-        }
-        if (this.variant === 'radio-group') {
-            return [
-                { type: 'label', label: 'Panel Position' },
-                { type: 'separator' },
-                { type: 'item', label: 'Top', value: 'top', radioSelected: true },
-                { type: 'item', label: 'Bottom', value: 'bottom', radioSelected: false },
-                { type: 'item', label: 'Right', value: 'right', radioSelected: false }
-            ];
-        }
-        return [
-            { type: 'label', label: 'My Account', inset: true },
-            { type: 'separator' },
-            { type: 'item', label: 'Profile', value: 'profile', shortcut: '⇧⌘P' },
-            { type: 'item', label: 'Billing', value: 'billing', shortcut: '⌘B' },
-            { type: 'item', label: 'Settings', value: 'settings', shortcut: '⌘S' },
-            { type: 'item', label: 'Keyboard shortcuts', value: 'shortcuts', shortcut: '⌘K' },
-            { type: 'separator' },
-            { type: 'item', label: 'Team', value: 'team' },
-            { type: 'item', label: 'Invite users', value: 'invite', showChevron: true },
-            { type: 'item', label: 'New Team', value: 'new-team', shortcut: '⌘+T' },
-            { type: 'separator' },
-            { type: 'item', label: 'GitHub', value: 'github' },
-            { type: 'item', label: 'Support', value: 'support' },
-            { type: 'item', label: 'API', value: 'api', disabled: true },
-            { type: 'separator' },
-            { type: 'item', label: 'Log out', value: 'logout', shortcut: '⇧⌘Q' }
-        ];
-    }
-    select(item) {
-        if (item.disabled || item.type === 'separator' || item.type === 'label' || !item.value)
-            return;
-        if (this.variant === 'checkboxes') {
-            const updated = this.resolvedItems.map((entry) => entry.value === item.value ? { ...entry, checked: !entry.checked } : entry);
-            this.itemsChange.emit(updated);
-        }
-        if (this.variant === 'radio-group') {
-            const updated = this.resolvedItems.map((entry) => entry.type === 'item'
-                ? { ...entry, radioSelected: entry.value === item.value }
-                : entry);
-            this.itemsChange.emit(updated);
-        }
-        this.itemSelect.emit(item.value);
-        const shouldClose = this.variant === 'default' ? this.closeOnSelect : false;
-        if (shouldClose) {
-            this.open = false;
-        }
-    }
-    onEsc() {
-        this.open = false;
-    }
-    onDocumentClick(event) {
-        if (!this.open)
-            return;
-        const target = event.target;
-        if (target && !this.elementRef.nativeElement.contains(target)) {
-            this.open = false;
-        }
-    }
-}
-PdmDropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmDropdownMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmDropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmDropdownMenuComponent, selector: "pdm-dropdown-menu", inputs: { triggerText: "triggerText", variant: "variant", items: "items", closeOnSelect: "closeOnSelect", panelClassName: "panelClassName", className: "className" }, outputs: { itemSelect: "itemSelect", itemsChange: "itemsChange" }, host: { listeners: { "document:keydown.escape": "onEsc()", "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button\n    type=\"button\"\n    class=\"inline-flex h-9 items-center justify-center rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    {{ triggerText }}\n  </button>\n\n  <div\n    *ngIf=\"open\"\n    [ngClass]=\"[\n      'absolute left-0 top-full z-50 mt-2 min-w-[224px] overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white p-1 text-[#0a0a0a] shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]',\n      panelClassName\n    ]\"\n  >\n    <ng-container *ngFor=\"let item of resolvedItems\">\n      <div *ngIf=\"item.type === 'separator'\" class=\"my-[5px] h-px bg-[#f1f5f9]\"></div>\n\n      <div\n        *ngIf=\"item.type === 'label'\"\n        [ngClass]=\"['px-2 py-1.5 text-[14px] font-semibold leading-5 text-[#0a0a0a]', item.inset ? 'pl-8' : '']\"\n      >\n        {{ item.label }}\n      </div>\n\n      <button\n        *ngIf=\"!item.type || item.type === 'item'\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"[\n          'relative flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left text-[14px] leading-5 text-[#0a0a0a] transition-colors hover:bg-[#f5f5f5] disabled:pointer-events-none disabled:opacity-50',\n          item.inset ? 'pl-8' : ''\n        ]\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\">\n          <svg\n            *ngIf=\"item.checked\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-3.5 w-3.5 text-[#0a0a0a]\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n          <span *ngIf=\"item.radioSelected\" class=\"h-2 w-2 rounded-full bg-[#0a0a0a]\"></span>\n        </span>\n        <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n        <span *ngIf=\"item.shortcut\" class=\"text-[12px] leading-5 text-[#64748b]\">{{ item.shortcut }}</span>\n        <span *ngIf=\"item.showChevron\" class=\"text-[16px] leading-none text-[#475569]\">\u203A</span>\n      </button>\n    </ng-container>\n  </div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmDropdownMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-dropdown-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button\n    type=\"button\"\n    class=\"inline-flex h-9 items-center justify-center rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    {{ triggerText }}\n  </button>\n\n  <div\n    *ngIf=\"open\"\n    [ngClass]=\"[\n      'absolute left-0 top-full z-50 mt-2 min-w-[224px] overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white p-1 text-[#0a0a0a] shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]',\n      panelClassName\n    ]\"\n  >\n    <ng-container *ngFor=\"let item of resolvedItems\">\n      <div *ngIf=\"item.type === 'separator'\" class=\"my-[5px] h-px bg-[#f1f5f9]\"></div>\n\n      <div\n        *ngIf=\"item.type === 'label'\"\n        [ngClass]=\"['px-2 py-1.5 text-[14px] font-semibold leading-5 text-[#0a0a0a]', item.inset ? 'pl-8' : '']\"\n      >\n        {{ item.label }}\n      </div>\n\n      <button\n        *ngIf=\"!item.type || item.type === 'item'\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"[\n          'relative flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left text-[14px] leading-5 text-[#0a0a0a] transition-colors hover:bg-[#f5f5f5] disabled:pointer-events-none disabled:opacity-50',\n          item.inset ? 'pl-8' : ''\n        ]\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\">\n          <svg\n            *ngIf=\"item.checked\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-3.5 w-3.5 text-[#0a0a0a]\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n          <span *ngIf=\"item.radioSelected\" class=\"h-2 w-2 rounded-full bg-[#0a0a0a]\"></span>\n        </span>\n        <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n        <span *ngIf=\"item.shortcut\" class=\"text-[12px] leading-5 text-[#64748b]\">{{ item.shortcut }}</span>\n        <span *ngIf=\"item.showChevron\" class=\"text-[16px] leading-none text-[#475569]\">\u203A</span>\n      </button>\n    </ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { triggerText: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], closeOnSelect: [{
-                type: Input
-            }], panelClassName: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], itemSelect: [{
-                type: Output
-            }], itemsChange: [{
-                type: Output
-            }], onEsc: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-class PdmDrawerComponent {
-    constructor() {
-        this.open = false;
-        this.variant = 'drawer';
-        this.className = '';
-        this.title = 'Move Goal';
-        this.description = 'Set your daily activity goal.';
-        this.value = 350;
-        this.unit = 'CALORIES/DAY';
-        this.profileTitle = 'Edit profile';
-        this.profileDescription = 'Make changes to your profile here. Click save when you\'re done.';
-        this.nameLabel = 'Name';
-        this.nameValue = 'Pedro Duarte';
-        this.usernameLabel = 'Username';
-        this.usernameValue = '@peduarte';
-        this.openChange = new EventEmitter();
-        this.primaryAction = new EventEmitter();
-        this.secondaryAction = new EventEmitter();
-        this.bars = [72, 54, 58, 49, 60, 65, 44, 53, 61, 52, 63, 48, 66];
-    }
-    close() {
-        this.openChange.emit(false);
-    }
-    onPrimaryAction() {
-        this.primaryAction.emit();
-    }
-    onSecondaryAction() {
-        this.secondaryAction.emit();
-    }
-}
-PdmDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmDrawerComponent, selector: "pdm-drawer", inputs: { open: "open", variant: "variant", className: "className", title: "title", description: "description", value: "value", unit: "unit", profileTitle: "profileTitle", profileDescription: "profileDescription", nameLabel: "nameLabel", nameValue: "nameValue", usernameLabel: "usernameLabel", usernameValue: "usernameValue" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\" [ngClass]=\"className\">\n  <div class=\"absolute inset-0 bg-[rgba(0,0,0,0.3)]\" (click)=\"close()\"></div>\n\n  <section\n    *ngIf=\"variant === 'drawer'; else responsiveDialog\"\n    class=\"absolute inset-x-0 bottom-0 mx-auto w-full max-w-[1229px] rounded-t-[10px] border border-[#e5e5e5] bg-white p-6 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-[#e5e5e5]\"></div>\n\n    <div class=\"mx-auto flex max-w-[320px] flex-col items-center\">\n      <h3 class=\"m-0 text-[14px] font-semibold leading-5 text-[#0a0a0a]\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-[12px] leading-4 text-[#737373]\">{{ description }}</p>\n\n      <div class=\"mt-3 flex w-full items-center justify-center gap-4\">\n        <button type=\"button\" class=\"inline-flex h-6 w-6 items-center justify-center rounded-full border border-[#e5e5e5] text-[#737373]\">-</button>\n        <div class=\"text-center\">\n          <div class=\"text-[48px] font-semibold leading-none text-[#0a0a0a]\">{{ value }}</div>\n          <div class=\"mt-1 text-[10px] tracking-wide text-[#737373]\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 items-center justify-center rounded-full border border-[#e5e5e5] text-[#737373]\">+</button>\n      </div>\n\n      <div class=\"mt-3 flex h-[58px] w-full items-end gap-[3px]\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-[#171717]\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button type=\"button\" class=\"mt-3 h-9 w-full rounded-[10px] bg-[#171717] text-[14px] font-medium text-[#fafafa]\" (click)=\"onPrimaryAction()\">Submit</button>\n      <button type=\"button\" class=\"mt-2 h-9 w-full rounded-[10px] border border-[#e5e5e5] bg-white text-[14px] font-medium text-[#0a0a0a]\" (click)=\"onSecondaryAction()\">Cancel</button>\n    </div>\n  </section>\n\n  <ng-template #responsiveDialog>\n    <section class=\"absolute left-1/2 top-1/2 w-full max-w-[423px] -translate-x-1/2 -translate-y-1/2 rounded-[10px] border border-[#e5e5e5] bg-white p-4 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-[18px] font-semibold leading-7 text-[#0a0a0a]\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-[12px] leading-4 text-[#737373]\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 text-[#737373]\" (click)=\"close()\">\u00D7</button>\n      </div>\n\n      <div class=\"mt-3 flex flex-col gap-3\">\n        <div>\n          <label class=\"mb-1 block text-[12px] font-medium leading-4 text-[#0a0a0a]\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-[6px] border border-[#e5e5e5] bg-white px-2 py-1 text-[12px] leading-4 text-[#0a0a0a]\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-[12px] font-medium leading-4 text-[#0a0a0a]\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-[6px] border border-[#e5e5e5] bg-white px-2 py-1 text-[12px] leading-4 text-[#0a0a0a]\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button type=\"button\" class=\"mt-3 h-8 w-full rounded-[8px] bg-[#171717] text-[12px] font-medium text-[#fafafa]\" (click)=\"onPrimaryAction()\">Save changes</button>\n    </section>\n  </ng-template>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmDrawerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\" [ngClass]=\"className\">\n  <div class=\"absolute inset-0 bg-[rgba(0,0,0,0.3)]\" (click)=\"close()\"></div>\n\n  <section\n    *ngIf=\"variant === 'drawer'; else responsiveDialog\"\n    class=\"absolute inset-x-0 bottom-0 mx-auto w-full max-w-[1229px] rounded-t-[10px] border border-[#e5e5e5] bg-white p-6 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-[#e5e5e5]\"></div>\n\n    <div class=\"mx-auto flex max-w-[320px] flex-col items-center\">\n      <h3 class=\"m-0 text-[14px] font-semibold leading-5 text-[#0a0a0a]\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-[12px] leading-4 text-[#737373]\">{{ description }}</p>\n\n      <div class=\"mt-3 flex w-full items-center justify-center gap-4\">\n        <button type=\"button\" class=\"inline-flex h-6 w-6 items-center justify-center rounded-full border border-[#e5e5e5] text-[#737373]\">-</button>\n        <div class=\"text-center\">\n          <div class=\"text-[48px] font-semibold leading-none text-[#0a0a0a]\">{{ value }}</div>\n          <div class=\"mt-1 text-[10px] tracking-wide text-[#737373]\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 items-center justify-center rounded-full border border-[#e5e5e5] text-[#737373]\">+</button>\n      </div>\n\n      <div class=\"mt-3 flex h-[58px] w-full items-end gap-[3px]\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-[#171717]\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button type=\"button\" class=\"mt-3 h-9 w-full rounded-[10px] bg-[#171717] text-[14px] font-medium text-[#fafafa]\" (click)=\"onPrimaryAction()\">Submit</button>\n      <button type=\"button\" class=\"mt-2 h-9 w-full rounded-[10px] border border-[#e5e5e5] bg-white text-[14px] font-medium text-[#0a0a0a]\" (click)=\"onSecondaryAction()\">Cancel</button>\n    </div>\n  </section>\n\n  <ng-template #responsiveDialog>\n    <section class=\"absolute left-1/2 top-1/2 w-full max-w-[423px] -translate-x-1/2 -translate-y-1/2 rounded-[10px] border border-[#e5e5e5] bg-white p-4 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-[18px] font-semibold leading-7 text-[#0a0a0a]\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-[12px] leading-4 text-[#737373]\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 text-[#737373]\" (click)=\"close()\">\u00D7</button>\n      </div>\n\n      <div class=\"mt-3 flex flex-col gap-3\">\n        <div>\n          <label class=\"mb-1 block text-[12px] font-medium leading-4 text-[#0a0a0a]\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-[6px] border border-[#e5e5e5] bg-white px-2 py-1 text-[12px] leading-4 text-[#0a0a0a]\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-[12px] font-medium leading-4 text-[#0a0a0a]\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-[6px] border border-[#e5e5e5] bg-white px-2 py-1 text-[12px] leading-4 text-[#0a0a0a]\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button type=\"button\" class=\"mt-3 h-8 w-full rounded-[8px] bg-[#171717] text-[12px] font-medium text-[#fafafa]\" (click)=\"onPrimaryAction()\">Save changes</button>\n    </section>\n  </ng-template>\n</div>\n" }]
-        }], propDecorators: { open: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], unit: [{
-                type: Input
-            }], profileTitle: [{
-                type: Input
-            }], profileDescription: [{
-                type: Input
-            }], nameLabel: [{
-                type: Input
-            }], nameValue: [{
-                type: Input
-            }], usernameLabel: [{
-                type: Input
-            }], usernameValue: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }], primaryAction: [{
-                type: Output
-            }], secondaryAction: [{
-                type: Output
-            }] } });
-
-class PdmEmptyComponent {
-    constructor() {
-        this.variant = 'default';
-        this.title = 'No Projects Yet';
-        this.description = "You haven't created any projects yet. Get started by creating your first project.";
-        this.iconName = 'folder';
-        this.primaryActionLabel = '';
-        this.secondaryActionLabel = '';
-        this.linkLabel = '';
-        this.className = '';
-        this.primaryAction = new EventEmitter();
-        this.secondaryAction = new EventEmitter();
-        this.linkAction = new EventEmitter();
-    }
-    get containerClass() {
-        if (this.variant === 'outline') {
-            return 'border border-dashed border-[hsl(var(--border))] rounded-[12px]';
-        }
-        if (this.variant === 'background') {
-            return 'rounded-[12px] bg-[hsl(var(--muted))]';
-        }
-        return '';
-    }
-}
-PdmEmptyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmEmptyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmEmptyComponent, selector: "pdm-empty", inputs: { variant: "variant", title: "title", description: "description", iconName: "iconName", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel", linkLabel: "linkLabel", className: "className" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction", linkAction: "linkAction" }, ngImport: i0, template: "<section [ngClass]=\"['flex flex-col items-center justify-center gap-4 px-6 py-10 text-center text-[hsl(var(--foreground))]', containerClass, className]\">\n  <div class=\"flex h-10 w-10 items-center justify-center rounded-[10px] bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]\">\n    <pdm-icon [name]=\"iconName\" [size]=\"20\"></pdm-icon>\n  </div>\n\n  <div class=\"space-y-2\">\n    <h3 class=\"text-2xl font-semibold leading-none tracking-tight\">{{ title }}</h3>\n    <p class=\"mx-auto max-w-[420px] text-sm leading-relaxed text-[hsl(var(--muted-foreground))]\">\n      {{ description }}\n    </p>\n  </div>\n\n  <div *ngIf=\"primaryActionLabel || secondaryActionLabel\" class=\"mt-1 flex flex-wrap items-center justify-center gap-3\">\n    <pdm-button *ngIf=\"primaryActionLabel\" variant=\"default\" (pressed)=\"primaryAction.emit()\">{{ primaryActionLabel }}</pdm-button>\n    <pdm-button *ngIf=\"secondaryActionLabel\" variant=\"outline\" (pressed)=\"secondaryAction.emit()\">{{ secondaryActionLabel }}</pdm-button>\n  </div>\n\n  <button\n    *ngIf=\"linkLabel\"\n    type=\"button\"\n    class=\"mt-1 inline-flex items-center gap-2 text-[15px] font-medium text-[hsl(var(--muted-foreground))] underline-offset-4 hover:underline\"\n    (click)=\"linkAction.emit()\"\n  >\n    <span>{{ linkLabel }}</span>\n    <pdm-icon name=\"arrow-up-right\" [size]=\"16\"></pdm-icon>\n  </button>\n\n  <ng-content></ng-content>\n</section>\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: PdmButtonComponent, selector: "pdm-button", inputs: ["type", "variant", "state", "size", "disabled", "loading", "className"], outputs: ["pressed"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmEmptyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-empty', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex flex-col items-center justify-center gap-4 px-6 py-10 text-center text-[hsl(var(--foreground))]', containerClass, className]\">\n  <div class=\"flex h-10 w-10 items-center justify-center rounded-[10px] bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]\">\n    <pdm-icon [name]=\"iconName\" [size]=\"20\"></pdm-icon>\n  </div>\n\n  <div class=\"space-y-2\">\n    <h3 class=\"text-2xl font-semibold leading-none tracking-tight\">{{ title }}</h3>\n    <p class=\"mx-auto max-w-[420px] text-sm leading-relaxed text-[hsl(var(--muted-foreground))]\">\n      {{ description }}\n    </p>\n  </div>\n\n  <div *ngIf=\"primaryActionLabel || secondaryActionLabel\" class=\"mt-1 flex flex-wrap items-center justify-center gap-3\">\n    <pdm-button *ngIf=\"primaryActionLabel\" variant=\"default\" (pressed)=\"primaryAction.emit()\">{{ primaryActionLabel }}</pdm-button>\n    <pdm-button *ngIf=\"secondaryActionLabel\" variant=\"outline\" (pressed)=\"secondaryAction.emit()\">{{ secondaryActionLabel }}</pdm-button>\n  </div>\n\n  <button\n    *ngIf=\"linkLabel\"\n    type=\"button\"\n    class=\"mt-1 inline-flex items-center gap-2 text-[15px] font-medium text-[hsl(var(--muted-foreground))] underline-offset-4 hover:underline\"\n    (click)=\"linkAction.emit()\"\n  >\n    <span>{{ linkLabel }}</span>\n    <pdm-icon name=\"arrow-up-right\" [size]=\"16\"></pdm-icon>\n  </button>\n\n  <ng-content></ng-content>\n</section>\n" }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], iconName: [{
-                type: Input
-            }], primaryActionLabel: [{
-                type: Input
-            }], secondaryActionLabel: [{
-                type: Input
-            }], linkLabel: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], primaryAction: [{
-                type: Output
-            }], secondaryAction: [{
-                type: Output
-            }], linkAction: [{
-                type: Output
-            }] } });
-
-class PdmFieldComponent {
-    constructor() {
-        this.id = '';
-        this.label = '';
-        this.description = '';
-        this.error = '';
-        this.required = false;
-        this.disabled = false;
-        this.invalid = false;
-        this.orientation = 'vertical';
-        this.descriptionPosition = 'after';
-        this.className = '';
-        this.labelClassName = '';
-        this.controlClassName = '';
-    }
-    get rootClass() {
-        return this.orientation === 'horizontal'
-            ? 'grid items-start gap-3 sm:grid-cols-[200px_minmax(0,1fr)] sm:gap-4'
-            : 'grid w-full gap-3';
-    }
-    get isHorizontal() {
-        return this.orientation === 'horizontal';
-    }
-    get showDescriptionBeforeControl() {
-        return !this.isHorizontal && this.descriptionPosition === 'before' && !!this.description && !this.invalid;
-    }
-    get showDescriptionAfterControl() {
-        return !this.isHorizontal && !this.showDescriptionBeforeControl && !!this.description && !this.invalid;
-    }
-}
-PdmFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmFieldComponent, selector: "pdm-field", inputs: { id: "id", label: "label", description: "description", error: "error", required: "required", disabled: "disabled", invalid: "invalid", orientation: "orientation", descriptionPosition: "descriptionPosition", className: "className", labelClassName: "labelClassName", controlClassName: "controlClassName" }, ngImport: i0, template: "<div [ngClass]=\"[rootClass, className]\">\n  <div [ngClass]=\"[isHorizontal ? 'grid gap-1.5' : 'grid gap-0']\">\n    <label\n      *ngIf=\"label\"\n      [attr.for]=\"id\"\n      [ngClass]=\"['text-sm font-medium leading-5 text-[hsl(var(--foreground))]', disabled ? 'opacity-70' : '', labelClassName]\"\n    >\n      {{ label }}\n      <span *ngIf=\"required\" class=\"text-[hsl(var(--destructive))]\">*</span>\n    </label>\n\n    <p *ngIf=\"isHorizontal && description && !invalid\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ description }}</p>\n    <p *ngIf=\"isHorizontal && invalid && error\" class=\"text-sm leading-5 text-[hsl(var(--destructive))]\">{{ error }}</p>\n  </div>\n\n  <div [ngClass]=\"['grid gap-3', controlClassName]\">\n    <p *ngIf=\"showDescriptionBeforeControl\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ description }}</p>\n\n    <ng-content></ng-content>\n    <ng-content select=\"[pdmFieldControl]\"></ng-content>\n\n    <p *ngIf=\"showDescriptionAfterControl\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ description }}</p>\n    <p *ngIf=\"!isHorizontal && invalid && error\" class=\"text-sm leading-5 text-[hsl(var(--destructive))]\">{{ error }}</p>\n    <ng-content select=\"[pdmFieldDescription]\"></ng-content>\n  </div>\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: "15.2.10", ngImport: i0, type: PdmFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"[rootClass, className]\">\n  <div [ngClass]=\"[isHorizontal ? 'grid gap-1.5' : 'grid gap-0']\">\n    <label\n      *ngIf=\"label\"\n      [attr.for]=\"id\"\n      [ngClass]=\"['text-sm font-medium leading-5 text-[hsl(var(--foreground))]', disabled ? 'opacity-70' : '', labelClassName]\"\n    >\n      {{ label }}\n      <span *ngIf=\"required\" class=\"text-[hsl(var(--destructive))]\">*</span>\n    </label>\n\n    <p *ngIf=\"isHorizontal && description && !invalid\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ description }}</p>\n    <p *ngIf=\"isHorizontal && invalid && error\" class=\"text-sm leading-5 text-[hsl(var(--destructive))]\">{{ error }}</p>\n  </div>\n\n  <div [ngClass]=\"['grid gap-3', controlClassName]\">\n    <p *ngIf=\"showDescriptionBeforeControl\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ description }}</p>\n\n    <ng-content></ng-content>\n    <ng-content select=\"[pdmFieldControl]\"></ng-content>\n\n    <p *ngIf=\"showDescriptionAfterControl\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ description }}</p>\n    <p *ngIf=\"!isHorizontal && invalid && error\" class=\"text-sm leading-5 text-[hsl(var(--destructive))]\">{{ error }}</p>\n    <ng-content select=\"[pdmFieldDescription]\"></ng-content>\n  </div>\n</div>\n" }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], descriptionPosition: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], labelClassName: [{
-                type: Input
-            }], controlClassName: [{
-                type: Input
-            }] } });
-
-class PdmHoverCardComponent {
-    constructor() {
-        this.className = '';
-        this.panelClassName = '';
-        this.side = 'bottom';
-        this.align = 'start';
-        this.panelWidth = 304;
-        this.open = false;
-    }
-    get positionClass() {
-        const sideClassMap = {
-            top: 'bottom-full mb-2',
-            right: 'left-full ml-2',
-            bottom: 'top-full mt-2',
-            left: 'right-full mr-2'
-        };
-        const alignClassMap = {
-            start: this.side === 'top' || this.side === 'bottom' ? 'left-0' : 'top-0',
-            center: this.side === 'top' || this.side === 'bottom' ? 'left-1/2 -translate-x-1/2' : 'top-1/2 -translate-y-1/2',
-            end: this.side === 'top' || this.side === 'bottom' ? 'right-0' : 'bottom-0'
-        };
-        return `${sideClassMap[this.side]} ${alignClassMap[this.align]}`;
-    }
-}
-PdmHoverCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmHoverCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmHoverCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmHoverCardComponent, selector: "pdm-hover-card", inputs: { className: "className", panelClassName: "panelClassName", side: "side", align: "align", panelWidth: "panelWidth" }, ngImport: i0, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"open = true\"\n  (mouseleave)=\"open = false\"\n  (focusin)=\"open = true\"\n  (focusout)=\"open = false\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    [style.width.px]=\"panelWidth\"\n    [ngClass]=\"[\n      'absolute z-30 rounded-[10px] border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-4 text-[hsl(var(--popover-foreground))] shadow-[0_10px_30px_rgba(15,23,42,0.15)]',\n      positionClass,\n      panelClassName\n    ]\"\n  >\n    <ng-content select=\"[pdmHoverContent]\"></ng-content>\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: "15.2.10", ngImport: i0, type: PdmHoverCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-hover-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"open = true\"\n  (mouseleave)=\"open = false\"\n  (focusin)=\"open = true\"\n  (focusout)=\"open = false\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    [style.width.px]=\"panelWidth\"\n    [ngClass]=\"[\n      'absolute z-30 rounded-[10px] border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-4 text-[hsl(var(--popover-foreground))] shadow-[0_10px_30px_rgba(15,23,42,0.15)]',\n      positionClass,\n      panelClassName\n    ]\"\n  >\n    <ng-content select=\"[pdmHoverContent]\"></ng-content>\n  </section>\n</div>\n" }]
-        }], propDecorators: { className: [{
-                type: Input
-            }], panelClassName: [{
-                type: Input
-            }], side: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], panelWidth: [{
-                type: Input
-            }] } });
-
-class PdmItemComponent {
-    constructor() {
-        this.className = '';
-        this.disabled = false;
-        this.selected = false;
-    }
-}
-PdmItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmItemComponent, selector: "pdm-item", inputs: { className: "className", disabled: "disabled", selected: "selected" }, ngImport: i0, template: "<div\n  [ngClass]=\"[\n    'relative flex w-full select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',\n    selected ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'text-[hsl(var(--foreground))]',\n    disabled ? 'pointer-events-none opacity-50' : 'hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',\n    className\n  ]\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngClass]=\"[\n    'relative flex w-full select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',\n    selected ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'text-[hsl(var(--foreground))]',\n    disabled ? 'pointer-events-none opacity-50' : 'hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',\n    className\n  ]\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { className: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }] } });
-
-class PdmInputComponent {
-    constructor() {
-        this.id = '';
-        this.type = 'text';
-        this.value = '';
-        this.placeholder = '';
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.invalid = false;
-        this.className = '';
-        this.inputClassName = '';
-        this.label = '';
-        this.helperText = '';
-        this.errorText = '';
-        this.valueChange = new EventEmitter();
-        this.blurred = new EventEmitter();
-    }
-    onInput(event) {
-        this.valueChange.emit(event.target.value);
-    }
-    onBlur(event) {
-        this.blurred.emit(event);
-    }
-}
-PdmInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmInputComponent, selector: "pdm-input", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label *ngIf=\"label\" [attr.for]=\"id\" class=\"text-sm font-medium leading-5 text-[hsl(var(--foreground))]\">{{ label }}</label>\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'flex h-9 w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-1 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none transition-[border-color,box-shadow] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 file:mr-1 file:border-0 file:bg-transparent file:px-[6px] file:py-px file:text-sm file:font-medium file:leading-5 file:text-[hsl(var(--foreground))]',\n      type === 'file' ? 'text-sm leading-5' : 'text-base leading-6',\n      invalid\n        ? 'border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:shadow-[0_0_0_3px_hsl(var(--destructive)/0.2)]'\n        : 'border-[hsl(var(--input))] focus:border-[hsl(var(--ring))] focus:shadow-[0_0_0_3px_hsl(var(--ring)/0.5)]',\n      inputClassName\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ helperText }}</p>\n  <p *ngIf=\"invalid && errorText\" class=\"text-sm leading-5 text-[hsl(var(--destructive))]\">{{ errorText }}</p>\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: "15.2.10", ngImport: i0, type: PdmInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label *ngIf=\"label\" [attr.for]=\"id\" class=\"text-sm font-medium leading-5 text-[hsl(var(--foreground))]\">{{ label }}</label>\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'flex h-9 w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-1 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none transition-[border-color,box-shadow] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 file:mr-1 file:border-0 file:bg-transparent file:px-[6px] file:py-px file:text-sm file:font-medium file:leading-5 file:text-[hsl(var(--foreground))]',\n      type === 'file' ? 'text-sm leading-5' : 'text-base leading-6',\n      invalid\n        ? 'border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:shadow-[0_0_0_3px_hsl(var(--destructive)/0.2)]'\n        : 'border-[hsl(var(--input))] focus:border-[hsl(var(--ring))] focus:shadow-[0_0_0_3px_hsl(var(--ring)/0.5)]',\n      inputClassName\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ helperText }}</p>\n  <p *ngIf=\"invalid && errorText\" class=\"text-sm leading-5 text-[hsl(var(--destructive))]\">{{ errorText }}</p>\n</div>\n" }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], inputClassName: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], helperText: [{
-                type: Input
-            }], errorText: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], blurred: [{
-                type: Output
-            }] } });
-
-class PdmInputPasswordComponent {
-    constructor() {
-        this.id = '';
-        this.value = '';
-        this.placeholder = '';
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.invalid = false;
-        this.className = '';
-        this.inputClassName = '';
-        this.label = '';
-        this.helperText = '';
-        this.errorText = '';
-        this.valueChange = new EventEmitter();
-        this.blurred = new EventEmitter();
-        this.showPassword = false;
-    }
-    get inputType() {
-        return this.showPassword ? 'text' : 'password';
-    }
-    onInput(event) {
-        this.valueChange.emit(event.target.value);
-    }
-    onBlur(event) {
-        this.blurred.emit(event);
-    }
-    toggleVisibility() {
-        if (this.disabled) {
-            return;
-        }
-        this.showPassword = !this.showPassword;
-    }
-}
-PdmInputPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmInputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmInputPasswordComponent, selector: "pdm-input-password", inputs: { id: "id", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label *ngIf=\"label\" [attr.for]=\"id\" class=\"text-sm font-medium leading-5 text-[hsl(var(--foreground))]\">{{ label }}</label>\n  <div class=\"relative\">\n    <input\n      [id]=\"id\"\n      [type]=\"inputType\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'flex h-9 w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-1 pr-10 text-base leading-6 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none transition-[border-color,box-shadow] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        invalid\n          ? 'border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:shadow-[0_0_0_3px_hsl(var(--destructive)/0.2)]'\n          : 'border-[hsl(var(--input))] focus:border-[hsl(var(--ring))] focus:shadow-[0_0_0_3px_hsl(var(--ring)/0.5)]',\n        inputClassName\n      ]\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded border-0 bg-transparent p-0 text-[hsl(var(--muted-foreground))] outline-none transition-colors hover:text-[hsl(var(--foreground))] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n      (click)=\"toggleVisibility()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\"></path>\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path d=\"M3 3l18 18\"></path>\n        <path d=\"M10.58 10.58a2 2 0 1 0 2.83 2.83\"></path>\n        <path d=\"M9.88 5.09A10.94 10.94 0 0 1 12 4.91c5.05 0 9.27 3.11 10.6 7.09a1 1 0 0 1 0 .64 11.9 11.9 0 0 1-1.84 3.2\"></path>\n        <path d=\"M6.61 6.61A11.81 11.81 0 0 0 1.4 12a1 1 0 0 0 0 .64 11.83 11.83 0 0 0 8.79 7.54\"></path>\n      </svg>\n    </button>\n  </div>\n  <p *ngIf=\"!invalid && helperText\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ helperText }}</p>\n  <p *ngIf=\"invalid && errorText\" class=\"text-sm leading-5 text-[hsl(var(--destructive))]\">{{ errorText }}</p>\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: "15.2.10", ngImport: i0, type: PdmInputPasswordComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-input-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label *ngIf=\"label\" [attr.for]=\"id\" class=\"text-sm font-medium leading-5 text-[hsl(var(--foreground))]\">{{ label }}</label>\n  <div class=\"relative\">\n    <input\n      [id]=\"id\"\n      [type]=\"inputType\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'flex h-9 w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-1 pr-10 text-base leading-6 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none transition-[border-color,box-shadow] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        invalid\n          ? 'border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:shadow-[0_0_0_3px_hsl(var(--destructive)/0.2)]'\n          : 'border-[hsl(var(--input))] focus:border-[hsl(var(--ring))] focus:shadow-[0_0_0_3px_hsl(var(--ring)/0.5)]',\n        inputClassName\n      ]\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded border-0 bg-transparent p-0 text-[hsl(var(--muted-foreground))] outline-none transition-colors hover:text-[hsl(var(--foreground))] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n      (click)=\"toggleVisibility()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\"></path>\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path d=\"M3 3l18 18\"></path>\n        <path d=\"M10.58 10.58a2 2 0 1 0 2.83 2.83\"></path>\n        <path d=\"M9.88 5.09A10.94 10.94 0 0 1 12 4.91c5.05 0 9.27 3.11 10.6 7.09a1 1 0 0 1 0 .64 11.9 11.9 0 0 1-1.84 3.2\"></path>\n        <path d=\"M6.61 6.61A11.81 11.81 0 0 0 1.4 12a1 1 0 0 0 0 .64 11.83 11.83 0 0 0 8.79 7.54\"></path>\n      </svg>\n    </button>\n  </div>\n  <p *ngIf=\"!invalid && helperText\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ helperText }}</p>\n  <p *ngIf=\"invalid && errorText\" class=\"text-sm leading-5 text-[hsl(var(--destructive))]\">{{ errorText }}</p>\n</div>\n" }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], inputClassName: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], helperText: [{
-                type: Input
-            }], errorText: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], blurred: [{
-                type: Output
-            }] } });
-
-class PdmInputGroupComponent {
-    constructor() {
-        this.id = '';
-        this.type = 'text';
-        this.value = '';
-        this.placeholder = '';
-        this.disabled = false;
-        this.invalid = false;
-        this.prefixText = '';
-        this.suffixText = '';
-        this.prefixIcon = '';
-        this.suffixIcon = '';
-        this.buttonText = '';
-        this.className = '';
-        this.valueChange = new EventEmitter();
-        this.buttonClick = new EventEmitter();
-    }
-    onInput(event) {
-        this.valueChange.emit(event.target.value);
-    }
-    onButtonClick(event) {
-        this.buttonClick.emit(event);
-    }
-}
-PdmInputGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmInputGroupComponent, selector: "pdm-input-group", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", invalid: "invalid", prefixText: "prefixText", suffixText: "suffixText", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", buttonText: "buttonText", className: "className" }, outputs: { valueChange: "valueChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div\n  [ngClass]=\"[\n    'flex w-full items-center gap-2',\n    disabled ? 'opacity-50' : '',\n    className\n  ]\"\n>\n  <div\n    [ngClass]=\"[\n      'flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-[8px] border bg-[hsl(var(--background))] px-3 py-1 text-base leading-6 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] transition-[border-color,box-shadow]',\n      invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]',\n      !invalid && !disabled ? 'focus-within:border-[hsl(var(--ring))] focus-within:shadow-[0_0_0_3px_hsl(var(--ring)/0.5)]' : '',\n      invalid && !disabled ? 'focus-within:border-[hsl(var(--destructive))] focus-within:shadow-[0_0_0_3px_hsl(var(--destructive)/0.2)]' : '',\n      disabled ? 'cursor-not-allowed' : ''\n    ]\"\n  >\n    <div\n      *ngIf=\"prefixText || prefixIcon\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm leading-5 text-[hsl(var(--muted-foreground))]\"\n    >\n      <pdm-icon *ngIf=\"prefixIcon\" [name]=\"prefixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"prefixText\">{{ prefixText }}</span>\n      <ng-content select=\"[pdmInputGroupPrefix]\"></ng-content>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-base leading-6 text-[hsl(var(--foreground))] outline-none placeholder:text-[hsl(var(--muted-foreground))]',\n        type === 'file' ? 'text-sm leading-5 file:mr-1 file:border-0 file:bg-transparent file:px-[6px] file:py-px file:text-sm file:font-medium file:leading-5 file:text-[hsl(var(--foreground))]' : ''\n      ]\"\n      (input)=\"onInput($event)\"\n    />\n\n    <div\n      *ngIf=\"!buttonText && (suffixText || suffixIcon)\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm leading-5 text-[hsl(var(--muted-foreground))]\"\n    >\n      <pdm-icon *ngIf=\"suffixIcon\" [name]=\"suffixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"suffixText\" class=\"font-medium\">{{ suffixText }}</span>\n      <ng-content select=\"[pdmInputGroupSuffix]\"></ng-content>\n    </div>\n  </div>\n\n  <button\n    *ngIf=\"buttonText\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"inline-flex h-9 shrink-0 items-center justify-center rounded-[10px] border border-[hsl(var(--input))] bg-[hsl(var(--background))] px-4 py-2 text-sm font-medium leading-5 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none transition-[border-color,box-shadow] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed\"\n    (click)=\"onButtonClick($event)\"\n  >\n    {{ buttonText }}\n  </button>\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: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmInputGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-input-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngClass]=\"[\n    'flex w-full items-center gap-2',\n    disabled ? 'opacity-50' : '',\n    className\n  ]\"\n>\n  <div\n    [ngClass]=\"[\n      'flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-[8px] border bg-[hsl(var(--background))] px-3 py-1 text-base leading-6 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] transition-[border-color,box-shadow]',\n      invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]',\n      !invalid && !disabled ? 'focus-within:border-[hsl(var(--ring))] focus-within:shadow-[0_0_0_3px_hsl(var(--ring)/0.5)]' : '',\n      invalid && !disabled ? 'focus-within:border-[hsl(var(--destructive))] focus-within:shadow-[0_0_0_3px_hsl(var(--destructive)/0.2)]' : '',\n      disabled ? 'cursor-not-allowed' : ''\n    ]\"\n  >\n    <div\n      *ngIf=\"prefixText || prefixIcon\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm leading-5 text-[hsl(var(--muted-foreground))]\"\n    >\n      <pdm-icon *ngIf=\"prefixIcon\" [name]=\"prefixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"prefixText\">{{ prefixText }}</span>\n      <ng-content select=\"[pdmInputGroupPrefix]\"></ng-content>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-base leading-6 text-[hsl(var(--foreground))] outline-none placeholder:text-[hsl(var(--muted-foreground))]',\n        type === 'file' ? 'text-sm leading-5 file:mr-1 file:border-0 file:bg-transparent file:px-[6px] file:py-px file:text-sm file:font-medium file:leading-5 file:text-[hsl(var(--foreground))]' : ''\n      ]\"\n      (input)=\"onInput($event)\"\n    />\n\n    <div\n      *ngIf=\"!buttonText && (suffixText || suffixIcon)\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm leading-5 text-[hsl(var(--muted-foreground))]\"\n    >\n      <pdm-icon *ngIf=\"suffixIcon\" [name]=\"suffixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"suffixText\" class=\"font-medium\">{{ suffixText }}</span>\n      <ng-content select=\"[pdmInputGroupSuffix]\"></ng-content>\n    </div>\n  </div>\n\n  <button\n    *ngIf=\"buttonText\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"inline-flex h-9 shrink-0 items-center justify-center rounded-[10px] border border-[hsl(var(--input))] bg-[hsl(var(--background))] px-4 py-2 text-sm font-medium leading-5 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] outline-none transition-[border-color,box-shadow] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed\"\n    (click)=\"onButtonClick($event)\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n" }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], prefixText: [{
-                type: Input
-            }], suffixText: [{
-                type: Input
-            }], prefixIcon: [{
-                type: Input
-            }], suffixIcon: [{
-                type: Input
-            }], buttonText: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], buttonClick: [{
-                type: Output
-            }] } });
-
-class PdmInputOtpComponent {
-    constructor() {
-        this.length = 6;
-        this.groupSize = 3;
-        this.disabled = false;
-        this.invalid = false;
-        this.className = '';
-        this.valueChange = new EventEmitter();
-        this.completed = new EventEmitter();
-        this.values = Array.from({ length: this.length }, () => '');
-    }
-    ngOnChanges() {
-        if (this.values.length !== this.length) {
-            this.values = Array.from({ length: this.length }, (_, index) => this.values[index] ?? '');
-        }
-    }
-    trackByIndex(index) {
-        return index;
-    }
-    onInput(index, event) {
-        const input = event.target;
-        const char = (input.value || '').replace(/\D+/g, '').slice(-1);
-        this.values[index] = char;
-        input.value = char;
-        this.emit();
-        if (char) {
-            this.focusInput(index + 1, true);
-        }
-    }
-    onKeyDown(index, event) {
-        if (event.key === 'Backspace' && !this.values[index]) {
-            this.focusInput(index - 1);
-            return;
-        }
-        if (event.key === 'ArrowLeft') {
-            event.preventDefault();
-            this.focusInput(index - 1);
-            return;
-        }
-        if (event.key === 'ArrowRight') {
-            event.preventDefault();
-            this.focusInput(index + 1);
-        }
-    }
-    onPaste(event) {
-        event.preventDefault();
-        const pastedText = (event.clipboardData?.getData('text') ?? '').replace(/\D+/g, '').slice(0, this.length);
-        if (!pastedText) {
-            return;
-        }
-        this.values = Array.from({ length: this.length }, (_, index) => pastedText[index] ?? '');
-        this.emit();
-        const nextIndex = Math.min(pastedText.length, this.length - 1);
-        this.focusInput(nextIndex);
-    }
-    getInputClasses(index) {
-        const classes = [
-            'h-9 w-9 appearance-none border bg-background text-center text-sm font-normal text-foreground outline-none transition focus:outline-none focus-visible:outline-none',
-            'shadow-[0_1px_2px_0_rgba(0,0,0,0.1)]',
-            'focus:border-input focus:ring-1 focus:ring-primary/30',
-            'disabled:cursor-not-allowed disabled:opacity-50',
-        ];
-        if (this.invalid) {
-            classes.push('border-destructive focus:border-destructive focus:ring-destructive');
-        }
-        else {
-            classes.push('border-input');
-        }
-        if (this.isGroupStart(index)) {
-            classes.push('rounded-l-md border-l');
-        }
-        else {
-            classes.push('border-l-0');
-        }
-        if (this.isGroupEnd(index)) {
-            classes.push('rounded-r-md');
-        }
-        return classes.join(' ');
-    }
-    shouldShowSeparator(index) {
-        return this.groupSize > 0 && (index + 1) % this.groupSize === 0 && index < this.length - 1;
-    }
-    isGroupStart(index) {
-        return this.groupSize <= 0 || index % this.groupSize === 0;
-    }
-    isGroupEnd(index) {
-        if (this.groupSize <= 0) {
-            return index === this.length - 1;
-        }
-        return (index + 1) % this.groupSize === 0 || index === this.length - 1;
-    }
-    emit() {
-        const value = this.values.join('');
-        this.valueChange.emit(value);
-        if (value.length === this.length && !this.values.includes('')) {
-            this.completed.emit(value);
-        }
-    }
-    focusInput(index, deferred = false) {
-        if (deferred) {
-            requestAnimationFrame(() => this.focusInput(index, false));
-            return;
-        }
-        if (!this.inputs || index < 0 || index >= this.length) {
-            return;
-        }
-        const input = this.inputs.get(index)?.nativeElement;
-        if (input) {
-            input.focus();
-            input.select();
-        }
-    }
-}
-PdmInputOtpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmInputOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputOtpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmInputOtpComponent, selector: "pdm-input-otp", inputs: { length: "length", groupSize: "groupSize", disabled: "disabled", invalid: "invalid", className: "className" }, outputs: { valueChange: "valueChange", completed: "completed" }, viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"['inline-flex items-center justify-center', className]\" (paste)=\"onPaste($event)\">\n  <ng-container *ngFor=\"let value of values; let index = index; trackBy: trackByIndex\">\n    <input\n      #otpInput\n      [class]=\"getInputClasses(index)\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      [attr.name]=\"'otp-digit-' + index\"\n      autocomplete=\"off\"\n      autocapitalize=\"off\"\n      spellcheck=\"false\"\n      [attr.aria-invalid]=\"invalid\"\n      [attr.aria-label]=\"'OTP digit ' + (index + 1)\"\n      (input)=\"onInput(index, $event)\"\n      (keydown)=\"onKeyDown(index, $event)\"\n    />\n    <span\n      *ngIf=\"shouldShowSeparator(index)\"\n      class=\"mx-2 mt-[-1px] h-px w-6 bg-foreground opacity-80\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmInputOtpComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-input-otp', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['inline-flex items-center justify-center', className]\" (paste)=\"onPaste($event)\">\n  <ng-container *ngFor=\"let value of values; let index = index; trackBy: trackByIndex\">\n    <input\n      #otpInput\n      [class]=\"getInputClasses(index)\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      [attr.name]=\"'otp-digit-' + index\"\n      autocomplete=\"off\"\n      autocapitalize=\"off\"\n      spellcheck=\"false\"\n      [attr.aria-invalid]=\"invalid\"\n      [attr.aria-label]=\"'OTP digit ' + (index + 1)\"\n      (input)=\"onInput(index, $event)\"\n      (keydown)=\"onKeyDown(index, $event)\"\n    />\n    <span\n      *ngIf=\"shouldShowSeparator(index)\"\n      class=\"mx-2 mt-[-1px] h-px w-6 bg-foreground opacity-80\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n</div>\n" }]
-        }], propDecorators: { length: [{
-                type: Input
-            }], groupSize: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], completed: [{
-                type: Output
-            }], inputs: [{
-                type: ViewChildren,
-                args: ['otpInput']
-            }] } });
-
-class PdmKbdComponent {
-    constructor() {
-        this.className = '';
-    }
-}
-PdmKbdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmKbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmKbdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmKbdComponent, selector: "pdm-kbd", inputs: { className: "className" }, ngImport: i0, template: "<kbd [ngClass]=\"['inline-flex h-6 min-w-[24px] items-center justify-center rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 font-mono text-xs font-medium text-[hsl(var(--muted-foreground))]', className]\">\n  <ng-content></ng-content>\n</kbd>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmKbdComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-kbd', changeDetection: ChangeDetectionStrategy.OnPush, template: "<kbd [ngClass]=\"['inline-flex h-6 min-w-[24px] items-center justify-center rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 font-mono text-xs font-medium text-[hsl(var(--muted-foreground))]', className]\">\n  <ng-content></ng-content>\n</kbd>\n" }]
-        }], propDecorators: { className: [{
-                type: Input
-            }] } });
-
-class PdmLabelComponent {
-    constructor() {
-        this.forId = '';
-        this.required = false;
-        this.className = '';
-    }
-}
-PdmLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmLabelComponent, selector: "pdm-label", inputs: { forId: "forId", required: "required", className: "className" }, ngImport: i0, template: "<label\n  [attr.for]=\"forId\"\n  [ngClass]=\"['text-sm font-medium leading-5 text-[hsl(var(--foreground))] peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className]\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"ml-1 text-[hsl(var(--destructive))]\">*</span>\n</label>\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: "15.2.10", ngImport: i0, type: PdmLabelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  [attr.for]=\"forId\"\n  [ngClass]=\"['text-sm font-medium leading-5 text-[hsl(var(--foreground))] peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className]\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"ml-1 text-[hsl(var(--destructive))]\">*</span>\n</label>\n" }]
-        }], propDecorators: { forId: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmMenubarComponent {
-    constructor() {
-        this.menus = [];
-        this.className = '';
-        this.itemSelect = new EventEmitter();
-        this.openIndex = -1;
-    }
-    toggle(index) {
-        this.openIndex = this.openIndex === index ? -1 : index;
-    }
-    select(value) {
-        this.itemSelect.emit(value);
-        this.openIndex = -1;
-    }
-}
-PdmMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmMenubarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmMenubarComponent, selector: "pdm-menubar", inputs: { menus: "menus", className: "className" }, outputs: { itemSelect: "itemSelect" }, ngImport: i0, template: "<nav role=\"menubar\" [ngClass]=\"['inline-flex h-9 items-center gap-0.5 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] p-1 shadow-[0_1px_2px_rgba(0,0,0,0.1)]', className]\">\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button type=\"button\" class=\"inline-flex h-7 items-center rounded-sm px-3 text-sm leading-5 text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))]\" (click)=\"toggle(i)\">{{ menu.label }}</button>\n    <div *ngIf=\"openIndex === i\" class=\"absolute left-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-[0_4px_6px_rgba(0,0,0,0.09)]\">\n      <button\n        *ngFor=\"let item of menu.items\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm leading-5 outline-none hover:bg-[hsl(var(--accent))] disabled:pointer-events-none disabled:opacity-50\"\n        (click)=\"select(item.value)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </div>\n</nav>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmMenubarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-menubar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav role=\"menubar\" [ngClass]=\"['inline-flex h-9 items-center gap-0.5 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] p-1 shadow-[0_1px_2px_rgba(0,0,0,0.1)]', className]\">\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button type=\"button\" class=\"inline-flex h-7 items-center rounded-sm px-3 text-sm leading-5 text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))]\" (click)=\"toggle(i)\">{{ menu.label }}</button>\n    <div *ngIf=\"openIndex === i\" class=\"absolute left-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-[0_4px_6px_rgba(0,0,0,0.09)]\">\n      <button\n        *ngFor=\"let item of menu.items\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm leading-5 outline-none hover:bg-[hsl(var(--accent))] disabled:pointer-events-none disabled:opacity-50\"\n        (click)=\"select(item.value)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </div>\n</nav>\n" }]
-        }], propDecorators: { menus: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], itemSelect: [{
-                type: Output
-            }] } });
-
-class PdmNativeSelectComponent {
-    constructor() {
-        this.id = '';
-        this.value = '';
-        this.disabled = false;
-        this.invalid = false;
-        this.options = [];
-        this.placeholder = 'Select an option';
-        this.className = '';
-        this.valueChange = new EventEmitter();
-    }
-    onChange(event) {
-        this.valueChange.emit(event.target.value);
-    }
-}
-PdmNativeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmNativeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmNativeSelectComponent, selector: "pdm-native-select", inputs: { id: "id", value: "value", disabled: "disabled", invalid: "invalid", options: "options", placeholder: "placeholder", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative\" [ngClass]=\"className\">\n  <select\n    [id]=\"id\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    (change)=\"onChange($event)\"\n    [ngClass]=\"[\n      'flex h-9 w-full appearance-none rounded-[8px] border bg-[hsl(var(--background))] px-3 py-2 pr-9 text-sm leading-5 shadow-[0_1px_2px_rgba(0,0,0,0.1)] ring-offset-[hsl(var(--background))] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--foreground))] disabled:cursor-not-allowed disabled:opacity-50',\n      invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]'\n    ]\"\n  >\n    <option value=\"\" disabled>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n  </select>\n  <pdm-icon className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[hsl(var(--muted-foreground))]\" name=\"chevron-down\" [size]=\"16\"></pdm-icon>\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: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmNativeSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-native-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\" [ngClass]=\"className\">\n  <select\n    [id]=\"id\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    (change)=\"onChange($event)\"\n    [ngClass]=\"[\n      'flex h-9 w-full appearance-none rounded-[8px] border bg-[hsl(var(--background))] px-3 py-2 pr-9 text-sm leading-5 shadow-[0_1px_2px_rgba(0,0,0,0.1)] ring-offset-[hsl(var(--background))] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--foreground))] disabled:cursor-not-allowed disabled:opacity-50',\n      invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]'\n    ]\"\n  >\n    <option value=\"\" disabled>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n  </select>\n  <pdm-icon className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[hsl(var(--muted-foreground))]\" name=\"chevron-down\" [size]=\"16\"></pdm-icon>\n</div>\n" }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class PdmNavigationMenuComponent {
-    constructor() {
-        this.items = [];
-        this.className = '';
-    }
-}
-PdmNavigationMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmNavigationMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmNavigationMenuComponent, selector: "pdm-navigation-menu", inputs: { items: "items", className: "className" }, ngImport: i0, template: "<nav [ngClass]=\"['relative z-10 flex max-w-max flex-1 items-center justify-center', className]\">\n  <ul class=\"group flex flex-1 list-none items-center justify-center space-x-1\">\n    <li *ngFor=\"let item of items\">\n      <a\n        [href]=\"item.href || '#'\"\n        [ngClass]=\"[\n          'group inline-flex h-9 w-max items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',\n          item.active ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'text-[hsl(var(--foreground))]'\n        ]\"\n      >\n        {{ item.label }}\n      </a>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmNavigationMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [ngClass]=\"['relative z-10 flex max-w-max flex-1 items-center justify-center', className]\">\n  <ul class=\"group flex flex-1 list-none items-center justify-center space-x-1\">\n    <li *ngFor=\"let item of items\">\n      <a\n        [href]=\"item.href || '#'\"\n        [ngClass]=\"[\n          'group inline-flex h-9 w-max items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',\n          item.active ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'text-[hsl(var(--foreground))]'\n        ]\"\n      >\n        {{ item.label }}\n      </a>\n    </li>\n  </ul>\n</nav>\n" }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmPaginationComponent {
-    constructor() {
-        this.page = 1;
-        this.pageCount = 1;
-        this.maxVisible = 5;
-        this.className = '';
-        this.pageChange = new EventEmitter();
-    }
-    get visiblePages() {
-        const total = Math.max(1, this.pageCount);
-        const visible = Math.max(1, this.maxVisible);
-        const half = Math.floor(visible / 2);
-        let start = Math.max(1, this.page - half);
-        let end = Math.min(total, start + visible - 1);
-        if (end - start + 1 < visible) {
-            start = Math.max(1, end - visible + 1);
-        }
-        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-    }
-    setPage(next) {
-        if (next < 1 || next > this.pageCount || next === this.page) {
-            return;
-        }
-        this.pageChange.emit(next);
-    }
-}
-PdmPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmPaginationComponent, selector: "pdm-pagination", inputs: { page: "page", pageCount: "pageCount", maxVisible: "maxVisible", className: "className" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav aria-label=\"Pagination\" [ngClass]=\"['mx-auto flex w-full justify-center', className]\">\n  <ul class=\"flex items-center gap-1\">\n    <li>\n      <button type=\"button\" class=\"inline-flex h-8 items-center justify-center gap-1 rounded-md px-2 text-sm text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] disabled:opacity-50\" [disabled]=\"page <= 1\" (click)=\"setPage(page - 1)\">\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <button\n        type=\"button\"\n        [ngClass]=\"[\n          'inline-flex h-6 min-w-[24px] items-center justify-center rounded-md px-2 text-sm',\n          pageNumber === page\n            ? 'border border-[hsl(var(--border))] bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]'\n            : 'text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]'\n        ]\"\n        (click)=\"setPage(pageNumber)\"\n      >\n        {{ pageNumber }}\n      </button>\n    </li>\n    <li>\n      <button type=\"button\" class=\"inline-flex h-8 items-center justify-center gap-1 rounded-md px-2 text-sm text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] disabled:opacity-50\" [disabled]=\"page >= pageCount\" (click)=\"setPage(page + 1)\">\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\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: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmPaginationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav aria-label=\"Pagination\" [ngClass]=\"['mx-auto flex w-full justify-center', className]\">\n  <ul class=\"flex items-center gap-1\">\n    <li>\n      <button type=\"button\" class=\"inline-flex h-8 items-center justify-center gap-1 rounded-md px-2 text-sm text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] disabled:opacity-50\" [disabled]=\"page <= 1\" (click)=\"setPage(page - 1)\">\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <button\n        type=\"button\"\n        [ngClass]=\"[\n          'inline-flex h-6 min-w-[24px] items-center justify-center rounded-md px-2 text-sm',\n          pageNumber === page\n            ? 'border border-[hsl(var(--border))] bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]'\n            : 'text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]'\n        ]\"\n        (click)=\"setPage(pageNumber)\"\n      >\n        {{ pageNumber }}\n      </button>\n    </li>\n    <li>\n      <button type=\"button\" class=\"inline-flex h-8 items-center justify-center gap-1 rounded-md px-2 text-sm text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] disabled:opacity-50\" [disabled]=\"page >= pageCount\" (click)=\"setPage(page + 1)\">\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n" }]
-        }], propDecorators: { page: [{
-                type: Input
-            }], pageCount: [{
-                type: Input
-            }], maxVisible: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], pageChange: [{
-                type: Output
-            }] } });
-
-class PdmPopoverComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.open = false;
-        this.triggerText = 'Open';
-        this.className = '';
-        this.panelClassName = '';
-        this.showTrigger = true;
-        this.openChange = new EventEmitter();
-    }
-    toggle() {
-        this.open = !this.open;
-        this.openChange.emit(this.open);
-    }
-    onEsc() {
-        if (this.open) {
-            this.open = false;
-            this.openChange.emit(false);
-        }
-    }
-    onDocumentClick(event) {
-        if (!this.open)
-            return;
-        const target = event.target;
-        if (target && !this.elementRef.nativeElement.contains(target)) {
-            this.open = false;
-            this.openChange.emit(false);
-        }
-    }
-}
-PdmPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmPopoverComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmPopoverComponent, selector: "pdm-popover", inputs: { open: "open", triggerText: "triggerText", className: "className", panelClassName: "panelClassName", showTrigger: "showTrigger" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEsc()", "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button *ngIf=\"showTrigger\" type=\"button\" class=\"inline-flex h-8 items-center justify-center rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-3 text-sm font-medium leading-5 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">{{ triggerText }}</button>\n  <div *ngIf=\"open || !showTrigger\" [ngClass]=\"['absolute left-0 top-full z-30 mt-2 min-w-[320px] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-4 text-[hsl(var(--popover-foreground))] shadow-[0px_4px_6px_0px_rgba(0,0,0,0.09)]', panelClassName]\">\n    <ng-content></ng-content>\n  </div>\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: "15.2.10", ngImport: i0, type: PdmPopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button *ngIf=\"showTrigger\" type=\"button\" class=\"inline-flex h-8 items-center justify-center rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-3 text-sm font-medium leading-5 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">{{ triggerText }}</button>\n  <div *ngIf=\"open || !showTrigger\" [ngClass]=\"['absolute left-0 top-full z-30 mt-2 min-w-[320px] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-4 text-[hsl(var(--popover-foreground))] shadow-[0px_4px_6px_0px_rgba(0,0,0,0.09)]', panelClassName]\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { open: [{
-                type: Input
-            }], triggerText: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], panelClassName: [{
-                type: Input
-            }], showTrigger: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }], onEsc: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-class PdmProgressComponent {
-    constructor() {
-        this.value = 0;
-        this.max = 100;
-        this.indeterminate = false;
-        this.className = '';
-    }
-    get width() {
-        if (this.indeterminate)
-            return '100%';
-        const safeMax = this.max > 0 ? this.max : 100;
-        const pct = Math.min(100, Math.max(0, (this.value / safeMax) * 100));
-        return pct + '%';
-    }
-}
-PdmProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmProgressComponent, selector: "pdm-progress", inputs: { value: "value", max: "max", indeterminate: "indeterminate", className: "className" }, ngImport: i0, template: "<div\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"max\"\n  [attr.aria-valuenow]=\"indeterminate ? null : value\"\n  [ngClass]=\"['relative h-1.5 w-full overflow-hidden rounded-full bg-[hsl(var(--muted))]', className]\"\n>\n  <div [ngClass]=\"['h-full bg-[hsl(var(--foreground))] transition-all', indeterminate ? 'animate-pulse' : '']\" [style.width]=\"width\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmProgressComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-progress', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"max\"\n  [attr.aria-valuenow]=\"indeterminate ? null : value\"\n  [ngClass]=\"['relative h-1.5 w-full overflow-hidden rounded-full bg-[hsl(var(--muted))]', className]\"\n>\n  <div [ngClass]=\"['h-full bg-[hsl(var(--foreground))] transition-all', indeterminate ? 'animate-pulse' : '']\" [style.width]=\"width\"></div>\n</div>\n" }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], indeterminate: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmRadioGroupComponent {
-    constructor() {
-        this.name = 'pdm-radio-group';
-        this.value = '';
-        this.options = [];
-        this.direction = 'vertical';
-        this.className = '';
-        this.valueChange = new EventEmitter();
-    }
-    optionId(option) {
-        return `${this.name}-${option.value}`;
-    }
-    onChange(event) {
-        this.valueChange.emit(event.target.value);
-    }
-}
-PdmRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmRadioGroupComponent, selector: "pdm-radio-group", inputs: { name: "name", value: "value", options: "options", direction: "direction", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\n  role=\"radiogroup\"\n  [ngClass]=\"[\n    'gap-2',\n    direction === 'horizontal' ? 'inline-flex items-center' : 'grid',\n    className\n  ]\"\n>\n  <label *ngFor=\"let option of options\" [attr.for]=\"optionId(option)\" class=\"inline-flex cursor-pointer items-center gap-2\">\n    <input\n      [id]=\"optionId(option)\"\n      type=\"radio\"\n      [name]=\"name\"\n      [value]=\"option.value\"\n      [checked]=\"value === option.value\"\n      [disabled]=\"option.disabled\"\n      class=\"peer sr-only\"\n      (change)=\"onChange($event)\"\n    />\n    <span class=\"relative block h-4 w-4 rounded-full border border-[hsl(var(--input))] bg-[hsl(var(--background))] peer-checked:border-[hsl(var(--foreground))] peer-focus-visible:ring-1 peer-focus-visible:ring-[hsl(var(--foreground))]\">\n      <span class=\"absolute left-1/2 top-1/2 hidden h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[hsl(var(--foreground))] peer-checked:block\"></span>\n    </span>\n    <span class=\"text-sm leading-5 text-[hsl(var(--foreground))]\">{{ option.label }}</span>\n  </label>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmRadioGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  role=\"radiogroup\"\n  [ngClass]=\"[\n    'gap-2',\n    direction === 'horizontal' ? 'inline-flex items-center' : 'grid',\n    className\n  ]\"\n>\n  <label *ngFor=\"let option of options\" [attr.for]=\"optionId(option)\" class=\"inline-flex cursor-pointer items-center gap-2\">\n    <input\n      [id]=\"optionId(option)\"\n      type=\"radio\"\n      [name]=\"name\"\n      [value]=\"option.value\"\n      [checked]=\"value === option.value\"\n      [disabled]=\"option.disabled\"\n      class=\"peer sr-only\"\n      (change)=\"onChange($event)\"\n    />\n    <span class=\"relative block h-4 w-4 rounded-full border border-[hsl(var(--input))] bg-[hsl(var(--background))] peer-checked:border-[hsl(var(--foreground))] peer-focus-visible:ring-1 peer-focus-visible:ring-[hsl(var(--foreground))]\">\n      <span class=\"absolute left-1/2 top-1/2 hidden h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[hsl(var(--foreground))] peer-checked:block\"></span>\n    </span>\n    <span class=\"text-sm leading-5 text-[hsl(var(--foreground))]\">{{ option.label }}</span>\n  </label>\n</div>\n" }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class PdmScrollAreaComponent {
-    constructor() {
-        this.maxHeight = '16rem';
-        this.className = '';
-    }
-}
-PdmScrollAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmScrollAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmScrollAreaComponent, selector: "pdm-scroll-area", inputs: { maxHeight: "maxHeight", className: "className" }, ngImport: i0, template: "<div [style.maxHeight]=\"maxHeight\" [ngClass]=\"['relative overflow-auto rounded-[var(--radius)] border border-[hsl(var(--border))]', className]\">\n  <div class=\"p-3\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmScrollAreaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-scroll-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.maxHeight]=\"maxHeight\" [ngClass]=\"['relative overflow-auto rounded-[var(--radius)] border border-[hsl(var(--border))]', className]\">\n  <div class=\"p-3\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
-        }], propDecorators: { maxHeight: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmSelectComponent {
-    constructor() {
-        this.id = '';
-        this.value = '';
-        this.options = [];
-        this.disabled = false;
-        this.invalid = false;
-        this.className = '';
-        this.valueChange = new EventEmitter();
-    }
-    onChange(event) {
-        this.valueChange.emit(event.target.value);
-    }
-}
-PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<select\n  [id]=\"id\"\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  [attr.aria-invalid]=\"invalid\"\n  [ngClass]=\"[\n    'flex h-9 w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-2 text-sm leading-5 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] ring-offset-[hsl(var(--background))] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--foreground))] disabled:cursor-not-allowed disabled:opacity-50',\n    invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]',\n    className\n  ]\"\n  (change)=\"onChange($event)\"\n>\n  <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n</select>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select\n  [id]=\"id\"\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  [attr.aria-invalid]=\"invalid\"\n  [ngClass]=\"[\n    'flex h-9 w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-2 text-sm leading-5 text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)] ring-offset-[hsl(var(--background))] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--foreground))] disabled:cursor-not-allowed disabled:opacity-50',\n    invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]',\n    className\n  ]\"\n  (change)=\"onChange($event)\"\n>\n  <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n</select>\n" }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class PdmSeparatorComponent {
-    constructor() {
-        this.orientation = 'horizontal';
-        this.decorative = true;
-        this.className = '';
-    }
-    get orientationClass() {
-        return this.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full';
-    }
-}
-PdmSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmSeparatorComponent, selector: "pdm-separator", inputs: { orientation: "orientation", decorative: "decorative", className: "className" }, ngImport: i0, template: "<div\n  [attr.role]=\"decorative ? 'none' : 'separator'\"\n  [attr.aria-orientation]=\"orientation\"\n  [ngClass]=\"['shrink-0 bg-[hsl(var(--border))]', orientationClass, className]\"\n></div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-separator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [attr.role]=\"decorative ? 'none' : 'separator'\"\n  [attr.aria-orientation]=\"orientation\"\n  [ngClass]=\"['shrink-0 bg-[hsl(var(--border))]', orientationClass, className]\"\n></div>\n" }]
-        }], propDecorators: { orientation: [{
-                type: Input
-            }], decorative: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmSheetComponent {
-    constructor() {
-        this.open = false;
-        this.side = 'right';
-        this.className = '';
-        this.openChange = new EventEmitter();
-    }
-    close() {
-        this.openChange.emit(false);
-    }
-    get panelClass() {
-        if (this.side === 'left')
-            return 'left-0 top-0 h-full w-full max-w-[360px] border-r';
-        if (this.side === 'top')
-            return 'top-0 left-0 w-full border-b';
-        if (this.side === 'bottom')
-            return 'bottom-0 left-0 w-full border-t';
-        return 'right-0 top-0 h-full w-full max-w-[360px] border-l';
-    }
-}
-PdmSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmSheetComponent, selector: "pdm-sheet", inputs: { open: "open", side: "side", className: "className" }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 bg-black/55\" aria-label=\"Close sheet\" (click)=\"close()\"></button>\n\n  <section [ngClass]=\"['absolute bg-[hsl(var(--background))] border-[hsl(var(--border))] p-6 shadow-[0_4px_6px_rgba(0,0,0,0.09)]', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 rounded-sm opacity-70 transition-opacity hover:opacity-100\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\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: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSheetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 bg-black/55\" aria-label=\"Close sheet\" (click)=\"close()\"></button>\n\n  <section [ngClass]=\"['absolute bg-[hsl(var(--background))] border-[hsl(var(--border))] p-6 shadow-[0_4px_6px_rgba(0,0,0,0.09)]', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 rounded-sm opacity-70 transition-opacity hover:opacity-100\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n" }]
-        }], propDecorators: { open: [{
-                type: Input
-            }], side: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }] } });
-
-class PdmSidebarComponent {
-    constructor() {
-        this.collapsed = false;
-        this.className = '';
-    }
-}
-PdmSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmSidebarComponent, selector: "pdm-sidebar", inputs: { collapsed: "collapsed", className: "className" }, ngImport: i0, template: "<aside [ngClass]=\"['h-full border-r border-[hsl(var(--border))] bg-[hsl(var(--background))] transition-all', collapsed ? 'w-14' : 'w-64', className]\">\n  <ng-content></ng-content>\n</aside>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSidebarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside [ngClass]=\"['h-full border-r border-[hsl(var(--border))] bg-[hsl(var(--background))] transition-all', collapsed ? 'w-14' : 'w-64', className]\">\n  <ng-content></ng-content>\n</aside>\n" }]
-        }], propDecorators: { collapsed: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmSkeletonComponent {
-    constructor() {
-        this.className = '';
-    }
-}
-PdmSkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmSkeletonComponent, selector: "pdm-skeleton", inputs: { className: "className" }, ngImport: i0, template: "<div [ngClass]=\"['animate-pulse rounded-md bg-[hsl(var(--muted))]', className]\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSkeletonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['animate-pulse rounded-md bg-[hsl(var(--muted))]', className]\"></div>\n" }]
-        }], propDecorators: { className: [{
-                type: Input
-            }] } });
-
-class PdmSliderComponent {
-    constructor() {
-        this.min = 0;
-        this.max = 100;
-        this.step = 1;
-        this.value = 0;
-        this.disabled = false;
-        this.className = '';
-        this.valueChange = new EventEmitter();
-    }
-    get percentage() {
-        const safeRange = this.max - this.min;
-        if (safeRange <= 0) {
-            return 0;
-        }
-        const bounded = Math.min(this.max, Math.max(this.min, this.value));
-        return ((bounded - this.min) / safeRange) * 100;
-    }
-    onInput(event) {
-        this.valueChange.emit(Number(event.target.value));
-    }
-}
-PdmSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmSliderComponent, selector: "pdm-slider", inputs: { min: "min", max: "max", step: "step", value: "value", disabled: "disabled", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['relative h-5 w-full', className]\">\n  <div class=\"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-[hsl(var(--muted))]\"></div>\n  <div class=\"absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-[hsl(var(--foreground))]\" [style.width.%]=\"percentage\"></div>\n  <div class=\"absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-[hsl(var(--foreground))] bg-[hsl(var(--background))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\" [style.left.%]=\"percentage\"></div>\n  <input\n    type=\"range\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n    (input)=\"onInput($event)\"\n  />\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSliderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-slider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative h-5 w-full', className]\">\n  <div class=\"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-[hsl(var(--muted))]\"></div>\n  <div class=\"absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-[hsl(var(--foreground))]\" [style.width.%]=\"percentage\"></div>\n  <div class=\"absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-[hsl(var(--foreground))] bg-[hsl(var(--background))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]\" [style.left.%]=\"percentage\"></div>\n  <input\n    type=\"range\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n    (input)=\"onInput($event)\"\n  />\n</div>\n" }]
-        }], propDecorators: { min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class PdmSonnerComponent {
-    constructor() {
-        this.title = '';
-        this.description = '';
-        this.tone = 'default';
-        this.className = '';
-        this.dismissed = new EventEmitter();
-    }
-    get toneClass() {
-        if (this.tone === 'success')
-            return 'border-emerald-200 bg-emerald-50 text-emerald-900';
-        if (this.tone === 'error')
-            return 'border-red-200 bg-red-50 text-red-900';
-        if (this.tone === 'warning')
-            return 'border-amber-200 bg-amber-50 text-amber-900';
-        return 'border-[hsl(var(--border))] bg-[hsl(var(--background))] text-[hsl(var(--foreground))]';
-    }
-}
-PdmSonnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSonnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSonnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmSonnerComponent, selector: "pdm-sonner", inputs: { title: "title", description: "description", tone: "tone", className: "className" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div [ngClass]=\"['flex w-full max-w-sm items-start gap-3 rounded-lg border p-4 shadow-lg', toneClass, className]\" role=\"status\" aria-live=\"polite\">\n  <div class=\"grid gap-0.5\">\n    <p *ngIf=\"title\" class=\"text-sm font-semibold\">{{ title }}</p>\n    <p *ngIf=\"description\" class=\"text-sm opacity-90\">{{ description }}</p>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"ml-auto rounded-sm opacity-70 transition-opacity hover:opacity-100\" (click)=\"dismissed.emit()\" aria-label=\"Dismiss\">\n    <pdm-icon name=\"x\" [size]=\"14\"></pdm-icon>\n  </button>\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: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSonnerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-sonner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex w-full max-w-sm items-start gap-3 rounded-lg border p-4 shadow-lg', toneClass, className]\" role=\"status\" aria-live=\"polite\">\n  <div class=\"grid gap-0.5\">\n    <p *ngIf=\"title\" class=\"text-sm font-semibold\">{{ title }}</p>\n    <p *ngIf=\"description\" class=\"text-sm opacity-90\">{{ description }}</p>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"ml-auto rounded-sm opacity-70 transition-opacity hover:opacity-100\" (click)=\"dismissed.emit()\" aria-label=\"Dismiss\">\n    <pdm-icon name=\"x\" [size]=\"14\"></pdm-icon>\n  </button>\n</div>\n" }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], tone: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], dismissed: [{
-                type: Output
-            }] } });
-
-class PdmSpinnerComponent {
-    constructor() {
-        this.size = 16;
-        this.className = '';
-    }
-}
-PdmSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmSpinnerComponent, selector: "pdm-spinner", inputs: { size: "size", className: "className" }, ngImport: i0, template: "<span\n  [style.width.px]=\"size\"\n  [style.height.px]=\"size\"\n  [ngClass]=\"['inline-block animate-spin rounded-full border-2 border-current border-r-transparent', className]\"\n  aria-hidden=\"true\"\n></span>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSpinnerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [style.width.px]=\"size\"\n  [style.height.px]=\"size\"\n  [ngClass]=\"['inline-block animate-spin rounded-full border-2 border-current border-r-transparent', className]\"\n  aria-hidden=\"true\"\n></span>\n" }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class PdmSwitchComponent {
-    constructor() {
-        this.id = '';
-        this.checked = false;
-        this.disabled = false;
-        this.label = '';
-        this.className = '';
-        this.checkedChange = new EventEmitter();
-    }
-    onToggle(event) {
-        this.checkedChange.emit(event.target.checked);
-    }
-}
-PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmSwitchComponent, selector: "pdm-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", label: "label", className: "className" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<label [attr.for]=\"id\" [ngClass]=\"['inline-flex items-center gap-2', className]\">\n  <input\n    [id]=\"id\"\n    type=\"checkbox\"\n    class=\"peer sr-only\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onToggle($event)\"\n  />\n  <span class=\"relative inline-flex h-6 w-11 items-center rounded-full border border-transparent bg-[hsl(var(--muted))] transition-colors peer-focus-visible:ring-1 peer-focus-visible:ring-[hsl(var(--foreground))] peer-disabled:opacity-50 peer-checked:bg-[hsl(var(--foreground))]\">\n    <span class=\"h-5 w-5 translate-x-0.5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.1)] transition-transform peer-checked:translate-x-5\"></span>\n  </span>\n  <span *ngIf=\"label\" class=\"text-sm leading-5 text-[hsl(var(--foreground))]\">{{ label }}</span>\n</label>\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: "15.2.10", ngImport: i0, type: PdmSwitchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" [ngClass]=\"['inline-flex items-center gap-2', className]\">\n  <input\n    [id]=\"id\"\n    type=\"checkbox\"\n    class=\"peer sr-only\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onToggle($event)\"\n  />\n  <span class=\"relative inline-flex h-6 w-11 items-center rounded-full border border-transparent bg-[hsl(var(--muted))] transition-colors peer-focus-visible:ring-1 peer-focus-visible:ring-[hsl(var(--foreground))] peer-disabled:opacity-50 peer-checked:bg-[hsl(var(--foreground))]\">\n    <span class=\"h-5 w-5 translate-x-0.5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.1)] transition-transform peer-checked:translate-x-5\"></span>\n  </span>\n  <span *ngIf=\"label\" class=\"text-sm leading-5 text-[hsl(var(--foreground))]\">{{ label }}</span>\n</label>\n" }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], checkedChange: [{
-                type: Output
-            }] } });
-
-class PdmTableComponent {
-    constructor() {
-        this.className = '';
-    }
-}
-PdmTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmTableComponent, selector: "pdm-table", inputs: { className: "className" }, ngImport: i0, template: "<div [ngClass]=\"['relative w-full overflow-auto', className]\">\n  <table class=\"w-full caption-bottom text-sm\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative w-full overflow-auto', className]\">\n  <table class=\"w-full caption-bottom text-sm\">\n    <ng-content></ng-content>\n  </table>\n</div>\n" }]
-        }], propDecorators: { className: [{
-                type: Input
-            }] } });
-
-class PdmTabsComponent {
-    constructor() {
-        this.items = [];
-        this.value = '';
-        this.className = '';
-        this.valueChange = new EventEmitter();
-    }
-    select(item) {
-        if (!item.disabled) {
-            this.valueChange.emit(item.value);
-        }
-    }
-}
-PdmTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmTabsComponent, selector: "pdm-tabs", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div role=\"tablist\" class=\"inline-flex items-start rounded-[6px] bg-[hsl(var(--muted))] p-[5px]\">\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'inline-flex items-center justify-center whitespace-nowrap rounded-[3px] px-3 py-1.5 text-sm font-medium leading-5 ring-offset-[hsl(var(--background))] transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--foreground))] disabled:pointer-events-none disabled:opacity-50',\n        value === item.value ? 'bg-[hsl(var(--background))] text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]' : 'text-[hsl(var(--muted-foreground))]'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmTabsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div role=\"tablist\" class=\"inline-flex items-start rounded-[6px] bg-[hsl(var(--muted))] p-[5px]\">\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'inline-flex items-center justify-center whitespace-nowrap rounded-[3px] px-3 py-1.5 text-sm font-medium leading-5 ring-offset-[hsl(var(--background))] transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--foreground))] disabled:pointer-events-none disabled:opacity-50',\n        value === item.value ? 'bg-[hsl(var(--background))] text-[hsl(var(--foreground))] shadow-[0_1px_2px_rgba(0,0,0,0.1)]' : 'text-[hsl(var(--muted-foreground))]'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class PdmTextareaComponent {
-    constructor() {
-        this.id = '';
-        this.value = '';
-        this.placeholder = '';
-        this.rows = 4;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.invalid = false;
-        this.className = '';
-        this.textareaClassName = '';
-        this.label = '';
-        this.helperText = '';
-        this.errorText = '';
-        this.valueChange = new EventEmitter();
-    }
-    onInput(event) {
-        this.valueChange.emit(event.target.value);
-    }
-}
-PdmTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmTextareaComponent, selector: "pdm-textarea", inputs: { id: "id", value: "value", placeholder: "placeholder", rows: "rows", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", className: "className", textareaClassName: "textareaClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-2', className]\">\n  <label *ngIf=\"label\" [attr.for]=\"id\" class=\"text-sm font-medium leading-5 text-[hsl(var(--foreground))]\">{{ label }}</label>\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'flex min-h-[65px] w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-2 text-sm leading-5 shadow-[0_1px_2px_rgba(0,0,0,0.1)] ring-offset-[hsl(var(--background))] placeholder:text-[hsl(var(--muted-foreground))] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--foreground))] disabled:cursor-not-allowed disabled:opacity-50',\n      invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]',\n      textareaClassName\n    ]\"\n    (input)=\"onInput($event)\"\n  ></textarea>\n  <p *ngIf=\"!invalid && helperText\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ helperText }}</p>\n  <p *ngIf=\"invalid && errorText\" class=\"text-sm leading-5 text-[hsl(var(--destructive))]\">{{ errorText }}</p>\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: "15.2.10", ngImport: i0, type: PdmTextareaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-2', className]\">\n  <label *ngIf=\"label\" [attr.for]=\"id\" class=\"text-sm font-medium leading-5 text-[hsl(var(--foreground))]\">{{ label }}</label>\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'flex min-h-[65px] w-full rounded-[8px] border bg-[hsl(var(--background))] px-3 py-2 text-sm leading-5 shadow-[0_1px_2px_rgba(0,0,0,0.1)] ring-offset-[hsl(var(--background))] placeholder:text-[hsl(var(--muted-foreground))] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--foreground))] disabled:cursor-not-allowed disabled:opacity-50',\n      invalid ? 'border-[hsl(var(--destructive))]' : 'border-[hsl(var(--input))]',\n      textareaClassName\n    ]\"\n    (input)=\"onInput($event)\"\n  ></textarea>\n  <p *ngIf=\"!invalid && helperText\" class=\"text-sm leading-5 text-[hsl(var(--muted-foreground))]\">{{ helperText }}</p>\n  <p *ngIf=\"invalid && errorText\" class=\"text-sm leading-5 text-[hsl(var(--destructive))]\">{{ errorText }}</p>\n</div>\n" }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], textareaClassName: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], helperText: [{
-                type: Input
-            }], errorText: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class PdmToggleComponent {
-    constructor() {
-        this.pressed = false;
-        this.disabled = false;
-        this.size = 'default';
-        this.className = '';
-        this.pressedChange = new EventEmitter();
-    }
-    toggle() {
-        if (!this.disabled) {
-            this.pressedChange.emit(!this.pressed);
-        }
-    }
-    get sizeClass() {
-        if (this.size === 'sm')
-            return 'h-8 px-2.5 min-w-[32px]';
-        if (this.size === 'lg')
-            return 'h-10 px-4 min-w-[40px]';
-        return 'h-9 px-3 min-w-[36px]';
-    }
-}
-PdmToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmToggleComponent, selector: "pdm-toggle", inputs: { pressed: "pressed", disabled: "disabled", size: "size", className: "className" }, outputs: { pressedChange: "pressedChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  [disabled]=\"disabled\"\n  [attr.aria-pressed]=\"pressed\"\n  [ngClass]=\"[\n    'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',\n    sizeClass,\n    pressed\n      ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]'\n      : 'bg-transparent text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',\n    className\n  ]\"\n  (click)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmToggleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  [disabled]=\"disabled\"\n  [attr.aria-pressed]=\"pressed\"\n  [ngClass]=\"[\n    'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',\n    sizeClass,\n    pressed\n      ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]'\n      : 'bg-transparent text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',\n    className\n  ]\"\n  (click)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</button>\n" }]
-        }], propDecorators: { pressed: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], pressedChange: [{
-                type: Output
-            }] } });
-
-class PdmToggleGroupComponent {
-    constructor() {
-        this.items = [];
-        this.value = '';
-        this.className = '';
-        this.valueChange = new EventEmitter();
-    }
-    onSelect(next, disabled) {
-        if (!disabled && next !== this.value) {
-            this.valueChange.emit(next);
-        }
-    }
-}
-PdmToggleGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmToggleGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmToggleGroupComponent, selector: "pdm-toggle-group", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['inline-flex items-center rounded-md border border-[hsl(var(--border))] p-1', className]\" role=\"group\">\n  <button\n    *ngFor=\"let item of items\"\n    type=\"button\"\n    [disabled]=\"item.disabled\"\n    [attr.aria-pressed]=\"item.value === value\"\n    [ngClass]=\"[\n      'inline-flex h-8 items-center justify-center rounded-sm px-2.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',\n      item.value === value\n        ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]'\n        : 'text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]'\n    ]\"\n    (click)=\"onSelect(item.value, item.disabled)\"\n  >\n    {{ item.label }}\n  </button>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmToggleGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-toggle-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['inline-flex items-center rounded-md border border-[hsl(var(--border))] p-1', className]\" role=\"group\">\n  <button\n    *ngFor=\"let item of items\"\n    type=\"button\"\n    [disabled]=\"item.disabled\"\n    [attr.aria-pressed]=\"item.value === value\"\n    [ngClass]=\"[\n      'inline-flex h-8 items-center justify-center rounded-sm px-2.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',\n      item.value === value\n        ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]'\n        : 'text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]'\n    ]\"\n    (click)=\"onSelect(item.value, item.disabled)\"\n  >\n    {{ item.label }}\n  </button>\n</div>\n" }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class PdmTooltipComponent {
-    constructor() {
-        this.text = '';
-        this.side = 'top';
-        this.className = '';
-        this.open = false;
-    }
-    get positionClass() {
-        if (this.side === 'bottom')
-            return 'top-full left-1/2 -translate-x-1/2 mt-2';
-        if (this.side === 'left')
-            return 'right-full top-1/2 -translate-y-1/2 mr-2';
-        if (this.side === 'right')
-            return 'left-full top-1/2 -translate-y-1/2 ml-2';
-        return 'bottom-full left-1/2 -translate-x-1/2 mb-2';
-    }
-}
-PdmTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PdmTooltipComponent, selector: "pdm-tooltip", inputs: { text: "text", side: "side", className: "className" }, ngImport: i0, template: "<span class=\"relative inline-flex\" [ngClass]=\"className\" (mouseenter)=\"open = true\" (mouseleave)=\"open = false\" (focusin)=\"open = true\" (focusout)=\"open = false\">\n  <ng-content></ng-content>\n  <span *ngIf=\"open\" [ngClass]=\"['pointer-events-none absolute z-50 overflow-hidden rounded-md bg-[hsl(var(--foreground))] px-3 py-1.5 text-xs text-[hsl(var(--background))] animate-in fade-in-0 zoom-in-95', positionClass]\">\n    {{ text }}\n  </span>\n</span>\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: "15.2.10", ngImport: i0, type: PdmTooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"relative inline-flex\" [ngClass]=\"className\" (mouseenter)=\"open = true\" (mouseleave)=\"open = false\" (focusin)=\"open = true\" (focusout)=\"open = false\">\n  <ng-content></ng-content>\n  <span *ngIf=\"open\" [ngClass]=\"['pointer-events-none absolute z-50 overflow-hidden rounded-md bg-[hsl(var(--foreground))] px-3 py-1.5 text-xs text-[hsl(var(--background))] animate-in fade-in-0 zoom-in-95', positionClass]\">\n    {{ text }}\n  </span>\n</span>\n" }]
-        }], propDecorators: { text: [{
-                type: Input
-            }], side: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-const COMPONENTS = [
-    PdmAccordionComponent,
-    PdmAlertComponent,
-    PdmAlertDialogComponent,
-    PdmAspectRatioComponent,
-    PdmAvatarComponent,
-    PdmBadgeComponent,
-    PdmBreadcrumbComponent,
-    PdmButtonGroupComponent,
-    PdmButtonComponent,
-    PdmCalendarComponent,
-    PdmCarouselComponent,
-    PdmCardComponent,
-    PdmChartComponent,
-    PdmCheckboxComponent,
-    PdmCollapsibleComponent,
-    PdmComboboxComponent,
-    PdmCommandComponent,
-    PdmContextMenuComponent,
-    PdmDataTableComponent,
-    PdmDatePickerComponent,
-    PdmDialogComponent,
-    PdmDropdownMenuComponent,
-    PdmDrawerComponent,
-    PdmEmptyComponent,
-    PdmFieldComponent,
-    PdmHoverCardComponent,
-    PdmIconComponent,
-    PdmItemComponent,
-    PdmInputComponent,
-    PdmInputPasswordComponent,
-    PdmInputGroupComponent,
-    PdmInputOtpComponent,
-    PdmKbdComponent,
-    PdmLabelComponent,
-    PdmMenubarComponent,
-    PdmNativeSelectComponent,
-    PdmNavigationMenuComponent,
-    PdmPaginationComponent,
-    PdmPopoverComponent,
-    PdmProgressComponent,
-    PdmRadioGroupComponent,
-    PdmScrollAreaComponent,
-    PdmSelectComponent,
-    PdmSeparatorComponent,
-    PdmSheetComponent,
-    PdmSidebarComponent,
-    PdmSkeletonComponent,
-    PdmSliderComponent,
-    PdmSonnerComponent,
-    PdmSpinnerComponent,
-    PdmSwitchComponent,
-    PdmTableComponent,
-    PdmTabsComponent,
-    PdmTextareaComponent,
-    PdmToggleComponent,
-    PdmToggleGroupComponent,
-    PdmTooltipComponent
-];
-class PdmUiKitModule {
-}
-PdmUiKitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmUiKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmUiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PdmUiKitModule, declarations: [PdmAccordionComponent,
-        PdmAlertComponent,
-        PdmAlertDialogComponent,
-        PdmAspectRatioComponent,
-        PdmAvatarComponent,
-        PdmBadgeComponent,
-        PdmBreadcrumbComponent,
-        PdmButtonGroupComponent,
-        PdmButtonComponent,
-        PdmCalendarComponent,
-        PdmCarouselComponent,
-        PdmCardComponent,
-        PdmChartComponent,
-        PdmCheckboxComponent,
-        PdmCollapsibleComponent,
-        PdmComboboxComponent,
-        PdmCommandComponent,
-        PdmContextMenuComponent,
-        PdmDataTableComponent,
-        PdmDatePickerComponent,
-        PdmDialogComponent,
-        PdmDropdownMenuComponent,
-        PdmDrawerComponent,
-        PdmEmptyComponent,
-        PdmFieldComponent,
-        PdmHoverCardComponent,
-        PdmIconComponent,
-        PdmItemComponent,
-        PdmInputComponent,
-        PdmInputPasswordComponent,
-        PdmInputGroupComponent,
-        PdmInputOtpComponent,
-        PdmKbdComponent,
-        PdmLabelComponent,
-        PdmMenubarComponent,
-        PdmNativeSelectComponent,
-        PdmNavigationMenuComponent,
-        PdmPaginationComponent,
-        PdmPopoverComponent,
-        PdmProgressComponent,
-        PdmRadioGroupComponent,
-        PdmScrollAreaComponent,
-        PdmSelectComponent,
-        PdmSeparatorComponent,
-        PdmSheetComponent,
-        PdmSidebarComponent,
-        PdmSkeletonComponent,
-        PdmSliderComponent,
-        PdmSonnerComponent,
-        PdmSpinnerComponent,
-        PdmSwitchComponent,
-        PdmTableComponent,
-        PdmTabsComponent,
-        PdmTextareaComponent,
-        PdmToggleComponent,
-        PdmToggleGroupComponent,
-        PdmTooltipComponent], imports: [CommonModule], exports: [PdmAccordionComponent,
-        PdmAlertComponent,
-        PdmAlertDialogComponent,
-        PdmAspectRatioComponent,
-        PdmAvatarComponent,
-        PdmBadgeComponent,
-        PdmBreadcrumbComponent,
-        PdmButtonGroupComponent,
-        PdmButtonComponent,
-        PdmCalendarComponent,
-        PdmCarouselComponent,
-        PdmCardComponent,
-        PdmChartComponent,
-        PdmCheckboxComponent,
-        PdmCollapsibleComponent,
-        PdmComboboxComponent,
-        PdmCommandComponent,
-        PdmContextMenuComponent,
-        PdmDataTableComponent,
-        PdmDatePickerComponent,
-        PdmDialogComponent,
-        PdmDropdownMenuComponent,
-        PdmDrawerComponent,
-        PdmEmptyComponent,
-        PdmFieldComponent,
-        PdmHoverCardComponent,
-        PdmIconComponent,
-        PdmItemComponent,
-        PdmInputComponent,
-        PdmInputPasswordComponent,
-        PdmInputGroupComponent,
-        PdmInputOtpComponent,
-        PdmKbdComponent,
-        PdmLabelComponent,
-        PdmMenubarComponent,
-        PdmNativeSelectComponent,
-        PdmNavigationMenuComponent,
-        PdmPaginationComponent,
-        PdmPopoverComponent,
-        PdmProgressComponent,
-        PdmRadioGroupComponent,
-        PdmScrollAreaComponent,
-        PdmSelectComponent,
-        PdmSeparatorComponent,
-        PdmSheetComponent,
-        PdmSidebarComponent,
-        PdmSkeletonComponent,
-        PdmSliderComponent,
-        PdmSonnerComponent,
-        PdmSpinnerComponent,
-        PdmSwitchComponent,
-        PdmTableComponent,
-        PdmTabsComponent,
-        PdmTextareaComponent,
-        PdmToggleComponent,
-        PdmToggleGroupComponent,
-        PdmTooltipComponent] });
-PdmUiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmUiKitModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdmUiKitModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: COMPONENTS,
-                    exports: COMPONENTS
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { PdmAccordionComponent, PdmAlertComponent, PdmAlertDialogComponent, PdmAspectRatioComponent, PdmAvatarComponent, PdmBadgeComponent, PdmBreadcrumbComponent, PdmButtonComponent, PdmButtonGroupComponent, PdmCalendarComponent, PdmCardComponent, PdmCarouselComponent, PdmChartComponent, PdmCheckboxComponent, PdmCollapsibleComponent, PdmComboboxComponent, PdmCommandComponent, PdmContextMenuComponent, PdmDataTableComponent, PdmDatePickerComponent, PdmDialogComponent, PdmDrawerComponent, PdmDropdownMenuComponent, PdmEmptyComponent, PdmFieldComponent, PdmHoverCardComponent, PdmIconComponent, PdmInputComponent, PdmInputGroupComponent, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmKbdComponent, PdmLabelComponent, PdmMenubarComponent, PdmNativeSelectComponent, PdmNavigationMenuComponent, PdmPaginationComponent, PdmPopoverComponent, PdmProgressComponent, PdmRadioGroupComponent, PdmScrollAreaComponent, PdmSelectComponent, PdmSeparatorComponent, PdmSheetComponent, PdmSidebarComponent, PdmSkeletonComponent, PdmSliderComponent, PdmSonnerComponent, PdmSpinnerComponent, PdmSwitchComponent, PdmTableComponent, PdmTabsComponent, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmTooltipComponent, PdmUiKitModule };
-//# sourceMappingURL=pdm-ui-kit.mjs.map