@lamenna/lxp-angular 0.1.0 → 0.3.0

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

@@ -2,7 +2,7 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, HostBinding, Output, Input, Component, Injectable } from '@angular/core';
-import { buttonConfig, tableThemeConfig, tableConfig, defaultTheme } from '@lamenna/lxp-shared-components';
+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';
@@ -759,9 +759,883 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 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, TableComponent, ThemeService, ThemeSwitcherComponent };
+export { AvatarComponent, BadgeComponent, ButtonComponent, CardComponent, ChipComponent, QuantityStepperComponent, RadioComponent, SegmentedControlComponent, TableComponent, TextFieldComponent, ThemeService, ThemeSwitcherComponent, ToggleComponent };
 //# sourceMappingURL=lamenna-lxp-angular.mjs.map