@tekus/design-system 4.0.3 → 5.0.1

package/fesm2022/tekus-design-system-components-fallback-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-fallback-view.mjs","sources":["../../../projects/design-system/components/fallback-view/src/fallback-view.component.ts","../../../projects/design-system/components/fallback-view/src/fallback-view.component.html","../../../projects/design-system/components/fallback-view/tekus-design-system-components-fallback-view.ts"],"sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CardModule } from 'primeng/card';\n\nexport type FallbackViewType = 'content' | 'section';\n\n/**\n * @component FallbackViewComponent\n * @description\n * A reusable component for displaying fallback or empty states such as\n * “no results found”, “error loading data”, or “content not available”.\n * It provides a consistent structure with support for an image, title,\n * message, and optional action buttons.\n *\n * The component can be used in two ways:\n * 1. **Via Inputs:** Pass data directly through component inputs (`imageSrc`, `title`, `message`, etc.).\n * 2. **Via Content Projection (`ng-content`):** Use your own HTML structure for full customization.\n *\n * @usage\n * ### Basic Usage (via Inputs)\n * ```html\n * <tk-fallback-view\n *   imageSrc=\"assets/img/empty-state.svg\"\n *   title=\"No Items Found\"\n *   message=\"There are currently no items to display. Try adding one.\"\n *   buttonLabel=\"Add New Item\"\n *   linkLabel=\"Learn More\"\n *   (buttonAction)=\"handleAddNewItem()\"\n *   (linkAction)=\"handleLearnMore()\">\n * </tk-fallback-view>\n * ```\n *\n * ### Compact Variant (Section type)\n * ```html\n * <tk-fallback-view\n *   [type]=\"'small'\"\n *   imageSrc=\"assets/img/check.svg\"\n *   message=\"Saved successfully\">\n * </tk-fallback-view>\n * ```\n *\n * ### Advanced Usage (via ng-content)\n * ```html\n * <tk-fallback-view [type]=\"'content'\">\n *   <img image src=\"assets/img/empty-state.svg\" alt=\"Tekus logo\">\n *   <h2 title>Custom Title</h2>\n *   <p message>\n *     This is a <b>custom message</b> with <strong>HTML content</strong>.\n *   </p>\n *   <div actions>\n *     <tk-button\n *       label=\"Primary Action\"\n *       severity=\"primary\"\n *       (click)=\"onPrimaryAction()\">\n *     </tk-button>\n *     <tk-button\n *       label=\"Secondary Action\"\n *       [link]=\"true\"\n *       (click)=\"onSecondaryAction()\">\n *     </tk-button>\n *   </div>\n * </tk-fallback-view>\n * ```\n */\n\n@Component({\n  selector: 'tk-fallback-view',\n  standalone: true,\n  imports: [CommonModule, ButtonComponent, CardModule],\n  templateUrl: './fallback-view.component.html',\n  styleUrl: './fallback-view.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class FallbackViewComponent {\n  /**\n   * @property {FallbackViewType} type\n   * @description\n   * Controls the overall type and spacing of the component.\n   * - `'content'`: Standard size.\n   * - `'section'`: A more compact version.\n   *\n   * @default `'default'`\n   */\n  @Input() type: FallbackViewType = 'content';\n\n  /**\n   * @property {string} imageSrc\n   * @description\n   * The URL for the illustrative image to be displayed at the top.\n   *\n   * @default `''`\n   */\n  @Input() imageSrc = '';\n\n  /**\n   * @property {string} illustrationAlt\n   * Descriptive alternative text for the image. Improves accessibility.\n   */\n  @Input() illustrationAlt = '';\n\n  /**\n   * @property {string} title\n   * @description\n   * The main title or heading of the fallback view.\n   *\n   * @default `''`\n   */\n  @Input() title = '';\n\n  /**\n   * @property {string} message\n   * @description\n   * The descriptive text or message displayed below the title.\n   *\n   * @default `''`\n   */\n  @Input() message = '';\n\n  /**\n   * @property {string} buttonLabel\n   * @description\n   * Text for the primary action button. If left empty, the button is not rendered.\n   *\n   * @default `''`\n   */\n  @Input() buttonLabel = '';\n\n  /**\n   * @property {string} linkLabel\n   * @description\n   * Text for the secondary action, which is styled as a link.\n   * If left empty, the link is not rendered.\n   *\n   * @default `''`\n   */\n  @Input() linkLabel = '';\n\n  /**\n   * @event buttonAction\n   * @description\n   * Emits when the main action button is clicked. Listen to this event\n   * to handle the primary call-to-action.\n   */\n  @Output() buttonAction = new EventEmitter<void>();\n\n  /**\n   * @event linkAction\n   * @description\n   * Emits when the link-styled button is clicked. Use for secondary\n   * or alternative actions.\n   */\n  @Output() linkAction = new EventEmitter<void>();\n\n  /**\n   * @method  onButtonActionClick\n   * @description\n   * Internal handler that emits the `primaryAction` event when the\n   * main button is clicked.\n   */\n  onButtonActionClick(): void {\n    this.buttonAction.emit();\n  }\n\n  /**\n   * @method onLinkActionClick\n   * @description\n   * Internal handler that emits the `linkAction` event when the\n   * link button is clicked.\n   */\n  onLinkActionClick(): void {\n    this.linkAction.emit();\n  }\n}\n","<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc) {\n  <img\n    [src]=\"imageSrc\"\n    [alt]=\"illustrationAlt || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title && type === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message) {\n  <p class=\"tk-fallback-view__message\">{{ message }}</p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type === 'content' && (buttonLabel || linkLabel)) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel) {\n    <tk-button\n      [label]=\"buttonLabel\"\n      severity=\"primary\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel) {\n    <tk-button\n      [label]=\"linkLabel\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\n    }\n  </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDG;MAUU,qBAAqB,CAAA;AARlC,IAAA,WAAA,GAAA;AASE;;;;;;;;AAQG;QACM,IAAI,CAAA,IAAA,GAAqB,SAAS;AAE3C;;;;;;AAMG;QACM,IAAQ,CAAA,QAAA,GAAG,EAAE;AAEtB;;;AAGG;QACM,IAAe,CAAA,eAAA,GAAG,EAAE;AAE7B;;;;;;AAMG;QACM,IAAK,CAAA,KAAA,GAAG,EAAE;AAEnB;;;;;;AAMG;QACM,IAAO,CAAA,OAAA,GAAG,EAAE;AAErB;;;;;;AAMG;QACM,IAAW,CAAA,WAAA,GAAG,EAAE;AAEzB;;;;;;;AAOG;QACM,IAAS,CAAA,SAAA,GAAG,EAAE;AAEvB;;;;;AAKG;AACO,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAQ;AAEjD;;;;;AAKG;AACO,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAQ;AAqBhD;AAnBC;;;;;AAKG;IACH,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;;AAG1B;;;;;AAKG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;+GAjGb,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,6TChFlC,siCAsCA,EAAA,MAAA,EAAA,CAAA,s2CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDqCY,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,sIAAE,UAAU,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAKxC,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAChB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,eAAe,EAAE,UAAU,CAAC,EAGrC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,siCAAA,EAAA,MAAA,EAAA,CAAA,s2CAAA,CAAA,EAAA;8BAY5B,IAAI,EAAA,CAAA;sBAAZ;gBASQ,QAAQ,EAAA,CAAA;sBAAhB;gBAMQ,eAAe,EAAA,CAAA;sBAAvB;gBASQ,KAAK,EAAA,CAAA;sBAAb;gBASQ,OAAO,EAAA,CAAA;sBAAf;gBASQ,WAAW,EAAA,CAAA;sBAAnB;gBAUQ,SAAS,EAAA,CAAA;sBAAjB;gBAQS,YAAY,EAAA,CAAA;sBAArB;gBAQS,UAAU,EAAA,CAAA;sBAAnB;;;AE9JH;;AAEG;;;;"}

package/fesm2022/tekus-design-system-components-grid-container.mjs

@@ -0,0 +1,193 @@
+import * as i0 from '@angular/core';
+import { model, inject, computed, HostBinding, Component } from '@angular/core';
+import { GridItemDirective } from '@tekus/design-system/directives/gird-item';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Gutter, Breakpoints, GapGutter, PaddingGridContainer } from '@tekus/design-system/core/types';
+
+/**
+ * A responsive CSS Grid container that exposes typed, two-way models to control
+ * column count, track size, inter-item gutter, and container padding.
+ *
+ * Behavior:
+ * - columns: GridColumns (default 12). Numeric values are capped per Breakpoints
+ * (2/3/4/8 for mobileSmall/mobileLarge/tabletVertical/tabletHorizontal). No cap when size is minmax().
+ * - size: ComposeSize (default '1fr'). Required to be minmax() when columns is 'auto-fill', otherwise an error is thrown.
+ * - gutter: Gutter (default 'normal'), mapped to GapGutter for host gap.
+ * - containerType: ContainerType (default 'medium'), mapped to PaddingGridContainer for host padding.
+ *
+ * Host bindings:
+ * - style.grid-template-columns via repeat(...) from computed columns/size.
+ * - style.gap via GapGutter.
+ * - style.padding via PaddingGridContainer.
+ *
+ * Intended to wrap GridItemDirective children. Public type is compatible with FixedGridProps | AutoFillGridProps.
+ * @selector tk-grid-container
+ */
+class GridContainerComponent {
+    constructor() {
+        /**
+         * Two-way bound model defining the number of columns in the grid.
+         *
+         * The value is capped based on the current screen breakpoint. If the `size` model
+         * is a `minmax()` function, the column cap is disabled.
+         *
+         * @default 12
+         * @see GridColumns
+         */
+        this.columns = model(12);
+        /**
+         * Two-way bound model defining the spacing between grid items.
+         *
+         * The value is mapped to a CSS `gap` property based on the `Gutter` type.
+         *
+         * @default Gutter.normal
+         * @see Gutter
+         * @see GutterType
+         */
+        this.gutter = model(Gutter.normal);
+        /**
+         * Two-way bound model defining the grid track size.
+         *
+         * Accepts any ComposeSize value (e.g., '1fr', fixed lengths, or minmax()) and
+         * drives the computed grid template for the container.
+         *
+         * @default '1fr'
+         * @see ComposeSize
+         */
+        this.size = model('1fr');
+        /**
+         * Two-way bound model defining the internal spacing of the grid container.
+         *
+         * The value is mapped to a CSS `padding` property based on the `PaddingGridContainer` type.
+         *
+         * @default 'medium'
+         * @see ContainerType
+         */
+        this.containerType = model('medium');
+        /**
+         * A private static RegExp to validate strings that match the `minmax()` function.
+         */
+        this.MINMAX_RE = /^minmax\(\s*(\d+(px|rem|em|%|fr))\s*,\s*(\d+(px|rem|em|%|fr))\s*\)$/i;
+        /**
+         * A private service injection to observe screen breakpoint changes.
+         */
+        this.breakpointObserver = inject(BreakpointObserver);
+        /**
+         * A signal derived from `breakpointObserver` to reactively track changes
+         * across all defined breakpoints.
+         */
+        this.screenChanges = toSignal(this.breakpointObserver.observe([
+            Breakpoints.mobileSmall,
+            Breakpoints.mobile,
+            Breakpoints.mobileLarge,
+            Breakpoints.tabletVertical,
+            Breakpoints.tabletHorizontal,
+            Breakpoints.desktopSmall,
+            Breakpoints.desktop,
+            Breakpoints.desktopLarge,
+        ]));
+        /**
+         * A computed signal that determines the final number of columns for the grid.
+         *
+         * It caps the `columns` model value based on the current screen breakpoint,
+         * unless the `size` model is a `minmax()` function.
+         */
+        this.finalColumns = computed(() => {
+            const breakpoints = this.screenChanges()?.breakpoints;
+            const columnsNumber = parseInt(this.columns());
+            if (isNaN(columnsNumber) ||
+                !breakpoints ||
+                this.isMinMax(this.size())) {
+                return this.columns();
+            }
+            let maxColumns = 12;
+            if (breakpoints[Breakpoints.mobileSmall] ||
+                breakpoints[Breakpoints.mobile]) {
+                maxColumns = 2;
+            }
+            else if (breakpoints[Breakpoints.mobileLarge]) {
+                maxColumns = 3;
+            }
+            else if (breakpoints[Breakpoints.tabletVertical]) {
+                maxColumns = 4;
+            }
+            else if (breakpoints[Breakpoints.tabletHorizontal]) {
+                maxColumns = 8;
+            }
+            return columnsNumber <= maxColumns ? columnsNumber : maxColumns;
+        });
+    }
+    /**
+       * Host binding that maps the `gutter` model to the host element's `style.gap` property.
+       * @returns The CSS gap value from the `GapGutter` type.
+       */
+    get hostGap() {
+        const key = this.gutter() ?? Gutter.normal;
+        return GapGutter[key];
+    }
+    /**
+     * Host binding that sets the `style.grid-template-columns` property based on
+     * the computed column count and track size.
+     * @returns The computed CSS value for `grid-template-columns`.
+     */
+    get gridColumns() {
+        return this.computeGridTemplateColumns();
+    }
+    /**
+     * Host binding that sets the `style.padding` property based on the `containerType` model.
+     * @returns The CSS padding value from the `PaddingGridContainer` type.
+     */
+    get containerPadding() {
+        return PaddingGridContainer[this.containerType()] ?? PaddingGridContainer.medium;
+    }
+    /**
+     * Computes the final `grid-template-columns` string for the host element.
+     *
+     * It handles both fixed and `auto-fill` column types and validates that the `size`
+     * model is a `minmax()` function when `columns` is set to `'auto-fill'`.
+     * @returns The CSS value for the `grid-template-columns` property.
+     */
+    computeGridTemplateColumns() {
+        const columnsVal = this.finalColumns();
+        const sizeVal = this.size() ?? '1fr';
+        if (columnsVal === 'auto-fill') {
+            if (this.isMinMax(sizeVal)) {
+                return `repeat(auto-fill, ${sizeVal})`;
+            }
+            throw new Error('When using columns="auto-fill", the "size" model must be a minmax() function, e.g., minmax(200px,1fr).');
+        }
+        return `repeat(${columnsVal}, ${sizeVal})`;
+    }
+    /**
+     * A private helper method to check if a given value is a valid `minmax()` function string.
+     * @param value The value to check.
+     * @returns `true` if the value is a valid `minmax()` string, `false` otherwise.
+     */
+    isMinMax(value) {
+        return (typeof value === 'string' &&
+            this.MINMAX_RE.test(value.trim()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GridContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: GridContainerComponent, isStandalone: true, selector: "tk-grid-container", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, gutter: { classPropertyName: "gutter", publicName: "gutter", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, containerType: { classPropertyName: "containerType", publicName: "containerType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange", gutter: "gutterChange", size: "sizeChange", containerType: "containerTypeChange" }, host: { properties: { "style.gap": "this.hostGap", "style.grid-template-columns": "this.gridColumns", "style.padding": "this.containerPadding" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:grid}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GridContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-grid-container', standalone: true, imports: [GridItemDirective], template: `<ng-content />`, styles: [":host{display:grid}\n"] }]
+        }], propDecorators: { hostGap: [{
+                type: HostBinding,
+                args: ['style.gap']
+            }], gridColumns: [{
+                type: HostBinding,
+                args: ['style.grid-template-columns']
+            }], containerPadding: [{
+                type: HostBinding,
+                args: ['style.padding']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GridContainerComponent };
+//# sourceMappingURL=tekus-design-system-components-grid-container.mjs.map

package/fesm2022/tekus-design-system-components-grid-container.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-grid-container.mjs","sources":["../../../projects/design-system/components/grid-container/src/grid-container.component.ts","../../../projects/design-system/components/grid-container/tekus-design-system-components-grid-container.ts"],"sourcesContent":["import { Component, computed, HostBinding, inject, model } from '@angular/core';\nimport { GridItemDirective } from '@tekus/design-system/directives/gird-item';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport {\n  AutoFillGridProps,\n  ComposeMinMax,\n  ComposeSize,\n  ContainerType,\n  FixedGridProps,\n  GapGutter,\n  GridColumns,\n  PaddingGridContainer,\n  Breakpoints,\n  Gutter,\n  GutterType\n} from '@tekus/design-system/core/types';\n\n/**\n * A responsive CSS Grid container that exposes typed, two-way models to control\n * column count, track size, inter-item gutter, and container padding.\n *\n * Behavior:\n * - columns: GridColumns (default 12). Numeric values are capped per Breakpoints\n * (2/3/4/8 for mobileSmall/mobileLarge/tabletVertical/tabletHorizontal). No cap when size is minmax().\n * - size: ComposeSize (default '1fr'). Required to be minmax() when columns is 'auto-fill', otherwise an error is thrown.\n * - gutter: Gutter (default 'normal'), mapped to GapGutter for host gap.\n * - containerType: ContainerType (default 'medium'), mapped to PaddingGridContainer for host padding.\n *\n * Host bindings:\n * - style.grid-template-columns via repeat(...) from computed columns/size.\n * - style.gap via GapGutter.\n * - style.padding via PaddingGridContainer.\n *\n * Intended to wrap GridItemDirective children. Public type is compatible with FixedGridProps | AutoFillGridProps.\n * @selector tk-grid-container\n */\n@Component({\n  selector: 'tk-grid-container',\n  standalone: true,\n  imports: [GridItemDirective],\n  styleUrls: ['./grid-container.component.scss'],\n  template: `<ng-content />`,\n})\nexport class GridContainerComponent {\n\n  /**\n   * Two-way bound model defining the number of columns in the grid.\n   *\n   * The value is capped based on the current screen breakpoint. If the `size` model\n   * is a `minmax()` function, the column cap is disabled.\n   *\n   * @default 12\n   * @see GridColumns\n   */\n  columns = model<GridColumns>(12);\n\n  /**\n   * Two-way bound model defining the spacing between grid items.\n   *\n   * The value is mapped to a CSS `gap` property based on the `Gutter` type.\n   *\n   * @default Gutter.normal\n   * @see Gutter\n   * @see GutterType\n   */\n  gutter = model<GutterType>(Gutter.normal);\n\n  /**\n   * Two-way bound model defining the grid track size.\n   *\n   * Accepts any ComposeSize value (e.g., '1fr', fixed lengths, or minmax()) and\n   * drives the computed grid template for the container.\n   *\n   * @default '1fr'\n   * @see ComposeSize\n   */\n  size = model<ComposeSize>('1fr');\n\n  /**\n   * Two-way bound model defining the internal spacing of the grid container.\n   *\n   * The value is mapped to a CSS `padding` property based on the `PaddingGridContainer` type.\n   *\n   * @default 'medium'\n   * @see ContainerType\n   */\n  containerType = model<ContainerType>('medium');\n\n  /**\n   * A private static RegExp to validate strings that match the `minmax()` function.\n   */\n  readonly MINMAX_RE = /^minmax\\(\\s*(\\d+(px|rem|em|%|fr))\\s*,\\s*(\\d+(px|rem|em|%|fr))\\s*\\)$/i;\n\n  /**\n   * A private service injection to observe screen breakpoint changes.\n   */\n  private readonly breakpointObserver = inject(BreakpointObserver);\n\n  /**\n   * A signal derived from `breakpointObserver` to reactively track changes\n   * across all defined breakpoints.\n   */\n  screenChanges = toSignal(\n    this.breakpointObserver.observe([\n      Breakpoints.mobileSmall,\n      Breakpoints.mobile,\n      Breakpoints.mobileLarge,\n      Breakpoints.tabletVertical,\n      Breakpoints.tabletHorizontal,\n      Breakpoints.desktopSmall,\n      Breakpoints.desktop,\n      Breakpoints.desktopLarge,\n    ])\n  );\n\n  /**\n   * A computed signal that determines the final number of columns for the grid.\n   *\n   * It caps the `columns` model value based on the current screen breakpoint,\n   * unless the `size` model is a `minmax()` function.\n   */\n  readonly finalColumns = computed(() => {\n    const breakpoints = this.screenChanges()?.breakpoints;\n    const columnsNumber = parseInt(this.columns() as string);\n    if (\n      isNaN(columnsNumber) ||\n      !breakpoints ||\n      this.isMinMax(this.size())\n    ) {\n      return this.columns();\n    }\n\n    let maxColumns = 12;\n\n    if (\n      breakpoints[Breakpoints.mobileSmall] ||\n      breakpoints[Breakpoints.mobile]\n    ) {\n      maxColumns = 2;\n    } else if (breakpoints[Breakpoints.mobileLarge]) {\n      maxColumns = 3;\n    } else if (breakpoints[Breakpoints.tabletVertical]) {\n      maxColumns = 4;\n    } else if (breakpoints[Breakpoints.tabletHorizontal]) {\n      maxColumns = 8;\n    }\n\n    return columnsNumber <= maxColumns ? columnsNumber : maxColumns;\n  });\n\n  /**\n     * Host binding that maps the `gutter` model to the host element's `style.gap` property.\n     * @returns The CSS gap value from the `GapGutter` type.\n     */\n  @HostBinding('style.gap')\n  get hostGap(): GapGutter {\n    const key: GutterType = this.gutter() ?? Gutter.normal;\n    return GapGutter[key as Gutter];\n  }\n\n  /**\n   * Host binding that sets the `style.grid-template-columns` property based on\n   * the computed column count and track size.\n   * @returns The computed CSS value for `grid-template-columns`.\n   */\n  @HostBinding('style.grid-template-columns')\n  get gridColumns(): string {\n    return this.computeGridTemplateColumns();\n  }\n\n  /**\n   * Host binding that sets the `style.padding` property based on the `containerType` model.\n   * @returns The CSS padding value from the `PaddingGridContainer` type.\n   */\n  @HostBinding('style.padding')\n  get containerPadding(): string {\n    return PaddingGridContainer[this.containerType() as keyof typeof PaddingGridContainer] ?? PaddingGridContainer.medium;\n  }\n\n  /**\n   * Computes the final `grid-template-columns` string for the host element.\n   *\n   * It handles both fixed and `auto-fill` column types and validates that the `size`\n   * model is a `minmax()` function when `columns` is set to `'auto-fill'`.\n   * @returns The CSS value for the `grid-template-columns` property.\n   */\n  computeGridTemplateColumns(): string {\n    const columnsVal = this.finalColumns();\n    const sizeVal = this.size() ?? '1fr';\n\n    if (columnsVal === 'auto-fill') {\n      if (this.isMinMax(sizeVal)) {\n        return `repeat(auto-fill, ${sizeVal})`;\n      }\n      throw new Error(\n        'When using columns=\"auto-fill\", the \"size\" model must be a minmax() function, e.g., minmax(200px,1fr).'\n      );\n    }\n\n    return `repeat(${columnsVal}, ${sizeVal})`;\n  }\n\n  /**\n   * A private helper method to check if a given value is a valid `minmax()` function string.\n   * @param value The value to check.\n   * @returns `true` if the value is a valid `minmax()` string, `false` otherwise.\n   */\n  private isMinMax(value: unknown): value is ComposeMinMax {\n    return (\n      typeof value === 'string' &&\n      this.MINMAX_RE.test(value.trim())\n    );\n  }\n}\n\n/**\n * A public type to represent an instance of the `GridContainerComponent` class,\n * combined with its public input properties.\n *\n * This allows for better type-checking when the component is used in a template.\n */\nexport type GridComponent = new () => GridContainerComponent &\n  (FixedGridProps | AutoFillGridProps);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}