pdm-ui-kit 1.0.0 → 1.1.0

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

@@ -0,0 +1,202 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class PdmChartComponent {
+    constructor() {
+        this.type = 'bar';
+        this.className = '';
+        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) {
+            return [];
+        }
+        const max = Math.max(...this.bars);
+        if (max === 0) {
+            return this.bars.map(() => 0);
+        }
+        return this.bars.map((value) => Math.max(8, Math.round((value / max) * 183)));
+    }
+    get normalizedLine() {
+        if (!this.line.length) {
+            return [];
+        }
+        const max = Math.max(...this.line);
+        if (max === 0) {
+            return this.line.map(() => 170);
+        }
+        return this.line.map((value) => 180 - Math.round((value / max) * 150));
+    }
+    get linePath() {
+        const points = this.normalizedLine;
+        if (!points.length) {
+            return '';
+        }
+        const step = points.length > 1 ? 320 / (points.length - 1) : 0;
+        return points
+            .map((y, index) => `${index === 0 ? 'M' : 'L'} ${Math.round(index * step)} ${y}`)
+            .join(' ');
+    }
+    get areaPath() {
+        const linePath = this.linePath;
+        if (!linePath) {
+            return '';
+        }
+        return `${linePath} L 320 180 L 0 180 Z`;
+    }
+    get pieSegments() {
+        const total = this.pie.reduce((acc, value) => acc + Math.max(value, 0), 0);
+        if (total === 0) {
+            return [];
+        }
+        let offset = 0;
+        const colors = ['hsl(var(--chart-1))', 'hsl(var(--chart-2))', 'hsl(var(--chart-3))', 'hsl(var(--chart-4))'];
+        return this.pie.map((value, index) => {
+            const size = (Math.max(value, 0) / total) * 100;
+            const segment = {
+                color: colors[index % colors.length],
+                size,
+                offset,
+                label: this.pieLabels[index] ?? `Series ${index + 1}`
+            };
+            offset += size;
+            return segment;
+        });
+    }
+    get pieGradient() {
+        const segments = this.pieSegments;
+        if (!segments.length) {
+            return 'conic-gradient(hsl(var(--muted)) 0 100%)';
+        }
+        return `conic-gradient(${segments
+            .map((segment) => `${segment.color} ${segment.offset}% ${segment.offset + segment.size}%`)
+            .join(', ')})`;
+    }
+    get radarPoints() {
+        const values = this.radar.slice(0, 6);
+        if (!values.length) {
+            return '';
+        }
+        const max = Math.max(...values, 1);
+        const radius = 72;
+        const center = 80;
+        return values
+            .map((value, index) => {
+            const angle = ((Math.PI * 2) / values.length) * index - Math.PI / 2;
+            const valueRadius = (Math.max(value, 0) / max) * radius;
+            const x = center + Math.cos(angle) * valueRadius;
+            const y = center + Math.sin(angle) * valueRadius;
+            return `${x},${y}`;
+        })
+            .join(' ');
+    }
+    get radialStrokeOffset() {
+        const bounded = Math.max(0, Math.min(this.radialValue, 100));
+        const circumference = 2 * Math.PI * 42;
+        return circumference - (bounded / 100) * circumference;
+    }
+}
+PdmChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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", tooltipHint: "tooltipHint", radarMetricPrefix: "radarMetricPrefix", emptyLabel: "emptyLabel" }, ngImport: i0, template: "<section [ngClass]=\"['w-full rounded-lg border border-solid 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-solid 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-solid 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-solid 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-solid 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-solid 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-solid 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-solid 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: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], desktopLabel: [{
+                type: Input
+            }], desktopValue: [{
+                type: Input
+            }], mobileLabel: [{
+                type: Input
+            }], mobileValue: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], bars: [{
+                type: Input
+            }], line: [{
+                type: Input
+            }], pie: [{
+                type: Input
+            }], radar: [{
+                type: Input
+            }], radialValue: [{
+                type: Input
+            }], radialLabel: [{
+                type: Input
+            }], radialDescription: [{
+                type: Input
+            }], tooltipTitle: [{
+                type: Input
+            }], tooltipPrimaryLabel: [{
+                type: Input
+            }], tooltipPrimaryValue: [{
+                type: Input
+            }], tooltipSecondaryLabel: [{
+                type: Input
+            }], tooltipSecondaryValue: [{
+                type: Input
+            }], pieLabels: [{
+                type: Input
+            }], tooltipHint: [{
+                type: Input
+            }], radarMetricPrefix: [{
+                type: Input
+            }], emptyLabel: [{
+                type: Input
+            }] } });
+
+const COMPONENTS = [
+    PdmChartComponent,
+];
+class PdmChartModule {
+}
+PdmChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PdmChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmChartModule, declarations: [PdmChartComponent], imports: [CommonModule], exports: [PdmChartComponent] });
+PdmChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmChartModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PdmChartComponent, PdmChartModule };
+//# sourceMappingURL=pdm-ui-kit-src-chart.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pdm-ui-kit-src-chart.mjs","sources":["../../../src/chart/chart.component.ts","../../../src/chart/chart.component.html","../../../src/chart/chart.module.ts","../../../src/chart/pdm-ui-kit-src-chart.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\nexport type PdmChartType = 'area' | 'bar' | 'line' | 'pie' | 'radar' | 'radial' | 'tooltips';\n\n@Component({\n  selector: 'pdm-chart',\n  templateUrl: './chart.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PdmChartComponent {\n  @Input() type: PdmChartType = 'bar';\n  @Input() className = '';\n  @Input() title = '';\n  @Input() description = '';\n\n  @Input() desktopLabel = '';\n  @Input() desktopValue = '';\n  @Input() mobileLabel = '';\n  @Input() mobileValue = '';\n\n  @Input() labels: string[] = [];\n\n  @Input() bars: number[] = [];\n  @Input() line: number[] = [];\n  @Input() pie: number[] = [];\n  @Input() radar: number[] = [];\n  @Input() radialValue = 0;\n  @Input() radialLabel = '';\n  @Input() radialDescription = '';\n  @Input() tooltipTitle = '';\n  @Input() tooltipPrimaryLabel = '';\n  @Input() tooltipPrimaryValue = '';\n  @Input() tooltipSecondaryLabel = '';\n  @Input() tooltipSecondaryValue = '';\n  @Input() pieLabels: string[] = [];\n  @Input() tooltipHint = '';\n  @Input() radarMetricPrefix = 'Metric';\n  @Input() emptyLabel = 'No data available';\n\n  get normalizedBars(): number[] {\n    if (!this.bars.length) {\n      return [];\n    }\n\n    const max = Math.max(...this.bars);\n    if (max === 0) {\n      return this.bars.map(() => 0);\n    }\n\n    return this.bars.map((value) => Math.max(8, Math.round((value / max) * 183)));\n  }\n\n  get normalizedLine(): number[] {\n    if (!this.line.length) {\n      return [];\n    }\n\n    const max = Math.max(...this.line);\n    if (max === 0) {\n      return this.line.map(() => 170);\n    }\n\n    return this.line.map((value) => 180 - Math.round((value / max) * 150));\n  }\n\n  get linePath(): string {\n    const points = this.normalizedLine;\n    if (!points.length) {\n      return '';\n    }\n\n    const step = points.length > 1 ? 320 / (points.length - 1) : 0;\n    return points\n      .map((y, index) => `${index === 0 ? 'M' : 'L'} ${Math.round(index * step)} ${y}`)\n      .join(' ');\n  }\n\n  get areaPath(): string {\n    const linePath = this.linePath;\n    if (!linePath) {\n      return '';\n    }\n\n    return `${linePath} L 320 180 L 0 180 Z`;\n  }\n\n  get pieSegments(): { color: string; size: number; offset: number; label: string }[] {\n    const total = this.pie.reduce((acc, value) => acc + Math.max(value, 0), 0);\n    if (total === 0) {\n      return [];\n    }\n\n    let offset = 0;\n    const colors = ['hsl(var(--chart-1))', 'hsl(var(--chart-2))', 'hsl(var(--chart-3))', 'hsl(var(--chart-4))'];\n    return this.pie.map((value, index) => {\n      const size = (Math.max(value, 0) / total) * 100;\n      const segment = {\n        color: colors[index % colors.length],\n        size,\n        offset,\n        label: this.pieLabels[index] ?? `Series ${index + 1}`\n      };\n      offset += size;\n      return segment;\n    });\n  }\n\n  get pieGradient(): string {\n    const segments = this.pieSegments;\n    if (!segments.length) {\n      return 'conic-gradient(hsl(var(--muted)) 0 100%)';\n    }\n\n    return `conic-gradient(${segments\n      .map((segment) => `${segment.color} ${segment.offset}% ${segment.offset + segment.size}%`)\n      .join(', ')})`;\n  }\n\n  get radarPoints(): string {\n    const values = this.radar.slice(0, 6);\n    if (!values.length) {\n      return '';\n    }\n\n    const max = Math.max(...values, 1);\n    const radius = 72;\n    const center = 80;\n    return values\n      .map((value, index) => {\n        const angle = ((Math.PI * 2) / values.length) * index - Math.PI / 2;\n        const valueRadius = (Math.max(value, 0) / max) * radius;\n        const x = center + Math.cos(angle) * valueRadius;\n        const y = center + Math.sin(angle) * valueRadius;\n        return `${x},${y}`;\n      })\n      .join(' ');\n  }\n\n  get radialStrokeOffset(): number {\n    const bounded = Math.max(0, Math.min(this.radialValue, 100));\n    const circumference = 2 * Math.PI * 42;\n    return circumference - (bounded / 100) * circumference;\n  }\n}\n","<section [ngClass]=\"['w-full rounded-lg border border-solid 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-solid 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-solid 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-solid 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","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { PdmChartComponent } from './chart.component';\n\nconst COMPONENTS = [\n  PdmChartComponent,\n];\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: COMPONENTS,\n  exports: COMPONENTS\n})\nexport class PdmChartModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,72 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class PdmCheckboxComponent {
+    constructor() {
+        this.id = '';
+        this.checked = false;
+        this.disabled = false;
+        this.variant = 'default';
+        this.label = 'Accept terms and conditions';
+        this.description = '';
+        this.className = '';
+        this.checkedChange = new EventEmitter();
+    }
+    get hasDescription() {
+        return this.variant === 'subtext' || this.variant === 'card' ? !!this.description : false;
+    }
+    onToggle() {
+        if (this.disabled) {
+            return;
+        }
+        this.checkedChange.emit(!this.checked);
+    }
+}
+PdmCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCheckboxComponent, selector: "pdm-checkbox", inputs: { id: "id", checked: "checked", disabled: "disabled", variant: "variant", label: "label", description: "description", className: "className" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"id || null\"\n  [attr.aria-checked]=\"checked\"\n  [attr.aria-disabled]=\"disabled\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"[\n    'w-full appearance-none box-border border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    variant === 'card'\n      ? checked\n        ? 'flex items-start gap-3 rounded-lg border border-solid border-primary bg-muted p-4'\n        : 'flex items-start gap-3 rounded-lg border border-solid border-border bg-background p-4'\n      : hasDescription\n        ? 'flex items-start gap-3'\n        : 'flex items-center gap-3',\n    disabled ? 'opacity-50' : '',\n    className,\n  ]\"\n  (click)=\"onToggle()\"\n>\n  <span\n    [ngClass]=\"[\n      'mt-0.5 inline-flex h-4 w-4 shrink-0 box-border items-center justify-center rounded-sm border border-solid shadow-sm',\n      checked\n        ? 'border-primary bg-primary text-primary-foreground'\n        : 'border-border bg-background text-transparent',\n    ]\"\n    aria-hidden=\"true\"\n  >\n    <svg\n      viewBox=\"0 0 16 16\"\n      class=\"h-3 w-3\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M3 8.5L6.4 12L13 4\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </span>\n\n  <span\n    [ngClass]=\"[\n      'min-w-0 flex-1',\n      hasDescription ? 'flex flex-col gap-2' : 'flex items-center',\n    ]\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ label }}</span>\n    <span *ngIf=\"hasDescription\" class=\"text-sm text-muted-foreground\">{{\n      description\n    }}</span>\n  </span>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"id || null\"\n  [attr.aria-checked]=\"checked\"\n  [attr.aria-disabled]=\"disabled\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"[\n    'w-full appearance-none box-border border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    variant === 'card'\n      ? checked\n        ? 'flex items-start gap-3 rounded-lg border border-solid border-primary bg-muted p-4'\n        : 'flex items-start gap-3 rounded-lg border border-solid border-border bg-background p-4'\n      : hasDescription\n        ? 'flex items-start gap-3'\n        : 'flex items-center gap-3',\n    disabled ? 'opacity-50' : '',\n    className,\n  ]\"\n  (click)=\"onToggle()\"\n>\n  <span\n    [ngClass]=\"[\n      'mt-0.5 inline-flex h-4 w-4 shrink-0 box-border items-center justify-center rounded-sm border border-solid shadow-sm',\n      checked\n        ? 'border-primary bg-primary text-primary-foreground'\n        : 'border-border bg-background text-transparent',\n    ]\"\n    aria-hidden=\"true\"\n  >\n    <svg\n      viewBox=\"0 0 16 16\"\n      class=\"h-3 w-3\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M3 8.5L6.4 12L13 4\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </span>\n\n  <span\n    [ngClass]=\"[\n      'min-w-0 flex-1',\n      hasDescription ? 'flex flex-col gap-2' : 'flex items-center',\n    ]\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ label }}</span>\n    <span *ngIf=\"hasDescription\" class=\"text-sm text-muted-foreground\">{{\n      description\n    }}</span>\n  </span>\n</button>\n" }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }] } });
+
+const COMPONENTS = [
+    PdmCheckboxComponent,
+];
+class PdmCheckboxModule {
+}
+PdmCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PdmCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmCheckboxModule, declarations: [PdmCheckboxComponent], imports: [CommonModule], exports: [PdmCheckboxComponent] });
+PdmCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCheckboxModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PdmCheckboxComponent, PdmCheckboxModule };
+//# sourceMappingURL=pdm-ui-kit-src-checkbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pdm-ui-kit-src-checkbox.mjs","sources":["../../../src/checkbox/checkbox.component.ts","../../../src/checkbox/checkbox.component.html","../../../src/checkbox/checkbox.module.ts","../../../src/checkbox/pdm-ui-kit-src-checkbox.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\nexport type PdmCheckboxVariant = 'default' | 'subtext' | 'card';\n\n@Component({\n  selector: 'pdm-checkbox',\n  templateUrl: './checkbox.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PdmCheckboxComponent {\n  @Input() id = '';\n  @Input() checked = false;\n  @Input() disabled = false;\n  @Input() variant: PdmCheckboxVariant = 'default';\n  @Input() label = 'Accept terms and conditions';\n  @Input() description = '';\n  @Input() className = '';\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  get hasDescription(): boolean {\n    return this.variant === 'subtext' || this.variant === 'card' ? !!this.description : false;\n  }\n\n  onToggle(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checkedChange.emit(!this.checked);\n  }\n}\n","<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"id || null\"\n  [attr.aria-checked]=\"checked\"\n  [attr.aria-disabled]=\"disabled\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"[\n    'w-full appearance-none box-border border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    variant === 'card'\n      ? checked\n        ? 'flex items-start gap-3 rounded-lg border border-solid border-primary bg-muted p-4'\n        : 'flex items-start gap-3 rounded-lg border border-solid border-border bg-background p-4'\n      : hasDescription\n        ? 'flex items-start gap-3'\n        : 'flex items-center gap-3',\n    disabled ? 'opacity-50' : '',\n    className,\n  ]\"\n  (click)=\"onToggle()\"\n>\n  <span\n    [ngClass]=\"[\n      'mt-0.5 inline-flex h-4 w-4 shrink-0 box-border items-center justify-center rounded-sm border border-solid shadow-sm',\n      checked\n        ? 'border-primary bg-primary text-primary-foreground'\n        : 'border-border bg-background text-transparent',\n    ]\"\n    aria-hidden=\"true\"\n  >\n    <svg\n      viewBox=\"0 0 16 16\"\n      class=\"h-3 w-3\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M3 8.5L6.4 12L13 4\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </span>\n\n  <span\n    [ngClass]=\"[\n      'min-w-0 flex-1',\n      hasDescription ? 'flex flex-col gap-2' : 'flex items-center',\n    ]\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ label }}</span>\n    <span *ngIf=\"hasDescription\" class=\"text-sm text-muted-foreground\">{{\n      description\n    }}</span>\n  </span>\n</button>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { PdmCheckboxComponent } from './checkbox.component';\n\nconst COMPONENTS = [\n  PdmCheckboxComponent,\n];\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: COMPONENTS,\n  exports: COMPONENTS\n})\nexport class PdmCheckboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,68 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class PdmCollapsibleComponent {
+    constructor() {
+        this.title = '@peduarte starred 3 repositories';
+        this.open = false;
+        this.disabled = false;
+        this.items = ['@radix-ui/primitives', '@radix-ui/colors', '@stitches/react'];
+        this.className = '';
+        this.openChange = new EventEmitter();
+    }
+    get visibleItems() {
+        if (!this.items.length) {
+            return [];
+        }
+        return this.open ? this.items : this.items.slice(0, 1);
+    }
+    toggle() {
+        if (!this.disabled) {
+            this.openChange.emit(!this.open);
+        }
+    }
+}
+PdmCollapsibleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmCollapsibleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCollapsibleComponent, selector: "pdm-collapsible", inputs: { title: "title", open: "open", disabled: "disabled", items: "items", className: "className" }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<div [ngClass]=\"['flex w-full max-w-sm flex-col gap-2', className]\">\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"flex w-full appearance-none box-border items-center justify-between rounded-md border-0 bg-transparent px-4 py-2 text-left text-sm font-medium text-foreground hover:bg-accent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span>{{ title }}</span>\n    <span class=\"inline-flex h-8 w-8 items-center justify-center text-foreground\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n  </button>\n\n  <div class=\"flex w-full flex-col gap-2\">\n    <div\n      *ngFor=\"let item of visibleItems\"\n      class=\"w-full rounded-md border border-solid border-border bg-background px-4 py-2\"\n    >\n      <span class=\"font-mono text-sm text-foreground\">{{ item }}</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCollapsibleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-collapsible', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex w-full max-w-sm flex-col gap-2', className]\">\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"flex w-full appearance-none box-border items-center justify-between rounded-md border-0 bg-transparent px-4 py-2 text-left text-sm font-medium text-foreground hover:bg-accent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span>{{ title }}</span>\n    <span class=\"inline-flex h-8 w-8 items-center justify-center text-foreground\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n  </button>\n\n  <div class=\"flex w-full flex-col gap-2\">\n    <div\n      *ngFor=\"let item of visibleItems\"\n      class=\"w-full rounded-md border border-solid border-border bg-background px-4 py-2\"\n    >\n      <span class=\"font-mono text-sm text-foreground\">{{ item }}</span>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }] } });
+
+const COMPONENTS = [
+    PdmCollapsibleComponent,
+];
+class PdmCollapsibleModule {
+}
+PdmCollapsibleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCollapsibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PdmCollapsibleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmCollapsibleModule, declarations: [PdmCollapsibleComponent], imports: [CommonModule], exports: [PdmCollapsibleComponent] });
+PdmCollapsibleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCollapsibleModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCollapsibleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PdmCollapsibleComponent, PdmCollapsibleModule };
+//# sourceMappingURL=pdm-ui-kit-src-collapsible.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pdm-ui-kit-src-collapsible.mjs","sources":["../../../src/collapsible/collapsible.component.ts","../../../src/collapsible/collapsible.component.html","../../../src/collapsible/collapsible.module.ts","../../../src/collapsible/pdm-ui-kit-src-collapsible.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n  selector: 'pdm-collapsible',\n  templateUrl: './collapsible.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PdmCollapsibleComponent {\n  @Input() title = '@peduarte starred 3 repositories';\n  @Input() open = false;\n  @Input() disabled = false;\n  @Input() items: string[] = ['@radix-ui/primitives', '@radix-ui/colors', '@stitches/react'];\n  @Input() className = '';\n\n  @Output() openChange = new EventEmitter<boolean>();\n\n  get visibleItems(): string[] {\n    if (!this.items.length) {\n      return [];\n    }\n    return this.open ? this.items : this.items.slice(0, 1);\n  }\n\n  toggle(): void {\n    if (!this.disabled) {\n      this.openChange.emit(!this.open);\n    }\n  }\n}\n","<div [ngClass]=\"['flex w-full max-w-sm flex-col gap-2', className]\">\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"flex w-full appearance-none box-border items-center justify-between rounded-md border-0 bg-transparent px-4 py-2 text-left text-sm font-medium text-foreground hover:bg-accent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span>{{ title }}</span>\n    <span class=\"inline-flex h-8 w-8 items-center justify-center text-foreground\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n  </button>\n\n  <div class=\"flex w-full flex-col gap-2\">\n    <div\n      *ngFor=\"let item of visibleItems\"\n      class=\"w-full rounded-md border border-solid border-border bg-background px-4 py-2\"\n    >\n      <span class=\"font-mono text-sm text-foreground\">{{ item }}</span>\n    </div>\n  </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { PdmCollapsibleComponent } from './collapsible.component';\n\nconst COMPONENTS = [\n  PdmCollapsibleComponent,\n];\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: COMPONENTS,\n  exports: COMPONENTS\n})\nexport class PdmCollapsibleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}