pdm-ui-kit 0.1.1 → 0.1.3

package/dist/pdm-ui-kit/public-api.d.ts

@@ -0,0 +1,58 @@
+export * from './lib/pdm-ui-kit.module';
+export * from './lib/components/accordion/accordion.component';
+export * from './lib/components/alert/alert.component';
+export * from './lib/components/alert-dialog/alert-dialog.component';
+export * from './lib/components/aspect-ratio/aspect-ratio.component';
+export * from './lib/components/avatar/avatar.component';
+export * from './lib/components/badge/badge.component';
+export * from './lib/components/breadcrumb/breadcrumb.component';
+export * from './lib/components/button-group/button-group.component';
+export * from './lib/components/button/button.component';
+export * from './lib/components/calendar/calendar.component';
+export * from './lib/components/carousel/carousel.component';
+export * from './lib/components/card/card.component';
+export * from './lib/components/chart/chart.component';
+export * from './lib/components/checkbox/checkbox.component';
+export * from './lib/components/collapsible/collapsible.component';
+export * from './lib/components/combobox/combobox.component';
+export * from './lib/components/command/command.component';
+export * from './lib/components/context-menu/context-menu.component';
+export * from './lib/components/data-table/data-table.component';
+export * from './lib/components/date-picker/date-picker.component';
+export * from './lib/components/dialog/dialog.component';
+export * from './lib/components/dropdown-menu/dropdown-menu.component';
+export * from './lib/components/drawer/drawer.component';
+export * from './lib/components/empty/empty.component';
+export * from './lib/components/field/field.component';
+export * from './lib/components/hover-card/hover-card.component';
+export * from './lib/components/icon/icon.component';
+export * from './lib/components/item/item.component';
+export * from './lib/components/input/input.component';
+export * from './lib/components/input-password/input-password.component';
+export * from './lib/components/input-group/input-group.component';
+export * from './lib/components/input-otp/input-otp.component';
+export * from './lib/components/kbd/kbd.component';
+export * from './lib/components/label/label.component';
+export * from './lib/components/menubar/menubar.component';
+export * from './lib/components/native-select/native-select.component';
+export * from './lib/components/navigation-menu/navigation-menu.component';
+export * from './lib/components/pagination/pagination.component';
+export * from './lib/components/popover/popover.component';
+export * from './lib/components/progress/progress.component';
+export * from './lib/components/radio-group/radio-group.component';
+export * from './lib/components/scroll-area/scroll-area.component';
+export * from './lib/components/select/select.component';
+export * from './lib/components/separator/separator.component';
+export * from './lib/components/sheet/sheet.component';
+export * from './lib/components/sidebar/sidebar.component';
+export * from './lib/components/skeleton/skeleton.component';
+export * from './lib/components/slider/slider.component';
+export * from './lib/components/sonner/sonner.component';
+export * from './lib/components/spinner/spinner.component';
+export * from './lib/components/switch/switch.component';
+export * from './lib/components/table/table.component';
+export * from './lib/components/tabs/tabs.component';
+export * from './lib/components/textarea/textarea.component';
+export * from './lib/components/toggle/toggle.component';
+export * from './lib/components/toggle-group/toggle-group.component';
+export * from './lib/components/tooltip/tooltip.component';

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist/pdm-ui-kit",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdm-ui-kit",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "PDM UI Kit Angular components",
   "author": "Corelusa",
   "license": "MIT",
@@ -15,6 +15,12 @@
     "url": "https://github.com/corelusa/pdm-ui-kit.git"
   },
   "sideEffects": false,
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json",
+    "pack:dist": "npm pack ./dist/pdm-ui-kit",
+    "publish:dist": "npm publish ./dist/pdm-ui-kit",
+    "prepublishOnly": "npm run build"
+  },
   "peerDependencies": {
     "@angular/common": ">=13.0.0 <16.0.0",
     "@angular/core": ">=13.0.0 <16.0.0"
@@ -22,23 +28,10 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "module": "fesm2015/pdm-ui-kit.mjs",
-  "es2020": "fesm2020/pdm-ui-kit.mjs",
-  "esm2020": "esm2020/pdm-ui-kit.mjs",
-  "fesm2020": "fesm2020/pdm-ui-kit.mjs",
-  "fesm2015": "fesm2015/pdm-ui-kit.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/pdm-ui-kit.mjs",
-      "es2020": "./fesm2020/pdm-ui-kit.mjs",
-      "es2015": "./fesm2015/pdm-ui-kit.mjs",
-      "node": "./fesm2015/pdm-ui-kit.mjs",
-      "default": "./fesm2020/pdm-ui-kit.mjs"
-    }
+  "devDependencies": {
+    "@angular/compiler": "^15.2.10",
+    "@angular/compiler-cli": "^15.2.10",
+    "ng-packagr": "^15.2.2",
+    "typescript": "~4.9.5"
   }
