@uplynk/lynk-design 1.12.0 → 1.13.0

package/cdn/chunks/chunk.M5XFJICB.js

@@ -0,0 +1,348 @@
+import{h as n}from"./chunk.3I3N5SZS.js";var t=n`
+  :host {
+    display: block;
+    --width: 100%;
+    --border-color: initial;
+    width: var(--width);
+  }
+
+  :host([data-user-invalid]:not([disabled])),
+  :host([state='error']:not([disabled])) {
+    --border-color: var(--lynk-color-danger);
+    --focus-color: color-mix(in oklab, var(--lynk-color-danger) 50%, transparent);
+  }
+
+  :host([state='warning']) {
+    --border-color: var(--lynk-color-warning);
+    --focus-color: color-mix(in oklab, var(--lynk-color-warning) 50%, transparent);
+  }
+
+  :host([state='success']) {
+    --border-color: var(--lynk-color-success);
+    --focus-color: color-mix(in oklab, var(--lynk-color-success) 50%, transparent);
+  }
+
+  .input {
+    flex: 1 1 auto;
+    display: inline-flex;
+    align-items: stretch;
+    justify-content: start;
+    position: relative;
+    font-family: var(--lynk-input-font-family);
+    font-weight: var(--lynk-input-font-weight);
+    text-align: left;
+    letter-spacing: var(--lynk-input-letter-spacing);
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: text;
+    min-width: 0;
+    width: 100%;
+    transition:
+      var(--lynk-transition-fast) color,
+      var(--lynk-transition-fast) border,
+      var(--lynk-transition-fast) box-shadow,
+      var(--lynk-transition-fast) background-color;
+  }
+
+  /* Standard inputs */
+  .input--standard {
+    background-color: var(--lynk-input-background-color);
+    border: solid var(--lynk-input-border-width) var(--border-color, var(--lynk-input-border-color));
+  }
+
+  .input--standard:hover:not(.input--disabled) {
+    background-color: var(--lynk-input-background-color-hover);
+    border-color: var(--border-color, var(--lynk-input-border-color-hover));
+  }
+
+  .input--standard.input--focused:not(.input--disabled) {
+    background-color: var(--lynk-input-background-color-focus);
+    border-color: var(--border-color, var(--lynk-input-border-color-focus));
+    box-shadow: 0 0 0 var(--lynk-focus-ring-width) var(--focus-color, var(--lynk-input-focus-ring-color));
+  }
+
+  .input--standard.input--focused:not(.input--disabled) .input__control {
+    color: var(--lynk-input-color-focus);
+  }
+
+  .input--standard.input--disabled {
+    background-color: var(--lynk-input-background-color-disabled);
+    border-color: var(--lynk-input-border-color-disabled);
+    opacity: 0.9;
+    cursor: not-allowed;
+  }
+
+  .input--standard.input--disabled .input__control {
+    color: var(--lynk-input-color-disabled);
+  }
+
+  .input--standard.input--disabled .input__control::placeholder {
+    color: var(--lynk-input-placeholder-color-disabled);
+  }
+
+  /* Filled inputs */
+  .input--filled {
+    border: none;
+    background-color: var(--lynk-input-filled-background-color);
+    color: var(--lynk-input-color);
+  }
+
+  .input--filled:hover:not(.input--disabled) {
+    background-color: var(--lynk-input-filled-background-color-hover);
+  }
+
+  .input--filled.input--focused:not(.input--disabled) {
+    background-color: var(--lynk-input-filled-background-color-focus);
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+  }
+
+  .input--filled.input--disabled {
+    background-color: var(--lynk-input-filled-background-color-disabled);
+    opacity: 0.9;
+    cursor: not-allowed;
+  }
+
+  /* Restricted Inputs */
+  .input--restricted,
+  .input--restricted:hover {
+    border: none !important;
+    background-color: transparent !important;
+    cursor: default;
+    color: var(--lynk-input-color);
+  }
+
+  .input--restricted .input__control-preview {
+    padding: 0 !important;
+    cursor: text;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+
+  .input--restricted .input__control {
+    display: none;
+  }
+
+  /* Input Defaults */
+  .input__control {
+    flex: 1 1 auto;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    min-width: 0;
+    height: 100%;
+    color: var(--lynk-input-color);
+    border: none;
+    background: inherit;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    cursor: inherit;
+    width: inherit;
+    -webkit-appearance: none;
+  }
+
+  .input__control::-webkit-search-decoration,
+  .input__control::-webkit-search-cancel-button,
+  .input__control::-webkit-search-results-button,
+  .input__control::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  .input__control:-webkit-autofill,
+  .input__control:-webkit-autofill:hover,
+  .input__control:-webkit-autofill:focus,
+  .input__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 var(--lynk-input-height-large) var(--lynk-input-background-color-hover) inset !important;
+    -webkit-text-fill-color: var(--lynk-input-color);
+    caret-color: var(--lynk-input-color);
+  }
+
+  .input--filled .input__control:-webkit-autofill,
+  .input--filled .input__control:-webkit-autofill:hover,
+  .input--filled .input__control:-webkit-autofill:focus,
+  .input--filled .input__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 var(--lynk-input-height-large) var(--lynk-input-filled-background-color) inset !important;
+  }
+
+  .input__control::placeholder {
+    color: var(--lynk-input-placeholder-color);
+    user-select: none;
+  }
+
+  .input:hover:not(.input--disabled) .input__control {
+    color: var(--lynk-input-color-hover);
+  }
+
+  .input__control:focus {
+    outline: none;
+  }
+
+  .input__prefix,
+  .input__suffix {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    cursor: default;
+  }
+
+  .input__prefix ::slotted(lynk-icon),
+  .input__suffix ::slotted(lynk-icon) {
+    color: var(--lynk-input-icon-color);
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .input--small {
+    border-radius: var(--lynk-input-border-radius-small);
+    font-size: var(--lynk-input-font-size-small);
+    height: var(--lynk-input-height-small);
+  }
+
+  .input--small .input__control {
+    height: calc(var(--lynk-input-height-small) - var(--lynk-input-border-width) * 2);
+    padding: 0 var(--lynk-input-spacing-small);
+  }
+
+  .input--small .input__clear,
+  .input--small .input__password-toggle {
+    width: calc(1em + var(--lynk-input-spacing-small) * 1.5);
+  }
+
+  .input--small .input__prefix ::slotted(*) {
+    padding-inline-start: var(--lynk-input-spacing-small);
+  }
+
+  .input--small .input__suffix ::slotted(*) {
+    padding-inline-end: var(--lynk-input-spacing-small);
+  }
+
+  .input--medium {
+    border-radius: var(--lynk-input-border-radius-medium);
+    font-size: var(--lynk-input-font-size-medium);
+    height: var(--lynk-input-height-medium);
+  }
+
+  .input--medium .input__control {
+    height: calc(var(--lynk-input-height-medium) - var(--lynk-input-border-width) * 2);
+    padding: 0 var(--lynk-input-spacing-medium);
+  }
+
+  .input--medium .input__clear,
+  .input--medium .input__password-toggle {
+    width: calc(1em + var(--lynk-input-spacing-medium) * 2);
+  }
+
+  .input--medium .input__prefix ::slotted(*) {
+    padding-inline-start: var(--lynk-input-spacing-medium);
+  }
+
+  .input--medium .input__suffix ::slotted(*) {
+    padding-inline-end: var(--lynk-input-spacing-medium);
+  }
+
+  .input--large {
+    border-radius: var(--lynk-input-border-radius-large);
+    font-size: var(--lynk-input-font-size-large);
+    height: var(--lynk-input-height-large);
+  }
+
+  .input--large .input__control {
+    height: calc(var(--lynk-input-height-large) - var(--lynk-input-border-width) * 2);
+    padding: 0 var(--lynk-input-spacing-large);
+  }
+
+  .input--large .input__clear,
+  .input--large .input__password-toggle {
+    width: calc(1em + var(--lynk-input-spacing-large) * 2);
+  }
+
+  .input--large .input__prefix ::slotted(*) {
+    padding-inline-start: var(--lynk-input-spacing-large);
+  }
+
+  .input--large .input__suffix ::slotted(*) {
+    padding-inline-end: var(--lynk-input-spacing-large);
+  }
+
+  /*
+   * Pill modifier
+   */
+
+  .input--pill.input--small {
+    border-radius: var(--lynk-input-height-small);
+  }
+
+  .input--pill.input--medium {
+    border-radius: var(--lynk-input-height-medium);
+  }
+
+  .input--pill.input--large {
+    border-radius: var(--lynk-input-height-large);
+  }
+
+  /*
+   * Clearable + Password Toggle
+   */
+
+  .input__clear,
+  .input__password-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--lynk-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--lynk-transition-fast) color;
+    cursor: pointer;
+  }
+
+  .input__clear:hover,
+  .input__password-toggle:hover {
+    color: var(--lynk-input-icon-color-hover);
+  }
+
+  .input__clear:focus,
+  .input__password-toggle:focus {
+    outline: none;
+  }
+
+  .input--empty .input__clear {
+    visibility: hidden;
+  }
+
+  /* Don't show the browser's password toggle in Edge */
+  ::-ms-reveal {
+    display: none;
+  }
+
+  /* Hide the built-in number spinner */
+  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
+  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    display: none;
+  }
+
+  .input--no-spin-buttons input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  /*
+   * Date, Time, & DateTime-Local custom styling
+  */
+
+  .input__control::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    opacity: 0.65;
+    transition: var(--lynk-transition-fast) color;
+  }
+
+  .input__control::-webkit-calendar-picker-indicator:hover {
+    opacity: 1;
+  }
+`;export{t as a};

