@gnggln/ng-ui-system 1.0.0-alpha.0

package/esm2022/lib/components/button/button.component.mjs

@@ -0,0 +1,164 @@
+import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { LucideAngularModule } from 'lucide-angular';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/tooltip";
+import * as i2 from "lucide-angular";
+/** @internal Size-to-icon-pixel mapping for consistent icon sizing. */
+const ICON_SIZE_MAP = {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 22,
+};
+/**
+ * Standalone button component with design-token-driven theming,
+ * variant/size system, Lucide icon support, loading states, and WCAG 2.1 AA accessibility.
+ *
+ * Uses native `<button>` click events — listen with `(click)` on the host element.
+ *
+ * @selector ui-button
+ *
+ * @example
+ * ```html
+ * <!-- Basic -->
+ * <ui-button label="Save" variant="primary" icon="save" (click)="save()" />
+ *
+ * <!-- Loading -->
+ * <ui-button label="Submitting..." variant="primary" [loading]="true" />
+ *
+ * <!-- Icon-only -->
+ * <ui-button icon="trash-2" variant="warn" ariaLabel="Delete item" (click)="delete()" />
+ * ```
+ */
+export class UiButtonComponent {
+    constructor() {
+        /** Button label text. */
+        this.label = '';
+        /** Tooltip text shown on hover (uses Angular Material tooltip). */
+        this.tooltip = '';
+        /** Visual style variant. */
+        this.variant = 'primary';
+        /** Size variant. */
+        this.size = 'md';
+        /** Icon position relative to the label. */
+        this.iconPosition = 'trailing';
+        /** Whether the button is in a loading state. Disables interaction and shows spinner. */
+        this.loading = false;
+        /** Whether the button is disabled. */
+        this.disabled = false;
+        /** Expand button to full container width. */
+        this.fullWidth = false;
+        /** HTML button type attribute. */
+        this.type = 'button';
+    }
+    /** Computed icon pixel size based on button size. */
+    get iconSize() {
+        return ICON_SIZE_MAP[this.size] ?? 18;
+    }
+    /** Assembled CSS class string for the native button element. */
+    get buttonClasses() {
+        return [
+            'ui-button',
+            `ui-button--${this.variant}`,
+            `ui-button--${this.size}`,
+            this.loading ? 'ui-button--loading' : '',
+            this.fullWidth ? 'ui-button--full-width' : '',
+            !this.label && this.icon ? 'ui-button--icon-only' : '',
+            this.customClass ?? '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiButtonComponent, isStandalone: true, selector: "ui-button", inputs: { label: "label", tooltip: "tooltip", variant: "variant", size: "size", icon: "icon", iconPosition: "iconPosition", loading: "loading", disabled: "disabled", fullWidth: "fullWidth", type: "type", ariaLabel: "ariaLabel", customClass: "customClass" }, host: { properties: { "class.ui-button-host--full-width": "fullWidth" }, classAttribute: "ui-button-host" }, ngImport: i0, template: `
+    <button
+      [type]="type"
+      [class]="buttonClasses"
+      [disabled]="disabled || loading"
+      [attr.aria-label]="ariaLabel || null"
+      [attr.aria-busy]="loading || null"
+      [matTooltip]="tooltip"
+    >
+      <span class="ui-button__content" [class.ui-button__content--hidden]="loading">
+        @if (icon && iconPosition === 'leading') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+        @if (label) {
+          <span class="ui-button__label">{{ label }}</span>
+        }
+        <ng-content />
+        @if (icon && iconPosition === 'trailing') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+      </span>
+      @if (loading) {
+        <span class="ui-button__spinner-overlay">
+          <span class="ui-button__spinner" aria-hidden="true"></span>
+          <span class="ui-button__sr-only">Loading</span>
+        </span>
+      }
+    </button>
+  `, isInline: true, styles: [".ui-button-host{display:inline-flex}.ui-button-host--full-width{display:flex;width:100%}.ui-button{appearance:none;border:none;cursor:pointer;font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-medium);letter-spacing:.01em;position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ui-radius-md);white-space:nowrap;text-decoration:none;overflow:hidden;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast),border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),opacity var(--ui-transition-fast)}.ui-button:focus{outline:none}.ui-button:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-button:disabled{opacity:.5;cursor:not-allowed}.ui-button--full-width{width:100%}.ui-button--xs{height:28px;padding:0 var(--ui-spacing-2);font-size:var(--ui-font-size-xs);border-radius:var(--ui-radius-sm);gap:var(--ui-spacing-1)}.ui-button--sm{height:32px;padding:0 var(--ui-spacing-3);font-size:var(--ui-font-size-xs);gap:6px}.ui-button--md{height:36px;padding:0 var(--ui-spacing-4);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--lg{height:40px;padding:0 var(--ui-spacing-5);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--xl{height:48px;padding:0 var(--ui-spacing-6);font-size:var(--ui-font-size-md);gap:var(--ui-spacing-3)}.ui-button--icon-only.ui-button--xs{width:28px;padding:0}.ui-button--icon-only.ui-button--sm{width:32px;padding:0}.ui-button--icon-only.ui-button--md{width:36px;padding:0}.ui-button--icon-only.ui-button--lg{width:40px;padding:0}.ui-button--icon-only.ui-button--xl{width:48px;padding:0}.ui-button--primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-button--primary:hover:not(:disabled){background:var(--ui-color-primary-hover)}.ui-button--primary:active:not(:disabled){background:var(--ui-color-primary-active)}.ui-button--accent{background:var(--ui-color-accent);color:var(--ui-color-accent-contrast)}.ui-button--accent:hover:not(:disabled){background:var(--ui-color-accent-hover)}.ui-button--accent:active:not(:disabled){background:var(--ui-color-accent-active)}.ui-button--warn{background:var(--ui-color-warn);color:var(--ui-color-warn-contrast)}.ui-button--warn:hover:not(:disabled){background:var(--ui-color-warn-hover)}.ui-button--warn:active:not(:disabled){background:var(--ui-color-warn-active)}.ui-button--neutral{background:var(--ui-color-neutral-200);color:var(--ui-color-text)}.ui-button--neutral:hover:not(:disabled){background:var(--ui-color-neutral-300)}.ui-button--neutral:active:not(:disabled){background:var(--ui-color-neutral-400);color:var(--ui-color-text-inverse)}.ui-button--ghost{background:transparent;color:var(--ui-color-text-secondary)}.ui-button--ghost:hover:not(:disabled){background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-button--ghost:active:not(:disabled){background:var(--ui-color-neutral-200)}.ui-button--outline{background:transparent;color:var(--ui-color-primary);border:1.5px solid var(--ui-color-border-strong)}.ui-button--outline:hover:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary)}.ui-button--outline:active:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary-hover)}.ui-button--loading{cursor:wait;pointer-events:none}.ui-button__content{display:inline-flex;align-items:center;gap:inherit;transition:visibility var(--ui-transition-fast)}.ui-button__content--hidden{visibility:hidden}.ui-button__label{line-height:1}.ui-button__spinner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ui-button__spinner{width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-button-spin .6s linear infinite}@keyframes ui-button-spin{to{transform:rotate(360deg)}}.ui-button__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-button', standalone: true, imports: [MatTooltipModule, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ui-button-host',
+                        '[class.ui-button-host--full-width]': 'fullWidth',
+                    }, template: `
+    <button
+      [type]="type"
+      [class]="buttonClasses"
+      [disabled]="disabled || loading"
+      [attr.aria-label]="ariaLabel || null"
+      [attr.aria-busy]="loading || null"
+      [matTooltip]="tooltip"
+    >
+      <span class="ui-button__content" [class.ui-button__content--hidden]="loading">
+        @if (icon && iconPosition === 'leading') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+        @if (label) {
+          <span class="ui-button__label">{{ label }}</span>
+        }
+        <ng-content />
+        @if (icon && iconPosition === 'trailing') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+      </span>
+      @if (loading) {
+        <span class="ui-button__spinner-overlay">
+          <span class="ui-button__spinner" aria-hidden="true"></span>
+          <span class="ui-button__sr-only">Loading</span>
+        </span>
+      }
+    </button>
+  `, styles: [".ui-button-host{display:inline-flex}.ui-button-host--full-width{display:flex;width:100%}.ui-button{appearance:none;border:none;cursor:pointer;font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-medium);letter-spacing:.01em;position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ui-radius-md);white-space:nowrap;text-decoration:none;overflow:hidden;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast),border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),opacity var(--ui-transition-fast)}.ui-button:focus{outline:none}.ui-button:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-button:disabled{opacity:.5;cursor:not-allowed}.ui-button--full-width{width:100%}.ui-button--xs{height:28px;padding:0 var(--ui-spacing-2);font-size:var(--ui-font-size-xs);border-radius:var(--ui-radius-sm);gap:var(--ui-spacing-1)}.ui-button--sm{height:32px;padding:0 var(--ui-spacing-3);font-size:var(--ui-font-size-xs);gap:6px}.ui-button--md{height:36px;padding:0 var(--ui-spacing-4);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--lg{height:40px;padding:0 var(--ui-spacing-5);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--xl{height:48px;padding:0 var(--ui-spacing-6);font-size:var(--ui-font-size-md);gap:var(--ui-spacing-3)}.ui-button--icon-only.ui-button--xs{width:28px;padding:0}.ui-button--icon-only.ui-button--sm{width:32px;padding:0}.ui-button--icon-only.ui-button--md{width:36px;padding:0}.ui-button--icon-only.ui-button--lg{width:40px;padding:0}.ui-button--icon-only.ui-button--xl{width:48px;padding:0}.ui-button--primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-button--primary:hover:not(:disabled){background:var(--ui-color-primary-hover)}.ui-button--primary:active:not(:disabled){background:var(--ui-color-primary-active)}.ui-button--accent{background:var(--ui-color-accent);color:var(--ui-color-accent-contrast)}.ui-button--accent:hover:not(:disabled){background:var(--ui-color-accent-hover)}.ui-button--accent:active:not(:disabled){background:var(--ui-color-accent-active)}.ui-button--warn{background:var(--ui-color-warn);color:var(--ui-color-warn-contrast)}.ui-button--warn:hover:not(:disabled){background:var(--ui-color-warn-hover)}.ui-button--warn:active:not(:disabled){background:var(--ui-color-warn-active)}.ui-button--neutral{background:var(--ui-color-neutral-200);color:var(--ui-color-text)}.ui-button--neutral:hover:not(:disabled){background:var(--ui-color-neutral-300)}.ui-button--neutral:active:not(:disabled){background:var(--ui-color-neutral-400);color:var(--ui-color-text-inverse)}.ui-button--ghost{background:transparent;color:var(--ui-color-text-secondary)}.ui-button--ghost:hover:not(:disabled){background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-button--ghost:active:not(:disabled){background:var(--ui-color-neutral-200)}.ui-button--outline{background:transparent;color:var(--ui-color-primary);border:1.5px solid var(--ui-color-border-strong)}.ui-button--outline:hover:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary)}.ui-button--outline:active:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary-hover)}.ui-button--loading{cursor:wait;pointer-events:none}.ui-button__content{display:inline-flex;align-items:center;gap:inherit;transition:visibility var(--ui-transition-fast)}.ui-button__content--hidden{visibility:hidden}.ui-button__label{line-height:1}.ui-button__spinner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ui-button__spinner{width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-button-spin .6s linear infinite}@keyframes ui-button-spin{to{transform:rotate(360deg)}}.ui-button__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL25nLXVpLXN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsdUJBQXVCLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0YsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDN0QsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUFJckQsdUVBQXVFO0FBQ3ZFLE1BQU0sYUFBYSxHQUEyQjtJQUM1QyxFQUFFLEVBQUUsRUFBRTtJQUNOLEVBQUUsRUFBRSxFQUFFO0lBQ04sRUFBRSxFQUFFLEVBQUU7SUFDTixFQUFFLEVBQUUsRUFBRTtJQUNOLEVBQUUsRUFBRSxFQUFFO0NBQ1AsQ0FBQztBQUVGOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBbUJHO0FBMENILE1BQU0sT0FBTyxpQkFBaUI7SUF6QzlCO1FBMENFLHlCQUF5QjtRQUNoQixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBRXBCLG1FQUFtRTtRQUMxRCxZQUFPLEdBQUcsRUFBRSxDQUFDO1FBRXRCLDRCQUE0QjtRQUNuQixZQUFPLEdBQWMsU0FBUyxDQUFDO1FBRXhDLG9CQUFvQjtRQUNYLFNBQUksR0FBVyxJQUFJLENBQUM7UUFLN0IsMkNBQTJDO1FBQ2xDLGlCQUFZLEdBQW1CLFVBQVUsQ0FBQztRQUVuRCx3RkFBd0Y7UUFDL0UsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUV6QixzQ0FBc0M7UUFDN0IsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUUxQiw2Q0FBNkM7UUFDcEMsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUUzQixrQ0FBa0M7UUFDekIsU0FBSSxHQUFrQyxRQUFRLENBQUM7S0EyQnpEO0lBbkJDLHFEQUFxRDtJQUNyRCxJQUFJLFFBQVE7UUFDVixPQUFPLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3hDLENBQUM7SUFFRCxnRUFBZ0U7SUFDaEUsSUFBSSxhQUFhO1FBQ2YsT0FBTztZQUNMLFdBQVc7WUFDWCxjQUFjLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDNUIsY0FBYyxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ3pCLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLG9CQUFvQixDQUFDLENBQUMsQ0FBQyxFQUFFO1lBQ3hDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLHVCQUF1QixDQUFDLENBQUMsQ0FBQyxFQUFFO1lBQzdDLENBQUMsSUFBSSxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUN0RCxJQUFJLENBQUMsV0FBVyxJQUFJLEVBQUU7U0FDdkI7YUFDRSxNQUFNLENBQUMsT0FBTyxDQUFDO2FBQ2YsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ2YsQ0FBQzsrR0F2RFUsaUJBQWlCO21HQUFqQixpQkFBaUIsb2JBL0JsQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCVCxpbUlBbkNTLGdCQUFnQiw0VEFBRSxtQkFBbUI7OzRGQXNDcEMsaUJBQWlCO2tCQXpDN0IsU0FBUzsrQkFDRSxXQUFXLGNBQ1QsSUFBSSxXQUNQLENBQUMsZ0JBQWdCLEVBQUUsbUJBQW1CLENBQUMsbUJBQy9CLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUksUUFDL0I7d0JBQ0osS0FBSyxFQUFFLGdCQUFnQjt3QkFDdkIsb0NBQW9DLEVBQUUsV0FBVztxQkFDbEQsWUFDUzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCVDs4QkFLUSxLQUFLO3NCQUFiLEtBQUs7Z0JBR0csT0FBTztzQkFBZixLQUFLO2dCQUdHLE9BQU87c0JBQWYsS0FBSztnQkFHRyxJQUFJO3NCQUFaLEtBQUs7Z0JBR0csSUFBSTtzQkFBWixLQUFLO2dCQUdHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBR0csT0FBTztzQkFBZixLQUFLO2dCQUdHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBR0csU0FBUztzQkFBakIsS0FBSztnQkFHRyxJQUFJO3NCQUFaLEtBQUs7Z0JBR0csU0FBUztzQkFBakIsS0FBSztnQkFHRyxXQUFXO3NCQUFuQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE1hdFRvb2x0aXBNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC90b29sdGlwJztcclxuaW1wb3J0IHsgTHVjaWRlQW5ndWxhck1vZHVsZSB9IGZyb20gJ2x1Y2lkZS1hbmd1bGFyJztcclxuaW1wb3J0IHsgVWlWYXJpYW50LCBVaVNpemUsIFVpSWNvbk5hbWUgfSBmcm9tICcuLi8uLi9jb3JlL3R5cGVzJztcclxuaW1wb3J0IHsgVWlJY29uUG9zaXRpb24gfSBmcm9tICcuL2J1dHRvbi50eXBlcyc7XHJcblxyXG4vKiogQGludGVybmFsIFNpemUtdG8taWNvbi1waXhlbCBtYXBwaW5nIGZvciBjb25zaXN0ZW50IGljb24gc2l6aW5nLiAqL1xyXG5jb25zdCBJQ09OX1NJWkVfTUFQOiBSZWNvcmQ8VWlTaXplLCBudW1iZXI+ID0ge1xyXG4gIHhzOiAxNCxcclxuICBzbTogMTYsXHJcbiAgbWQ6IDE4LFxyXG4gIGxnOiAyMCxcclxuICB4bDogMjIsXHJcbn07XHJcblxyXG4vKipcclxuICogU3RhbmRhbG9uZSBidXR0b24gY29tcG9uZW50IHdpdGggZGVzaWduLXRva2VuLWRyaXZlbiB0aGVtaW5nLFxyXG4gKiB2YXJpYW50L3NpemUgc3lzdGVtLCBMdWNpZGUgaWNvbiBzdXBwb3J0LCBsb2FkaW5nIHN0YXRlcywgYW5kIFdDQUcgMi4xIEFBIGFjY2Vzc2liaWxpdHkuXHJcbiAqXHJcbiAqIFVzZXMgbmF0aXZlIGA8YnV0dG9uPmAgY2xpY2sgZXZlbnRzIOKAlCBsaXN0ZW4gd2l0aCBgKGNsaWNrKWAgb24gdGhlIGhvc3QgZWxlbWVudC5cclxuICpcclxuICogQHNlbGVjdG9yIHVpLWJ1dHRvblxyXG4gKlxyXG4gKiBAZXhhbXBsZVxyXG4gKiBgYGBodG1sXHJcbiAqIDwhLS0gQmFzaWMgLS0+XHJcbiAqIDx1aS1idXR0b24gbGFiZWw9XCJTYXZlXCIgdmFyaWFudD1cInByaW1hcnlcIiBpY29uPVwic2F2ZVwiIChjbGljayk9XCJzYXZlKClcIiAvPlxyXG4gKlxyXG4gKiA8IS0tIExvYWRpbmcgLS0+XHJcbiAqIDx1aS1idXR0b24gbGFiZWw9XCJTdWJtaXR0aW5nLi4uXCIgdmFyaWFudD1cInByaW1hcnlcIiBbbG9hZGluZ109XCJ0cnVlXCIgLz5cclxuICpcclxuICogPCEtLSBJY29uLW9ubHkgLS0+XHJcbiAqIDx1aS1idXR0b24gaWNvbj1cInRyYXNoLTJcIiB2YXJpYW50PVwid2FyblwiIGFyaWFMYWJlbD1cIkRlbGV0ZSBpdGVtXCIgKGNsaWNrKT1cImRlbGV0ZSgpXCIgLz5cclxuICogYGBgXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3VpLWJ1dHRvbicsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbTWF0VG9vbHRpcE1vZHVsZSwgTHVjaWRlQW5ndWxhck1vZHVsZV0sXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcclxuICBob3N0OiB7XHJcbiAgICBjbGFzczogJ3VpLWJ1dHRvbi1ob3N0JyxcclxuICAgICdbY2xhc3MudWktYnV0dG9uLWhvc3QtLWZ1bGwtd2lkdGhdJzogJ2Z1bGxXaWR0aCcsXHJcbiAgfSxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPGJ1dHRvblxyXG4gICAgICBbdHlwZV09XCJ0eXBlXCJcclxuICAgICAgW2NsYXNzXT1cImJ1dHRvbkNsYXNzZXNcIlxyXG4gICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQgfHwgbG9hZGluZ1wiXHJcbiAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsIHx8IG51bGxcIlxyXG4gICAgICBbYXR0ci5hcmlhLWJ1c3ldPVwibG9hZGluZyB8fCBudWxsXCJcclxuICAgICAgW21hdFRvb2x0aXBdPVwidG9vbHRpcFwiXHJcbiAgICA+XHJcbiAgICAgIDxzcGFuIGNsYXNzPVwidWktYnV0dG9uX19jb250ZW50XCIgW2NsYXNzLnVpLWJ1dHRvbl9fY29udGVudC0taGlkZGVuXT1cImxvYWRpbmdcIj5cclxuICAgICAgICBAaWYgKGljb24gJiYgaWNvblBvc2l0aW9uID09PSAnbGVhZGluZycpIHtcclxuICAgICAgICAgIDxsdWNpZGUtaWNvbiBbbmFtZV09XCJpY29uIVwiIFtzaXplXT1cImljb25TaXplXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCIgLz5cclxuICAgICAgICB9XHJcbiAgICAgICAgQGlmIChsYWJlbCkge1xyXG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJ1aS1idXR0b25fX2xhYmVsXCI+e3sgbGFiZWwgfX08L3NwYW4+XHJcbiAgICAgICAgfVxyXG4gICAgICAgIDxuZy1jb250ZW50IC8+XHJcbiAgICAgICAgQGlmIChpY29uICYmIGljb25Qb3NpdGlvbiA9PT0gJ3RyYWlsaW5nJykge1xyXG4gICAgICAgICAgPGx1Y2lkZS1pY29uIFtuYW1lXT1cImljb24hXCIgW3NpemVdPVwiaWNvblNpemVcIiBhcmlhLWhpZGRlbj1cInRydWVcIiAvPlxyXG4gICAgICAgIH1cclxuICAgICAgPC9zcGFuPlxyXG4gICAgICBAaWYgKGxvYWRpbmcpIHtcclxuICAgICAgICA8c3BhbiBjbGFzcz1cInVpLWJ1dHRvbl9fc3Bpbm5lci1vdmVybGF5XCI+XHJcbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInVpLWJ1dHRvbl9fc3Bpbm5lclwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPjwvc3Bhbj5cclxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwidWktYnV0dG9uX19zci1vbmx5XCI+TG9hZGluZzwvc3Bhbj5cclxuICAgICAgICA8L3NwYW4+XHJcbiAgICAgIH1cclxuICAgIDwvYnV0dG9uPlxyXG4gIGAsXHJcbiAgc3R5bGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuc2NzcycsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBVaUJ1dHRvbkNvbXBvbmVudCB7XHJcbiAgLyoqIEJ1dHRvbiBsYWJlbCB0ZXh0LiAqL1xyXG4gIEBJbnB1dCgpIGxhYmVsID0gJyc7XHJcblxyXG4gIC8qKiBUb29sdGlwIHRleHQgc2hvd24gb24gaG92ZXIgKHVzZXMgQW5ndWxhciBNYXRlcmlhbCB0b29sdGlwKS4gKi9cclxuICBASW5wdXQoKSB0b29sdGlwID0gJyc7XHJcblxyXG4gIC8qKiBWaXN1YWwgc3R5bGUgdmFyaWFudC4gKi9cclxuICBASW5wdXQoKSB2YXJpYW50OiBVaVZhcmlhbnQgPSAncHJpbWFyeSc7XHJcblxyXG4gIC8qKiBTaXplIHZhcmlhbnQuICovXHJcbiAgQElucHV0KCkgc2l6ZTogVWlTaXplID0gJ21kJztcclxuXHJcbiAgLyoqIEx1Y2lkZSBpY29uIG5hbWUuIEBzZWUgaHR0cHM6Ly9sdWNpZGUuZGV2L2ljb25zICovXHJcbiAgQElucHV0KCkgaWNvbj86IFVpSWNvbk5hbWU7XHJcblxyXG4gIC8qKiBJY29uIHBvc2l0aW9uIHJlbGF0aXZlIHRvIHRoZSBsYWJlbC4gKi9cclxuICBASW5wdXQoKSBpY29uUG9zaXRpb246IFVpSWNvblBvc2l0aW9uID0gJ3RyYWlsaW5nJztcclxuXHJcbiAgLyoqIFdoZXRoZXIgdGhlIGJ1dHRvbiBpcyBpbiBhIGxvYWRpbmcgc3RhdGUuIERpc2FibGVzIGludGVyYWN0aW9uIGFuZCBzaG93cyBzcGlubmVyLiAqL1xyXG4gIEBJbnB1dCgpIGxvYWRpbmcgPSBmYWxzZTtcclxuXHJcbiAgLyoqIFdoZXRoZXIgdGhlIGJ1dHRvbiBpcyBkaXNhYmxlZC4gKi9cclxuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xyXG5cclxuICAvKiogRXhwYW5kIGJ1dHRvbiB0byBmdWxsIGNvbnRhaW5lciB3aWR0aC4gKi9cclxuICBASW5wdXQoKSBmdWxsV2lkdGggPSBmYWxzZTtcclxuXHJcbiAgLyoqIEhUTUwgYnV0dG9uIHR5cGUgYXR0cmlidXRlLiAqL1xyXG4gIEBJbnB1dCgpIHR5cGU6ICdidXR0b24nIHwgJ3N1Ym1pdCcgfCAncmVzZXQnID0gJ2J1dHRvbic7XHJcblxyXG4gIC8qKiBBY2Nlc3NpYmxlIGxhYmVsIG92ZXJyaWRlIChyZXF1aXJlZCBmb3IgaWNvbi1vbmx5IGJ1dHRvbnMpLiAqL1xyXG4gIEBJbnB1dCgpIGFyaWFMYWJlbD86IHN0cmluZztcclxuXHJcbiAgLyoqIEFkZGl0aW9uYWwgQ1NTIGNsYXNzIGZvciBlZGdlIGNhc2VzLiAqL1xyXG4gIEBJbnB1dCgpIGN1c3RvbUNsYXNzPzogc3RyaW5nO1xyXG5cclxuICAvKiogQ29tcHV0ZWQgaWNvbiBwaXhlbCBzaXplIGJhc2VkIG9uIGJ1dHRvbiBzaXplLiAqL1xyXG4gIGdldCBpY29uU2l6ZSgpOiBudW1iZXIge1xyXG4gICAgcmV0dXJuIElDT05fU0laRV9NQVBbdGhpcy5zaXplXSA/PyAxODtcclxuICB9XHJcblxyXG4gIC8qKiBBc3NlbWJsZWQgQ1NTIGNsYXNzIHN0cmluZyBmb3IgdGhlIG5hdGl2ZSBidXR0b24gZWxlbWVudC4gKi9cclxuICBnZXQgYnV0dG9uQ2xhc3NlcygpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuIFtcclxuICAgICAgJ3VpLWJ1dHRvbicsXHJcbiAgICAgIGB1aS1idXR0b24tLSR7dGhpcy52YXJpYW50fWAsXHJcbiAgICAgIGB1aS1idXR0b24tLSR7dGhpcy5zaXplfWAsXHJcbiAgICAgIHRoaXMubG9hZGluZyA/ICd1aS1idXR0b24tLWxvYWRpbmcnIDogJycsXHJcbiAgICAgIHRoaXMuZnVsbFdpZHRoID8gJ3VpLWJ1dHRvbi0tZnVsbC13aWR0aCcgOiAnJyxcclxuICAgICAgIXRoaXMubGFiZWwgJiYgdGhpcy5pY29uID8gJ3VpLWJ1dHRvbi0taWNvbi1vbmx5JyA6ICcnLFxyXG4gICAgICB0aGlzLmN1c3RvbUNsYXNzID8/ICcnLFxyXG4gICAgXVxyXG4gICAgICAuZmlsdGVyKEJvb2xlYW4pXHJcbiAgICAgIC5qb2luKCcgJyk7XHJcbiAgfVxyXG59XHJcbiJdfQ==

package/esm2022/lib/components/button/button.types.mjs

@@ -0,0 +1,6 @@
+/**
+ * @module ng-ui-system/button
+ * Types and interfaces for UiButton and UiButtonArea components.
+ */
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLnR5cGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvbmctdWktc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLnR5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7R0FHRyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQG1vZHVsZSBuZy11aS1zeXN0ZW0vYnV0dG9uXG4gKiBUeXBlcyBhbmQgaW50ZXJmYWNlcyBmb3IgVWlCdXR0b24gYW5kIFVpQnV0dG9uQXJlYSBjb21wb25lbnRzLlxuICovXG5cbmltcG9ydCB7IFVpVmFyaWFudCwgVWlTaXplLCBVaUljb25OYW1lIH0gZnJvbSAnLi4vLi4vY29yZS90eXBlcyc7XG5cbi8vIFJlLWV4cG9ydCBmb3IgY29uc3VtZXIgY29udmVuaWVuY2VcbmV4cG9ydCB7IFVpVmFyaWFudCwgVWlTaXplLCBVaUljb25OYW1lIH07XG5cbi8qKlxuICogUG9zaXRpb24gb2YgdGhlIGljb24gcmVsYXRpdmUgdG8gdGhlIGJ1dHRvbiBsYWJlbC5cbiAqL1xuZXhwb3J0IHR5cGUgVWlJY29uUG9zaXRpb24gPSAnbGVhZGluZycgfCAndHJhaWxpbmcnO1xuXG4vKipcbiAqIERlc2NyaXB0b3IgZm9yIGRlY2xhcmF0aXZlIGJ1dHRvbiBjb25maWd1cmF0aW9uIGluIFVpQnV0dG9uQXJlYS5cbiAqXG4gKiBBbGxvd3MgZGVmaW5pbmcgYnV0dG9uIGdyb3VwcyBhcyBkYXRhIHN0cnVjdHVyZXMsIGVuYWJsaW5nXG4gKiBkeW5hbWljIFVJIHVwZGF0ZXMgdGhyb3VnaCBjb25maWd1cmF0aW9uIG1hbmlwdWxhdGlvbi5cbiAqXG4gKiBAdXNhZ2VOb3Rlc1xuICpcbiAqICMjIyBCYXNpYyB1c2FnZVxuICogYGBgdHlwZXNjcmlwdFxuICogY29uc3QgYWN0aW9uczogVWlCdXR0b25EZXNjcmlwdG9yW10gPSBbXG4gKiAgIHsgaWQ6ICdzYXZlJywgbGFiZWw6ICdTYXZlJywgdmFyaWFudDogJ3ByaW1hcnknLCBpY29uOiAnc2F2ZScsIGFjdGlvbjogKCkgPT4gdGhpcy5zYXZlKCkgfSxcbiAqICAgeyBpZDogJ2NhbmNlbCcsIGxhYmVsOiAnQ2FuY2VsJywgdmFyaWFudDogJ291dGxpbmUnLCBhY3Rpb246ICgpID0+IHRoaXMuY2FuY2VsKCkgfSxcbiAqIF07XG4gKiBgYGBcbiAqXG4gKiAjIyMgRHluYW1pYyBsb2FkaW5nIHN0YXRlXG4gKiBgYGB0eXBlc2NyaXB0XG4gKiAvLyBUb2dnbGUgbG9hZGluZyBvbiBhIHNwZWNpZmljIGJ1dHRvbiBieSBtdXRhdGluZyB0aGUgZGVzY3JpcHRvcjpcbiAqIHRoaXMuYWN0aW9uc1swXS5sb2FkaW5nID0gdHJ1ZTtcbiAqXG4gKiAvLyBPciB1c2UgbG9hZGluZ0lkcyBvbiB0aGUgYnV0dG9uIGFyZWE6XG4gKiB0aGlzLmN1cnJlbnRMb2FkaW5nSWRzID0gWydzYXZlJ107XG4gKiBgYGBcbiAqL1xuZXhwb3J0IGludGVyZmFjZSBVaUJ1dHRvbkRlc2NyaXB0b3Ige1xuICAvKiogVW5pcXVlIGlkZW50aWZpZXIgZm9yIHByb2dyYW1tYXRpYyBzdGF0ZSBjb250cm9sIChsb2FkaW5nLCBkaXNhYmxlZCkuICovXG4gIGlkPzogc3RyaW5nO1xuXG4gIC8qKiBCdXR0b24gbGFiZWwgdGV4dC4gKi9cbiAgbGFiZWw6IHN0cmluZztcblxuICAvKiogVG9vbHRpcCB0ZXh0IHNob3duIG9uIGhvdmVyLiAqL1xuICB0b29sdGlwPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBDbGljayBoYW5kbGVyLiBTdXBwb3J0cyBib3RoIHN5bmMgYW5kIGFzeW5jIGNhbGxiYWNrcy5cbiAgICogUmVjZWl2ZXMgdGhlIG5hdGl2ZSBNb3VzZUV2ZW50IGFzIGFyZ3VtZW50LlxuICAgKi9cbiAgYWN0aW9uPzogKGV2ZW50PzogTW91c2VFdmVudCkgPT4gdm9pZCB8IFByb21pc2U8dm9pZD47XG5cbiAgLyoqIEx1Y2lkZSBpY29uIG5hbWUuIEBzZWUgaHR0cHM6Ly9sdWNpZGUuZGV2L2ljb25zICovXG4gIGljb24/OiBVaUljb25OYW1lO1xuXG4gIC8qKiBJY29uIHBvc2l0aW9uIHJlbGF0aXZlIHRvIHRoZSBsYWJlbC4gQGRlZmF1bHQgJ3RyYWlsaW5nJyAqL1xuICBpY29uUG9zaXRpb24/OiBVaUljb25Qb3NpdGlvbjtcblxuICAvKiogVmlzdWFsIHZhcmlhbnQuIEBkZWZhdWx0ICdwcmltYXJ5JyAqL1xuICB2YXJpYW50PzogVWlWYXJpYW50O1xuXG4gIC8qKiBTaXplIHZhcmlhbnQuIEBkZWZhdWx0ICdtZCcgKi9cbiAgc2l6ZT86IFVpU2l6ZTtcblxuICAvKiogTmF2aWdhdGlvbiBVUkwgKEFuZ3VsYXIgUm91dGVyIG5hdmlnYXRlQnlVcmwpLiAqL1xuICBocmVmPzogc3RyaW5nO1xuXG4gIC8qKiBXaGV0aGVyIHRoaXMgYnV0dG9uIGlzIGluIGEgbG9hZGluZyBzdGF0ZS4gKi9cbiAgbG9hZGluZz86IGJvb2xlYW47XG5cbiAgLyoqIFdoZXRoZXIgdGhpcyBidXR0b24gaXMgZGlzYWJsZWQuICovXG4gIGRpc2FibGVkPzogYm9vbGVhbjtcblxuICAvKiogV2hldGhlciB0aGlzIGJ1dHRvbiBpcyBoaWRkZW4gZnJvbSB0aGUgVUkuICovXG4gIGhpZGRlbj86IGJvb2xlYW47XG5cbiAgLyoqIEFkZGl0aW9uYWwgQ1NTIGNsYXNzIGZvciBlZGdlIGNhc2VzLiAqL1xuICBjdXN0b21DbGFzcz86IHN0cmluZztcbn1cblxuLyoqXG4gKiBBbGlnbm1lbnQgb3B0aW9ucyBmb3IgVWlCdXR0b25BcmVhLlxuICovXG5leHBvcnQgdHlwZSBVaUJ1dHRvbkFyZWFBbGlnbiA9ICdzdGFydCcgfCAnY2VudGVyJyB8ICdlbmQnIHwgJ2JldHdlZW4nO1xuIl19

package/esm2022/lib/components/button/index.mjs

@@ -0,0 +1,16 @@
+/**
+ * ng-ui-system — Button entry point.
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   UiButtonComponent,
+ *   UiButtonAreaComponent,
+ *   UiButtonDescriptor,
+ * } from 'ng-ui-system';
+ * ```
+ */
+// Components
+export { UiButtonComponent } from './button.component';
+export { UiButtonAreaComponent } from './button-area.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9uZy11aS1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7R0FXRztBQUVILGFBQWE7QUFDYixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxyXG4gKiBuZy11aS1zeXN0ZW0g4oCUIEJ1dHRvbiBlbnRyeSBwb2ludC5cclxuICpcclxuICogQGV4YW1wbGVcclxuICogYGBgdHlwZXNjcmlwdFxyXG4gKiBpbXBvcnQge1xyXG4gKiAgIFVpQnV0dG9uQ29tcG9uZW50LFxyXG4gKiAgIFVpQnV0dG9uQXJlYUNvbXBvbmVudCxcclxuICogICBVaUJ1dHRvbkRlc2NyaXB0b3IsXHJcbiAqIH0gZnJvbSAnbmctdWktc3lzdGVtJztcclxuICogYGBgXHJcbiAqL1xyXG5cclxuLy8gQ29tcG9uZW50c1xyXG5leHBvcnQgeyBVaUJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4vYnV0dG9uLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IFVpQnV0dG9uQXJlYUNvbXBvbmVudCB9IGZyb20gJy4vYnV0dG9uLWFyZWEuY29tcG9uZW50JztcclxuXHJcbi8vIFR5cGVzXHJcbmV4cG9ydCB7XHJcbiAgVWlCdXR0b25EZXNjcmlwdG9yLFxyXG4gIFVpQnV0dG9uQXJlYUFsaWduLFxyXG4gIFVpSWNvblBvc2l0aW9uLFxyXG59IGZyb20gJy4vYnV0dG9uLnR5cGVzJztcclxuIl19