-}
+}

package/src/lib/components/accordion/accordion.component.html

@@ -0,0 +1,34 @@
+<div [ngClass]="['w-full', className]">
+  <div *ngFor="let item of items; let i = index" class="border-b border-[#e5e5e5]">
+    <h3>
+      <button
+        type="button"
+        class="flex h-[52px] w-full items-center justify-between py-4 text-left text-[14px] font-medium leading-5 text-[#0a0a0a] transition-colors"
+        [disabled]="item.disabled"
+        [attr.aria-expanded]="isExpanded(i)"
+        [attr.aria-controls]="item.id + '-panel'"
+        (click)="toggle(i)"
+      >
+        <span class="pr-[10px]">{{ item.title }}</span>
+        <span class="inline-flex h-6 w-6 items-center justify-center text-[#0a0a0a]" aria-hidden="true">
+          <svg
+            class="h-4 w-4 transition-transform"
+            [ngClass]="isExpanded(i) ? 'rotate-180' : ''"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M3.5 6.5L8 11L12.5 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </span>
+      </button>
+    </h3>
+    <div
+      *ngIf="isExpanded(i)"
+      [id]="item.id + '-panel'"
+      class="flex flex-col gap-4 pb-4 text-[14px] font-normal leading-5 text-[#0a0a0a]"
+    >
+      <p *ngFor="let line of contentLines(item.content)" class="m-0">{{ line }}</p>
+    </div>
+  </div>
+</div>

package/src/lib/components/accordion/accordion.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+export interface PdmAccordionItem {
+  id: string;
+  title: string;
+  content: string | string[];
+  disabled?: boolean;
+}
+
+@Component({
+  selector: 'pdm-accordion',
+  templateUrl: './accordion.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmAccordionComponent {
+  @Input() items: PdmAccordionItem[] = [];
+  @Input() expandedIndex = -1;
+  @Input() className = '';
+
+  @Output() expandedIndexChange = new EventEmitter<number>();
+
+  isExpanded(index: number): boolean {
+    return this.expandedIndex === index;
+  }
+
+  contentLines(content: string | string[]): string[] {
+    if (Array.isArray(content)) return content;
+    return content
+      .split('\n')
+      .map((line) => line.trim())
+      .filter((line) => line.length > 0);
+  }
+
+  toggle(index: number): void {
+    if (this.items[index]?.disabled) return;
+    this.expandedIndexChange.emit(this.expandedIndex === index ? -1 : index);
+  }
+}

package/src/lib/components/alert/alert.component.html

@@ -0,0 +1,52 @@
+<section
+  role="alert"
+  [ngClass]="[
+    'w-full rounded-[10px] border border-[#e5e5e5] bg-white px-4 py-3',
+    className
+  ]"
+>
+  <div [ngClass]="['flex gap-3', isDestructive ? 'items-start' : 'items-center']">
+    <span class="inline-flex h-6 w-6 shrink-0 items-center justify-center">
+      <svg *ngIf="!isDestructive && !isTitleOnly" viewBox="0 0 24 24" class="h-5 w-5 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5"></circle>
+        <path d="M8.5 12.5L10.8 14.8L15.8 9.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+      </svg>
+      <svg *ngIf="isTitleOnly" viewBox="0 0 24 24" class="h-5 w-5 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 8H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+        <path d="M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+        <path d="M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+      </svg>
+      <svg *ngIf="isDestructive" viewBox="0 0 24 24" class="h-5 w-5 text-[#dc2626]" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5"></circle>
+        <path d="M12 8V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+        <circle cx="12" cy="16" r="1" fill="currentColor"></circle>
+      </svg>
+    </span>
+
+    <div class="min-w-0 flex-1">
+      <h4
+        [ngClass]="[
+          'm-0 text-[14px] font-medium leading-5',
+          isDestructive ? 'text-[#dc2626]' : 'text-[#0a0a0a]'
+        ]"
+      >
+        {{ title }}
+      </h4>
+
+      <p
+        *ngIf="!isTitleOnly && description"
+        [ngClass]="[
+          'm-0 mt-0.5 text-[14px] leading-5',
+          isDestructive ? 'text-[#dc2626]' : 'text-[#0a0a0a] font-light'
+        ]"
+      >
+        {{ description }}
+      </p>
+
+      <ul *ngIf="isDestructive && details.length" class="m-0 mt-1 pl-5 text-[14px] leading-5 text-[#dc2626]">
+        <li *ngFor="let item of details">{{ item }}</li>
+      </ul>
+    </div>
+  </div>
+</section>
+