package/cdn/chunks/chunk.M75B2XPY.js

@@ -0,0 +1,43 @@
+import{h as r}from"./chunk.3I3N5SZS.js";var e=r`
+  :host {
+    display: contents;
+    --background-color: var(--lynk-color-neutral-50);
+  }
+
+  .page-footer {
+    border-radius: var(--lynk-border-radius-large) var(--lynk-border-radius-large) 0 0;
+    height: auto;
+    background: var(--background-color);
+    box-shadow: var(--lynk-shadow-large);
+    border: 1px solid var(--lynk-color-neutral-200);
+    border-bottom: none;
+    padding: var(--lynk-spacing-small);
+    z-index: var(--lynk-z-index-footer);
+    display: grid;
+    grid-template-areas: 'primary center secondary';
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .page-footer__primary {
+    grid-area: primary;
+    display: flex;
+    gap: var(--lynk-spacing-x-small);
+  }
+
+  .page-footer__center {
+    grid-area: center;
+    display: flex;
+    justify-self: center;
+    justify-content: center;
+    align-self: center;
+    align-content: center;
+    gap: var(--lynk-spacing-x-small);
+  }
+
+  .page-footer__secondary {
+    grid-area: secondary;
+    display: flex;
+    gap: var(--lynk-spacing-x-small);
+    justify-content: flex-end;
+  }
+`;export{e as a};

