npm - @ardium-ui/ui - Versions diffs - 5.0.0-alpha.100 → 5.0.0-alpha.101 - Mend

@ardium-ui/ui 5.0.0-alpha.100 → 5.0.0-alpha.101

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/fesm2022/ardium-ui-ui.mjs +69 -65
package/fesm2022/ardium-ui-ui.mjs.map +1 -1
package/lib/breakpoints/breakpoint.utils.d.ts +5 -5
package/lib/grid/grid.component.d.ts +4 -0
package/lib/grid/grid.utils.d.ts +12 -3
package/lib/slider/range-slider/range-slider.component.d.ts +1 -1
package/lib/stack/stack.component.d.ts +1 -0
package/package.json +1 -1

package/fesm2022/ardium-ui-ui.mjs CHANGED Viewed

@@ -16357,18 +16357,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
-/**
- * Normalizes various responsive value representations into a full {@link ArdBreakpointsConfig}.
- *
- * - `number`: same value is applied to all breakpoints.
- * - `string`: either a single number or a space-separated breakpoint list
- *   like `"base:1 sm:2 md:3 lg:4 xl:5"`.
- * - `ArdBreakpointsConfig`: missing breakpoints are filled based on smaller ones.
- */
-function transformResponsiveValue(v, breakpoints, parseValue) {
+function transformResponsiveValue(v, breakpoints, componentId, parseValue, parseToR) {
     // if it's an object, fill in missing breakpoints
     if (isObject(v)) {
-        return fillInMissingBreakpoints(v, breakpoints);
+        const vAsR = {};
+        for (const [bp, val] of Object.entries(v)) {
+            vAsR[bp] = parseToR?.(val) ?? val;
+        }
+        return fillInMissingBreakpoints(vAsR, breakpoints, componentId);
     }
     // parse string like "xs:1 sm:2 md:3 lg:4 xl:5"
     const items = coerceArrayProperty(v, ' ')
@@ -16383,25 +16379,25 @@ function transformResponsiveValue(v, breakpoints, parseValue) {
     })
         .filter(item => {
         if (!breakpoints.includes(item.breakpoint)) {
-            console.warn(`ARD-WA6010: Unknown breakpoint "${item.breakpoint}:${item.value}". This entry will be ignored.`);
+            console.warn(`ARD-WA${componentId}0: Unknown breakpoint "${item.breakpoint}:${item.value}". This entry will be ignored.`);
             return false;
         }
         if (item.value === undefined || item.value === null || item.value === '' || (isNumber(item.value) && isNaN(item.value))) {
-            console.warn(`ARD-WA6011: Invalid value for breakpoint "${item.breakpoint}". This entry will be ignored.`);
+            console.warn(`ARD-WA${componentId}1: Invalid value for breakpoint "${item.breakpoint}". This entry will be ignored.`);
             return false;
         }
         return true;
     })
         .reduce((acc, curr) => {
         if (acc[curr.breakpoint]) {
-            console.warn(`ARD-WA6012: Duplicate value for breakpoint "${curr.breakpoint}". The value "${curr.rawValue}" will overwrite the previous value "${acc[curr.breakpoint]}".`);
+            console.warn(`ARD-WA${componentId}2: Duplicate value for breakpoint "${curr.breakpoint}". The value "${curr.rawValue}" will overwrite the previous value "${acc[curr.breakpoint]}".`);
         }
         acc[curr.breakpoint] = curr.value;
         return acc;
     }, {});
-    return fillInMissingBreakpoints(items, breakpoints);
+    return fillInMissingBreakpoints(items, breakpoints, componentId);
 }
