@uplynk/lynk-design 1.14.0 → 1.16.0

package/cdn/chunks/chunk.VKGHL3DF.js

@@ -0,0 +1,279 @@
+import{a as e}from"./chunk.OAB62Q2Y.js";var r=e`
+  :host {
+    display: block;
+  }
+
+  .date-time-picker__input-group {
+    display: flex;
+    min-width: 270px;
+    align-items: stretch;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 4px;
+    background-color: var(--lynk-input-background-color);
+    border: solid var(--lynk-input-border-width) var(--lynk-input-border-color);
+    border-radius: var(--lynk-input-border-radius-medium);
+    font-family: var(--lynk-input-font-family);
+    font-weight: var(--lynk-input-font-weight);
+    color: var(--lynk-input-color);
+    cursor: text;
+    transition:
+      var(--lynk-transition-fast) color,
+      var(--lynk-transition-fast) border,
+      var(--lynk-transition-fast) box-shadow,
+      var(--lynk-transition-fast) background-color;
+  }
+
+  .date-time-picker__placeholder {
+    align-self: center;
+    color: var(--lynk-input-placeholder-color);
+    user-select: none;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 200px;
+    text-overflow: ellipsis;
+  }
+
+  .date-time-picker__input-group:hover:not(.date-time-picker__input-group--disabled) {
+    background-color: var(--lynk-input-background-color-hover);
+    border-color: var(--lynk-input-border-color-hover);
+  }
+
+  .date-time-picker__input-group:focus-within:not(.date-time-picker__input-group--disabled) {
+    background-color: var(--lynk-input-background-color-focus);
+    border-color: var(--lynk-input-border-color-focus);
+    box-shadow: 0 0 0 var(--lynk-focus-ring-width) var(--lynk-input-focus-ring-color);
+  }
+
+  .date-time-picker__input-group--small {
+    border-radius: var(--lynk-input-border-radius-small);
+    font-size: var(--lynk-input-font-size-small);
+    height: var(--lynk-input-height-small);
+  }
+
+  .date-time-picker__input-group--medium {
+    border-radius: var(--lynk-input-border-radius-medium);
+    font-size: var(--lynk-input-font-size-medium);
+    height: var(--lynk-input-height-medium);
+  }
+
+  .date-time-picker__input-group--large {
+    border-radius: var(--lynk-input-border-radius-large);
+    font-size: var(--lynk-input-font-size-large);
+    height: var(--lynk-input-height-large);
+  }
+
+  .date-time-picker__input-group--disabled {
+    background-color: var(--lynk-input-background-color-disabled);
+    border-color: var(--lynk-input-border-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .date-time-picker__input-group--readonly {
+    background-color: var(--lynk-input-background-color-readonly);
+  }
+
+  .date-time-picker__date-input,
+  .date-time-picker__time-input {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: start;
+    position: relative;
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: inherit;
+    transition: var(--lynk-transition-fast) color;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    outline: none;
+  }
+
+  .date-time-picker__input-group--small {
+    padding-inline-start: var(--lynk-input-spacing-small);
+  }
+
+  .date-time-picker__input-group--medium {
+    padding-inline-start: var(--lynk-input-spacing-medium);
+  }
+
+  .date-time-picker__input-group--large {
+    padding-inline-start: var(--lynk-input-spacing-medium);
+  }
+
+  .date-time-picker__date-input:disabled,
+  .date-time-picker__time-input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Hide native date/time input icons and disable browser pickers */
+  .date-time-picker__date-input::-webkit-calendar-picker-indicator,
+  .date-time-picker__time-input::-webkit-calendar-picker-indicator {
+    display: none;
+    -webkit-appearance: none;
+  }
+
+  .date-time-picker__date-input::-webkit-inner-spin-button,
+  .date-time-picker__time-input::-webkit-inner-spin-button {
+    display: none;
+    -webkit-appearance: none;
+  }
+
+  .date-time-picker__date-input::-webkit-clear-button,
+  .date-time-picker__time-input::-webkit-clear-button {
+    display: none;
+    -webkit-appearance: none;
+  }
+
+  .date-time-picker__clear {
+    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;
+    margin-inline-start: 12px;
+  }
+
+  .date-time-picker__clear:hover {
+    color: var(--lynk-input-icon-color-hover);
+  }
+
+  .date-time-picker__clear:focus {
+    outline: none;
+  }
+
+  .date-time-picker__trigger {
+    align-self: center;
+    border: none;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
+    margin-inline-end: var(--lynk-spacing-x-small);
+    margin-inline-start: auto;
+  }
+
+  .date-time-picker__panel {
+    display: flex;
+    flex-direction: column;
+    background: var(--lynk-panel-background-color);
+    border: solid var(--lynk-panel-border-width) var(--lynk-panel-border-color);
+    border-radius: var(--lynk-border-radius-medium);
+  }
+
+  .date-time-picker__panel-body {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  .date-time-picker__calendar {
+    border: none;
+    --height: 300px;
+    padding: var(--lynk-spacing-small);
+  }
+
+  .date-time-picker__clock {
+    --height: 300px;
+  }
+
+  .date-time-picker__clock::part(picker) {
+    border-bottom: none;
+  }
+
+  /* 24-hour number input styles */
+  .date-time-picker__24h-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    overflow: hidden;
+  }
+
+  .date-time-picker__24h-group--hidden {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  .date-time-picker__segment-input {
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    line-height: var(--lynk-line-height-normal);
+    color: inherit;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    width: 2.2ch;
+    text-align: center;
+    cursor: inherit;
+    -moz-appearance: textfield;
+  }
+
+  .date-time-picker__segment-input::placeholder {
+    color: inherit;
+  }
+
+  .date-time-picker__segment-input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Hide native number input spinners */
+  .date-time-picker__segment-input::-webkit-outer-spin-button,
+  .date-time-picker__segment-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .date-time-picker__separator {
+    color: inherit;
+    user-select: none;
+    line-height: 1;
+  }
+
+  .date-time-picker__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--lynk-spacing-small);
+    border-top: solid 1px var(--lynk-color-neutral-200);
+  }
+
+  .date-time-picker__footer-actions {
+    display: flex;
+    gap: var(--lynk-spacing-x-small);
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .date-time-picker__input-group--small .date-time-picker__trigger {
+    font-size: var(--lynk-button-font-size-small);
+  }
+
+  .date-time-picker__input-group--medium .date-time-picker__trigger {
+    font-size: var(--lynk-button-font-size-medium);
+  }
+
+  .date-time-picker__input-group--large .date-time-picker__trigger {
+    font-size: var(--lynk-button-font-size-large);
+  }
+`;export{r as a};

