@skdx/web-components-blocks 0.38.0 → 0.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n)=>{for(var r=n>1?void 0:n?g(d,e):d,p=l.length-1,v;p>=0;p--)(v=l[p])&&(r=(n?v(d,e,r):v(r))||r);return n&&r&&h(d,e,r),r};import{html as a,LitElement as m,nothing as o}from"lit";import{property as s}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{emit as u}from"../internal/events.js";import{hasUnslottedChild as E,placeSlotted as f}from"../internal/slots.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/pin-input";import"@skdx/web-components/text";var c="data-skdx-verification-page-generated",L="data-skdx-verification-page-content",k=["resend"],x=0,t=class extends m{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++x}`;this.gated=new Map;this.handleValueChange=e=>{e.stopPropagation(),this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),u(this,"verify",{code:this.currentValue}))};this.resend=()=>{u(this,"resend")}}createRenderRoot(){return this}addEventListener(e,n,r){super.addEventListener(e,n,r),this.countListener(e,1)}removeEventListener(e,n,r){super.removeEventListener(e,n,r),this.countListener(e,-1)}countListener(e,n){k.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+n)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${L}]`)}get hasContent(){return E(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),f(this,c,{footer:this.region("footer")},this.contentRegion)}setValue(e,n){let r=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),u(this,"value-change",{value:e,previousValue:r,reason:n})}render(){return a`
1
+ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(l,d,e,t)=>{for(var n=t>1?void 0:t?g(d,e):d,v=l.length-1,p;v>=0;v--)(p=l[v])&&(n=(t?p(d,e,n):p(n))||n);return t&&n&&h(d,e,n),n};import{html as a,LitElement as m,nothing as o}from"lit";import{property as s,state as b}from"lit/decorators.js";import{customElement as E}from"../internal/define.js";import{emit as u}from"../internal/events.js";import{hasUnslottedChild as f,placeSlotted as L}from"../internal/slots.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/pin-input";import"@skdx/web-components/text";var c="data-skdx-verification-page-generated",k="data-skdx-verification-page-content",x=["resend"],y=0,i=class extends m{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++y}`;this.gated=new Map;this.codeError="";this.reportInvalid=e=>{let t=e.target;t instanceof HTMLInputElement&&t.name==="code"&&(this.codeError=t.validationMessage)};this.handleValueChange=e=>{e.stopPropagation(),this.codeError="",this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),u(this,"verify",{code:this.currentValue}))};this.resend=()=>{u(this,"resend")}}createRenderRoot(){return this}addEventListener(e,t,n){super.addEventListener(e,t,n),this.countListener(e,1)}removeEventListener(e,t,n){super.removeEventListener(e,t,n),this.countListener(e,-1)}countListener(e,t){x.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+t)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),this.addEventListener("invalid",this.reportInvalid,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),this.removeEventListener("invalid",this.reportInvalid,!0),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${k}]`)}get hasContent(){return f(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),L(this,c,{footer:this.region("footer")},this.contentRegion)}setValue(e,t){let n=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),u(this,"value-change",{value:e,previousValue:n,reason:t})}render(){return a`
2
2
  <div
3
3
  class="skdx-verification-page__panel"
4
4
  data-skdx-verification-page-generated
@@ -11,6 +11,7 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
11
11
  >
12
12
  ${this.error?a`<skdx-alert
13
13
  class="skdx-verification-page__error"
14
+ .role=${"alert"}
14
15
  .status=${"danger"}
15
16
  >${this.error}</skdx-alert
16
17
  >`:o}
@@ -22,7 +23,10 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
22
23
  >`:o}
23
24
  <skdx-form class="skdx-verification-page__form">
24
25
  <form>
25
- <skdx-fieldset class="skdx-verification-page__field">
26
+ <skdx-fieldset
27
+ class="skdx-verification-page__field"
28
+ .errors=${this.codeError}
29
+ >
26
30
  <skdx-field-label>${this.codeLabel}</skdx-field-label>
27
31
  <skdx-pin-input
28
32
  class="skdx-verification-page__code"
@@ -33,6 +37,7 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
33
37
  .value=${this.currentValue}
34
38
  @value-change=${this.handleValueChange}
35
39
  ></skdx-pin-input>
40
+ <skdx-field-error></skdx-field-error>
36
41
  </skdx-fieldset>
37
42
  ${this.hasContent?a`<div data-skdx-verification-page-content></div>`:o}
38
43
  <skdx-button
@@ -58,4 +63,4 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
58
63
  </div>`:o}
59
64
  ${this.hasSlotted("footer")?a`<div class="skdx-verification-page__footer"></div>`:o}
60
65
  </div>
