@ni/ok-components 0.4.1 → 0.4.2

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

@@ -17153,60 +17153,156 @@ const v1=class extends He{}.compose({baseName:"chat-message-system",template:()=
 `,styles:g1})
 Mi.getOrCreate().withPrefix("spright").register(v1())
 const b1=_t`
+    ${X0("flex")}
+
+    :host {
+        min-width: ${Ac};
+        min-height: ${Ac};
+
+        flex-direction: row;
+        justify-content: center;
+        flex-shrink: 0;
+        font: ${sd};
+        color: ${ad};
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        max-width: calc(90%);
+        gap: ${Ec};
+    }
+
+    .brand-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    slot[name='brand-icon']::slotted(*),
+    slot[name='brand-icon'] > * {
+        width: 48px;
+        height: 48px;
+    }
+
+    .title {
+        font: ${qc};
+        color: ${jc};
+        text-align: center;
+    }
+
+    .subtitle {
+        font: ${Gc};
+        color: ${Zc};
+        text-align: center;
+    }
+
+    .message-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: fit-content;
+        height: fit-content;
+        overflow-x: auto;
+        gap: ${Ec};
+    }
+`,y1=J`
+    <div class="icon light-icon" aria-hidden="true" :innerHTML="${()=>'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><linearGradient id="nigelChatGradient" gradientUnits="userSpaceOnUse" x1="24" y1="0.1611" x2="24" y2="48.1611"><stop offset="0" stop-color="#008557"/><stop offset="1" stop-color="#00C07E"/></linearGradient></defs><path fill="url(#nigelChatGradient)" d="M36.654,11.338c-1.63-1.626-3.685-2.512-5.797-2.766c2.107-0.256,4.157-1.153,5.783-2.776C38.273,4.167,39.175,2.112,39.429,0c0.251,2.115,1.139,4.174,2.774,5.805c1.63,1.626,3.685,2.512,5.797,2.766c-2.108,0.256-4.158,1.153-5.784,2.776c-1.632,1.629-2.534,3.684-2.787,5.796C39.177,15.027,38.289,12.969,36.654,11.338z M18,24v-0.5c0-1.003,0.274-1.941,0.746-2.752c0.473-0.901,1.172-1.589,2.081-2.05c0.198-0.111,0.404-0.208,0.616-0.294c0.005-0.002,0.011-0.004,0.016-0.006C22.09,18.144,22.778,18,23.5,18H28V6.5C28,4.575,26.425,3,24.5,3h-21C1.575,3,0,4.575,0,6.5v14C0,22.425,1.575,24,3.5,24h1.75L3.5,31L18,24z M20,23.5v14c0,1.925,1.575,3.5,3.5,3.5h7l14,7l-1.75-7h1.75c1.925,0,3.5-1.575,3.5-3.5V23c0-1.925-1.575-3-3.5-3h-21C21.575,20,20,21.575,20,23.5z"/></svg>'}"></div>
+    <div class="icon dark-icon" aria-hidden="true" :innerHTML="${()=>'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><linearGradient id="nigelChatGradientDark" gradientUnits="userSpaceOnUse" x1="24" y1="47.8389" x2="24" y2="-0.1611"><stop offset="0" stop-color="#008557"/><stop offset="1" stop-color="#00C07E"/></linearGradient></defs><path fill="url(#nigelChatGradientDark)" d="M36.654,11.338c-1.63-1.626-3.685-2.512-5.797-2.766c2.107-0.256,4.157-1.153,5.783-2.776C38.273,4.167,39.175,2.112,39.429,0c0.251,2.115,1.139,4.174,2.774,5.805c1.63,1.626,3.685,2.512,5.797,2.766c-2.108,0.256-4.158,1.153-5.784,2.776c-1.632,1.629-2.534,3.684-2.787,5.796C39.177,15.027,38.289,12.969,36.654,11.338z M18,24v-0.5c0-1.003,0.274-1.941,0.746-2.752c0.473-0.901,1.172-1.589,2.081-2.05c0.198-0.111,0.404-0.208,0.616-0.294c0.005-0.002,0.011-0.004,0.016-0.006C22.09,18.144,22.778,18,23.5,18H28V6.5C28,4.575,26.425,3,24.5,3h-21C1.575,3,0,4.575,0,6.5v14C0,22.425,1.575,24,3.5,24h1.75L3.5,31L18,24z M20,23.5v14c0,1.925,1.575,3.5,3.5,3.5h7l14,7l-1.75-7h1.75c1.925,0,3.5-1.575,3.5-3.5V23c0-1.925-1.575-3-3.5-3h-21C21.575,20,20,21.575,20,23.5z"/></svg>'}"></div>
+`,w1=_t`
+    ${Zm}
+
+    .dark-icon {
+        display: none;
+    }
+`.withBehaviors(yh(jo,_t`
+        .light-icon {
+            display: none;
+        }
+
+        .dark-icon {
+            display: contents;
+        }
+    `))
+const x1=class extends Km{}.compose({baseName:"icon-nigel-chat",template:y1,styles:w1})
+Mi.getOrCreate().withPrefix("spright").register(x1())
+const C1="spright-icon-nigel-chat"
+class k1 extends He{}t([pt({attribute:"welcome-title"})],k1.prototype,"welcomeTitle",void 0),t([pt],k1.prototype,"subtitle",void 0)
+const S1=k1.compose({baseName:"chat-message-welcome",template:()=>J`
+    <div class="container">
+        <div class="brand-icon">
+            <slot name="brand-icon">
+                <${C1}></${C1}>
+            </slot>
+        </div>
+        ${Ut(t=>t.welcomeTitle,J`
+            <div class="title">${t=>t.welcomeTitle}</div>
+        `)}
+        ${Ut(t=>t.subtitle,J`
+            <div class="subtitle">${t=>t.subtitle}</div>
+        `)}
+        <section class="message-content">
+            <slot></slot>
+        </section>
+    </div>
+`,styles:b1})
+Mi.getOrCreate().withPrefix("spright").register(S1())
+const $1=_t`
     ${Zm}
 
     .icon svg {
         fill: ${Sc};
     }
 `
-const y1=class extends Ym{constructor(){super(_u)}}.compose({baseName:"icon-work-item-calendar-week",template:Gm,styles:b1})
-Mi.getOrCreate().withPrefix("spright").register(y1())
-const w1=_t`
+const _1=class extends Ym{constructor(){super(_u)}}.compose({baseName:"icon-work-item-calendar-week",template:Gm,styles:$1})
+Mi.getOrCreate().withPrefix("spright").register(_1())
+const M1=_t`
     ${Zm}
 
     .icon svg {
         fill: ${kc};
     }
 `
-const x1=class extends Ym{constructor(){super(Mu)}}.compose({baseName:"icon-work-item-calipers",template:Gm,styles:w1})
-Mi.getOrCreate().withPrefix("spright").register(x1())
-const C1=_t`
+const I1=class extends Ym{constructor(){super(Mu)}}.compose({baseName:"icon-work-item-calipers",template:Gm,styles:M1})
+Mi.getOrCreate().withPrefix("spright").register(I1())
+const E1=_t`
     ${Zm}
 
     .icon svg {
         fill: ${$c};
     }
 `
-const k1=class extends Ym{constructor(){super(Bp)}}.compose({baseName:"icon-work-item-forklift",template:Gm,styles:C1})
-Mi.getOrCreate().withPrefix("spright").register(k1())
-const S1=_t`
+const A1=class extends Ym{constructor(){super(Bp)}}.compose({baseName:"icon-work-item-forklift",template:Gm,styles:E1})
+Mi.getOrCreate().withPrefix("spright").register(A1())
+const T1=_t`
     ${Zm}
 
     .icon svg {
         fill: ${wc};
     }
 `
-const $1=class extends Ym{constructor(){super(zf)}}.compose({baseName:"icon-work-item-rectangle-check-lines",template:Gm,styles:S1})
-Mi.getOrCreate().withPrefix("spright").register($1())
-const _1=_t`
+const D1=class extends Ym{constructor(){super(zf)}}.compose({baseName:"icon-work-item-rectangle-check-lines",template:Gm,styles:T1})
+Mi.getOrCreate().withPrefix("spright").register(D1())
+const O1=_t`
     ${Zm}
 
     .icon svg {
         fill: ${xc};
     }
 `
-const M1=class extends Ym{constructor(){super(Fm)}}.compose({baseName:"icon-work-item-user-helmet-safety",template:Gm,styles:_1})
-Mi.getOrCreate().withPrefix("spright").register(M1())
-const I1=_t`
+const R1=class extends Ym{constructor(){super(Fm)}}.compose({baseName:"icon-work-item-user-helmet-safety",template:Gm,styles:O1})
+Mi.getOrCreate().withPrefix("spright").register(R1())
+const F1=_t`
     ${Zm}
 
     .icon svg {
         fill: ${Cc};
     }
 `
-const E1=class extends Ym{constructor(){super(qm)}}.compose({baseName:"icon-work-item-wrench-hammer",template:Gm,styles:I1})
-Mi.getOrCreate().withPrefix("spright").register(E1())
-const A1=_t`
+const N1=class extends Ym{constructor(){super(qm)}}.compose({baseName:"icon-work-item-wrench-hammer",template:Gm,styles:F1})
+Mi.getOrCreate().withPrefix("spright").register(N1())
+const L1=_t`
     ${X0("inline-block")}
 
     :host {
@@ -17229,17 +17325,17 @@ const A1=_t`
     :host([disabled]) slot {
         color: ${ld};
     }
-`,T1=J`<slot></slot>`
-const D1=class extends He{}.compose({baseName:"rectangle",template:T1,styles:A1})
-Mi.getOrCreate().withPrefix("spright").register(D1())
-const O1=t=>`${Po(t)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`,R1=It`
+`,B1=J`<slot></slot>`
+const P1=class extends He{}.compose({baseName:"rectangle",template:B1,styles:L1})
+Mi.getOrCreate().withPrefix("spright").register(P1())
+const z1=t=>`${Po(t)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`,V1=It`
     user-select: none;
     -webkit-user-select: none;
-`,F1="outline",N1="ghost",L1="block",B1=_t`
+`,H1="outline",U1="ghost",q1="block",j1=_t`
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
-        ${O1("block")}
+        ${z1("block")}
 
         :host {
             border-bottom: ${Oc} solid transparent;
@@ -17256,7 +17352,7 @@ const O1=t=>`${Po(t)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host
             outline-offset: -1px;
             list-style: none;
             cursor: pointer;
-            ${R1}
+            ${V1}
             transition:
                 border-color ${qd} ease-in,
                 outline-color ${qd} ease-in;
@@ -17319,14 +17415,14 @@ const O1=t=>`${Po(t)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host
             outline-offset: -2px;
         }
     }
-`.withBehaviors(oh(F1,_t`
+`.withBehaviors(oh(H1,_t`
             @layer base {
                 :host {
                     border-bottom: ${Oc} solid rgba(${nc}, 0.2);
                     border-bottom-color: rgba(${nc}, 0.2);
                 }
             }
-        `),oh(L1,_t`
+        `),oh(q1,_t`
             @layer base {
                 .accordion-item-details > .accordion-item-summary {
                     background-color: rgba(${nc}, 0.1);
@@ -17339,7 +17435,7 @@ const O1=t=>`${Po(t)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host
                     outline-color: ${lc};
                 }
             }
-        `)),P1=J`
+        `)),W1=J`
     <details
         class="accordion-item-details"
         ?open="${t=>t.expanded}"
@@ -17361,11 +17457,11 @@ const O1=t=>`${Po(t)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host
         </div>
     </details>
 `
-class z1 extends He{constructor(){super(...arguments),this.header="",this.expanded=!1,this.appearance=N1}handleToggle(t){return this.expanded=t.target.open,!0}}t([pt],z1.prototype,"header",void 0),t([pt({mode:"boolean"})],z1.prototype,"expanded",void 0),t([pt()],z1.prototype,"appearance",void 0)
-const V1=z1.compose({baseName:"fv-accordion-item",template:P1,styles:B1})
-Mi.getOrCreate().withPrefix("ok").register(V1())
-const H1=_t`
-    ${O1("inline-block")}
+class G1 extends He{constructor(){super(...arguments),this.header="",this.expanded=!1,this.appearance=U1}handleToggle(t){return this.expanded=t.target.open,!0}}t([pt],G1.prototype,"header",void 0),t([pt({mode:"boolean"})],G1.prototype,"expanded",void 0),t([pt()],G1.prototype,"appearance",void 0)
+const Z1=G1.compose({baseName:"fv-accordion-item",template:W1,styles:j1})
+Mi.getOrCreate().withPrefix("ok").register(Z1())
+const K1=_t`
+    ${z1("inline-block")}
 
     :host {
         border: 2px solid ${lc};
@@ -17387,15 +17483,15 @@ const H1=_t`
     :host([disabled]) slot {
         color: ${ld};
     }
-`,U1=J`<slot></slot>`
-const q1=class extends He{}.compose({baseName:"button",template:U1,styles:H1})
-Mi.getOrCreate().withPrefix("ok").register(q1())
-const j1=_t`
-    ${O1("inline-flex")}
+`,Y1=J`<slot></slot>`
+const X1=class extends He{}.compose({baseName:"button",template:Y1,styles:K1})
+Mi.getOrCreate().withPrefix("ok").register(X1())
+const J1=_t`
+    ${z1("inline-flex")}
 
     :host {
         align-items: center;
-        ${R1}
+        ${V1}
         width: ${Rc};
         height: ${Rc};
     }
@@ -17404,12 +17500,12 @@ const j1=_t`
         width: 100%;
         height: 100%;
     }
-`,W1=J`<img aria-hidden="true" src=${t=>t.url}>`
-class G1 extends Km{constructor(t){super(),this.url=t}static registerIconDynamic(t,e){const n="ok-icon-dynamic-"
+`,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-icon-dynamic-"
 if(!t.startsWith(n))throw new Error(`Icon tag name must start with '${n}', provided name: ${t}`)
 const i=t.substring(16)
 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=`IconDynamic${i.charAt(0).toUpperCase()+i.slice(1)}`,r=`icon-dynamic-${i}`,s={[o]:class extends G1{constructor(){super(e)}}}[o].compose({baseName:r,template:W1,styles:j1})
-Mi.getOrCreate().withPrefix("ok").register(s())}}const Z1=G1.compose({baseName:"icon-dynamic",template:J`<template></template>`,styles:_t`${O1("none")}`})
-Mi.getOrCreate().withPrefix("ok").register(Z1())}()
+const o=`IconDynamic${i.charAt(0).toUpperCase()+i.slice(1)}`,r=`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:"icon-dynamic",template:J`<template></template>`,styles:_t`${z1("none")}`})
+Mi.getOrCreate().withPrefix("ok").register(e2())}()
 //# sourceMappingURL=all-components-bundle.min.js.map