@3ddv/software-division-components 1.5.0 → 2.0.0

package/{README.md → dist/README.md}

@@ -2,11 +2,15 @@
 
 ## **Overview**
 
-![Angular Badge](https://img.shields.io/badge/Angular-19.2.0-dd0031?logo=angular&style=for-the-badge)
+![Angular Badge](https://img.shields.io/badge/Angular-21.0.0-dd0031?logo=angular&style=for-the-badge)
 ![Storybook Badge](https://img.shields.io/badge/Storybook-8.4.5-ff4785?logo=storybook&style=for-the-badge)
 
 The Software Division Components library is a wrapper around the [SpartanNG](https://spartan.ng/documentation/introduction) component library. It enhances SpartanNG components by providing additional functionality tailored to the common requirements of applications developed within the Software Division department. It also uses [Angular](https://v18.angular.dev/) for application development and [Storybook](https://storybook.js.org/) for interactive component documentation and testing.
 
+## Migrate from v1 to v2
+
+The v2 introduces multiple entrypoints to ensure tree-shaking and other optimizations to reduce bundle size. [Here is a detailed guide for migrating from v1 to v2](./docs/v2_migration_guide.md)
+
 ## **Installation**
 
 [Refer to the dedicated docs page](./docs/installation.md)
@@ -130,7 +134,7 @@ import { ButtonComponent } from '@3ddv/software-division-components/generic/butt
 
 This library is a wrapper to an already existing component library (SpartanNG), which means that there are some styles that are already present in all the exported components. These styles are kept intact whenever the `backoffice` theme parameter is passed to the `provideSdc` method. You also have the option of passing the `generic` parameter, which in turn makes the component align to the design that several ticketing applications share. If no parameter is passed, the `generic` is assigned as a fallback option. You can check that design [here](https://xd.adobe.com/view/0ea7033e-8fdf-4fcd-8215-546d1df20d37-5bf4/), [here](https://xd.adobe.com/view/c640d5a1-b5d3-4379-8684-fb860f95f052-9313/grid) and [here](https://xd.adobe.com/view/50a2d5c5-e2e1-413f-b7a5-8f3d61c88026-05f1/screen/65dee679-9942-4a63-b790-40e3b1fec39b/).
 
-Styling components consist of passing down CSS classes that consist of SpartanNG variables. Go by as if you were styling a common HTML element. Every component has a `styleClasses` input which accepts a single or several whitespace-separated CSS class/classes declared within the using application. To see the variables that each component has, please check the official PrimeNG documentation per each component. Here you can see an example for the (button component)[https://spartan.ng/components/button]. The column _Variable_ includes every single class that you can use within the your CSS classes which you will later pass into the library button to style it. The result looks as follows:
+Styling components consist of passing down CSS classes that consist of SpartanNG variables. Go by as if you were styling a common HTML element. Every component has a `styleClasses` input which accepts a single or several whitespace-separated CSS class/classes declared within the using application. To see the variables that each component has, please check the official PrimeNG documentation per each component. Here you can see an example for the [button component](https://spartan.ng/components/button). The column _Variable_ includes every single class that you can use within the your CSS classes which you will later pass into the library button to style it. The result looks as follows:
 
 ```css
 .my-class {
@@ -154,7 +158,7 @@ If you are facing any specifity problems, each component also has an ID referenc
 
 #### Encapsulation issues
 
-Most of the time you will be declaring your styles with a CSS file declared within the component scope (my-component.component.css) and later import it with _styleUrl_ or _stylesUrl_ in your component. In that scenario, you will be dealing with the default (component View Encapsulation)[https://angular.dev/guide/components/styling] setting, which does not allow a parent component to apply styles to the child component. This brings a problem when it comes to passing down CSS classes to the library components. Following similar practices from other component librariess, we bring the option to bypass View Encapsulation for a certain CSS class by declaring your classes with a pseudo-class selector:
+Most of the time you will be declaring your styles with a CSS file declared within the component scope (my-component.component.css) and later import it with _styleUrl_ or _stylesUrl_ in your component. In that scenario, you will be dealing with the default [component View Encapsulation](https://angular.dev/guide/components/styling) setting, which does not allow a parent component to apply styles to the child component. This brings a problem when it comes to passing down CSS classes to the library components. Following similar practices from other component librariess, we bring the option to bypass View Encapsulation for a certain CSS class by declaring your classes with a pseudo-class selector:
 
 Depending on the Encapsulation option that you are using in your component, some styles will not apply. In that scenario, declare the style as follows:
 
@@ -442,10 +446,10 @@ By following this approach, we ensure that:
 
 Any further information regarding the BEM methodology can be found through the following links:
 
-- https://css-tricks.com/bem-101/
-- https://getbem.com/introduction/
-- https://stackoverflow.com/questions/36703546/what-is-bem-methodology
-- https://gauravmahlawat.github.io/online-bem-generator.html#google_vignette
+- <https://css-tricks.com/bem-101/>
+- <https://getbem.com/introduction/>
+- <https://stackoverflow.com/questions/36703546/what-is-bem-methodology>
+- <https://gauravmahlawat.github.io/online-bem-generator.html#google_vignette>
 
 #### Why are we not internally using Tailwind or SCSS?
 

package/dist/fesm2022/3ddv-software-division-components-backoffice-checkbox.mjs

@@ -0,0 +1,208 @@
+import * as i0 from '@angular/core';
+import { input, computed, signal, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormSubmittedEvent, ReactiveFormsModule } from '@angular/forms';
+
+/**
+ * A customizable checkbox component.
+ *
+ * This component supports various configurations and exposes all Spartan UI checkbox functionality.
+ * All HTML checkbox attributes and events are automatically forwarded to the inner checkbox element.
+ *
+ * @since 1.0.0-alpha.1
+ */
+class CheckboxComponent {
+    allowedVariants = [
+        'variant-primary',
+        'variant-secondary',
+        'variant-alternative',
+        'variant-success',
+        'variant-warning',
+        'variant-danger',
+    ];
+    allowedSizes = ['size-sm', 'size-md', 'size-lg', 'size-xl'];
+    /**
+     * The current theme applied to the component.
+     */
+    theme = input('theme-sdc', ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    /**
+     * Predefined styles to apply to the component.
+     * Can be a single class or multiple classes from different categories.
+     */
+    styleClass = input([], ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    // Computed signal that validates and filters the styleClass checkbox
+    _validatedStyleClass = computed(() => {
+        const value = this.styleClass();
+        if (!Array.isArray(value)) {
+            return [];
+        }
+        const validValues = value.filter(style => {
+            return (this.allowedVariants.includes(style) ||
+                this.allowedSizes.includes(style));
+        });
+        const invalidValues = value.filter(style => {
+            return (!this.allowedVariants.includes(style) &&
+                !this.allowedSizes.includes(style));
+        });
+        if (invalidValues.length > 0) {
+            throw new Error(`CheckboxComponent: Invalid styleClass values ignored: ${invalidValues.join(', ')}. Allowed values: ${[
+                ...this.allowedVariants,
+                ...this.allowedSizes,
+            ].join(', ')}`);
+        }
+        return validValues;
+    }, ...(ngDevMode ? [{ debugName: "_validatedStyleClass" }] : []));
+    /**
+     * Additional CSS classes to apply to the component.
+     */
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+    /**
+     * Whether the component is disabled.
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * The label text to display above or to the left of the checkbox.
+     * Only visible when a value is provided.
+     */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    /**
+     * The position of the label relative to the checkbox.
+     */
+    labelPosition = input('left', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    /**
+     * The name of the form control.
+     */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    /**
+     * The FormControl instance to bind to this checkbox.
+     * This allows the component to access form state without circular dependencies.
+     */
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    /**
+     * The value of the checkbox.
+     */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Whether the checkbox is checked.
+     */
+    isChecked = signal(false, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+    /**
+     * Computed class string that combines theme and user classes.
+     */
+    computedClass = computed(() => {
+        const themeClass = this.theme();
+        const styleClass = this._validatedStyleClass();
+        const className = this.className();
+        const labelClass = this.labelPosition() === 'left' ? 'sdc-checkbox-label-left' : 'sdc-checkbox-label-right';
+        const checkedClass = this.isChecked() ? 'sdc-checkbox-checked' : '';
+        return ['sdc-checkbox', themeClass, ...styleClass, className, labelClass, checkedClass].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    /**
+     * Custom error message to override the validator's error message.
+     */
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    /**
+     * Controls when errors are displayed.
+     * - 'after-submit': Show errors only after form submission (default)
+     * - 'always': Show errors immediately when validation fails
+     */
+    errorDisplayMode = input('after-submit', ...(ngDevMode ? [{ debugName: "errorDisplayMode" }] : []));
+    /**
+     * The state of the form control.
+     */
+    controlState = signal({ errors: null, invalid: false, isFormSubmitted: false }, ...(ngDevMode ? [{ debugName: "controlState" }] : []));
+    /**
+     * Computed signal to get the current error message.
+     */
+    currentErrorMessage = computed(() => {
+        const customMessage = this.errorMessage();
+        const hasErrors = Object.keys(this.controlState()?.errors ?? {}).length > 0;
+        if (hasErrors && customMessage && customMessage.trim().length > 0) {
+            return customMessage;
+        }
+        // If no custom message, try to get validation error from the form control state
+        if (hasErrors) {
+            const firstErrorKey = Object.keys(this.controlState()?.errors ?? {})[0];
+            return this.getValidatorErrorMessage(firstErrorKey);
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "currentErrorMessage" }] : []));
+    /**
+     * Computed signal to determine if there's an error to display.
+     */
+    showError = computed(() => {
+        const errorMode = this.errorDisplayMode();
+        // For validation errors, respect the error display mode
+        if (this.controlState()?.invalid) {
+            if (errorMode === 'always') {
+                // Show errors when component is touched and invalid
+                return true;
+            }
+            else if (errorMode === 'after-submit') {
+                // Show errors when form is submitted, regardless of touch/focus state
+                return this.controlState()?.isFormSubmitted;
+            }
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    /**
+     * Subscriptions to the control's value changes.
+     */
+    subscriptions = [];
+    ngOnInit() {
+        this.isChecked.set(this.control()?.value === this.value());
+        const formEventsSubscription = this.control()?.parent?.events.subscribe(event => {
+            // We do not reset this signal because it is used to show the errors
+            // When a form is submitted at least once, we want to show the errors
+            if (event instanceof FormSubmittedEvent) {
+                this.controlState.set({
+                    ...this.controlState(),
+                    isFormSubmitted: true,
+                    errors: this.control()?.errors || null,
+                });
+                // We add this because the statusChanges event is not triggered when the form is submitted
+                if (event.source.status === 'INVALID') {
+                    this.controlState.set({ ...this.controlState(), invalid: true });
+                }
+            }
+        });
+        // Listen to changes on this specific checkbox's control
+        const valueChangesSubscription = this.control()?.valueChanges.subscribe(value => {
+            this.isChecked.set(value === this.value());
+        });
+        const statusChangesSubscription = this.control()?.statusChanges.subscribe(status => {
+            if (status === 'INVALID') {
+                this.controlState.set({ ...this.controlState(), invalid: true });
+            }
+            this.controlState.set({ ...this.controlState(), errors: this.control()?.errors || null });
+        });
+        this.subscriptions.push(formEventsSubscription, valueChangesSubscription, statusChangesSubscription);
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => subscription?.unsubscribe());
+    }
+    /**
+     * Gets the error message for a specific validator error.
+     */
+    getValidatorErrorMessage(errorKey) {
+        switch (errorKey) {
+            case 'required':
+                return 'This field is required.';
+            default:
+                return 'This field is required.';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CheckboxComponent, isStandalone: true, selector: "sdc-checkbox", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplayMode: { classPropertyName: "errorDisplayMode", publicName: "errorDisplayMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"computedClass()\">\n  <label class=\"component-container\" [for]=\"name()\">\n    <span class=\"checkbox-label\">{{ label() }}</span>\n\n    <input\n      class=\"checkbox-input\"\n      [id]=\"name()\"\n      [formControl]=\"control()\"\n      type=\"checkbox\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [checked]=\"isChecked()\" />\n\n    <span class=\"checkmark\"></span>\n  </label>\n\n  <!-- Error message  -->\n  @if (showError()) {\n    <div class=\"sdc-checkbox-error\">\n      {{ currentErrorMessage() }}\n    </div>\n  }\n</div>\n", styles: [".sdc-checkbox{--sdc-checkbox-label-color: var(--color-primary);--sdc-checkbox-label-size: var(--text-base);--sdc-checkbox-label-weight: var(--font-semibold);--sdc-checkbox-label-gap: var(--space-6);--sdc-checkbox-label-width: auto;--sdc-checkmark-container-background: var(--color-pure-white);--sdc-checkmark-container-border-color: var(--color-neutral-300);--sdc-checkmark-container-border-width: var(--border-default);--sdc-checkmark-container-border-radius: var(--radius-sm);--sdc-checkmark-container-size: var(--space-5);--sdc-checkmark-element-color: var(--color-primary);--sdc-checkmark-element-border-radius: var(--radius-full);--sdc-checkmark-element-line-width: var(--border-4);--sdc-checkbox-error-color: var(--color-danger);--sdc-checkbox-error-text-size: var(--text-xs);--sdc-checkbox-error-gap: var(--space-1);width:max-content;font-size:var(--sdc-checkbox-label-size);color:hsl(var(--sdc-checkbox-label-color));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.component-container{display:block;position:relative;cursor:pointer}.checkbox-label{display:block;width:var(--sdc-checkbox-label-width)}.checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:50%;transform:translateY(-50%);height:var(--sdc-checkmark-container-size);width:var(--sdc-checkmark-container-size);background-color:hsl(var(--sdc-checkmark-container-background));border:var(--sdc-checkmark-container-border-width) solid hsl(var(--sdc-checkmark-container-border-color));border-radius:var(--sdc-checkmark-container-border-radius)}.sdc-checkbox-label-right .checkbox-label{--sdc-checkbox-label-width: var(--space-24);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdc-checkbox-label-left.sdc-checkbox .component-container{padding-left:calc(var(--sdc-checkmark-container-size) + var(--sdc-checkbox-label-gap))}.sdc-checkbox-label-right.sdc-checkbox .component-container{padding-right:calc(var(--sdc-checkmark-container-size) + var(--sdc-checkbox-label-gap))}.sdc-checkbox-label-left .checkmark{left:0;right:auto}.sdc-checkbox-label-right .checkmark{left:auto;right:0}.sdc-checkbox:hover .checkbox-input~.checkmark{--sdc-checkmark-container-border-color: var(--sdc-checkmark-element-color)}.checkbox-input:checked~.checkmark{background-color:hsl(var(--sdc-checkmark-container-background))}.checkmark:after{content:\"\";position:absolute;display:none}.checkbox-input:checked~.checkmark:after{display:block}.checkmark:after{top:calc(var(--sdc-checkmark-container-size) * .07);left:calc(var(--sdc-checkmark-container-size) * .3);height:calc(var(--sdc-checkmark-container-size) * .6);width:calc(var(--sdc-checkmark-container-size) * .4);border:solid hsl(var(--sdc-checkmark-element-color));border-width:0 var(--sdc-checkmark-element-line-width) var(--sdc-checkmark-element-line-width) 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.sdc-checkbox-error{color:hsl(var(--sdc-checkbox-error-color));font-size:var(--sdc-checkbox-error-text-size);line-height:1rem;padding-top:var(--sdc-checkbox-error-gap)}.variant-primary.sdc-checkbox{--sdc-checkbox-label-color: var(--color-primary);--sdc-checkmark-element-color: var(--color-primary)}.variant-secondary.sdc-checkbox{--sdc-checkbox-label-color: var(--color-secondary);--sdc-checkmark-element-color: var(--color-secondary)}.variant-alternative.sdc-checkbox{--sdc-checkbox-label-color: var(--color-alternative);--sdc-checkmark-element-color: var(--color-alternative)}.variant-success.sdc-checkbox{--sdc-checkbox-label-color: var(--color-success);--sdc-checkmark-element-color: var(--color-success)}.variant-warning.sdc-checkbox{--sdc-checkbox-label-color: var(--color-warning);--sdc-checkmark-element-color: var(--color-warning)}.variant-danger.sdc-checkbox{--sdc-checkbox-label-color: var(--color-danger);--sdc-checkmark-element-color: var(--color-danger)}.size-sm.sdc-checkbox{--sdc-checkbox-label-size: var(--text-sm);--sdc-checkbox-label-gap: var(--space-1);--sdc-checkmark-container-size: var(--space-4);--sdc-checkmark-element-line-width: var(--border-3)}.size-sm.sdc-checkbox .checkmark:after{top:calc(var(--sdc-checkmark-container-size) * .07);left:calc(var(--sdc-checkmark-container-size) * .3);height:calc(var(--sdc-checkmark-container-size) * .5);width:calc(var(--sdc-checkmark-container-size) * .35)}.size-md.sdc-checkbox{--sdc-checkbox-label-size: var(--text-base);--sdc-checkbox-label-gap: var(--space-2);--sdc-checkmark-container-size: var(--space-5);--sdc-checkmark-element-line-width: var(--border-4)}.size-lg.sdc-checkbox{--sdc-checkbox-label-size: var(--text-lg);--sdc-checkbox-label-gap: var(--space-3);--sdc-checkmark-container-size: var(--space-6);--sdc-checkmark-element-line-width: var(--border-4)}.size-xl.sdc-checkbox{--sdc-checkbox-label-size: var(--text-xl);--sdc-checkbox-label-gap: var(--space-4);--sdc-checkmark-container-size: var(--space-7);--sdc-checkmark-element-line-width: var(--border-4)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sdc-checkbox', imports: [ReactiveFormsModule], template: "<div [class]=\"computedClass()\">\n  <label class=\"component-container\" [for]=\"name()\">\n    <span class=\"checkbox-label\">{{ label() }}</span>\n\n    <input\n      class=\"checkbox-input\"\n      [id]=\"name()\"\n      [formControl]=\"control()\"\n      type=\"checkbox\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [checked]=\"isChecked()\" />\n\n    <span class=\"checkmark\"></span>\n  </label>\n\n  <!-- Error message  -->\n  @if (showError()) {\n    <div class=\"sdc-checkbox-error\">\n      {{ currentErrorMessage() }}\n    </div>\n  }\n</div>\n", styles: [".sdc-checkbox{--sdc-checkbox-label-color: var(--color-primary);--sdc-checkbox-label-size: var(--text-base);--sdc-checkbox-label-weight: var(--font-semibold);--sdc-checkbox-label-gap: var(--space-6);--sdc-checkbox-label-width: auto;--sdc-checkmark-container-background: var(--color-pure-white);--sdc-checkmark-container-border-color: var(--color-neutral-300);--sdc-checkmark-container-border-width: var(--border-default);--sdc-checkmark-container-border-radius: var(--radius-sm);--sdc-checkmark-container-size: var(--space-5);--sdc-checkmark-element-color: var(--color-primary);--sdc-checkmark-element-border-radius: var(--radius-full);--sdc-checkmark-element-line-width: var(--border-4);--sdc-checkbox-error-color: var(--color-danger);--sdc-checkbox-error-text-size: var(--text-xs);--sdc-checkbox-error-gap: var(--space-1);width:max-content;font-size:var(--sdc-checkbox-label-size);color:hsl(var(--sdc-checkbox-label-color));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.component-container{display:block;position:relative;cursor:pointer}.checkbox-label{display:block;width:var(--sdc-checkbox-label-width)}.checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:50%;transform:translateY(-50%);height:var(--sdc-checkmark-container-size);width:var(--sdc-checkmark-container-size);background-color:hsl(var(--sdc-checkmark-container-background));border:var(--sdc-checkmark-container-border-width) solid hsl(var(--sdc-checkmark-container-border-color));border-radius:var(--sdc-checkmark-container-border-radius)}.sdc-checkbox-label-right .checkbox-label{--sdc-checkbox-label-width: var(--space-24);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdc-checkbox-label-left.sdc-checkbox .component-container{padding-left:calc(var(--sdc-checkmark-container-size) + var(--sdc-checkbox-label-gap))}.sdc-checkbox-label-right.sdc-checkbox .component-container{padding-right:calc(var(--sdc-checkmark-container-size) + var(--sdc-checkbox-label-gap))}.sdc-checkbox-label-left .checkmark{left:0;right:auto}.sdc-checkbox-label-right .checkmark{left:auto;right:0}.sdc-checkbox:hover .checkbox-input~.checkmark{--sdc-checkmark-container-border-color: var(--sdc-checkmark-element-color)}.checkbox-input:checked~.checkmark{background-color:hsl(var(--sdc-checkmark-container-background))}.checkmark:after{content:\"\";position:absolute;display:none}.checkbox-input:checked~.checkmark:after{display:block}.checkmark:after{top:calc(var(--sdc-checkmark-container-size) * .07);left:calc(var(--sdc-checkmark-container-size) * .3);height:calc(var(--sdc-checkmark-container-size) * .6);width:calc(var(--sdc-checkmark-container-size) * .4);border:solid hsl(var(--sdc-checkmark-element-color));border-width:0 var(--sdc-checkmark-element-line-width) var(--sdc-checkmark-element-line-width) 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.sdc-checkbox-error{color:hsl(var(--sdc-checkbox-error-color));font-size:var(--sdc-checkbox-error-text-size);line-height:1rem;padding-top:var(--sdc-checkbox-error-gap)}.variant-primary.sdc-checkbox{--sdc-checkbox-label-color: var(--color-primary);--sdc-checkmark-element-color: var(--color-primary)}.variant-secondary.sdc-checkbox{--sdc-checkbox-label-color: var(--color-secondary);--sdc-checkmark-element-color: var(--color-secondary)}.variant-alternative.sdc-checkbox{--sdc-checkbox-label-color: var(--color-alternative);--sdc-checkmark-element-color: var(--color-alternative)}.variant-success.sdc-checkbox{--sdc-checkbox-label-color: var(--color-success);--sdc-checkmark-element-color: var(--color-success)}.variant-warning.sdc-checkbox{--sdc-checkbox-label-color: var(--color-warning);--sdc-checkmark-element-color: var(--color-warning)}.variant-danger.sdc-checkbox{--sdc-checkbox-label-color: var(--color-danger);--sdc-checkmark-element-color: var(--color-danger)}.size-sm.sdc-checkbox{--sdc-checkbox-label-size: var(--text-sm);--sdc-checkbox-label-gap: var(--space-1);--sdc-checkmark-container-size: var(--space-4);--sdc-checkmark-element-line-width: var(--border-3)}.size-sm.sdc-checkbox .checkmark:after{top:calc(var(--sdc-checkmark-container-size) * .07);left:calc(var(--sdc-checkmark-container-size) * .3);height:calc(var(--sdc-checkmark-container-size) * .5);width:calc(var(--sdc-checkmark-container-size) * .35)}.size-md.sdc-checkbox{--sdc-checkbox-label-size: var(--text-base);--sdc-checkbox-label-gap: var(--space-2);--sdc-checkmark-container-size: var(--space-5);--sdc-checkmark-element-line-width: var(--border-4)}.size-lg.sdc-checkbox{--sdc-checkbox-label-size: var(--text-lg);--sdc-checkbox-label-gap: var(--space-3);--sdc-checkmark-container-size: var(--space-6);--sdc-checkmark-element-line-width: var(--border-4)}.size-xl.sdc-checkbox{--sdc-checkbox-label-size: var(--text-xl);--sdc-checkbox-label-gap: var(--space-4);--sdc-checkmark-container-size: var(--space-7);--sdc-checkmark-element-line-width: var(--border-4)}\n"] }]
+        }], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplayMode", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckboxComponent };
+//# sourceMappingURL=3ddv-software-division-components-backoffice-checkbox.mjs.map

package/dist/fesm2022/3ddv-software-division-components-backoffice-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"3ddv-software-division-components-backoffice-checkbox.mjs","sources":["../../backoffice/checkbox/checkbox.component.ts","../../backoffice/checkbox/checkbox.component.html","../../backoffice/checkbox/3ddv-software-division-components-backoffice-checkbox.ts"],"sourcesContent":["import { ThemeClass } from '@3ddv/software-division-components/shared';\nimport { Component, computed, input, OnDestroy, OnInit, signal } from '@angular/core';\nimport { FormControl, FormSubmittedEvent, ReactiveFormsModule, ValidationErrors } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nexport type CheckboxStyleClasses = ReturnType<(typeof CheckboxComponent.prototype)['styleClass']>;\n\n/**\n * A customizable checkbox component.\n *\n * This component supports various configurations and exposes all Spartan UI checkbox functionality.\n * All HTML checkbox attributes and events are automatically forwarded to the inner checkbox element.\n *\n * @since 1.0.0-alpha.1\n */\n@Component({\n  standalone: true,\n  selector: 'sdc-checkbox',\n  styleUrls: ['./checkbox.component.css'],\n  templateUrl: './checkbox.component.html',\n  imports: [ReactiveFormsModule],\n})\nexport class CheckboxComponent implements OnInit, OnDestroy {\n  private readonly allowedVariants = [\n    'variant-primary',\n    'variant-secondary',\n    'variant-alternative',\n    'variant-success',\n    'variant-warning',\n    'variant-danger',\n  ] as const;\n  private readonly allowedSizes = ['size-sm', 'size-md', 'size-lg', 'size-xl'] as const;\n\n  /**\n   * The current theme applied to the component.\n   */\n  public readonly theme = input<ThemeClass>('theme-sdc');\n\n  /**\n   * Predefined styles to apply to the component.\n   * Can be a single class or multiple classes from different categories.\n   */\n  public readonly styleClass = input<((typeof this.allowedVariants)[number] | (typeof this.allowedSizes)[number])[]>(\n    []\n  );\n\n  // Computed signal that validates and filters the styleClass checkbox\n  private readonly _validatedStyleClass = computed(() => {\n    const value = this.styleClass();\n\n    if (!Array.isArray(value)) {\n      return [];\n    }\n\n    const validValues = value.filter(style => {\n      return (\n        (this.allowedVariants as readonly string[]).includes(style) ||\n        (this.allowedSizes as readonly string[]).includes(style)\n      );\n    });\n\n    const invalidValues = value.filter(style => {\n      return (\n        !(this.allowedVariants as readonly string[]).includes(style) &&\n        !(this.allowedSizes as readonly string[]).includes(style)\n      );\n    });\n\n    if (invalidValues.length > 0) {\n      throw new Error(\n        `CheckboxComponent: Invalid styleClass values ignored: ${invalidValues.join(', ')}. Allowed values: ${[\n          ...this.allowedVariants,\n          ...this.allowedSizes,\n        ].join(', ')}`\n      );\n    }\n\n    return validValues;\n  });\n\n  /**\n   * Additional CSS classes to apply to the component.\n   */\n  public readonly className = input<string>('');\n\n  /**\n   * Whether the component is disabled.\n   */\n  public readonly disabled = input<boolean>(false);\n\n  /**\n   * The label text to display above or to the left of the checkbox.\n   * Only visible when a value is provided.\n   */\n  public readonly label = input.required<string>();\n\n  /**\n   * The position of the label relative to the checkbox.\n   */\n  public readonly labelPosition = input<'left' | 'right'>('left');\n\n  /**\n   * The name of the form control.\n   */\n  public readonly name = input.required<string>();\n\n  /**\n   * The FormControl instance to bind to this checkbox.\n   * This allows the component to access form state without circular dependencies.\n   */\n  public readonly control = input.required<FormControl>();\n\n  /**\n   * The value of the checkbox.\n   */\n  public readonly value = input.required<string>();\n\n  /**\n   * Whether the checkbox is checked.\n   */\n  public readonly isChecked = signal<boolean>(false);\n\n  /**\n   * Computed class string that combines theme and user classes.\n   */\n  protected readonly computedClass = computed(() => {\n    const themeClass = this.theme();\n    const styleClass = this._validatedStyleClass();\n    const className = this.className();\n    const labelClass = this.labelPosition() === 'left' ? 'sdc-checkbox-label-left' : 'sdc-checkbox-label-right';\n    const checkedClass = this.isChecked() ? 'sdc-checkbox-checked' : '';\n    return ['sdc-checkbox', themeClass, ...styleClass, className, labelClass, checkedClass].filter(Boolean).join(' ');\n  });\n\n  /**\n   * Custom error message to override the validator's error message.\n   */\n  public readonly errorMessage = input<string>('');\n\n  /**\n   * Controls when errors are displayed.\n   * - 'after-submit': Show errors only after form submission (default)\n   * - 'always': Show errors immediately when validation fails\n   */\n  public readonly errorDisplayMode = input<'always' | 'after-submit'>('after-submit');\n\n  /**\n   * The state of the form control.\n   */\n  public readonly controlState = signal<{\n    invalid: boolean;\n    errors: ValidationErrors | null;\n    isFormSubmitted: boolean;\n  }>({ errors: null, invalid: false, isFormSubmitted: false });\n\n  /**\n   * Computed signal to get the current error message.\n   */\n  protected readonly currentErrorMessage = computed(() => {\n    const customMessage = this.errorMessage();\n    const hasErrors = Object.keys(this.controlState()?.errors ?? {}).length > 0;\n\n    if (hasErrors && customMessage && customMessage.trim().length > 0) {\n      return customMessage;\n    }\n\n    // If no custom message, try to get validation error from the form control state\n    if (hasErrors) {\n      const firstErrorKey = Object.keys(this.controlState()?.errors ?? {})[0];\n      return this.getValidatorErrorMessage(firstErrorKey);\n    }\n\n    return '';\n  });\n\n  /**\n   * Computed signal to determine if there's an error to display.\n   */\n  protected readonly showError = computed(() => {\n    const errorMode = this.errorDisplayMode();\n\n    // For validation errors, respect the error display mode\n    if (this.controlState()?.invalid) {\n      if (errorMode === 'always') {\n        // Show errors when component is touched and invalid\n        return true;\n      } else if (errorMode === 'after-submit') {\n        // Show errors when form is submitted, regardless of touch/focus state\n        return this.controlState()?.isFormSubmitted;\n      }\n    }\n\n    return false;\n  });\n\n  /**\n   * Subscriptions to the control's value changes.\n   */\n  private readonly subscriptions: (Subscription | undefined)[] = [];\n\n  ngOnInit(): void {\n    this.isChecked.set(this.control()?.value === this.value());\n\n    const formEventsSubscription = this.control()?.parent?.events.subscribe(event => {\n      // We do not reset this signal because it is used to show the errors\n      // When a form is submitted at least once, we want to show the errors\n      if (event instanceof FormSubmittedEvent) {\n        this.controlState.set({\n          ...this.controlState(),\n          isFormSubmitted: true,\n          errors: this.control()?.errors || null,\n        });\n\n        // We add this because the statusChanges event is not triggered when the form is submitted\n        if (event.source.status === 'INVALID') {\n          this.controlState.set({ ...this.controlState(), invalid: true });\n        }\n      }\n    });\n\n    // Listen to changes on this specific checkbox's control\n    const valueChangesSubscription = this.control()?.valueChanges.subscribe(value => {\n      this.isChecked.set(value === this.value());\n    });\n\n    const statusChangesSubscription = this.control()?.statusChanges.subscribe(status => {\n      if (status === 'INVALID') {\n        this.controlState.set({ ...this.controlState(), invalid: true });\n      }\n\n      this.controlState.set({ ...this.controlState(), errors: this.control()?.errors || null });\n    });\n\n    this.subscriptions.push(formEventsSubscription, valueChangesSubscription, statusChangesSubscription);\n  }\n\n  ngOnDestroy(): void {\n    this.subscriptions.forEach(subscription => subscription?.unsubscribe());\n  }\n\n  /**\n   * Gets the error message for a specific validator error.\n   */\n  private getValidatorErrorMessage(errorKey: string): string {\n    switch (errorKey) {\n      case 'required':\n        return 'This field is required.';\n      default:\n        return 'This field is required.';\n    }\n  }\n}\n","<div [class]=\"computedClass()\">\n  <label class=\"component-container\" [for]=\"name()\">\n    <span class=\"checkbox-label\">{{ label() }}</span>\n\n    <input\n      class=\"checkbox-input\"\n      [id]=\"name()\"\n      [formControl]=\"control()\"\n      type=\"checkbox\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [checked]=\"isChecked()\" />\n\n    <span class=\"checkmark\"></span>\n  </label>\n\n  <!-- Error message  -->\n  @if (showError()) {\n    <div class=\"sdc-checkbox-error\">\n      {{ currentErrorMessage() }}\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAOA;;;;;;;AAOG;MAQU,iBAAiB,CAAA;AACX,IAAA,eAAe,GAAG;QACjC,iBAAiB;QACjB,mBAAmB;QACnB,qBAAqB;QACrB,iBAAiB;QACjB,iBAAiB;QACjB,gBAAgB;KACR;IACO,YAAY,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAU;AAErF;;AAEG;AACa,IAAA,KAAK,GAAG,KAAK,CAAa,WAAW,iDAAC;AAEtD;;;AAGG;AACa,IAAA,UAAU,GAAG,KAAK,CAChC,EAAE,sDACH;;AAGgB,IAAA,oBAAoB,GAAG,QAAQ,CAAC,MAAK;AACpD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;QAE/B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACzB,YAAA,OAAO,EAAE;QACX;QAEA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,IAAG;YACvC,QACG,IAAI,CAAC,eAAqC,CAAC,QAAQ,CAAC,KAAK,CAAC;gBAC1D,IAAI,CAAC,YAAkC,CAAC,QAAQ,CAAC,KAAK,CAAC;AAE5D,QAAA,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,IAAG;YACzC,QACE,CAAE,IAAI,CAAC,eAAqC,CAAC,QAAQ,CAAC,KAAK,CAAC;gBAC5D,CAAE,IAAI,CAAC,YAAkC,CAAC,QAAQ,CAAC,KAAK,CAAC;AAE7D,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CACb,CAAA,sDAAA,EAAyD,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,kBAAA,EAAqB;gBACpG,GAAG,IAAI,CAAC,eAAe;gBACvB,GAAG,IAAI,CAAC,YAAY;AACrB,aAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,CAAE,CACf;QACH;AAEA,QAAA,OAAO,WAAW;AACpB,IAAA,CAAC,gEAAC;AAEF;;AAEG;AACa,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,qDAAC;AAE7C;;AAEG;AACa,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC;AAEhD;;;AAGG;AACa,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAU;AAEhD;;AAEG;AACa,IAAA,aAAa,GAAG,KAAK,CAAmB,MAAM,yDAAC;AAE/D;;AAEG;AACa,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAU;AAE/C;;;AAGG;AACa,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAAe;AAEvD;;AAEG;AACa,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAU;AAEhD;;AAEG;AACa,IAAA,SAAS,GAAG,MAAM,CAAU,KAAK,qDAAC;AAElD;;AAEG;AACgB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE;AAC/B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,oBAAoB,EAAE;AAC9C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE;AAClC,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,KAAK,MAAM,GAAG,yBAAyB,GAAG,0BAA0B;AAC3G,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,sBAAsB,GAAG,EAAE;QACnE,OAAO,CAAC,cAAc,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AACnH,IAAA,CAAC,yDAAC;AAEF;;AAEG;AACa,IAAA,YAAY,GAAG,KAAK,CAAS,EAAE,wDAAC;AAEhD;;;;AAIG;AACa,IAAA,gBAAgB,GAAG,KAAK,CAA4B,cAAc,4DAAC;AAEnF;;AAEG;AACa,IAAA,YAAY,GAAG,MAAM,CAIlC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,wDAAC;AAE5D;;AAEG;AACgB,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAK;AACrD,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE;AACzC,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,MAAM,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;AAE3E,QAAA,IAAI,SAAS,IAAI,aAAa,IAAI,aAAa,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;AACjE,YAAA,OAAO,aAAa;QACtB;;QAGA,IAAI,SAAS,EAAE;AACb,YAAA,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;AACvE,YAAA,OAAO,IAAI,CAAC,wBAAwB,CAAC,aAAa,CAAC;QACrD;AAEA,QAAA,OAAO,EAAE;AACX,IAAA,CAAC,+DAAC;AAEF;;AAEG;AACgB,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE;;AAGzC,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE;AAChC,YAAA,IAAI,SAAS,KAAK,QAAQ,EAAE;;AAE1B,gBAAA,OAAO,IAAI;YACb;AAAO,iBAAA,IAAI,SAAS,KAAK,cAAc,EAAE;;AAEvC,gBAAA,OAAO,IAAI,CAAC,YAAY,EAAE,EAAE,eAAe;YAC7C;QACF;AAEA,QAAA,OAAO,KAAK;AACd,IAAA,CAAC,qDAAC;AAEF;;AAEG;IACc,aAAa,GAAiC,EAAE;IAEjE,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;AAE1D,QAAA,MAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,IAAG;;;AAG9E,YAAA,IAAI,KAAK,YAAY,kBAAkB,EAAE;AACvC,gBAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC;oBACpB,GAAG,IAAI,CAAC,YAAY,EAAE;AACtB,oBAAA,eAAe,EAAE,IAAI;oBACrB,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,IAAI,IAAI;AACvC,iBAAA,CAAC;;gBAGF,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,SAAS,EAAE;AACrC,oBAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gBAClE;YACF;AACF,QAAA,CAAC,CAAC;;AAGF,QAAA,MAAM,wBAAwB,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,SAAS,CAAC,KAAK,IAAG;AAC9E,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;AAC5C,QAAA,CAAC,CAAC;AAEF,QAAA,MAAM,yBAAyB,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,IAAG;AACjF,YAAA,IAAI,MAAM,KAAK,SAAS,EAAE;AACxB,gBAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YAClE;YAEA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,IAAI,IAAI,EAAE,CAAC;AAC3F,QAAA,CAAC,CAAC;QAEF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,sBAAsB,EAAE,wBAAwB,EAAE,yBAAyB,CAAC;IACtG;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,IAAI,YAAY,EAAE,WAAW,EAAE,CAAC;IACzE;AAEA;;AAEG;AACK,IAAA,wBAAwB,CAAC,QAAgB,EAAA;QAC/C,QAAQ,QAAQ;AACd,YAAA,KAAK,UAAU;AACb,gBAAA,OAAO,yBAAyB;AAClC,YAAA;AACE,gBAAA,OAAO,yBAAyB;;IAEtC;uGApOW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtB9B,8jBAuBA,EAAA,MAAA,EAAA,CAAA,43JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDHY,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,4BAAA,EAAA,QAAA,EAAA,uGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAElB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EAAA,QAAA,EACN,cAAc,EAAA,OAAA,EAGf,CAAC,mBAAmB,CAAC,EAAA,QAAA,EAAA,8jBAAA,EAAA,MAAA,EAAA,CAAA,43JAAA,CAAA,EAAA;;;AEpBhC;;AAEG;;;;"}