61
- `}};i([s({type:String})],t.prototype,"title",2),i([s({type:String})],t.prototype,"description",2),i([s({type:String})],t.prototype,"error",2),i([s({type:Boolean})],t.prototype,"pending",2),i([s({type:String,attribute:"code-label"})],t.prototype,"codeLabel",2),i([s({type:Number})],t.prototype,"length",2),i([s({type:String})],t.prototype,"value",2),i([s({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([s({type:String,attribute:"submit-label"})],t.prototype,"submitLabel",2),i([s({type:String,attribute:"resend-label"})],t.prototype,"resendLabel",2),i([s({type:Boolean,attribute:"resend-disabled"})],t.prototype,"resendDisabled",2),i([s({type:String,attribute:"resend-hint"})],t.prototype,"resendHint",2),t=i([b("skdx-verification-page","verification-page","root")],t);export{t as SkdxVerificationPage};
66
+ `}};r([s({type:String})],i.prototype,"title",2),r([s({type:String})],i.prototype,"description",2),r([s({type:String})],i.prototype,"error",2),r([s({type:Boolean})],i.prototype,"pending",2),r([s({type:String,attribute:"code-label"})],i.prototype,"codeLabel",2),r([s({type:Number})],i.prototype,"length",2),r([s({type:String})],i.prototype,"value",2),r([s({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),r([s({type:String,attribute:"submit-label"})],i.prototype,"submitLabel",2),r([s({type:String,attribute:"resend-label"})],i.prototype,"resendLabel",2),r([s({type:Boolean,attribute:"resend-disabled"})],i.prototype,"resendDisabled",2),r([s({type:String,attribute:"resend-hint"})],i.prototype,"resendHint",2),r([b()],i.prototype,"codeError",2),i=r([E("skdx-verification-page","verification-page","root")],i);export{i as SkdxVerificationPage};
@@ -1,33 +1,33 @@
1
- "use strict";var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var w=(i,n)=>{for(var e in n)u(i,e,{get:n[e],enumerable:!0})},x=(i,n,e,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of b(n))!f.call(i,s)&&s!==e&&u(i,s,{get:()=>n[s],enumerable:!(t=g(n,s))||t.enumerable});return i};var y=i=>x(u({},"__esModule",{value:!0}),i),o=(i,n,e,t)=>{for(var s=t>1?void 0:t?g(n,e):n,c=i.length-1,d;c>=0;c--)(d=i[c])&&(s=(t?d(n,e,s):d(s))||s);return t&&s&&u(n,e,s),s};var E={};w(E,{SkdxWorkspaceSwitcher:()=>a});module.exports=y(E);var r=require("lit"),l=require("lit/decorators.js"),v=require("../internal/define.cjs"),h=require("../internal/events.cjs"),k=require("../internal/slots.cjs"),T=require("@skdx/web-components/primitives/command"),q=require("@skdx/web-components/primitives/popover"),M=require("@skdx/web-components/visually-hidden");var $="data-skdx-workspace-switcher-generated",_={fromAttribute:i=>i!=="false"};function m(i){i.stopPropagation()}function L(i,n){let e=n.toLowerCase(),t=new Map([[void 0,[]]]);for(let d of i){let p=t.get(d.group);p?p.push(d):t.set(d.group,[d])}let s=d=>e===""||d.id.toLowerCase().includes(e)||d.label.toLowerCase().includes(e)||(d.description?.toLowerCase().includes(e)??!1),c=[];for(let[d,p]of t)p.some(s)&&c.push({heading:d,items:p});return c}var a=class extends r.LitElement{constructor(){super(...arguments);this.defaultValue="";this.placeholder="Select";this.searchLabel="Search";this.emptyMessage="No results";this.loadingMessage="Loading";this.loading=!1;this.selectedLabel="Current";this.defaultOpen=!1;this.search="";this.reason="programmatic";this.notePointer=()=>{this.reason="pointer"};this.noteKeyboard=()=>{this.reason="keyboard"};this.handleOpenChange=e=>{e.stopPropagation();let t=e.detail;t!==this.isOpen&&this.setOpen(t)};this.handleSearchChange=e=>{e.stopPropagation(),this.search=e.detail,this.requestUpdate()}}createRenderRoot(){return this}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}get isOpen(){return this.open??this.uncontrolledOpen??this.defaultOpen}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerdown",this.notePointer,!0),this.addEventListener("keydown",this.noteKeyboard,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("pointerdown",this.notePointer,!0),this.removeEventListener("keydown",this.noteKeyboard,!0),super.disconnectedCallback()}get hasTrigger(){return this.querySelector('[slot="trigger"], [data-skdx-slot="trigger"]')!==null}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(e){return this.querySelector(`.skdx-workspace-switcher__${e}`)}setOpen(e){e||(this.search=""),this.uncontrolledOpen=e,this.requestUpdate(),(0,h.emit)(this,"open-change",e)}select(e,t){e.stopPropagation();let s=this.currentValue;this.uncontrolledValue=t,this.requestUpdate(),(0,h.emit)(this,"value-change",{value:t,previousValue:s,reason:this.reason}),this.setOpen(!1)}nameTrigger(){let e=this.querySelector("skdx-popover-trigger")?.shadowRoot?.querySelector('[part="trigger"]');e&&(this.label?e.setAttribute("aria-label",this.label):e.removeAttribute("aria-label"))}updated(){let e=this.querySelector(":scope > skdx-popover-root");e&&(e.open=this.isOpen),this.querySelector("skdx-popover-trigger")?.updateComplete.then(()=>this.nameTrigger());let s=this.querySelector("skdx-command-input");s?.updateComplete.then(()=>s.querySelector("input")?.setAttribute("aria-label",this.searchLabel)),(0,k.placeSlotted)(this,$,{trigger:this.querySelector("skdx-popover-trigger"),actions:this.region("footer")},null)}derivedTrigger(){let e=(this.items??[]).find(t=>t.id===this.currentValue);return r.html`${this.renderLeading&&e?r.html`<span
1
+ "use strict";var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var w=(i,n)=>{for(var e in n)h(i,e,{get:n[e],enumerable:!0})},x=(i,n,e,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of b(n))!f.call(i,r)&&r!==e&&h(i,r,{get:()=>n[r],enumerable:!(t=g(n,r))||t.enumerable});return i};var y=i=>x(h({},"__esModule",{value:!0}),i),d=(i,n,e,t)=>{for(var r=t>1?void 0:t?g(n,e):n,p=i.length-1,o;p>=0;p--)(o=i[p])&&(r=(t?o(n,e,r):o(r))||r);return t&&r&&h(n,e,r),r};var E={};w(E,{SkdxWorkspaceSwitcher:()=>a});module.exports=y(E);var s=require("lit"),l=require("lit/decorators.js"),v=require("../internal/define.cjs"),u=require("../internal/events.cjs"),k=require("../internal/slots.cjs"),O=require("@skdx/web-components/primitives/command"),T=require("@skdx/web-components/primitives/popover"),q=require("@skdx/web-components/visually-hidden");var $="data-skdx-workspace-switcher-generated",_={fromAttribute:i=>i!=="false"};function m(i){i.stopPropagation()}function L(i,n){let e=n.toLowerCase(),t=new Map([[void 0,[]]]);for(let o of i){let c=t.get(o.group);c?c.push(o):t.set(o.group,[o])}let r=o=>e===""||o.id.toLowerCase().includes(e)||o.label.toLowerCase().includes(e)||(o.description?.toLowerCase().includes(e)??!1),p=[];for(let[o,c]of t)c.some(r)&&p.push({heading:o,items:c});return p}var a=class extends s.LitElement{constructor(){super(...arguments);this.defaultValue="";this.placeholder="Select";this.searchLabel="Search";this.emptyMessage="No results";this.loadingMessage="Loading";this.loading=!1;this.selectedLabel="Current";this.defaultOpen=!1;this.search="";this.reason="programmatic";this.notePointer=()=>{this.reason="pointer"};this.noteKeyboard=()=>{this.reason="keyboard"};this.handleOpenChange=e=>{e.stopPropagation();let t=e.detail;t!==this.isOpen&&this.setOpen(t)};this.handleSearchChange=e=>{e.stopPropagation(),this.search=e.detail,this.requestUpdate()}}createRenderRoot(){return this}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}get isOpen(){return this.open??this.uncontrolledOpen??this.defaultOpen}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerdown",this.notePointer,!0),this.addEventListener("keydown",this.noteKeyboard,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("pointerdown",this.notePointer,!0),this.removeEventListener("keydown",this.noteKeyboard,!0),super.disconnectedCallback()}get hasTrigger(){return this.querySelector('[slot="trigger"], [data-skdx-slot="trigger"]')!==null}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(e){return this.querySelector(`.skdx-workspace-switcher__${e}`)}setOpen(e){e||(this.search=""),this.uncontrolledOpen=e,this.requestUpdate(),(0,u.emit)(this,"open-change",e)}select(e,t){e.stopPropagation();let r=this.currentValue;this.uncontrolledValue=t,this.requestUpdate(),(0,u.emit)(this,"value-change",{value:t,previousValue:r,reason:this.reason}),this.setOpen(!1)}nameTrigger(){let e=this.querySelector("skdx-popover-trigger")?.shadowRoot?.querySelector('[part="trigger"]');e&&(this.label?e.setAttribute("aria-label",this.label):e.removeAttribute("aria-label"))}updated(){let e=this.querySelector(":scope > skdx-popover-root");e&&(e.open=this.isOpen),this.querySelector("skdx-popover-trigger")?.updateComplete.then(()=>this.nameTrigger());let r=this.wasOpen!==void 0&&this.isOpen&&!this.wasOpen;this.wasOpen=this.isOpen;let p=this.querySelector("skdx-command-input");p?.updateComplete.then(()=>{let o=p.querySelector("input");o?.setAttribute("aria-label",this.searchLabel),r&&o?.focus()}),(0,k.placeSlotted)(this,$,{trigger:this.querySelector("skdx-popover-trigger"),actions:this.region("footer")},null)}derivedTrigger(){let e=(this.items??[]).find(t=>t.id===this.currentValue);return s.html`${this.renderLeading&&e?s.html`<span
2
2
  aria-hidden="true"
3
3
  class="skdx-workspace-switcher__leading"
4
4
  >${this.renderLeading(e)}</span
5
- >`:r.nothing}
5
+ >`:s.nothing}
6
6
  <span class="skdx-workspace-switcher__current">${e?.label??this.placeholder}</span>
