pdm-ui-kit 0.1.11 → 0.1.13

package/fesm2015/pdm-ui-kit.mjs

@@ -261,18 +261,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class PdmButtonGroupComponent {
     constructor() {
         this.variant = 'default';
-        this.items = ['Archive', 'Report'];
+        this.direction = 'horizontal';
+        this.separated = true;
         this.className = '';
     }
+    get rootClasses() {
+        const isVertical = this.variant === 'orientation' || this.direction === 'vertical';
+        const isAttached = this.variant !== 'default' && !this.separated;
+        const isSeparator = this.variant === 'separator';
+        return [
+            'inline-flex w-fit',
+            isVertical ? 'flex-col items-stretch' : 'items-center',
+            this.variant === 'default' || this.separated ? 'gap-2' : 'gap-0',
+            isAttached
+                ? isVertical
+                    ? [
+                        '[&>*]:rounded-none',
+                        '[&>*:first-child]:rounded-t-md',
+                        '[&>*:last-child]:rounded-b-md',
+                        '[&>*:not(:first-child)]:border-t-0',
+                        '[&>*:not(:first-child)]:-mt-px'
+                    ].join(' ')
+                    : [
+                        '[&>*]:rounded-none',
+                        '[&>*:first-child]:rounded-l-md',
+                        '[&>*:last-child]:rounded-r-md',
+                        '[&>*:not(:first-child)]:border-l-0',
+                        '[&>*:not(:first-child)]:-ml-px'
+                    ].join(' ')
+                : '',
+            isSeparator
+                ? 'overflow-hidden rounded-md border border-border bg-secondary shadow-sm'
+                : '',
+            this.className
+        ];
+    }
 }
 PdmButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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-md border border-border bg-background shadow-sm\">\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center border-b border-border text-foreground\">+</button>\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center text-foreground\">-</button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'separator'\">\n      <div class=\"inline-flex overflow-hidden rounded-md border border-border bg-muted shadow-sm\">\n        <button type=\"button\" class=\"inline-flex h-8 items-center justify-center border-r border-border px-3 text-sm font-medium text-foreground\">Copy</button>\n        <button type=\"button\" class=\"inline-flex h-8 items-center justify-center px-3 text-sm font-medium text-foreground\">Paste</button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'nested'\">\n      <div class=\"inline-flex overflow-hidden rounded-md border border-border bg-background shadow-sm\">\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-sm font-medium text-foreground', !last ? 'border-r border-border' : '']\">{{ item }}</button>\n      </div>\n      <div class=\"inline-flex overflow-hidden rounded-md border border-border bg-background shadow-sm\">\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center border-r border-border text-foreground\">\u2190</button>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center text-foreground\">\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-md border border-border bg-background shadow-sm text-foreground\">\u2190</div>\n      <div class=\"inline-flex overflow-hidden rounded-md border border-border bg-background shadow-sm\">\n        <button *ngFor=\"let item of items; let last = last\" type=\"button\" [ngClass]=\"['inline-flex h-9 items-center justify-center px-4 text-sm font-medium text-foreground', !last ? 'border-r border-border' : '']\">{{ item }}</button>\n      </div>\n      <div class=\"inline-flex overflow-hidden rounded-md border border-border bg-background shadow-sm\">\n        <button type=\"button\" class=\"inline-flex h-9 items-center justify-center border-r border-border px-4 text-sm font-medium text-foreground\">Snooze</button>\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center text-foreground\">\u2026</button>\n      </div>\n    </ng-container>\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.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 });
+PdmButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmButtonGroupComponent, selector: "pdm-button-group", inputs: { variant: "variant", direction: "direction", separated: "separated", className: "className" }, ngImport: i0, template: "<div\n  role=\"group\"\n  [attr.aria-orientation]=\"variant === 'orientation' || direction === 'vertical' ? 'vertical' : 'horizontal'\"\n  [ngClass]=\"rootClasses\"\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: "14.3.0", 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-md border border-border bg-background shadow-sm\">\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center border-b border-border text-foreground\">+</button>\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center text-foreground\">-</button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'separator'\">\n      <div class=\"inline-flex overflow-hidden rounded-md border border-border bg-muted shadow-sm\">\n        <button type=\"button\" class=\"inline-flex h-8 items-center justify-center border-r border-border px-3 text-sm font-medium text-foreground\">Copy</button>\n        <button type=\"button\" class=\"inline-flex h-8 items-center justify-center px-3 text-sm font-medium text-foreground\">Paste</button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'nested'\">\n      <div class=\"inline-flex overflow-hidden rounded-md border border-border bg-background shadow-sm\">\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-sm font-medium text-foreground', !last ? 'border-r border-border' : '']\">{{ item }}</button>\n      </div>\n      <div class=\"inline-flex overflow-hidden rounded-md border border-border bg-background shadow-sm\">\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center border-r border-border text-foreground\">\u2190</button>\n        <button type=\"button\" class=\"inline-flex h-8 w-8 items-center justify-center text-foreground\">\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-md border border-border bg-background shadow-sm text-foreground\">\u2190</div>\n      <div class=\"inline-flex overflow-hidden rounded-md border border-border bg-background shadow-sm\">\n        <button *ngFor=\"let item of items; let last = last\" type=\"button\" [ngClass]=\"['inline-flex h-9 items-center justify-center px-4 text-sm font-medium text-foreground', !last ? 'border-r border-border' : '']\">{{ item }}</button>\n      </div>\n      <div class=\"inline-flex overflow-hidden rounded-md border border-border bg-background shadow-sm\">\n        <button type=\"button\" class=\"inline-flex h-9 items-center justify-center border-r border-border px-4 text-sm font-medium text-foreground\">Snooze</button>\n        <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center text-foreground\">\u2026</button>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'pdm-button-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  role=\"group\"\n  [attr.aria-orientation]=\"variant === 'orientation' || direction === 'vertical' ? 'vertical' : 'horizontal'\"\n  [ngClass]=\"rootClasses\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { variant: [{
                 type: Input