-function fillInMissingBreakpoints(config, breakpoints) {
+function fillInMissingBreakpoints(config, breakpoints, componentId) {
     const filledConfig = {};
     let lastValue = undefined;
     for (const bp of breakpoints) {
@@ -16414,58 +16410,58 @@ function fillInMissingBreakpoints(config, breakpoints) {
             filledConfig[bp] = lastValue;
             continue;
         }
-        throw new Error(`ARD-FT6013: Missing value for breakpoint "${bp}" and no smaller breakpoint to inherit from.`);
+        throw new Error(`ARD-FT${componentId}3: Missing value for breakpoint "${bp}" and no smaller breakpoint to inherit from.`);
     }
     return filledConfig;
 }
-function parseNumberOrBreakpointConfig(value, breakpoints) {
+function parseNumberOrBreakpointConfig(value, breakpoints, componentId) {
     if (typeof value === 'number') {
         // If it's a number, apply it to all breakpoints
-        return fillInMissingBreakpoints({ xs: value }, breakpoints);
+        return fillInMissingBreakpoints({ xs: value }, breakpoints, componentId);
     }
-    return transformResponsiveValue(value, breakpoints, coerceNumberProperty);
+    return transformResponsiveValue(value, breakpoints, componentId, coerceNumberProperty);
 }
-function parseSizeOrBreakpointConfig(value, breakpoints) {
+function parseSizeOrBreakpointConfig(value, breakpoints, componentId) {
     if (typeof value === 'number' || isArdGridSize(value)) {
         // If it's a number or ArdGridSize, apply it to all breakpoints
-        return fillInMissingBreakpoints({ xs: value }, breakpoints);
+        return fillInMissingBreakpoints({ xs: value }, breakpoints, componentId);
     }
-    return transformResponsiveValue(value, breakpoints, v => {
+    return transformResponsiveValue(value, breakpoints, componentId, v => {
         if (isArdGridSize(v)) {
             return v;
         }
         return coerceNumberProperty(v);
     });
 }
-function parseBooleanOrBreakpointConfig(value, breakpoints) {
+function parseBooleanOrBreakpointConfig(value, breakpoints, componentId) {
     if (typeof value === 'boolean') {
         // If it's a boolean, apply it to all breakpoints
-        return fillInMissingBreakpoints({ xs: value }, breakpoints);
+        return fillInMissingBreakpoints({ xs: value }, breakpoints, componentId);
     }
     if (value === '' || value === 'true') {
-        return fillInMissingBreakpoints({ xs: true }, breakpoints);
+        return fillInMissingBreakpoints({ xs: true }, breakpoints, componentId);
     }
-    return transformResponsiveValue(value, breakpoints, v => v === 'true');
+    return transformResponsiveValue(value, breakpoints, componentId, v => v === 'true');
 }
-function parseCSSUnitOrBreakpointConfig(value, breakpoints) {
+function parseCSSUnitOrBreakpointConfig(value, breakpoints, componentId) {
     if (isNull(value)) {
         return value;
     }
     if (isNumber(value)) {
-        fillInMissingBreakpoints({ xs: value }, breakpoints);
+        fillInMissingBreakpoints({ xs: value }, breakpoints, componentId);
     }
-    return transformResponsiveValue(value, breakpoints, v => {
+    return transformResponsiveValue(value, breakpoints, componentId, v => {
         const num = coerceNumberProperty(v, NaN);
         return isNaN(num) ? v : `calc(var(--ard-grid-spacing-unit) * ${num})`;
-    });
+    }, v => (typeof v === 'number' ? `calc(var(--ard-grid-spacing-unit) * ${v})` : v));
 }
-function parseEnumOrBreakpointConfig(value, breakpoints, isEnumValue) {
+function parseEnumOrBreakpointConfig(value, breakpoints, componentId, isEnumValue) {
     if (isEnumValue(value)) {
         // If it's an enum value, apply it to all breakpoints
-        return fillInMissingBreakpoints({ xs: value }, breakpoints);
+        return fillInMissingBreakpoints({ xs: value }, breakpoints, componentId);
     }
-    return transformResponsiveValue(value, breakpoints, v => (isEnumValue(v) ? v : undefined));
+    return transformResponsiveValue(value, breakpoints, componentId, v => (isEnumValue(v) ? v : undefined));
 }
 //! size
@@ -16544,33 +16540,34 @@ function provideGridDefaults(config) {
 class ArdiumGridComponent {
     constructor() {
+        this._componentId = '601';
         this._DEFAULTS = inject(ARD_GRID_DEFAULTS);
         this._breakpointService = inject(ArdiumBreakpointService);
         this._wasContentInitialized = false;
         //! is container
         this.container = input(false, { transform: v => coerceBooleanProperty(v) });
         //! configurations
-        this.columns = input(parseNumberOrBreakpointConfig(this._DEFAULTS.columns, this._breakpointService.breakpoints), { transform: value => parseNumberOrBreakpointConfig(value, this._breakpointService.breakpoints) });
-        this.size = input(parseSizeOrBreakpointConfig(this._DEFAULTS.size, this._breakpointService.breakpoints), {
-            transform: value => parseSizeOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.columns = input(parseNumberOrBreakpointConfig(this._DEFAULTS.columns, this._breakpointService.breakpoints, this._componentId), { transform: value => parseNumberOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId) });
+        this.size = input(parseSizeOrBreakpointConfig(this._DEFAULTS.size, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseSizeOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.reverse = input(parseBooleanOrBreakpointConfig(this._DEFAULTS.reverse, this._breakpointService.breakpoints), { transform: value => parseBooleanOrBreakpointConfig(value, this._breakpointService.breakpoints) });
-        this.justifyContent = input(parseEnumOrBreakpointConfig(this._DEFAULTS.justifyContent, this._breakpointService.breakpoints, isArdGridJustify), {
-            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridJustify),
+        this.reverse = input(parseBooleanOrBreakpointConfig(this._DEFAULTS.reverse, this._breakpointService.breakpoints, this._componentId), { transform: value => parseBooleanOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId) });
+        this.justifyContent = input(parseEnumOrBreakpointConfig(this._DEFAULTS.justifyContent, this._breakpointService.breakpoints, this._componentId, isArdGridJustify), {
+            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridJustify),
         });
-        this.alignItems = input(parseEnumOrBreakpointConfig(this._DEFAULTS.alignItems, this._breakpointService.breakpoints, isArdGridAlign), {
-            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridAlign),
+        this.alignItems = input(parseEnumOrBreakpointConfig(this._DEFAULTS.alignItems, this._breakpointService.breakpoints, this._componentId, isArdGridAlign), {
+            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridAlign),
         });
-        this.spacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.spacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.spacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.spacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.columnSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.columnSpacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.columnSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.columnSpacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.rowSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.rowSpacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.rowSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.rowSpacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.wrap = input(parseEnumOrBreakpointConfig(this._DEFAULTS.wrap, this._breakpointService.breakpoints, isArdGridWrap), { transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridWrap) });
+        this.wrap = input(parseEnumOrBreakpointConfig(this._DEFAULTS.wrap, this._breakpointService.breakpoints, this._componentId, isArdGridWrap), { transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridWrap) });
         //! inherited properties
         this.inheritedColumns = signal(null);
         this.inheritedReverse = signal(null);
@@ -16606,8 +16603,14 @@ class ArdiumGridComponent {
         this.currentColumnSpacing = computed(() => this.finalColumnSpacing()[this._breakpointService.currentBreakpoint() ?? 'xs']);
         this.currentRowSpacing = computed(() => this.finalRowSpacing()[this._breakpointService.currentBreakpoint() ?? 'xs']);
         this.currentWrap = computed(() => this.wrapOrInherited()[this._breakpointService.currentBreakpoint() ?? 'xs']);
+        this.currentInheritedColumns = computed(() => this.inheritedColumns()?.[this._breakpointService.currentBreakpoint() ?? 'xs']);
+        this.currentInheritedColumnSpacing = computed(() => this.inheritedColumnSpacing()?.[this._breakpointService.currentBreakpoint() ?? 'xs']);
+        this.currentInheritedRowSpacing = computed(() => this.inheritedRowSpacing()?.[this._breakpointService.currentBreakpoint() ?? 'xs']);
         this.currentStyle = computed(() => [
             this.currentSize() ? `--ard-_grid-size: ${this.currentSize()}` : '',
+            this.currentInheritedColumns() ? `--ard-_grid-parent-columns: ${this.currentInheritedColumns()}` : '',
+            this.currentInheritedColumnSpacing() ? `--ard-_grid-parent-column-spacing: ${this.currentInheritedColumnSpacing()}` : '',
+            this.currentInheritedRowSpacing() ? `--ard-_grid-parent-row-spacing: ${this.currentInheritedRowSpacing()}` : '',
             this.container() ? `--ard-_grid-columns: ${this.currentColumns()}` : '',
             this.container() ? `--ard-_grid-direction: ${this.currentReverse() ? 'row-reverse' : 'row'}` : '',
             this.container() ? `--ard-_grid-justify-content: ${this.currentJustifyContent()}` : '',
@@ -16652,7 +16655,7 @@ class ArdiumGridComponent {
         }
     }
     _updateChildrenStyles() {
-        const containerChildren = this.children().filter(child => child !== this && child.container());
+        const children = this.children();
         const columns = this.columnsOrInherited();
         const reverse = this.reverseOrInherited();
         const justifyContent = this.justifyContentOrInherited();
@@ -16663,7 +16666,7 @@ class ArdiumGridComponent {
         if (!this._wasContentInitialized) {
             return;
         }
-        for (const child of containerChildren) {
+        for (const child of children) {
             child.inheritedColumns.set(columns);
             child.inheritedReverse.set(reverse);
             child.inheritedJustifyContent.set(justifyContent);
@@ -16674,7 +16677,7 @@ class ArdiumGridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumGridComponent, isStandalone: false, selector: "ard-grid", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, columnSpacing: { classPropertyName: "columnSpacing", publicName: "columnSpacing", isSignal: true, isRequired: false, transformFunction: null }, rowSpacing: { classPropertyName: "rowSpacing", publicName: "rowSpacing", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "currentStyle()", "class.ard-grid__container": "container()", "class.ard-grid__item": "!container()", "class.ard-grid__item-grow": "!container() && currentSize() === \"grow\"", "class.ard-grid__item-auto": "!container() && currentSize() === \"auto\"" }, classAttribute: "ard-grid" }, queries: [{ propertyName: "children", predicate: ArdiumGridComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content />", styles: ["@layer ard-ui{.ard-grid{display:block;box-sizing:border-box;min-width:0px}.ard-grid__container{display:flex;flex-direction:var(--ard-_grid-direction, row);flex-wrap:var(--ard-_grid-wrap, wrap);row-gap:var(--ard-_grid-row-spacing, 0px);column-gap:var(--ard-_grid-column-spacing, 0px);justify-content:var(--ard-_grid-justify-content, flex-start);align-items:var(--ard-_grid-align-items, flex-start)}.ard-grid__container>.ard-grid{flex-grow:0;flex-basis:auto;max-width:100%;width:calc(100% * var(--ard-_grid-size) / var(--ard-_grid-columns) - (var(--ard-_grid-columns) - var(--ard-_grid-size)) * var(--ard-_grid-column-spacing) / var(--ard-_grid-columns))}.ard-grid__container>.ard-grid.ard-grid__item-grow{flex-grow:1;width:auto}.ard-grid__container>.ard-grid.ard-grid__item-auto{width:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumGridComponent, isStandalone: false, selector: "ard-grid", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, columnSpacing: { classPropertyName: "columnSpacing", publicName: "columnSpacing", isSignal: true, isRequired: false, transformFunction: null }, rowSpacing: { classPropertyName: "rowSpacing", publicName: "rowSpacing", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "currentStyle()", "class.ard-grid__container": "container()", "class.ard-grid__item": "!container()", "class.ard-grid__item-grow": "!container() && currentSize() === \"grow\"", "class.ard-grid__item-auto": "!container() && currentSize() === \"auto\"" }, classAttribute: "ard-grid" }, queries: [{ propertyName: "children", predicate: ArdiumGridComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content />", styles: ["@layer ard-ui{.ard-grid{display:block;box-sizing:border-box;min-width:0px}.ard-grid__container{display:flex;flex-direction:var(--ard-_grid-direction, row);flex-wrap:var(--ard-_grid-wrap, wrap);row-gap:var(--ard-_grid-row-spacing, 0px);column-gap:var(--ard-_grid-column-spacing, 0px);justify-content:var(--ard-_grid-justify-content, flex-start);align-items:var(--ard-_grid-align-items, flex-start)}.ard-grid__container>.ard-grid{flex-grow:0;flex-basis:auto;max-width:100%;width:calc(100% * var(--ard-_grid-size) / var(--ard-_grid-parent-columns) - (var(--ard-_grid-parent-columns) - var(--ard-_grid-size)) * var(--ard-_grid-parent-column-spacing) / var(--ard-_grid-parent-columns))}.ard-grid__container>.ard-grid.ard-grid__item-grow{flex-grow:1;width:auto}.ard-grid__container>.ard-grid.ard-grid__item-auto{width:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumGridComponent, decorators: [{
             type: Component,
@@ -16685,7 +16688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '[class.ard-grid__item]': '!container()',
                         '[class.ard-grid__item-grow]': '!container() && currentSize() === "grow"',
                         '[class.ard-grid__item-auto]': '!container() && currentSize() === "auto"',
-                    }, template: "<ng-content />", styles: ["@layer ard-ui{.ard-grid{display:block;box-sizing:border-box;min-width:0px}.ard-grid__container{display:flex;flex-direction:var(--ard-_grid-direction, row);flex-wrap:var(--ard-_grid-wrap, wrap);row-gap:var(--ard-_grid-row-spacing, 0px);column-gap:var(--ard-_grid-column-spacing, 0px);justify-content:var(--ard-_grid-justify-content, flex-start);align-items:var(--ard-_grid-align-items, flex-start)}.ard-grid__container>.ard-grid{flex-grow:0;flex-basis:auto;max-width:100%;width:calc(100% * var(--ard-_grid-size) / var(--ard-_grid-columns) - (var(--ard-_grid-columns) - var(--ard-_grid-size)) * var(--ard-_grid-column-spacing) / var(--ard-_grid-columns))}.ard-grid__container>.ard-grid.ard-grid__item-grow{flex-grow:1;width:auto}.ard-grid__container>.ard-grid.ard-grid__item-auto{width:auto}}\n"] }]
+                    }, template: "<ng-content />", styles: ["@layer ard-ui{.ard-grid{display:block;box-sizing:border-box;min-width:0px}.ard-grid__container{display:flex;flex-direction:var(--ard-_grid-direction, row);flex-wrap:var(--ard-_grid-wrap, wrap);row-gap:var(--ard-_grid-row-spacing, 0px);column-gap:var(--ard-_grid-column-spacing, 0px);justify-content:var(--ard-_grid-justify-content, flex-start);align-items:var(--ard-_grid-align-items, flex-start)}.ard-grid__container>.ard-grid{flex-grow:0;flex-basis:auto;max-width:100%;width:calc(100% * var(--ard-_grid-size) / var(--ard-_grid-parent-columns) - (var(--ard-_grid-parent-columns) - var(--ard-_grid-size)) * var(--ard-_grid-parent-column-spacing) / var(--ard-_grid-parent-columns))}.ard-grid__container>.ard-grid.ard-grid__item-grow{flex-grow:1;width:auto}.ard-grid__container>.ard-grid.ard-grid__item-auto{width:auto}}\n"] }]
         }], ctorParameters: () => [] });
 class ArdiumGridModule {
@@ -16726,28 +16729,29 @@ function provideStackDefaults(config) {
 class ArdiumStackComponent {
     constructor() {
+        this._componentId = '602';
         this._DEFAULTS = inject(ARD_STACK_DEFAULTS);
         this._breakpointService = inject(ArdiumBreakpointService);
         //! configurations
-        this.direction = input(parseEnumOrBreakpointConfig(this._DEFAULTS.direction, this._breakpointService.breakpoints, isArdGridDirection), {
-            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridDirection),
+        this.direction = input(parseEnumOrBreakpointConfig(this._DEFAULTS.direction, this._breakpointService.breakpoints, this._componentId, isArdGridDirection), {
+            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridDirection),
         });
-        this.justifyContent = input(parseEnumOrBreakpointConfig(this._DEFAULTS.justifyContent, this._breakpointService.breakpoints, isArdGridJustify), {
-            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridJustify),
+        this.justifyContent = input(parseEnumOrBreakpointConfig(this._DEFAULTS.justifyContent, this._breakpointService.breakpoints, this._componentId, isArdGridJustify), {
+            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridJustify),
         });
-        this.alignItems = input(parseEnumOrBreakpointConfig(this._DEFAULTS.alignItems, this._breakpointService.breakpoints, isArdGridAlign), {
-            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridAlign),
+        this.alignItems = input(parseEnumOrBreakpointConfig(this._DEFAULTS.alignItems, this._breakpointService.breakpoints, this._componentId, isArdGridAlign), {
+            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridAlign),
         });
-        this.spacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.spacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.spacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.spacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.columnSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.columnSpacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.columnSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.columnSpacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.rowSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.rowSpacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.rowSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.rowSpacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.wrap = input(parseEnumOrBreakpointConfig(this._DEFAULTS.wrap, this._breakpointService.breakpoints, isArdGridWrap), { transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridWrap) });
+        this.wrap = input(parseEnumOrBreakpointConfig(this._DEFAULTS.wrap, this._breakpointService.breakpoints, this._componentId, isArdGridWrap), { transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridWrap) });
         //! computed properties
         this.finalColumnSpacing = computed(() => this.columnSpacing() ?? this.spacing());
         this.finalRowSpacing = computed(() => this.rowSpacing() ?? this.spacing());