pdm-ui-kit 0.1.4 → 0.1.6

package/src/lib/components/context-menu/context-menu.component.html

@@ -1,47 +0,0 @@
-<div class="relative" [ngClass]="className" (contextmenu)="onContextMenu($event)">
-  <div
-    class="flex items-center justify-center rounded-[8px] border border-dashed border-[#e5e5e5]"
-    [style.width.px]="width"
-    [style.height.px]="height"
-  >
-    <span class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ triggerLabel }}</span>
-  </div>
-
-  <div
-    *ngIf="open"
-    class="fixed z-50 w-[208px] rounded-[8px] border border-[#e5e5e5] bg-white shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]"
-    [style.left.px]="x + 4"
-    [style.top.px]="y + 2"
-  >
-    <div class="px-1 pt-1">
-      <ng-container *ngFor="let item of items">
-        <div *ngIf="item.type === 'separator'" class="my-1 border-t border-[#e5e5e5]"></div>
-
-        <div *ngIf="item.type === 'label'" class="h-8 px-8 py-[6px] text-[14px] font-semibold leading-5 text-[#0a0a0a]">
-          {{ item.label }}
-        </div>
-
-        <button
-          *ngIf="!item.type || item.type === 'item'"
-          type="button"
-          [disabled]="item.disabled"
-          class="flex h-8 w-full items-center rounded-[6px] py-[6px] pr-2 text-left disabled:opacity-50"
-          [ngClass]="item.inset ? 'pl-8' : 'px-2'"
-          (click)="select(item)"
-        >
-          <span class="mr-2 inline-flex w-4 shrink-0 items-center justify-center text-[#0a0a0a]">
-            <svg *ngIf="item.checked" viewBox="0 0 24 24" class="h-3.5 w-3.5" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5 12.5L9.2 16.7L19 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
-            </svg>
-            <span *ngIf="item.selectedDot" class="h-2 w-2 rounded-full bg-[#0a0a0a]"></span>
-          </span>
-          <span class="min-w-0 flex-1 truncate text-[14px] leading-5 text-[#0a0a0a]">{{ item.label }}</span>
-          <span *ngIf="item.shortcut" class="text-[12px] leading-4 text-[#737373]">{{ item.shortcut }}</span>
-          <svg *ngIf="item.showChevron" viewBox="0 0 24 24" class="h-3.5 w-3.5 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-          </svg>
-        </button>
-      </ng-container>
-    </div>
-  </div>
-</div>

package/src/lib/components/context-menu/context-menu.component.ts

@@ -1,67 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
-import { PdmMenuItem } from '../dropdown-menu/dropdown-menu.component';
-
-export interface PdmContextMenuItem extends PdmMenuItem {
-  checked?: boolean;
-  selectedDot?: boolean;
-}
-
-@Component({
-  selector: 'pdm-context-menu',
-  templateUrl: './context-menu.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmContextMenuComponent {
-  @Input() items: PdmContextMenuItem[] = [
-    { type: 'item', label: 'Back', value: 'back', inset: true, shortcut: '⌘[' },
-    { type: 'item', label: 'Forward', value: 'forward', inset: true, shortcut: '⌘]', disabled: true },
-    { type: 'item', label: 'Reload', value: 'reload', inset: true, shortcut: '⌘R' },
-    { type: 'item', label: 'More Tools', value: 'more-tools', inset: true, showChevron: true },
-    { type: 'separator' },
-    { type: 'item', label: 'Show Bookmarks Bar', value: 'show-bookmarks', checked: true },
-    { type: 'item', label: 'Show Full URLs', value: 'show-urls', inset: true },
-    { type: 'separator' },
-    { type: 'label', label: 'People' },
-    { type: 'separator' },
-    { type: 'item', label: 'Pedro Duarte', value: 'pedro', selectedDot: true },
-    { type: 'item', label: 'Colm Tuite', value: 'colm', inset: true }
-  ];
-  @Input() className = '';
-  @Input() triggerLabel = 'Right click here';
-  @Input() width = 300;
-  @Input() height = 150;
-  @Output() itemSelect = new EventEmitter<string>();
-
-  open = false;
-  x = 0;
-  y = 0;
-
-  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
-
-  onContextMenu(event: MouseEvent): void {
-    event.preventDefault();
-    this.x = event.clientX;
-    this.y = event.clientY;
-    this.open = true;
-  }
-
-  select(item: PdmContextMenuItem): void {
-    if (item.disabled || item.type === 'separator' || item.type === 'label' || !item.value) return;
-    this.itemSelect.emit(item.value);
-    this.open = false;
-  }
-
-  @HostListener('document:keydown.escape')
-  onEsc(): void {
-    this.open = false;
-  }
-
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: MouseEvent): void {
-    if (!this.open) return;
-    const target = event.target as Node | null;
-    if (target && !this.elementRef.nativeElement.contains(target)) {
-      this.open = false;
-    }
-  }
-}

