@ng-nest/ui 17.0.12 → 18.0.1

package/fesm2022/ng-nest-ui-layout.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, Input, inject, Renderer2, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XProperty, XInputNumber, XInputBoolean } from '@ng-nest/ui/core';
+import { input, Component, inject, computed, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule } from '@angular/core';
+import { XPropertyFunction, XToCssPixelValue, XToNumber, XToBoolean, XComputedStyle, XToCssPx } from '@ng-nest/ui/core';
+import { DOCUMENT } from '@angular/common';
 
 /**
  * Row
@@ -9,199 +9,264 @@ import { XProperty, XInputNumber, XInputBoolean } from '@ng-nest/ui/core';
  * @decorator component
  */
 const XRowPrefix = 'x-row';
+const X_ROW_CONFIG_NAME = 'row';
 /**
  * Row Property
  */
-class XRowProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XRowProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XRowProperty, selector: "x-row-property", inputs: { space: "space", justify: "justify", align: "align" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+class XRowProperty extends XPropertyFunction(X_ROW_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 列间隔
+         * @en_US Column interval
+         * @example
+         *
+         * ```html
+         * <x-row space="1rem">
+         *   <x-col span="6">col-1</x-col>
+         *   <x-col span="6">col-2</x-col>
+         * </x-row>
+         * ```
+         *
+         */
+        this.space = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN flex 布局下的水平排列方式
+         * @en_US Horizontal arrangement under flex layout
+         * @example
+         *
+         * ```html
+         * <x-row justify="end">
+         *   <x-col span="6">col-1</x-col>
+         *   <x-col span="6">col-2</x-col>
+         * </x-row>
+         * ```
+         *
+         */
+        this.justify = input();
+        /**
+         * @zh_CN flex 布局下的垂直排列方式
+         * @en_US Vertical arrangement under flex layout
+         * @example
+         *
+         * ```html
+         * <x-row align="end">
+         *   <x-col span="6">col-1</x-col>
+         *   <x-col span="6">col-2</x-col>
+         * </x-row>
+         * ```
+         *
+         */
+        this.align = input();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XRowProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XRowProperty, selector: "x-row-property", inputs: { space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XInputNumber()
-], XRowProperty.prototype, "space", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XRowProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XRowProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XRowPrefix}-property`, template: '' }]
-        }], propDecorators: { space: [{
-                type: Input
-            }], justify: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }] } });
+        }] });
 /**
  * Col
  * @selector x-col
  * @decorator component
  */
 const XColPrefix = 'x-col';
+const X_COL_CONFIG_NAME = 'col';
 /**
  * Col Property
  */
-class XColProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XColProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XColProperty, selector: "x-col-property", inputs: { span: "span", offset: "offset", xs: "xs", sm: "sm", md: "md", lg: "lg", xl: "xl", inherit: "inherit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+class XColProperty extends XPropertyFunction(X_COL_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 24栅格布局，列占的宽度
+         * @en_US 24 grid layout, column width
+         * @example
+         *
+         * ```html
+         * <x-row>
+         *   <x-col span="6">col-1</x-col>
+         *   <x-col span="18">col-2</x-col>
+         * </x-row>
+         * ```
+         *
+         */
+        this.span = input(24, { transform: XToNumber });
+        /**
+         * @zh_CN 栅格左侧的间隔格数
+         * @en_US The number of intervals on the left side of the grid
+         * @example
+         *
+         * ```html
+         * <x-row>
+         *   <x-col span="6">col-1</x-col>
+         *   <x-col span="12" offset="6">col-2</x-col>
+         * </x-row>
+         * ```
+         *
+         */
+        this.offset = input(0, { transform: XToNumber });
+        /**
+         * <768px
+         */
+        this.xs = input(0, { transform: XToNumber });
+        /**
+         * ≥768px
+         */
+        this.sm = input(0, { transform: XToNumber });
+        /**
+         * ≥992px
+         */
+        this.md = input(0, { transform: XToNumber });
+        /**
+         * ≥1200px
+         */
+        this.lg = input(0, { transform: XToNumber });
+        /**
+         * ≥1920px
+         */
+        this.xl = input(0, { transform: XToNumber });
+        /**
+         * @zh_CN 默认样式
+         * @en_US Default style
+         * @example
+         *
+         * ```html
+         * <x-row>
+         *   <x-col span="6" inherit>col-1</x-col>
+         *   <x-col span="12" offset="6" inherit>col-2</x-col>
+         * </x-row>
+         * ```
+         *
+         */
+        this.inherit = input(false, { transform: XToBoolean });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XColProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XColProperty, selector: "x-col-property", inputs: { span: { classPropertyName: "span", publicName: "span", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, inherit: { classPropertyName: "inherit", publicName: "inherit", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XInputNumber()
-], XColProperty.prototype, "span", void 0);
-__decorate([
-    XInputNumber()
-], XColProperty.prototype, "offset", void 0);
-__decorate([
-    XInputNumber()
-], XColProperty.prototype, "xs", void 0);
-__decorate([
-    XInputNumber()
-], XColProperty.prototype, "sm", void 0);
-__decorate([
-    XInputNumber()
-], XColProperty.prototype, "md", void 0);
-__decorate([
-    XInputNumber()
-], XColProperty.prototype, "lg", void 0);
-__decorate([
-    XInputNumber()
-], XColProperty.prototype, "xl", void 0);
-__decorate([
-    XInputBoolean()
-], XColProperty.prototype, "inherit", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XColProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XColProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XColPrefix}-property`, template: '' }]
-        }], propDecorators: { span: [{
-                type: Input
-            }], offset: [{
-                type: Input
-            }], xs: [{
-                type: Input
-            }], sm: [{
-                type: Input
-            }], md: [{
-                type: Input
-            }], lg: [{
-                type: Input
-            }], xl: [{
-                type: Input
-            }], inherit: [{
-                type: Input
-            }] } });
+        }] });
 
 class XRowComponent extends XRowProperty {
     constructor() {
         super(...arguments);
-        this.renderer = inject(Renderer2);
-        this.elementRef = inject(ElementRef);
+        this.document = inject(DOCUMENT);
+        this.fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')));
+        this.spaceSignal = computed(() => {
+            if (!this.space())
+                return 0;
+            const space = this.space();
+            return XToCssPx(space, this.fontSize());
+        });
     }
     get getFlex() {
-        return this.justify || this.align ? true : false;
+        return this.justify() || this.align() ? true : false;
     }
-    ngOnInit() {
-        this.renderer.addClass(this.elementRef.nativeElement, XRowPrefix);
-        this.setSpace();
-        this.setJustify();
-        this.setAlign();
+    get cls() {
+        let cls = [XRowPrefix];
+        if (this.justify())
+            cls.push(`x-justify-${this.justify()}`);
+        if (this.align())
+            cls.push(`x-align-${this.align()}`);
+        return cls.join(' ');
     }
-    setSpace() {
-        if (!this.space)
-            return;
-        this.renderer.setStyle(this.elementRef.nativeElement, 'margin-left', `-${Number(this.space) / 2}rem`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'margin-right', `-${Number(this.space) / 2}rem`);
+    get marginLeft() {
+        return `-${this.spaceSignal() / 2}px`;
     }
-    setJustify() {
-        if (!this.justify)
-            return;
-        this.renderer.addClass(this.elementRef.nativeElement, `x-justify-${this.justify}`);
+    get marginRight() {
+        return `-${this.spaceSignal() / 2}px`;
     }
-    setAlign() {
-        if (!this.align)
-            return;
-        this.renderer.addClass(this.elementRef.nativeElement, `x-align-${this.align}`);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XRowComponent, isStandalone: true, selector: "x-row", host: { properties: { "class.x-flex": "this.getFlex" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-row{display:block;position:relative;height:auto}.x-row:before,.x-row:after{content:\"\";display:table;clear:both}.x-row.x-flex{display:flex}.x-row.x-justify-start{justify-content:flex-start}.x-row.x-justify-center{justify-content:center}.x-row.x-justify-end{justify-content:flex-end}.x-row.x-justify-space-between{justify-content:space-between}.x-row.x-justify-space-around{justify-content:space-around}.x-row.x-align-start{align-items:flex-start}.x-row.x-align-center{align-items:center}.x-row.x-align-end{align-items:flex-end}.x-row.x-direction-column{flex-direction:column}.x-row.x-direction-column-reverse{flex-direction:column-reverse}.x-row.x-direction-row{flex-direction:row}.x-row.x-direction-row-reverse{flex-direction:row-reverse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: XRowComponent, isStandalone: true, selector: "x-row", host: { properties: { "class.x-flex": "this.getFlex", "class": "this.cls", "style.marginLeft": "this.marginLeft", "style.marginRight": "this.marginRight" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-row{display:block;position:relative;height:auto}.x-row:before,.x-row:after{content:\"\";display:table;clear:both}.x-row.x-flex{display:flex}.x-row.x-justify-start{justify-content:flex-start}.x-row.x-justify-center{justify-content:center}.x-row.x-justify-end{justify-content:flex-end}.x-row.x-justify-space-between{justify-content:space-between}.x-row.x-justify-space-around{justify-content:space-around}.x-row.x-align-start{align-items:flex-start}.x-row.x-align-center{align-items:center}.x-row.x-align-end{align-items:flex-end}.x-row.x-direction-column{flex-direction:column}.x-row.x-direction-column-reverse{flex-direction:column-reverse}.x-row.x-direction-row{flex-direction:row}.x-row.x-direction-row-reverse{flex-direction:row-reverse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XRowComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XRowPrefix}`, standalone: true, template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".x-row{display:block;position:relative;height:auto}.x-row:before,.x-row:after{content:\"\";display:table;clear:both}.x-row.x-flex{display:flex}.x-row.x-justify-start{justify-content:flex-start}.x-row.x-justify-center{justify-content:center}.x-row.x-justify-end{justify-content:flex-end}.x-row.x-justify-space-between{justify-content:space-between}.x-row.x-justify-space-around{justify-content:space-around}.x-row.x-align-start{align-items:flex-start}.x-row.x-align-center{align-items:center}.x-row.x-align-end{align-items:flex-end}.x-row.x-direction-column{flex-direction:column}.x-row.x-direction-column-reverse{flex-direction:column-reverse}.x-row.x-direction-row{flex-direction:row}.x-row.x-direction-row-reverse{flex-direction:row-reverse}\n"] }]
         }], propDecorators: { getFlex: [{
                 type: HostBinding,
                 args: [`class.x-flex`]
+            }], cls: [{
+                type: HostBinding,
+                args: ['class']
+            }], marginLeft: [{
+                type: HostBinding,
+                args: ['style.marginLeft']
+            }], marginRight: [{
+                type: HostBinding,
+                args: ['style.marginRight']
             }] } });
 
 class XColComponent extends XColProperty {
     constructor() {
         super(...arguments);
         this.rowComponent = inject(XRowComponent, { optional: true, host: true });
-        this.renderer = inject(Renderer2);
-        this.elementRef = inject(ElementRef);
+        this.document = inject(DOCUMENT);
+        this.fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')));
+        this.space = computed(() => {
+            if (!this.rowComponent?.space())
+                return 0;
+            const space = this.rowComponent.space();
+            return XToCssPx(space, this.fontSize());
+        });
     }
     get getFlex() {
-        return this.xs || this.sm || this.md || this.lg || this.xl || this.span == 24 ? true : false;
-    }
-    ngOnInit() {
-        this.renderer.addClass(this.elementRef.nativeElement, XColPrefix);
-        this.setSpan();
-        this.setOffset();
-        this.setSpace();
-        this.setLayout();
-        this.setInherit();
+        return this.xs() || this.sm() || this.md() || this.lg() || this.xl() || this.span() == 24 ? true : false;
     }
-    setSpan() {
-        if (!this.span)
-            return;
-        this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-${this.span}`);
+    get cls() {
+        let cls = [XColPrefix];
+        if (this.span())
+            cls.push(`${XColPrefix}-${this.span()}`);
+        if (this.offset())
+            cls.push(`${XColPrefix}-offset-${this.offset()}`);
+        if (this.xs())
+            cls.push(`${XColPrefix}-xs-${this.xs()}`);
+        if (this.sm())
+            cls.push(`${XColPrefix}-sm-${this.sm()}`);
+        if (this.md())
+            cls.push(`${XColPrefix}-md-${this.md()}`);
+        if (this.lg())
+            cls.push(`${XColPrefix}-lg-${this.lg()}`);
+        if (this.xl())
+            cls.push(`${XColPrefix}-xl-${this.xl()}`);
+        if (this.inherit())
+            cls.push(`${XColPrefix}-inherit`);
+        return cls.join(' ');
     }
-    setOffset() {
-        if (!this.offset)
-            return;
-        this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-offset-${this.offset}`);
+    get paddingLeft() {
+        return `${this.space() / 2}px`;
     }
-    setSpace() {
-        if (!this.rowComponent?.space)
-            return;
-        this.renderer.setStyle(this.elementRef.nativeElement, 'padding-left', `${Number(this.rowComponent.space) / 2}rem`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'padding-right', `${Number(this.rowComponent.space) / 2}rem`);
+    get paddingRight() {
+        return `${this.space() / 2}px`;
     }
-    setLayout() {
-        if (this.xs) {
-            this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-xs-${this.xs}`);
-        }
-        if (this.sm) {
-            this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-sm-${this.sm}`);
-        }
-        if (this.md) {
-            this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-md-${this.md}`);
-        }
-        if (this.lg) {
-            this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-lg-${this.lg}`);
-        }
-        if (this.xl) {
-            this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-xl-${this.xl}`);
-        }
-    }
-    setInherit() {
-        if (!this.inherit)
-            return;
-        this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-inherit`);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XColComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XColComponent, isStandalone: true, selector: "x-col", host: { properties: { "class.x-col-24": "this.getFlex" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-col{position:relative;float:left;display:block;width:100%;box-sizing:border-box}.x-col-24{width:100%}.x-col-offset-24{margin-left:100%}.x-col-23{width:95.8333333333%}.x-col-offset-23{margin-left:95.8333333333%}.x-col-22{width:91.6666666667%}.x-col-offset-22{margin-left:91.6666666667%}.x-col-21{width:87.5%}.x-col-offset-21{margin-left:87.5%}.x-col-20{width:83.3333333333%}.x-col-offset-20{margin-left:83.3333333333%}.x-col-19{width:79.1666666667%}.x-col-offset-19{margin-left:79.1666666667%}.x-col-18{width:75%}.x-col-offset-18{margin-left:75%}.x-col-17{width:70.8333333333%}.x-col-offset-17{margin-left:70.8333333333%}.x-col-16{width:66.6666666667%}.x-col-offset-16{margin-left:66.6666666667%}.x-col-15{width:62.5%}.x-col-offset-15{margin-left:62.5%}.x-col-14{width:58.3333333333%}.x-col-offset-14{margin-left:58.3333333333%}.x-col-13{width:54.1666666667%}.x-col-offset-13{margin-left:54.1666666667%}.x-col-12{width:50%}.x-col-offset-12{margin-left:50%}.x-col-11{width:45.8333333333%}.x-col-offset-11{margin-left:45.8333333333%}.x-col-10{width:41.6666666667%}.x-col-offset-10{margin-left:41.6666666667%}.x-col-9{width:37.5%}.x-col-offset-9{margin-left:37.5%}.x-col-8{width:33.3333333333%}.x-col-offset-8{margin-left:33.3333333333%}.x-col-7{width:29.1666666667%}.x-col-offset-7{margin-left:29.1666666667%}.x-col-6{width:25%}.x-col-offset-6{margin-left:25%}.x-col-5{width:20.8333333333%}.x-col-offset-5{margin-left:20.8333333333%}.x-col-4{width:16.6666666667%}.x-col-offset-4{margin-left:16.6666666667%}.x-col-3{width:12.5%}.x-col-offset-3{margin-left:12.5%}.x-col-2{width:8.3333333333%}.x-col-offset-2{margin-left:8.3333333333%}.x-col-1{width:4.1666666667%}.x-col-offset-1{margin-left:4.1666666667%}@media only screen and (max-width: 767px){.x-col-xs-24{width:100%}}@media only screen and (max-width: 767px){.x-col-xs-23{width:95.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-22{width:91.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-21{width:87.5%}}@media only screen and (max-width: 767px){.x-col-xs-20{width:83.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-19{width:79.1666666667%}}@media only screen and (max-width: 767px){.x-col-xs-18{width:75%}}@media only screen and (max-width: 767px){.x-col-xs-17{width:70.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-16{width:66.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-15{width:62.5%}}@media only screen and (max-width: 767px){.x-col-xs-14{width:58.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-13{width:54.1666666667%}}@media only screen and (max-width: 767px){.x-col-xs-12{width:50%}}@media only screen and (max-width: 767px){.x-col-xs-11{width:45.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-10{width:41.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-9{width:37.5%}}@media only screen and (max-width: 767px){.x-col-xs-8{width:33.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-7{width:29.1666666667%}}@media only screen and (max-width: 767px){.x-col-xs-6{width:25%}}@media only screen and (max-width: 767px){.x-col-xs-5{width:20.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-4{width:16.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-3{width:12.5%}}@media only screen and (max-width: 767px){.x-col-xs-2{width:8.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-1{width:4.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-24{width:100%}}@media only screen and (min-width: 768px){.x-col-sm-23{width:95.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-22{width:91.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-21{width:87.5%}}@media only screen and (min-width: 768px){.x-col-sm-20{width:83.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-19{width:79.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-18{width:75%}}@media only screen and (min-width: 768px){.x-col-sm-17{width:70.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-16{width:66.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-15{width:62.5%}}@media only screen and (min-width: 768px){.x-col-sm-14{width:58.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-13{width:54.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-12{width:50%}}@media only screen and (min-width: 768px){.x-col-sm-11{width:45.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-10{width:41.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-9{width:37.5%}}@media only screen and (min-width: 768px){.x-col-sm-8{width:33.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-7{width:29.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-6{width:25%}}@media only screen and (min-width: 768px){.x-col-sm-5{width:20.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-4{width:16.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-3{width:12.5%}}@media only screen and (min-width: 768px){.x-col-sm-2{width:8.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-1{width:4.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-24{width:100%}}@media only screen and (min-width: 992px){.x-col-md-23{width:95.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-22{width:91.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-21{width:87.5%}}@media only screen and (min-width: 992px){.x-col-md-20{width:83.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-19{width:79.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-18{width:75%}}@media only screen and (min-width: 992px){.x-col-md-17{width:70.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-16{width:66.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-15{width:62.5%}}@media only screen and (min-width: 992px){.x-col-md-14{width:58.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-13{width:54.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-12{width:50%}}@media only screen and (min-width: 992px){.x-col-md-11{width:45.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-10{width:41.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-9{width:37.5%}}@media only screen and (min-width: 992px){.x-col-md-8{width:33.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-7{width:29.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-6{width:25%}}@media only screen and (min-width: 992px){.x-col-md-5{width:20.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-4{width:16.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-3{width:12.5%}}@media only screen and (min-width: 992px){.x-col-md-2{width:8.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-1{width:4.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-24{width:100%}}@media only screen and (min-width: 1200px){.x-col-lg-23{width:95.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-22{width:91.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-21{width:87.5%}}@media only screen and (min-width: 1200px){.x-col-lg-20{width:83.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-19{width:79.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-18{width:75%}}@media only screen and (min-width: 1200px){.x-col-lg-17{width:70.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-16{width:66.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-15{width:62.5%}}@media only screen and (min-width: 1200px){.x-col-lg-14{width:58.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-13{width:54.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-12{width:50%}}@media only screen and (min-width: 1200px){.x-col-lg-11{width:45.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-10{width:41.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-9{width:37.5%}}@media only screen and (min-width: 1200px){.x-col-lg-8{width:33.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-7{width:29.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-6{width:25%}}@media only screen and (min-width: 1200px){.x-col-lg-5{width:20.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-4{width:16.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-3{width:12.5%}}@media only screen and (min-width: 1200px){.x-col-lg-2{width:8.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-1{width:4.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-24{width:100%}}@media only screen and (min-width: 1920px){.x-col-xl-23{width:95.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-22{width:91.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-21{width:87.5%}}@media only screen and (min-width: 1920px){.x-col-xl-20{width:83.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-19{width:79.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-18{width:75%}}@media only screen and (min-width: 1920px){.x-col-xl-17{width:70.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-16{width:66.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-15{width:62.5%}}@media only screen and (min-width: 1920px){.x-col-xl-14{width:58.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-13{width:54.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-12{width:50%}}@media only screen and (min-width: 1920px){.x-col-xl-11{width:45.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-10{width:41.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-9{width:37.5%}}@media only screen and (min-width: 1920px){.x-col-xl-8{width:33.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-7{width:29.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-6{width:25%}}@media only screen and (min-width: 1920px){.x-col-xl-5{width:20.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-4{width:16.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-3{width:12.5%}}@media only screen and (min-width: 1920px){.x-col-xl-2{width:8.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-1{width:4.1666666667%}}.x-col-inherit{width:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XColComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: XColComponent, isStandalone: true, selector: "x-col", host: { properties: { "class.x-col-24": "this.getFlex", "class": "this.cls", "style.paddingLeft": "this.paddingLeft", "style.paddingRight": "this.paddingRight" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-col{position:relative;float:left;display:block;width:100%;box-sizing:border-box}.x-col-24{width:100%}.x-col-offset-24{margin-left:100%}.x-col-23{width:95.8333333333%}.x-col-offset-23{margin-left:95.8333333333%}.x-col-22{width:91.6666666667%}.x-col-offset-22{margin-left:91.6666666667%}.x-col-21{width:87.5%}.x-col-offset-21{margin-left:87.5%}.x-col-20{width:83.3333333333%}.x-col-offset-20{margin-left:83.3333333333%}.x-col-19{width:79.1666666667%}.x-col-offset-19{margin-left:79.1666666667%}.x-col-18{width:75%}.x-col-offset-18{margin-left:75%}.x-col-17{width:70.8333333333%}.x-col-offset-17{margin-left:70.8333333333%}.x-col-16{width:66.6666666667%}.x-col-offset-16{margin-left:66.6666666667%}.x-col-15{width:62.5%}.x-col-offset-15{margin-left:62.5%}.x-col-14{width:58.3333333333%}.x-col-offset-14{margin-left:58.3333333333%}.x-col-13{width:54.1666666667%}.x-col-offset-13{margin-left:54.1666666667%}.x-col-12{width:50%}.x-col-offset-12{margin-left:50%}.x-col-11{width:45.8333333333%}.x-col-offset-11{margin-left:45.8333333333%}.x-col-10{width:41.6666666667%}.x-col-offset-10{margin-left:41.6666666667%}.x-col-9{width:37.5%}.x-col-offset-9{margin-left:37.5%}.x-col-8{width:33.3333333333%}.x-col-offset-8{margin-left:33.3333333333%}.x-col-7{width:29.1666666667%}.x-col-offset-7{margin-left:29.1666666667%}.x-col-6{width:25%}.x-col-offset-6{margin-left:25%}.x-col-5{width:20.8333333333%}.x-col-offset-5{margin-left:20.8333333333%}.x-col-4{width:16.6666666667%}.x-col-offset-4{margin-left:16.6666666667%}.x-col-3{width:12.5%}.x-col-offset-3{margin-left:12.5%}.x-col-2{width:8.3333333333%}.x-col-offset-2{margin-left:8.3333333333%}.x-col-1{width:4.1666666667%}.x-col-offset-1{margin-left:4.1666666667%}@media only screen and (max-width: 767px){.x-col-xs-24{width:100%}}@media only screen and (max-width: 767px){.x-col-xs-23{width:95.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-22{width:91.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-21{width:87.5%}}@media only screen and (max-width: 767px){.x-col-xs-20{width:83.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-19{width:79.1666666667%}}@media only screen and (max-width: 767px){.x-col-xs-18{width:75%}}@media only screen and (max-width: 767px){.x-col-xs-17{width:70.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-16{width:66.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-15{width:62.5%}}@media only screen and (max-width: 767px){.x-col-xs-14{width:58.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-13{width:54.1666666667%}}@media only screen and (max-width: 767px){.x-col-xs-12{width:50%}}@media only screen and (max-width: 767px){.x-col-xs-11{width:45.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-10{width:41.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-9{width:37.5%}}@media only screen and (max-width: 767px){.x-col-xs-8{width:33.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-7{width:29.1666666667%}}@media only screen and (max-width: 767px){.x-col-xs-6{width:25%}}@media only screen and (max-width: 767px){.x-col-xs-5{width:20.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-4{width:16.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-3{width:12.5%}}@media only screen and (max-width: 767px){.x-col-xs-2{width:8.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-1{width:4.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-24{width:100%}}@media only screen and (min-width: 768px){.x-col-sm-23{width:95.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-22{width:91.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-21{width:87.5%}}@media only screen and (min-width: 768px){.x-col-sm-20{width:83.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-19{width:79.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-18{width:75%}}@media only screen and (min-width: 768px){.x-col-sm-17{width:70.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-16{width:66.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-15{width:62.5%}}@media only screen and (min-width: 768px){.x-col-sm-14{width:58.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-13{width:54.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-12{width:50%}}@media only screen and (min-width: 768px){.x-col-sm-11{width:45.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-10{width:41.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-9{width:37.5%}}@media only screen and (min-width: 768px){.x-col-sm-8{width:33.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-7{width:29.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-6{width:25%}}@media only screen and (min-width: 768px){.x-col-sm-5{width:20.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-4{width:16.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-3{width:12.5%}}@media only screen and (min-width: 768px){.x-col-sm-2{width:8.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-1{width:4.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-24{width:100%}}@media only screen and (min-width: 992px){.x-col-md-23{width:95.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-22{width:91.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-21{width:87.5%}}@media only screen and (min-width: 992px){.x-col-md-20{width:83.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-19{width:79.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-18{width:75%}}@media only screen and (min-width: 992px){.x-col-md-17{width:70.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-16{width:66.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-15{width:62.5%}}@media only screen and (min-width: 992px){.x-col-md-14{width:58.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-13{width:54.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-12{width:50%}}@media only screen and (min-width: 992px){.x-col-md-11{width:45.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-10{width:41.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-9{width:37.5%}}@media only screen and (min-width: 992px){.x-col-md-8{width:33.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-7{width:29.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-6{width:25%}}@media only screen and (min-width: 992px){.x-col-md-5{width:20.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-4{width:16.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-3{width:12.5%}}@media only screen and (min-width: 992px){.x-col-md-2{width:8.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-1{width:4.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-24{width:100%}}@media only screen and (min-width: 1200px){.x-col-lg-23{width:95.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-22{width:91.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-21{width:87.5%}}@media only screen and (min-width: 1200px){.x-col-lg-20{width:83.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-19{width:79.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-18{width:75%}}@media only screen and (min-width: 1200px){.x-col-lg-17{width:70.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-16{width:66.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-15{width:62.5%}}@media only screen and (min-width: 1200px){.x-col-lg-14{width:58.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-13{width:54.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-12{width:50%}}@media only screen and (min-width: 1200px){.x-col-lg-11{width:45.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-10{width:41.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-9{width:37.5%}}@media only screen and (min-width: 1200px){.x-col-lg-8{width:33.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-7{width:29.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-6{width:25%}}@media only screen and (min-width: 1200px){.x-col-lg-5{width:20.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-4{width:16.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-3{width:12.5%}}@media only screen and (min-width: 1200px){.x-col-lg-2{width:8.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-1{width:4.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-24{width:100%}}@media only screen and (min-width: 1920px){.x-col-xl-23{width:95.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-22{width:91.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-21{width:87.5%}}@media only screen and (min-width: 1920px){.x-col-xl-20{width:83.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-19{width:79.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-18{width:75%}}@media only screen and (min-width: 1920px){.x-col-xl-17{width:70.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-16{width:66.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-15{width:62.5%}}@media only screen and (min-width: 1920px){.x-col-xl-14{width:58.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-13{width:54.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-12{width:50%}}@media only screen and (min-width: 1920px){.x-col-xl-11{width:45.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-10{width:41.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-9{width:37.5%}}@media only screen and (min-width: 1920px){.x-col-xl-8{width:33.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-7{width:29.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-6{width:25%}}@media only screen and (min-width: 1920px){.x-col-xl-5{width:20.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-4{width:16.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-3{width:12.5%}}@media only screen and (min-width: 1920px){.x-col-xl-2{width:8.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-1{width:4.1666666667%}}.x-col-inherit{width:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XColComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XColComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XColPrefix}`, standalone: true, template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".x-col{position:relative;float:left;display:block;width:100%;box-sizing:border-box}.x-col-24{width:100%}.x-col-offset-24{margin-left:100%}.x-col-23{width:95.8333333333%}.x-col-offset-23{margin-left:95.8333333333%}.x-col-22{width:91.6666666667%}.x-col-offset-22{margin-left:91.6666666667%}.x-col-21{width:87.5%}.x-col-offset-21{margin-left:87.5%}.x-col-20{width:83.3333333333%}.x-col-offset-20{margin-left:83.3333333333%}.x-col-19{width:79.1666666667%}.x-col-offset-19{margin-left:79.1666666667%}.x-col-18{width:75%}.x-col-offset-18{margin-left:75%}.x-col-17{width:70.8333333333%}.x-col-offset-17{margin-left:70.8333333333%}.x-col-16{width:66.6666666667%}.x-col-offset-16{margin-left:66.6666666667%}.x-col-15{width:62.5%}.x-col-offset-15{margin-left:62.5%}.x-col-14{width:58.3333333333%}.x-col-offset-14{margin-left:58.3333333333%}.x-col-13{width:54.1666666667%}.x-col-offset-13{margin-left:54.1666666667%}.x-col-12{width:50%}.x-col-offset-12{margin-left:50%}.x-col-11{width:45.8333333333%}.x-col-offset-11{margin-left:45.8333333333%}.x-col-10{width:41.6666666667%}.x-col-offset-10{margin-left:41.6666666667%}.x-col-9{width:37.5%}.x-col-offset-9{margin-left:37.5%}.x-col-8{width:33.3333333333%}.x-col-offset-8{margin-left:33.3333333333%}.x-col-7{width:29.1666666667%}.x-col-offset-7{margin-left:29.1666666667%}.x-col-6{width:25%}.x-col-offset-6{margin-left:25%}.x-col-5{width:20.8333333333%}.x-col-offset-5{margin-left:20.8333333333%}.x-col-4{width:16.6666666667%}.x-col-offset-4{margin-left:16.6666666667%}.x-col-3{width:12.5%}.x-col-offset-3{margin-left:12.5%}.x-col-2{width:8.3333333333%}.x-col-offset-2{margin-left:8.3333333333%}.x-col-1{width:4.1666666667%}.x-col-offset-1{margin-left:4.1666666667%}@media only screen and (max-width: 767px){.x-col-xs-24{width:100%}}@media only screen and (max-width: 767px){.x-col-xs-23{width:95.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-22{width:91.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-21{width:87.5%}}@media only screen and (max-width: 767px){.x-col-xs-20{width:83.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-19{width:79.1666666667%}}@media only screen and (max-width: 767px){.x-col-xs-18{width:75%}}@media only screen and (max-width: 767px){.x-col-xs-17{width:70.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-16{width:66.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-15{width:62.5%}}@media only screen and (max-width: 767px){.x-col-xs-14{width:58.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-13{width:54.1666666667%}}@media only screen and (max-width: 767px){.x-col-xs-12{width:50%}}@media only screen and (max-width: 767px){.x-col-xs-11{width:45.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-10{width:41.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-9{width:37.5%}}@media only screen and (max-width: 767px){.x-col-xs-8{width:33.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-7{width:29.1666666667%}}@media only screen and (max-width: 767px){.x-col-xs-6{width:25%}}@media only screen and (max-width: 767px){.x-col-xs-5{width:20.8333333333%}}@media only screen and (max-width: 767px){.x-col-xs-4{width:16.6666666667%}}@media only screen and (max-width: 767px){.x-col-xs-3{width:12.5%}}@media only screen and (max-width: 767px){.x-col-xs-2{width:8.3333333333%}}@media only screen and (max-width: 767px){.x-col-xs-1{width:4.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-24{width:100%}}@media only screen and (min-width: 768px){.x-col-sm-23{width:95.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-22{width:91.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-21{width:87.5%}}@media only screen and (min-width: 768px){.x-col-sm-20{width:83.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-19{width:79.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-18{width:75%}}@media only screen and (min-width: 768px){.x-col-sm-17{width:70.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-16{width:66.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-15{width:62.5%}}@media only screen and (min-width: 768px){.x-col-sm-14{width:58.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-13{width:54.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-12{width:50%}}@media only screen and (min-width: 768px){.x-col-sm-11{width:45.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-10{width:41.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-9{width:37.5%}}@media only screen and (min-width: 768px){.x-col-sm-8{width:33.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-7{width:29.1666666667%}}@media only screen and (min-width: 768px){.x-col-sm-6{width:25%}}@media only screen and (min-width: 768px){.x-col-sm-5{width:20.8333333333%}}@media only screen and (min-width: 768px){.x-col-sm-4{width:16.6666666667%}}@media only screen and (min-width: 768px){.x-col-sm-3{width:12.5%}}@media only screen and (min-width: 768px){.x-col-sm-2{width:8.3333333333%}}@media only screen and (min-width: 768px){.x-col-sm-1{width:4.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-24{width:100%}}@media only screen and (min-width: 992px){.x-col-md-23{width:95.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-22{width:91.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-21{width:87.5%}}@media only screen and (min-width: 992px){.x-col-md-20{width:83.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-19{width:79.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-18{width:75%}}@media only screen and (min-width: 992px){.x-col-md-17{width:70.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-16{width:66.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-15{width:62.5%}}@media only screen and (min-width: 992px){.x-col-md-14{width:58.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-13{width:54.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-12{width:50%}}@media only screen and (min-width: 992px){.x-col-md-11{width:45.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-10{width:41.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-9{width:37.5%}}@media only screen and (min-width: 992px){.x-col-md-8{width:33.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-7{width:29.1666666667%}}@media only screen and (min-width: 992px){.x-col-md-6{width:25%}}@media only screen and (min-width: 992px){.x-col-md-5{width:20.8333333333%}}@media only screen and (min-width: 992px){.x-col-md-4{width:16.6666666667%}}@media only screen and (min-width: 992px){.x-col-md-3{width:12.5%}}@media only screen and (min-width: 992px){.x-col-md-2{width:8.3333333333%}}@media only screen and (min-width: 992px){.x-col-md-1{width:4.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-24{width:100%}}@media only screen and (min-width: 1200px){.x-col-lg-23{width:95.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-22{width:91.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-21{width:87.5%}}@media only screen and (min-width: 1200px){.x-col-lg-20{width:83.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-19{width:79.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-18{width:75%}}@media only screen and (min-width: 1200px){.x-col-lg-17{width:70.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-16{width:66.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-15{width:62.5%}}@media only screen and (min-width: 1200px){.x-col-lg-14{width:58.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-13{width:54.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-12{width:50%}}@media only screen and (min-width: 1200px){.x-col-lg-11{width:45.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-10{width:41.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-9{width:37.5%}}@media only screen and (min-width: 1200px){.x-col-lg-8{width:33.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-7{width:29.1666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-6{width:25%}}@media only screen and (min-width: 1200px){.x-col-lg-5{width:20.8333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-4{width:16.6666666667%}}@media only screen and (min-width: 1200px){.x-col-lg-3{width:12.5%}}@media only screen and (min-width: 1200px){.x-col-lg-2{width:8.3333333333%}}@media only screen and (min-width: 1200px){.x-col-lg-1{width:4.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-24{width:100%}}@media only screen and (min-width: 1920px){.x-col-xl-23{width:95.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-22{width:91.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-21{width:87.5%}}@media only screen and (min-width: 1920px){.x-col-xl-20{width:83.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-19{width:79.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-18{width:75%}}@media only screen and (min-width: 1920px){.x-col-xl-17{width:70.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-16{width:66.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-15{width:62.5%}}@media only screen and (min-width: 1920px){.x-col-xl-14{width:58.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-13{width:54.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-12{width:50%}}@media only screen and (min-width: 1920px){.x-col-xl-11{width:45.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-10{width:41.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-9{width:37.5%}}@media only screen and (min-width: 1920px){.x-col-xl-8{width:33.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-7{width:29.1666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-6{width:25%}}@media only screen and (min-width: 1920px){.x-col-xl-5{width:20.8333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-4{width:16.6666666667%}}@media only screen and (min-width: 1920px){.x-col-xl-3{width:12.5%}}@media only screen and (min-width: 1920px){.x-col-xl-2{width:8.3333333333%}}@media only screen and (min-width: 1920px){.x-col-xl-1{width:4.1666666667%}}.x-col-inherit{width:inherit}\n"] }]
         }], propDecorators: { getFlex: [{
                 type: HostBinding,
                 args: [`class.x-col-24`]
+            }], cls: [{
+                type: HostBinding,
+                args: ['class']
+            }], paddingLeft: [{
+                type: HostBinding,
+                args: ['style.paddingLeft']
+            }], paddingRight: [{
+                type: HostBinding,
+                args: ['style.paddingRight']
             }] } });
 
 class XLayoutModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XLayoutModule, imports: [XRowComponent, XColComponent], exports: [XRowComponent, XColComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XLayoutModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XLayoutModule, imports: [XRowComponent, XColComponent], exports: [XRowComponent, XColComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XLayoutModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XRowComponent, XColComponent],

package/fesm2022/ng-nest-ui-layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-layout.mjs","sources":["../../../../lib/ng-nest/ui/layout/layout.property.ts","../../../../lib/ng-nest/ui/layout/row.component.ts","../../../../lib/ng-nest/ui/layout/col.component.ts","../../../../lib/ng-nest/ui/layout/layout.module.ts","../../../../lib/ng-nest/ui/layout/ng-nest-ui-layout.ts"],"sourcesContent":["import {\r\n  XJustify,\r\n  XAlign,\r\n  XProperty,\r\n  XInputNumber,\r\n  XInputBoolean,\r\n  XNumber,\r\n  XBoolean\r\n} from '@ng-nest/ui/core';\r\nimport { Input, Component } from '@angular/core';\r\n\r\n/**\r\n * Row\r\n * @selector x-row\r\n * @decorator component\r\n */\r\nexport const XRowPrefix = 'x-row';\r\n\r\n/**\r\n * Row Property\r\n */\r\n@Component({ selector: `${XRowPrefix}-property`, template: '' })\r\nexport class XRowProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 列间隔，rem\r\n   * @en_US Column interval, rem\r\n   */\r\n  @Input() @XInputNumber() space?: XNumber;\r\n  /**\r\n   * @zh_CN flex 布局下的水平排列方式\r\n   * @en_US Horizontal arrangement under flex layout\r\n   */\r\n  @Input() justify?: XJustify;\r\n  /**\r\n   * @zh_CN flex 布局下的垂直排列方式\r\n   * @en_US Vertical arrangement under flex layout\r\n   */\r\n  @Input() align?: XAlign;\r\n}\r\n\r\n/**\r\n * Col\r\n * @selector x-col\r\n * @decorator component\r\n */\r\nexport const XColPrefix = 'x-col';\r\n\r\n/**\r\n * Col Property\r\n */\r\n@Component({ selector: `${XColPrefix}-property`, template: '' })\r\nexport class XColProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 24栅格布局，列占的宽度\r\n   * @en_US 24 grid layout, column width\r\n   */\r\n  @Input() @XInputNumber() span?: XNumber;\r\n  /**\r\n   * @zh_CN 栅格左侧的间隔格数\r\n   * @en_US The number of intervals on the left side of the grid\r\n   */\r\n  @Input() @XInputNumber() offset?: XNumber;\r\n  /**\r\n   * <768px\r\n   */\r\n  @Input() @XInputNumber() xs?: XNumber;\r\n  /**\r\n   * ≥768px\r\n   */\r\n  @Input() @XInputNumber() sm?: XNumber;\r\n  /**\r\n   * ≥992px\r\n   */\r\n  @Input() @XInputNumber() md?: XNumber;\r\n  /**\r\n   * ≥1200px\r\n   */\r\n  @Input() @XInputNumber() lg?: XNumber;\r\n  /**\r\n   * ≥1920px\r\n   */\r\n  @Input() @XInputNumber() xl?: XNumber;\r\n  /**\r\n   * @zh_CN 默认样式\r\n   * @en_US Default style\r\n   */\r\n  @Input() @XInputBoolean() inherit?: XBoolean;\r\n}\r\n","import {\r\n  Component,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  Renderer2,\r\n  ElementRef,\r\n  OnInit,\r\n  HostBinding,\r\n  inject\r\n} from '@angular/core';\r\nimport { XRowPrefix, XRowProperty } from './layout.property';\r\n\r\n@Component({\r\n  selector: `${XRowPrefix}`,\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrls: ['./row.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XRowComponent extends XRowProperty implements OnInit {\r\n  @HostBinding(`class.x-flex`) get getFlex() {\r\n    return this.justify || this.align ? true : false;\r\n  }\r\n\r\n  private renderer = inject(Renderer2);\r\n  private elementRef = inject(ElementRef);\r\n\r\n  ngOnInit() {\r\n    this.renderer.addClass(this.elementRef.nativeElement, XRowPrefix);\r\n    this.setSpace();\r\n    this.setJustify();\r\n    this.setAlign();\r\n  }\r\n\r\n  setSpace() {\r\n    if (!this.space) return;\r\n    this.renderer.setStyle(\r\n      this.elementRef.nativeElement,\r\n      'margin-left',\r\n      `-${Number(this.space) / 2}rem`\r\n    );\r\n    this.renderer.setStyle(\r\n      this.elementRef.nativeElement,\r\n      'margin-right',\r\n      `-${Number(this.space) / 2}rem`\r\n    );\r\n  }\r\n\r\n  setJustify() {\r\n    if (!this.justify) return;\r\n    this.renderer.addClass(this.elementRef.nativeElement, `x-justify-${this.justify}`);\r\n  }\r\n\r\n  setAlign() {\r\n    if (!this.align) return;\r\n    this.renderer.addClass(this.elementRef.nativeElement, `x-align-${this.align}`);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  Renderer2,\r\n  ElementRef,\r\n  HostBinding,\r\n  inject\r\n} from '@angular/core';\r\nimport { XColPrefix, XColProperty } from './layout.property';\r\nimport { XRowComponent } from './row.component';\r\n\r\n@Component({\r\n  selector: `${XColPrefix}`,\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrls: ['./col.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XColComponent extends XColProperty implements OnInit {\r\n  @HostBinding(`class.x-col-24`) get getFlex() {\r\n    return this.xs || this.sm || this.md || this.lg || this.xl || this.span == 24 ? true : false;\r\n  }\r\n\r\n  private rowComponent = inject(XRowComponent, { optional: true, host: true });\r\n  private renderer = inject(Renderer2);\r\n  private elementRef = inject(ElementRef);\r\n\r\n  ngOnInit() {\r\n    this.renderer.addClass(this.elementRef.nativeElement, XColPrefix);\r\n    this.setSpan();\r\n    this.setOffset();\r\n    this.setSpace();\r\n    this.setLayout();\r\n    this.setInherit();\r\n  }\r\n\r\n  setSpan() {\r\n    if (!this.span) return;\r\n    this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-${this.span}`);\r\n  }\r\n\r\n  setOffset() {\r\n    if (!this.offset) return;\r\n    this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-offset-${this.offset}`);\r\n  }\r\n\r\n  setSpace() {\r\n    if (!this.rowComponent?.space) return;\r\n    this.renderer.setStyle(\r\n      this.elementRef.nativeElement,\r\n      'padding-left',\r\n      `${Number(this.rowComponent.space) / 2}rem`\r\n    );\r\n    this.renderer.setStyle(\r\n      this.elementRef.nativeElement,\r\n      'padding-right',\r\n      `${Number(this.rowComponent.space) / 2}rem`\r\n    );\r\n  }\r\n\r\n  setLayout() {\r\n    if (this.xs) {\r\n      this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-xs-${this.xs}`);\r\n    }\r\n    if (this.sm) {\r\n      this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-sm-${this.sm}`);\r\n    }\r\n    if (this.md) {\r\n      this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-md-${this.md}`);\r\n    }\r\n    if (this.lg) {\r\n      this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-lg-${this.lg}`);\r\n    }\r\n    if (this.xl) {\r\n      this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-xl-${this.xl}`);\r\n    }\r\n  }\r\n\r\n  setInherit() {\r\n    if (!this.inherit) return;\r\n    this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-inherit`);\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { XRowComponent } from './row.component';\r\nimport { XColComponent } from './col.component';\r\n\r\n@NgModule({\r\n  exports: [XRowComponent, XColComponent],\r\n  imports: [XRowComponent, XColComponent]\r\n})\r\nexport class XLayoutModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-layout.mjs","sources":["../../../../lib/ng-nest/ui/layout/layout.property.ts","../../../../lib/ng-nest/ui/layout/row.component.ts","../../../../lib/ng-nest/ui/layout/col.component.ts","../../../../lib/ng-nest/ui/layout/layout.module.ts","../../../../lib/ng-nest/ui/layout/ng-nest-ui-layout.ts"],"sourcesContent":["import { XPropertyFunction, XToBoolean, XToCssPixelValue, XToNumber } from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\nimport type { XJustify, XAlign, XNumber, XBoolean } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Row\r\n * @selector x-row\r\n * @decorator component\r\n */\r\nexport const XRowPrefix = 'x-row';\r\nconst X_ROW_CONFIG_NAME = 'row';\r\n\r\n/**\r\n * Row Property\r\n */\r\n@Component({ selector: `${XRowPrefix}-property`, template: '' })\r\nexport class XRowProperty extends XPropertyFunction(X_ROW_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 列间隔\r\n   * @en_US Column interval\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-row space=\"1rem\">\r\n   *   <x-col span=\"6\">col-1</x-col>\r\n   *   <x-col span=\"6\">col-2</x-col>\r\n   * </x-row>\r\n   * ```\r\n   *\r\n   */\r\n  readonly space = input<string, XNumber>('', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN flex 布局下的水平排列方式\r\n   * @en_US Horizontal arrangement under flex layout\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-row justify=\"end\">\r\n   *   <x-col span=\"6\">col-1</x-col>\r\n   *   <x-col span=\"6\">col-2</x-col>\r\n   * </x-row>\r\n   * ```\r\n   *\r\n   */\r\n  readonly justify = input<XJustify>();\r\n  /**\r\n   * @zh_CN flex 布局下的垂直排列方式\r\n   * @en_US Vertical arrangement under flex layout\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-row align=\"end\">\r\n   *   <x-col span=\"6\">col-1</x-col>\r\n   *   <x-col span=\"6\">col-2</x-col>\r\n   * </x-row>\r\n   * ```\r\n   *\r\n   */\r\n  readonly align = input<XAlign>();\r\n}\r\n\r\n/**\r\n * Col\r\n * @selector x-col\r\n * @decorator component\r\n */\r\nexport const XColPrefix = 'x-col';\r\nconst X_COL_CONFIG_NAME = 'col';\r\n\r\n/**\r\n * Col Property\r\n */\r\n@Component({ selector: `${XColPrefix}-property`, template: '' })\r\nexport class XColProperty extends XPropertyFunction(X_COL_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 24栅格布局，列占的宽度\r\n   * @en_US 24 grid layout, column width\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-row>\r\n   *   <x-col span=\"6\">col-1</x-col>\r\n   *   <x-col span=\"18\">col-2</x-col>\r\n   * </x-row>\r\n   * ```\r\n   *\r\n   */\r\n  readonly span = input<number, XNumber>(24, { transform: XToNumber });\r\n  /**\r\n   * @zh_CN 栅格左侧的间隔格数\r\n   * @en_US The number of intervals on the left side of the grid\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-row>\r\n   *   <x-col span=\"6\">col-1</x-col>\r\n   *   <x-col span=\"12\" offset=\"6\">col-2</x-col>\r\n   * </x-row>\r\n   * ```\r\n   *\r\n   */\r\n  readonly offset = input<number, XNumber>(0, { transform: XToNumber });\r\n  /**\r\n   * <768px\r\n   */\r\n  readonly xs = input<number, XNumber>(0, { transform: XToNumber });\r\n  /**\r\n   * ≥768px\r\n   */\r\n  readonly sm = input<number, XNumber>(0, { transform: XToNumber });\r\n  /**\r\n   * ≥992px\r\n   */\r\n  readonly md = input<number, XNumber>(0, { transform: XToNumber });\r\n  /**\r\n   * ≥1200px\r\n   */\r\n  readonly lg = input<number, XNumber>(0, { transform: XToNumber });\r\n  /**\r\n   * ≥1920px\r\n   */\r\n  readonly xl = input<number, XNumber>(0, { transform: XToNumber });\r\n  /**\r\n   * @zh_CN 默认样式\r\n   * @en_US Default style\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-row>\r\n   *   <x-col span=\"6\" inherit>col-1</x-col>\r\n   *   <x-col span=\"12\" offset=\"6\" inherit>col-2</x-col>\r\n   * </x-row>\r\n   * ```\r\n   *\r\n   */\r\n  readonly inherit = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, inject, computed } from '@angular/core';\r\nimport { XRowPrefix, XRowProperty } from './layout.property';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { XComputedStyle, XToCssPx } from '@ng-nest/ui/core';\r\n\r\n@Component({\r\n  selector: `${XRowPrefix}`,\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrls: ['./row.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XRowComponent extends XRowProperty {\r\n  private document: Document = inject(DOCUMENT);\r\n  private fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')));\r\n  @HostBinding(`class.x-flex`) get getFlex() {\r\n    return this.justify() || this.align() ? true : false;\r\n  }\r\n  @HostBinding('class') get cls() {\r\n    let cls: string[] = [XRowPrefix];\r\n    if (this.justify()) cls.push(`x-justify-${this.justify()}`);\r\n    if (this.align()) cls.push(`x-align-${this.align()}`);\r\n    return cls.join(' ');\r\n  }\r\n  @HostBinding('style.marginLeft') get marginLeft() {\r\n    return `-${this.spaceSignal() / 2}px`;\r\n  }\r\n  @HostBinding('style.marginRight') get marginRight() {\r\n    return `-${this.spaceSignal() / 2}px`;\r\n  }\r\n\r\n  spaceSignal = computed(() => {\r\n    if (!this.space()) return 0;\r\n    const space = this.space();\r\n    return XToCssPx(space, this.fontSize());\r\n  });\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, inject, computed } from '@angular/core';\r\nimport { XColPrefix, XColProperty } from './layout.property';\r\nimport { XRowComponent } from './row.component';\r\nimport { XComputedStyle, XToCssPx } from '@ng-nest/ui/core';\r\nimport { DOCUMENT } from '@angular/common';\r\n\r\n@Component({\r\n  selector: `${XColPrefix}`,\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrls: ['./col.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XColComponent extends XColProperty {\r\n  private rowComponent = inject(XRowComponent, { optional: true, host: true });\r\n  private document: Document = inject(DOCUMENT);\r\n  private fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')));\r\n  @HostBinding(`class.x-col-24`) get getFlex() {\r\n    return this.xs() || this.sm() || this.md() || this.lg() || this.xl() || this.span() == 24 ? true : false;\r\n  }\r\n  @HostBinding('class') get cls() {\r\n    let cls: string[] = [XColPrefix];\r\n    if (this.span()) cls.push(`${XColPrefix}-${this.span()}`);\r\n    if (this.offset()) cls.push(`${XColPrefix}-offset-${this.offset()}`);\r\n    if (this.xs()) cls.push(`${XColPrefix}-xs-${this.xs()}`);\r\n    if (this.sm()) cls.push(`${XColPrefix}-sm-${this.sm()}`);\r\n    if (this.md()) cls.push(`${XColPrefix}-md-${this.md()}`);\r\n    if (this.lg()) cls.push(`${XColPrefix}-lg-${this.lg()}`);\r\n    if (this.xl()) cls.push(`${XColPrefix}-xl-${this.xl()}`);\r\n    if (this.inherit()) cls.push(`${XColPrefix}-inherit`);\r\n    return cls.join(' ');\r\n  }\r\n  @HostBinding('style.paddingLeft') get paddingLeft() {\r\n    return `${this.space() / 2}px`;\r\n  }\r\n  @HostBinding('style.paddingRight') get paddingRight() {\r\n    return `${this.space() / 2}px`;\r\n  }\r\n\r\n  space = computed(() => {\r\n    if (!this.rowComponent?.space()) return 0;\r\n    const space = this.rowComponent.space();\r\n    return XToCssPx(space, this.fontSize());\r\n  });\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { XRowComponent } from './row.component';\r\nimport { XColComponent } from './col.component';\r\n\r\n@NgModule({\r\n  exports: [XRowComponent, XColComponent],\r\n  imports: [XRowComponent, XColComponent]\r\n})\r\nexport class XLayoutModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}