@tekus/design-system 5.38.1 → 5.40.0

package/fesm2022/tekus-design-system-components-data-list.mjs

@@ -0,0 +1,185 @@
+import * as i0 from '@angular/core';
+import { input, inject, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { AvatarComponent } from '@tekus/design-system/components/avatar';
+import { ButtonComponent } from '@tekus/design-system/components/button';
+import { TagComponent } from '@tekus/design-system/components/tag';
+import { Breakpoints } from '@tekus/design-system/core/types';
+
+/** Rendered in place of a value that is `null`, `undefined` or a blank string. */
+const DATA_LIST_EMPTY_PLACEHOLDER = '--';
+/** Fallback severity for `'tag'` values, matching the design. */
+const DEFAULT_TAG_SEVERITY = 'primary';
+/**
+ * @component DataListComponent
+ * @description
+ * Displays a collection of read-only term→value pairs, where each value is a typed
+ * piece of data (text, link, tag or number). It is the pair-oriented sibling of
+ * `tk-table`: both render governed, typed values, but the data list presents them as
+ * label→value pairs instead of rows and columns. Use it for detail panels, record
+ * summaries and entity overviews.
+ *
+ * This component supports:
+ * - `items`: the pairs to render. See {@link TkDataListItem}.
+ * - `layout`: `'list'` (one column, dividers, term left / value right) or `'grid'`
+ *   (responsive multi-column, no dividers, term above value).
+ * - `emptyPlaceholder`: the text rendered in place of an empty value.
+ *
+ * The consumer only chooses the layout. Everything that follows from it — item
+ * orientation, dividers and the responsive column count — is owned by the component.
+ * To vary the layout across breakpoints (e.g. list on mobile, grid on desktop), switch
+ * the `layout` input at your own breakpoint.
+ *
+ * Renders as a description list (`<dl>`) so assistive technology announces each entry
+ * as a term→value pair. Interactivity lives inside the value, never on the item — the
+ * item itself is neither focusable nor clickable.
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-data-list [items]="details" layout="list"></tk-data-list>
+ * ```
+ * ```ts
+ * details: TkDataListItem[] = [
+ *   { label: 'Owner', value: 'Ana Bermúdez' },
+ *   { label: 'Status', value: 'Active', type: 'tag' },
+ *   { label: 'Devices', value: 2322, type: 'number' },
+ *   { label: 'Contract', value: 'Open', type: 'link', handler: () => this.openContract() },
+ * ];
+ * ```
+ */
+class DataListComponent {
+    constructor() {
+        /**
+         * The term→value pairs to render, in order.
+         * @default []
+         */
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /**
+         * How the pairs are arranged.
+         * @default 'list'
+         */
+        this.layout = input('list', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        /**
+         * The text rendered in place of a value that is `null`, `undefined` or blank.
+         *
+         * Exposed as an input so it can be localised (`'N/A'`, `'Sin dato'`, …). The
+         * default is the system-wide placeholder.
+         * @default '--'
+         */
+        this.emptyPlaceholder = input(DATA_LIST_EMPTY_PLACEHOLDER, ...(ngDevMode ? [{ debugName: "emptyPlaceholder" }] : /* istanbul ignore next */ []));
+        this.breakpointObserver = inject(BreakpointObserver);
+        /**
+         * Reactive viewport state across every breakpoint the design system defines.
+         *
+         * Grid mode sizes off the viewport rather than the component's own width, matching
+         * `tk-grid-container`. A consequence worth knowing: a data list inside a narrow
+         * drawer still reports the viewport's column count.
+         */
+        this.screenChanges = toSignal(this.breakpointObserver.observe([
+            Breakpoints.mobileSmall,
+            Breakpoints.mobile,
+            Breakpoints.mobileLarge,
+            Breakpoints.tabletVertical,
+            Breakpoints.tabletHorizontal,
+            Breakpoints.desktopSmall,
+            Breakpoints.desktop,
+            Breakpoints.desktopLarge,
+        ]));
+        /** Whether the grid layout is active. */
+        this.isGrid = computed(() => this.layout() === 'grid', ...(ngDevMode ? [{ debugName: "isGrid" }] : /* istanbul ignore next */ []));
+        /**
+         * The number of grid columns for the current viewport.
+         *
+         * Mobile 1 · Tablet 2 · Small 2 · Normal 3 · Extra large 5. Falls back to a single
+         * column when the observer has not reported yet, so the first paint is mobile-first
+         * rather than over-wide.
+         */
+        this.gridColumnCount = computed(() => {
+            const breakpoints = this.screenChanges()?.breakpoints;
+            if (!breakpoints) {
+                return 1;
+            }
+            // Widest first. Every Breakpoints entry is currently bounded on both sides except
+            // desktopLarge, so at most one matches at a time and the order is not strictly
+            // required — but BreakpointObserver reports every matching query, so descending
+            // order keeps this correct even if an upper bound is ever dropped upstream.
+            if (breakpoints[Breakpoints.desktopLarge]) {
+                return 5;
+            }
+            if (breakpoints[Breakpoints.desktop]) {
+                return 3;
+            }
+            if (breakpoints[Breakpoints.desktopSmall] ||
+                breakpoints[Breakpoints.tabletHorizontal] ||
+                breakpoints[Breakpoints.tabletVertical]) {
+                return 2;
+            }
+            return 1;
+        }, ...(ngDevMode ? [{ debugName: "gridColumnCount" }] : /* istanbul ignore next */ []));
+        /**
+         * The `grid-template-columns` value bound on the `<dl>`, or `null` in list layout
+         * so the property is left off the element entirely.
+         *
+         * The track count is capped at the number of items: a data list usually holds fewer
+         * pairs than the viewport allows columns, and emitting the full count would leave
+         * empty tracks that squeeze every value into a fraction of the available width
+         * (e.g. three items over five tracks). Never drops below one, so an empty list still
+         * produces a valid value.
+         */
+        this.gridTemplateColumns = computed(() => {
+            if (!this.isGrid()) {
+                return null;
+            }
+            const columns = Math.min(this.gridColumnCount(), Math.max(this.items().length, 1));
+            return `repeat(${columns}, minmax(0, 1fr))`;
+        }, ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Whether a value should render as the `--` placeholder.
+     *
+     * Applied before the type is considered, so the rule holds uniformly across every
+     * type. `0` and `false`-ish numbers are real values and are not treated as empty.
+     */
+    isEmpty(value) {
+        return value === null || value === undefined || (typeof value === 'string' && value.trim() === '');
+    }
+    /**
+     * The effective value type, defaulting to `'text'`.
+     *
+     * A `'link'` with no `handler` has nothing to invoke, so it resolves to `'text'`: it
+     * renders as plain data instead of as a button that does nothing. That keeps a dead
+     * control out of the accessibility tree and the tab order entirely, which `disabled`
+     * would not do — and `disabled` would also claim the action merely is unavailable
+     * right now, which is not the case.
+     */
+    resolveType(item) {
+        const type = item.type ?? 'text';
+        return type === 'link' && !item.handler ? 'text' : type;
+    }
+    /** The effective tag severity, defaulting to the one used in the design. */
+    resolveTagSeverity(item) {
+        return item.tagSeverity ?? DEFAULT_TAG_SEVERITY;
+    }
+    /**
+     * The value as a string, for the child components that require one
+     * (`tk-tag.value` and `tk-button.label` are both typed `string`).
+     */
+    asText(value) {
+        return this.isEmpty(value) ? '' : String(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DataListComponent, isStandalone: true, selector: "tk-data-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  A description list, so assistive tech announces each entry as a term\u2192value pair.\n  Each pair is wrapped in a <div> \u2014 valid inside <dl>, and it lets the list and grid\n  layouts share identical markup, differing only in CSS.\n-->\n<dl\n  class=\"tk-data-list\"\n  [class.tk-data-list--list]=\"!isGrid()\"\n  [class.tk-data-list--grid]=\"isGrid()\"\n  [style.grid-template-columns]=\"gridTemplateColumns()\">\n  @for (item of items(); track $index) {\n    <div class=\"tk-data-list__item\">\n      <dt class=\"tk-data-list__term\">\n        @if (item.leadingIcon) {\n          <tk-avatar variant=\"icon\" severity=\"secondary\" size=\"m\" [icon]=\"item.leadingIcon\" aria-hidden=\"true\" />\n        }\n\n        <span class=\"tk-data-list__text\">\n          <span class=\"tk-data-list__label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"tk-data-list__description\">{{ item.description }}</span>\n          }\n        </span>\n      </dt>\n\n      <dd\n        class=\"tk-data-list__value\"\n        [class.tk-data-list__value--indented]=\"isGrid() && !!item.leadingIcon\">\n        <!--\n          The empty check runs before the type switch, so the `--` placeholder rule\n          applies uniformly to every value type.\n        -->\n        @if (isEmpty(item.value)) {\n          <span class=\"tk-data-list__placeholder\">{{ emptyPlaceholder() }}</span>\n        } @else {\n          @switch (resolveType(item)) {\n            @case ('tag') {\n              <tk-tag [value]=\"asText(item.value)\" [severity]=\"resolveTagSeverity(item)\" />\n            }\n            @case ('link') {\n              <tk-button [label]=\"asText(item.value)\" [link]=\"true\" (clicked)=\"item.handler?.()\" />\n            }\n            @default {\n              <!-- 'text' and 'number' render identically; number formatting is not implemented yet. -->\n              <span class=\"tk-data-list__value-text\">{{ item.value }}</span>\n            }\n          }\n        }\n      </dd>\n    </div>\n  }\n</dl>\n", styles: [":host{display:block}.tk-data-list{margin:0;font-family:var(--tk-font-family, Poppins, sans-serif)}.tk-data-list--list{display:flex;flex-direction:column;width:100%}.tk-data-list--list .tk-data-list__item{display:flex;align-items:center;justify-content:space-between;padding:var(--tk-spacing-padding-m, 1rem) var(--tk-spacing-padding-xs, .25rem)}.tk-data-list--list .tk-data-list__item:not(:last-child){border-bottom:1px solid var(--tk-color-border-default, #cecdcd)}.tk-data-list--grid{display:grid;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-data-list--grid .tk-data-list__item{display:flex;flex-direction:column;align-items:flex-start;padding:var(--tk-spacing-padding-s, .5rem) var(--tk-spacing-padding-xs, .25rem)}.tk-data-list__term{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);min-width:0}.tk-data-list__text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--tk-spacing-gap-xs, .25rem);min-width:0}.tk-data-list__label{color:var(--tk-color-text-default, #191a1b);font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-paragraph-m, 1rem)}.tk-data-list__description{color:var(--tk-color-text-subtle, #5d5d5e);font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1rem}.tk-data-list__value{display:flex;align-items:center;margin:0;min-width:0}.tk-data-list__value--indented{padding-left:calc(var(--tk-size-base-250, 2.5rem) + var(--tk-spacing-gap-xs, .25rem))}.tk-data-list__value-text,.tk-data-list__placeholder{color:var(--tk-color-text-default, #191a1b);font-weight:var(--tk-font-weight-600, 600);font-size:var(--tk-font-size-paragraph-m, 1rem)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "tk-avatar", inputs: ["variant", "severity", "size", "value", "icon", "image", "alt", "ariaLabel"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DataListComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-data-list', imports: [AvatarComponent, ButtonComponent, TagComponent], template: "<!--\n  A description list, so assistive tech announces each entry as a term\u2192value pair.\n  Each pair is wrapped in a <div> \u2014 valid inside <dl>, and it lets the list and grid\n  layouts share identical markup, differing only in CSS.\n-->\n<dl\n  class=\"tk-data-list\"\n  [class.tk-data-list--list]=\"!isGrid()\"\n  [class.tk-data-list--grid]=\"isGrid()\"\n  [style.grid-template-columns]=\"gridTemplateColumns()\">\n  @for (item of items(); track $index) {\n    <div class=\"tk-data-list__item\">\n      <dt class=\"tk-data-list__term\">\n        @if (item.leadingIcon) {\n          <tk-avatar variant=\"icon\" severity=\"secondary\" size=\"m\" [icon]=\"item.leadingIcon\" aria-hidden=\"true\" />\n        }\n\n        <span class=\"tk-data-list__text\">\n          <span class=\"tk-data-list__label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"tk-data-list__description\">{{ item.description }}</span>\n          }\n        </span>\n      </dt>\n\n      <dd\n        class=\"tk-data-list__value\"\n        [class.tk-data-list__value--indented]=\"isGrid() && !!item.leadingIcon\">\n        <!--\n          The empty check runs before the type switch, so the `--` placeholder rule\n          applies uniformly to every value type.\n        -->\n        @if (isEmpty(item.value)) {\n          <span class=\"tk-data-list__placeholder\">{{ emptyPlaceholder() }}</span>\n        } @else {\n          @switch (resolveType(item)) {\n            @case ('tag') {\n              <tk-tag [value]=\"asText(item.value)\" [severity]=\"resolveTagSeverity(item)\" />\n            }\n            @case ('link') {\n              <tk-button [label]=\"asText(item.value)\" [link]=\"true\" (clicked)=\"item.handler?.()\" />\n            }\n            @default {\n              <!-- 'text' and 'number' render identically; number formatting is not implemented yet. -->\n              <span class=\"tk-data-list__value-text\">{{ item.value }}</span>\n            }\n          }\n        }\n      </dd>\n    </div>\n  }\n</dl>\n", styles: [":host{display:block}.tk-data-list{margin:0;font-family:var(--tk-font-family, Poppins, sans-serif)}.tk-data-list--list{display:flex;flex-direction:column;width:100%}.tk-data-list--list .tk-data-list__item{display:flex;align-items:center;justify-content:space-between;padding:var(--tk-spacing-padding-m, 1rem) var(--tk-spacing-padding-xs, .25rem)}.tk-data-list--list .tk-data-list__item:not(:last-child){border-bottom:1px solid var(--tk-color-border-default, #cecdcd)}.tk-data-list--grid{display:grid;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-data-list--grid .tk-data-list__item{display:flex;flex-direction:column;align-items:flex-start;padding:var(--tk-spacing-padding-s, .5rem) var(--tk-spacing-padding-xs, .25rem)}.tk-data-list__term{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);min-width:0}.tk-data-list__text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--tk-spacing-gap-xs, .25rem);min-width:0}.tk-data-list__label{color:var(--tk-color-text-default, #191a1b);font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-paragraph-m, 1rem)}.tk-data-list__description{color:var(--tk-color-text-subtle, #5d5d5e);font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1rem}.tk-data-list__value{display:flex;align-items:center;margin:0;min-width:0}.tk-data-list__value--indented{padding-left:calc(var(--tk-size-base-250, 2.5rem) + var(--tk-spacing-gap-xs, .25rem))}.tk-data-list__value-text,.tk-data-list__placeholder{color:var(--tk-color-text-default, #191a1b);font-weight:var(--tk-font-weight-600, 600);font-size:var(--tk-font-size-paragraph-m, 1rem)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATA_LIST_EMPTY_PLACEHOLDER, DataListComponent };
+//# sourceMappingURL=tekus-design-system-components-data-list.mjs.map

package/fesm2022/tekus-design-system-components-data-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-data-list.mjs","sources":["../../../projects/design-system/components/data-list/src/data-list.component.ts","../../../projects/design-system/components/data-list/src/data-list.component.html","../../../projects/design-system/components/data-list/tekus-design-system-components-data-list.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { AvatarComponent } from '@tekus/design-system/components/avatar';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { TagComponent, TagSeverity } from '@tekus/design-system/components/tag';\nimport { Breakpoints } from '@tekus/design-system/core/types';\nimport { TkDataListItem, TkDataListLayout, TkDataListValueType } from './data-list.types';\n\n/** Rendered in place of a value that is `null`, `undefined` or a blank string. */\nexport const DATA_LIST_EMPTY_PLACEHOLDER = '--';\n\n/** Fallback severity for `'tag'` values, matching the design. */\nconst DEFAULT_TAG_SEVERITY: TagSeverity = 'primary';\n\n/**\n * @component DataListComponent\n * @description\n * Displays a collection of read-only term→value pairs, where each value is a typed\n * piece of data (text, link, tag or number). It is the pair-oriented sibling of\n * `tk-table`: both render governed, typed values, but the data list presents them as\n * label→value pairs instead of rows and columns. Use it for detail panels, record\n * summaries and entity overviews.\n *\n * This component supports:\n * - `items`: the pairs to render. See {@link TkDataListItem}.\n * - `layout`: `'list'` (one column, dividers, term left / value right) or `'grid'`\n *   (responsive multi-column, no dividers, term above value).\n * - `emptyPlaceholder`: the text rendered in place of an empty value.\n *\n * The consumer only chooses the layout. Everything that follows from it — item\n * orientation, dividers and the responsive column count — is owned by the component.\n * To vary the layout across breakpoints (e.g. list on mobile, grid on desktop), switch\n * the `layout` input at your own breakpoint.\n *\n * Renders as a description list (`<dl>`) so assistive technology announces each entry\n * as a term→value pair. Interactivity lives inside the value, never on the item — the\n * item itself is neither focusable nor clickable.\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-data-list [items]=\"details\" layout=\"list\"></tk-data-list>\n * ```\n * ```ts\n * details: TkDataListItem[] = [\n *   { label: 'Owner', value: 'Ana Bermúdez' },\n *   { label: 'Status', value: 'Active', type: 'tag' },\n *   { label: 'Devices', value: 2322, type: 'number' },\n *   { label: 'Contract', value: 'Open', type: 'link', handler: () => this.openContract() },\n * ];\n * ```\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-data-list',\n  imports: [AvatarComponent, ButtonComponent, TagComponent],\n  templateUrl: './data-list.component.html',\n  styleUrl: './data-list.component.scss',\n})\nexport class DataListComponent {\n  /**\n   * The term→value pairs to render, in order.\n   * @default []\n   */\n  items = input<TkDataListItem[]>([]);\n\n  /**\n   * How the pairs are arranged.\n   * @default 'list'\n   */\n  layout = input<TkDataListLayout>('list');\n\n  /**\n   * The text rendered in place of a value that is `null`, `undefined` or blank.\n   *\n   * Exposed as an input so it can be localised (`'N/A'`, `'Sin dato'`, …). The\n   * default is the system-wide placeholder.\n   * @default '--'\n   */\n  emptyPlaceholder = input<string>(DATA_LIST_EMPTY_PLACEHOLDER);\n\n  private readonly breakpointObserver = inject(BreakpointObserver);\n\n  /**\n   * Reactive viewport state across every breakpoint the design system defines.\n   *\n   * Grid mode sizes off the viewport rather than the component's own width, matching\n   * `tk-grid-container`. A consequence worth knowing: a data list inside a narrow\n   * drawer still reports the viewport's column count.\n   */\n  readonly 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  /** Whether the grid layout is active. */\n  readonly isGrid = computed(() => this.layout() === 'grid');\n\n  /**\n   * The number of grid columns for the current viewport.\n   *\n   * Mobile 1 · Tablet 2 · Small 2 · Normal 3 · Extra large 5. Falls back to a single\n   * column when the observer has not reported yet, so the first paint is mobile-first\n   * rather than over-wide.\n   */\n  readonly gridColumnCount = computed(() => {\n    const breakpoints = this.screenChanges()?.breakpoints;\n    if (!breakpoints) {\n      return 1;\n    }\n\n    // Widest first. Every Breakpoints entry is currently bounded on both sides except\n    // desktopLarge, so at most one matches at a time and the order is not strictly\n    // required — but BreakpointObserver reports every matching query, so descending\n    // order keeps this correct even if an upper bound is ever dropped upstream.\n    if (breakpoints[Breakpoints.desktopLarge]) {\n      return 5;\n    }\n    if (breakpoints[Breakpoints.desktop]) {\n      return 3;\n    }\n    if (\n      breakpoints[Breakpoints.desktopSmall] ||\n      breakpoints[Breakpoints.tabletHorizontal] ||\n      breakpoints[Breakpoints.tabletVertical]\n    ) {\n      return 2;\n    }\n\n    return 1;\n  });\n\n  /**\n   * The `grid-template-columns` value bound on the `<dl>`, or `null` in list layout\n   * so the property is left off the element entirely.\n   *\n   * The track count is capped at the number of items: a data list usually holds fewer\n   * pairs than the viewport allows columns, and emitting the full count would leave\n   * empty tracks that squeeze every value into a fraction of the available width\n   * (e.g. three items over five tracks). Never drops below one, so an empty list still\n   * produces a valid value.\n   */\n  readonly gridTemplateColumns = computed(() => {\n    if (!this.isGrid()) {\n      return null;\n    }\n\n    const columns = Math.min(this.gridColumnCount(), Math.max(this.items().length, 1));\n    return `repeat(${columns}, minmax(0, 1fr))`;\n  });\n\n  /**\n   * Whether a value should render as the `--` placeholder.\n   *\n   * Applied before the type is considered, so the rule holds uniformly across every\n   * type. `0` and `false`-ish numbers are real values and are not treated as empty.\n   */\n  isEmpty(value: TkDataListItem['value']): boolean {\n    return value === null || value === undefined || (typeof value === 'string' && value.trim() === '');\n  }\n\n  /**\n   * The effective value type, defaulting to `'text'`.\n   *\n   * A `'link'` with no `handler` has nothing to invoke, so it resolves to `'text'`: it\n   * renders as plain data instead of as a button that does nothing. That keeps a dead\n   * control out of the accessibility tree and the tab order entirely, which `disabled`\n   * would not do — and `disabled` would also claim the action merely is unavailable\n   * right now, which is not the case.\n   */\n  resolveType(item: TkDataListItem): TkDataListValueType {\n    const type = item.type ?? 'text';\n    return type === 'link' && !item.handler ? 'text' : type;\n  }\n\n  /** The effective tag severity, defaulting to the one used in the design. */\n  resolveTagSeverity(item: TkDataListItem): TagSeverity {\n    return item.tagSeverity ?? DEFAULT_TAG_SEVERITY;\n  }\n\n  /**\n   * The value as a string, for the child components that require one\n   * (`tk-tag.value` and `tk-button.label` are both typed `string`).\n   */\n  asText(value: TkDataListItem['value']): string {\n    return this.isEmpty(value) ? '' : String(value);\n  }\n}\n","<!--\n  A description list, so assistive tech announces each entry as a term→value pair.\n  Each pair is wrapped in a <div> — valid inside <dl>, and it lets the list and grid\n  layouts share identical markup, differing only in CSS.\n-->\n<dl\n  class=\"tk-data-list\"\n  [class.tk-data-list--list]=\"!isGrid()\"\n  [class.tk-data-list--grid]=\"isGrid()\"\n  [style.grid-template-columns]=\"gridTemplateColumns()\">\n  @for (item of items(); track $index) {\n    <div class=\"tk-data-list__item\">\n      <dt class=\"tk-data-list__term\">\n        @if (item.leadingIcon) {\n          <tk-avatar variant=\"icon\" severity=\"secondary\" size=\"m\" [icon]=\"item.leadingIcon\" aria-hidden=\"true\" />\n        }\n\n        <span class=\"tk-data-list__text\">\n          <span class=\"tk-data-list__label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"tk-data-list__description\">{{ item.description }}</span>\n          }\n        </span>\n      </dt>\n\n      <dd\n        class=\"tk-data-list__value\"\n        [class.tk-data-list__value--indented]=\"isGrid() && !!item.leadingIcon\">\n        <!--\n          The empty check runs before the type switch, so the `--` placeholder rule\n          applies uniformly to every value type.\n        -->\n        @if (isEmpty(item.value)) {\n          <span class=\"tk-data-list__placeholder\">{{ emptyPlaceholder() }}</span>\n        } @else {\n          @switch (resolveType(item)) {\n            @case ('tag') {\n              <tk-tag [value]=\"asText(item.value)\" [severity]=\"resolveTagSeverity(item)\" />\n            }\n            @case ('link') {\n              <tk-button [label]=\"asText(item.value)\" [link]=\"true\" (clicked)=\"item.handler?.()\" />\n            }\n            @default {\n              <!-- 'text' and 'number' render identically; number formatting is not implemented yet. -->\n              <span class=\"tk-data-list__value-text\">{{ item.value }}</span>\n            }\n          }\n        }\n      </dd>\n    </div>\n  }\n</dl>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-icon.mjs

@@ -668,6 +668,19 @@ const plusIcon = {
     }
 };
 
+const minusIcon = {
+    'minus': {
+        name: 'faMinus',
+        tags: ['basic'],
+        source: 'Font awesome',
+        styles: {
+            light: import('@fortawesome/pro-light-svg-icons').then(m => m.faMinus),
+            regular: import('@fortawesome/pro-regular-svg-icons').then(m => m.faMinus),
+            solid: import('@fortawesome/pro-solid-svg-icons').then(m => m.faMinus)
+        }
+    }
+};
+
 const linkIcon = {
     'link': {
         name: 'faLink',
@@ -1150,6 +1163,7 @@ const IconCatalog = {
     ...locationIcon,
     ...layerIcon,
     ...plusIcon,
+    ...minusIcon,
     ...linkIcon,
     ...checkIcon,
     ...xMarkIcon,