7
- ${e?.description?r.html`<span class="skdx-workspace-switcher__description">${e.description}</span>`:r.nothing}`}listedItem(e){let t=e.id===this.currentValue;return r.html`<skdx-command-item
7
+ ${e?.description?s.html`<span class="skdx-workspace-switcher__description">${e.description}</span>`:s.nothing}`}listedItem(e){let t=e.id===this.currentValue;return s.html`<skdx-command-item
8
8
  class="skdx-workspace-switcher__item"
9
9
  .value=${e.id}
10
10
  .keywords=${e.description?[e.label,e.description]:[e.label]}
11
11
  ?disabled=${e.disabled}
12
- data-selected=${t?"":r.nothing}
13
- @select=${s=>this.select(s,e.id)}
12
+ data-selected=${t?"":s.nothing}
13
+ @select=${r=>this.select(r,e.id)}
14
14
  >
15
- ${this.renderLeading?r.html`<span
15
+ ${this.renderLeading?s.html`<span
16
16
  aria-hidden="true"
17
17
  class="skdx-workspace-switcher__item-leading"
18
18
  >${this.renderLeading(e)}</span
19
- >`:r.nothing}
19
+ >`:s.nothing}
20
20
  <span class="skdx-workspace-switcher__item-label">${e.label}</span>