package/src/lib/components/alert/alert.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+export type PdmAlertVariant = 'default' | 'title-only' | 'destructive';
+
+@Component({
+  selector: 'pdm-alert',
+  templateUrl: './alert.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmAlertComponent {
+  @Input() variant: PdmAlertVariant = 'default';
+  @Input() title = 'Success! Your changes have been saved';
+  @Input() description = 'This is an alert with icon, title and description.';
+  @Input() details: string[] = [];
+  @Input() className = '';
+
+  get isDestructive(): boolean {
+    return this.variant === 'destructive';
+  }
+
+  get isTitleOnly(): boolean {
+    return this.variant === 'title-only';
+  }
+}
+

package/src/lib/components/alert-dialog/alert-dialog.component.html

@@ -0,0 +1,41 @@
+<button
+  *ngIf="showTrigger && !open"
+  type="button"
+  class="inline-flex h-9 items-center justify-center rounded-[8px] border border-[#e5e5e5] bg-[#f5f5f5] px-4 py-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]"
+  (click)="onTriggerClick()"
+>
+  {{ triggerText }}
+</button>
+
+<div *ngIf="open" class="fixed inset-0 z-50 flex items-center justify-center p-5">
+  <div class="absolute inset-0 bg-[rgba(0,0,0,0.3)]" (click)="onCancel()"></div>
+  <section
+    role="alertdialog"
+    aria-modal="true"
+    [ngClass]="[
+      'relative z-10 w-full max-w-[552px] rounded-[10px] border border-[#e5e5e5] bg-white p-6 text-[#0a0a0a] shadow-[0px_10px_15px_0px_rgba(0,0,0,0.1),0px_4px_6px_0px_rgba(0,0,0,0.1)]',
+      className
+    ]"
+  >
+    <div class="flex flex-col gap-2">
+      <h2 class="text-[18px] font-semibold leading-7 tracking-normal">{{ title }}</h2>
+      <p *ngIf="description" class="text-[14px] font-normal leading-5 text-[#737373]">{{ description }}</p>
+    </div>
+    <div class="mt-4 flex items-center justify-end gap-2">
+      <button
+        type="button"
+        class="inline-flex h-9 items-center justify-center rounded-[10px] border border-[#e5e5e5] bg-white px-4 py-2 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]"
+        (click)="onCancel()"
+      >
+        {{ cancelText }}
+      </button>
+      <button
+        type="button"
+        class="inline-flex h-9 items-center justify-center rounded-[10px] bg-[#171717] px-4 py-2 text-[14px] font-medium leading-5 text-[#fafafa] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)]"
+        (click)="onConfirm()"
+      >
+        {{ confirmText }}
+      </button>
+    </div>
+  </section>
+</div>

package/src/lib/components/alert-dialog/alert-dialog.component.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'pdm-alert-dialog',
+  templateUrl: './alert-dialog.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmAlertDialogComponent {
+  @Input() open = false;
+  @Input() showTrigger = false;
+  @Input() triggerText = 'Show dialog';
+  @Input() title = 'Are you absolutely sure?';
+  @Input() description = '';
+  @Input() confirmText = 'Continue';
+  @Input() cancelText = 'Cancel';
+  @Input() className = '';
+
+  @Output() openChange = new EventEmitter<boolean>();
+  @Output() confirm = new EventEmitter<void>();
+  @Output() cancel = new EventEmitter<void>();
+
+  onTriggerClick(): void {
+    this.open = true;
+    this.openChange.emit(true);
+  }
+
+  onCancel(): void {
+    this.cancel.emit();
+    this.open = false;
+    this.openChange.emit(false);
+  }
+
+  onConfirm(): void {
+    this.confirm.emit();
+    this.open = false;
+    this.openChange.emit(false);
+  }
+
+  @HostListener('document:keydown.escape')
+  onEsc(): void {
+    if (this.open) {
+      this.onCancel();
+    }
+  }
+}

