@ni/ok-components 1.0.1 → 1.1.0

package/dist/all-components-bundle.min.js

@@ -17515,6 +17515,212 @@ class G1 extends He{constructor(){super(...arguments),this.header="",this.expand
 const Z1=G1.compose({baseName:"fv-accordion-item",template:W1,styles:j1})
 Mi.getOrCreate().withPrefix("ok").register(Z1())
 const K1=_t`
+    @layer base, hover, focusVisible, active, disabled, top;
+
+    @layer base {
+        ${z1("inline-block")}
+
+        :host {
+            --ni-private-fv-search-input-inline-padding: ${Ac};
+            --ni-private-fv-search-input-leading-inset: ${Ec};
+            --ni-private-fv-search-input-leading-space: calc(var(--ni-private-fv-search-input-leading-inset) + ${Rc} + ${Ic});
+            --ni-private-fv-search-input-trailing-space: calc(var(--ni-private-fv-search-input-inline-padding) + ${Rc});
+            --ni-private-fv-search-input-border-color: rgba(${nc}, 0.3);
+            --ni-private-fv-search-input-border-radius: 0px;
+            min-width: 120px;
+            height: ${_c};
+            font: ${sd};
+            color: ${ad};
+        }
+
+        .search-input-container {
+            position: relative;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            border: ${Dc} solid transparent;
+            border-radius: var(--ni-private-fv-search-input-border-radius);
+            color: inherit;
+            background-color: transparent;
+            transition:
+                border-color ${qd} ease-in-out,
+                box-shadow ${qd} ease-in-out,
+                background-color ${qd} ease-in-out;
+        }
+
+        .search-input-container::after {
+            content: '';
+            position: absolute;
+            inset-inline: 0;
+            inset-block-end: calc(-1 * ${Dc});
+            border-bottom: calc(${Dc} + 1px) solid ${lc};
+            transform: scaleX(0);
+            transform-origin: center;
+            transition:
+                transform ${qd} ease-in-out,
+                border-bottom-color ${qd} 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: ${rd};
+            pointer-events: none;
+            ${cc.cssCustomProperty}: ${rd};
+        }
+
+        .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: ${rd};
+        }
+
+        .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: ${rd};
+            border: none;
+            border-radius: 2px;
+            background: transparent;
+            cursor: pointer;
+            ${cc.cssCustomProperty}: ${rd};
+        }
+
+        :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(${nc}, 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: ${tc};
+        }
+
+        :host([appearance='outline']) .search-input-container:hover {
+            border-color: ${lc};
+            box-shadow: 0 0 0 ${Dc} ${lc} inset;
+        }
+
+        :host([appearance='block']) .search-input-container:hover::after {
+            transform: scaleX(1);
+            border-bottom-color: ${lc};
+        }
+
+        :host([appearance='underline']) .search-input-container:hover::after {
+            border-bottom-color: ${lc};
+        }
+
+        :host([appearance='frameless']) .search-input-container:hover::after {
+            transform: scaleX(1);
+            border-bottom-color: ${lc};
+        }
+    }
+
+    @layer focusVisible {
+        .search-input:focus-visible {
+            outline: none;
+        }
+
+        .search-input-clear:focus-visible {
+            outline: ${Dc} solid ${lc};
+            outline-offset: -1px;
+        }
+
+        :host([appearance='outline']) .search-input-container:focus-within {
+            border-color: ${lc};
+            box-shadow: 0 0 0 ${Dc} ${lc} inset;
+        }
+
+        :host([appearance='block']) .search-input-container:focus-within::after {
+            transform: scaleX(1);
+            border-bottom-color: ${lc};
+        }
+
+        :host([appearance='underline']) .search-input-container:focus-within::after {
+            border-bottom-color: ${lc};
+        }
+
+        :host([appearance='frameless']) .search-input-container:focus-within::after {
+            transform: scaleX(1);
+            border-bottom-color: ${lc};
+        }
+    }
+`,Y1=J`
+    <div class="search-input-container">
+        <span class="search-input-icon" aria-hidden="true">
+            <${vb}></${vb}>
+        </span>
+        <input
+            class="search-input"
+            part="control"
+            id="control"
+            type="text"
+            aria-label="${t=>t.ariaLabel}"
+            aria-labelledby="${t=>t.ariaLabelledby}"
+            placeholder="${t=>t.placeholder}"
+            :value="${t=>t.value}"
+            @input="${t=>t.handleTextInput()}"
+            @change="${t=>t.handleChange()}"
+            ${Pt("control")}
+        />
+        ${Ut(t=>t.value.length>0,J`
+                <button
+                    class="search-input-clear"
+                    type="button"
+                    aria-label="Clear search"
+                    @click="${t=>t.clear()}"
+                >
+                    <${iv}></${iv}>
+                </button>
+            `)}
+    </div>
+`,X1="outline"
+class J1 extends Gi{constructor(){super(...arguments),this.appearance=X1}handleChange(){this.value=this.control.value,super.handleChange()}clear(){return""===this.value||(this.value="",this.control.focus(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))),!0}}t([pt],J1.prototype,"appearance",void 0)
+const Q1=J1.compose({baseName:"fv-search-input",baseClass:Gi,template:Y1,styles:K1,shadowOptions:{delegatesFocus:!0}})
+Mi.getOrCreate().withPrefix("ok").register(Q1())
+const t2=_t`
     ${z1("inline-block")}
 
     :host {
@@ -17537,10 +17743,10 @@ const K1=_t`
     :host([disabled]) slot {
         color: ${ld};
     }
-`,Y1=J`<slot></slot>`
-const X1=class extends He{}.compose({baseName:"ex-button",template:Y1,styles:K1})
-Mi.getOrCreate().withPrefix("ok").register(X1())
-const J1=_t`
+`,e2=J`<slot></slot>`
+const n2=class extends He{}.compose({baseName:"ex-button",template:e2,styles:t2})
+Mi.getOrCreate().withPrefix("ok").register(n2())
+const i2=_t`
     ${z1("inline-flex")}
 
     :host {
@@ -17554,12 +17760,12 @@ const J1=_t`
         width: 100%;
         height: 100%;
     }
-`,Q1=J`<img aria-hidden="true" src=${t=>t.url}>`
-class t2 extends Km{constructor(t){super(),this.url=t}static registerIconDynamic(t,e){const n="ok-ts-icon-dynamic-"
+`,o2=J`<img aria-hidden="true" src=${t=>t.url}>`
+class r2 extends Km{constructor(t){super(),this.url=t}static registerIconDynamic(t,e){const n="ok-ts-icon-dynamic-"
 if(!t.startsWith(n))throw new Error(`Icon tag name must start with '${n}', provided name: ${t}`)
 const i=t.substring(19)
 if(!/^[a-z][a-z]+$/.test(i))throw new Error(`Icon name must be lowercase [a-z] and at least two characters long, provided name: ${i}`)
-const o=`TsIconDynamic${i.charAt(0).toUpperCase()+i.slice(1)}`,r=`ts-icon-dynamic-${i}`,s={[o]:class extends t2{constructor(){super(e)}}}[o].compose({baseName:r,template:Q1,styles:J1})
-Mi.getOrCreate().withPrefix("ok").register(s())}}const e2=t2.compose({baseName:"ts-icon-dynamic",template:J`<template></template>`,styles:_t`${z1("none")}`})
-Mi.getOrCreate().withPrefix("ok").register(e2())}()
+const o=`TsIconDynamic${i.charAt(0).toUpperCase()+i.slice(1)}`,r=`ts-icon-dynamic-${i}`,s={[o]:class extends r2{constructor(){super(e)}}}[o].compose({baseName:r,template:o2,styles:i2})
+Mi.getOrCreate().withPrefix("ok").register(s())}}const s2=r2.compose({baseName:"ts-icon-dynamic",template:J`<template></template>`,styles:_t`${z1("none")}`})
+Mi.getOrCreate().withPrefix("ok").register(s2())}()
 //# sourceMappingURL=all-components-bundle.min.js.map