package/cdn/chunks/chunk.ME52IJ2A.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.N7VDDKCK.js";var l=e;e.define("lynk-splitter");export{l as a};

package/cdn/chunks/chunk.MEWRXDAK.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.Q24QO2RR.js";import*as n from"react";import{createComponent as t}from"@lit/react";import"@lit/react";var a="lynk-calendar";e.define("lynk-calendar");var r=t({tagName:a,elementClass:e,react:n,events:{EvChange:"ev-change"},displayName:"LynkCalendar"}),s=r;export{s as a};

package/cdn/chunks/chunk.MGS44ALL.js

@@ -0,0 +1,14 @@
+import{h as p}from"./chunk.3I3N5SZS.js";var t=p`
+  :host {
+    display: inline-block;
+  }
+
+  :host([gapped]) .button-group {
+    gap: 4px;
+  }
+
+  .button-group {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+`;export{t as a};

package/cdn/chunks/chunk.MJEJ26MX.js

@@ -0,0 +1,11 @@
+import{a as m,b as h,c as p}from"./chunk.3I3N5SZS.js";var v=Symbol.for(""),d=t=>{if((t==null?void 0:t.r)===v)return t==null?void 0:t._$litStatic$};var _=(t,...a)=>({_$litStatic$:a.reduce(((r,i,o)=>r+(e=>{if(e._$litStatic$!==void 0)return e._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but
+            take care to ensure page security.`)})(i)+t[o+1]),t[0]),r:v}),S=new Map,u=t=>(a,...r)=>{let i=r.length,o,e,l=[],c=[],n,s=0,$=!1;for(;s<i;){for(n=a[s];s<i&&(e=r[s],(o=d(e))!==void 0);)n+=o+a[++s],$=!0;s!==i&&c.push(e),l.push(n),s++}if(s===i&&l.push(a[i]),$){let f=l.join("$$lit$$");(a=S.get(f))===void 0&&(l.raw=l,S.set(f,a=l)),r=c}return t(a,...r)},w=u(m),b=u(h),x=u(p);export{_ as a,w as b};
+/*! Bundled license information:
+
+lit-html/static.js:
+  (**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/cdn/chunks/chunk.MLSLSM3X.js

@@ -0,0 +1 @@
+var i=new Set,a=new Map,s,c="ltr",d="en",m=typeof MutationObserver!="undefined"&&typeof document!="undefined"&&typeof document.documentElement!="undefined";if(m){let o=new MutationObserver(p);c=document.documentElement.dir||"ltr",d=document.documentElement.lang||navigator.language,o.observe(document.documentElement,{attributes:!0,attributeFilter:["dir","lang"]})}function f(...o){o.map(e=>{let t=e.$code.toLowerCase();a.has(t)?a.set(t,Object.assign(Object.assign({},a.get(t)),e)):a.set(t,e),s||(s=e)}),p()}function p(){m&&(c=document.documentElement.dir||"ltr",d=document.documentElement.lang||navigator.language),[...i.keys()].map(o=>{typeof o.requestUpdate=="function"&&o.requestUpdate()})}var g=class{constructor(e){this.host=e,this.host.addController(this)}hostConnected(){i.add(this.host)}hostDisconnected(){i.delete(this.host)}dir(){return`${this.host.dir||c}`.toLowerCase()}lang(){return`${this.host.lang||d}`.toLowerCase()}getTranslationData(e){var t,r;let n=new Intl.Locale(e.replace(/_/g,"-")),l=n==null?void 0:n.language.toLowerCase(),u=(r=(t=n==null?void 0:n.region)===null||t===void 0?void 0:t.toLowerCase())!==null&&r!==void 0?r:"",v=a.get(`${l}-${u}`),w=a.get(l);return{locale:n,language:l,region:u,primary:v,secondary:w}}exists(e,t){var r;let{primary:n,secondary:l}=this.getTranslationData((r=t.lang)!==null&&r!==void 0?r:this.lang());return t=Object.assign({includeFallback:!1},t),!!(n&&n[e]||l&&l[e]||t.includeFallback&&s&&s[e])}term(e,...t){let{primary:r,secondary:n}=this.getTranslationData(this.lang()),l;if(r&&r[e])l=r[e];else if(n&&n[e])l=n[e];else if(s&&s[e])l=s[e];else return console.error(`No translation found for: ${String(e)}`),String(e);return typeof l=="function"?l(...t):l}date(e,t){return e=new Date(e),new Intl.DateTimeFormat(this.lang(),t).format(e)}number(e,t){return e=Number(e),isNaN(e)?"":new Intl.NumberFormat(this.lang(),t).format(e)}relativeTime(e,t,r){return new Intl.RelativeTimeFormat(this.lang(),r).format(e,t)}};var h={$code:"en",$name:"English",$dir:"ltr",carousel:"Carousel",clearEntry:"Clear entry",close:"Close",copied:"Copied",copy:"Copy",currentValue:"Current value",error:"Error",goToSlide:(o,e)=>`Go to slide ${o} of ${e}`,hidePassword:"Hide password",loading:"Loading",nextSlide:"Next slide",numOptionsSelected:o=>o===0?"No options selected":o===1?"1 option selected":`${o} options selected`,previousSlide:"Previous slide",progress:"Progress",remove:"Remove",resize:"Resize",scrollableRegion:"Scrollable region",scrollToEnd:"Scroll to end",scrollToStart:"Scroll to start",selectAColorFromTheScreen:"Select a color from the screen",showPassword:"Show password",slideNum:o=>`Slide ${o}`,toggleColorFormat:"Toggle color format"};f(h);var S=h;export{f as a,g as b,S as c};

package/cdn/chunks/chunk.MWBXWURW.js

@@ -0,0 +1,25 @@
+import{a as k}from"./chunk.NEU53DB5.js";import{a as v}from"./chunk.FH7Y6ZAJ.js";import{a as f}from"./chunk.SDB6FPHC.js";import{a as b}from"./chunk.WZD6XVPX.js";import{a as u}from"./chunk.NZJ7BTMN.js";import{a as p}from"./chunk.5XTAHVID.js";import{a as d,b as m}from"./chunk.YHSYTTFF.js";import{a as r}from"./chunk.YZSIY5HS.js";import{a as n}from"./chunk.B7RKX34M.js";import{a as s,d as a,g as h}from"./chunk.GJLEIQTM.js";import{a as c}from"./chunk.KQHRUDLH.js";import{a as l}from"./chunk.3I3N5SZS.js";import{e as i}from"./chunk.FI4IKBIW.js";var e=class extends h{constructor(){super(...arguments);this.localize=new u(this);this.type="normal";this.checked=!1;this.value="";this.loading=!1;this.disabled=!1;this.hasSlotController=new d(this,"submenu");this.submenuController=new v(this,this.hasSlotController);this.handleMouseOver=t=>{this.focus(),t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleHostClick),this.addEventListener("mouseover",this.handleMouseOver)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleHostClick),this.removeEventListener("mouseover",this.handleMouseOver)}handleDefaultSlotChange(){let t=this.getTextLabel();if(typeof this.cachedTextLabel=="undefined"){this.cachedTextLabel=t;return}t!==this.cachedTextLabel&&(this.cachedTextLabel=t,this.emit("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}handleHostClick(t){this.disabled&&(t.preventDefault(),t.stopImmediatePropagation()),this.emit("ev-click")}handleCheckedChange(){if(this.checked&&this.type!=="checkbox"){this.checked=!1,console.error('The checked attribute can only be used on menu items with type="checkbox"',this);return}this.type==="checkbox"?this.setAttribute("aria-checked",this.checked?"true":"false"):this.removeAttribute("aria-checked")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}handleTypeChange(){this.type==="checkbox"?(this.setAttribute("role","menuitemcheckbox"),this.setAttribute("aria-checked",this.checked?"true":"false")):(this.setAttribute("role","menuitem"),this.removeAttribute("aria-checked"))}getTextLabel(){return m(this.defaultSlot)}isSubmenu(){return this.hasSlotController.test("submenu")}render(){let t=this.localize.dir()==="rtl",o=this.submenuController.isExpanded();return l`
+      <div
+        part="base"
+        class=${n({"menu-item":!0,"menu-item--rtl":t,"menu-item--checked":this.checked,"menu-item--disabled":this.disabled,"menu-item--loading":this.loading,"menu-item--has-submenu":this.isSubmenu(),"menu-item--submenu-expanded":o})}
+        ?aria-haspopup="${this.isSubmenu()}"
+        ?aria-expanded="${!!o}"
+      >
+        <span part="checked-icon" class="menu-item__check">
+          <lynk-icon name="check" library="system" aria-hidden="true"></lynk-icon>
+        </span>
+
+        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+
+        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+
+        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+
+        <span part="submenu-icon" class="menu-item__chevron">
+          <lynk-icon name=${t?"chevron-left":"chevron-right"} library="system" aria-hidden="true"></lynk-icon>
+        </span>
+
+        ${this.submenuController.renderSubmenu()}
+        ${this.loading?l` <lynk-spinner part="spinner" exportparts="base:spinner__base"></lynk-spinner> `:""}
+      </div>
+    `}};e.styles=[c,k],e.dependencies={"lynk-icon":p,"lynk-popup":f,"lynk-spinner":b},i([a("slot:not([name])")],e.prototype,"defaultSlot",2),i([a(".menu-item")],e.prototype,"menuItem",2),i([s()],e.prototype,"type",2),i([s({type:Boolean,reflect:!0})],e.prototype,"checked",2),i([s()],e.prototype,"value",2),i([s({type:Boolean,reflect:!0})],e.prototype,"loading",2),i([s({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([r("checked")],e.prototype,"handleCheckedChange",1),i([r("disabled")],e.prototype,"handleDisabledChange",1),i([r("type")],e.prototype,"handleTypeChange",1);export{e as a};

package/cdn/chunks/chunk.MWYFXQGP.js

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

package/cdn/chunks/chunk.MZALG5VU.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.3Z7SLFGH.js";var a=e;e.define("lynk-format-bytes");export{a};

package/cdn/chunks/chunk.MZXKUUZW.js

@@ -0,0 +1,59 @@
+import{a as $}from"./chunk.AYNUEGCT.js";import{a as C}from"./chunk.5LXYPISD.js";import{a as g}from"./chunk.RPKD7SRB.js";import{a as b}from"./chunk.G6HN7DNO.js";import{b as f,c as v}from"./chunk.V7E6ITFP.js";import{a as s}from"./chunk.5Z563OMH.js";import{a as c}from"./chunk.YHSYTTFF.js";import{a as o}from"./chunk.YZSIY5HS.js";import{a as u}from"./chunk.B7RKX34M.js";import{a as l,b as d,d as n,g as m}from"./chunk.GJLEIQTM.js";import{a as p}from"./chunk.KQHRUDLH.js";import{a as r}from"./chunk.3I3N5SZS.js";import{e}from"./chunk.FI4IKBIW.js";var t=class extends m{constructor(){super(...arguments);this.formControlController=new f(this,{assumeInteractionOn:["ev-blur","ev-input"]});this.hasSlotController=new c(this,"help-text","help-tip","label");this.hasFocus=!1;this.title="";this.name="";this.value="";this.state="default";this.size="medium";this.filled=!1;this.label="";this.helpText="";this.helpTip="";this.placeholder="";this.rows=4;this.resize="vertical";this.disabled=!1;this.readonly=!1;this.restricted=!1;this.form="";this.required=!1;this.dirty=!1;this.inline=!1;this.spellcheck=!0;this.defaultValue=""}get validity(){var i,a;return(a=(i=this.input)==null?void 0:i.validity)!=null?a:v}get validationMessage(){var i;return(i=this.input)==null?void 0:i.validationMessage}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver(()=>this.setTextareaHeight()),this.updateComplete.then(()=>{this.setTextareaHeight(),this.resizeObserver.observe(this.input)})}firstUpdated(){this.input&&this.formControlController.updateValidity()}disconnectedCallback(){var i;super.disconnectedCallback(),this.input&&((i=this.resizeObserver)==null||i.unobserve(this.input))}handleBlur(){this.hasFocus=!1,this.emit("ev-blur")}handleChange(){this.value=this.input.value,this.setTextareaHeight(),this.emit("ev-change")}handleFocus(){this.hasFocus=!0,this.emit("ev-focus")}handleInput(){this.value=this.input.value,this.emit("ev-input")}handleInvalid(i){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(i)}setTextareaHeight(){this.resize==="auto"?(this.sizeAdjuster.style.height=`${this.input.clientHeight}px`,this.input.style.height="auto",this.input.style.height=`${this.input.scrollHeight}px`):this.input.style.height=""}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleRowsChange(){this.setTextareaHeight()}async handleValueChange(){await this.updateComplete,this.input&&(this.formControlController.updateValidity(),this.setTextareaHeight())}focus(i){this.input.focus(i)}blur(){this.input.blur()}select(){this.input.select()}scrollPosition(i){if(i){typeof i.top=="number"&&(this.input.scrollTop=i.top),typeof i.left=="number"&&(this.input.scrollLeft=i.left);return}return{top:this.input.scrollTop,left:this.input.scrollTop}}setSelectionRange(i,a,h="none"){this.input.setSelectionRange(i,a,h)}setRangeText(i,a,h,z){this.input.setRangeText(i,a,h,z),this.value!==this.input.value&&(this.value=this.input.value),this.value!==this.input.value&&(this.value=this.input.value,this.setTextareaHeight())}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(i){this.input.setCustomValidity(i),this.formControlController.updateValidity()}render(){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>`:""}
+        <div
+          part="base"
+          class=${u({textarea:!0,"textarea--small":this.size==="small","textarea--medium":this.size==="medium","textarea--large":this.size==="large","textarea--standard":!this.filled,"textarea--filled":this.filled,"textarea--disabled":this.disabled,"textarea--restricted":this.restricted,"textarea--focused":this.hasFocus,"textarea--empty":!this.value,"textarea--resize-none":this.resize==="none","textarea--resize-vertical":this.resize==="vertical","textarea--resize-auto":this.resize==="auto"})}
+        >
+          ${this.restricted?r`
+                <div part="textarea" class="textarea__control textarea__control--restricted">
+                  ${this.value||"None"}
+                </div>
+              `:r`
+                <textarea
+                  part="textarea"
+                  class="textarea__control"
+                  title=${this.title}
+                  name=${s(this.name)}
+                  .value=${g(this.value)}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  ?required=${this.required}
+                  placeholder=${s(this.placeholder)}
+                  rows=${s(this.rows)}
+                  minlength=${s(this.minlength)}
+                  maxlength=${s(this.maxlength)}
+                  autocapitalize=${s(this.autocapitalize)}
+                  ?autofocus=${this.autofocus}
+                  spellcheck=${s(this.spellcheck)}
+                  enterkeyhint=${s(this.enterkeyhint)}
+                  inputmode=${s(this.inputmode)}
+                  aria-label=${this.label||"Textarea"}
+                  @change=${this.handleChange}
+                  @input=${this.handleInput}
+                  @invalid=${this.handleInvalid}
+                  @focus=${this.handleFocus}
+                  @blur=${this.handleBlur}
+                ></textarea>
+              `}
+          <div part="textarea-adjuster" class="textarea__size-adjuster" ?hidden=${this.resize!=="auto"}></div>
+        </div>
+        <slot name="action"></slot>
+      </lynk-form-field>
+    `}};t.styles=[p,$],t.dependencies={"lynk-form-field":C},e([n(".textarea__control")],t.prototype,"input",2),e([n(".textarea__size-adjuster")],t.prototype,"sizeAdjuster",2),e([d()],t.prototype,"hasFocus",2),e([l()],t.prototype,"title",2),e([l()],t.prototype,"name",2),e([l()],t.prototype,"value",2),e([l({reflect:!0})],t.prototype,"state",2),e([l({reflect:!0})],t.prototype,"size",2),e([l({type:Boolean,reflect:!0})],t.prototype,"filled",2),e([l()],t.prototype,"label",2),e([l({attribute:"help-text"})],t.prototype,"helpText",2),e([l({attribute:"help-tip"})],t.prototype,"helpTip",2),e([l()],t.prototype,"placeholder",2),e([l({type:Number})],t.prototype,"rows",2),e([l()],t.prototype,"resize",2),e([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([l({type:Boolean,reflect:!0})],t.prototype,"readonly",2),e([l({type:Boolean,reflect:!0})],t.prototype,"restricted",2),e([l({reflect:!0})],t.prototype,"form",2),e([l({type:Boolean,reflect:!0})],t.prototype,"required",2),e([l({type:Boolean,reflect:!0})],t.prototype,"dirty",2),e([l({type:Boolean,reflect:!0})],t.prototype,"inline",2),e([l({type:Number})],t.prototype,"minlength",2),e([l({type:Number})],t.prototype,"maxlength",2),e([l()],t.prototype,"autocapitalize",2),e([l()],t.prototype,"autocomplete",2),e([l({type:Boolean})],t.prototype,"autofocus",2),e([l()],t.prototype,"enterkeyhint",2),e([l({type:Boolean,converter:{fromAttribute:i=>!(!i||i==="false"),toAttribute:i=>i?"true":"false"}})],t.prototype,"spellcheck",2),e([l()],t.prototype,"inputmode",2),e([b()],t.prototype,"defaultValue",2),e([o("disabled",{waitUntilFirstUpdate:!0})],t.prototype,"handleDisabledChange",1),e([o("rows",{waitUntilFirstUpdate:!0})],t.prototype,"handleRowsChange",1),e([o("value",{waitUntilFirstUpdate:!0})],t.prototype,"handleValueChange",1);export{t as a};

package/cdn/chunks/chunk.N7VDDKCK.js

@@ -0,0 +1,24 @@
+import{a as E}from"./chunk.525PZLDW.js";import{a as y}from"./chunk.6S67HV2F.js";import{a as P}from"./chunk.FC4RDJJF.js";import{a as d}from"./chunk.NZJ7BTMN.js";import{a as v}from"./chunk.5Z563OMH.js";import{a as z}from"./chunk.YZSIY5HS.js";import{a as m,g as S}from"./chunk.GJLEIQTM.js";import{a as b}from"./chunk.KQHRUDLH.js";import{a as g}from"./chunk.3I3N5SZS.js";import{e as p}from"./chunk.FI4IKBIW.js";var c=class extends S{constructor(){super(...arguments);this.localize=new d(this);this.hasEmittedReady=!1;this.isInitialized=!1;this.hasRunFirstUpdated=!1;this.sizes=[];this.positions=[];this.vertical=!1;this.disabled=!1;this.push=!1;this.dividerWidth=8;this.snap="";this.snapThreshold=12}connectedCallback(){super.connectedCallback(),this.loadPositions(),this.resizeObserver=new ResizeObserver(t=>this.handleResize(t)),this.mutationObserver=new MutationObserver(()=>this.handleSlotChange())}async firstUpdated(){if(this.hasRunFirstUpdated)return;this.hasRunFirstUpdated=!0,this.resizeObserver.observe(this),this.detectSize(),this.setupAutoObservation(),await customElements.whenDefined("lynk-splitter-pane"),await this.updateComplete;let t=this.getPanes();this.detectSize(),this.sizes.length>0?(this.positions=this.calculatePositions(t),this.requestUpdate()):t.length>0&&t.some(e=>e.size)?(this.positions=this.calculatePositions(t),this.requestUpdate()):t.length>0&&this.positions.length===0&&(this.positions=this.getEqualPositions(t.length)),this.isInitialized=!0,this.handleSlotChange()}disconnectedCallback(){var t,e;super.disconnectedCallback(),(t=this.resizeObserver)==null||t.unobserve(this),(e=this.mutationObserver)==null||e.disconnect()}detectSize(){let{width:t,height:e}=this.getBoundingClientRect();this.size=this.vertical?e:t}pixelsToPercentage(t){return t/this.size*100}loadPositions(){if(this.autoSaveId&&typeof localStorage!="undefined")try{let t=localStorage.getItem(`lynk-splitter-${this.autoSaveId}`);t&&(this.positions=JSON.parse(t))}catch(t){}}savePositions(){if(this.autoSaveId&&typeof localStorage!="undefined")try{localStorage.setItem(`lynk-splitter-${this.autoSaveId}`,JSON.stringify(this.positions))}catch(t){}}setupAutoObservation(){var e;this.mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["hidden"]});let t=(e=this.shadowRoot)==null?void 0:e.querySelector("slot:not([name])");t&&t.addEventListener("slotchange",()=>this.handleSlotChange())}handleSlotChange(){if(!this.isInitialized)return;let t=this.getPanes(),e=t.length,s=this.positions.length+1;e!==s&&(this.detectSize(),this.recalculatePositionsForPanes(t)),this.requestUpdate(),!this.hasEmittedReady&&t.length>0&&(this.hasEmittedReady=!0,this.updateComplete.then(()=>{setTimeout(()=>this.emitReadyEvent(),0)}))}recalculatePositionsForPanes(t){if(t.length<=1){this.positions=[];return}this.sizes.length>0||t.some(s=>s.size||s.minSize||s.maxSize)?this.positions=this.calculatePositions(t):this.positions=this.getEqualPositions(t.length)}getEqualPositions(t){if(t<=1)return[];let e=[],s=100/t;for(let i=1;i<t;i++)e.push(s*i);return e}calculatePositions(t){if(t.length<=1)return[];let e=this.getAvailableSpace(t.length),s=this.calculatePaneSizes(t,e);return this.convertSizesToPositions(s,e)}getAvailableSpace(t){return 100-this.getTotalDividerWidth(t)}calculatePaneSizes(t,e){let s=new Array(t.length).fill(0),i=0,n=0;for(let o=0;o<t.length;o++){let h=t[o],l=0;this.sizes[o]&&this.sizes[o]!=="auto"?l=this.parseSize(this.sizes[o],e):h.size?l=this.parseSize(h.size,e):h.minSize&&(l=this.parseSize(h.minSize,e)),l>0&&(s[o]=l,i+=l,n++)}let a=Math.max(0,e-i),r=t.length-n;if(r>0){let o=a/r;for(let h=0;h<t.length;h++)s[h]===0&&(s[h]=o)}return this.enforceMaxSizeConstraints(t,s,e),s}enforceMaxSizeConstraints(t,e,s){let i=!0;for(;i;){i=!1;let n=0,a=[];for(let r=0;r<t.length;r++){let o=t[r];if(o.maxSize){let h=this.parseSize(o.maxSize,s);e[r]>h?(n+=e[r]-h,e[r]=h,i=!0):a.push(r)}else a.push(r)}if(n>0&&a.length>0){let r=n/a.length;a.forEach(o=>{e[o]+=r})}}}convertSizesToPositions(t,e){let s=[],i=0;for(let n=0;n<t.length-1;n++)i+=t[n],s.push(i/e*100);return s}parseSize(t,e){return t.endsWith("%")?parseFloat(t)/100*e:t.endsWith("px")?parseFloat(t)/this.size*100/100*e:parseFloat(t)/100*e}getPanes(){return[...this.children].filter(t=>t.tagName==="LYNK-SPLITTER-PANE"&&!t.hasAttribute("hidden"))}handleDrag(t,e){this.disabled||(t.cancelable&&t.preventDefault(),y(this,{onMove:(s,i)=>{let n=this.vertical?i:s,a=this.pixelsToPercentage(n);if(this.snap&&(a=this.applySnapping(a)),this.push)this.positions=this.handlePushResize(e,a);else{let r=this.calculateConstraints(e);this.positions=[...this.positions],this.positions[e]=P(a,r.min,r.max)}this.requestUpdate(),this.emitSplitterResizeEvent(t,e)},onStop:()=>{this.savePositions(),this.emitAfterSplitterResizeEvent(t,e)},initialEvent:t}))}handleKeyDown(t,e){if(!this.disabled&&["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(t.key)){t.preventDefault();let s=t.shiftKey?5:1,i=this.calculateConstraints(e),n=this.positions[e];(t.key==="ArrowLeft"&&!this.vertical||t.key==="ArrowUp"&&this.vertical)&&(n-=s),(t.key==="ArrowRight"&&!this.vertical||t.key==="ArrowDown"&&this.vertical)&&(n+=s),n=P(n,i.min,i.max),this.push&&(this.positions=this.handlePushResize(e,n)),this.positions=[...this.positions],this.positions[e]=n,this.requestUpdate(),this.savePositions(),this.emitAfterSplitterResizeEvent(t,e)}}handleResize(t){let{width:e,height:s}=t[0].contentRect,i=this.size;this.size=this.vertical?s:e,i&&Math.abs(this.size-i)>1&&(this.recalculatePositionsForResize(),this.requestUpdate())}handleSizesChange(){if(this.sizes.length===0)return;let t=this.getPanes();t.length>0&&(this.positions=this.calculatePositions(t),this.requestUpdate())}handleVerticalChange(){this.detectSize()}updatePaneStyles(){var a;let t=this.getPanes(),s=100-this.getTotalDividerWidth(t.length),i=this.getPaneSizeStrings();t.forEach((r,o)=>{let h=parseFloat(i[o])/100*s;r.style.flex=`0 0 ${h}%`,r.style.order=(o*2).toString()});let n=(a=this.shadowRoot)==null?void 0:a.querySelectorAll(".divider");n==null||n.forEach((r,o)=>{r.style.order=(o*2+1).toString(),r.style.flex=`0 0 ${this.dividerWidth}px`})}calculateConstraints(t){let e=this.getPanes(),s=e[t],i=e[t+1],n=this.getAvailableSpace(e.length),a=t>0?this.positions[t-1]:0,r=t<this.positions.length-1?this.positions[t+1]:100;if(s){let{minSize:o,maxSize:h}=this.getPaneConstraints(s,n),l=o/n*100,u=h!==1/0?h/n*100:1/0;if(l>0&&(a=Math.max(a,a+l)),u!==1/0){let f=t>0?this.positions[t-1]:0;r=Math.min(r,f+u)}}if(i){let{minSize:o,maxSize:h}=this.getPaneConstraints(i,n),l=o/n*100,u=h!==1/0?h/n*100:1/0;if(l>0){let f=t<this.positions.length-1?this.positions[t+1]:100;r=Math.min(r,f-l)}if(u!==1/0){let f=t<this.positions.length-1?this.positions[t+1]:100;a=Math.max(a,f-u)}}return{min:a,max:r}}getPaneConstraints(t,e){let s=t.minSize?this.parseSize(t.minSize,e):0,i=t.maxSize?this.parseSize(t.maxSize,e):1/0;return{minSize:s,maxSize:i}}getTotalDividerWidth(t){let e=t-1;return this.dividerWidth*e/this.size*100}handlePushResize(t,e){let s=this.getPanes(),i=e-this.positions[t];if(Math.abs(i)<.1)return this.positions;let n=this.getCurrentPaneSizes(this.positions,s.length);return i>0?this.resizePanes(n,s,t,t+1,i):this.resizePanes(n,s,t+1,t,Math.abs(i)),this.convertSizesToPositions(n,100)}getCurrentPaneSizes(t,e){let s=[],i=0;for(let n=0;n<e;n++){let a=n<t.length?t[n]:100;s.push(a-i),i=a}return s}applySnapping(t){if(!this.snap)return t;let e=this.snap.split(" "),s=t,i=this.snapThreshold+1;return e.forEach(n=>{let a;n.endsWith("%")?a=parseFloat(n):n.endsWith("px")?a=this.pixelsToPercentage(parseFloat(n)):a=parseFloat(n);let r=Math.abs(t-a);r<=this.snapThreshold&&r<i&&(s=a,i=r)}),s}recalculatePositionsForResize(){let t=this.getPanes();if(t.length===0)return;t.some(s=>{var i,n,a;return((i=s.size)==null?void 0:i.endsWith("px"))||((n=s.minSize)==null?void 0:n.endsWith("px"))||((a=s.maxSize)==null?void 0:a.endsWith("px"))})&&(this.positions=this.calculatePositions(t),this.requestUpdate())}resizePanes(t,e,s,i,n){let a=this.getAvailableSpace(e.length),{maxSize:r}=this.getPaneConstraints(e[s],a),o=Math.min(n,r-t[s]);if(o<=0)return;let{minSize:h}=this.getPaneConstraints(e[i],a),l=Math.min(o,t[i]-h);t[i]-=l,t[s]+=l;let u=o-l;if(u<=0)return;let[f,C]=s<i?[i+1,e.length]:[0,i];this.cascadeShrink(t,e,f,C,u,s,a)}cascadeShrink(t,e,s,i,n,a,r){let o=n;for(let h=s;h<i&&o>0;h++){let{minSize:l}=this.getPaneConstraints(e[h],r),u=Math.min(o,t[h]-l);u>0&&(t[h]-=u,t[a]+=u,o-=u)}}getPaneSizeStrings(){let t=[],e=0;for(let[s]of this.positions.entries())t.push(`${this.positions[s]-e}%`),e=this.positions[s];return t.push(`${100-e}%`),t}createPaneDetails(){let t=this.getPanes(),e=this.getPaneSizeStrings();return t.map((s,i)=>{let n=parseFloat(e[i]),a=n/100*this.size;return{index:i,size:n,sizePixels:Math.round(a),element:s}})}emitSplitterResizeEvent(t,e){let s=this.createPaneDetails(),i=e>=0?s[e]:null,n=e+1<s.length?s[e+1]:null;this.emit("ev-splitter-resize",{detail:{event:t,index:e,prevPane:i,nextPane:n,panes:s}})}emitAfterSplitterResizeEvent(t,e){let s=this.createPaneDetails(),i=e>=0?s[e]:null,n=e+1<s.length?s[e+1]:null;this.emit("ev-after-splitter-resize",{detail:{event:t,index:e,prevPane:i,nextPane:n,panes:s}})}emitReadyEvent(){if(this.getPanes().length===0)return;let e=this.createPaneDetails();this.emit("ev-ready",{detail:{panes:e}})}updated(){this.updatePaneStyles()}render(){return g`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      ${this.positions.map((t,e)=>g`
+          <div
+            part="divider divider-${e}"
+            style="--divider-width: ${this.dividerWidth}px;"
+            class="divider"
+            data-index="${e}"
+            tabindex=${v(this.disabled?void 0:"0")}
+            role="separator"
+            aria-valuenow=${this.positions[e]||50}
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-label=${this.localize.term("resize")}
+            @keydown=${s=>this.handleKeyDown(s,e)}
+            @mousedown=${s=>this.handleDrag(s,e)}
+            @touchstart=${s=>this.handleDrag(s,e)}
+          >
+            <slot name="divider-${e}">
+              <slot part="handle" class="handle" name="divider"></slot>
+            </slot>
+          </div>
+        `)}
+    `}};c.styles=[b,E],p([m({type:Array,converter:{fromAttribute:t=>{if(!t)return[];try{let e=t.replace(/'/g,'"');return JSON.parse(e)}catch(e){return[]}},toAttribute:t=>JSON.stringify(t)}})],c.prototype,"sizes",2),p([m({type:Boolean,reflect:!0})],c.prototype,"vertical",2),p([m({type:Boolean,reflect:!0})],c.prototype,"disabled",2),p([m({attribute:"auto-save-id"})],c.prototype,"autoSaveId",2),p([m({type:Boolean})],c.prototype,"push",2),p([m({type:Number,attribute:"divider-width"})],c.prototype,"dividerWidth",2),p([m()],c.prototype,"snap",2),p([m({type:Number,attribute:"snap-threshold"})],c.prototype,"snapThreshold",2),p([z("sizes")],c.prototype,"handleSizesChange",1),p([z("vertical")],c.prototype,"handleVerticalChange",1);export{c as a};