21
- ${e.description?r.html`<span class="skdx-workspace-switcher__item-description">${e.description}</span>`:r.nothing}
22
- ${t?r.html`<skdx-visually-hidden>${this.selectedLabel}</skdx-visually-hidden>`:r.nothing}
23
- </skdx-command-item>`}render(){let e=L(this.items??[],this.search);return r.html`
21
+ ${e.description?s.html`<span class="skdx-workspace-switcher__item-description">${e.description}</span>`:s.nothing}
22
+ ${t?s.html`<skdx-visually-hidden>${this.selectedLabel}</skdx-visually-hidden>`:s.nothing}
23
+ </skdx-command-item>`}render(){let e=L(this.items??[],this.search);return s.html`
24
24
  <skdx-popover-root
25
25
  data-skdx-workspace-switcher-generated
26
26
  modal="none"
27
27
  @open-change=${this.handleOpenChange}
28
28
  >
29
29
  <skdx-popover-trigger
30
- >${this.hasTrigger?r.nothing:this.derivedTrigger()}</skdx-popover-trigger
30
+ >${this.hasTrigger?s.nothing:this.derivedTrigger()}</skdx-popover-trigger
31
31
  >
32
32
  <skdx-popover-content
33
33
  class="skdx-workspace-switcher__content"
@@ -43,17 +43,17 @@
43
43
  >
44
44
  <skdx-command-input
45
45
  class="skdx-workspace-switcher__search"
46
- placeholder=${this.searchPlaceholder??r.nothing}
46
+ placeholder=${this.searchPlaceholder??s.nothing}
47
47
  ></skdx-command-input>
48
48
  <skdx-command-list
49
49
  class="skdx-workspace-switcher__list"
50
50
  aria-label=${this.label??this.placeholder}
51
51
  >