-            }], items: [{
+            }], direction: [{
+                type: Input
+            }], separated: [{
                 type: Input
             }], className: [{
                 type: Input
@@ -429,9 +463,10 @@ class PdmCarouselComponent {
     constructor() {
         this.variant = 'default';
         this.className = '';
-        this.slides = [1, 2, 3, 4, 5];
+        this.slides = [];
         this.startIndex = 0;
         this.loop = false;
+        this.showCounter = false;
         this.indexChange = new EventEmitter();
         this._index = 0;
     }
@@ -451,25 +486,25 @@ class PdmCarouselComponent {
         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);
+        return Math.max(0, this.slides.length - this.currentWindowSize);
     }
     get visibleSlides() {
         if (this.slides.length === 0) {
             return [];
         }
+        return this.sliceWindow(this.currentWindowSize);
+    }
+    get currentWindowSize() {
+        if (typeof this.windowSize === 'number' && this.windowSize > 0) {
+            return Math.max(1, Math.floor(this.windowSize));
+        }
         if (this.variant === 'sizes') {
-            return this.sliceWindow(3);
+            return 3;
         }
         if (this.variant === 'orientation') {
-            return this.sliceWindow(2);
+            return 2;
         }
-        return [this.slides[this._index]];
+        return 1;
     }
     onPrev() {
         if (!this.canPrev) {
@@ -501,10 +536,10 @@ class PdmCarouselComponent {
     }
 }
 PdmCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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-input bg-background p-2.5\"\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-foreground\" 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-40 w-32 items-center p-1\">\n            <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n              <div class=\"text-center text-2xl font-semibold text-foreground\">{{ 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-80 w-80 items-center p-1\">\n          <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n            <div class=\"text-center text-3xl font-semibold text-foreground\">{{ visibleSlides[0] }}</div>\n          </div>\n        </div>\n        <p *ngIf=\"variant === 'api'\" class=\"m-0 pt-2 text-sm font-medium text-muted-foreground\">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-input bg-background p-2.5\"\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-foreground\" 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-input bg-background p-2.5\"\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-foreground\" 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-80 flex-col\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex h-36 w-full items-center p-1\" [ngClass]=\"i > 0 ? 'pt-1' : ''\">\n        <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n          <div class=\"text-center text-2xl font-semibold text-foreground\">{{ 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-input bg-background p-2.5\"\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-foreground\" 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 });
+PdmCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCarouselComponent, selector: "pdm-carousel", inputs: { variant: "variant", className: "className", slides: "slides", startIndex: "startIndex", loop: "loop", windowSize: "windowSize", showCounter: "showCounter" }, 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-input bg-background p-2.5\"\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-foreground\" 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    <div 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-40 w-32 items-center p-1\">\n          <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n            <div class=\"text-center text-2xl font-semibold text-foreground\">{{ slide }}</div>\n          </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-input bg-background p-2.5\"\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-foreground\" 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  <p *ngIf=\"variant !== 'orientation' && showCounter\" class=\"m-0 pt-2 text-sm font-medium text-muted-foreground\">\n    {{ slides.length ? (index + 1) : 0 }} / {{ slides.length }}\n  </p>\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-input bg-background p-2.5\"\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-foreground\" 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-80 flex-col\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex h-36 w-full items-center p-1\" [ngClass]=\"i > 0 ? 'pt-1' : ''\">\n        <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n          <div class=\"text-center text-2xl font-semibold text-foreground\">{{ 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-input bg-background p-2.5\"\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-foreground\" 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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-input bg-background p-2.5\"\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-foreground\" 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-40 w-32 items-center p-1\">\n            <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n              <div class=\"text-center text-2xl font-semibold text-foreground\">{{ 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-80 w-80 items-center p-1\">\n          <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n            <div class=\"text-center text-3xl font-semibold text-foreground\">{{ visibleSlides[0] }}</div>\n          </div>\n        </div>\n        <p *ngIf=\"variant === 'api'\" class=\"m-0 pt-2 text-sm font-medium text-muted-foreground\">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-input bg-background p-2.5\"\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-foreground\" 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-input bg-background p-2.5\"\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-foreground\" 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-80 flex-col\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex h-36 w-full items-center p-1\" [ngClass]=\"i > 0 ? 'pt-1' : ''\">\n        <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n          <div class=\"text-center text-2xl font-semibold text-foreground\">{{ 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-input bg-background p-2.5\"\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-foreground\" 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" }]
+            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-input bg-background p-2.5\"\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-foreground\" 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    <div 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-40 w-32 items-center p-1\">\n          <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n            <div class=\"text-center text-2xl font-semibold text-foreground\">{{ slide }}</div>\n          </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-input bg-background p-2.5\"\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-foreground\" 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  <p *ngIf=\"variant !== 'orientation' && showCounter\" class=\"m-0 pt-2 text-sm font-medium text-muted-foreground\">\n    {{ slides.length ? (index + 1) : 0 }} / {{ slides.length }}\n  </p>\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-input bg-background p-2.5\"\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-foreground\" 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-80 flex-col\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex h-36 w-full items-center p-1\" [ngClass]=\"i > 0 ? 'pt-1' : ''\">\n        <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n          <div class=\"text-center text-2xl font-semibold text-foreground\">{{ 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-input bg-background p-2.5\"\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-foreground\" 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: [{
@@ -515,6 +550,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], loop: [{
                 type: Input
+            }], windowSize: [{
+                type: Input
+            }], showCounter: [{
+                type: Input
             }], indexChange: [{
                 type: Output
             }] } });