package/src/lib/components/data-table/data-table.component.html

@@ -1,63 +0,0 @@
-<section [ngClass]="['flex w-[590px] flex-col items-end', className]">
-  <div class="flex w-full items-center justify-between py-4">
-    <input
-      type="text"
-      [placeholder]="filterPlaceholder"
-      [value]="query"
-      (input)="onQueryInput($event)"
-      class="h-9 w-[384px] rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] placeholder:text-[#737373] outline-none"
-    />
-
-    <button type="button" class="inline-flex h-9 items-center gap-2 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-2 shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
-      <span class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ columnsLabel }}</span>
-      <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-      </svg>
-    </button>
-  </div>
-
-  <div class="w-full overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white">
-    <table class="w-full border-collapse text-[14px] leading-5 text-[#0a0a0a]">
-      <thead>
-        <tr class="border-b border-[#e5e5e5]">
-          <th class="w-[32px] px-2 text-left font-medium"><input type="checkbox" class="h-4 w-4 rounded-[4px] border border-[#e5e5e5]" /></th>
-          <th class="w-[120px] px-2 py-2 text-left font-medium">Status</th>
-          <th class="w-[270px] px-2 py-2 text-left font-medium">
-            <button type="button" class="inline-flex items-center gap-1 rounded-[6px] px-3 py-2">
-              <span>Email</span>
-              <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M8 6L4 10L8 14M16 18L20 14L16 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-              </svg>
-            </button>
-          </th>
-          <th class="w-[100px] px-2 py-2 text-right font-medium">Amount</th>
-          <th class="px-2 py-2"></th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr *ngFor="let row of pagedRows" class="border-b border-[#e5e5e5] last:border-b-0">
-          <td class="px-2 py-2"><input type="checkbox" [checked]="row.selected" (change)="onToggleRow(row, $event)" class="h-4 w-4 rounded-[4px] border border-[#e5e5e5]" /></td>
-          <td class="px-2 py-2">{{ row.status }}</td>
-          <td class="px-2 py-2">{{ row.email }}</td>
-          <td class="px-2 py-2 text-right">{{ row.amount }}</td>
-          <td class="px-2 py-2">
-            <button type="button" class="inline-flex h-8 w-8 items-center justify-center" (click)="onAction(row)">
-              <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="6" cy="12" r="1.5" fill="currentColor"></circle>
-                <circle cx="12" cy="12" r="1.5" fill="currentColor"></circle>
-                <circle cx="18" cy="12" r="1.5" fill="currentColor"></circle>
-              </svg>
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <div class="flex w-full items-center gap-2 py-4">
-    <p class="flex-1 pr-2 text-[14px] leading-5 text-[#737373]">{{ selectedCount }} of {{ rows.length }} row(s) selected.</p>
-    <button type="button" class="h-9 rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] disabled:opacity-50" [disabled]="page <= 1" (click)="previous()">Previous</button>
-    <button type="button" class="h-9 rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)] disabled:opacity-50" [disabled]="page >= totalPages" (click)="next()">Next</button>
-  </div>
-</section>

