@uplynk/lynk-design 1.12.0 → 1.13.0

package/cdn/chunks/chunk.YTZB5YMX.js

@@ -0,0 +1,338 @@
+import{h as r}from"./chunk.3I3N5SZS.js";var a=r`
+  :host {
+    --thumb-size: 16px;
+    --thumb-color: var(--lynk-color-primary);
+    --thumb-border: 0 0 0 2px var(--lynk-color-neutral-50);
+    --tooltip-offset: 8px;
+    --track-color-active: var(--lynk-color-primary);
+    --track-color-inactive: var(--lynk-color-neutral-200);
+    --track-active-offset: 0%;
+    --track-height: 6px;
+    --tick-color: var(--lynk-color-neutral-200);
+    --tick-label-color: var(--lynk-color-neutral);
+    --tick-width: 2px;
+    --tick-height: 8px;
+    --tick-selected-color: var(--lynk-color-primary);
+    --marker-width: 0.1875em;
+    --marker-height: 0.1875em;
+    display: block;
+  }
+
+  :host([state='error']) {
+    --thumb-color: var(--lynk-color-danger);
+    --track-color-active: var(--lynk-color-danger);
+  }
+
+  :host([state='warning']) {
+    --thumb-color: var(--lynk-color-warning);
+    --track-color-active: var(--lynk-color-warning);
+  }
+
+  :host([state='success']) {
+    --thumb-color: var(--lynk-color-success);
+    --track-color-active: var(--lynk-color-success);
+  }
+
+  :host([size='small']) {
+    --track-height: 4px;
+    --thumb-size: 12px;
+  }
+
+  :host([size='large']) {
+    --track-height: 8px;
+    --thumb-size: 20px;
+  }
+
+  :host([orientation='vertical']) {
+    display: inline-block;
+  }
+
+  :host([orientation='vertical']) lynk-form-field,
+  :host([orientation='vertical']) lynk-form-field::part(base),
+  :host([orientation='vertical']) lynk-form-field::part(control-wrapper),
+  :host([orientation='vertical']) lynk-form-field::part(control) {
+    height: 100%;
+  }
+
+  .range {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .range--vertical {
+    flex-direction: row;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .range__native-input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .range__wrapper {
+    --percent: 0%;
+    position: relative;
+    width: 100%;
+    height: var(--thumb-size);
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  .range--vertical .range__wrapper {
+    width: var(--thumb-size);
+    height: 100%;
+  }
+
+  .range__track {
+    position: absolute;
+    width: 100%;
+    height: var(--track-height);
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--track-color-inactive);
+    border-radius: 2px;
+  }
+
+  .range--vertical .range__track {
+    width: var(--track-height);
+    height: 100%;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+  }
+
+  .range__track-active {
+    position: absolute;
+    height: var(--track-height);
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--track-color-active);
+    border-radius: 2px;
+    left: max(var(--track-active-offset), 0%);
+    width: calc(var(--percent) - max(var(--track-active-offset), 0%));
+    will-change: width, height;
+  }
+
+  .range--rtl .range__track-active {
+    left: auto;
+    right: max(var(--track-active-offset), 0%);
+  }
+
+  .range--vertical .range__track-active {
+    width: var(--track-height);
+    height: calc(var(--percent) - max(var(--track-active-offset), 0%));
+    left: 50%;
+    top: auto;
+    bottom: max(var(--track-active-offset), 0%);
+    transform: translateX(-50%);
+  }
+
+  .range__thumb {
+    position: absolute;
+    z-index: 2;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    top: 50%;
+    left: var(--percent);
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background-color: var(--thumb-color);
+    box-shadow: var(--thumb-border);
+    transition:
+      background-color var(--lynk-transition-fast),
+      border-color var(--lynk-transition-fast),
+      box-shadow var(--lynk-transition-fast);
+    cursor: grab;
+    outline: none;
+    will-change: left, bottom;
+  }
+
+  .range--rtl .range__thumb {
+    left: auto;
+    right: var(--percent);
+    transform: translate(50%, -50%);
+  }
+
+  .range--vertical .range__thumb {
+    left: 50%;
+    top: auto;
+    bottom: var(--percent);
+    transform: translate(-50%, 50%);
+  }
+
+  .range__thumb:active {
+    cursor: grabbing;
+  }
+
+  .range:not(.range--disabled) .range__thumb:hover {
+    box-shadow:
+      var(--thumb-border),
+      0 0 0 8px color-mix(in oklab, var(--thumb-color) 25%, transparent);
+  }
+
+  .range:not(.range--disabled) .range__thumb:focus-visible {
+    box-shadow:
+      var(--thumb-border),
+      0 0 0 8px color-mix(in oklab, var(--thumb-color) 50%, transparent);
+  }
+
+  .range:not(.range--disabled) .range__thumb:active {
+    box-shadow:
+      var(--thumb-border),
+      0 0 0 8px color-mix(in oklab, var(--thumb-color) 50%, transparent);
+  }
+
+  .range--disabled .range__wrapper,
+  .range--readonly .range__wrapper {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .range--disabled .range__thumb,
+  .range--readonly .range__thumb {
+    cursor: not-allowed;
+  }
+
+  /* Ticks */
+  .range__ticks {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: var(--tick-height);
+    margin-top: var(--lynk-spacing-2x-small);
+    pointer-events: none;
+  }
+
+  .range--vertical .range__ticks {
+    flex-direction: column;
+    width: var(--tick-height);
+    height: 100%;
+    margin-top: 0;
+    margin-left: var(--lynk-spacing-2x-small);
+  }
+
+  .range__tick {
+    position: absolute;
+    left: var(--offset);
+    transform: translateX(-50%);
+  }
+
+  .range--rtl .range__tick {
+    left: initial;
+    right: var(--offset);
+  }
+
+  .range--vertical .range__tick {
+    left: 0;
+    bottom: var(--offset);
+    transform: translateY(50%);
+  }
+
+  .range__tick::before {
+    width: var(--tick-width);
+    height: var(--tick-height);
+    border-radius: 1px;
+    background-color: var(--tick-color);
+    content: '';
+    top: calc(var(--tick-height) * -0.5);
+    display: block;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .range--vertical .range__tick::before {
+    width: var(--tick-height);
+    height: var(--tick-width);
+    left: calc(var(--tick-height) * -0.5);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .range__tick-label {
+    display: block;
+    pointer-events: auto;
+    cursor: pointer;
+    margin-top: 2px;
+    color: var(--tick-label-color);
+    font-family: var(--lynk-tooltip-font-family);
+    font-size: var(--lynk-font-size-small);
+  }
+
+  .range--vertical .range__tick-label {
+    margin-top: 0;
+    margin-left: var(--lynk-spacing-x-small);
+  }
+
+  .range--disabled .range__tick-label {
+    cursor: not-allowed;
+  }
+
+  .range__tick--selected.range__tick::before {
+    background-color: var(--tick-selected-color);
+  }
+
+  .range__tick--selected .range__tick-label {
+    color: var(--tick-selected-color);
+  }
+
+  .range__references {
+    display: flex;
+    justify-content: space-between;
+    margin-top: var(--lynk-spacing-2x-small);
+  }
+
+  .range--vertical .range__references {
+    flex-direction: column;
+    margin-top: 0;
+    margin-left: 4px;
+  }
+
+  .range__references ::slotted(*) {
+    color: var(--lynk-input-help-text-color);
+    font-size: var(--lynk-input-help-text-font-size);
+    line-height: 1;
+  }
+
+  /* Markers */
+  .range__markers {
+    pointer-events: none;
+  }
+
+  .range__marker {
+    z-index: 2;
+    position: absolute;
+    display: inline-block;
+    width: var(--marker-width);
+    height: var(--marker-height);
+    border-radius: 50%;
+    background-color: var(--lynk-color-black);
+  }
+
+  .range__marker:first-of-type,
+  .range__marker:last-of-type {
+    display: none;
+  }
+
+  .range__marker {
+    top: calc(50% - var(--marker-height) / 2);
+    left: calc(var(--position) - var(--marker-width) / 2);
+  }
+
+  .range--vertical .range__marker {
+    top: calc(var(--position) - var(--marker-height) / 2);
+    left: calc(50% - var(--marker-width) / 2);
+  }
+
+  @media (forced-colors: active) {
+    .range__track,
+    .range__track-active,
+    .range__thumb {
+      border: solid 1px transparent;
+    }
+  }
+`;export{a};