package/src/lib/components/aspect-ratio/aspect-ratio.component.html

@@ -0,0 +1,11 @@
+<div class="relative w-full" [ngClass]="className" [style.paddingTop]="paddingTop">
+  <div class="absolute inset-0 overflow-hidden rounded-[10px]">
+    <img
+      *ngIf="imageSrc"
+      [src]="imageSrc"
+      [alt]="imageAlt"
+      class="pointer-events-none h-full w-full rounded-[10px] object-cover"
+    />
+    <ng-content></ng-content>
+  </div>
+</div>

package/src/lib/components/aspect-ratio/aspect-ratio.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'pdm-aspect-ratio',
+  templateUrl: './aspect-ratio.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmAspectRatioComponent {
+  @Input() ratio = 16 / 9;
+  @Input() imageSrc = '';
+  @Input() imageAlt = '';
+  @Input() className = '';
+
+  get paddingTop(): string {
+    if (!this.ratio || this.ratio <= 0) return '56.25%';
+    return (100 / this.ratio).toFixed(4) + '%';
+  }
+}

package/src/lib/components/avatar/avatar.component.html

@@ -0,0 +1,21 @@
+<div *ngIf="!isGroup" [ngClass]="['relative flex shrink-0 overflow-hidden', radiusClass, sizeClasses[size], className]">
+  <img *ngIf="src" [src]="src" [alt]="alt" [ngClass]="['aspect-square h-full w-full object-cover', radiusClass]" />
+  <div
+    *ngIf="!src"
+    [ngClass]="['flex h-full w-full items-center justify-center bg-[hsl(var(--muted))] text-xs text-[hsl(var(--muted-foreground))]', radiusClass]"
+  >
+    {{ fallback }}
+  </div>
+</div>
+
+<div *ngIf="isGroup" [ngClass]="['inline-flex items-center pr-2', className]">
+  <div
+    *ngFor="let groupSrc of groupSources; let i = index"
+    [ngClass]="[
+      'relative h-8 w-8 shrink-0 overflow-hidden rounded-full',
+      i > 0 ? '-mr-2 border border-[#e5e5e5]' : '-mr-2'
+    ]"
+  >
+    <img [src]="groupSrc" [alt]="alt + ' ' + (i + 1)" class="h-full w-full rounded-full object-cover" />
+  </div>
+</div>

package/src/lib/components/avatar/avatar.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+export type PdmAvatarShape = 'circle' | 'square';
+
+@Component({
+  selector: 'pdm-avatar',
+  templateUrl: './avatar.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmAvatarComponent {
+  @Input() src = '';
+  @Input() alt = 'Avatar';
+  @Input() fallback = 'U';
+  @Input() shape: PdmAvatarShape = 'circle';
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
+  @Input() groupSources: string[] = [];
+  @Input() className = '';
+
+  readonly sizeClasses = {
+    sm: 'h-8 w-8',
+    md: 'h-10 w-10',
+    lg: 'h-12 w-12'
+  };
+
+  get isGroup(): boolean {
+    return this.groupSources.length > 0;
+  }
+
+  get radiusClass(): string {
+    return this.shape === 'square' ? 'rounded-[8px]' : 'rounded-full';
+  }
+}

package/src/lib/components/badge/badge.component.html

@@ -0,0 +1,28 @@
+<span
+  [ngClass]="[
+    'inline-flex items-center justify-center text-center align-middle',
+    variant === 'default' ? 'h-[22px] rounded-[10px] bg-[#171717] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',
+    variant === 'secondary' ? 'h-[22px] rounded-[10px] bg-[#f5f5f5] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',
+    variant === 'destructive' ? 'h-[22px] rounded-[10px] bg-[#dc2626] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[rgba(255,255,255,0.95)]' : '',
+    variant === 'outline' ? 'h-[22px] rounded-[10px] border border-[#e5e5e5] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',
+    variant === 'icon' ? 'h-[22px] gap-1 rounded-[10px] bg-[#171717] px-[10px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',
+    variant === 'number' ? 'h-5 min-w-[20px] rounded-full bg-[#171717] px-[6px] py-[2px] text-[12px] font-medium leading-4 text-[#fafafa]' : '',
+    variant === 'destructive-number' ? 'h-5 min-w-[20px] rounded-full bg-[#dc2626] px-[6px] py-[2px] text-[12px] font-medium leading-4 text-[rgba(255,255,255,0.95)]' : '',
+    variant === 'secondary-number' ? 'h-5 min-w-[20px] rounded-full border border-[#e5e5e5] px-1 py-[2px] text-[12px] font-medium leading-4 text-[#0a0a0a]' : '',
+    className
+  ]"
+>
+  <svg
+    *ngIf="variant === 'icon'"
+    viewBox="0 0 24 24"
+    class="h-4 w-4"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5"></circle>
+    <path d="M8.5 12.5L10.8 14.8L15.8 9.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+  </svg>
+  <span [ngClass]="[variant === 'secondary-number' ? 'font-mono' : '']">{{ text }}</span>
+</span>
+

