@ni/ok-components 1.0.0 → 1.1.0

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

@@ -16874,8 +16874,55 @@ const i1=_t`
         width: 80px;
         margin: ${Ec};
     }
+
+    .attachments {
+        display: none;
+    }
+
+    .attachments.has-content {
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${Ec};
+        padding: ${Ec};
+        max-height: calc(${Mc} * 3 + ${Ec} * 4 );
+        overflow-y: auto;
+    }
+
+    .attachments ::slotted(*) {
+        height: ${Mc};
+    }
+
+    .footer {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        justify-content: flex-end;
+    }
+
+    .footer-actions {
+        display: none;
+        flex: 1;
+    }
+
+    .footer-actions.has-content {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        column-gap: ${Ec};
+        margin: ${Ec};
+    }
+
+    .footer-actions ::slotted(*) {
+        height: ${Mc};
+    }
 `,o1=J`
 <div class="container">
+    <section class="attachments ${t=>t.attachmentsIsEmpty?"":"has-content"}">
+        <slot
+            name="attachments"
+            ${Qt({property:"slottedAttachmentsElements"})}
+        ></slot>
+    </section>
     <textarea
         ${Pt("textArea")}
         placeholder="${t=>t.placeholder}"
@@ -16885,19 +16932,27 @@ const i1=_t`
         @keydown="${(t,e)=>t.textAreaKeydownHandler(e.event)}"
         @input="${t=>t.textAreaInputHandler()}"
     ></textarea>
-    <${Vg}
-        class="action-button"
-        appearance="block"
-        appearance-variant="${t=>t.processing?"primary":"accent"}"
-        ?disabled=${t=>!t.processing&&(t.sendDisabled||t.isInputEmpty)}
-        @click=${t=>t.processing?t.stopButtonClickHandler():t.sendButtonClickHandler()}
-        tabindex="${t=>t.tabIndex}"
-        title=${t=>t.processing?t.stopButtonLabel:t.sendButtonLabel}
-        content-hidden
-    >
-        ${t=>t.processing?t.stopButtonLabel:t.sendButtonLabel}
-        ${Ut(t=>t.processing,J`<${xb} slot="start"></${xb}>`,J`<${wb} slot="start"></${wb}>`)}
-    </${Vg}>
+    <section class="footer">
+        <section class="footer-actions ${t=>t.footerActionsIsEmpty?"":"has-content"}">
+            <slot
+                name="footer-actions"
+                ${Qt({property:"slottedFooterActionsElements"})}
+            ></slot>
+        </section>
+        <${Vg}
+            class="action-button"
+            appearance="block"
+            appearance-variant="${t=>t.processing?"primary":"accent"}"
+            ?disabled=${t=>!t.processing&&(t.sendDisabled||t.isInputEmpty)}
+            @click=${t=>t.processing?t.stopButtonClickHandler():t.sendButtonClickHandler()}
+            tabindex="${t=>t.tabIndex}"
+            title=${t=>t.processing?t.stopButtonLabel:t.sendButtonLabel}
+            content-hidden
+        >
+            ${t=>t.processing?t.stopButtonLabel:t.sendButtonLabel}
+            ${Ut(t=>t.processing,J`<${xb} slot="start"></${xb}>`,J`<${wb} slot="start"></${wb}>`)}
+        </${Vg}>
+    </section>
     <${Jm}
         severity="error"
         class="error-icon ${t=>t.scrollbarWidth>=0?"scrollbar-width-calculated":""}"
@@ -16905,11 +16960,11 @@ const i1=_t`
     ></${Jm}>
     ${xv}
 </div>`