package/cdn/chunks/chunk.YXH4P37C.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.OZ575QT3.js";import*as t from"react";import{createComponent as a}from"@lit/react";var o="lynk-format-date";e.define("lynk-format-date");var r=a({tagName:o,elementClass:e,react:t,events:{},displayName:"LynkFormatDate"}),p=r;export{p as a};

package/cdn/chunks/chunk.YZFDPVLZ.js

@@ -0,0 +1 @@
+import{a as o}from"./chunk.2JUST5LH.js";var e=o;o.define("lynk-radio-button");export{e as a};

package/cdn/chunks/chunk.YZSIY5HS.js

@@ -0,0 +1 @@
+import{a as l}from"./chunk.FI4IKBIW.js";function u(e,d){let o=l({waitUntilFirstUpdate:!1},d);return(s,r)=>{let{update:c}=s,f=Array.isArray(e)?e:[e];s.update=function(t){f.forEach(p=>{let n=p;if(t.has(n)){let a=t.get(n),i=this[n];a!==i&&(!o.waitUntilFirstUpdate||this.hasUpdated)&&this[r](a,i)}}),c.call(this,t)}}}export{u as a};

package/cdn/chunks/chunk.YZVUEG7D.js

@@ -0,0 +1,39 @@
+import{h as o}from"./chunk.3I3N5SZS.js";var r=o`
+  :host {
+    display: block;
+  }
+
+  .radio-group {
+    position: relative;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* This prevents the entire width of the radio container from being clickable */
+  .radio-group__control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lynk-spacing-tiny);
+  }
+
+  .radio-group__control--has-button-group {
+    display: contents;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .form-control-input ::slotted(lynk-radio) {
+    align-self: start;
+  }
+`;export{r as a};