52
- ${e.map(t=>r.html`<skdx-command-group
52
+ ${e.map(t=>s.html`<skdx-command-group
53
53
  class="skdx-workspace-switcher__group"
54
- heading=${t.heading??r.nothing}
54
+ heading=${t.heading??s.nothing}
55
55
  >
56
- ${t.items.map(s=>this.listedItem(s))}
56
+ ${t.items.map(r=>this.listedItem(r))}
57
57
  </skdx-command-group>`)}
58
58
  </skdx-command-list>
59
59
  <skdx-command-loading class="skdx-workspace-switcher__loading"
@@ -63,7 +63,7 @@
63
63
  >${this.emptyMessage}</skdx-command-empty
64
64
  >
65
65
  </skdx-command>
66
- ${this.hasActions?r.html`<div class="skdx-workspace-switcher__footer"></div>`:r.nothing}
66
+ ${this.hasActions?s.html`<div class="skdx-workspace-switcher__footer"></div>`:s.nothing}
67
67
  </skdx-popover-content>
68
68
  </skdx-popover-root>
69
- `}};o([(0,l.property)({attribute:!1})],a.prototype,"items",2),o([(0,l.property)({type:String})],a.prototype,"value",2),o([(0,l.property)({type:String,attribute:"default-value"})],a.prototype,"defaultValue",2),o([(0,l.property)({type:String})],a.prototype,"placeholder",2),o([(0,l.property)({type:String})],a.prototype,"label",2),o([(0,l.property)({type:String,attribute:"search-label"})],a.prototype,"searchLabel",2),o([(0,l.property)({type:String,attribute:"search-placeholder"})],a.prototype,"searchPlaceholder",2),o([(0,l.property)({type:String,attribute:"empty-message"})],a.prototype,"emptyMessage",2),o([(0,l.property)({type:String,attribute:"loading-message"})],a.prototype,"loadingMessage",2),o([(0,l.property)({type:Boolean})],a.prototype,"loading",2),o([(0,l.property)({type:String,attribute:"selected-label"})],a.prototype,"selectedLabel",2),o([(0,l.property)({attribute:!1})],a.prototype,"renderLeading",2),o([(0,l.property)({converter:_})],a.prototype,"open",2),o([(0,l.property)({type:Boolean,attribute:"default-open"})],a.prototype,"defaultOpen",2),a=o([(0,v.customElement)("skdx-workspace-switcher","workspace-switcher","root")],a);0&&(module.exports={SkdxWorkspaceSwitcher});
69
+ `}};d([(0,l.property)({attribute:!1})],a.prototype,"items",2),d([(0,l.property)({type:String})],a.prototype,"value",2),d([(0,l.property)({type:String,attribute:"default-value"})],a.prototype,"defaultValue",2),d([(0,l.property)({type:String})],a.prototype,"placeholder",2),d([(0,l.property)({type:String})],a.prototype,"label",2),d([(0,l.property)({type:String,attribute:"search-label"})],a.prototype,"searchLabel",2),d([(0,l.property)({type:String,attribute:"search-placeholder"})],a.prototype,"searchPlaceholder",2),d([(0,l.property)({type:String,attribute:"empty-message"})],a.prototype,"emptyMessage",2),d([(0,l.property)({type:String,attribute:"loading-message"})],a.prototype,"loadingMessage",2),d([(0,l.property)({type:Boolean})],a.prototype,"loading",2),d([(0,l.property)({type:String,attribute:"selected-label"})],a.prototype,"selectedLabel",2),d([(0,l.property)({attribute:!1})],a.prototype,"renderLeading",2),d([(0,l.property)({converter:_})],a.prototype,"open",2),d([(0,l.property)({type:Boolean,attribute:"default-open"})],a.prototype,"defaultOpen",2),a=d([(0,v.customElement)("skdx-workspace-switcher","workspace-switcher","root")],a);0&&(module.exports={SkdxWorkspaceSwitcher});
@@ -139,6 +139,7 @@ export declare class SkdxWorkspaceSwitcher extends LitElement {
139
139
  private get currentValue();
140
140
  /** Whether the panel is open right now, controlled or not. */
141
141
  private get isOpen();
142
+ private wasOpen;
142
143
  connectedCallback(): void;
143
144
  disconnectedCallback(): void;
144
145
  private readonly notePointer;
@@ -139,6 +139,7 @@ export declare class SkdxWorkspaceSwitcher extends LitElement {
139
139
  private get currentValue();
140
140
  /** Whether the panel is open right now, controlled or not. */
141
141
  private get isOpen();
142
+ private wasOpen;
142
143
  connectedCallback(): void;
143
144
  disconnectedCallback(): void;
144
145
  private readonly notePointer;
@@ -1,25 +1,25 @@
1
- var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(d,c,e,t)=>{for(var s=t>1?void 0:t?v(c,e):c,p=d.length-1,i;p>=0;p--)(i=d[p])&&(s=(t?i(c,e,s):i(s))||s);return t&&s&&m(c,e,s),s};import{html as o,LitElement as k,nothing as l}from"lit";import{property as n}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{emit as h}from"../internal/events.js";import{placeSlotted as f}from"../internal/slots.js";import"@skdx/web-components/primitives/command";import"@skdx/web-components/primitives/popover";import"@skdx/web-components/visually-hidden";var w="data-skdx-workspace-switcher-generated",x={fromAttribute:d=>d!=="false"};function g(d){d.stopPropagation()}function y(d,c){let e=c.toLowerCase(),t=new Map([[void 0,[]]]);for(let i of d){let u=t.get(i.group);u?u.push(i):t.set(i.group,[i])}let s=i=>e===""||i.id.toLowerCase().includes(e)||i.label.toLowerCase().includes(e)||(i.description?.toLowerCase().includes(e)??!1),p=[];for(let[i,u]of t)u.some(s)&&p.push({heading:i,items:u});return p}var r=class extends k{constructor(){super(...arguments);this.defaultValue="";this.placeholder="Select";this.searchLabel="Search";this.emptyMessage="No results";this.loadingMessage="Loading";this.loading=!1;this.selectedLabel="Current";this.defaultOpen=!1;this.search="";this.reason="programmatic";this.notePointer=()=>{this.reason="pointer"};this.noteKeyboard=()=>{this.reason="keyboard"};this.handleOpenChange=e=>{e.stopPropagation();let t=e.detail;t!==this.isOpen&&this.setOpen(t)};this.handleSearchChange=e=>{e.stopPropagation(),this.search=e.detail,this.requestUpdate()}}createRenderRoot(){return this}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}get isOpen(){return this.open??this.uncontrolledOpen??this.defaultOpen}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerdown",this.notePointer,!0),this.addEventListener("keydown",this.noteKeyboard,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("pointerdown",this.notePointer,!0),this.removeEventListener("keydown",this.noteKeyboard,!0),super.disconnectedCallback()}get hasTrigger(){return this.querySelector('[slot="trigger"], [data-skdx-slot="trigger"]')!==null}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(e){return this.querySelector(`.skdx-workspace-switcher__${e}`)}setOpen(e){e||(this.search=""),this.uncontrolledOpen=e,this.requestUpdate(),h(this,"open-change",e)}select(e,t){e.stopPropagation();let s=this.currentValue;this.uncontrolledValue=t,this.requestUpdate(),h(this,"value-change",{value:t,previousValue:s,reason:this.reason}),this.setOpen(!1)}nameTrigger(){let e=this.querySelector("skdx-popover-trigger")?.shadowRoot?.querySelector('[part="trigger"]');e&&(this.label?e.setAttribute("aria-label",this.label):e.removeAttribute("aria-label"))}updated(){let e=this.querySelector(":scope > skdx-popover-root");e&&(e.open=this.isOpen),this.querySelector("skdx-popover-trigger")?.updateComplete.then(()=>this.nameTrigger());let s=this.querySelector("skdx-command-input");s?.updateComplete.then(()=>s.querySelector("input")?.setAttribute("aria-label",this.searchLabel)),f(this,w,{trigger:this.querySelector("skdx-popover-trigger"),actions:this.region("footer")},null)}derivedTrigger(){let e=(this.items??[]).find(t=>t.id===this.currentValue);return o`${this.renderLeading&&e?o`<span
1
+ var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var i=(l,c,e,t)=>{for(var r=t>1?void 0:t?v(c,e):c,p=l.length-1,a;p>=0;p--)(a=l[p])&&(r=(t?a(c,e,r):a(r))||r);return t&&r&&m(c,e,r),r};import{html as o,LitElement as k,nothing as d}from"lit";import{property as n}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{emit as u}from"../internal/events.js";import{placeSlotted as f}from"../internal/slots.js";import"@skdx/web-components/primitives/command";import"@skdx/web-components/primitives/popover";import"@skdx/web-components/visually-hidden";var w="data-skdx-workspace-switcher-generated",x={fromAttribute:l=>l!=="false"};function g(l){l.stopPropagation()}function y(l,c){let e=c.toLowerCase(),t=new Map([[void 0,[]]]);for(let a of l){let h=t.get(a.group);h?h.push(a):t.set(a.group,[a])}let r=a=>e===""||a.id.toLowerCase().includes(e)||a.label.toLowerCase().includes(e)||(a.description?.toLowerCase().includes(e)??!1),p=[];for(let[a,h]of t)h.some(r)&&p.push({heading:a,items:h});return p}var s=class extends k{constructor(){super(...arguments);this.defaultValue="";this.placeholder="Select";this.searchLabel="Search";this.emptyMessage="No results";this.loadingMessage="Loading";this.loading=!1;this.selectedLabel="Current";this.defaultOpen=!1;this.search="";this.reason="programmatic";this.notePointer=()=>{this.reason="pointer"};this.noteKeyboard=()=>{this.reason="keyboard"};this.handleOpenChange=e=>{e.stopPropagation();let t=e.detail;t!==this.isOpen&&this.setOpen(t)};this.handleSearchChange=e=>{e.stopPropagation(),this.search=e.detail,this.requestUpdate()}}createRenderRoot(){return this}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}get isOpen(){return this.open??this.uncontrolledOpen??this.defaultOpen}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerdown",this.notePointer,!0),this.addEventListener("keydown",this.noteKeyboard,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("pointerdown",this.notePointer,!0),this.removeEventListener("keydown",this.noteKeyboard,!0),super.disconnectedCallback()}get hasTrigger(){return this.querySelector('[slot="trigger"], [data-skdx-slot="trigger"]')!==null}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(e){return this.querySelector(`.skdx-workspace-switcher__${e}`)}setOpen(e){e||(this.search=""),this.uncontrolledOpen=e,this.requestUpdate(),u(this,"open-change",e)}select(e,t){e.stopPropagation();let r=this.currentValue;this.uncontrolledValue=t,this.requestUpdate(),u(this,"value-change",{value:t,previousValue:r,reason:this.reason}),this.setOpen(!1)}nameTrigger(){let e=this.querySelector("skdx-popover-trigger")?.shadowRoot?.querySelector('[part="trigger"]');e&&(this.label?e.setAttribute("aria-label",this.label):e.removeAttribute("aria-label"))}updated(){let e=this.querySelector(":scope > skdx-popover-root");e&&(e.open=this.isOpen),this.querySelector("skdx-popover-trigger")?.updateComplete.then(()=>this.nameTrigger());let r=this.wasOpen!==void 0&&this.isOpen&&!this.wasOpen;this.wasOpen=this.isOpen;let p=this.querySelector("skdx-command-input");p?.updateComplete.then(()=>{let a=p.querySelector("input");a?.setAttribute("aria-label",this.searchLabel),r&&a?.focus()}),f(this,w,{trigger:this.querySelector("skdx-popover-trigger"),actions:this.region("footer")},null)}derivedTrigger(){let e=(this.items??[]).find(t=>t.id===this.currentValue);return o`${this.renderLeading&&e?o`<span
2
2
  aria-hidden="true"
3
3
  class="skdx-workspace-switcher__leading"
4
4
  >${this.renderLeading(e)}</span
5
- >`:l}
5
+ >`:d}
6
6
  <span class="skdx-workspace-switcher__current">${e?.label??this.placeholder}</span>
7
- ${e?.description?o`<span class="skdx-workspace-switcher__description">${e.description}</span>`:l}`}listedItem(e){let t=e.id===this.currentValue;return o`<skdx-command-item
7
+ ${e?.description?o`<span class="skdx-workspace-switcher__description">${e.description}</span>`:d}`}listedItem(e){let t=e.id===this.currentValue;return o`<skdx-command-item
8
8
  class="skdx-workspace-switcher__item"
9
9
  .value=${e.id}
10
10
  .keywords=${e.description?[e.label,e.description]:[e.label]}
11
11
  ?disabled=${e.disabled}
12
- data-selected=${t?"":l}
13
- @select=${s=>this.select(s,e.id)}
12
+ data-selected=${t?"":d}
13
+ @select=${r=>this.select(r,e.id)}
14
14
  >
15
15
  ${this.renderLeading?o`<span
16
16
  aria-hidden="true"
17
17
  class="skdx-workspace-switcher__item-leading"
18
18
  >${this.renderLeading(e)}</span
19
- >`:l}
19
+ >`:d}
20
20
  <span class="skdx-workspace-switcher__item-label">${e.label}</span>