package/src/lib/components/data-table/data-table.component.ts

@@ -1,78 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export interface PdmDataTableRow {
-  id: string;
-  status: string;
-  email: string;
-  amount: string;
-  selected?: boolean;
-}
-
-@Component({
-  selector: 'pdm-data-table',
-  templateUrl: './data-table.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmDataTableComponent {
-  @Input() className = '';
-  @Input() filterPlaceholder = 'Filter emails...';
-  @Input() columnsLabel = 'Columns';
-  @Input() rows: PdmDataTableRow[] = [
-    { 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' }
-  ];
-
-  @Input() page = 1;
-  @Input() pageSize = 5;
-  @Input() query = '';
-
-  @Output() queryChange = new EventEmitter<string>();
-  @Output() rowAction = new EventEmitter<string>();
-  @Output() pageChange = new EventEmitter<number>();
-  @Output() selectionChange = new EventEmitter<{ id: string; selected: boolean }>();
-
-  get filteredRows(): PdmDataTableRow[] {
-    const q = this.query.trim().toLowerCase();
-    if (!q) return this.rows;
-    return this.rows.filter((r) => r.email.toLowerCase().includes(q));
-  }
-
-  get pagedRows(): PdmDataTableRow[] {
-    const start = (this.page - 1) * this.pageSize;
-    return this.filteredRows.slice(start, start + this.pageSize);
-  }
-
-  get totalPages(): number {
-    return Math.max(1, Math.ceil(this.filteredRows.length / this.pageSize));
-  }
-
-  get selectedCount(): number {
-    return this.rows.filter((row) => row.selected).length;
-  }
-
-  onQueryInput(event: Event): void {
-    const value = (event.target as HTMLInputElement).value;
-    this.queryChange.emit(value);
-  }
-
-  onToggleRow(row: PdmDataTableRow, event: Event): void {
-    this.selectionChange.emit({ id: row.id, selected: (event.target as HTMLInputElement).checked });
-  }
-
-  previous(): void {
-    if (this.page <= 1) return;
-    this.pageChange.emit(this.page - 1);
-  }
-
-  next(): void {
-    if (this.page >= this.totalPages) return;
-    this.pageChange.emit(this.page + 1);
-  }
-
-  onAction(row: PdmDataTableRow): void {
-    this.rowAction.emit(row.id);
-  }
-}

package/src/lib/components/date-picker/date-picker.component.html

@@ -1,38 +0,0 @@
-<section [ngClass]="['flex flex-col gap-3', className]" class="w-[250px]">
-  <label class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ label }}</label>
-
-  <div class="flex items-center gap-2" *ngIf="variant === 'date-time'">
-    <button type="button" class="flex h-9 w-[150px] items-center justify-between rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 shadow-[0_1px_2px_rgba(0,0,0,0.1)]" (click)="toggle()">
-      <span class="truncate text-[12px] leading-4 text-[#0a0a0a]">{{ value }}</span>
-      <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-    </button>
-    <div class="flex h-9 w-[92px] items-center rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[12px] leading-4 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">{{ time }}</div>
-  </div>
-
-  <div *ngIf="variant !== 'date-time'" class="flex flex-col gap-2">
-    <button type="button" class="flex h-9 w-[192px] items-center justify-between rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 shadow-[0_1px_2px_rgba(0,0,0,0.1)]" (click)="toggle()">
-      <span class="truncate text-[16px] leading-6 text-[#0a0a0a]">{{ variant === 'natural-language' ? naturalLanguageValue : value }}</span>
-      <svg viewBox="0 0 24 24" class="h-4 w-4 text-[#0a0a0a]" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-    </button>
-
-    <p *ngIf="variant === 'natural-language'" class="max-w-[192px] text-[12px] leading-4 text-[#737373]">{{ naturalLanguageHint }}</p>
-  </div>
-
-  <div *ngIf="open" class="w-[250px] rounded-[10px] border border-[#e5e5e5] bg-white p-3 shadow-[0_1px_3px_rgba(0,0,0,0.1)]">
-    <div class="mb-4 flex items-center justify-between">
-      <button type="button" class="h-8 w-8 rounded-[6px] text-[#0a0a0a]">‹</button>
-      <div class="flex items-center gap-1.5">
-        <button type="button" class="inline-flex h-8 items-center gap-1 rounded-[6px] border border-[#e5e5e5] px-2 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">{{ monthLabel }} <span>˅</span></button>
-        <button type="button" class="inline-flex h-8 items-center gap-1 rounded-[6px] border border-[#e5e5e5] px-2 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">{{ year }} <span>˅</span></button>
-      </div>
-      <button type="button" class="h-8 w-8 rounded-[6px] text-[#0a0a0a]">›</button>
-    </div>
-
-    <pdm-calendar [month]="month" [year]="year" [selectedDay]="selectedDay" mode="single"></pdm-calendar>
-
-    <div *ngIf="variant === 'with-input' || variant === 'natural-language'" class="mt-3 flex gap-2">
-      <button type="button" class="h-8 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#0a0a0a]" (click)="selectPreset('Today')">Today</button>
-      <button type="button" class="h-8 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#0a0a0a]" (click)="selectPreset('Tomorrow')">Tomorrow</button>
-    </div>
-  </div>
-</section>