-class r1 extends(Cv(He)){constructor(){super(...arguments),this.value="",this.maxLength=-1,this.processing=!1,this.sendDisabled=!1,this.isInputEmpty=!0,this.scrollbarWidth=-1,this.updateScrollbarWidthQueued=!1}textAreaKeydownHandler(t){return!(t.key===sn&&!t.shiftKey)||(this.processing||this.sendButtonClickHandler(),!1)}textAreaInputHandler(){this.value=this.textArea.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.queueUpdateScrollbarWidth()}placeholderChanged(){this.queueUpdateScrollbarWidth()}valueChanged(){this.textArea&&(this.textArea.value=this.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.queueUpdateScrollbarWidth())}connectedCallback(){super.connectedCallback(),this.textArea.value=this.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.resizeObserver=new ResizeObserver(()=>this.onResize()),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}sendButtonClickHandler(){if(this.shouldDisableSendButton())return
+class r1 extends(Cv(He)){constructor(){super(...arguments),this.value="",this.maxLength=-1,this.processing=!1,this.sendDisabled=!1,this.isInputEmpty=!0,this.scrollbarWidth=-1,this.footerActionsIsEmpty=!0,this.attachmentsIsEmpty=!0,this.updateScrollbarWidthQueued=!1}slottedFooterActionsElementsChanged(t,e){this.footerActionsIsEmpty=void 0===e||0===e.length}slottedAttachmentsElementsChanged(t,e){this.attachmentsIsEmpty=void 0===e||0===e.length}textAreaKeydownHandler(t){return!(t.key===sn&&!t.shiftKey)||(this.processing||this.sendButtonClickHandler(),!1)}textAreaInputHandler(){this.value=this.textArea.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.queueUpdateScrollbarWidth()}placeholderChanged(){this.queueUpdateScrollbarWidth()}valueChanged(){this.textArea&&(this.textArea.value=this.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.queueUpdateScrollbarWidth())}connectedCallback(){super.connectedCallback(),this.textArea.value=this.value,this.isInputEmpty=this.shouldDisableSendButton(),this.adjustTextAreaHeight(),this.resizeObserver=new ResizeObserver(()=>this.onResize()),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}sendButtonClickHandler(){if(this.shouldDisableSendButton())return
 const t={text:this.textArea.value}
 this.resetInput(),this.$emit("send",t)}stopButtonClickHandler(){this.processing&&(this.$emit("stop"),this.textArea?.blur())}shouldDisableSendButton(){return 0===this.textArea.value.length}resetInput(){this.value="",this.isInputEmpty=!0,this.textArea&&(this.textArea.value="",this.adjustTextAreaHeight(),this.textArea.focus())}onResize(){this.adjustTextAreaHeight(),this.scrollbarWidth=this.textArea.offsetWidth-this.textArea.clientWidth}queueUpdateScrollbarWidth(){this.$fastController.isConnected&&(this.updateScrollbarWidthQueued||(this.updateScrollbarWidthQueued=!0,b.queueUpdate(()=>this.updateScrollbarWidth())))}adjustTextAreaHeight(){if(r1.fieldSizingSupported||!this.textArea)return
 const t=this.textArea
-t.style.height="auto",t.style.height=`${t.scrollHeight}px`}updateScrollbarWidth(){this.updateScrollbarWidthQueued=!1,this.scrollbarWidth=this.textArea.offsetWidth-this.textArea.clientWidth}}r1.fieldSizingSupported=CSS.supports("field-sizing","content"),t([pt],r1.prototype,"placeholder",void 0),t([pt({attribute:"send-button-label"})],r1.prototype,"sendButtonLabel",void 0),t([pt({attribute:"stop-button-label"})],r1.prototype,"stopButtonLabel",void 0),t([pt],r1.prototype,"value",void 0),t([pt({attribute:"tabindex",converter:ht})],r1.prototype,"tabIndex",void 0),t([pt({attribute:"maxlength",converter:ht})],r1.prototype,"maxLength",void 0),t([pt({attribute:"processing",mode:"boolean"})],r1.prototype,"processing",void 0),t([pt({attribute:"send-disabled",mode:"boolean"})],r1.prototype,"sendDisabled",void 0),t([C],r1.prototype,"textArea",void 0),t([C],r1.prototype,"isInputEmpty",void 0),t([C],r1.prototype,"scrollbarWidth",void 0)
+t.style.height="auto",t.style.height=`${t.scrollHeight}px`}updateScrollbarWidth(){this.updateScrollbarWidthQueued=!1,this.scrollbarWidth=this.textArea.offsetWidth-this.textArea.clientWidth}}r1.fieldSizingSupported=CSS.supports("field-sizing","content"),t([pt],r1.prototype,"placeholder",void 0),t([pt({attribute:"send-button-label"})],r1.prototype,"sendButtonLabel",void 0),t([pt({attribute:"stop-button-label"})],r1.prototype,"stopButtonLabel",void 0),t([pt],r1.prototype,"value",void 0),t([pt({attribute:"tabindex",converter:ht})],r1.prototype,"tabIndex",void 0),t([pt({attribute:"maxlength",converter:ht})],r1.prototype,"maxLength",void 0),t([pt({attribute:"processing",mode:"boolean"})],r1.prototype,"processing",void 0),t([pt({attribute:"send-disabled",mode:"boolean"})],r1.prototype,"sendDisabled",void 0),t([C],r1.prototype,"textArea",void 0),t([C],r1.prototype,"isInputEmpty",void 0),t([C],r1.prototype,"scrollbarWidth",void 0),t([C],r1.prototype,"footerActionsIsEmpty",void 0),t([C],r1.prototype,"slottedFooterActionsElements",void 0),t([C],r1.prototype,"attachmentsIsEmpty",void 0),t([C],r1.prototype,"slottedAttachmentsElements",void 0)
 const s1=r1.compose({baseName:"chat-input",template:o1,styles:i1,shadowOptions:{delegatesFocus:!0}})
 Mi.getOrCreate().withPrefix("spright").register(s1())
 const a1={system:void 0,outbound:"outbound",inbound:"inbound"},l1=_t`
@@ -17460,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 {
@@ -17482,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 {
@@ -17499,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