@ni/ok-components 1.0.1 → 1.1.0

package/dist/custom-elements.json

@@ -16,13 +16,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/fv/all-fv.ts",
+      "path": "src/ts/all-ts.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/ts/all-ts.ts",
+      "path": "src/fv/all-fv.ts",
       "declarations": [],
       "exports": []
     },
@@ -67,6 +67,74 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/ts/icon-dynamic/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:\n```\ncustomElements.get('ok-ts-icon-dynamic').registerIconDynamic('ok-ts-icon-dynamic-awesome', '<img data uri or arbitrary url>');\n```\nAfter calling successfully, the icon can be used like any other icon:\n```\n<ok-ts-icon-dynamic-awesome></ok-ts-icon-dynamic-awesome>\n<nimble-mapping-icon icon=\"ok-ts-icon-dynamic-awesome\"></nimble-mapping-icon>\n```",
+          "name": "TsIconDynamic",
+          "members": [
+            {
+              "kind": "method",
+              "name": "registerIconDynamic",
+              "privacy": "public",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tagName",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "superclass": {
+            "name": "Icon",
+            "package": "@ni/nimble-components/dist/esm/icon-base"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "tsIconDynamicTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-ts-icon-dynamic'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TsIconDynamic",
+          "declaration": {
+            "name": "TsIconDynamic",
+            "module": "src/ts/icon-dynamic/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "tsIconDynamicTag",
+          "declaration": {
+            "name": "tsIconDynamicTag",
+            "module": "src/ts/icon-dynamic/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/fv/accordion-item/index.ts",
@@ -205,68 +273,113 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/ts/icon-dynamic/index.ts",
+      "path": "src/fv/search-input/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:\n```\ncustomElements.get('ok-ts-icon-dynamic').registerIconDynamic('ok-ts-icon-dynamic-awesome', '<img data uri or arbitrary url>');\n```\nAfter calling successfully, the icon can be used like any other icon:\n```\n<ok-ts-icon-dynamic-awesome></ok-ts-icon-dynamic-awesome>\n<nimble-mapping-icon icon=\"ok-ts-icon-dynamic-awesome\"></nimble-mapping-icon>\n```",
-          "name": "TsIconDynamic",
+          "description": "A compact search input with a built-in clear affordance.",
+          "name": "FvSearchInput",
           "members": [
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "FvSearchInputAppearanceType"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "method",
-              "name": "registerIconDynamic",
+              "name": "handleChange",
               "privacy": "public",
-              "static": true,
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "parameters": [
-                {
-                  "name": "tagName",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "url",
-                  "type": {
-                    "text": "string"
-                  }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "clear",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
                 }
-              ]
+              },
+              "description": "Clears the current value, restores focus to the text input, and\ndispatches a synthetic `input` event on the host so consumers\nobserve the same immediate value-update contract as typing.\nThe inner <input> value is updated on the next FAST render cycle\nvia the `:value` template binding."
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "Event"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "appearance",
+              "type": {
+                "text": "FvSearchInputAppearanceType"
+              },
+              "fieldName": "appearance"
             }
           ],
           "superclass": {
-            "name": "Icon",
-            "package": "@ni/nimble-components/dist/esm/icon-base"
+            "name": "FoundationTextField",
+            "package": "@ni/fast-foundation"
           }
         },
         {
           "kind": "variable",
-          "name": "tsIconDynamicTag",
+          "name": "fvSearchInputTag",
           "type": {
             "text": "string"
           },
-          "default": "'ok-ts-icon-dynamic'"
+          "default": "'ok-fv-search-input'"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TsIconDynamic",
+          "name": "FvSearchInput",
           "declaration": {
-            "name": "TsIconDynamic",
-            "module": "src/ts/icon-dynamic/index.ts"
+            "name": "FvSearchInput",
+            "module": "src/fv/search-input/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tsIconDynamicTag",
+          "name": "fvSearchInputTag",
           "declaration": {
-            "name": "tsIconDynamicTag",
-            "module": "src/ts/icon-dynamic/index.ts"
+            "name": "fvSearchInputTag",
+            "module": "src/fv/search-input/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/search-input/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FvSearchInputAppearance",
+          "type": {
+            "text": "{\n    block: 'block',\n    outline: 'outline',\n    underline: 'underline',\n    frameless: 'frameless'\n}"
+          },
+          "default": "{ block: 'block', outline: 'outline', underline: 'underline', frameless: 'frameless' }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvSearchInputAppearance",
+          "declaration": {
+            "name": "FvSearchInputAppearance",
+            "module": "src/fv/search-input/types.ts"
           }
         }
       ]

package/dist/custom-elements.md

@@ -8,6 +8,22 @@
 
 <hr/>
 
+## class: `TsIconDynamic`
+
+### Superclass
+
+| Name   | Module | Package                                  |
+| ------ | ------ | ---------------------------------------- |
+| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
+
+### Static Methods
+
+| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
+| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
+| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
+
+<hr/>
+
 ## class: `FvAccordionItem`
 
 ### Superclass
@@ -40,18 +56,37 @@
 
 <hr/>
 
-## class: `TsIconDynamic`
+## class: `FvSearchInput`
 
 ### Superclass
 
-| Name   | Module | Package                                  |
-| ------ | ------ | ---------------------------------------- |
-| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
+| Name                  | Module | Package             |
+| --------------------- | ------ | ------------------- |
+| `FoundationTextField` |        | @ni/fast-foundation |
 
-### Static Methods
+### Fields
 
-| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
-| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
-| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
+| Name         | Privacy | Type                          | Default | Description | Inherited From |
+| ------------ | ------- | ----------------------------- | ------- | ----------- | -------------- |
+| `appearance` | public  | `FvSearchInputAppearanceType` |         |             |                |
+
+### Methods
+
+| Name           | Privacy | Description                                                                                                                                                                                                                                                                                                        | Parameters | Return    | Inherited From |
+| -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | --------- | -------------- |
+| `handleChange` | public  |                                                                                                                                                                                                                                                                                                                    |            | `void`    |                |
+| `clear`        | public  | Clears the current value, restores focus to the text input, and&#xA;dispatches a synthetic \`input\` event on the host so consumers&#xA;observe the same immediate value-update contract as typing.&#xA;The inner \<input> value is updated on the next FAST render cycle&#xA;via the \`:value\` template binding. |            | `boolean` |                |
+
+### Events
+
+| Name    | Type    | Description | Inherited From |
+| ------- | ------- | ----------- | -------------- |
+| `input` | `Event` |             |                |
+
+### Attributes
+
+| Name         | Field      | Inherited From |
+| ------------ | ---------- | -------------- |
+| `appearance` | appearance |                |
 
 <hr/>

package/dist/esm/fv/all-fv.d.ts

@@ -1 +1,2 @@
 import './accordion-item';
+import './search-input';

package/dist/esm/fv/all-fv.js

@@ -1,2 +1,3 @@
 import './accordion-item';
+import './search-input';
 //# sourceMappingURL=all-fv.js.map

package/dist/esm/fv/all-fv.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-fv.js","sourceRoot":"","sources":["../../../src/fv/all-fv.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC","sourcesContent":["import './accordion-item';\n"]}
+{"version":3,"file":"all-fv.js","sourceRoot":"","sources":["../../../src/fv/all-fv.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC","sourcesContent":["import './accordion-item';\nimport './search-input';\n"]}

package/dist/esm/fv/search-input/index.d.ts

@@ -0,0 +1,23 @@
+import { TextField as FoundationTextField } from '@ni/fast-foundation';
+import { type FvSearchInputAppearance as FvSearchInputAppearanceType } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-search-input': FvSearchInput;
+    }
+}
+/**
+ * A compact search input with a built-in clear affordance.
+ */
+export declare class FvSearchInput extends FoundationTextField {
+    appearance: FvSearchInputAppearanceType;
+    handleChange(): void;
+    /**
+     * Clears the current value, restores focus to the text input, and
+     * dispatches a synthetic `input` event on the host so consumers
+     * observe the same immediate value-update contract as typing.
+     * The inner <input> value is updated on the next FAST render cycle
+     * via the `:value` template binding.
+     */
+    clear(): boolean;
+}
+export declare const fvSearchInputTag = "ok-fv-search-input";

package/dist/esm/fv/search-input/index.js

@@ -0,0 +1,50 @@
+import { __decorate } from "tslib";
+import { attr } from '@ni/fast-element';
+import { DesignSystem, TextField as FoundationTextField } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { FvSearchInputAppearance } from './types';
+/**
+ * A compact search input with a built-in clear affordance.
+ */
+export class FvSearchInput extends FoundationTextField {
+    constructor() {
+        super(...arguments);
+        this.appearance = FvSearchInputAppearance.outline;
+    }
+    handleChange() {
+        this.value = this.control.value;
+        super.handleChange();
+    }
+    /**
+     * Clears the current value, restores focus to the text input, and
+     * dispatches a synthetic `input` event on the host so consumers
+     * observe the same immediate value-update contract as typing.
+     * The inner <input> value is updated on the next FAST render cycle
+     * via the `:value` template binding.
+     */
+    clear() {
+        if (this.value === '') {
+            return true;
+        }
+        this.value = '';
+        this.control.focus();
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        return true;
+    }
+}
+__decorate([
+    attr
+], FvSearchInput.prototype, "appearance", void 0);
+const okFvSearchInput = FvSearchInput.compose({
+    baseName: 'fv-search-input',
+    baseClass: FoundationTextField,
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvSearchInput());
+export const fvSearchInputTag = 'ok-fv-search-input';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/search-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/search-input/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEnC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACH,uBAAuB,EAE1B,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,mBAAmB;IAAtD;;QAEW,eAAU,GAAgC,uBAAuB,CAAC,OAAO,CAAC;IAwBrF,CAAC;IAtBmB,YAAY;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAChC,KAAK,CAAC,YAAY,EAAE,CAAC;IACzB,CAAC;IAED;;;;;;OAMG;IACI,KAAK;QACR,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC1E,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AAxBU;IADN,IAAI;iDAC4E;AA0BrF,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,CAAmB;IAC5D,QAAQ,EAAE,iBAAiB;IAC3B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,oBAAoB,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport {\n    DesignSystem,\n    TextField as FoundationTextField,\n    type TextFieldOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n    FvSearchInputAppearance,\n    type FvSearchInputAppearance as FvSearchInputAppearanceType\n} from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-search-input': FvSearchInput;\n    }\n}\n\n/**\n * A compact search input with a built-in clear affordance.\n */\nexport class FvSearchInput extends FoundationTextField {\n    @attr\n    public appearance: FvSearchInputAppearanceType = FvSearchInputAppearance.outline;\n\n    public override handleChange(): void {\n        this.value = this.control.value;\n        super.handleChange();\n    }\n\n    /**\n     * Clears the current value, restores focus to the text input, and\n     * dispatches a synthetic `input` event on the host so consumers\n     * observe the same immediate value-update contract as typing.\n     * The inner <input> value is updated on the next FAST render cycle\n     * via the `:value` template binding.\n     */\n    public clear(): boolean {\n        if (this.value === '') {\n            return true;\n        }\n\n        this.value = '';\n        this.control.focus();\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        return true;\n    }\n}\n\nconst okFvSearchInput = FvSearchInput.compose<TextFieldOptions>({\n    baseName: 'fv-search-input',\n    baseClass: FoundationTextField,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSearchInput());\nexport const fvSearchInputTag = 'ok-fv-search-input';"]}

package/dist/esm/fv/search-input/styles.d.ts

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

package/dist/esm/fv/search-input/styles.js

@@ -0,0 +1,178 @@
+import { css } from '@ni/fast-element';
+import { bodyFont, bodyFontColor, borderHoverColor, borderRgbPartialColor, borderWidth, controlHeight, fillHoverColor, iconColor, iconSize, mediumPadding, placeholderFontColor, smallPadding, smallDelay, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    @layer base, hover, focusVisible, active, disabled, top;
+
+    @layer base {
+        ${display('inline-block')}
+
+        :host {
+            --ni-private-fv-search-input-inline-padding: ${standardPadding};
+            --ni-private-fv-search-input-leading-inset: ${mediumPadding};
+            --ni-private-fv-search-input-leading-space: calc(var(--ni-private-fv-search-input-leading-inset) + ${iconSize} + ${smallPadding});
+            --ni-private-fv-search-input-trailing-space: calc(var(--ni-private-fv-search-input-inline-padding) + ${iconSize});
+            --ni-private-fv-search-input-border-color: rgba(${borderRgbPartialColor}, 0.3);
+            --ni-private-fv-search-input-border-radius: 0px;
+            min-width: 120px;
+            height: ${controlHeight};
+            font: ${bodyFont};
+            color: ${bodyFontColor};
+        }
+
+        .search-input-container {
+            position: relative;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            border: ${borderWidth} solid transparent;
+            border-radius: var(--ni-private-fv-search-input-border-radius);
+            color: inherit;
+            background-color: transparent;
+            transition:
+                border-color ${smallDelay} ease-in-out,
+                box-shadow ${smallDelay} ease-in-out,
+                background-color ${smallDelay} ease-in-out;
+        }
+
+        .search-input-container::after {
+            content: '';
+            position: absolute;
+            inset-inline: 0;
+            inset-block-end: calc(-1 * ${borderWidth});
+            border-bottom: calc(${borderWidth} + 1px) solid ${borderHoverColor};
+            transform: scaleX(0);
+            transform-origin: center;
+            transition:
+                transform ${smallDelay} ease-in-out,
+                border-bottom-color ${smallDelay} ease-in-out;
+            pointer-events: none;
+        }
+
+        .search-input-icon {
+            position: absolute;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            top: 50%;
+            inset-inline-start: var(--ni-private-fv-search-input-leading-inset);
+            transform: translateY(-50%);
+            color: ${placeholderFontColor};
+            pointer-events: none;
+            ${iconColor.cssCustomProperty}: ${placeholderFontColor};
+        }
+
+        .search-input {
+            -webkit-appearance: none;
+            appearance: none;
+            display: block;
+            flex: 1 1 auto;
+            min-width: 0;
+            width: 100%;
+            height: 100%;
+            padding: 0 var(--ni-private-fv-search-input-trailing-space) 0 var(--ni-private-fv-search-input-leading-space);
+            font: inherit;
+            line-height: normal;
+            color: inherit;
+            border: none;
+            outline: none;
+            border-radius: 0;
+            background: transparent;
+        }
+
+        .search-input::placeholder {
+            color: ${placeholderFontColor};
+        }
+
+        .search-input-clear {
+            -webkit-appearance: none;
+            appearance: none;
+            position: absolute;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            top: 50%;
+            inset-inline-end: 2px;
+            height: calc(100% - 6px);
+            aspect-ratio: 1;
+            padding: 0;
+            transform: translateY(-50%);
+            color: ${placeholderFontColor};
+            border: none;
+            border-radius: 2px;
+            background: transparent;
+            cursor: pointer;
+            ${iconColor.cssCustomProperty}: ${placeholderFontColor};
+        }
+
+        :host([appearance='outline']) .search-input-container {
+            border-color: var(--ni-private-fv-search-input-border-color);
+        }
+
+        :host([appearance='block']) .search-input-container {
+            background-color: rgba(${borderRgbPartialColor}, 0.1);
+        }
+
+        :host([appearance='underline']) .search-input-container::after {
+            transform: scaleX(1);
+            border-bottom-color: var(--ni-private-fv-search-input-border-color);
+        }
+    }
+
+    @layer hover {
+        .search-input-clear:hover {
+            background: ${fillHoverColor};
+        }
+
+        :host([appearance='outline']) .search-input-container:hover {
+            border-color: ${borderHoverColor};
+            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
+        }
+
+        :host([appearance='block']) .search-input-container:hover::after {
+            transform: scaleX(1);
+            border-bottom-color: ${borderHoverColor};
+        }
+
+        :host([appearance='underline']) .search-input-container:hover::after {
+            border-bottom-color: ${borderHoverColor};
+        }
+
+        :host([appearance='frameless']) .search-input-container:hover::after {
+            transform: scaleX(1);
+            border-bottom-color: ${borderHoverColor};
+        }
+    }
+
+    @layer focusVisible {
+        .search-input:focus-visible {
+            outline: none;
+        }
+
+        .search-input-clear:focus-visible {
+            outline: ${borderWidth} solid ${borderHoverColor};
+            outline-offset: -1px;
+        }
+
+        :host([appearance='outline']) .search-input-container:focus-within {
+            border-color: ${borderHoverColor};
+            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
+        }
+
+        :host([appearance='block']) .search-input-container:focus-within::after {
+            transform: scaleX(1);
+            border-bottom-color: ${borderHoverColor};
+        }
+
+        :host([appearance='underline']) .search-input-container:focus-within::after {
+            border-bottom-color: ${borderHoverColor};
+        }
+
+        :host([appearance='frameless']) .search-input-container:focus-within::after {
+            transform: scaleX(1);
+            border-bottom-color: ${borderHoverColor};
+        }
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/search-input/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/search-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,cAAc,EACd,SAAS,EACT,QAAQ,EACR,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,UAAU,EACV,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,cAAc,CAAC;;;2DAG0B,eAAe;0DAChB,aAAa;iHAC0C,QAAQ,MAAM,YAAY;mHACxB,QAAQ;8DAC7D,qBAAqB;;;sBAG7D,aAAa;oBACf,QAAQ;qBACP,aAAa;;;;;;;;;sBASZ,WAAW;;;;;+BAKF,UAAU;6BACZ,UAAU;mCACJ,UAAU;;;;;;;yCAOJ,WAAW;kCAClB,WAAW,iBAAiB,gBAAgB;;;;4BAIlD,UAAU;sCACA,UAAU;;;;;;;;;;;;qBAY3B,oBAAoB;;cAE3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;;;;;;;;;;;;;qBAsB7C,oBAAoB;;;;;;;;;;;;;;;;qBAgBpB,oBAAoB;;;;;cAK3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;qCAQ7B,qBAAqB;;;;;;;;;;;0BAWhC,cAAc;;;;4BAIZ,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;mCAIhB,gBAAgB;;;;;mCAKhB,gBAAgB;;;;;;;;;;uBAU5B,WAAW,UAAU,gBAAgB;;;;;4BAKhC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;mCAIhB,gBAAgB;;;;;mCAKhB,gBAAgB;;;CAGlD,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    iconColor,\n    iconSize,\n    mediumPadding,\n    placeholderFontColor,\n    smallPadding,\n    smallDelay,\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, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-block')}\n\n        :host {\n            --ni-private-fv-search-input-inline-padding: ${standardPadding};\n            --ni-private-fv-search-input-leading-inset: ${mediumPadding};\n            --ni-private-fv-search-input-leading-space: calc(var(--ni-private-fv-search-input-leading-inset) + ${iconSize} + ${smallPadding});\n            --ni-private-fv-search-input-trailing-space: calc(var(--ni-private-fv-search-input-inline-padding) + ${iconSize});\n            --ni-private-fv-search-input-border-color: rgba(${borderRgbPartialColor}, 0.3);\n            --ni-private-fv-search-input-border-radius: 0px;\n            min-width: 120px;\n            height: ${controlHeight};\n            font: ${bodyFont};\n            color: ${bodyFontColor};\n        }\n\n        .search-input-container {\n            position: relative;\n            display: flex;\n            align-items: center;\n            width: 100%;\n            height: 100%;\n            border: ${borderWidth} solid transparent;\n            border-radius: var(--ni-private-fv-search-input-border-radius);\n            color: inherit;\n            background-color: transparent;\n            transition:\n                border-color ${smallDelay} ease-in-out,\n                box-shadow ${smallDelay} ease-in-out,\n                background-color ${smallDelay} ease-in-out;\n        }\n\n        .search-input-container::after {\n            content: '';\n            position: absolute;\n            inset-inline: 0;\n            inset-block-end: calc(-1 * ${borderWidth});\n            border-bottom: calc(${borderWidth} + 1px) solid ${borderHoverColor};\n            transform: scaleX(0);\n            transform-origin: center;\n            transition:\n                transform ${smallDelay} ease-in-out,\n                border-bottom-color ${smallDelay} ease-in-out;\n            pointer-events: none;\n        }\n\n        .search-input-icon {\n            position: absolute;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            top: 50%;\n            inset-inline-start: var(--ni-private-fv-search-input-leading-inset);\n            transform: translateY(-50%);\n            color: ${placeholderFontColor};\n            pointer-events: none;\n            ${iconColor.cssCustomProperty}: ${placeholderFontColor};\n        }\n\n        .search-input {\n            -webkit-appearance: none;\n            appearance: none;\n            display: block;\n            flex: 1 1 auto;\n            min-width: 0;\n            width: 100%;\n            height: 100%;\n            padding: 0 var(--ni-private-fv-search-input-trailing-space) 0 var(--ni-private-fv-search-input-leading-space);\n            font: inherit;\n            line-height: normal;\n            color: inherit;\n            border: none;\n            outline: none;\n            border-radius: 0;\n            background: transparent;\n        }\n\n        .search-input::placeholder {\n            color: ${placeholderFontColor};\n        }\n\n        .search-input-clear {\n            -webkit-appearance: none;\n            appearance: none;\n            position: absolute;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            top: 50%;\n            inset-inline-end: 2px;\n            height: calc(100% - 6px);\n            aspect-ratio: 1;\n            padding: 0;\n            transform: translateY(-50%);\n            color: ${placeholderFontColor};\n            border: none;\n            border-radius: 2px;\n            background: transparent;\n            cursor: pointer;\n            ${iconColor.cssCustomProperty}: ${placeholderFontColor};\n        }\n\n        :host([appearance='outline']) .search-input-container {\n            border-color: var(--ni-private-fv-search-input-border-color);\n        }\n\n        :host([appearance='block']) .search-input-container {\n            background-color: rgba(${borderRgbPartialColor}, 0.1);\n        }\n\n        :host([appearance='underline']) .search-input-container::after {\n            transform: scaleX(1);\n            border-bottom-color: var(--ni-private-fv-search-input-border-color);\n        }\n    }\n\n    @layer hover {\n        .search-input-clear:hover {\n            background: ${fillHoverColor};\n        }\n\n        :host([appearance='outline']) .search-input-container:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        :host([appearance='block']) .search-input-container:hover::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='underline']) .search-input-container:hover::after {\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='frameless']) .search-input-container:hover::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n\n    @layer focusVisible {\n        .search-input:focus-visible {\n            outline: none;\n        }\n\n        .search-input-clear:focus-visible {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -1px;\n        }\n\n        :host([appearance='outline']) .search-input-container:focus-within {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        :host([appearance='block']) .search-input-container:focus-within::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='underline']) .search-input-container:focus-within::after {\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='frameless']) .search-input-container:focus-within::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n`;"]}

package/dist/esm/fv/search-input/template.d.ts

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

package/dist/esm/fv/search-input/template.js

@@ -0,0 +1,34 @@
+import { html, ref, when } from '@ni/fast-element';
+import { iconMagnifyingGlassTag } from '@ni/nimble-components/dist/esm/icons/magnifying-glass';
+import { iconTimesTag } from '@ni/nimble-components/dist/esm/icons/times';
+export const template = html `
+    <div class="search-input-container">
+        <span class="search-input-icon" aria-hidden="true">
+            <${iconMagnifyingGlassTag}></${iconMagnifyingGlassTag}>
+        </span>
+        <input
+            class="search-input"
+            part="control"
+            id="control"
+            type="text"
+            aria-label="${x => x.ariaLabel}"
+            aria-labelledby="${x => x.ariaLabelledby}"
+            placeholder="${x => x.placeholder}"
+            :value="${x => x.value}"
+            @input="${x => x.handleTextInput()}"
+            @change="${x => x.handleChange()}"
+            ${ref('control')}
+        />
+        ${when(x => x.value.length > 0, html `
+                <button
+                    class="search-input-clear"
+                    type="button"
+                    aria-label="Clear search"
+                    @click="${x => x.clear()}"
+                >
+                    <${iconTimesTag}></${iconTimesTag}>
+                </button>
+            `)}
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/search-input/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/search-input/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAC;AAC/F,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAG1E,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;;;eAG5B,sBAAsB,MAAM,sBAAsB;;;;;;;0BAOvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;+BACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;2BACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;sBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;sBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;uBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE;cAC9B,GAAG,CAAC,SAAS,CAAC;;UAElB,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EACvB,IAAI,CAAe;;;;;8BAKD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE;;uBAErB,YAAY,MAAM,YAAY;;aAExC,CACJ;;CAER,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport { iconMagnifyingGlassTag } from '@ni/nimble-components/dist/esm/icons/magnifying-glass';\nimport { iconTimesTag } from '@ni/nimble-components/dist/esm/icons/times';\nimport type { FvSearchInput } from '.';\n\nexport const template = html<FvSearchInput>`\n    <div class=\"search-input-container\">\n        <span class=\"search-input-icon\" aria-hidden=\"true\">\n            <${iconMagnifyingGlassTag}></${iconMagnifyingGlassTag}>\n        </span>\n        <input\n            class=\"search-input\"\n            part=\"control\"\n            id=\"control\"\n            type=\"text\"\n            aria-label=\"${x => x.ariaLabel}\"\n            aria-labelledby=\"${x => x.ariaLabelledby}\"\n            placeholder=\"${x => x.placeholder}\"\n            :value=\"${x => x.value}\"\n            @input=\"${x => x.handleTextInput()}\"\n            @change=\"${x => x.handleChange()}\"\n            ${ref('control')}\n        />\n        ${when(\n            x => x.value.length > 0,\n            html<FvSearchInput>`\n                <button\n                    class=\"search-input-clear\"\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    @click=\"${x => x.clear()}\"\n                >\n                    <${iconTimesTag}></${iconTimesTag}>\n                </button>\n            `\n        )}\n    </div>\n`;"]}