package/src/lib/components/date-picker/date-picker.component.ts

@@ -1,38 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type PdmDatePickerVariant = 'default' | 'with-input' | 'date-time' | 'natural-language';
-
-@Component({
-  selector: 'pdm-date-picker',
-  templateUrl: './date-picker.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmDatePickerComponent {
-  @Input() variant: PdmDatePickerVariant = 'default';
-  @Input() className = '';
-  @Input() open = false;
-
-  @Input() label = 'Date of Birth';
-  @Input() value = 'Select a date';
-  @Input() month = 6;
-  @Input() year = 2025;
-  @Input() selectedDay = 25;
-  @Input() time = '10:30:00';
-  @Input() naturalLanguageValue = 'In 2 days';
-  @Input() naturalLanguageHint = 'Your post will be published on June 21, 2025.';
-
-  @Output() openChange = new EventEmitter<boolean>();
-  @Output() valueChange = new EventEmitter<string>();
-
-  toggle(): void {
-    this.openChange.emit(!this.open);
-  }
-
-  selectPreset(value: string): void {
-    this.valueChange.emit(value);
-  }
-
-  get monthLabel(): string {
-    return new Date(this.year, this.month - 1, 1).toLocaleString('en-US', { month: 'short' });
-  }
-}

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

@@ -1,78 +0,0 @@
-<div *ngIf="open" class="fixed inset-0 z-50 flex items-center justify-center p-4">
-  <div class="absolute inset-0 bg-[rgba(0,0,0,0.3)]" (click)="onBackdropClick()"></div>
-  <section
-    role="dialog"
-    aria-modal="true"
-    [ngClass]="[
-      'relative z-10 w-full max-w-[423px] rounded-[10px] border border-[#e5e5e5] bg-white p-6 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]',
-      className
-    ]"
-  >
-    <div class="flex items-start justify-between gap-3">
-      <div class="min-w-0">
-        <h2 class="m-0 text-[18px] font-semibold leading-7 text-[#0a0a0a]">{{ title }}</h2>
-        <p *ngIf="description" class="m-0 mt-2 text-[14px] leading-5 text-[#737373]">{{ description }}</p>
-      </div>
-      <button
-        *ngIf="showCloseButton"
-        type="button"
-        class="inline-flex h-6 w-6 items-center justify-center text-[#0a0a0a] opacity-70"
-        (click)="close()"
-        aria-label="Close dialog"
-      >
-        <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-        </svg>
-      </button>
-    </div>
-
-    <ng-container *ngIf="variant === 'default'; else customCloseDialog">
-      <div class="mt-4 flex flex-col gap-4">
-        <div class="flex flex-col gap-3">
-          <label class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ nameLabel }}</label>
-          <div class="h-9 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">{{ nameValue }}</div>
-        </div>
-        <div class="flex flex-col gap-3">
-          <label class="text-[14px] font-medium leading-5 text-[#0a0a0a]">{{ usernameLabel }}</label>
-          <div class="h-9 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">{{ usernameValue }}</div>
-        </div>
-      </div>
-
-      <div class="mt-4 flex justify-end gap-2">
-        <button
-          type="button"
-          class="h-9 rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]"
-          (click)="onSecondaryAction()"
-        >
-          {{ secondaryActionText }}
-        </button>
-        <button
-          type="button"
-          class="h-9 rounded-[10px] bg-[#171717] px-4 text-[14px] font-medium leading-5 text-[#fafafa] shadow-[0_1px_2px_rgba(0,0,0,0.1)]"
-          (click)="onPrimaryAction()"
-        >
-          {{ primaryActionText }}
-        </button>
-      </div>
-    </ng-container>
-
-    <ng-template #customCloseDialog>
-      <div class="mt-4 h-9 rounded-[8px] border border-[#e5e5e5] bg-white px-3 py-1 text-[16px] leading-6 text-[#737373] shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
-        {{ linkValue }}
-      </div>
-      <div class="mt-4 flex">
-        <button
-          type="button"
-          class="h-9 rounded-[10px] bg-[#f5f5f5] px-4 text-[14px] font-medium leading-5 text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]"
-          (click)="onSecondaryAction()"
-        >
-          Close
-        </button>
-      </div>
-    </ng-template>
-
-    <div class="mt-4">
-      <ng-content></ng-content>
-    </div>
-  </section>
-</div>

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

