@ni/ok-components 1.5.2 → 1.6.0

package/dist/esm/fv/master-detail-list-item/index.js

@@ -0,0 +1,86 @@
+import { __decorate } from "tslib";
+import { attr, observable } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A selectable master-detail list item with title, subtitle, and optional status content.
+ */
+export class FvMasterDetailListItem extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.titleText = '';
+        this.subtitle = '';
+        this.value = '';
+        this.compact = false;
+        this.selected = false;
+        this.statusColor = '';
+        this.statusLabel = '';
+        /** @internal */
+        this.hasStatusSlotContent = false;
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'option');
+        this.syncSelectionAria();
+    }
+    /** @internal */
+    selectedChanged() {
+        if (this.$fastController.isConnected) {
+            this.syncSelectionAria();
+        }
+    }
+    /** @internal */
+    handleStatusSlotChange(event) {
+        const slot = event.target;
+        this.hasStatusSlotContent = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    /** @internal */
+    get hasStatus() {
+        return this.hasStatusSlotContent || this.statusColor.trim().length > 0;
+    }
+    /** @internal */
+    get fallbackStatusLabel() {
+        if (this.hasStatusSlotContent || this.statusColor.trim().length === 0) {
+            return null;
+        }
+        const normalizedStatusLabel = this.statusLabel.trim();
+        return normalizedStatusLabel.length > 0 ? normalizedStatusLabel : null;
+    }
+    syncSelectionAria() {
+        this.setAttribute('aria-selected', String(this.selected));
+    }
+}
+__decorate([
+    attr({ attribute: 'title-text' })
+], FvMasterDetailListItem.prototype, "titleText", void 0);
+__decorate([
+    attr
+], FvMasterDetailListItem.prototype, "subtitle", void 0);
+__decorate([
+    attr
+], FvMasterDetailListItem.prototype, "value", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FvMasterDetailListItem.prototype, "compact", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FvMasterDetailListItem.prototype, "selected", void 0);
+__decorate([
+    attr({ attribute: 'status-color' })
+], FvMasterDetailListItem.prototype, "statusColor", void 0);
+__decorate([
+    attr({ attribute: 'status-label' })
+], FvMasterDetailListItem.prototype, "statusLabel", void 0);
+__decorate([
+    observable
+], FvMasterDetailListItem.prototype, "hasStatusSlotContent", void 0);
+const okFvMasterDetailListItem = FvMasterDetailListItem.compose({
+    baseName: 'fv-master-detail-list-item',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailListItem());
+export const fvMasterDetailListItemTag = 'ok-fv-master-detail-list-item';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/master-detail-list-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/master-detail-list-item/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-master-detail-list-item': FvMasterDetailListItem;\n    }\n}\n\n/**\n * A selectable master-detail list item with title, subtitle, and optional status content.\n */\nexport class FvMasterDetailListItem extends FoundationElement {\n    @attr({ attribute: 'title-text' })\n    public titleText = '';\n\n    @attr\n    public subtitle = '';\n\n    @attr\n    public value = '';\n\n    @attr({ mode: 'boolean' })\n    public compact = false;\n\n    @attr({ mode: 'boolean' })\n    public selected = false;\n\n    @attr({ attribute: 'status-color' })\n    public statusColor = '';\n\n    @attr({ attribute: 'status-label' })\n    public statusLabel = '';\n\n    /** @internal */\n    @observable\n    public hasStatusSlotContent = false;\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n\n        this.setAttribute('role', 'option');\n        this.syncSelectionAria();\n    }\n\n    /** @internal */\n    public selectedChanged(): void {\n        if (this.$fastController.isConnected) {\n            this.syncSelectionAria();\n        }\n    }\n\n    /** @internal */\n    public handleStatusSlotChange(event: Event): void {\n        const slot = event.target as HTMLSlotElement;\n        this.hasStatusSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n    }\n\n    /** @internal */\n    public get hasStatus(): boolean {\n        return this.hasStatusSlotContent || this.statusColor.trim().length > 0;\n    }\n\n    /** @internal */\n    public get fallbackStatusLabel(): string | null {\n        if (this.hasStatusSlotContent || this.statusColor.trim().length === 0) {\n            return null;\n        }\n\n        const normalizedStatusLabel = this.statusLabel.trim();\n        return normalizedStatusLabel.length > 0 ? normalizedStatusLabel : null;\n    }\n\n    private syncSelectionAria(): void {\n        this.setAttribute('aria-selected', String(this.selected));\n    }\n}\n\nconst okFvMasterDetailListItem = FvMasterDetailListItem.compose({\n    baseName: 'fv-master-detail-list-item',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailListItem());\nexport const fvMasterDetailListItemTag = 'ok-fv-master-detail-list-item';"]}

package/dist/esm/fv/master-detail-list-item/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/fv/master-detail-list-item/styles.js

@@ -0,0 +1,100 @@
+import { css } from '@ni/fast-element';
+import { bodyFont, bodyFontColor, borderHoverColor, borderWidth, fillHoverColor, fillSelectedColor, iconColor, placeholderFontColor, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    @layer base, hover, selected;
+
+    @layer base {
+        ${display('block')}
+
+        :host {
+            position: relative;
+            color: ${bodyFontColor};
+            cursor: pointer;
+            user-select: none;
+        }
+
+        :host([hidden]) {
+            display: none;
+        }
+
+        .item {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) auto;
+            align-items: center;
+            gap: ${standardPadding};
+            min-block-size: 76px;
+            padding: 14px 18px 14px 22px;
+            background: transparent;
+        }
+
+        :host([compact]) .item {
+            min-block-size: 56px;
+            padding: 10px 18px 10px 22px;
+        }
+
+        .text {
+            min-inline-size: 0;
+        }
+
+        .title {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font: ${bodyFont};
+            font-weight: 600;
+            color: ${bodyFontColor};
+        }
+
+        .subtitle {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-block-start: 4px;
+            font: ${bodyFont};
+            color: ${placeholderFontColor};
+        }
+
+        :host([compact]) .subtitle {
+            margin-block-start: 2px;
+        }
+
+        .status {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            inline-size: 16px;
+            block-size: 16px;
+            flex: 0 0 auto;
+        }
+
+        .status-icon {
+            inline-size: 10px;
+            block-size: 10px;
+            color: currentColor;
+            ${iconColor.cssCustomProperty}: currentColor;
+        }
+    }
+
+    @layer hover {
+        :host(:hover) .item {
+            background: ${fillHoverColor};
+        }
+    }
+
+    @layer selected {
+        :host([selected]) .item {
+            background: ${fillSelectedColor};
+        }
+
+        :host([selected])::before {
+            content: '';
+            position: absolute;
+            inset-block: 0;
+            inset-inline-start: 0;
+            inline-size: calc(${borderWidth} * 4);
+            background: ${borderHoverColor};
+        }
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/master-detail-list-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/master-detail-list-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,oBAAoB,EACpB,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,OAAO,CAAC;;;;qBAIL,aAAa;;;;;;;;;;;;;mBAaf,eAAe;;;;;;;;;;;;;;;;;;;oBAmBd,QAAQ;;qBAEP,aAAa;;;;;;;;oBAQd,QAAQ;qBACP,oBAAoB;;;;;;;;;;;;;;;;;;;;cAoB3B,SAAS,CAAC,iBAAiB;;;;;;0BAMf,cAAc;;;;;;0BAMd,iBAAiB;;;;;;;;gCAQX,WAAW;0BACjB,gBAAgB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    fillHoverColor,\n    fillSelectedColor,\n    iconColor,\n    placeholderFontColor,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, selected;\n\n    @layer base {\n        ${display('block')}\n\n        :host {\n            position: relative;\n            color: ${bodyFontColor};\n            cursor: pointer;\n            user-select: none;\n        }\n\n        :host([hidden]) {\n            display: none;\n        }\n\n        .item {\n            display: grid;\n            grid-template-columns: minmax(0, 1fr) auto;\n            align-items: center;\n            gap: ${standardPadding};\n            min-block-size: 76px;\n            padding: 14px 18px 14px 22px;\n            background: transparent;\n        }\n\n        :host([compact]) .item {\n            min-block-size: 56px;\n            padding: 10px 18px 10px 22px;\n        }\n\n        .text {\n            min-inline-size: 0;\n        }\n\n        .title {\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font: ${bodyFont};\n            font-weight: 600;\n            color: ${bodyFontColor};\n        }\n\n        .subtitle {\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            margin-block-start: 4px;\n            font: ${bodyFont};\n            color: ${placeholderFontColor};\n        }\n\n        :host([compact]) .subtitle {\n            margin-block-start: 2px;\n        }\n\n        .status {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            inline-size: 16px;\n            block-size: 16px;\n            flex: 0 0 auto;\n        }\n\n        .status-icon {\n            inline-size: 10px;\n            block-size: 10px;\n            color: currentColor;\n            ${iconColor.cssCustomProperty}: currentColor;\n        }\n    }\n\n    @layer hover {\n        :host(:hover) .item {\n            background: ${fillHoverColor};\n        }\n    }\n\n    @layer selected {\n        :host([selected]) .item {\n            background: ${fillSelectedColor};\n        }\n\n        :host([selected])::before {\n            content: '';\n            position: absolute;\n            inset-block: 0;\n            inset-inline-start: 0;\n            inline-size: calc(${borderWidth} * 4);\n            background: ${borderHoverColor};\n        }\n    }\n`;"]}

package/dist/esm/fv/master-detail-list-item/template.d.ts

@@ -0,0 +1,2 @@
+import type { FvMasterDetailListItem } from '.';
+export declare const template: import("@ni/fast-element").ViewTemplate<FvMasterDetailListItem, any>;

package/dist/esm/fv/master-detail-list-item/template.js

@@ -0,0 +1,28 @@
+import { html, when } from '@ni/fast-element';
+import { iconCircleFilledTag } from '@ni/nimble-components/dist/esm/icons/circle-filled';
+export const template = html `
+    <div class="item" part="item">
+        <div class="text" part="text">
+            <div class="title" part="title">${x => x.titleText}</div>
+            <div class="subtitle" part="subtitle">${x => x.subtitle}</div>
+        </div>
+        <div class="status" part="status" ?hidden="${x => !x.hasStatus}">
+            <slot
+                name="status"
+                @slotchange="${(x, c) => x.handleStatusSlotChange(c.event)}"
+            >
+                ${when(x => x.statusColor.trim().length > 0, html `
+                        <${iconCircleFilledTag}
+                            class="status-icon"
+                            part="status-icon"
+                            role="${x => (x.fallbackStatusLabel ? 'img' : null)}"
+                            aria-label="${x => x.fallbackStatusLabel}"
+                            aria-hidden="${x => (x.fallbackStatusLabel === null ? 'true' : null)}"
+                            style="${x => `color: ${x.statusColor};`}"
+                        ></${iconCircleFilledTag}>
+                    `)}
+            </slot>
+        </div>
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/master-detail-list-item/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/master-detail-list-item/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oDAAoD,CAAC;AAGzF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAwB;;;8CAGN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;oDACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;qDAEd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;;;+BAGvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAK,CAAC;;kBAExD,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EACpC,IAAI,CAAwB;2BACrB,mBAAmB;;;oCAGV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;0CACrC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;2CACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;qCAC3D,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,WAAW,GAAG;6BACvC,mBAAmB;qBAC3B,CACJ;;;;CAIhB,CAAC","sourcesContent":["import { html, when } from '@ni/fast-element';\nimport { iconCircleFilledTag } from '@ni/nimble-components/dist/esm/icons/circle-filled';\nimport type { FvMasterDetailListItem } from '.';\n\nexport const template = html<FvMasterDetailListItem>`\n    <div class=\"item\" part=\"item\">\n        <div class=\"text\" part=\"text\">\n            <div class=\"title\" part=\"title\">${x => x.titleText}</div>\n            <div class=\"subtitle\" part=\"subtitle\">${x => x.subtitle}</div>\n        </div>\n        <div class=\"status\" part=\"status\" ?hidden=\"${x => !x.hasStatus}\">\n            <slot\n                name=\"status\"\n                @slotchange=\"${(x, c) => x.handleStatusSlotChange(c.event)}\"\n            >\n                ${when(\n                    x => x.statusColor.trim().length > 0,\n                    html<FvMasterDetailListItem>`\n                        <${iconCircleFilledTag}\n                            class=\"status-icon\"\n                            part=\"status-icon\"\n                            role=\"${x => (x.fallbackStatusLabel ? 'img' : null)}\"\n                            aria-label=\"${x => x.fallbackStatusLabel}\"\n                            aria-hidden=\"${x => (x.fallbackStatusLabel === null ? 'true' : null)}\"\n                            style=\"${x => `color: ${x.statusColor};`}\"\n                        ></${iconCircleFilledTag}>\n                    `\n                )}\n            </slot>\n        </div>\n    </div>\n`;"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",