@lamenna/lxp-angular 0.0.7 → 0.2.0

package/dist/fesm2022/lamenna-lxp-angular.mjs

@@ -1,8 +1,11 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, HostBinding, Output, Input, Component } from '@angular/core';
-import { buttonConfig } from '@lamenna/lxp-shared-components';
+import { EventEmitter, HostBinding, Output, Input, Component, Injectable } from '@angular/core';
+import { buttonConfig, tableThemeConfig, tableConfig, defaultTheme, badgeConfig, textFieldConfig, chipConfig, toggleConfig, radioConfig, avatarConfig, cardConfig, segmentedControlConfig, quantityStepperConfig } from '@lamenna/lxp-shared-components';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
 
 class ButtonComponent {
     content;
@@ -13,7 +16,12 @@ class ButtonComponent {
     id;
     ariaLabel;
     testID;
-    label;
+    get label() {
+        return this.content;
+    }
+    set label(value) {
+        this.content = value;
+    }
     onClick = new EventEmitter();
     get hostStyles() {
         const variantConfig = buttonConfig.variants[this.variant];
@@ -31,8 +39,8 @@ class ButtonComponent {
             [this.className || ""]: !!this.className,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonComponent, isStandalone: true, selector: "lxp-button", inputs: { content: "content", variant: "variant", size: "size", disabled: "disabled", className: "className", id: "id", ariaLabel: "ariaLabel", testID: "testID", label: "label" }, outputs: { onClick: "onClick" }, host: { properties: { "style": "this.hostStyles" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ButtonComponent, isStandalone: true, selector: "lxp-button", inputs: { content: "content", variant: "variant", size: "size", disabled: "disabled", className: "className", id: "id", ariaLabel: "ariaLabel", testID: "testID", label: "label" }, outputs: { onClick: "onClick" }, host: { properties: { "style": "this.hostStyles" } }, ngImport: i0, template: `
     <button
       [attr.id]="id"
       [attr.data-testid]="testID"
@@ -45,7 +53,7 @@ class ButtonComponent {
     </button>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "lxp-button",
@@ -89,9 +97,1545 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ["style"]
             }] } });
 
+class TableComponent {
+    columns = [];
+    data = [];
+    actions = [];
+    selectable = false;
+    showPagination = true;
+    showSearch = true;
+    loading = false;
+    theme = "tera";
+    title;
+    titleLink;
+    serverSide = false;
+    totalCount;
+    currentPage;
+    pageSize;
+    pageSizeOptions;
+    emptyState;
+    enableRowClick = false;
+    searchPlaceholder;
+    onSelectionChange = new EventEmitter();
+    onPageChange = new EventEmitter();
+    onPageSizeChange = new EventEmitter();
+    onSearch = new EventEmitter();
+    onRowClick = new EventEmitter();
+    get fontFamily() {
+        return tableThemeConfig[this.theme].fontFamily;
+    }
+    defaultTitle = tableConfig.defaultTitle;
+    loadingMessage = tableConfig.loadingMessage;
+    searchTerm = "";
+    selectedRows = [];
+    get columnSpan() {
+        return (this.columns.length +
+            (this.selectable ? 1 : 0) +
+            (this.actions?.length ? 1 : 0));
+    }
+    get totalItems() {
+        if (this.serverSide) {
+            return this.totalCount ?? this.data.length;
+        }
+        return this.filteredData.length;
+    }
+    get currentPageInternal() {
+        return this.currentPage ?? this._currentPage;
+    }
+    get pageSizeInternal() {
+        return this.pageSize ?? this._pageSize;
+    }
+    get pageSizeOptionsInternal() {
+        return this.pageSizeOptions ?? tableConfig.defaultPageSizeOptions;
+    }
+    _currentPage = 1;
+    _pageSize = tableConfig.defaultPageSize;
+    get filteredData() {
+        if (!this.showSearch || !this.searchTerm.trim()) {
+            return this.data;
+        }
+        const term = this.searchTerm.toLowerCase();
+        return this.data.filter((row) => Object.values(row).some((value) => String(typeof value === "object" && value !== null
+            ? value.line1 ?? value.line2 ?? ""
+            : value ?? "")
+            .toLowerCase()
+            .includes(term)));
+    }
+    get pagedData() {
+        if (!this.showPagination || this.serverSide) {
+            return this.filteredData;
+        }
+        const start = (this.currentPageInternal - 1) * this.pageSizeInternal;
+        return this.filteredData.slice(start, start + this.pageSizeInternal);
+    }
+    get totalPages() {
+        if (!this.showPagination) {
+            return 1;
+        }
+        return Math.max(1, Math.ceil(this.totalItems / this.pageSizeInternal));
+    }
+    isRichCell(value) {
+        return (value &&
+            typeof value === "object" &&
+            ("line1" in value || "line2" in value || "text" in value || "name" in value));
+    }
+    isRowSelected(index) {
+        return this.selectedRows.includes(index);
+    }
+    globalRowIndex(localIndex) {
+        if (this.serverSide) {
+            return localIndex;
+        }
+        return (this.currentPageInternal - 1) * this.pageSizeInternal + localIndex;
+    }
+    toggleRowSelection(index) {
+        const exists = this.selectedRows.includes(index);
+        this.selectedRows = exists
+            ? this.selectedRows.filter((i) => i !== index)
+            : [...this.selectedRows, index];
+        this.onSelectionChange.emit(this.selectedRows);
+    }
+    get emptyMessage() {
+        const custom = this.emptyState?.message;
+        const showDefault = this.emptyState?.showDefault ?? true;
+        if (custom)
+            return custom;
+        return showDefault ? tableConfig.emptyMessage : "";
+    }
+    onSearchChange(term) {
+        const value = typeof term === "string"
+            ? term
+            : term?.target?.value ?? "";
+        this.searchTerm = value;
+        this.onSearch.emit({
+            page: this.currentPageInternal,
+            pageSize: this.pageSizeInternal,
+            searchTerm: value,
+            filters: {},
+        });
+    }
+    onPageChangeInternal(nextPage) {
+        if (nextPage < 1 || nextPage > this.totalPages)
+            return;
+        if (this.currentPage == null) {
+            this._currentPage = nextPage;
+        }
+        this.onPageChange.emit({
+            page: nextPage,
+            pageSize: this.pageSizeInternal,
+            searchTerm: this.searchTerm,
+            filters: {},
+        });
+    }
+    onPageSizeChangeInternal(nextSize) {
+        const size = typeof nextSize === "number" ? nextSize : Number(nextSize ?? 0);
+        if (this.pageSize == null) {
+            this._pageSize = size;
+            this._currentPage = 1;
+        }
+        this.onPageSizeChange.emit({
+            page: 1,
+            pageSize: size,
+            searchTerm: this.searchTerm,
+            filters: {},
+        });
+    }
+    handleRowClick(row, localIndex) {
+        if (!this.enableRowClick)
+            return;
+        const globalIndex = this.globalRowIndex(localIndex);
+        this.onRowClick.emit({ row, index: globalIndex });
+    }
+    isActionDisabled(action, row) {
+        return action.disabled ? action.disabled(row) : false;
+    }
+    runAction(action, row) {
+        if (this.isActionDisabled(action, row))
+            return;
+        action.action(row);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TableComponent, isStandalone: true, selector: "lxp-table", inputs: { columns: "columns", data: "data", actions: "actions", selectable: "selectable", showPagination: "showPagination", showSearch: "showSearch", loading: "loading", theme: "theme", title: "title", titleLink: "titleLink", serverSide: "serverSide", totalCount: "totalCount", currentPage: "currentPage", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", emptyState: "emptyState", enableRowClick: "enableRowClick", searchPlaceholder: "searchPlaceholder" }, outputs: { onSelectionChange: "onSelectionChange", onPageChange: "onPageChange", onPageSizeChange: "onPageSizeChange", onSearch: "onSearch", onRowClick: "onRowClick" }, host: { properties: { "style.fontFamily": "this.fontFamily" } }, ngImport: i0, template: `
+    <div class="lxp-table">
+      <div class="lxp-table__header">
+        <div class="lxp-table__title">
+          <h3 class="lxp-table__title-text">{{ title || defaultTitle }}</h3>
+          <span
+            *ngIf="totalItems > 0"
+            class="lxp-table__title-count"
+          >
+            ({{ totalItems }})
+          </span>
+        </div>
+
+        <div class="lxp-table__controls" *ngIf="showSearch">
+          <input
+            type="search"
+            class="lxp-table__search"
+            [placeholder]="searchPlaceholder || 'Search...'"
+            [(ngModel)]="searchTerm"
+            (ngModelChange)="onSearchChange($event)"
+          />
+        </div>
+      </div>
+
+      <div class="lxp-table__body-wrapper">
+        <table class="lxp-table__table">
+          <thead>
+            <tr>
+              <th
+                *ngIf="selectable"
+                class="lxp-table__cell lxp-table__cell--checkbox"
+              ></th>
+              <th
+                *ngFor="let column of columns"
+                class="lxp-table__cell lxp-table__cell--header"
+                [style.text-align]="column.align || 'left'"
+              >
+                {{ column.label }}
+              </th>
+              <th
+                *ngIf="actions?.length"
+                class="lxp-table__cell lxp-table__cell--header lxp-table__cell--actions"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngIf="loading">
+              <td
+                class="lxp-table__cell lxp-table__cell--status"
+                [attr.colspan]="columnSpan"
+              >
+                {{ loadingMessage }}
+              </td>
+            </tr>
+
+            <tr *ngIf="!loading && pagedData.length === 0">
+              <td
+                class="lxp-table__cell lxp-table__cell--status"
+                [attr.colspan]="columnSpan"
+              >
+                {{ emptyMessage }}
+              </td>
+            </tr>
+
+            <tr
+              *ngFor="let row of pagedData; let rowIndex = index"
+              class="lxp-table__row"
+              (click)="handleRowClick(row, rowIndex)"
+            >
+              <td
+                *ngIf="selectable"
+                class="lxp-table__cell lxp-table__cell--checkbox"
+              >
+                <input
+                  type="checkbox"
+                  [checked]="isRowSelected(globalRowIndex(rowIndex))"
+                  (click)="$event.stopPropagation()"
+                  (change)="toggleRowSelection(globalRowIndex(rowIndex))"
+                />
+              </td>
+
+              <td
+                *ngFor="let column of columns"
+                class="lxp-table__cell"
+                [style.text-align]="column.align || 'left'"
+              >
+                <ng-container [ngTemplateOutlet]="cellTemplate"
+                              [ngTemplateOutletContext]="{ column: column, row: row }">
+                </ng-container>
+              </td>
+
+              <td
+                *ngIf="actions?.length"
+                class="lxp-table__cell lxp-table__cell--actions"
+              >
+                <button
+                  *ngFor="let action of actions"
+                  type="button"
+                  class="lxp-table__action"
+                  [disabled]="isActionDisabled(action, row)"
+                  (click)="runAction(action, row); $event.stopPropagation()"
+                >
+                  {{ action.label }}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div
+        *ngIf="showPagination && totalPages > 1"
+        class="lxp-table__footer"
+      >
+        <div class="lxp-table__footer-info">
+          Page {{ currentPageInternal }} of {{ totalPages }}
+        </div>
+        <div class="lxp-table__footer-controls">
+          <label class="lxp-table__page-size">
+            <span>Rows per page</span>
+            <select
+              [ngModel]="pageSizeInternal"
+              (ngModelChange)="onPageSizeChangeInternal($event)"
+            >
+              <option *ngFor="let size of pageSizeOptionsInternal" [ngValue]="size">
+                {{ size }}
+              </option>
+            </select>
+          </label>
+
+          <button
+            type="button"
+            class="lxp-table__pager"
+            [disabled]="currentPageInternal === 1"
+            (click)="onPageChangeInternal(currentPageInternal - 1)"
+          >
+            Previous
+          </button>
+          <button
+            type="button"
+            class="lxp-table__pager"
+            [disabled]="currentPageInternal === totalPages"
+            (click)="onPageChangeInternal(currentPageInternal + 1)"
+          >
+            Next
+          </button>
+        </div>
+      </div>
+
+      <ng-template #cellTemplate let-column="column" let-row="row">
+        <ng-container *ngIf="column.render; else defaultCell">
+          {{ column.render(row[column.key], row) }}
+        </ng-container>
+        <ng-template #defaultCell>
+          <ng-container
+            *ngIf="isRichCell(row[column.key]); else plainCell"
+          >
+            <div class="lxp-table__cell-text">
+              <div class="lxp-table__cell-line1">
+                {{ row[column.key].line1 || row[column.key].text || row[column.key].name }}
+              </div>
+              <div
+                *ngIf="row[column.key].line2"
+                class="lxp-table__cell-line2"
+              >
+                {{ row[column.key].line2 }}
+              </div>
+            </div>
+          </ng-container>
+          <ng-template #plainCell>
+            {{ row[column.key] }}
+          </ng-template>
+        </ng-template>
+      </ng-template>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "lxp-table",
+                    standalone: true,
+                    imports: [CommonModule, FormsModule],
+                    template: `
+    <div class="lxp-table">
+      <div class="lxp-table__header">
+        <div class="lxp-table__title">
+          <h3 class="lxp-table__title-text">{{ title || defaultTitle }}</h3>
+          <span
+            *ngIf="totalItems > 0"
+            class="lxp-table__title-count"
+          >
+            ({{ totalItems }})
+          </span>
+        </div>
+
+        <div class="lxp-table__controls" *ngIf="showSearch">
+          <input
+            type="search"
+            class="lxp-table__search"
+            [placeholder]="searchPlaceholder || 'Search...'"
+            [(ngModel)]="searchTerm"
+            (ngModelChange)="onSearchChange($event)"
+          />
+        </div>
+      </div>
+
+      <div class="lxp-table__body-wrapper">
+        <table class="lxp-table__table">
+          <thead>
+            <tr>
+              <th
+                *ngIf="selectable"
+                class="lxp-table__cell lxp-table__cell--checkbox"
+              ></th>
+              <th
+                *ngFor="let column of columns"
+                class="lxp-table__cell lxp-table__cell--header"
+                [style.text-align]="column.align || 'left'"
+              >
+                {{ column.label }}
+              </th>
+              <th
+                *ngIf="actions?.length"
+                class="lxp-table__cell lxp-table__cell--header lxp-table__cell--actions"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngIf="loading">
+              <td
+                class="lxp-table__cell lxp-table__cell--status"
+                [attr.colspan]="columnSpan"
+              >
+                {{ loadingMessage }}
+              </td>
+            </tr>
+
+            <tr *ngIf="!loading && pagedData.length === 0">
+              <td
+                class="lxp-table__cell lxp-table__cell--status"
+                [attr.colspan]="columnSpan"
+              >
+                {{ emptyMessage }}
+              </td>
+            </tr>
+
+            <tr
+              *ngFor="let row of pagedData; let rowIndex = index"
+              class="lxp-table__row"
+              (click)="handleRowClick(row, rowIndex)"
+            >
+              <td
+                *ngIf="selectable"
+                class="lxp-table__cell lxp-table__cell--checkbox"
+              >
+                <input
+                  type="checkbox"
+                  [checked]="isRowSelected(globalRowIndex(rowIndex))"
+                  (click)="$event.stopPropagation()"
+                  (change)="toggleRowSelection(globalRowIndex(rowIndex))"
+                />
+              </td>
+
+              <td
+                *ngFor="let column of columns"
+                class="lxp-table__cell"
+                [style.text-align]="column.align || 'left'"
+              >
+                <ng-container [ngTemplateOutlet]="cellTemplate"
+                              [ngTemplateOutletContext]="{ column: column, row: row }">
+                </ng-container>
+              </td>
+
+              <td
+                *ngIf="actions?.length"
+                class="lxp-table__cell lxp-table__cell--actions"
+              >
+                <button
+                  *ngFor="let action of actions"
+                  type="button"
+                  class="lxp-table__action"
+                  [disabled]="isActionDisabled(action, row)"
+                  (click)="runAction(action, row); $event.stopPropagation()"
+                >
+                  {{ action.label }}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div
+        *ngIf="showPagination && totalPages > 1"
+        class="lxp-table__footer"
+      >
+        <div class="lxp-table__footer-info">
+          Page {{ currentPageInternal }} of {{ totalPages }}
+        </div>
+        <div class="lxp-table__footer-controls">
+          <label class="lxp-table__page-size">
+            <span>Rows per page</span>
+            <select
+              [ngModel]="pageSizeInternal"
+              (ngModelChange)="onPageSizeChangeInternal($event)"
+            >
+              <option *ngFor="let size of pageSizeOptionsInternal" [ngValue]="size">
+                {{ size }}
+              </option>
+            </select>
+          </label>
+
+          <button
+            type="button"
+            class="lxp-table__pager"
+            [disabled]="currentPageInternal === 1"
+            (click)="onPageChangeInternal(currentPageInternal - 1)"
+          >
+            Previous
+          </button>
+          <button
+            type="button"
+            class="lxp-table__pager"
+            [disabled]="currentPageInternal === totalPages"
+            (click)="onPageChangeInternal(currentPageInternal + 1)"
+          >
+            Next
+          </button>
+        </div>
+      </div>
+
+      <ng-template #cellTemplate let-column="column" let-row="row">
+        <ng-container *ngIf="column.render; else defaultCell">
+          {{ column.render(row[column.key], row) }}
+        </ng-container>
+        <ng-template #defaultCell>
+          <ng-container
+            *ngIf="isRichCell(row[column.key]); else plainCell"
+          >
+            <div class="lxp-table__cell-text">
+              <div class="lxp-table__cell-line1">
+                {{ row[column.key].line1 || row[column.key].text || row[column.key].name }}
+              </div>
+              <div
+                *ngIf="row[column.key].line2"
+                class="lxp-table__cell-line2"
+              >
+                {{ row[column.key].line2 }}
+              </div>
+            </div>
+          </ng-container>
+          <ng-template #plainCell>
+            {{ row[column.key] }}
+          </ng-template>
+        </ng-template>
+      </ng-template>
+    </div>
+  `,
+                }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], showPagination: [{
+                type: Input
+            }], showSearch: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], titleLink: [{
+                type: Input
+            }], serverSide: [{
+                type: Input
+            }], totalCount: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], emptyState: [{
+                type: Input
+            }], enableRowClick: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], onSelectionChange: [{
+                type: Output
+            }], onPageChange: [{
+                type: Output
+            }], onPageSizeChange: [{
+                type: Output
+            }], onSearch: [{
+                type: Output
+            }], onRowClick: [{
+                type: Output
+            }], fontFamily: [{
+                type: HostBinding,
+                args: ["style.fontFamily"]
+            }] } });
+
+class ThemeService {
+    themeSubject = new BehaviorSubject(defaultTheme);
+    theme$ = this.themeSubject.asObservable();
+    get theme() {
+        return this.themeSubject.value;
+    }
+    setTheme(theme) {
+        this.themeSubject.next(theme);
+    }
+    toggleTheme() {
+        this.themeSubject.next(this.theme === "tera" ? "cynk" : "tera");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+class ThemeSwitcherComponent {
+    themeService;
+    className;
+    showLabels = true;
+    constructor(themeService) {
+        this.themeService = themeService;
+    }
+    get label() {
+        return this.themeService.theme === "tera" ? "Tera theme" : "Cynk theme";
+    }
+    get shortLabel() {
+        return this.themeService.theme === "tera" ? "T" : "C";
+    }
+    get buttonTitle() {
+        const next = this.themeService.theme === "tera" ? "Cynk" : "Tera";
+        return `Switch to ${next} theme`;
+    }
+    toggleTheme() {
+        this.themeService.toggleTheme();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeSwitcherComponent, deps: [{ token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ThemeSwitcherComponent, isStandalone: true, selector: "lxp-theme-switcher", inputs: { className: "className", showLabels: "showLabels" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="lxp-theme-switcher"
+      [ngClass]="className"
+      (click)="toggleTheme()"
+      [title]="buttonTitle"
+    >
+      <ng-container *ngIf="showLabels; else iconOnly">
+        {{ label }}
+      </ng-container>
+      <ng-template #iconOnly>
+        {{ shortLabel }}
+      </ng-template>
+    </button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "lxp-theme-switcher",
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <button
+      type="button"
+      class="lxp-theme-switcher"
+      [ngClass]="className"
+      (click)="toggleTheme()"
+      [title]="buttonTitle"
+    >
+      <ng-container *ngIf="showLabels; else iconOnly">
+        {{ label }}
+      </ng-container>
+      <ng-template #iconOnly>
+        {{ shortLabel }}
+      </ng-template>
+    </button>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: ThemeService }], propDecorators: { className: [{
+                type: Input
+            }], showLabels: [{
+                type: Input
+            }] } });
+
+class BadgeComponent {
+    content;
+    label;
+    variant = "neutral";
+    dot = false;
+    id;
+    className;
+    testID;
+    get text() {
+        return this.content ?? this.label;
+    }
+    get v() {
+        return badgeConfig.variants[this.variant];
+    }
+    get containerStyles() {
+        const c = badgeConfig.common;
+        return {
+            display: "inline-flex",
+            "align-items": "center",
+            gap: `${c.gap}px`,
+            "background-color": this.v.backgroundColor,
+            color: this.v.color,
+            "border-radius": c.borderRadius,
+            "font-size": c.fontSize,
+            "font-weight": `${c.fontWeight}`,
+            padding: `${c.paddingVertical} ${c.paddingHorizontal}`,
+            "line-height": "1",
+        };
+    }
+    get dotStyles() {
+        const c = badgeConfig.common;
+        return {
+            width: `${c.dotSize}px`,
+            height: `${c.dotSize}px`,
+            "border-radius": "50%",
+            "background-color": this.v.color,
+            display: "inline-block",
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: BadgeComponent, isStandalone: true, selector: "lxp-badge", inputs: { content: "content", label: "label", variant: "variant", dot: "dot", id: "id", className: "className", testID: "testID" }, ngImport: i0, template: `
+    <span
+      [attr.id]="id"
+      [attr.data-testid]="testID"
+      [ngStyle]="containerStyles"
+    >
+      <span *ngIf="dot" [ngStyle]="dotStyles"></span>
+      {{ text }}
+    </span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "lxp-badge",
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <span
+      [attr.id]="id"
+      [attr.data-testid]="testID"
+      [ngStyle]="containerStyles"
+    >
+      <span *ngIf="dot" [ngStyle]="dotStyles"></span>
+      {{ text }}
+    </span>
+  `,
+                }]
+        }], propDecorators: { content: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], dot: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], testID: [{
+                type: Input
+            }] } });
+
+class TextFieldComponent {
+    label;
+    value;
+    placeholder;
+    helperText;
+    error;
+    disabled = false;
+    id;
+    className;
+    testID;
+    type = "text";
+    valueChange = new EventEmitter();
+    focused = false;
+    onInput(e) {
+        const val = e.target.value;
+        this.value = val;
+        this.valueChange.emit(val);
+    }
+    get state() {
+        return this.disabled
+            ? "disabled"
+            : this.error
+                ? "error"
+                : this.focused
+                    ? "focused"
+                    : "default";
+    }
+    get s() {
+        return textFieldConfig.states[this.state];
+    }
+    get c() {
+        return textFieldConfig.common;
+    }
+    get wrapperStyles() {
+        return { display: "flex", "flex-direction": "column", gap: this.c.gap };
+    }
+    get labelStyles() {
+        return {
+            "font-size": "13px",
+            "font-weight": "500",
+            color: this.c.labelColor,
+        };
+    }
+    get inputStyles() {
+        const s = this.s;
+        const c = this.c;
+        return {
+            "box-sizing": "border-box",
+            width: "100%",
+            border: `${s.borderWidth}px solid ${s.borderColor}`,
+            "background-color": s.backgroundColor,
+            "border-radius": c.borderRadius,
+            padding: `${c.paddingVertical} ${c.paddingHorizontal}`,
+            "font-size": c.fontSize,
+            color: c.textColor,
+            outline: "none",
+        };
+    }
+    get helperStyles() {
+        return {
+            "font-size": "12px",
+            color: this.error ? this.c.errorColor : this.c.helperColor,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TextFieldComponent, isStandalone: true, selector: "lxp-text-field", inputs: { label: "label", value: "value", placeholder: "placeholder", helperText: "helperText", error: "error", disabled: "disabled", id: "id", className: "className", testID: "testID", type: "type" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <div [ngStyle]="wrapperStyles">
+      <label *ngIf="label" [attr.for]="id" [ngStyle]="labelStyles">{{
+        label
+      }}</label>
+      <input
+        [attr.id]="id"
+        [attr.data-testid]="testID"
+        [type]="type"
+        [value]="value || ''"
+        [attr.placeholder]="placeholder"
+        [disabled]="disabled"
+        (input)="onInput($event)"
+        (focus)="focused = true"
+        (blur)="focused = false"
+        [ngStyle]="inputStyles"
+      />
+      <span *ngIf="error || helperText" [ngStyle]="helperStyles">{{
+        error || helperText
+      }}</span>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TextFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "lxp-text-field",
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div [ngStyle]="wrapperStyles">
+      <label *ngIf="label" [attr.for]="id" [ngStyle]="labelStyles">{{
+        label
+      }}</label>
+      <input
+        [attr.id]="id"
+        [attr.data-testid]="testID"
+        [type]="type"
+        [value]="value || ''"
+        [attr.placeholder]="placeholder"
+        [disabled]="disabled"
+        (input)="onInput($event)"
+        (focus)="focused = true"
+        (blur)="focused = false"
+        [ngStyle]="inputStyles"
+      />
+      <span *ngIf="error || helperText" [ngStyle]="helperStyles">{{
+        error || helperText
+      }}</span>
+    </div>
+  `,
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], testID: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class ChipComponent {
+    content;
+    label;
+    selected = false;
+    disabled = false;
+    id;
+    className;
+    testID;
+    onClick = new EventEmitter();
+    get text() {
+        return this.content ?? this.label;
+    }
+    get st() {
+        return this.selected ? chipConfig.states.active : chipConfig.states.default;
+    }
+    get styles() {
+        const c = chipConfig.common;
+        const st = this.st;
+        return {
+            "background-color": st.backgroundColor,
+            color: st.color,
+            border: st.borderWidth
+                ? `${st.borderWidth}px solid ${st.borderColor}`
+                : "none",
+            "border-radius": c.borderRadius,
+            "font-size": c.fontSize,
+            "font-weight": `${c.fontWeight}`,
+            padding: `${c.paddingVertical} ${c.paddingHorizontal}`,
+            cursor: this.disabled ? "not-allowed" : "pointer",
+            opacity: this.disabled ? "0.6" : "1",
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ChipComponent, isStandalone: true, selector: "lxp-chip", inputs: { content: "content", label: "label", selected: "selected", disabled: "disabled", id: "id", className: "className", testID: "testID" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <button
+      type="button"
+      [attr.id]="id"
+      [attr.data-testid]="testID"
+      [disabled]="disabled"
+      (click)="onClick.emit($event)"
+      [ngStyle]="styles"
+    >
+      {{ text }}
+    </button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "lxp-chip",
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <button
+      type="button"
+      [attr.id]="id"
+      [attr.data-testid]="testID"
+      [disabled]="disabled"
+      (click)="onClick.emit($event)"
+      [ngStyle]="styles"
+    >
+      {{ text }}
+    </button>
+  `,
+                }]
+        }], propDecorators: { content: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], testID: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class ToggleComponent {
+    checked = false;
+    disabled = false;
+    id;
+    className;
+    ariaLabel;
+    testID;
+    checkedChange = new EventEmitter();
+    toggle() {
+        this.checked = !this.checked;
+        this.checkedChange.emit(this.checked);
+    }
+    get trackStyles() {
+        const t = toggleConfig.track;
+        return {
+            width: `${t.width}px`,
+            height: `${t.height}px`,
+            "border-radius": t.borderRadius,
+            "background-color": this.checked ? t.onColor : t.offColor,
+            border: "none",
+            padding: `${t.padding}px`,
+            display: "inline-flex",
+            "align-items": "center",
+            "justify-content": this.checked ? "flex-end" : "flex-start",
+            cursor: this.disabled ? "not-allowed" : "pointer",
+            opacity: this.disabled ? `${toggleConfig.common.disabledOpacity}` : "1",
+            transition: "background-color 0.2s",
+        };
+    }
+    get knobStyles() {
+        const k = toggleConfig.knob;
+        return {
+            width: `${k.size}px`,
+            height: `${k.size}px`,
+            "border-radius": k.borderRadius,
+            "background-color": k.color,
+            "box-shadow": "0 1px 2px rgba(0,0,0,0.2)",
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ToggleComponent, isStandalone: true, selector: "lxp-toggle", inputs: { checked: "checked", disabled: "disabled", id: "id", className: "className", ariaLabel: "ariaLabel", testID: "testID" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: `
+    <button
+      type="button"
+      role="switch"
+      [attr.aria-checked]="checked"
+      [attr.aria-label]="ariaLabel"
+      [attr.id]="id"
+      [attr.data-testid]="testID"
+      [disabled]="disabled"
+      (click)="toggle()"
+      [ngStyle]="trackStyles"
+    >
+      <span [ngStyle]="knobStyles"></span>
+    </button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "lxp-toggle",
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <button
+      type="button"
+      role="switch"
+      [attr.aria-checked]="checked"
+      [attr.aria-label]="ariaLabel"
+      [attr.id]="id"
+      [attr.data-testid]="testID"
+      [disabled]="disabled"
+      (click)="toggle()"
+      [ngStyle]="trackStyles"
+    >
+      <span [ngStyle]="knobStyles"></span>
+    </button>
+  `,
+                }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], testID: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }] } });
+
+class RadioComponent {
+    checked = false;
+    disabled = false;
+    label;
+    value;
+    id;
+    className;
+    testID;
+    onSelect = new EventEmitter();
+    get st() {
+        return this.checked
+            ? radioConfig.states.selected
+            : radioConfig.states.unselected;
+    }
+    get c() {
+        return radioConfig.common;
+    }
+    get rootStyles() {
+        return {
+            display: "inline-flex",
+            "align-items": "center",
+            gap: `${this.c.gap}`,
+            background: "none",
+            border: "none",
+            padding: "0",
+            cursor: this.disabled ? "not-allowed" : "pointer",
+            opacity: this.disabled ? `${this.c.disabledOpacity}` : "1",
+        };
+    }
+    get circleStyles() {
+        const c = this.c;
+        return {
+            width: `${c.size}px`,
+            height: `${c.size}px`,
+            "border-radius": "50%",
+            border: `${c.borderWidth}px solid ${this.st.borderColor}`,
+            display: "inline-flex",
+            "align-items": "center",
+            "justify-content": "center",
+            "box-sizing": "border-box",
+        };
+    }
+    get dotStyles() {
+        const c = this.c;
+        return {
+            width: `${c.dotSize}px`,
+            height: `${c.dotSize}px`,
+            "border-radius": "50%",
+            "background-color": this.st.dotColor,
+        };
+    }
+    get labelStyles() {
+        return { "font-size": this.c.fontSize, color: this.c.labelColor };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: RadioComponent, isStandalone: true, selector: "lxp-radio", inputs: { checked: "checked", disabled: "disabled", label: "label", value: "value", id: "id", className: "className", testID: "testID" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: `
+    <button
+      type="button"
+      role="radio"
+      [attr.aria-checked]="checked"
+      [attr.id]="id"
+      [attr.data-testid]="testID"
+      [disabled]="disabled"
+      (click)="onSelect.emit(value)"
+      [ngStyle]="rootStyles"
+    >
+      <span [ngStyle]="circleStyles">
+        <span *ngIf="checked" [ngStyle]="dotStyles"></span>
+      </span>
+      <span *ngIf="label" [ngStyle]="labelStyles">{{ label }}</span>
+    </button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "lxp-radio",
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <button
+      type="button"
+      role="radio"
+      [attr.aria-checked]="checked"
+      [attr.id]="id"
+      [attr.data-testid]="testID"
+      [disabled]="disabled"
+      (click)="onSelect.emit(value)"
+      [ngStyle]="rootStyles"
+    >
+      <span [ngStyle]="circleStyles">
+        <span *ngIf="checked" [ngStyle]="dotStyles"></span>
+      </span>
+      <span *ngIf="label" [ngStyle]="labelStyles">{{ label }}</span>
+    </button>
+  `,
+                }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], testID: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }] } });
+
+class AvatarComponent {
+    initials;
+    src;
+    size = "md";
+    id;
+    className;
+    testID;
+    get s() {
+        return avatarConfig.sizes[this.size];
+    }
+    get rootStyles() {
+        const c = avatarConfig.common;
+        const s = this.s;
+        return {
+            width: `${s.size}px`,
+            height: `${s.size}px`,
+            "border-radius": c.borderRadius,
+            "background-color": c.backgroundColor,
+            color: c.color,
+            display: "inline-flex",
+            "align-items": "center",
+            "justify-content": "center",
+            "font-size": s.fontSize,
+            "font-weight": `${c.fontWeight}`,
+            overflow: "hidden",
+        };
+    }
+    get imgStyles() {
+        return { width: "100%", height: "100%", "object-fit": "cover" };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: AvatarComponent, isStandalone: true, selector: "lxp-avatar", inputs: { initials: "initials", src: "src", size: "size", id: "id", className: "className", testID: "testID" }, ngImport: i0, template: `
+    <span [attr.id]="id" [attr.data-testid]="testID" [ngStyle]="rootStyles">
+      <img
+        *ngIf="src; else initialsTpl"
+        [src]="src"
+        [attr.alt]="initials || ''"
+        [ngStyle]="imgStyles"
+      />
+      <ng-template #initialsTpl>{{ initials }}</ng-template>
+    </span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "lxp-avatar",
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <span [attr.id]="id" [attr.data-testid]="testID" [ngStyle]="rootStyles">
+      <img
+        *ngIf="src; else initialsTpl"
+        [src]="src"
+        [attr.alt]="initials || ''"
+        [ngStyle]="imgStyles"
+      />
+      <ng-template #initialsTpl>{{ initials }}</ng-template>
+    </span>
+  `,
+                }]
+        }], propDecorators: { initials: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], testID: [{
+                type: Input
+            }] } });
+
+class CardComponent {
+    padding = "md";
+    elevation = "sm";
+    bordered = true;
+    id;
+    className;
+    testID;
+    get styles() {
+        const c = cardConfig.common;
+        return {
+            "background-color": c.backgroundColor,
+            border: this.bordered
+                ? `${c.borderWidth}px solid ${c.borderColor}`
+                : "none",
+            "border-radius": c.borderRadius,
+            padding: cardConfig.paddings[this.padding],
+            "box-shadow": cardConfig.elevations[this.elevation],
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: CardComponent, isStandalone: true, selector: "lxp-card", inputs: { padding: "padding", elevation: "elevation", bordered: "bordered", id: "id", className: "className", testID: "testID" }, ngImport: i0, template: `
+    <div [attr.id]="id" [attr.data-testid]="testID" [ngStyle]="styles">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "lxp-card",
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div [attr.id]="id" [attr.data-testid]="testID" [ngStyle]="styles">
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], propDecorators: { padding: [{
+                type: Input
+            }], elevation: [{
+                type: Input
+            }], bordered: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], testID: [{
+                type: Input
+            }] } });
+
+class SegmentedControlComponent {
+    options = [];
+    value;
+    disabled = false;
+    id;
+    className;
+    testID;
+    valueChange = new EventEmitter();
+    get normalized() {
+        return (this.options || []).map((o) => typeof o === "string" ? { label: o, value: o } : o);
+    }
+    get c() {
+        return segmentedControlConfig.common;
+    }
+    get containerStyles() {
+        const c = this.c;
+        return {
+            display: "inline-flex",
+            "background-color": c.backgroundColor,
+            "border-radius": c.borderRadius,
+            padding: `${c.padding}px`,
+        };
+    }
+    segmentStyles(active) {
+        const c = this.c;
+        return {
+            border: "none",
+            cursor: this.disabled ? "not-allowed" : "pointer",
+            "background-color": active ? c.activeBackground : "transparent",
+            color: active ? c.activeColor : c.inactiveColor,
+            "border-radius": c.segmentRadius,
+            "font-size": c.fontSize,
+            "font-weight": `${c.fontWeight}`,
+            padding: `${c.segmentPaddingVertical} ${c.segmentPaddingHorizontal}`,
+            "box-shadow": active ? c.activeShadow : "none",
+            transition: "all 0.15s",
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: SegmentedControlComponent, isStandalone: true, selector: "lxp-segmented-control", inputs: { options: "options", value: "value", disabled: "disabled", id: "id", className: "className", testID: "testID" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <div
+      [attr.id]="id"
+      [attr.data-testid]="testID"
+      role="tablist"
+      [ngStyle]="containerStyles"
+    >
+      <button
+        *ngFor="let o of normalized"
+        type="button"
+        role="tab"
+        [attr.aria-selected]="o.value === value"
+        [disabled]="disabled"
+        (click)="valueChange.emit(o.value)"
+        [ngStyle]="segmentStyles(o.value === value)"
+      >
+        {{ o.label }}
+      </button>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SegmentedControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "lxp-segmented-control",
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div
+      [attr.id]="id"
+      [attr.data-testid]="testID"
+      role="tablist"
+      [ngStyle]="containerStyles"
+    >
+      <button
+        *ngFor="let o of normalized"
+        type="button"
+        role="tab"
+        [attr.aria-selected]="o.value === value"
+        [disabled]="disabled"
+        (click)="valueChange.emit(o.value)"
+        [ngStyle]="segmentStyles(o.value === value)"
+      >
+        {{ o.label }}
+      </button>
+    </div>
+  `,
+                }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], testID: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class QuantityStepperComponent {
+    value = 0;
+    min = 0;
+    max = Number.POSITIVE_INFINITY;
+    step = 1;
+    disabled = false;
+    id;
+    className;
+    testID;
+    valueChange = new EventEmitter();
+    set(v) {
+        const nv = Math.max(this.min, Math.min(this.max, v));
+        this.value = nv;
+        this.valueChange.emit(nv);
+    }
+    get c() {
+        return quantityStepperConfig.common;
+    }
+    get containerStyles() {
+        const c = this.c;
+        return {
+            display: "inline-flex",
+            "align-items": "stretch",
+            border: `1px solid ${c.borderColor}`,
+            "border-radius": c.borderRadius,
+            overflow: "hidden",
+            opacity: this.disabled ? `${c.disabledOpacity}` : "1",
+        };
+    }
+    get buttonStyles() {
+        const c = this.c;
+        return {
+            width: `${c.buttonWidth}px`,
+            height: `${c.height}px`,
+            border: "none",
+            "background-color": c.buttonBackground,
+            color: c.buttonColor,
+            "font-size": c.fontSize,
+            "font-weight": `${c.fontWeight}`,
+            cursor: "pointer",
+        };
+    }
+    get valueStyles() {
+        const c = this.c;
+        return {
+            "min-width": `${c.valueWidth}px`,
+            height: `${c.height}px`,
+            display: "inline-flex",
+            "align-items": "center",
+            "justify-content": "center",
+            "background-color": c.valueBackground,
+            color: c.valueColor,
+            "font-size": c.fontSize,
+            "font-weight": `${c.fontWeight}`,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: QuantityStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: QuantityStepperComponent, isStandalone: true, selector: "lxp-quantity-stepper", inputs: { value: "value", min: "min", max: "max", step: "step", disabled: "disabled", id: "id", className: "className", testID: "testID" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <div [attr.id]="id" [attr.data-testid]="testID" [ngStyle]="containerStyles">
+      <button
+        type="button"
+        [disabled]="disabled || value <= min"
+        (click)="set(value - step)"
+        [ngStyle]="buttonStyles"
+      >
+        −
+      </button>
+      <span [ngStyle]="valueStyles">{{ value }}</span>
+      <button
+        type="button"
+        [disabled]="disabled || value >= max"
+        (click)="set(value + step)"
+        [ngStyle]="buttonStyles"
+      >
+        +
+      </button>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: QuantityStepperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "lxp-quantity-stepper",
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div [attr.id]="id" [attr.data-testid]="testID" [ngStyle]="containerStyles">
+      <button
+        type="button"
+        [disabled]="disabled || value <= min"
+        (click)="set(value - step)"
+        [ngStyle]="buttonStyles"
+      >
+        −
+      </button>
+      <span [ngStyle]="valueStyles">{{ value }}</span>
+      <button
+        type="button"
+        [disabled]="disabled || value >= max"
+        (click)="set(value + step)"
+        [ngStyle]="buttonStyles"
+      >
+        +
+      </button>
+    </div>
+  `,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], testID: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent };
+export { AvatarComponent, BadgeComponent, ButtonComponent, CardComponent, ChipComponent, QuantityStepperComponent, RadioComponent, SegmentedControlComponent, TableComponent, TextFieldComponent, ThemeService, ThemeSwitcherComponent, ToggleComponent };
 //# sourceMappingURL=lamenna-lxp-angular.mjs.map