@@ -1,55 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
-
-export type PdmDialogVariant = 'default' | 'custom-close';
-
-@Component({
-  selector: 'pdm-dialog',
-  templateUrl: './dialog.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmDialogComponent {
-  @Input() open = false;
-  @Input() variant: PdmDialogVariant = 'default';
-  @Input() title = 'Edit profile';
-  @Input() description = 'Make changes to your profile here. Click save when you\'re done.';
-  @Input() closeOnBackdrop = true;
-  @Input() closeOnEsc = true;
-  @Input() showCloseButton = true;
-  @Input() primaryActionText = 'Save changes';
-  @Input() secondaryActionText = 'Cancel';
-  @Input() nameLabel = 'Name';
-  @Input() nameValue = 'Pedro Duarte';
-  @Input() usernameLabel = 'Username';
-  @Input() usernameValue = '@peduarte';
-  @Input() linkValue = 'https://ui.shadcn.com/docs/installation';
-  @Input() className = '';
-
-  @Output() openChange = new EventEmitter<boolean>();
-  @Output() primaryAction = new EventEmitter<void>();
-  @Output() secondaryAction = new EventEmitter<void>();
-
-  @HostListener('document:keydown.escape')
-  onEsc(): void {
-    if (this.open && this.closeOnEsc) {
-      this.close();
-    }
-  }
-
-  close(): void {
-    this.openChange.emit(false);
-  }
-
-  onPrimaryAction(): void {
-    this.primaryAction.emit();
-  }
-
-  onSecondaryAction(): void {
-    this.secondaryAction.emit();
-  }
-
-  onBackdropClick(): void {
-    if (this.closeOnBackdrop) {
-      this.close();
-    }
-  }
-}

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

@@ -1,56 +0,0 @@
-<div *ngIf="open" class="fixed inset-0 z-50" [ngClass]="className">
-  <div class="absolute inset-0 bg-[rgba(0,0,0,0.3)]" (click)="close()"></div>
-
-  <section
-    *ngIf="variant === 'drawer'; else responsiveDialog"
-    class="absolute inset-x-0 bottom-0 mx-auto w-full max-w-[1229px] rounded-t-[10px] border border-[#e5e5e5] bg-white p-6 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]"
-  >
-    <div class="mx-auto mb-4 h-1 w-10 rounded-full bg-[#e5e5e5]"></div>
-
-    <div class="mx-auto flex max-w-[320px] flex-col items-center">
-      <h3 class="m-0 text-[14px] font-semibold leading-5 text-[#0a0a0a]">{{ title }}</h3>
-      <p class="m-0 mt-1 text-[12px] leading-4 text-[#737373]">{{ description }}</p>
-
-      <div class="mt-3 flex w-full items-center justify-center gap-4">
-        <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-[#e5e5e5] text-[#737373]">-</button>
-        <div class="text-center">
-          <div class="text-[48px] font-semibold leading-none text-[#0a0a0a]">{{ value }}</div>
-          <div class="mt-1 text-[10px] tracking-wide text-[#737373]">{{ unit }}</div>
-        </div>
-        <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-[#e5e5e5] text-[#737373]">+</button>
-      </div>
-
-      <div class="mt-3 flex h-[58px] w-full items-end gap-[3px]">
-        <div *ngFor="let bar of bars" class="flex-1 bg-[#171717]" [style.height.px]="bar"></div>
-      </div>
-
-      <button type="button" class="mt-3 h-9 w-full rounded-[10px] bg-[#171717] text-[14px] font-medium text-[#fafafa]" (click)="onPrimaryAction()">Submit</button>
-      <button type="button" class="mt-2 h-9 w-full rounded-[10px] border border-[#e5e5e5] bg-white text-[14px] font-medium text-[#0a0a0a]" (click)="onSecondaryAction()">Cancel</button>
-    </div>
-  </section>
-
-  <ng-template #responsiveDialog>
-    <section class="absolute left-1/2 top-1/2 w-full max-w-[423px] -translate-x-1/2 -translate-y-1/2 rounded-[10px] border border-[#e5e5e5] bg-white p-4 shadow-[0_10px_15px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.1)]">
-      <div class="flex items-start justify-between">
-        <div>
-          <h3 class="m-0 text-[18px] font-semibold leading-7 text-[#0a0a0a]">{{ profileTitle }}</h3>
-          <p class="m-0 mt-1 text-[12px] leading-4 text-[#737373]">{{ profileDescription }}</p>
-        </div>
-        <button type="button" class="h-5 w-5 text-[#737373]" (click)="close()">×</button>
-      </div>
-
-      <div class="mt-3 flex flex-col gap-3">
-        <div>
-          <label class="mb-1 block text-[12px] font-medium leading-4 text-[#0a0a0a]">{{ nameLabel }}</label>
-          <div class="h-8 rounded-[6px] border border-[#e5e5e5] bg-white px-2 py-1 text-[12px] leading-4 text-[#0a0a0a]">{{ nameValue }}</div>
-        </div>
-        <div>
-          <label class="mb-1 block text-[12px] font-medium leading-4 text-[#0a0a0a]">{{ usernameLabel }}</label>
-          <div class="h-8 rounded-[6px] border border-[#e5e5e5] bg-white px-2 py-1 text-[12px] leading-4 text-[#0a0a0a]">{{ usernameValue }}</div>
-        </div>
-      </div>
-
-      <button type="button" class="mt-3 h-8 w-full rounded-[8px] bg-[#171717] text-[12px] font-medium text-[#fafafa]" (click)="onPrimaryAction()">Save changes</button>
-    </section>
-  </ng-template>
-</div>

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

@@ -1,43 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type PdmDrawerVariant = 'drawer' | 'responsive-dialog';
-
-@Component({
-  selector: 'pdm-drawer',
-  templateUrl: './drawer.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PdmDrawerComponent {
-  @Input() open = false;
-  @Input() variant: PdmDrawerVariant = 'drawer';
-  @Input() className = '';
-  @Input() title = 'Move Goal';
-  @Input() description = 'Set your daily activity goal.';
-  @Input() value = 350;
-  @Input() unit = 'CALORIES/DAY';
-
-  @Input() profileTitle = 'Edit profile';
-  @Input() profileDescription = 'Make changes to your profile here. Click save when you\'re done.';
-  @Input() nameLabel = 'Name';
-  @Input() nameValue = 'Pedro Duarte';
-  @Input() usernameLabel = 'Username';
-  @Input() usernameValue = '@peduarte';
-
-  @Output() openChange = new EventEmitter<boolean>();
-  @Output() primaryAction = new EventEmitter<void>();
-  @Output() secondaryAction = new EventEmitter<void>();
-
-  readonly bars = [72, 54, 58, 49, 60, 65, 44, 53, 61, 52, 63, 48, 66];
-
-  close(): void {
-    this.openChange.emit(false);
-  }
-
-  onPrimaryAction(): void {
-    this.primaryAction.emit();
-  }
-
-  onSecondaryAction(): void {
-    this.secondaryAction.emit();
-  }
-}

package/src/lib/components/dropdown-menu/dropdown-menu.component.html

@@ -1,56 +0,0 @@
-<div class="relative inline-block" [ngClass]="className">
-  <button
-    type="button"
-    class="inline-flex h-9 items-center justify-center rounded-[10px] border border-[#e5e5e5] bg-white px-4 text-[14px] font-medium text-[#0a0a0a] shadow-[0_1px_2px_rgba(0,0,0,0.1)]"
-    [attr.aria-expanded]="open"
-    (click)="toggle()"
-  >
-    {{ triggerText }}
-  </button>
-
-  <div
-    *ngIf="open"
-    [ngClass]="[
-      'absolute left-0 top-full z-50 mt-2 min-w-[224px] overflow-hidden rounded-[8px] border border-[#e5e5e5] bg-white p-1 text-[#0a0a0a] shadow-[0_2px_4px_-2px_rgba(0,0,0,0.1),0_4px_6px_-1px_rgba(0,0,0,0.1)]',
-      panelClassName
-    ]"
-  >
-    <ng-container *ngFor="let item of resolvedItems">
-      <div *ngIf="item.type === 'separator'" class="my-[5px] h-px bg-[#f1f5f9]"></div>
-
-      <div
-        *ngIf="item.type === 'label'"
-        [ngClass]="['px-2 py-1.5 text-[14px] font-semibold leading-5 text-[#0a0a0a]', item.inset ? 'pl-8' : '']"
-      >
-        {{ item.label }}
-      </div>
-
-      <button
-        *ngIf="!item.type || item.type === 'item'"
-        type="button"
-        [disabled]="item.disabled"
-        [ngClass]="[
-          'relative flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left text-[14px] leading-5 text-[#0a0a0a] transition-colors hover:bg-[#f5f5f5] disabled:pointer-events-none disabled:opacity-50',
-          item.inset ? 'pl-8' : ''
-        ]"
-        (click)="select(item)"
-      >
-        <span class="inline-flex h-4 w-4 shrink-0 items-center justify-center">
-          <svg
-            *ngIf="item.checked"
-            viewBox="0 0 24 24"
-            class="h-3.5 w-3.5 text-[#0a0a0a]"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M5 12.5L9.2 16.7L19 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
-          </svg>
-          <span *ngIf="item.radioSelected" class="h-2 w-2 rounded-full bg-[#0a0a0a]"></span>
-        </span>
-        <span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
-        <span *ngIf="item.shortcut" class="text-[12px] leading-5 text-[#64748b]">{{ item.shortcut }}</span>
-        <span *ngIf="item.showChevron" class="text-[16px] leading-none text-[#475569]">›</span>
-      </button>
-    </ng-container>
-  </div>
-</div>