package/cdn/chunks/chunk.Z3ZZZUBV.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.5XTAHVID.js";import*as t from"react";import{createComponent as n}from"@lit/react";import"@lit/react";var r="lynk-icon";e.define("lynk-icon");var o=n({tagName:r,elementClass:e,react:t,events:{EvLoad:"ev-load",EvError:"ev-error"},displayName:"LynkIcon"}),s=o;export{s as a};

package/cdn/chunks/chunk.ZCNAJZNH.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.CSTTJAED.js";var t=e;e.define("lynk-mutation-observer");export{t as a};

package/cdn/chunks/chunk.ZCT56GQQ.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.6OLHG5AF.js";import*as t from"react";import{createComponent as n}from"@lit/react";import"@lit/react";var o="lynk-icon-button";e.define("lynk-icon-button");var s=n({tagName:o,elementClass:e,react:t,events:{EvBlur:"ev-blur",EvClick:"ev-click",EvFocus:"ev-focus"},displayName:"LynkIconButton"}),p=s;export{p as a};

package/cdn/chunks/chunk.ZEK37NDF.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.3Z7SLFGH.js";import*as t from"react";import{createComponent as o}from"@lit/react";var a="lynk-format-bytes";e.define("lynk-format-bytes");var r=o({tagName:a,elementClass:e,react:t,events:{},displayName:"LynkFormatBytes"}),s=r;export{s as a};

package/cdn/chunks/chunk.ZIVA76PA.js