21
- ${e.description?o`<span class="skdx-workspace-switcher__item-description">${e.description}</span>`:l}
22
- ${t?o`<skdx-visually-hidden>${this.selectedLabel}</skdx-visually-hidden>`:l}
21
+ ${e.description?o`<span class="skdx-workspace-switcher__item-description">${e.description}</span>`:d}
22
+ ${t?o`<skdx-visually-hidden>${this.selectedLabel}</skdx-visually-hidden>`:d}
23
23
  </skdx-command-item>`}render(){let e=y(this.items??[],this.search);return o`
24
24
  <skdx-popover-root
25
25
  data-skdx-workspace-switcher-generated
@@ -27,7 +27,7 @@ var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(d,c,e,t
27
27
  @open-change=${this.handleOpenChange}
28
28
  >
29
29
  <skdx-popover-trigger
30
- >${this.hasTrigger?l:this.derivedTrigger()}</skdx-popover-trigger
30
+ >${this.hasTrigger?d:this.derivedTrigger()}</skdx-popover-trigger
31
31
  >
32
32
  <skdx-popover-content
33
33
  class="skdx-workspace-switcher__content"
@@ -43,7 +43,7 @@ var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(d,c,e,t
43
43
  >
44
44
  <skdx-command-input
45
45
  class="skdx-workspace-switcher__search"
46
- placeholder=${this.searchPlaceholder??l}
46
+ placeholder=${this.searchPlaceholder??d}
47
47
  ></skdx-command-input>
48
48
  <skdx-command-list
49
49
  class="skdx-workspace-switcher__list"
@@ -51,9 +51,9 @@ var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(d,c,e,t
51
51
  >
52
52
  ${e.map(t=>o`<skdx-command-group
53
53
  class="skdx-workspace-switcher__group"
54
- heading=${t.heading??l}
54
+ heading=${t.heading??d}
55
55
  >
56
- ${t.items.map(s=>this.listedItem(s))}
56
+ ${t.items.map(r=>this.listedItem(r))}
57
57
  </skdx-command-group>`)}
58
58
  </skdx-command-list>
59
59
  <skdx-command-loading class="skdx-workspace-switcher__loading"
@@ -63,7 +63,7 @@ var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(d,c,e,t
63
63
  >${this.emptyMessage}</skdx-command-empty
64
64
  >
65
65
  </skdx-command>
66
- ${this.hasActions?o`<div class="skdx-workspace-switcher__footer"></div>`:l}
66
+ ${this.hasActions?o`<div class="skdx-workspace-switcher__footer"></div>`:d}
67
67
  </skdx-popover-content>
68
68
  </skdx-popover-root>
69
- `}};a([n({attribute:!1})],r.prototype,"items",2),a([n({type:String})],r.prototype,"value",2),a([n({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),a([n({type:String})],r.prototype,"placeholder",2),a([n({type:String})],r.prototype,"label",2),a([n({type:String,attribute:"search-label"})],r.prototype,"searchLabel",2),a([n({type:String,attribute:"search-placeholder"})],r.prototype,"searchPlaceholder",2),a([n({type:String,attribute:"empty-message"})],r.prototype,"emptyMessage",2),a([n({type:String,attribute:"loading-message"})],r.prototype,"loadingMessage",2),a([n({type:Boolean})],r.prototype,"loading",2),a([n({type:String,attribute:"selected-label"})],r.prototype,"selectedLabel",2),a([n({attribute:!1})],r.prototype,"renderLeading",2),a([n({converter:x})],r.prototype,"open",2),a([n({type:Boolean,attribute:"default-open"})],r.prototype,"defaultOpen",2),r=a([b("skdx-workspace-switcher","workspace-switcher","root")],r);export{r as SkdxWorkspaceSwitcher};
69
+ `}};i([n({attribute:!1})],s.prototype,"items",2),i([n({type:String})],s.prototype,"value",2),i([n({type:String,attribute:"default-value"})],s.prototype,"defaultValue",2),i([n({type:String})],s.prototype,"placeholder",2),i([n({type:String})],s.prototype,"label",2),i([n({type:String,attribute:"search-label"})],s.prototype,"searchLabel",2),i([n({type:String,attribute:"search-placeholder"})],s.prototype,"searchPlaceholder",2),i([n({type:String,attribute:"empty-message"})],s.prototype,"emptyMessage",2),i([n({type:String,attribute:"loading-message"})],s.prototype,"loadingMessage",2),i([n({type:Boolean})],s.prototype,"loading",2),i([n({type:String,attribute:"selected-label"})],s.prototype,"selectedLabel",2),i([n({attribute:!1})],s.prototype,"renderLeading",2),i([n({converter:x})],s.prototype,"open",2),i([n({type:Boolean,attribute:"default-open"})],s.prototype,"defaultOpen",2),s=i([b("skdx-workspace-switcher","workspace-switcher","root")],s);export{s as SkdxWorkspaceSwitcher};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skdx/web-components-blocks",
3
- "version": "0.38.0",
3
+ "version": "0.39.0",
4
4
  "description": "Web Components blocks for the SkandaDX design system — page-level compositions of @skdx/web-components styled by @skdx/skins",
5
5
  "license": "MIT",
6
6
  "publishConfig": {
@@ -343,7 +343,7 @@
343
343
  ],
344
344
  "peerDependencies": {
345
345
  "lit": "^3.3.0",
346
- "@skdx/web-components": "^0.38.0"
346
+ "@skdx/web-components": "^0.39.0"
347
347
  },
348
348
  "devDependencies": {
349
349
  "@custom-elements-manifest/analyzer": "^0.10.4",
@@ -354,7 +354,7 @@
354
354
  "tsup": "^8.5.1",
355
355
  "typescript": "^6.0.3",
356
356
  "vitest": "^4.1.10",
357
- "@skdx/web-components": "0.38.0"
357
+ "@skdx/web-components": "0.39.0"
358
358
  },
359
359
  "scripts": {
360
360
  "lint": "eslint . --cache --cache-location node_modules/.cache/eslint/",