@@ -585,32 +624,29 @@ 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'];
+        this.title = '';
+        this.description = '';
+        this.desktopLabel = '';
+        this.desktopValue = '';
+        this.mobileLabel = '';
+        this.mobileValue = '';
+        this.labels = [];
+        this.bars = [];
+        this.line = [];
+        this.pie = [];
+        this.radar = [];
+        this.radialValue = 0;
+        this.radialLabel = '';
+        this.radialDescription = '';
+        this.tooltipTitle = '';
+        this.tooltipPrimaryLabel = '';
+        this.tooltipPrimaryValue = '';
+        this.tooltipSecondaryLabel = '';
+        this.tooltipSecondaryValue = '';
+        this.pieLabels = [];
+        this.tooltipHint = '';
+        this.radarMetricPrefix = 'Metric';
+        this.emptyLabel = 'No data available';
     }
     get normalizedBars() {
         if (!this.bars.length) {
@@ -703,10 +739,10 @@ class PdmChartComponent {
     }
 }
 PdmChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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-lg border border-border bg-card text-card-foreground', className]\">\n  <div class=\"flex w-full items-stretch border-b border-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-none tracking-tight\">{{ title }}</h3>\n      <p class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n\n    <div class=\"flex h-24\">\n      <div class=\"flex h-full w-44 flex-col justify-center border-l border-border bg-muted px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ desktopLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ desktopValue }}</span>\n      </div>\n      <div class=\"flex h-full w-44 flex-col justify-center px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ mobileLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ 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-60 w-full flex-col justify-end gap-2\">\n        <div class=\"relative h-48 w-full overflow-hidden\">\n          <div class=\"absolute bottom-0 left-0 right-0 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/2 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-3/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute inset-x-0 bottom-0 flex h-48 items-end gap-0.5 px-0.5\">\n            <div *ngFor=\"let bar of normalizedBars\" class=\"w-1.5 rounded-sm bg-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 text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'line'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 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 text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'area'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 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 text-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-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-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\">{{ segment.label }}</span>\n            </div>\n            <span class=\"text-sm font-medium\">{{ 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-border px-3 py-2 text-sm\">\n            <span class=\"text-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-2xl font-semibold\">{{ radialValue }}%</div>\n            <div class=\"text-xs text-muted-foreground\">{{ radialLabel }}</div>\n          </div>\n        </div>\n        <div class=\"flex-1\">\n          <p class=\"m-0 text-sm font-medium\">{{ radialLabel }}</p>\n          <p class=\"m-0 mt-1 text-sm text-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-56 flex-col gap-2 rounded-lg border border-border bg-card p-3 shadow-sm\">\n          <p class=\"m-0 text-xs font-medium text-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-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 });
+PdmChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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", tooltipHint: "tooltipHint", radarMetricPrefix: "radarMetricPrefix", emptyLabel: "emptyLabel" }, ngImport: i0, template: "<section [ngClass]=\"['w-full rounded-lg border border-border bg-card text-card-foreground', className]\">\n  <div *ngIf=\"title || description || desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex w-full items-stretch border-b border-border\">\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1 px-6 pb-3 pt-4\">\n      <h3 *ngIf=\"title\" class=\"m-0 text-sm font-semibold leading-none tracking-tight\">{{ title }}</h3>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n\n    <div *ngIf=\"desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex h-24\">\n      <div class=\"flex h-full w-44 flex-col justify-center border-l border-border bg-muted px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ desktopLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ desktopValue }}</span>\n      </div>\n      <div class=\"flex h-full w-44 flex-col justify-center px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ mobileLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ 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-60 w-full flex-col justify-end gap-2\">\n        <p *ngIf=\"normalizedBars.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <div class=\"relative h-48 w-full overflow-hidden\">\n          <div class=\"absolute bottom-0 left-0 right-0 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/2 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-3/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute inset-x-0 bottom-0 flex h-48 items-end gap-0.5 px-0.5\">\n            <div *ngFor=\"let bar of normalizedBars\" class=\"w-1.5 rounded-sm bg-primary\" [style.height.px]=\"bar\"></div>\n          </div>\n        </div>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'line'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 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 *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'area'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 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 *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-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-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-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\">{{ segment.label }}</span>\n            </div>\n            <span class=\"text-sm font-medium\">{{ 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-border px-3 py-2 text-sm\">\n            <span class=\"text-muted-foreground\">{{ radarMetricPrefix }} {{ 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-2xl font-semibold\">{{ radialValue }}%</div>\n            <div class=\"text-xs text-muted-foreground\">{{ radialLabel }}</div>\n          </div>\n        </div>\n        <div class=\"flex-1\">\n          <p class=\"m-0 text-sm font-medium\">{{ radialLabel }}</p>\n          <p class=\"m-0 mt-1 text-sm text-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-56 flex-col gap-2 rounded-lg border border-border bg-card p-3 shadow-sm\">\n          <p class=\"m-0 text-xs font-medium text-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 *ngIf=\"tooltipHint\" class=\"m-0 text-xs text-muted-foreground\">{{ tooltipHint }}</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.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: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['w-full rounded-lg border border-border bg-card text-card-foreground', className]\">\n  <div class=\"flex w-full items-stretch border-b border-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-none tracking-tight\">{{ title }}</h3>\n      <p class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n\n    <div class=\"flex h-24\">\n      <div class=\"flex h-full w-44 flex-col justify-center border-l border-border bg-muted px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ desktopLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ desktopValue }}</span>\n      </div>\n      <div class=\"flex h-full w-44 flex-col justify-center px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ mobileLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ 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-60 w-full flex-col justify-end gap-2\">\n        <div class=\"relative h-48 w-full overflow-hidden\">\n          <div class=\"absolute bottom-0 left-0 right-0 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/2 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-3/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute inset-x-0 bottom-0 flex h-48 items-end gap-0.5 px-0.5\">\n            <div *ngFor=\"let bar of normalizedBars\" class=\"w-1.5 rounded-sm bg-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 text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'line'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 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 text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'area'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 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 text-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-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-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\">{{ segment.label }}</span>\n            </div>\n            <span class=\"text-sm font-medium\">{{ 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-border px-3 py-2 text-sm\">\n            <span class=\"text-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-2xl font-semibold\">{{ radialValue }}%</div>\n            <div class=\"text-xs text-muted-foreground\">{{ radialLabel }}</div>\n          </div>\n        </div>\n        <div class=\"flex-1\">\n          <p class=\"m-0 text-sm font-medium\">{{ radialLabel }}</p>\n          <p class=\"m-0 mt-1 text-sm text-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-56 flex-col gap-2 rounded-lg border border-border bg-card p-3 shadow-sm\">\n          <p class=\"m-0 text-xs font-medium text-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-muted-foreground\">Tooltip style preparado para charts de l\u00EDnea, \u00E1rea y barras.</p>\n      </div>\n    </ng-container>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'pdm-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['w-full rounded-lg border border-border bg-card text-card-foreground', className]\">\n  <div *ngIf=\"title || description || desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex w-full items-stretch border-b border-border\">\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1 px-6 pb-3 pt-4\">\n      <h3 *ngIf=\"title\" class=\"m-0 text-sm font-semibold leading-none tracking-tight\">{{ title }}</h3>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n\n    <div *ngIf=\"desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex h-24\">\n      <div class=\"flex h-full w-44 flex-col justify-center border-l border-border bg-muted px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ desktopLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ desktopValue }}</span>\n      </div>\n      <div class=\"flex h-full w-44 flex-col justify-center px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ mobileLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ 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-60 w-full flex-col justify-end gap-2\">\n        <p *ngIf=\"normalizedBars.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <div class=\"relative h-48 w-full overflow-hidden\">\n          <div class=\"absolute bottom-0 left-0 right-0 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/2 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-3/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute inset-x-0 bottom-0 flex h-48 items-end gap-0.5 px-0.5\">\n            <div *ngFor=\"let bar of normalizedBars\" class=\"w-1.5 rounded-sm bg-primary\" [style.height.px]=\"bar\"></div>\n          </div>\n        </div>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'line'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 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 *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'area'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 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 *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-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-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-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\">{{ segment.label }}</span>\n            </div>\n            <span class=\"text-sm font-medium\">{{ 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-border px-3 py-2 text-sm\">\n            <span class=\"text-muted-foreground\">{{ radarMetricPrefix }} {{ 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-2xl font-semibold\">{{ radialValue }}%</div>\n            <div class=\"text-xs text-muted-foreground\">{{ radialLabel }}</div>\n          </div>\n        </div>\n        <div class=\"flex-1\">\n          <p class=\"m-0 text-sm font-medium\">{{ radialLabel }}</p>\n          <p class=\"m-0 mt-1 text-sm text-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-56 flex-col gap-2 rounded-lg border border-border bg-card p-3 shadow-sm\">\n          <p class=\"m-0 text-xs font-medium text-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 *ngIf=\"tooltipHint\" class=\"m-0 text-xs text-muted-foreground\">{{ tooltipHint }}</p>\n      </div>\n    </ng-container>\n  </div>\n</section>\n" }]
         }], propDecorators: { type: [{
                 type: Input
             }], className: [{
@@ -751,6 +787,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], pieLabels: [{
                 type: Input
+            }], tooltipHint: [{
+                type: Input
+            }], radarMetricPrefix: [{
+                type: Input
+            }], emptyLabel: [{
+                type: Input
             }] } });
 
 class PdmCheckboxComponent {
@@ -1127,15 +1169,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class PdmDataTableComponent {
     constructor() {
         this.className = '';
-        this.filterPlaceholder = 'Filter emails...';
+        this.filterPlaceholder = 'Filter...';
         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.statusLabel = 'Status';
+        this.emailLabel = 'Email';
+        this.amountLabel = 'Amount';
+        this.previousLabel = 'Previous';
+        this.nextLabel = 'Next';
+        this.emptyLabel = 'No results.';
+        this.rows = [];
         this.page = 1;
         this.pageSize = 5;
         this.query = '';
@@ -1182,16 +1224,28 @@ class PdmDataTableComponent {
     }
 }
 PdmDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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-full max-w-3xl 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 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button type=\"button\" class=\"inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm\">\n      <span>{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" 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-md border border-border bg-background\">\n    <table class=\"w-full border-collapse text-sm text-foreground\">\n      <thead>\n        <tr class=\"border-b border-border\">\n          <th class=\"w-10 px-2 text-left font-medium\"><input type=\"checkbox\" class=\"h-4 w-4 rounded-sm border border-input\" /></th>\n          <th class=\"w-32 px-2 py-2 text-left font-medium\">Status</th>\n          <th class=\"px-2 py-2 text-left font-medium\">\n            <button type=\"button\" class=\"inline-flex items-center gap-1 rounded-sm px-3 py-2 text-sm\">\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-24 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-border 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-sm border border-input\" /></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-sm text-muted-foreground\">{{ selectedCount }} of {{ rows.length }} row(s) selected.</p>\n    <button type=\"button\" class=\"h-9 rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50\" [disabled]=\"page <= 1\" (click)=\"previous()\">Previous</button>\n    <button type=\"button\" class=\"h-9 rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 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 });
+PdmDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDataTableComponent, selector: "pdm-data-table", inputs: { className: "className", filterPlaceholder: "filterPlaceholder", columnsLabel: "columnsLabel", statusLabel: "statusLabel", emailLabel: "emailLabel", amountLabel: "amountLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", emptyLabel: "emptyLabel", rows: "rows", page: "page", pageSize: "pageSize", query: "query" }, outputs: { queryChange: "queryChange", rowAction: "rowAction", pageChange: "pageChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<section [ngClass]=\"['flex w-full max-w-3xl 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 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button type=\"button\" class=\"inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm\">\n      <span>{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" 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-md border border-border bg-background\">\n    <table class=\"w-full border-collapse text-sm text-foreground\">\n      <thead>\n        <tr class=\"border-b border-border\">\n          <th class=\"w-10 px-2 text-left font-medium\"><input type=\"checkbox\" class=\"h-4 w-4 rounded-sm border border-input\" /></th>\n          <th class=\"w-32 px-2 py-2 text-left font-medium\">{{ statusLabel }}</th>\n          <th class=\"px-2 py-2 text-left font-medium\">\n            <button type=\"button\" class=\"inline-flex items-center gap-1 rounded-sm px-3 py-2 text-sm\">\n              <span>{{ emailLabel }}</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-24 px-2 py-2 text-right font-medium\">{{ amountLabel }}</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-border 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-sm border border-input\" /></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        <tr *ngIf=\"pagedRows.length === 0\">\n          <td colspan=\"5\" class=\"px-3 py-6 text-center text-sm text-muted-foreground\">{{ emptyLabel }}</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-sm text-muted-foreground\">{{ selectedCount }} of {{ rows.length }} row(s) selected.</p>\n    <button type=\"button\" class=\"h-9 rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50\" [disabled]=\"page <= 1\" (click)=\"previous()\">{{ previousLabel }}</button>\n    <button type=\"button\" class=\"h-9 rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50\" [disabled]=\"page >= totalPages\" (click)=\"next()\">{{ nextLabel }}</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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex w-full max-w-3xl 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 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button type=\"button\" class=\"inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm\">\n      <span>{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" 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-md border border-border bg-background\">\n    <table class=\"w-full border-collapse text-sm text-foreground\">\n      <thead>\n        <tr class=\"border-b border-border\">\n          <th class=\"w-10 px-2 text-left font-medium\"><input type=\"checkbox\" class=\"h-4 w-4 rounded-sm border border-input\" /></th>\n          <th class=\"w-32 px-2 py-2 text-left font-medium\">Status</th>\n          <th class=\"px-2 py-2 text-left font-medium\">\n            <button type=\"button\" class=\"inline-flex items-center gap-1 rounded-sm px-3 py-2 text-sm\">\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-24 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-border 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-sm border border-input\" /></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-sm text-muted-foreground\">{{ selectedCount }} of {{ rows.length }} row(s) selected.</p>\n    <button type=\"button\" class=\"h-9 rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50\" [disabled]=\"page <= 1\" (click)=\"previous()\">Previous</button>\n    <button type=\"button\" class=\"h-9 rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50\" [disabled]=\"page >= totalPages\" (click)=\"next()\">Next</button>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'pdm-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex w-full max-w-3xl 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 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button type=\"button\" class=\"inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm\">\n      <span>{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" 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-md border border-border bg-background\">\n    <table class=\"w-full border-collapse text-sm text-foreground\">\n      <thead>\n        <tr class=\"border-b border-border\">\n          <th class=\"w-10 px-2 text-left font-medium\"><input type=\"checkbox\" class=\"h-4 w-4 rounded-sm border border-input\" /></th>\n          <th class=\"w-32 px-2 py-2 text-left font-medium\">{{ statusLabel }}</th>\n          <th class=\"px-2 py-2 text-left font-medium\">\n            <button type=\"button\" class=\"inline-flex items-center gap-1 rounded-sm px-3 py-2 text-sm\">\n              <span>{{ emailLabel }}</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-24 px-2 py-2 text-right font-medium\">{{ amountLabel }}</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-border 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-sm border border-input\" /></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        <tr *ngIf=\"pagedRows.length === 0\">\n          <td colspan=\"5\" class=\"px-3 py-6 text-center text-sm text-muted-foreground\">{{ emptyLabel }}</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-sm text-muted-foreground\">{{ selectedCount }} of {{ rows.length }} row(s) selected.</p>\n    <button type=\"button\" class=\"h-9 rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50\" [disabled]=\"page <= 1\" (click)=\"previous()\">{{ previousLabel }}</button>\n    <button type=\"button\" class=\"h-9 rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50\" [disabled]=\"page >= totalPages\" (click)=\"next()\">{{ nextLabel }}</button>\n  </div>\n</section>\n" }]
         }], propDecorators: { className: [{
                 type: Input
             }], filterPlaceholder: [{
                 type: Input
             }], columnsLabel: [{
                 type: Input
+            }], statusLabel: [{
+                type: Input
+            }], emailLabel: [{
+                type: Input
+            }], amountLabel: [{
+                type: Input
+            }], previousLabel: [{
+                type: Input
+            }], nextLabel: [{
+                type: Input
+            }], emptyLabel: [{
+                type: Input
             }], rows: [{
                 type: Input
             }], page: [{
@@ -1477,20 +1531,25 @@ class PdmDrawerComponent {
         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.title = '';
+        this.description = '';
+        this.value = '';
+        this.unit = '';
+        this.decrementLabel = '-';
+        this.incrementLabel = '+';
+        this.primaryLabel = '';
+        this.secondaryLabel = '';
+        this.profileTitle = '';
+        this.profileDescription = '';
         this.nameLabel = 'Name';
-        this.nameValue = 'Pedro Duarte';
+        this.nameValue = '';
         this.usernameLabel = 'Username';
-        this.usernameValue = '@peduarte';
+        this.usernameValue = '';
+        this.responsivePrimaryLabel = '';
         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];
+        this.bars = [];
     }
     close() {
         this.openChange.emit(false);
@@ -1503,10 +1562,10 @@ class PdmDrawerComponent {
     }
 }
 PdmDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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-foreground/30\" (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-6xl rounded-t-lg border border-border bg-background p-6 shadow-lg\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-border\"></div>\n\n    <div class=\"mx-auto flex max-w-sm flex-col items-center\">\n      <h3 class=\"m-0 text-sm font-semibold text-foreground\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-xs text-muted-foreground\">{{ 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-border text-muted-foreground\">-</button>\n        <div class=\"text-center\">\n          <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n          <div class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 items-center justify-center rounded-full border border-border text-muted-foreground\">+</button>\n      </div>\n\n      <div class=\"mt-3 flex h-14 w-full items-end gap-1\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button type=\"button\" class=\"mt-3 h-9 w-full rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">Submit</button>\n      <button type=\"button\" class=\"mt-2 h-9 w-full rounded-md border border-input bg-background text-sm font-medium text-foreground\" (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-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 text-muted-foreground\" (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-xs font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button type=\"button\" class=\"mt-3 h-8 w-full rounded-md bg-primary text-xs font-medium text-primary-foreground\" (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 });
+PdmDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDrawerComponent, selector: "pdm-drawer", inputs: { open: "open", variant: "variant", className: "className", title: "title", description: "description", value: "value", unit: "unit", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel", primaryLabel: "primaryLabel", secondaryLabel: "secondaryLabel", profileTitle: "profileTitle", profileDescription: "profileDescription", nameLabel: "nameLabel", nameValue: "nameValue", usernameLabel: "usernameLabel", usernameValue: "usernameValue", responsivePrimaryLabel: "responsivePrimaryLabel", bars: "bars" }, 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-foreground/30\" (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-6xl rounded-t-lg border border-border bg-background p-6 shadow-lg\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-border\"></div>\n\n    <div class=\"mx-auto flex max-w-sm flex-col items-center\">\n      <h3 class=\"m-0 text-sm font-semibold text-foreground\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-xs text-muted-foreground\">{{ 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-border text-muted-foreground\">{{ decrementLabel }}</button>\n        <div class=\"text-center\">\n          <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n          <div class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 items-center justify-center rounded-full border border-border text-muted-foreground\">{{ incrementLabel }}</button>\n      </div>\n\n      <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n      <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full rounded-md border border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n    </div>\n  </section>\n\n  <ng-template #responsiveDialog>\n    <section class=\"absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 text-muted-foreground\" (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-xs font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</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: "14.3.0", 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-foreground/30\" (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-6xl rounded-t-lg border border-border bg-background p-6 shadow-lg\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-border\"></div>\n\n    <div class=\"mx-auto flex max-w-sm flex-col items-center\">\n      <h3 class=\"m-0 text-sm font-semibold text-foreground\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-xs text-muted-foreground\">{{ 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-border text-muted-foreground\">-</button>\n        <div class=\"text-center\">\n          <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n          <div class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 items-center justify-center rounded-full border border-border text-muted-foreground\">+</button>\n      </div>\n\n      <div class=\"mt-3 flex h-14 w-full items-end gap-1\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button type=\"button\" class=\"mt-3 h-9 w-full rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">Submit</button>\n      <button type=\"button\" class=\"mt-2 h-9 w-full rounded-md border border-input bg-background text-sm font-medium text-foreground\" (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-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 text-muted-foreground\" (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-xs font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button type=\"button\" class=\"mt-3 h-8 w-full rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">Save changes</button>\n    </section>\n  </ng-template>\n</div>\n" }]
+            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-foreground/30\" (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-6xl rounded-t-lg border border-border bg-background p-6 shadow-lg\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-border\"></div>\n\n    <div class=\"mx-auto flex max-w-sm flex-col items-center\">\n      <h3 class=\"m-0 text-sm font-semibold text-foreground\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-xs text-muted-foreground\">{{ 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-border text-muted-foreground\">{{ decrementLabel }}</button>\n        <div class=\"text-center\">\n          <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n          <div class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 items-center justify-center rounded-full border border-border text-muted-foreground\">{{ incrementLabel }}</button>\n      </div>\n\n      <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n      <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full rounded-md border border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n    </div>\n  </section>\n\n  <ng-template #responsiveDialog>\n    <section class=\"absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 text-muted-foreground\" (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-xs font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n    </section>\n  </ng-template>\n</div>\n" }]
         }], propDecorators: { open: [{
                 type: Input
             }], variant: [{
@@ -1521,6 +1580,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], unit: [{
                 type: Input
+            }], decrementLabel: [{
+                type: Input
+            }], incrementLabel: [{
+                type: Input
+            }], primaryLabel: [{
+                type: Input
+            }], secondaryLabel: [{
+                type: Input
             }], profileTitle: [{
                 type: Input
             }], profileDescription: [{
@@ -1533,12 +1600,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], usernameValue: [{
                 type: Input
+            }], responsivePrimaryLabel: [{
+                type: Input
             }], openChange: [{
                 type: Output
             }], primaryAction: [{
                 type: Output
             }], secondaryAction: [{
                 type: Output
+            }], bars: [{
+                type: Input
             }] } });
 
 class PdmEmptyComponent {