@@ -0,0 +1,70 @@
+import{a as _}from"./chunk.OIVZFTVT.js";import{a as E}from"./chunk.WB6OUKYN.js";import{a as S}from"./chunk.RPKD7SRB.js";import{a as w}from"./chunk.WZD6XVPX.js";import{a as c,c as p,d as m}from"./chunk.VDJQBFEB.js";import{a as f,c as u}from"./chunk.DCN42ZX4.js";import{a as C}from"./chunk.NZJ7BTMN.js";import{a as k}from"./chunk.5XTAHVID.js";import{a as n}from"./chunk.YZSIY5HS.js";import{a as h}from"./chunk.B7RKX34M.js";import{a as l,b as r,d as s,g as v}from"./chunk.GJLEIQTM.js";import{a as g}from"./chunk.KQHRUDLH.js";import{a as o}from"./chunk.3I3N5SZS.js";import{e as i}from"./chunk.FI4IKBIW.js";function b(d,y,t){return d?y(d):t==null?void 0:t(d)}var e=class e extends v{constructor(){super(...arguments);this.localize=new C(this);this.indeterminate=!1;this.isLeaf=!1;this.loading=!1;this.selectable=!1;this.expanded=!1;this.selected=!1;this.disabled=!1;this.readonly=!1;this.lazy=!1}static isTreeItem(t){return t instanceof Element&&t.getAttribute("role")==="treeitem"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","treeitem"),this.setAttribute("tabindex","-1"),this.isNestedItem()&&(this.slot="children")}firstUpdated(){this.childrenContainer.hidden=!this.expanded,this.childrenContainer.style.height=this.expanded?"auto":"0",this.isLeaf=!this.lazy&&this.getChildrenItems().length===0,this.handleExpandedChange()}async animateCollapse(){this.emit("ev-collapse"),await p(this.childrenContainer);let{keyframes:t,options:a}=u(this,"tree-item.collapse",{dir:this.localize.dir()});await c(this.childrenContainer,m(t,this.childrenContainer.scrollHeight),a),this.childrenContainer.hidden=!0,this.emit("ev-after-collapse")}isNestedItem(){let t=this.parentElement;return!!t&&e.isTreeItem(t)}handleChildrenSlotChange(){this.loading=!1,this.isLeaf=!this.lazy&&this.getChildrenItems().length===0}willUpdate(t){t.has("selected")&&!t.has("indeterminate")&&(this.indeterminate=!1)}async animateExpand(){this.emit("ev-expand"),await p(this.childrenContainer),this.childrenContainer.hidden=!1;let{keyframes:t,options:a}=u(this,"tree-item.expand",{dir:this.localize.dir()});await c(this.childrenContainer,m(t,this.childrenContainer.scrollHeight),a),this.childrenContainer.style.height="auto",this.emit("ev-after-expand")}handleLoadingChange(){this.setAttribute("aria-busy",this.loading?"true":"false"),this.loading||this.animateExpand()}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}handleSelectedChange(){this.setAttribute("aria-selected",this.selected?"true":"false")}handleExpandedChange(){this.isLeaf?this.removeAttribute("aria-expanded"):this.setAttribute("aria-expanded",this.expanded?"true":"false")}handleExpandAnimation(){this.expanded?this.lazy?(this.loading=!0,this.emit("ev-lazy-load")):this.animateExpand():this.animateCollapse()}handleLazyChange(){this.emit("ev-lazy-change")}handleSuffixClick(t){t.stopPropagation()}getChildrenItems({includeDisabled:t=!0}={}){return this.childrenSlot?[...this.childrenSlot.assignedElements({flatten:!0})].filter(a=>e.isTreeItem(a)&&(t||!a.disabled)):[]}render(){let t=this.localize.dir()==="rtl",a=!this.loading&&(!this.isLeaf||this.lazy);return o`
+      <div
+        part="base"
+        class="${h({"tree-item":!0,"tree-item--expanded":this.expanded,"tree-item--selected":this.selected,"tree-item--disabled":this.disabled,"tree-item--readonly":this.readonly,"tree-item--leaf":this.isLeaf,"tree-item--has-expand-button":a,"tree-item--rtl":this.localize.dir()==="rtl"})}"
+      >
+        <div
+          class="tree-item__item"
+          part="
+            item
+            ${this.disabled?"item--disabled":""}
+            ${this.readonly?"item--readonly":""}
+            ${this.expanded?"item--expanded":""}
+            ${this.indeterminate?"item--indeterminate":""}
+            ${this.selected?"item--selected":""}
+          "
+        >
+          <div class="tree-item__indentation" part="indentation"></div>
+
+          <div
+            part="expand-button"
+            class=${h({"tree-item__expand-button":!0,"tree-item__expand-button--visible":a})}
+            aria-hidden="true"
+          >
+            ${b(this.loading,()=>o` <lynk-spinner part="spinner" exportparts="base:spinner__base"></lynk-spinner> `)}
+            <slot class="tree-item__expand-icon-slot" name="expand-icon">
+              <lynk-icon library="system" name=${t?"chevron-left":"chevron-right"}></lynk-icon>
+            </slot>
+            <slot class="tree-item__expand-icon-slot" name="collapse-icon">
+              <lynk-icon library="system" name=${t?"chevron-left":"chevron-right"}></lynk-icon>
+            </slot>
+          </div>
+
+          ${b(this.selectable,()=>o`
+              <lynk-checkbox
+                part="checkbox"
+                exportparts="
+                    base:checkbox__base,
+                    control:checkbox__control,
+                    control--checked:checkbox__control--checked,
+                    control--indeterminate:checkbox__control--indeterminate,
+                    checked-icon:checkbox__checked-icon,
+                    indeterminate-icon:checkbox__indeterminate-icon,
+                    label:checkbox__label
+                  "
+                class="tree-item__checkbox"
+                ?disabled="${this.disabled||this.readonly}"
+                ?checked="${S(this.selected)}"
+                ?indeterminate="${this.indeterminate}"
+                tabindex="-1"
+              ></lynk-checkbox>
+            `)}
+
+          <slot class="tree-item__label" part="label"></slot>
+          <slot class="tree-item__suffix" part="suffix" name="suffix" @click="${this.handleSuffixClick}"></slot>
+        </div>
+
+        <div class="tree-item__children" part="children" role="group">
+          <slot name="children" @slotchange="${this.handleChildrenSlotChange}"></slot>
+        </div>
+      </div>
+    `}};e.styles=[g,_],e.dependencies={"lynk-checkbox":E,"lynk-icon":k,"lynk-spinner":w},i([r()],e.prototype,"indeterminate",2),i([r()],e.prototype,"isLeaf",2),i([r()],e.prototype,"loading",2),i([r()],e.prototype,"selectable",2),i([l({type:Boolean,reflect:!0})],e.prototype,"expanded",2),i([l({type:Boolean,reflect:!0})],e.prototype,"selected",2),i([l({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([l({type:Boolean,reflect:!0})],e.prototype,"readonly",2),i([l({type:Boolean,reflect:!0})],e.prototype,"lazy",2),i([s("slot:not([name])")],e.prototype,"defaultSlot",2),i([s("slot[name=children]")],e.prototype,"childrenSlot",2),i([s(".tree-item__item")],e.prototype,"itemElement",2),i([s(".tree-item__children")],e.prototype,"childrenContainer",2),i([s(".tree-item__expand-button slot")],e.prototype,"expandButtonSlot",2),i([n("loading",{waitUntilFirstUpdate:!0})],e.prototype,"handleLoadingChange",1),i([n("disabled")],e.prototype,"handleDisabledChange",1),i([n("selected")],e.prototype,"handleSelectedChange",1),i([n("expanded",{waitUntilFirstUpdate:!0})],e.prototype,"handleExpandedChange",1),i([n("expanded",{waitUntilFirstUpdate:!0})],e.prototype,"handleExpandAnimation",1),i([n("lazy",{waitUntilFirstUpdate:!0})],e.prototype,"handleLazyChange",1);var x=e;f("tree-item.expand",{keyframes:[{height:"0",opacity:"0",overflow:"hidden"},{height:"auto",opacity:"1",overflow:"hidden"}],options:{duration:250,easing:"cubic-bezier(0.4, 0.0, 0.2, 1)"}});f("tree-item.collapse",{keyframes:[{height:"auto",opacity:"1",overflow:"hidden"},{height:"0",opacity:"0",overflow:"hidden"}],options:{duration:200,easing:"cubic-bezier(0.4, 0.0, 0.2, 1)"}});export{x as a};
+/*! Bundled license information:
+
+lit-html/directives/when.js:
+  (**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/cdn/chunks/chunk.ZLP2324W.js

@@ -0,0 +1,137 @@
+import{a as A}from"./chunk.UT47PBNG.js";import{a as H}from"./chunk.PVEDFQNW.js";import{c as I}from"./chunk.HUMDDNNQ.js";import{a as D}from"./chunk.IKNQ2WK3.js";import{a as T}from"./chunk.5LXYPISD.js";import{a as E}from"./chunk.SDB6FPHC.js";import{b as k}from"./chunk.V7E6ITFP.js";import{a as b}from"./chunk.KLRPP4NQ.js";import{a as f,c as v}from"./chunk.VDJQBFEB.js";import{a as y,c as g}from"./chunk.DCN42ZX4.js";import{a as $}from"./chunk.NZJ7BTMN.js";import{a as _}from"./chunk.5XTAHVID.js";import{a as x}from"./chunk.YHSYTTFF.js";import{a as m}from"./chunk.YZSIY5HS.js";import{a as C}from"./chunk.B7RKX34M.js";import{a as o,b as u,d as c,g as w}from"./chunk.GJLEIQTM.js";import{a as O}from"./chunk.KQHRUDLH.js";import{a as r}from"./chunk.3I3N5SZS.js";import{e as s}from"./chunk.FI4IKBIW.js";var e=class extends w{constructor(){super(...arguments);this.formControlController=new k(this,{assumeInteractionOn:["ev-blur","ev-input"]});this.hasSlotController=new x(this,"help-text","help-tip","label");this.localize=new $(this);this.typeToSelectString="";this.hasFocus=!1;this.displayLabel="";this.selectedOptions=[];this.valueHasChanged=!1;this.name="";this._value="";this.defaultValue="";this.size="medium";this.placeholder="";this.multiple=!1;this.maxOptionsVisible=3;this.disabled=!1;this.clearable=!1;this.open=!1;this.hoist=!1;this.filled=!1;this.pill=!1;this.label="";this.placement="bottom";this.helpText="";this.helpTip="";this.form="";this.required=!1;this.dirty=!1;this.restricted=!1;this.state="default";this.inline=!1;this.getTag=t=>r`
+      <lynk-tag
+        part="tag"
+        exportparts="
+              base:tag__base,
+              content:tag__content,
+              remove-button:tag__remove-button,
+              remove-button__base:tag__remove-button__base
+            "
+        ?pill=${this.pill}
+        size=${this.size}
+        ?removable=${!this.restricted}
+        @ev-remove=${i=>this.handleTagRemove(i,t)}
+      >
+        ${t.getTextLabel()}
+      </lynk-tag>
+    `;this.handleDocumentFocusIn=t=>{let i=t.composedPath();this&&!i.includes(this)&&this.hide()};this.handleDocumentKeyDown=t=>{let i=t.target,l=i.closest(".select__clear")!==null,n=i.closest("lynk-icon-button")!==null,p=i.closest("lynk-input")!==null;if(!(l||n||p)){if(t.key==="Escape"&&this.open&&!this.closeWatcher&&(t.preventDefault(),t.stopPropagation(),this.hide(),this.displayInput.focus({preventScroll:!0})),t.key==="Enter"||t.key===" "&&this.typeToSelectString===""){if(t.preventDefault(),t.stopImmediatePropagation(),!this.open){this.show();return}this.currentOption&&!this.currentOption.disabled&&(this.valueHasChanged=!0,this.multiple?this.toggleOptionSelection(this.currentOption):this.setSelectedOptions(this.currentOption),this.updateComplete.then(()=>{this.emit("ev-input"),this.emit("ev-change")}),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})));return}if(["ArrowUp","ArrowDown","Home","End"].includes(t.key)){let a=this.getAllOptions(),d=a.indexOf(this.currentOption),h=Math.max(0,d);if(t.preventDefault(),!this.open&&(this.show(),this.currentOption))return;t.key==="ArrowDown"?(h=d+1,h>a.length-1&&(h=0)):t.key==="ArrowUp"?(h=d-1,h<0&&(h=a.length-1)):t.key==="Home"?h=0:t.key==="End"&&(h=a.length-1),this.setCurrentOption(a[h])}if(t.key.length===1||t.key==="Backspace"){let a=this.getAllOptions();if(t.metaKey||t.ctrlKey||t.altKey)return;if(!this.open){if(t.key==="Backspace")return;this.show()}t.stopPropagation(),t.preventDefault(),clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout(()=>this.typeToSelectString="",1e3),t.key==="Backspace"?this.typeToSelectString=this.typeToSelectString.slice(0,-1):this.typeToSelectString+=t.key.toLowerCase();for(let d of a)if(d.getTextLabel().toLowerCase().startsWith(this.typeToSelectString)){this.setCurrentOption(d);break}}}};this.handleDocumentMouseDown=t=>{let i=t.composedPath();this&&!i.includes(this)&&this.hide()}}get value(){return this._value}set value(t){t==null&&(t=this.multiple?[]:""),this.multiple?t=Array.isArray(t)?t:t.split(" "):t=Array.isArray(t)?t.join(" "):t,this._value!==t&&(this.valueHasChanged=!0,this._value=t)}get validity(){return this.valueInput.validity}get validationMessage(){return this.valueInput.validationMessage}connectedCallback(){super.connectedCallback(),setTimeout(()=>{this.handleDefaultSlotChange()}),this.open=!1}addOpenListeners(){var t;document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown),this.getRootNode()!==document&&this.getRootNode().addEventListener("focusin",this.handleDocumentFocusIn),"CloseWatcher"in window&&((t=this.closeWatcher)==null||t.destroy(),this.closeWatcher=new CloseWatcher,this.closeWatcher.onclose=()=>{this.open&&(this.hide(),this.displayInput.focus({preventScroll:!0}))})}removeOpenListeners(){var t;document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown),this.getRootNode()!==document&&this.getRootNode().removeEventListener("focusin",this.handleDocumentFocusIn),(t=this.closeWatcher)==null||t.destroy()}handleFocus(){this.hasFocus=!0,this.displayInput.setSelectionRange(0,0),this.emit("ev-focus")}handleBlur(){this.hasFocus=!1,this.emit("ev-blur")}handleComboboxMouseDown(t){let l=t.composedPath().some(n=>n instanceof Element&&n.tagName.toLowerCase()==="lynk-icon-button");this.disabled||this.restricted||l||(t.preventDefault(),this.displayInput.focus({preventScroll:!0}),this.open=!this.open)}handleComboboxKeyDown(t){t.key!=="Tab"&&(t.stopPropagation(),this.handleDocumentKeyDown(t))}handleClearClick(t){t.stopPropagation(),this.valueHasChanged=!0,this.value!==""&&(this.setSelectedOptions([]),this.displayInput.focus({preventScroll:!0}),this.updateComplete.then(()=>{this.emit("ev-clear"),this.emit("ev-input"),this.emit("ev-change")}))}handleClearMouseDown(t){t.stopPropagation(),t.preventDefault()}handleOptionClick(t){let l=t.target.closest("lynk-option"),n=this.value;l&&!l.disabled&&(this.valueHasChanged=!0,this.multiple?this.toggleOptionSelection(l):this.setSelectedOptions(l),this.updateComplete.then(()=>this.displayInput.focus({preventScroll:!0})),this.value!==n&&this.updateComplete.then(()=>{this.emit("ev-input"),this.emit("ev-change")}),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})))}handleDefaultSlotChange(){customElements.get("lynk-option")||customElements.whenDefined("lynk-option").then(()=>this.handleDefaultSlotChange());let t=this.getAllOptions(),i=this.valueHasChanged?this.value:this.defaultValue,l=Array.isArray(i)?i:[i],n=[];t.forEach(p=>n.push(p.value)),this.setSelectedOptions(t.filter(p=>l.includes(p.value)))}handleTagRemove(t,i){t.stopPropagation(),this.valueHasChanged=!0,this.disabled||(this.toggleOptionSelection(i,!1),this.updateComplete.then(()=>{this.emit("ev-input"),this.emit("ev-change")}))}getAllOptions(){return[...this.querySelectorAll("lynk-option")]}getFirstOption(){return this.querySelector("lynk-option")}setCurrentOption(t){this.getAllOptions().forEach(l=>{l.current=!1,l.tabIndex=-1}),t&&(this.currentOption=t,t.current=!0,t.tabIndex=0,t.focus())}setSelectedOptions(t){let i=this.getAllOptions(),l=Array.isArray(t)?t:[t];i.forEach(n=>n.selected=!1),l.length&&l.forEach(n=>n.selected=!0),this.selectionChanged()}toggleOptionSelection(t,i){i===!0||i===!1?t.selected=i:t.selected=!t.selected,this.selectionChanged()}selectionChanged(){var l,n,p;let t=this.getAllOptions();this.selectedOptions=t.filter(a=>a.selected);let i=this.valueHasChanged;if(this.multiple)this.value=this.selectedOptions.map(a=>a.value),this.placeholder&&this.value.length===0?this.displayLabel="":this.displayLabel=this.localize.term("numOptionsSelected",this.selectedOptions.length);else{let a=this.selectedOptions[0];this.value=(l=a==null?void 0:a.value)!=null?l:"",this.displayLabel=(p=(n=a==null?void 0:a.getTextLabel)==null?void 0:n.call(a))!=null?p:""}this.valueHasChanged=i,this.updateComplete.then(()=>{this.formControlController.updateValidity()})}get tags(){return this.selectedOptions.map((t,i)=>{if(i<this.maxOptionsVisible||this.maxOptionsVisible<=0){let l=this.getTag(t,i);return r`<div @ev-remove=${n=>this.handleTagRemove(n,t)}>
+          ${typeof l=="string"?D(l):l}
+        </div>`}else if(i===this.maxOptionsVisible)return r`<lynk-tag size=${this.size}>+${this.selectedOptions.length-i}</lynk-tag>`;return r``})}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}handleDisabledChange(){(this.disabled||this.restricted)&&(this.open=!1,this.handleOpenChange())}attributeChangedCallback(t,i,l){if(super.attributeChangedCallback(t,i,l),t==="value"){let n=this.valueHasChanged;this.value=this.defaultValue,this.valueHasChanged=n}}handleValueChange(){if(!this.valueHasChanged){let l=this.valueHasChanged;this.value=this.defaultValue,this.valueHasChanged=l}let t=this.getAllOptions(),i=Array.isArray(this.value)?this.value:[this.value];this.setSelectedOptions(t.filter(l=>i.includes(l.value)))}async handleOpenChange(){if(this.open&&!this.disabled){this.setCurrentOption(this.selectedOptions[0]||this.getFirstOption()),this.emit("ev-show"),this.addOpenListeners(),await v(this),this.listbox.hidden=!1,this.popup.active=!0,requestAnimationFrame(()=>{this.setCurrentOption(this.currentOption)});let{keyframes:t,options:i}=g(this,"select.show",{dir:this.localize.dir()});await f(this.popup.popup,t,i),this.currentOption&&I(this.currentOption,this.listbox,"vertical","auto"),this.emit("ev-after-show")}else{this.emit("ev-hide"),this.removeOpenListeners(),await v(this);let{keyframes:t,options:i}=g(this,"select.hide",{dir:this.localize.dir()});await f(this.popup.popup,t,i),this.listbox.hidden=!0,this.popup.active=!1,this.emit("ev-after-hide")}}async show(){if(this.open||this.disabled||this.restricted){this.open=!1;return}return this.open=!0,await b(this,"ev-after-show")}async hide(){if(!this.open||this.disabled||this.restricted){this.open=!1;return}return this.open=!1,await b(this,"ev-after-hide")}checkValidity(){return this.valueInput.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput.reportValidity()}setCustomValidity(t){this.valueInput.setCustomValidity(t),this.formControlController.updateValidity()}focus(t){this.displayInput.focus(t)}blur(){this.displayInput.blur()}render(){let t=this.clearable&&!this.disabled&&this.value&&this.value.length>0,i=this.placeholder&&(!this.value||this.value.length===0);return r`
+      <lynk-form-field
+        .size=${this.size}
+        .state=${this.state}
+        .label=${this.hasSlotController.test("label")?"":this.label}
+        .helpText=${this.hasSlotController.test("help-text")?"":this.helpText}
+        .helpTip=${this.hasSlotController.test("help-tip")?"":this.helpTip}
+        .required=${this.required}
+        .dirty=${this.dirty}
+        .focused=${this.hasFocus}
+        .inline=${this.inline}
+        ?data-user-invalid=${this.hasAttribute("data-user-invalid")}
+        ?data-user-valid=${this.hasAttribute("data-user-valid")}
+        ?data-invalid=${this.hasAttribute("data-invalid")}
+        ?data-valid=${this.hasAttribute("data-valid")}
+      >
+        ${this.hasSlotController.test("label")?r`<slot name="label" slot="label"></slot>`:""}
+        ${this.hasSlotController.test("help-text")?r`<slot name="help-text" slot="help-text"></slot>`:""}
+        ${this.hasSlotController.test("help-tip")?r`<slot name="help-tip" slot="help-tip"></slot>`:""}
+        <lynk-popup
+          class=${C({select:!0,"select--standard":!0,"select--filled":this.filled,"select--pill":this.pill,"select--open":this.open,"select--disabled":this.disabled,"select--restricted":this.restricted,"select--multiple":this.multiple,"select--focused":this.hasFocus,"select--placeholder-visible":i,"select--top":this.placement==="top","select--bottom":this.placement==="bottom","select--small":this.size==="small","select--medium":this.size==="medium","select--large":this.size==="large"})}
+          placement=${this.placement}
+          strategy=${this.hoist?"fixed":"absolute"}
+          flip
+          shift
+          sync="width"
+          auto-size="vertical"
+          auto-size-padding="10"
+        >
+          <div
+            part="combobox"
+            class="select__combobox"
+            slot="anchor"
+            @keydown=${this.handleComboboxKeyDown}
+            @mousedown=${this.handleComboboxMouseDown}
+          >
+            <slot part="prefix" name="prefix" class="select__prefix"></slot>
+
+            ${this.restricted?r`
+                  <div part="display-input" class="select__display-input">
+                    ${this.displayLabel?this.displayLabel:"-"}
+                  </div>
+                `:r`
+                  <input
+                    part="display-input"
+                    class="select__display-input"
+                    type="text"
+                    placeholder=${this.placeholder}
+                    .disabled=${this.disabled}
+                    .value=${this.displayLabel}
+                    autocomplete="off"
+                    spellcheck="false"
+                    autocapitalize="off"
+                    readonly
+                    aria-controls="listbox"
+                    aria-expanded=${this.open?"true":"false"}
+                    aria-haspopup="listbox"
+                    aria-disabled=${this.disabled?"true":"false"}
+                    aria-label=${this.label||"Select"}
+                    role="combobox"
+                    tabindex="0"
+                    @focus=${this.handleFocus}
+                    @blur=${this.handleBlur}
+                  />
+                `}
+            ${this.multiple?r`<div part="tags" class="select__tags">${this.tags}</div>`:""}
+
+            <input
+              class="select__value-input"
+              type="text"
+              ?disabled=${this.disabled||this.restricted}
+              ?required=${this.required}
+              .value=${Array.isArray(this.value)?this.value.join(", "):this.value}
+              tabindex="-1"
+              aria-hidden="true"
+              @focus=${()=>this.focus()}
+              @invalid=${this.handleInvalid}
+            />
+
+            ${t?r`
+                  <button
+                    part="clear-button"
+                    class="select__clear"
+                    type="button"
+                    aria-label=${this.localize.term("clearEntry")}
+                    @mousedown=${this.handleClearMouseDown}
+                    @click=${this.handleClearClick}
+                    tabindex="-1"
+                  >
+                    <slot name="clear-icon">
+                      <lynk-icon name="x-circle-fill" library="system"></lynk-icon>
+                    </slot>
+                  </button>
+                `:""}
+
+            <slot name="suffix" part="suffix" class="select__suffix"></slot>
+
+            <slot name="expand-icon" part="expand-icon" class="select__expand-icon">
+              <lynk-icon library="system" name="chevron-down"></lynk-icon>
+            </slot>
+          </div>
+
+          <div
+            id="listbox"
+            role="listbox"
+            aria-expanded=${this.open?"true":"false"}
+            aria-multiselectable=${this.multiple?"true":"false"}
+            aria-label=${this.label||"Select options"}
+            part="listbox"
+            class="select__listbox"
+            tabindex="-1"
+            @mouseup=${this.handleOptionClick}
+            @slotchange=${this.handleDefaultSlotChange}
+          >
+            <slot></slot>
+          </div>
+        </lynk-popup>
+      </lynk-form-field>
+    `}};e.styles=[O,H],e.dependencies={"lynk-form-field":T,"lynk-icon":_,"lynk-popup":E,"lynk-tag":A},s([c(".select")],e.prototype,"popup",2),s([c(".select__combobox")],e.prototype,"combobox",2),s([c(".select__display-input")],e.prototype,"displayInput",2),s([c(".select__value-input")],e.prototype,"valueInput",2),s([c(".select__listbox")],e.prototype,"listbox",2),s([u()],e.prototype,"hasFocus",2),s([u()],e.prototype,"displayLabel",2),s([u()],e.prototype,"currentOption",2),s([u()],e.prototype,"selectedOptions",2),s([u()],e.prototype,"valueHasChanged",2),s([o()],e.prototype,"name",2),s([u()],e.prototype,"value",1),s([o({attribute:"value"})],e.prototype,"defaultValue",2),s([o({reflect:!0})],e.prototype,"size",2),s([o()],e.prototype,"placeholder",2),s([o({type:Boolean,reflect:!0})],e.prototype,"multiple",2),s([o({attribute:"max-options-visible",type:Number})],e.prototype,"maxOptionsVisible",2),s([o({type:Boolean,reflect:!0})],e.prototype,"disabled",2),s([o({type:Boolean})],e.prototype,"clearable",2),s([o({type:Boolean,reflect:!0})],e.prototype,"open",2),s([o({type:Boolean})],e.prototype,"hoist",2),s([o({type:Boolean,reflect:!0})],e.prototype,"filled",2),s([o({type:Boolean,reflect:!0})],e.prototype,"pill",2),s([o()],e.prototype,"label",2),s([o({reflect:!0})],e.prototype,"placement",2),s([o({attribute:"help-text"})],e.prototype,"helpText",2),s([o({attribute:"help-tip"})],e.prototype,"helpTip",2),s([o({reflect:!0})],e.prototype,"form",2),s([o({type:Boolean,reflect:!0})],e.prototype,"required",2),s([o({type:Boolean,reflect:!0})],e.prototype,"dirty",2),s([o({type:Boolean,reflect:!0})],e.prototype,"restricted",2),s([o({reflect:!0})],e.prototype,"state",2),s([o({type:Boolean,reflect:!0})],e.prototype,"inline",2),s([o()],e.prototype,"getTag",2),s([m(["disabled","restricted"],{waitUntilFirstUpdate:!0})],e.prototype,"handleDisabledChange",1),s([m(["defaultValue","value"],{waitUntilFirstUpdate:!0})],e.prototype,"handleValueChange",1),s([m("open",{waitUntilFirstUpdate:!0})],e.prototype,"handleOpenChange",1);y("select.show",{keyframes:[{opacity:0,scale:.9},{opacity:1,scale:1}],options:{duration:100,easing:"ease"}});y("select.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.9}],options:{duration:100,easing:"ease"}});export{e as a};