ng-zorro-antd/fesm2022/ng-zorro-antd-grid.mjs

An enterprise-class UI components based on Ant Design and Angular

import { Directionality } from '@angular/cdk/bidi';
import { coerceCssPixelValue } from '@angular/cdk/coercion';
import { MediaMatcher } from '@angular/cdk/layout';
import { Platform } from '@angular/cdk/platform';
import * as i0 from '@angular/core';
import { inject, input, booleanAttribute, signal, computed, Directive, NgModule } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { NzBreakpointService, gridResponsiveMap, responsiveArray } from 'ng-zorro-antd/core/services';
import { isNotNil, isPlainObject, isNumber, generateClassName } from 'ng-zorro-antd/core/util';

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
const CLASS_NAME$1 = 'ant-row';
class NzRowDirective {
    mediaMatcher = inject(MediaMatcher);
    platform = inject(Platform);
    breakpointService = inject(NzBreakpointService);
    dir = inject(Directionality).valueSignal;
    nzAlign = input(null, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "nzAlign" }] : /* istanbul ignore next */ []));
    nzJustify = input(null, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "nzJustify" }] : /* istanbul ignore next */ []));
    nzGutter = input(undefined, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "nzGutter" }] : /* istanbul ignore next */ []));
    nzWrap = input(true, { ...(ngDevMode ? { debugName: "nzWrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Internal signal tracking the current breakpoint.
     * Used to trigger recomputation of responsive gutters when viewport changes.
     */
    currentBreakpoint = this.platform.isBrowser
        ? toSignal(this.breakpointService.subscribe(gridResponsiveMap))
        : signal(undefined);
    alignClass = computed(() => {
        this.currentBreakpoint();
        const align = this.resolveResponsiveValue(this.nzAlign());
        return isNotNil(align) ? this.generateClass(align) : '';
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "alignClass" }] : /* istanbul ignore next */ []));
    flexClass = computed(() => {
        this.currentBreakpoint();
        const justify = this.resolveResponsiveValue(this.nzJustify());
        return isNotNil(justify) ? this.generateClass(justify) : '';
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "flexClass" }] : /* istanbul ignore next */ []));
    gutter = computed(() => {
        // Subscribe to breakpoint changes so this computed recomputes on viewport resize
        this.currentBreakpoint();
        const results = [undefined, undefined];
        const gutter = this.nzGutter() ?? 0;
        const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined];
        normalizedGutter.forEach((g, index) => {
            if (isPlainObject(g)) {
                Object.keys(gridResponsiveMap).map(screen => {
                    const bp = screen;
                    if (this.mediaMatcher.matchMedia(gridResponsiveMap[bp]).matches && g[bp]) {
                        results[index] = g[bp];
                    }
                });
            }
            else {
                results[index] = g;
            }
        });
        return results;
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "gutter" }] : /* istanbul ignore next */ []));
    gutterStyle = computed(() => {
        const [gutterH, gutterV] = this.gutter();
        const style = {};
        if (gutterH) {
            const horizontalGutter = isNumber(gutterH) ? coerceCssPixelValue(gutterH / -2) : `calc(${gutterH} / -2)`;
            style['margin-inline'] = horizontalGutter;
        }
        style['row-gap'] = coerceCssPixelValue(gutterV);
        return style;
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "gutterStyle" }] : /* istanbul ignore next */ []));
    generateClass(suffix) {
        return generateClassName(CLASS_NAME$1, suffix);
    }
    resolveResponsiveValue(value) {
        if (!isNotNil(value)) {
            return null;
        }
        if (isPlainObject(value)) {
            let result = null;
            Object.keys(gridResponsiveMap).forEach(screen => {
                const bp = screen;
                if (this.mediaMatcher.matchMedia(gridResponsiveMap[bp]).matches && value[bp]) {
                    result = value[bp];
                }
            });
            return result;
        }
        return value;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: NzRowDirective, isStandalone: true, selector: "[nz-row],nz-row,nz-form-item", inputs: { nzAlign: { classPropertyName: "nzAlign", publicName: "nzAlign", isSignal: true, isRequired: false, transformFunction: null }, nzJustify: { classPropertyName: "nzJustify", publicName: "nzJustify", isSignal: true, isRequired: false, transformFunction: null }, nzGutter: { classPropertyName: "nzGutter", publicName: "nzGutter", isSignal: true, isRequired: false, transformFunction: null }, nzWrap: { classPropertyName: "nzWrap", publicName: "nzWrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "flexClass() + ' ' + alignClass()", "class.ant-row-rtl": "dir() === 'rtl'", "class.ant-row-no-wrap": "!nzWrap()", "style": "gutterStyle()" }, classAttribute: "ant-row" }, exportAs: ["nzRow"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzRowDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nz-row],nz-row,nz-form-item',
                    exportAs: 'nzRow',
                    host: {
                        class: 'ant-row',
                        '[class]': `flexClass() + ' ' + alignClass()`,
                        '[class.ant-row-rtl]': `dir() === 'rtl'`,
                        '[class.ant-row-no-wrap]': `!nzWrap()`,
                        '[style]': `gutterStyle()`
                    }
                }]
        }], propDecorators: { nzAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzAlign", required: false }] }], nzJustify: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzJustify", required: false }] }], nzGutter: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzGutter", required: false }] }], nzWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzWrap", required: false }] }] } });

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
const CLASS_NAME = 'ant-col';
class NzColDirective {
    nzRowDirective = inject(NzRowDirective, { host: true, optional: true });
    dir = inject(Directionality).valueSignal;
    nzFlex = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzFlex" }] : /* istanbul ignore next */ []));
    nzSpan = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzSpan" }] : /* istanbul ignore next */ []));
    nzOrder = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzOrder" }] : /* istanbul ignore next */ []));
    nzOffset = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzOffset" }] : /* istanbul ignore next */ []));
    nzPush = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzPush" }] : /* istanbul ignore next */ []));
    nzPull = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzPull" }] : /* istanbul ignore next */ []));
    nzXs = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzXs" }] : /* istanbul ignore next */ []));
    nzSm = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzSm" }] : /* istanbul ignore next */ []));
    nzMd = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzMd" }] : /* istanbul ignore next */ []));
    nzLg = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzLg" }] : /* istanbul ignore next */ []));
    nzXl = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzXl" }] : /* istanbul ignore next */ []));
    nzXXl = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzXXl" }] : /* istanbul ignore next */ []));
    nzXXXl = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "nzXXXl" }] : /* istanbul ignore next */ []));
    responsiveClass = computed(() => {
        const xs = this.nzXs();
        const sm = this.nzSm();
        const md = this.nzMd();
        const lg = this.nzLg();
        const xl = this.nzXl();
        const xxl = this.nzXXl();
        const xxxl = this.nzXXXl();
        return this.generateClassList({ xs, sm, md, lg, xl, xxl, xxxl });
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "responsiveClass" }] : /* istanbul ignore next */ []));
    hostClass = computed(() => {
        const span = this.nzSpan();
        const order = this.nzOrder();
        const offset = this.nzOffset();
        const push = this.nzPush();
        const pull = this.nzPull();
        const classList = [CLASS_NAME];
        if (isNotNil(span)) {
            classList.push(this.generateClass(`${span}`));
        }
        if (order) {
            classList.push(this.generateClass(`order-${order}`));
        }
        if (offset) {
            classList.push(this.generateClass(`offset-${offset}`));
        }
        if (push) {
            classList.push(this.generateClass(`push-${push}`));
        }
        if (pull) {
            classList.push(this.generateClass(`pull-${pull}`));
        }
        return classList.concat(this.responsiveClass());
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
    flexStyle = computed(() => {
        const flex = this.nzFlex();
        if (typeof flex === 'number') {
            return `${flex} ${flex} auto`;
        }
        else if (typeof flex === 'string') {
            if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
                return `0 0 ${flex}`;
            }
        }
        return flex;
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "flexStyle" }] : /* istanbul ignore next */ []));
    gutterPaddingStyle = computed(() => {
        if (!this.nzRowDirective) {
            return {};
        }
        const [gutterH] = this.nzRowDirective.gutter();
        const style = {};
        // Horizontal gutter use padding
        if (gutterH) {
            const horizontalGutter = isNumber(gutterH) ? coerceCssPixelValue(gutterH / 2) : `calc(${gutterH} / 2)`;
            style['padding-inline'] = horizontalGutter;
        }
        return style;
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "gutterPaddingStyle" }] : /* istanbul ignore next */ []));
    generateClassList(props) {
        const classList = [];
        responsiveArray.forEach(size => {
            let sizeProps = {};
            const propSize = props[size];
            if (isNumber(propSize) || typeof propSize === 'string') {
                sizeProps.span = propSize;
            }
            else if (isPlainObject(propSize)) {
                sizeProps = propSize || {};
            }
            const { span, pull, push, offset, order } = sizeProps;
            if (isNotNil(span)) {
                classList.push(this.generateClass(`${size}-${span}`));
            }
            if (order || order === 0) {
                classList.push(this.generateClass(`${size}-order-${order}`));
            }
            if (offset || offset === 0) {
                classList.push(this.generateClass(`${size}-offset-${offset}`));
            }
            if (push || push === 0) {
                classList.push(this.generateClass(`${size}-push-${push}`));
            }
            if (pull || pull === 0) {
                classList.push(this.generateClass(`${size}-pull-${pull}`));
            }
        });
        return classList;
    }
    generateClass(suffix) {
        return generateClassName(CLASS_NAME, suffix);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzColDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: NzColDirective, isStandalone: true, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: { nzFlex: { classPropertyName: "nzFlex", publicName: "nzFlex", isSignal: true, isRequired: false, transformFunction: null }, nzSpan: { classPropertyName: "nzSpan", publicName: "nzSpan", isSignal: true, isRequired: false, transformFunction: null }, nzOrder: { classPropertyName: "nzOrder", publicName: "nzOrder", isSignal: true, isRequired: false, transformFunction: null }, nzOffset: { classPropertyName: "nzOffset", publicName: "nzOffset", isSignal: true, isRequired: false, transformFunction: null }, nzPush: { classPropertyName: "nzPush", publicName: "nzPush", isSignal: true, isRequired: false, transformFunction: null }, nzPull: { classPropertyName: "nzPull", publicName: "nzPull", isSignal: true, isRequired: false, transformFunction: null }, nzXs: { classPropertyName: "nzXs", publicName: "nzXs", isSignal: true, isRequired: false, transformFunction: null }, nzSm: { classPropertyName: "nzSm", publicName: "nzSm", isSignal: true, isRequired: false, transformFunction: null }, nzMd: { classPropertyName: "nzMd", publicName: "nzMd", isSignal: true, isRequired: false, transformFunction: null }, nzLg: { classPropertyName: "nzLg", publicName: "nzLg", isSignal: true, isRequired: false, transformFunction: null }, nzXl: { classPropertyName: "nzXl", publicName: "nzXl", isSignal: true, isRequired: false, transformFunction: null }, nzXXl: { classPropertyName: "nzXXl", publicName: "nzXXl", isSignal: true, isRequired: false, transformFunction: null }, nzXXXl: { classPropertyName: "nzXXXl", publicName: "nzXXXl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()", "class.ant-col-rtl": "dir() === 'rtl'", "style": "gutterPaddingStyle()", "style.flex": "flexStyle()" } }, exportAs: ["nzCol"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzColDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nz-col],nz-col,nz-form-control,nz-form-label',
                    exportAs: 'nzCol',
                    host: {
                        '[class]': 'hostClass()',
                        '[class.ant-col-rtl]': `dir() === 'rtl'`,
                        '[style]': 'gutterPaddingStyle()',
                        '[style.flex]': 'flexStyle()'
                    }
                }]
        }], propDecorators: { nzFlex: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzFlex", required: false }] }], nzSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzSpan", required: false }] }], nzOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzOrder", required: false }] }], nzOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzOffset", required: false }] }], nzPush: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzPush", required: false }] }], nzPull: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzPull", required: false }] }], nzXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzXs", required: false }] }], nzSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzSm", required: false }] }], nzMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzMd", required: false }] }], nzLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzLg", required: false }] }], nzXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzXl", required: false }] }], nzXXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzXXl", required: false }] }], nzXXXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzXXXl", required: false }] }] } });

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
class NzGridModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: NzGridModule, imports: [NzColDirective, NzRowDirective], exports: [NzColDirective, NzRowDirective] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzGridModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzGridModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [NzColDirective, NzRowDirective],
                    exports: [NzColDirective, NzRowDirective]
                }]
        }] });

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NzColDirective, NzGridModule, NzRowDirective };
//# sourceMappingURL=ng-zorro-antd-grid.mjs.map