package/cdn/chunks/chunk.VSRA2RLW.js

@@ -0,0 +1 @@
+import{b as e}from"./chunk.ZNS6YIHB.js";import*as t from"react";import{createComponent as n}from"@lit/react";import"@lit/react";var o="lynk-split-panel";e.define("lynk-split-panel");var p=n({tagName:o,elementClass:e,react:t,events:{EvReposition:"ev-reposition"},displayName:"LynkSplitPanel"}),a=p;export{a};

package/cdn/chunks/chunk.VXDG5DJJ.js

@@ -0,0 +1,234 @@
+import{a as e}from"./chunk.OAB62Q2Y.js";var o=e`
+  :host {
+    display: block;
+    inline-size: fit-content;
+    position: relative;
+
+    --selected-color: var(--lynk-color-primary-600);
+    --selected-text-color: var(--lynk-color-black);
+    --hover-color: var(--lynk-color-gray-a50);
+    --color-range: #0000000d;
+    --height: auto;
+  }
+
+  button {
+    border-radius: var(--lynk-border-radius-medium);
+    background-color: transparent;
+    outline: none;
+    border: none;
+    padding: var(--lynk-spacing-x-small);
+  }
+
+  button:hover {
+    background-color: var(--hover-color);
+  }
+
+  .calendar {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .calendar-month {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+  }
+
+  .calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .month-name {
+    display: flex;
+    margin: auto;
+    font-weight: bold;
+    font-size: 1.25em;
+  }
+
+  .calendar-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    text-align: center;
+    inline-size: fit-content;
+  }
+
+  .calendar-table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    table-layout: fixed;
+    inline-size: max-content;
+    font-size: 0.875rem;
+  }
+
+  .calendar-table th {
+    font-weight: bold;
+    block-size: 2.25rem;
+    min-width: 36px;
+  }
+
+  .calendar-table td {
+    padding-inline: 0;
+    padding-block: 1px;
+    min-width: 36px;
+  }
+
+  .calendar-table td.weeknumber {
+    font-size: 0.875em;
+    opacity: 0.5;
+  }
+
+  .navigation-button {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .navigation-button[aria-disabled] {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .calendar-table button {
+    color: inherit;
+    font-size: inherit;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    font-variant-numeric: tabular-nums;
+    block-size: 2.25rem;
+    inline-size: 2.25rem;
+
+    border-radius: 100%;
+  }
+
+  .calendar-table button:disabled,
+  .calendar-table button.outside,
+  .calendar-table button.disallowed {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .calendar-table button.disallowed {
+    text-decoration: line-through;
+  }
+
+  .calendar-table button.today {
+    border: 1px solid var(--selected-color);
+  }
+
+  /* calendar button styles */
+  .calendar-table {
+    button:hover:where(:not(:disabled, [aria-disabled])) {
+      background-color: var(--hover-color);
+    }
+
+    button:is(.selected, :focus-visible) {
+      background: var(--selected-color);
+      color: var(--selected-text-color);
+      font-weight: var(--lynk-font-weight-bold);
+    }
+
+    button:focus-visible {
+      outline: 1px solid var(--selected-text-color);
+      outline-offset: -2px;
+    }
+
+    button.range-start,
+    button.range-end {
+      border-radius: 100%;
+      --background-color: var(--selected-color);
+      background-color: var(--background-color);
+      color: var(--selected-text-color);
+    }
+
+    button.in-range {
+      border-radius: 0;
+      --background-color: color-mix(in srgb, var(--selected-color) 65%, var(--lynk-color-black));
+      background-color: var(--background-color);
+      color: var(--selected-text-color);
+    }
+
+    button.range-start:hover,
+    button.range-end:hover,
+    button.in-range:hover {
+      background-color: color-mix(in srgb, var(--background-color) 75%, var(--lynk-color-black));
+    }
+
+    button.range-start {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    button.range-end {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+  }
+
+  .month-selection,
+  .year-selection {
+    padding: 1rem;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .months-grid,
+  .years-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+  }
+
+  .month-button,
+  .year-button {
+    padding: 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: none;
+    cursor: pointer;
+  }
+
+  .month-button.selected,
+  .year-button.selected {
+    background-color: var(--selected-color);
+    color: var(--lynk-color-neutral-0);
+    font-weight: var(--lynk-font-weight-bold);
+  }
+
+  .calendar-heading {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .calendar-heading select {
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--background-color);
+    font-size: inherit;
+    cursor: pointer;
+  }
+
+  .calendar-heading button {
+    padding: 0.25rem 0.5rem;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: inherit;
+  }
+
+  .calendar-heading button:hover {
+    text-decoration: underline;
+  }
+`;export{o as a};