package/src/lib/components/badge/badge.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+export type PdmBadgeVariant =
+  | 'default'
+  | 'secondary'
+  | 'destructive'
+  | 'outline'
+  | 'icon'
+  | 'number'
+  | 'destructive-number'
+  | 'secondary-number';
+
+@Component({
+  selector: 'pdm-badge',
+  templateUrl: './badge.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmBadgeComponent {
+  @Input() variant: PdmBadgeVariant = 'default';
+  @Input() text = 'Badge';
+  @Input() className = '';
+}
+

package/src/lib/components/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,39 @@
+<nav
+  aria-label="breadcrumb"
+  [ngClass]="['inline-flex items-center gap-[6px] text-[14px] leading-5', className]"
+>
+  <ng-container *ngFor="let item of renderedItems; let i = index; let last = last">
+    <span [ngClass]="[last ? 'text-[#0a0a0a]' : 'text-[#737373]']">{{ item }}</span>
+
+    <ng-container *ngIf="!last">
+      <span class="inline-flex h-6 w-6 items-center justify-center text-[#737373]" aria-hidden="true">
+        <svg
+          *ngIf="mode === 'custom-separator' && item !== '...'"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M8 20L16 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+        <svg
+          *ngIf="(mode !== 'custom-separator' && item !== '...') || item === '...'"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </span>
+    </ng-container>
+
+    <ng-container *ngIf="mode === 'dropdown' && i === 1 && item !== '...' && !last">
+      <span class="-ml-2 inline-flex h-6 w-6 items-center justify-center text-[#737373]" aria-hidden="true">
+        <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </span>
+    </ng-container>
+  </ng-container>
+</nav>

package/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+export type PdmBreadcrumbMode =
+  | 'custom-separator'
+  | 'dropdown'
+  | 'collapsed'
+  | 'link-component'
+  | 'responsive';
+
+@Component({
+  selector: 'pdm-breadcrumb',
+  templateUrl: './breadcrumb.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmBreadcrumbComponent {
+  @Input() mode: PdmBreadcrumbMode = 'link-component';
+  @Input() items: string[] = ['Home', 'Components', 'Breadcrumb'];
+  @Input() className = '';
+
+  get renderedItems(): string[] {
+    if ((this.mode === 'collapsed' || this.mode === 'responsive') && this.items.length > 3) {
+      return [this.items[0], '...', this.items[this.items.length - 2], this.items[this.items.length - 1]];
+    }
+    return this.items;
+  }
+}

package/src/lib/components/button/button.component.html

@@ -0,0 +1,15 @@
+<button
+  [type]="type"
+  [disabled]="isDisabled"
+  [attr.aria-busy]="loading"
+  [ngClass]="rootClasses"
+  (click)="onClick($event)"
+>
+  <span
+    *ngIf="loading"
+    class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent"
+    aria-hidden="true"
+  ></span>
+  <ng-content select="[pdmButtonIcon]" *ngIf="variant === 'with-icon' || variant === 'icon' || variant === 'icon-circle' || variant === 'rounded'"></ng-content>
+  <ng-content></ng-content>
+</button>