@lumston/ds-angular 0.0.6 → 0.0.8

package/fesm2022/lumston-ds-angular-src-data-display.mjs

@@ -0,0 +1,215 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, inject, output } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+class BadgeComponent {
+    constructor() {
+        this.badgeContent = input(undefined, ...(ngDevMode ? [{ debugName: "badgeContent" }] : []));
+        this.max = input(99, ...(ngDevMode ? [{ debugName: "max" }] : []));
+        this.severity = input('error', ...(ngDevMode ? [{ debugName: "severity" }] : []));
+        this.variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.badgePosition = input('top-right', ...(ngDevMode ? [{ debugName: "badgePosition" }] : []));
+        this.overlap = input('rectangular', ...(ngDevMode ? [{ debugName: "overlap" }] : []));
+        this.isHidden = input(false, ...(ngDevMode ? [{ debugName: "isHidden" }] : []));
+        this.formattedContent = computed(() => {
+            const raw = this.badgeContent();
+            if (raw === undefined || raw === null)
+                return '';
+            if (typeof raw === 'number') {
+                return raw > this.max()
+                    ? `${this.max()}+`
+                    : String(raw);
+            }
+            return String(raw);
+        }, ...(ngDevMode ? [{ debugName: "formattedContent" }] : []));
+        this.badgeClasses = computed(() => {
+            const classes = ['badge'];
+            classes.push(`badge-${this.severity()}`);
+            classes.push(`badge-${this.variant()}`);
+            classes.push(`badge-${this.badgePosition()}`);
+            classes.push(`badge-overlap-${this.overlap()}`);
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
+        this.ariaLabelText = computed(() => {
+            if (this.variant() === 'dot') {
+                return 'status indicator';
+            }
+            const formatted = this.formattedContent();
+            return formatted || 'badge';
+        }, ...(ngDevMode ? [{ debugName: "ariaLabelText" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: BadgeComponent, isStandalone: true, selector: "ls-badge", inputs: { badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, badgePosition: { classPropertyName: "badgePosition", publicName: "badgePosition", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="badge-wrapper">
+      <ng-content />
+      @if (!isHidden()) {
+        <span
+          [class]="badgeClasses()"
+          role="status"
+          [attr.aria-label]="ariaLabelText()">
+          @if (variant() !== 'dot') {
+            {{ formattedContent() }}
+          }
+        </span>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:contents}.badge-wrapper{position:relative;display:inline-flex;vertical-align:middle}.badge{position:absolute;display:inline-flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:600;line-height:1;min-width:20px;height:20px;padding:0 6px;border-radius:var(--ls-border-radius-full);white-space:nowrap;z-index:1;pointer-events:none;transition:transform var(--ls-transition-duration) ease;box-shadow:0 2px 5px #00000026}.badge-solid{color:#fff}.badge-outlined{background-color:transparent;border-width:2px;border-style:solid}.badge-dot{min-width:10px;width:10px;height:10px;padding:0;border-radius:50%}.badge-top-right{top:0;right:0;transform:translate(50%,-50%)}.badge-top-left{top:0;left:0;transform:translate(-50%,-50%)}.badge-bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.badge-bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.badge-overlap-circular.badge-top-right{top:8%;right:8%}.badge-overlap-circular.badge-top-left{top:8%;left:8%}.badge-overlap-circular.badge-bottom-right{bottom:8%;right:8%}.badge-overlap-circular.badge-bottom-left{bottom:8%;left:8%}.badge-solid.badge-primary{background-color:var(--ls-color-primary)}.badge-solid.badge-secondary{background-color:var(--ls-color-secondary)}.badge-solid.badge-success{background-color:var(--ls-color-success)}.badge-solid.badge-warning{background-color:var(--ls-color-warning)}.badge-solid.badge-error{background-color:var(--ls-color-danger)}.badge-solid.badge-info{background-color:var(--ls-color-info)}.badge-outlined.badge-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.badge-outlined.badge-secondary{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.badge-outlined.badge-success{border-color:var(--ls-color-success);color:var(--ls-color-success)}.badge-outlined.badge-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning)}.badge-outlined.badge-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger)}.badge-outlined.badge-info{border-color:var(--ls-color-info);color:var(--ls-color-info)}.badge-dot.badge-primary{background-color:var(--ls-color-primary)}.badge-dot.badge-secondary{background-color:var(--ls-color-secondary)}.badge-dot.badge-success{background-color:var(--ls-color-success)}.badge-dot.badge-warning{background-color:var(--ls-color-warning)}.badge-dot.badge-error{background-color:var(--ls-color-danger)}.badge-dot.badge-info{background-color:var(--ls-color-info)}body.dark .badge-solid{color:#fff}body.dark .badge-outlined.badge-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}body.dark .badge-outlined.badge-secondary{border-color:#9ca3af;color:#9ca3af}body.dark .badge-outlined.badge-success{border-color:var(--ls-color-success);color:var(--ls-color-success)}body.dark .badge-outlined.badge-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning)}body.dark .badge-outlined.badge-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger)}body.dark .badge-outlined.badge-info{border-color:var(--ls-color-info);color:var(--ls-color-info)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ls-badge', standalone: true, template: `
+    <div class="badge-wrapper">
+      <ng-content />
+      @if (!isHidden()) {
+        <span
+          [class]="badgeClasses()"
+          role="status"
+          [attr.aria-label]="ariaLabelText()">
+          @if (variant() !== 'dot') {
+            {{ formattedContent() }}
+          }
+        </span>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.badge-wrapper{position:relative;display:inline-flex;vertical-align:middle}.badge{position:absolute;display:inline-flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:600;line-height:1;min-width:20px;height:20px;padding:0 6px;border-radius:var(--ls-border-radius-full);white-space:nowrap;z-index:1;pointer-events:none;transition:transform var(--ls-transition-duration) ease;box-shadow:0 2px 5px #00000026}.badge-solid{color:#fff}.badge-outlined{background-color:transparent;border-width:2px;border-style:solid}.badge-dot{min-width:10px;width:10px;height:10px;padding:0;border-radius:50%}.badge-top-right{top:0;right:0;transform:translate(50%,-50%)}.badge-top-left{top:0;left:0;transform:translate(-50%,-50%)}.badge-bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.badge-bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.badge-overlap-circular.badge-top-right{top:8%;right:8%}.badge-overlap-circular.badge-top-left{top:8%;left:8%}.badge-overlap-circular.badge-bottom-right{bottom:8%;right:8%}.badge-overlap-circular.badge-bottom-left{bottom:8%;left:8%}.badge-solid.badge-primary{background-color:var(--ls-color-primary)}.badge-solid.badge-secondary{background-color:var(--ls-color-secondary)}.badge-solid.badge-success{background-color:var(--ls-color-success)}.badge-solid.badge-warning{background-color:var(--ls-color-warning)}.badge-solid.badge-error{background-color:var(--ls-color-danger)}.badge-solid.badge-info{background-color:var(--ls-color-info)}.badge-outlined.badge-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.badge-outlined.badge-secondary{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.badge-outlined.badge-success{border-color:var(--ls-color-success);color:var(--ls-color-success)}.badge-outlined.badge-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning)}.badge-outlined.badge-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger)}.badge-outlined.badge-info{border-color:var(--ls-color-info);color:var(--ls-color-info)}.badge-dot.badge-primary{background-color:var(--ls-color-primary)}.badge-dot.badge-secondary{background-color:var(--ls-color-secondary)}.badge-dot.badge-success{background-color:var(--ls-color-success)}.badge-dot.badge-warning{background-color:var(--ls-color-warning)}.badge-dot.badge-error{background-color:var(--ls-color-danger)}.badge-dot.badge-info{background-color:var(--ls-color-info)}body.dark .badge-solid{color:#fff}body.dark .badge-outlined.badge-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}body.dark .badge-outlined.badge-secondary{border-color:#9ca3af;color:#9ca3af}body.dark .badge-outlined.badge-success{border-color:var(--ls-color-success);color:var(--ls-color-success)}body.dark .badge-outlined.badge-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning)}body.dark .badge-outlined.badge-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger)}body.dark .badge-outlined.badge-info{border-color:var(--ls-color-info);color:var(--ls-color-info)}\n"] }]
+        }], propDecorators: { badgeContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeContent", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], badgePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgePosition", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }] } });
+
+class ChipComponent {
+    constructor() {
+        this._sanitizer = inject(DomSanitizer);
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.variant = input('filled', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.avatar = input(undefined, ...(ngDevMode ? [{ debugName: "avatar" }] : []));
+        this.deleteIcon = input(false, ...(ngDevMode ? [{ debugName: "deleteIcon" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+        this.onClick = output();
+        this.onDelete = output();
+        this.sanitizedIcon = computed(() => this._sanitizer.bypassSecurityTrustHtml(this.icon() ?? ''), ...(ngDevMode ? [{ debugName: "sanitizedIcon" }] : []));
+        this.chipClasses = computed(() => {
+            const classes = ['chip'];
+            classes.push(`chip-${this.variant()}`);
+            classes.push(`chip-${this.color()}`);
+            classes.push(`chip-${this.size()}`);
+            if (this.clickable())
+                classes.push('chip-clickable');
+            if (this.disabled())
+                classes.push('chip-disabled');
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "chipClasses" }] : []));
+    }
+    handleClick(event) {
+        if (this.clickable() && !this.disabled()) {
+            this.onClick.emit();
+        }
+    }
+    handleDelete(event) {
+        event.stopPropagation();
+        this.onDelete.emit();
+    }
+    handleKeydown(event) {
+        if (event.key === 'Enter') {
+            this.handleClick(event);
+        }
+        if ((event.key === 'Delete' || event.key === 'Backspace') &&
+            this.deleteIcon()) {
+            this.handleDelete(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ChipComponent, isStandalone: true, selector: "ls-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, deleteIcon: { classPropertyName: "deleteIcon", publicName: "deleteIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onDelete: "onDelete" }, ngImport: i0, template: `
+    <span
+      [class]="chipClasses()"
+      [attr.role]="clickable() ? 'button' : null"
+      [attr.tabindex]="clickable() && !disabled() ? 0 : null"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      (click)="handleClick($event)"
+      (keydown)="handleKeydown($event)">
+
+      @if (avatar()) {
+        <img
+          class="chip-avatar"
+          [src]="avatar()"
+          [alt]="label()"
+          aria-hidden="true" />
+      } @else if (icon()) {
+        <span
+          class="chip-icon"
+          [innerHTML]="sanitizedIcon()"
+          aria-hidden="true"></span>
+      }
+
+      <span class="chip-label">{{ label() }}</span>
+
+      @if (deleteIcon() && !disabled()) {
+        <button
+          class="chip-delete"
+          aria-label="Remove"
+          tabindex="-1"
+          (click)="handleDelete($event)">
+          <svg
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="chip-delete-svg">
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+          </svg>
+        </button>
+      }
+    </span>
+  `, isInline: true, styles: [":host{display:contents}.chip{display:inline-flex;align-items:center;border-radius:var(--ls-border-radius-full);font-weight:500;white-space:nowrap;vertical-align:middle;outline:none;transition:background-color .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none}.chip-medium{height:32px;padding:0 12px;font-size:.8125rem;line-height:32px;gap:6px}.chip-small{height:24px;padding:0 8px;font-size:.75rem;line-height:24px;gap:4px}.chip-filled.chip-default{background-color:#e0e0e0;color:#000000de}.chip-filled.chip-primary{background-color:var(--ls-color-primary);color:#fff}.chip-filled.chip-secondary{background-color:var(--ls-color-secondary);color:#fff}.chip-filled.chip-success{background-color:var(--ls-color-success);color:#fff}.chip-filled.chip-warning{background-color:var(--ls-color-warning);color:#fff}.chip-filled.chip-error{background-color:var(--ls-color-danger);color:#fff}.chip-filled.chip-info{background-color:var(--ls-color-info);color:#fff}.chip-outlined.chip-default{background-color:transparent;border:1px solid #bdbdbd;color:#000000de}.chip-outlined.chip-primary{background-color:transparent;border:1px solid var(--ls-color-primary);color:var(--ls-color-primary)}.chip-outlined.chip-secondary{background-color:transparent;border:1px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.chip-outlined.chip-success{background-color:transparent;border:1px solid var(--ls-color-success);color:var(--ls-color-success)}.chip-outlined.chip-warning{background-color:transparent;border:1px solid var(--ls-color-warning);color:var(--ls-color-warning)}.chip-outlined.chip-error{background-color:transparent;border:1px solid var(--ls-color-danger);color:var(--ls-color-danger)}.chip-outlined.chip-info{background-color:transparent;border:1px solid var(--ls-color-info);color:var(--ls-color-info)}.chip-clickable{cursor:pointer}.chip-clickable:hover{box-shadow:0 2px 4px #0000001a}.chip-clickable.chip-filled.chip-default:hover{background-color:#d5d5d5}.chip-clickable.chip-filled.chip-primary:hover,.chip-clickable.chip-filled.chip-secondary:hover,.chip-clickable.chip-filled.chip-success:hover,.chip-clickable.chip-filled.chip-warning:hover,.chip-clickable.chip-filled.chip-error:hover,.chip-clickable.chip-filled.chip-info:hover{filter:brightness(.9)}.chip-clickable.chip-outlined:hover{background-color:#0000000a}.chip-disabled{opacity:.6;pointer-events:none;cursor:default}.chip-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;margin-left:-4px}.chip-small .chip-avatar{width:18px;height:18px;margin-left:-2px}.chip-icon{display:inline-flex;align-items:center;flex-shrink:0}.chip-icon>svg{width:18px;height:18px}.chip-small .chip-icon>svg{width:16px;height:16px}.chip-delete{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;border:none;background:transparent;color:inherit;opacity:.7;padding:0;margin-right:-4px;transition:opacity .15s ease}.chip-delete:hover{opacity:1}.chip-delete-svg{width:18px;height:18px}.chip-small .chip-delete-svg{width:16px;height:16px}body.dark .chip-filled.chip-default{background-color:#4a4a4a;color:#e0e0e0}body.dark .chip-clickable.chip-filled.chip-default:hover{background-color:#5a5a5a}body.dark .chip-outlined.chip-default{border-color:#616161;color:#e0e0e0}body.dark .chip-clickable.chip-outlined:hover{background-color:#ffffff14}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-chip', standalone: true, template: `
+    <span
+      [class]="chipClasses()"
+      [attr.role]="clickable() ? 'button' : null"
+      [attr.tabindex]="clickable() && !disabled() ? 0 : null"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      (click)="handleClick($event)"
+      (keydown)="handleKeydown($event)">
+
+      @if (avatar()) {
+        <img
+          class="chip-avatar"
+          [src]="avatar()"
+          [alt]="label()"
+          aria-hidden="true" />
+      } @else if (icon()) {
+        <span
+          class="chip-icon"
+          [innerHTML]="sanitizedIcon()"
+          aria-hidden="true"></span>
+      }
+
+      <span class="chip-label">{{ label() }}</span>
+
+      @if (deleteIcon() && !disabled()) {
+        <button
+          class="chip-delete"
+          aria-label="Remove"
+          tabindex="-1"
+          (click)="handleDelete($event)">
+          <svg
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="chip-delete-svg">
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+          </svg>
+        </button>
+      }
+    </span>
+  `, styles: [":host{display:contents}.chip{display:inline-flex;align-items:center;border-radius:var(--ls-border-radius-full);font-weight:500;white-space:nowrap;vertical-align:middle;outline:none;transition:background-color .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none}.chip-medium{height:32px;padding:0 12px;font-size:.8125rem;line-height:32px;gap:6px}.chip-small{height:24px;padding:0 8px;font-size:.75rem;line-height:24px;gap:4px}.chip-filled.chip-default{background-color:#e0e0e0;color:#000000de}.chip-filled.chip-primary{background-color:var(--ls-color-primary);color:#fff}.chip-filled.chip-secondary{background-color:var(--ls-color-secondary);color:#fff}.chip-filled.chip-success{background-color:var(--ls-color-success);color:#fff}.chip-filled.chip-warning{background-color:var(--ls-color-warning);color:#fff}.chip-filled.chip-error{background-color:var(--ls-color-danger);color:#fff}.chip-filled.chip-info{background-color:var(--ls-color-info);color:#fff}.chip-outlined.chip-default{background-color:transparent;border:1px solid #bdbdbd;color:#000000de}.chip-outlined.chip-primary{background-color:transparent;border:1px solid var(--ls-color-primary);color:var(--ls-color-primary)}.chip-outlined.chip-secondary{background-color:transparent;border:1px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.chip-outlined.chip-success{background-color:transparent;border:1px solid var(--ls-color-success);color:var(--ls-color-success)}.chip-outlined.chip-warning{background-color:transparent;border:1px solid var(--ls-color-warning);color:var(--ls-color-warning)}.chip-outlined.chip-error{background-color:transparent;border:1px solid var(--ls-color-danger);color:var(--ls-color-danger)}.chip-outlined.chip-info{background-color:transparent;border:1px solid var(--ls-color-info);color:var(--ls-color-info)}.chip-clickable{cursor:pointer}.chip-clickable:hover{box-shadow:0 2px 4px #0000001a}.chip-clickable.chip-filled.chip-default:hover{background-color:#d5d5d5}.chip-clickable.chip-filled.chip-primary:hover,.chip-clickable.chip-filled.chip-secondary:hover,.chip-clickable.chip-filled.chip-success:hover,.chip-clickable.chip-filled.chip-warning:hover,.chip-clickable.chip-filled.chip-error:hover,.chip-clickable.chip-filled.chip-info:hover{filter:brightness(.9)}.chip-clickable.chip-outlined:hover{background-color:#0000000a}.chip-disabled{opacity:.6;pointer-events:none;cursor:default}.chip-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;margin-left:-4px}.chip-small .chip-avatar{width:18px;height:18px;margin-left:-2px}.chip-icon{display:inline-flex;align-items:center;flex-shrink:0}.chip-icon>svg{width:18px;height:18px}.chip-small .chip-icon>svg{width:16px;height:16px}.chip-delete{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;border:none;background:transparent;color:inherit;opacity:.7;padding:0;margin-right:-4px;transition:opacity .15s ease}.chip-delete:hover{opacity:1}.chip-delete-svg{width:18px;height:18px}.chip-small .chip-delete-svg{width:16px;height:16px}body.dark .chip-filled.chip-default{background-color:#4a4a4a;color:#e0e0e0}body.dark .chip-clickable.chip-filled.chip-default:hover{background-color:#5a5a5a}body.dark .chip-outlined.chip-default{border-color:#616161;color:#e0e0e0}body.dark .chip-clickable.chip-outlined:hover{background-color:#ffffff14}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], deleteIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onDelete: [{ type: i0.Output, args: ["onDelete"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BadgeComponent, ChipComponent };
+//# sourceMappingURL=lumston-ds-angular-src-data-display.mjs.map

package/fesm2022/lumston-ds-angular-src-data-display.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lumston-ds-angular-src-data-display.mjs","sources":["../../../../libs/ds-angular/src/data-display/badge/badge.component.ts","../../../../libs/ds-angular/src/data-display/chip/chip.component.ts","../../../../libs/ds-angular/src/data-display/lumston-ds-angular-src-data-display.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  input,\r\n} from '@angular/core';\r\n\r\nexport type BadgeSeverity =\r\n  | 'primary'\r\n  | 'secondary'\r\n  | 'success'\r\n  | 'warning'\r\n  | 'error'\r\n  | 'info';\r\nexport type BadgeVariant = 'solid' | 'outlined' | 'dot';\r\nexport type BadgePosition =\r\n  | 'top-right'\r\n  | 'top-left'\r\n  | 'bottom-right'\r\n  | 'bottom-left';\r\nexport type BadgeOverlap = 'circular' | 'rectangular';\r\n\r\n@Component({\r\n  selector: 'ls-badge',\r\n  standalone: true,\r\n  template: `\r\n    <div class=\"badge-wrapper\">\r\n      <ng-content />\r\n      @if (!isHidden()) {\r\n        <span\r\n          [class]=\"badgeClasses()\"\r\n          role=\"status\"\r\n          [attr.aria-label]=\"ariaLabelText()\">\r\n          @if (variant() !== 'dot') {\r\n            {{ formattedContent() }}\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  `,\r\n  styleUrls: ['./badge.component.css'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class BadgeComponent {\r\n  readonly badgeContent =\r\n    input<string | number | undefined>(undefined);\r\n  readonly max = input<number>(99);\r\n  readonly severity = input<BadgeSeverity>('error');\r\n  readonly variant = input<BadgeVariant>('solid');\r\n  readonly badgePosition =\r\n    input<BadgePosition>('top-right');\r\n  readonly overlap = input<BadgeOverlap>('rectangular');\r\n  readonly isHidden = input<boolean>(false);\r\n\r\n  readonly formattedContent = computed(() => {\r\n    const raw = this.badgeContent();\r\n    if (raw === undefined || raw === null) return '';\r\n    if (typeof raw === 'number') {\r\n      return raw > this.max()\r\n        ? `${this.max()}+`\r\n        : String(raw);\r\n    }\r\n    return String(raw);\r\n  });\r\n\r\n  readonly badgeClasses = computed(() => {\r\n    const classes = ['badge'];\r\n    classes.push(`badge-${this.severity()}`);\r\n    classes.push(`badge-${this.variant()}`);\r\n    classes.push(`badge-${this.badgePosition()}`);\r\n    classes.push(`badge-overlap-${this.overlap()}`);\r\n    return classes.join(' ');\r\n  });\r\n\r\n  readonly ariaLabelText = computed(() => {\r\n    if (this.variant() === 'dot') {\r\n      return 'status indicator';\r\n    }\r\n    const formatted = this.formattedContent();\r\n    return formatted || 'badge';\r\n  });\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n} from '@angular/core';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\n\r\nexport type ChipVariant = 'filled' | 'outlined';\r\nexport type ChipColor =\r\n  | 'default'\r\n  | 'primary'\r\n  | 'secondary'\r\n  | 'error'\r\n  | 'info'\r\n  | 'success'\r\n  | 'warning';\r\nexport type ChipSize = 'small' | 'medium';\r\n\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ls-chip',\r\n  standalone: true,\r\n  styleUrls: ['./chip.component.css'],\r\n  template: `\r\n    <span\r\n      [class]=\"chipClasses()\"\r\n      [attr.role]=\"clickable() ? 'button' : null\"\r\n      [attr.tabindex]=\"clickable() && !disabled() ? 0 : null\"\r\n      [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n      (click)=\"handleClick($event)\"\r\n      (keydown)=\"handleKeydown($event)\">\r\n\r\n      @if (avatar()) {\r\n        <img\r\n          class=\"chip-avatar\"\r\n          [src]=\"avatar()\"\r\n          [alt]=\"label()\"\r\n          aria-hidden=\"true\" />\r\n      } @else if (icon()) {\r\n        <span\r\n          class=\"chip-icon\"\r\n          [innerHTML]=\"sanitizedIcon()\"\r\n          aria-hidden=\"true\"></span>\r\n      }\r\n\r\n      <span class=\"chip-label\">{{ label() }}</span>\r\n\r\n      @if (deleteIcon() && !disabled()) {\r\n        <button\r\n          class=\"chip-delete\"\r\n          aria-label=\"Remove\"\r\n          tabindex=\"-1\"\r\n          (click)=\"handleDelete($event)\">\r\n          <svg\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"currentColor\"\r\n            class=\"chip-delete-svg\">\r\n            <path\r\n              d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </span>\r\n  `,\r\n})\r\nexport class ChipComponent {\r\n  private readonly _sanitizer = inject(DomSanitizer);\r\n\r\n  readonly label = input<string>('');\r\n  readonly variant = input<ChipVariant>('filled');\r\n  readonly color = input<ChipColor>('default');\r\n  readonly size = input<ChipSize>('medium');\r\n  readonly icon = input<string | undefined>(undefined);\r\n  readonly avatar = input<string | undefined>(undefined);\r\n  readonly deleteIcon = input<boolean>(false);\r\n  readonly disabled = input<boolean>(false);\r\n  readonly clickable = input<boolean>(false);\r\n\r\n  readonly onClick = output<void>();\r\n  readonly onDelete = output<void>();\r\n\r\n  readonly sanitizedIcon = computed(() =>\r\n    this._sanitizer.bypassSecurityTrustHtml(this.icon() ?? ''),\r\n  );\r\n\r\n  readonly chipClasses = computed(() => {\r\n    const classes = ['chip'];\r\n    classes.push(`chip-${this.variant()}`);\r\n    classes.push(`chip-${this.color()}`);\r\n    classes.push(`chip-${this.size()}`);\r\n    if (this.clickable()) classes.push('chip-clickable');\r\n    if (this.disabled()) classes.push('chip-disabled');\r\n    return classes.join(' ');\r\n  });\r\n\r\n  handleClick(event: MouseEvent) {\r\n    if (this.clickable() && !this.disabled()) {\r\n      this.onClick.emit();\r\n    }\r\n  }\r\n\r\n  handleDelete(event: MouseEvent) {\r\n    event.stopPropagation();\r\n    this.onDelete.emit();\r\n  }\r\n\r\n  handleKeydown(event: KeyboardEvent) {\r\n    if (event.key === 'Enter') {\r\n      this.handleClick(event as unknown as MouseEvent);\r\n    }\r\n    if (\r\n      (event.key === 'Delete' || event.key === 'Backspace') &&\r\n      this.deleteIcon()\r\n    ) {\r\n      this.handleDelete(event as unknown as MouseEvent);\r\n    }\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/lumston-ds-angular-src-dropdown.mjs

@@ -0,0 +1,94 @@
+import * as i0 from '@angular/core';
+import { HostListener, ViewChild, Input, Component, inject, TemplateRef, Directive } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class DropdownComponent {
+    constructor() {
+        this.contentClass = '';
+        this.isOpen = false;
+        this.isAnimating = false;
+    }
+    toggle() {
+        if (this.isOpen) {
+            this.isAnimating = true;
+            this.isOpen = false;
+        }
+        else {
+            this.isOpen = true;
+        }
+    }
+    close() {
+        if (this.isOpen) {
+            this.isAnimating = true;
+            this.isOpen = false;
+        }
+    }
+    onAnimationEnd() {
+        this.isAnimating = false;
+    }
+    onDocumentClick(event) {
+        if (this.dropdown && !this.dropdown.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: DropdownComponent, isStandalone: true, selector: "ls-dropdown", inputs: { contentClass: "contentClass" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: `
+        <div class="dropdown" #dropdown>
+            <div (click)="toggle()">
+                <ng-content select="[dropdownButton]"></ng-content>
+            </div>
+            @if (isOpen || isAnimating) {
+                <div class="dropdown-content"
+                     [ngClass]="[contentClass, isOpen ? 'toggle-enter' : 'toggle-leave']"
+                     (animationend)="onAnimationEnd()">
+                    <ng-content select="[dropdownContent]"></ng-content>
+                </div>
+            }
+        </div>
+    `, isInline: true, styles: [":host{display:block}.dropdown{position:relative}.dropdown-content{position:absolute;z-index:50}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], selector: 'ls-dropdown', template: `
+        <div class="dropdown" #dropdown>
+            <div (click)="toggle()">
+                <ng-content select="[dropdownButton]"></ng-content>
+            </div>
+            @if (isOpen || isAnimating) {
+                <div class="dropdown-content"
+                     [ngClass]="[contentClass, isOpen ? 'toggle-enter' : 'toggle-leave']"
+                     (animationend)="onAnimationEnd()">
+                    <ng-content select="[dropdownContent]"></ng-content>
+                </div>
+            }
+        </div>
+    `, styles: [":host{display:block}.dropdown{position:relative}.dropdown-content{position:absolute;z-index:50}\n"] }]
+        }], propDecorators: { contentClass: [{
+                type: Input
+            }], dropdown: [{
+                type: ViewChild,
+                args: ['dropdown']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class LsDropdownContentDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LsDropdownContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: LsDropdownContentDirective, isStandalone: true, selector: "[lsDropdownContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LsDropdownContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[lsDropdownContent]', standalone: true }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownComponent, LsDropdownContentDirective };
+//# sourceMappingURL=lumston-ds-angular-src-dropdown.mjs.map

package/fesm2022/lumston-ds-angular-src-dropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lumston-ds-angular-src-dropdown.mjs","sources":["../../../../libs/ds-angular/src/dropdown/dropdown.component.ts","../../../../libs/ds-angular/src/dropdown/dropdown-content.directive.ts","../../../../libs/ds-angular/src/dropdown/lumston-ds-angular-src-dropdown.ts"],"sourcesContent":["import { Component, ElementRef, HostListener, Input, ViewChild } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@Component({\r\n    standalone: true,\r\n    imports: [CommonModule],\r\n    selector: 'ls-dropdown',\r\n    template: `\r\n        <div class=\"dropdown\" #dropdown>\r\n            <div (click)=\"toggle()\">\r\n                <ng-content select=\"[dropdownButton]\"></ng-content>\r\n            </div>\r\n            @if (isOpen || isAnimating) {\r\n                <div class=\"dropdown-content\"\r\n                     [ngClass]=\"[contentClass, isOpen ? 'toggle-enter' : 'toggle-leave']\"\r\n                     (animationend)=\"onAnimationEnd()\">\r\n                    <ng-content select=\"[dropdownContent]\"></ng-content>\r\n                </div>\r\n            }\r\n        </div>\r\n    `,\r\n    styleUrls: ['./dropdown.component.css']\r\n})\r\nexport class DropdownComponent {\r\n    @Input() contentClass: string = '';\r\n    @ViewChild('dropdown') dropdown!: ElementRef;\r\n    isOpen = false;\r\n    isAnimating = false;\r\n\r\n    toggle() {\r\n        if (this.isOpen) {\r\n            this.isAnimating = true;\r\n            this.isOpen = false;\r\n        } else {\r\n            this.isOpen = true;\r\n        }\r\n    }\r\n\r\n    close() {\r\n        if (this.isOpen) {\r\n            this.isAnimating = true;\r\n            this.isOpen = false;\r\n        }\r\n    }\r\n\r\n    onAnimationEnd() {\r\n        this.isAnimating = false;\r\n    }\r\n\r\n    @HostListener('document:click', ['$event'])\r\n    onDocumentClick(event: MouseEvent) {\r\n        if (this.dropdown && !this.dropdown.nativeElement.contains(event.target)) {\r\n            this.close();\r\n        }\r\n    }\r\n}\r\n","import { Directive, inject, TemplateRef } from '@angular/core';\r\n\r\n@Directive({ selector: '[lsDropdownContent]', standalone: true })\r\nexport class LsDropdownContentDirective {\r\n    readonly templateRef = inject(TemplateRef);\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}