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

package/fesm2022/ardium-ui-ui.mjs

@@ -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());