@smuikit/angular 0.1.0

package/dist/fesm2022/smui-angular.mjs

@@ -0,0 +1,1054 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, ViewChild, Output, Input, ChangeDetectionStrategy, Component, HostListener, NgModule, Inject, Injectable } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { createButtonMachine, connectButton, createInputMachine, connectInput, createModalMachine, connectModal, connectTypography, connectCard } from '@smui/core';
+
+class MachineAdapter {
+    ngZone;
+    machine;
+    unsubscribe = null;
+    snapshot;
+    constructor(ngZone, machine) {
+        this.ngZone = ngZone;
+        this.machine = machine;
+        this.snapshot = this.machine.getSnapshot();
+        this.machine.start();
+        this.unsubscribe = this.machine.subscribe(() => {
+            this.ngZone.run(() => {
+                this.snapshot = this.machine.getSnapshot();
+            });
+        });
+    }
+    static create(ngZone, machine) {
+        return new MachineAdapter(ngZone, machine);
+    }
+    get state() {
+        return this.snapshot.state;
+    }
+    get context() {
+        return this.snapshot.context;
+    }
+    send(event) {
+        this.machine.send(event);
+    }
+    destroy() {
+        this.unsubscribe?.();
+        this.unsubscribe = null;
+        this.machine.stop();
+    }
+}
+
+/**
+ * Map of React-style event-handler names to their Angular attribute-binding
+ * equivalents.  Angular templates bind DOM events with `(eventname)`, but
+ * when we spread props programmatically in `ngOnChanges` / renderers we
+ * need the raw DOM event name so we can call `addEventListener` / set the
+ * property on the native element.
+ */
+const EVENT_HANDLER_MAP = {
+    onClick: 'click',
+    onPointerDown: 'pointerdown',
+    onPointerUp: 'pointerup',
+    onFocus: 'focus',
+    onBlur: 'blur',
+    onKeyDown: 'keydown',
+    onChange: 'input', // DOM `input` event is the Angular equivalent of React `onChange`
+};
+/** Property names that are boolean HTML attributes. */
+const BOOLEAN_ATTRS = new Set([
+    'disabled',
+    'readOnly',
+    'required',
+    'hidden',
+]);
+/**
+ * Takes an `ElementProps` object produced by a `connect*` function from
+ * @smui/core and splits it into three buckets that Angular can consume:
+ * attributes, styles, and event listeners.
+ *
+ * - `undefined` values are filtered out.
+ * - React-style event handlers (`onClick`, `onFocus`, etc.) are mapped to
+ *   their DOM event names (`click`, `focus`, ...).
+ */
+function normalizeProps(props) {
+    const attrs = {};
+    const styles = {};
+    const listeners = {};
+    if (!props) {
+        return { attrs, styles, listeners };
+    }
+    for (const [key, value] of Object.entries(props)) {
+        // Skip undefined values
+        if (value === undefined)
+            continue;
+        // Style object
+        if (key === 'style' && typeof value === 'object' && value !== null) {
+            Object.assign(styles, value);
+            continue;
+        }
+        // Event handlers
+        const eventName = EVENT_HANDLER_MAP[key];
+        if (eventName && typeof value === 'function') {
+            listeners[eventName] = value;
+            continue;
+        }
+        // Regular attributes
+        attrs[key] = value;
+    }
+    return { attrs, styles, listeners };
+}
+/**
+ * Applies NormalizedProps to a native DOM element.
+ * Returns an array of cleanup functions (for removing event listeners).
+ */
+function applyProps(element, normalized) {
+    const cleanups = [];
+    // Set attributes
+    for (const [key, value] of Object.entries(normalized.attrs)) {
+        if (value === undefined || value === false) {
+            element.removeAttribute(key);
+        }
+        else if (value === true) {
+            element.setAttribute(key, '');
+        }
+        else {
+            element.setAttribute(key, String(value));
+        }
+    }
+    // Set styles
+    for (const [key, value] of Object.entries(normalized.styles)) {
+        element.style[key] = String(value);
+    }
+    // Add event listeners
+    for (const [eventName, handler] of Object.entries(normalized.listeners)) {
+        element.addEventListener(eventName, handler);
+        cleanups.push(() => element.removeEventListener(eventName, handler));
+    }
+    return cleanups;
+}
+
+class ButtonComponent {
+    ngZone;
+    cdr;
+    variant = 'primary';
+    size = 'md';
+    disabled = false;
+    loading = false;
+    buttonClick = new EventEmitter();
+    buttonElRef;
+    api;
+    adapter;
+    listenerCleanups = [];
+    get hostClass() {
+        return `smui-button smui-button--${this.variant} smui-button--${this.size}`;
+    }
+    constructor(ngZone, cdr) {
+        this.ngZone = ngZone;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.adapter = MachineAdapter.create(this.ngZone, createButtonMachine({
+            variant: this.variant,
+            size: this.size,
+            disabled: this.disabled,
+            loading: this.loading,
+        }));
+        this.updateApi();
+        this.applyPropsToElement();
+    }
+    ngOnChanges(changes) {
+        if (!this.adapter)
+            return;
+        if (changes['disabled']) {
+            this.adapter.send({ type: 'SET_DISABLED', disabled: this.disabled });
+        }
+        if (changes['loading']) {
+            this.adapter.send({ type: 'SET_LOADING', loading: this.loading });
+        }
+        this.updateApi();
+        this.applyPropsToElement();
+    }
+    ngOnDestroy() {
+        this.cleanupListeners();
+        this.adapter?.destroy();
+    }
+    updateApi() {
+        this.api = connectButton({
+            state: this.adapter.state,
+            context: this.adapter.context,
+            send: (event) => {
+                this.adapter.send(event);
+                this.updateApi();
+                this.applyPropsToElement();
+                this.cdr.markForCheck();
+            },
+            onClick: (event) => {
+                this.buttonClick.emit(event);
+            },
+        });
+    }
+    applyPropsToElement() {
+        if (!this.buttonElRef?.nativeElement)
+            return;
+        this.cleanupListeners();
+        const normalized = normalizeProps(this.api.rootProps);
+        this.listenerCleanups = applyProps(this.buttonElRef.nativeElement, normalized);
+    }
+    cleanupListeners() {
+        for (const cleanup of this.listenerCleanups) {
+            cleanup();
+        }
+        this.listenerCleanups = [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ButtonComponent, isStandalone: true, selector: "smui-button", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading" }, outputs: { buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "buttonElRef", first: true, predicate: ["buttonEl"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    <button
+      #buttonEl
+      [class]="hostClass"
+      [attr.data-state]="api.state"
+      [attr.data-variant]="variant"
+      [attr.data-size]="size"
+    >
+      <span
+        *ngIf="api.isLoading"
+        class="smui-button__loader"
+        aria-hidden="true"
+      >
+        <span class="smui-button__spinner"></span>
+      </span>
+      <span
+        class="smui-button__content"
+        [style.visibility]="api.isLoading ? 'hidden' : 'visible'"
+      >
+        <ng-content></ng-content>
+      </span>
+    </button>
+  `, isInline: true, styles: [":host{display:inline-block}.smui-button__loader{position:absolute;display:inline-flex;align-items:center;justify-content:center}.smui-button__content{display:inline-flex;align-items:center;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smui-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      #buttonEl
+      [class]="hostClass"
+      [attr.data-state]="api.state"
+      [attr.data-variant]="variant"
+      [attr.data-size]="size"
+    >
+      <span
+        *ngIf="api.isLoading"
+        class="smui-button__loader"
+        aria-hidden="true"
+      >
+        <span class="smui-button__spinner"></span>
+      </span>
+      <span
+        class="smui-button__content"
+        [style.visibility]="api.isLoading ? 'hidden' : 'visible'"
+      >
+        <ng-content></ng-content>
+      </span>
+    </button>
+  `, styles: [":host{display:inline-block}.smui-button__loader{position:absolute;display:inline-flex;align-items:center;justify-content:center}.smui-button__content{display:inline-flex;align-items:center;gap:8px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }], buttonElRef: [{
+                type: ViewChild,
+                args: ['buttonEl', { static: true }]
+            }] } });
+
+class InputComponent {
+    ngZone;
+    cdr;
+    label = '';
+    placeholder = '';
+    disabled = false;
+    error = null;
+    required = false;
+    value = '';
+    inputId = `smui-input-${Date.now()}`;
+    valueChange = new EventEmitter();
+    inputElRef;
+    labelElRef;
+    errorElRef;
+    api;
+    adapter;
+    listenerCleanups = [];
+    constructor(ngZone, cdr) {
+        this.ngZone = ngZone;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.adapter = MachineAdapter.create(this.ngZone, createInputMachine({
+            value: this.value,
+            disabled: this.disabled,
+            required: this.required,
+            error: this.error,
+            placeholder: this.placeholder,
+            label: this.label,
+            id: this.inputId,
+        }));
+        this.updateApi();
+        this.applyPropsToInput();
+    }
+    ngOnChanges(changes) {
+        if (!this.adapter)
+            return;
+        if (changes['error']) {
+            this.adapter.send({ type: 'SET_ERROR', error: this.error });
+        }
+        if (changes['value'] && !changes['value'].firstChange) {
+            this.adapter.send({ type: 'CHANGE', value: this.value });
+        }
+        this.updateApi();
+        this.applyPropsToInput();
+    }
+    ngOnDestroy() {
+        this.cleanupListeners();
+        this.adapter?.destroy();
+    }
+    updateApi() {
+        this.api = connectInput({
+            state: this.adapter.state,
+            context: this.adapter.context,
+            send: (event) => {
+                this.adapter.send(event);
+                this.updateApi();
+                this.applyPropsToInput();
+                this.cdr.markForCheck();
+            },
+            onChange: (val) => {
+                this.valueChange.emit(val);
+            },
+        });
+    }
+    applyPropsToInput() {
+        if (!this.inputElRef?.nativeElement)
+            return;
+        this.cleanupListeners();
+        const normalized = normalizeProps(this.api.inputProps);
+        this.listenerCleanups = applyProps(this.inputElRef.nativeElement, normalized);
+        // Apply label props
+        if (this.labelElRef?.nativeElement) {
+            const labelNorm = normalizeProps(this.api.labelProps);
+            this.listenerCleanups.push(...applyProps(this.labelElRef.nativeElement, labelNorm));
+        }
+        // Apply error props
+        if (this.errorElRef?.nativeElement) {
+            const errorNorm = normalizeProps(this.api.errorProps);
+            this.listenerCleanups.push(...applyProps(this.errorElRef.nativeElement, errorNorm));
+        }
+    }
+    cleanupListeners() {
+        for (const cleanup of this.listenerCleanups) {
+            cleanup();
+        }
+        this.listenerCleanups = [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: InputComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: InputComponent, isStandalone: true, selector: "smui-input", inputs: { label: "label", placeholder: "placeholder", disabled: "disabled", error: "error", required: "required", value: "value", inputId: "inputId" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElRef", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "labelElRef", first: true, predicate: ["labelEl"], descendants: true }, { propertyName: "errorElRef", first: true, predicate: ["errorEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div
+      class="smui-input"
+      [attr.data-state]="api.state"
+      [attr.data-disabled]="disabled ? '' : null"
+    >
+      <label
+        *ngIf="label"
+        #labelEl
+        class="smui-input__label"
+        [attr.for]="inputId"
+      >
+        {{ label }}
+        <span *ngIf="required" class="smui-input__required" aria-hidden="true">*</span>
+      </label>
+
+      <input
+        #inputEl
+        class="smui-input__field"
+        [attr.id]="inputId"
+        [attr.placeholder]="placeholder"
+        [value]="api.value"
+      />
+
+      <div
+        *ngIf="api.hasError && error"
+        #errorEl
+        class="smui-input__error"
+        role="alert"
+        aria-live="polite"
+      >
+        {{ error }}
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.smui-input__label{display:block;margin-bottom:4px}.smui-input__required{color:var(--smui-color-danger, #dc2626);margin-left:2px}.smui-input__field{display:block;width:100%;box-sizing:border-box}.smui-input__error{color:var(--smui-color-danger, #dc2626);font-size:.875rem;margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smui-input', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="smui-input"
+      [attr.data-state]="api.state"
+      [attr.data-disabled]="disabled ? '' : null"
+    >
+      <label
+        *ngIf="label"
+        #labelEl
+        class="smui-input__label"
+        [attr.for]="inputId"
+      >
+        {{ label }}
+        <span *ngIf="required" class="smui-input__required" aria-hidden="true">*</span>
+      </label>
+
+      <input
+        #inputEl
+        class="smui-input__field"
+        [attr.id]="inputId"
+        [attr.placeholder]="placeholder"
+        [value]="api.value"
+      />
+
+      <div
+        *ngIf="api.hasError && error"
+        #errorEl
+        class="smui-input__error"
+        role="alert"
+        aria-live="polite"
+      >
+        {{ error }}
+      </div>
+    </div>
+  `, styles: [":host{display:block}.smui-input__label{display:block;margin-bottom:4px}.smui-input__required{color:var(--smui-color-danger, #dc2626);margin-left:2px}.smui-input__field{display:block;width:100%;box-sizing:border-box}.smui-input__error{color:var(--smui-color-danger, #dc2626);font-size:.875rem;margin-top:4px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], inputElRef: [{
+                type: ViewChild,
+                args: ['inputEl', { static: true }]
+            }], labelElRef: [{
+                type: ViewChild,
+                args: ['labelEl']
+            }], errorElRef: [{
+                type: ViewChild,
+                args: ['errorEl']
+            }] } });
+
+class ModalComponent {
+    ngZone;
+    cdr;
+    closeOnOverlayClick = true;
+    closeOnEscape = true;
+    openChange = new EventEmitter();
+    triggerElRef;
+    contentElRef;
+    overlayElRef;
+    closeElRef;
+    api;
+    titleId = `smui-modal-title-${Date.now()}`;
+    adapter;
+    constructor(ngZone, cdr) {
+        this.ngZone = ngZone;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.adapter = MachineAdapter.create(this.ngZone, createModalMachine({
+            closeOnOverlayClick: this.closeOnOverlayClick,
+            closeOnEscape: this.closeOnEscape,
+        }));
+        this.updateApi();
+    }
+    ngOnChanges(changes) {
+        // Modal machine doesn't have dynamic context updates for these,
+        // but we store them for local use in event handlers.
+    }
+    ngOnDestroy() {
+        this.adapter?.destroy();
+    }
+    /** Open the modal programmatically. */
+    open() {
+        this.adapter.send({ type: 'OPEN' });
+        this.updateApi();
+        this.openChange.emit(true);
+        this.cdr.markForCheck();
+    }
+    /** Close the modal programmatically. */
+    close() {
+        this.adapter.send({ type: 'CLOSE' });
+        this.updateApi();
+        this.openChange.emit(false);
+        this.cdr.markForCheck();
+    }
+    onOverlayClick(event) {
+        if (this.closeOnOverlayClick) {
+            this.close();
+        }
+    }
+    handleKeydown(event) {
+        if (this.closeOnEscape && event.key === 'Escape' && this.api.isOpen) {
+            this.close();
+        }
+    }
+    updateApi() {
+        this.api = connectModal({
+            state: this.adapter.state,
+            context: this.adapter.context,
+            send: (event) => {
+                this.adapter.send(event);
+                this.updateApi();
+                this.cdr.markForCheck();
+            },
+            onOpenChange: (isOpen) => {
+                this.openChange.emit(isOpen);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ModalComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ModalComponent, isStandalone: true, selector: "smui-modal", inputs: { closeOnOverlayClick: "closeOnOverlayClick", closeOnEscape: "closeOnEscape" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "triggerElRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "contentElRef", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "overlayElRef", first: true, predicate: ["overlayEl"], descendants: true }, { propertyName: "closeElRef", first: true, predicate: ["closeEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <!-- Trigger slot -->
+    <div #triggerEl class="smui-modal__trigger" (click)="open()">
+      <ng-content select="[smuiModalTrigger]"></ng-content>
+    </div>
+
+    <!-- Overlay + Content (portal-like fixed overlay) -->
+    <ng-container *ngIf="api.isOpen">
+      <div
+        #overlayEl
+        class="smui-modal__overlay"
+        [attr.data-state]="api.state"
+        (click)="onOverlayClick($event)"
+      ></div>
+      <div
+        #contentEl
+        class="smui-modal__content"
+        [attr.data-state]="api.state"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-labelledby]="titleId"
+        tabindex="-1"
+      >
+        <div class="smui-modal__header">
+          <div [attr.id]="titleId" class="smui-modal__title">
+            <ng-content select="[smuiModalTitle]"></ng-content>
+          </div>
+          <button
+            #closeEl
+            class="smui-modal__close"
+            aria-label="Close"
+            (click)="close()"
+            type="button"
+          >
+            &times;
+          </button>
+        </div>
+        <div class="smui-modal__body">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </ng-container>
+  `, isInline: true, styles: [":host{display:inline-block}.smui-modal__overlay{position:fixed;inset:0;background:#00000080;z-index:999}.smui-modal__content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--smui-color-surface, #ffffff);border-radius:8px;box-shadow:0 20px 60px #0000004d;z-index:1000;min-width:320px;max-width:90vw;max-height:90vh;overflow-y:auto;outline:none}.smui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--smui-color-border, #e5e7eb)}.smui-modal__title{font-weight:600;font-size:1.125rem}.smui-modal__close{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:4px 8px;line-height:1;border-radius:4px}.smui-modal__close:hover{background:var(--smui-color-hover, #f3f4f6)}.smui-modal__body{padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smui-modal', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <!-- Trigger slot -->
+    <div #triggerEl class="smui-modal__trigger" (click)="open()">
+      <ng-content select="[smuiModalTrigger]"></ng-content>
+    </div>
+
+    <!-- Overlay + Content (portal-like fixed overlay) -->
+    <ng-container *ngIf="api.isOpen">
+      <div
+        #overlayEl
+        class="smui-modal__overlay"
+        [attr.data-state]="api.state"
+        (click)="onOverlayClick($event)"
+      ></div>
+      <div
+        #contentEl
+        class="smui-modal__content"
+        [attr.data-state]="api.state"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-labelledby]="titleId"
+        tabindex="-1"
+      >
+        <div class="smui-modal__header">
+          <div [attr.id]="titleId" class="smui-modal__title">
+            <ng-content select="[smuiModalTitle]"></ng-content>
+          </div>
+          <button
+            #closeEl
+            class="smui-modal__close"
+            aria-label="Close"
+            (click)="close()"
+            type="button"
+          >
+            &times;
+          </button>
+        </div>
+        <div class="smui-modal__body">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </ng-container>
+  `, styles: [":host{display:inline-block}.smui-modal__overlay{position:fixed;inset:0;background:#00000080;z-index:999}.smui-modal__content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--smui-color-surface, #ffffff);border-radius:8px;box-shadow:0 20px 60px #0000004d;z-index:1000;min-width:320px;max-width:90vw;max-height:90vh;overflow-y:auto;outline:none}.smui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--smui-color-border, #e5e7eb)}.smui-modal__title{font-weight:600;font-size:1.125rem}.smui-modal__close{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:4px 8px;line-height:1;border-radius:4px}.smui-modal__close:hover{background:var(--smui-color-hover, #f3f4f6)}.smui-modal__body{padding:24px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { closeOnOverlayClick: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], triggerElRef: [{
+                type: ViewChild,
+                args: ['triggerEl']
+            }], contentElRef: [{
+                type: ViewChild,
+                args: ['contentEl']
+            }], overlayElRef: [{
+                type: ViewChild,
+                args: ['overlayEl']
+            }], closeElRef: [{
+                type: ViewChild,
+                args: ['closeEl']
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class TypographyComponent {
+    renderer;
+    variant = 'body1';
+    align;
+    truncate = false;
+    color;
+    element = 'p';
+    api;
+    set textElRef(ref) {
+        if (ref) {
+            this.applyStyles(ref.nativeElement);
+        }
+    }
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        this.updateApi();
+    }
+    ngOnChanges(changes) {
+        this.updateApi();
+    }
+    updateApi() {
+        this.api = connectTypography({
+            variant: this.variant,
+            align: this.align,
+            truncate: this.truncate,
+            color: this.color,
+        });
+        this.element = this.api.element;
+    }
+    applyStyles(el) {
+        if (!this.api)
+            return;
+        const rootProps = this.api.rootProps;
+        // Apply data attributes
+        for (const [key, value] of Object.entries(rootProps)) {
+            if (key === 'style' || value === undefined)
+                continue;
+            this.renderer.setAttribute(el, key, String(value));
+        }
+        // Apply styles
+        if (rootProps.style && typeof rootProps.style === 'object') {
+            for (const [prop, value] of Object.entries(rootProps.style)) {
+                this.renderer.setStyle(el, prop, String(value));
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TypographyComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TypographyComponent, isStandalone: true, selector: "smui-typography", inputs: { variant: "variant", align: "align", truncate: "truncate", color: "color" }, viewQueries: [{ propertyName: "textElRef", first: true, predicate: ["textEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <ng-container [ngSwitch]="element">
+      <h1 *ngSwitchCase="'h1'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h1>
+      <h2 *ngSwitchCase="'h2'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h2>
+      <h3 *ngSwitchCase="'h3'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h3>
+      <h4 *ngSwitchCase="'h4'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h4>
+      <h5 *ngSwitchCase="'h5'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h5>
+      <h6 *ngSwitchCase="'h6'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h6>
+      <span *ngSwitchCase="'span'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </span>
+      <p *ngSwitchDefault #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </p>
+    </ng-container>
+
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TypographyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smui-typography', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <ng-container [ngSwitch]="element">
+      <h1 *ngSwitchCase="'h1'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h1>
+      <h2 *ngSwitchCase="'h2'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h2>
+      <h3 *ngSwitchCase="'h3'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h3>
+      <h4 *ngSwitchCase="'h4'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h4>
+      <h5 *ngSwitchCase="'h5'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h5>
+      <h6 *ngSwitchCase="'h6'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </h6>
+      <span *ngSwitchCase="'span'" #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </span>
+      <p *ngSwitchDefault #textEl class="smui-typography" [attr.data-variant]="variant">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </p>
+    </ng-container>
+
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+  `, styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { variant: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], truncate: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], textElRef: [{
+                type: ViewChild,
+                args: ['textEl', { static: false }]
+            }] } });
+
+// ---------------------------------------------------------------------------
+// CardHeaderComponent
+// ---------------------------------------------------------------------------
+class CardHeaderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CardHeaderComponent, isStandalone: true, selector: "smui-card-header", ngImport: i0, template: `
+    <div #headerEl class="smui-card__header" data-part="header">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.smui-card__header{padding:var(--smui-card-header-padding, 16px 24px);border-bottom:1px solid var(--smui-color-border, #e5e7eb)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smui-card-header', standalone: true, template: `
+    <div #headerEl class="smui-card__header" data-part="header">
+      <ng-content></ng-content>
+    </div>
+  `, styles: [":host{display:block}.smui-card__header{padding:var(--smui-card-header-padding, 16px 24px);border-bottom:1px solid var(--smui-color-border, #e5e7eb)}\n"] }]
+        }] });
+// ---------------------------------------------------------------------------
+// CardBodyComponent
+// ---------------------------------------------------------------------------
+class CardBodyComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CardBodyComponent, isStandalone: true, selector: "smui-card-body", ngImport: i0, template: `
+    <div #bodyEl class="smui-card__body" data-part="body">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.smui-card__body{padding:var(--smui-card-body-padding, 24px)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smui-card-body', standalone: true, template: `
+    <div #bodyEl class="smui-card__body" data-part="body">
+      <ng-content></ng-content>
+    </div>
+  `, styles: [":host{display:block}.smui-card__body{padding:var(--smui-card-body-padding, 24px)}\n"] }]
+        }] });
+// ---------------------------------------------------------------------------
+// CardFooterComponent
+// ---------------------------------------------------------------------------
+class CardFooterComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CardFooterComponent, isStandalone: true, selector: "smui-card-footer", ngImport: i0, template: `
+    <div #footerEl class="smui-card__footer" data-part="footer">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.smui-card__footer{padding:var(--smui-card-footer-padding, 16px 24px);border-top:1px solid var(--smui-color-border, #e5e7eb)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smui-card-footer', standalone: true, template: `
+    <div #footerEl class="smui-card__footer" data-part="footer">
+      <ng-content></ng-content>
+    </div>
+  `, styles: [":host{display:block}.smui-card__footer{padding:var(--smui-card-footer-padding, 16px 24px);border-top:1px solid var(--smui-color-border, #e5e7eb)}\n"] }]
+        }] });
+// ---------------------------------------------------------------------------
+// CardComponent
+// ---------------------------------------------------------------------------
+class CardComponent {
+    variant = 'elevated';
+    padding = 'md';
+    interactive = false;
+    cardClick = new EventEmitter();
+    cardElRef;
+    api;
+    listenerCleanups = [];
+    ngOnInit() {
+        this.updateApi();
+    }
+    ngOnChanges(changes) {
+        this.updateApi();
+    }
+    onCardClick(event) {
+        if (this.interactive) {
+            this.cardClick.emit(event);
+        }
+    }
+    onCardKeydown(event) {
+        if (this.interactive && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            this.cardClick.emit(event);
+        }
+    }
+    updateApi() {
+        this.api = connectCard({
+            variant: this.variant,
+            padding: this.padding,
+            interactive: this.interactive,
+            onClick: (event) => {
+                this.cardClick.emit(event);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CardComponent, isStandalone: true, selector: "smui-card", inputs: { variant: "variant", padding: "padding", interactive: "interactive" }, outputs: { cardClick: "cardClick" }, viewQueries: [{ propertyName: "cardElRef", first: true, predicate: ["cardEl"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div
+      #cardEl
+      class="smui-card"
+      [class.smui-card--interactive]="interactive"
+      [attr.data-variant]="variant"
+      [attr.data-padding]="padding"
+      [attr.role]="interactive ? 'button' : null"
+      [attr.tabindex]="interactive ? 0 : null"
+      (click)="onCardClick($event)"
+      (keydown)="onCardKeydown($event)"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.smui-card{border-radius:var(--smui-card-radius, 8px);overflow:hidden}.smui-card[data-variant=elevated]{box-shadow:var( --smui-card-shadow, 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06) )}.smui-card[data-variant=outlined]{border:1px solid var(--smui-color-border, #e5e7eb)}.smui-card[data-variant=filled]{background:var(--smui-color-surface, #f9fafb)}.smui-card--interactive{cursor:pointer;transition:box-shadow .2s ease}.smui-card--interactive:hover{box-shadow:0 4px 12px #00000026}.smui-card--interactive:focus-visible{outline:2px solid var(--smui-color-primary, #6200ee);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smui-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      #cardEl
+      class="smui-card"
+      [class.smui-card--interactive]="interactive"
+      [attr.data-variant]="variant"
+      [attr.data-padding]="padding"
+      [attr.role]="interactive ? 'button' : null"
+      [attr.tabindex]="interactive ? 0 : null"
+      (click)="onCardClick($event)"
+      (keydown)="onCardKeydown($event)"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, styles: [":host{display:block}.smui-card{border-radius:var(--smui-card-radius, 8px);overflow:hidden}.smui-card[data-variant=elevated]{box-shadow:var( --smui-card-shadow, 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06) )}.smui-card[data-variant=outlined]{border:1px solid var(--smui-color-border, #e5e7eb)}.smui-card[data-variant=filled]{background:var(--smui-color-surface, #f9fafb)}.smui-card--interactive{cursor:pointer;transition:box-shadow .2s ease}.smui-card--interactive:hover{box-shadow:0 4px 12px #00000026}.smui-card--interactive:focus-visible{outline:2px solid var(--smui-color-primary, #6200ee);outline-offset:2px}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], interactive: [{
+                type: Input
+            }], cardClick: [{
+                type: Output
+            }], cardElRef: [{
+                type: ViewChild,
+                args: ['cardEl', { static: true }]
+            }] } });
+
+/**
+ * SmuiModule re-exports every standalone component so consumers who prefer
+ * the traditional NgModule approach can simply import this single module.
+ *
+ * For tree-shakeable imports, use the standalone components directly:
+ *   `imports: [ButtonComponent]`
+ */
+class SmuiModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SmuiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: SmuiModule, imports: [ButtonComponent,
+            InputComponent,
+            ModalComponent,
+            TypographyComponent,
+            CardComponent,
+            CardHeaderComponent,
+            CardBodyComponent,
+            CardFooterComponent], exports: [ButtonComponent,
+            InputComponent,
+            ModalComponent,
+            TypographyComponent,
+            CardComponent,
+            CardHeaderComponent,
+            CardBodyComponent,
+            CardFooterComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SmuiModule, imports: [ButtonComponent,
+            InputComponent,
+            ModalComponent,
+            TypographyComponent,
+            CardComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SmuiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ButtonComponent,
+                        InputComponent,
+                        ModalComponent,
+                        TypographyComponent,
+                        CardComponent,
+                        CardHeaderComponent,
+                        CardBodyComponent,
+                        CardFooterComponent,
+                    ],
+                    exports: [
+                        ButtonComponent,
+                        InputComponent,
+                        ModalComponent,
+                        TypographyComponent,
+                        CardComponent,
+                        CardHeaderComponent,
+                        CardBodyComponent,
+                        CardFooterComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * ThemeService manages design tokens as CSS custom properties on the
+ * document's root element (`<html>`).  Consumers inject it and call
+ * `setTokens()` or `setToken()` to apply a theme at runtime.
+ *
+ * It is provided in 'root' so there is a single, application-wide instance.
+ */
+class ThemeService {
+    document;
+    tokens = new Map();
+    rootElement = null;
+    constructor(document) {
+        this.document = document;
+        this.rootElement = this.document.documentElement;
+    }
+    /**
+     * Bulk-set multiple design tokens.
+     *
+     * ```ts
+     * themeService.setTokens({
+     *   'smui-color-primary': '#6200ee',
+     *   'smui-color-secondary': '#03dac6',
+     *   'smui-spacing-md': '16px',
+     * });
+     * ```
+     */
+    setTokens(tokens) {
+        for (const [name, value] of Object.entries(tokens)) {
+            this.setToken(name, value);
+        }
+    }
+    /** Set a single design token. */
+    setToken(name, value) {
+        this.tokens.set(name, value);
+        this.applyToken(name, value);
+    }
+    /** Remove a single token override, reverting to the default value. */
+    removeToken(name) {
+        this.tokens.delete(name);
+        if (this.rootElement) {
+            this.rootElement.style.removeProperty(`--${name}`);
+        }
+    }
+    /** Remove all token overrides. */
+    resetTokens() {
+        for (const name of this.tokens.keys()) {
+            if (this.rootElement) {
+                this.rootElement.style.removeProperty(`--${name}`);
+            }
+        }
+        this.tokens.clear();
+    }
+    /** Get the current value of a token (returns the override, not the computed). */
+    getToken(name) {
+        return this.tokens.get(name);
+    }
+    /** Get all currently applied token overrides. */
+    getAllTokens() {
+        const result = {};
+        for (const [name, value] of this.tokens.entries()) {
+            result[name] = value;
+        }
+        return result;
+    }
+    applyToken(name, value) {
+        if (this.rootElement) {
+            this.rootElement.style.setProperty(`--${name}`, value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+// Module
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, InputComponent, MachineAdapter, ModalComponent, SmuiModule, ThemeService, TypographyComponent, applyProps, normalizeProps };
+//# sourceMappingURL=smui-angular.mjs.map