package/cdn/chunks/chunk.VXKFMMF7.js

@@ -0,0 +1,76 @@
+import{a as i}from"./chunk.OAB62Q2Y.js";var e=i`
+  :host {
+    --divider-width: 4px;
+    --divider-hit-area: 12px;
+    --min: 0%;
+    --max: 100%;
+
+    display: grid;
+  }
+
+  .start,
+  .end {
+    overflow: hidden;
+  }
+
+  .divider {
+    flex: 0 0 var(--divider-width);
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--lynk-color-neutral-200);
+    color: var(--lynk-color-neutral-900);
+    z-index: 1;
+  }
+
+  .divider:focus {
+    outline: none;
+  }
+
+  :host(:not([disabled])) .divider:focus-visible {
+    background-color: var(--lynk-color-primary-600);
+    color: var(--lynk-color-neutral-0);
+  }
+
+  :host([disabled]) .divider {
+    cursor: not-allowed;
+  }
+
+  /* Horizontal */
+  :host(:not([vertical], [disabled])) .divider {
+    cursor: col-resize;
+  }
+
+  :host(:not([vertical])) .divider::after {
+    display: flex;
+    content: '';
+    position: absolute;
+    height: 100%;
+    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    width: var(--divider-hit-area);
+  }
+
+  /* Vertical */
+  :host([vertical]) {
+    flex-direction: column;
+  }
+
+  :host([vertical]:not([disabled])) .divider {
+    cursor: row-resize;
+  }
+
+  :host([vertical]) .divider::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    height: var(--divider-hit-area);
+  }
+
+  @media (forced-colors: active) {
+    .divider {
+      outline: solid 1px transparent;
+    }
+  }
+`;export{e as a};

package/cdn/chunks/chunk.VXWV6NOY.js

@@ -0,0 +1,24 @@
+import{a as E}from"./chunk.BBKJG3YE.js";import{a as y}from"./chunk.6S67HV2F.js";import{a as P}from"./chunk.FC4RDJJF.js";import{a as d}from"./chunk.Q3J7P2MZ.js";import{a as v}from"./chunk.PGNVXJKR.js";import{a as z}from"./chunk.YZSIY5HS.js";import{a as m,g as b}from"./chunk.ODSBDO47.js";import{a as S}from"./chunk.6UGEFC7C.js";import{d as g}from"./chunk.OAB62Q2Y.js";import{e as p}from"./chunk.FI4IKBIW.js";var c=class extends b{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=[S,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};

package/cdn/chunks/chunk.W46TCMO3.js

@@ -0,0 +1,65 @@
+import{a as r}from"./chunk.OAB62Q2Y.js";var t=r`
+  :host {
+    --size: 128px;
+    --track-width: 4px;
+    --track-color: var(--lynk-color-neutral-200);
+    --indicator-width: var(--track-width);
+    --indicator-color: var(--lynk-color-primary-600);
+    --indicator-transition-duration: 0.35s;
+
+    display: inline-flex;
+  }
+
+  .progress-ring {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .progress-ring__image {
+    width: var(--size);
+    height: var(--size);
+    rotate: -90deg;
+    transform-origin: 50% 50%;
+  }
+
+  .progress-ring__track,
+  .progress-ring__indicator {
+    --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
+    --circumference: calc(var(--radius) * 2 * 3.141592654);
+
+    fill: none;
+    r: var(--radius);
+    cx: calc(var(--size) / 2);
+    cy: calc(var(--size) / 2);
+  }
+
+  .progress-ring__track {
+    stroke: var(--track-color);
+    stroke-width: var(--track-width);
+  }
+
+  .progress-ring__indicator {
+    stroke: var(--indicator-color);
+    stroke-width: var(--indicator-width);
+    stroke-linecap: round;
+    transition-property: stroke-dashoffset;
+    transition-duration: var(--indicator-transition-duration);
+    stroke-dasharray: var(--circumference) var(--circumference);
+    stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
+  }
+
+  .progress-ring__label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    user-select: none;
+  }
+`;export{t as a};