scb-wc 0.1.201 → 0.1.203
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.
- package/mvc/components/scb-menu/scb-menu-item.js +18 -15
- package/mvc/scb-wc-core.css +1 -1
- package/mvc/scb-wc-selfhost.css +1 -1
- package/mvc/scb-wc.css +1 -1
- package/package.json +2 -2
- package/scb-menu/scb-menu-item.js +12 -1
- package/scb-wc-core.css +1 -1
- package/scb-wc-selfhost.css +1 -1
- package/scb-wc.bundle.js +5 -2
- package/scb-wc.css +1 -1
|
@@ -1,51 +1,54 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/ripple.js","../../vendor/rolldown-runtime.js","../../vendor/vendor.js","../../vendor/vendor-lit.js","../../vendor/attachable-controller.js","../../vendor/md-focus-ring.js","../../vendor/icon.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{f as g,g as
|
|
2
|
+
import{f as g,g as r,h as v,m as _,p as a,v as u,y as f}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as b}from"../../vendor/preload-helper.js";import{t as s}from"../../vendor/decorate.js";import"../scb-chevron/scb-chevron.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,i,c){try{customElements.get(t)||e(t,i,c)}catch(h){var o=String(h||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var m,d,p={fromAttribute:l=>l==null?!1:!/^(false|0|off|no)$/i.test(l),toAttribute:l=>l?"":null},n=(m=class extends v{constructor(...e){super(...e),this.label="",this.selected=!1,this.noHighlightSelected=!1,this.leadingIcon="",this.itemHref="",this.hasChildren=!1,this.loading=!1,this.showSubmenuLabel="Visa undermeny för",this.hideSubmenuLabel="Dölj undermeny för",this.loadingLabel="Laddar…",this.hasSlotContent=!1,this.expanded=!1,this.__submenuId=`sub-${Math.random().toString(36).slice(2)}`,this.__focusId=`f-${Math.random().toString(36).slice(2)}`,this._toggleExpand=t=>{t&&t.stopPropagation(),this.__isExpandable&&this.__setExpanded(!this.expanded)},this._onButtonClick=t=>{t.stopPropagation(),this._dispatchSelect(),this._toggleExpand()},this._onLinkClick=()=>{this._dispatchSelect()},this._onKeyDown=t=>{const i=this.__keyboardItems(),c=i.indexOf(this);switch(t.key){case"ArrowDown":{t.preventDefault();const o=i[c+1]||i[0];this.__focusMenuItem(o);break}case"ArrowUp":{t.preventDefault();const o=i[c-1]||i[i.length-1];this.__focusMenuItem(o);break}case"Home":{t.preventDefault();const o=i[0];this.__focusMenuItem(o);break}case"End":{t.preventDefault();const o=i[i.length-1];this.__focusMenuItem(o);break}case"ArrowRight":if(!this.__isExpandable)break;t.preventDefault(),this.expanded||this.__setExpanded(!0);break;case"ArrowLeft":if(!this.__isExpandable)break;t.preventDefault(),this.expanded&&this.__setExpanded(!1);break}}}get __submenuEl(){return this.renderRoot.querySelector(`#${this.__submenuId}`)}get __isExpandable(){return this.hasSlotContent||this.hasChildren}__submenuButtonLabel(){const e=this.expanded?this.hideSubmenuLabel:this.showSubmenuLabel;return this.label?`${e} ${this.label}`:e}async __ensureDepsLoaded(){d.__rippleLoaded||(await b(()=>import("../../vendor/ripple.js").then(e=>e.t),__vite__mapDeps([0,1,2,3,4]),import.meta.url),d.__rippleLoaded=!0),d.__focusRingLoaded||(await b(()=>import("../../vendor/md-focus-ring.js").then(e=>e.t),__vite__mapDeps([5,1,2,3,4]),import.meta.url),d.__focusRingLoaded=!0),this.leadingIcon&&!d.__iconLoaded&&(await b(()=>import("../../vendor/icon.js").then(e=>e.t),__vite__mapDeps([6,1,2,3]),import.meta.url),d.__iconLoaded=!0)}__syncHasSlotContentFromLightDom(){const e=Array.from(this.children);this.hasSlotContent=e.some(t=>t.tagName==="SCB-SUB-MENU")}connectedCallback(){super.connectedCallback(),this.__syncHasSlotContentFromLightDom()}_onSlotChange(e){const t=e.target.assignedElements({flatten:!0});this.hasSlotContent=t.some(i=>i.tagName==="SCB-SUB-MENU")}__setExpanded(e){if(!this.__isExpandable)return;this.expanded=e;const t={item:this,expanded:e,hasChildren:this.hasChildren,hasSlotContent:this.hasSlotContent,loading:this.loading,lazy:this.hasChildren&&!this.hasSlotContent};this.dispatchEvent(new CustomEvent("scb-menu-expand",{bubbles:!0,composed:!0,detail:t})),this.dispatchEvent(new CustomEvent("scbmenuexpand",{bubbles:!0,composed:!0,detail:t}))}_dispatchSelect(){this.dispatchEvent(new CustomEvent("scb-menu-select",{bubbles:!0,composed:!0,detail:{item:this}})),this.dispatchEvent(new CustomEvent("scbmenuselect",{bubbles:!0,composed:!0,detail:{item:this}}))}async firstUpdated(){await this.__ensureDepsLoaded(),this.__applyInert()}updated(e){e.has("leadingIcon")&&this.leadingIcon&&this.__ensureDepsLoaded(),(e.has("hasSlotContent")&&this.hasSlotContent||e.has("hasChildren")&&this.hasChildren||e.has("loading")&&this.loading)&&this.__ensureDepsLoaded(),(e.has("expanded")||e.has("hasChildren")||e.has("loading"))&&this.__applyInert()}__applyInert(){const e=this.__submenuEl;e&&(this.loading?e.setAttribute("aria-busy","true"):e.removeAttribute("aria-busy"),this.expanded?(e.removeAttribute("inert"),e.setAttribute("aria-hidden","false")):(e.setAttribute("inert",""),e.setAttribute("aria-hidden","true")))}render(){const e=!!this.leadingIcon,t=!!this.itemHref,i=this.__isExpandable;return u`
|
|
3
3
|
<div class="scb-menu-item">
|
|
4
4
|
<div class="scb-menu-item-label" ?selected=${this.selected} ?no-highlight-selected=${this.noHighlightSelected}>
|
|
5
|
-
${t?
|
|
5
|
+
${t?u`
|
|
6
6
|
<a
|
|
7
7
|
id=${this.__focusId}
|
|
8
8
|
class="scb-menu-label-text"
|
|
9
9
|
aria-label="${this.label}"
|
|
10
10
|
href="${this.itemHref}"
|
|
11
|
-
aria-current=${this.selected?"page":
|
|
11
|
+
aria-current=${this.selected?"page":r}
|
|
12
|
+
aria-expanded=${i?String(this.expanded):r}
|
|
13
|
+
aria-controls=${i?this.__submenuId:r}
|
|
14
|
+
aria-busy=${i&&this.loading?"true":r}
|
|
12
15
|
@click=${this._onLinkClick}
|
|
13
16
|
@keydown=${this._onKeyDown}
|
|
14
17
|
>
|
|
15
18
|
<span class="scb-menu-click ${e?"has-icon":""}">
|
|
16
19
|
<md-ripple></md-ripple>
|
|
17
|
-
${e?
|
|
20
|
+
${e?u`<md-icon>${this.leadingIcon}</md-icon>`:""}
|
|
18
21
|
${this.label}
|
|
19
22
|
</span>
|
|
20
23
|
</a>
|
|
21
24
|
<md-focus-ring for=${this.__focusId} inward></md-focus-ring>
|
|
22
|
-
`:
|
|
25
|
+
`:u`
|
|
23
26
|
<button
|
|
24
27
|
id=${this.__focusId}
|
|
25
28
|
type="button"
|
|
26
29
|
class="scb-menu-label-text"
|
|
27
30
|
@click=${this._onButtonClick}
|
|
28
31
|
@keydown=${this._onKeyDown}
|
|
29
|
-
aria-expanded=${i?String(this.expanded):
|
|
30
|
-
aria-controls=${i?this.__submenuId:
|
|
31
|
-
aria-busy=${i&&this.loading?"true":
|
|
32
|
+
aria-expanded=${i?String(this.expanded):r}
|
|
33
|
+
aria-controls=${i?this.__submenuId:r}
|
|
34
|
+
aria-busy=${i&&this.loading?"true":r}
|
|
32
35
|
>
|
|
33
36
|
<span class="scb-menu-click ${e?"has-icon":""}">
|
|
34
37
|
<md-ripple></md-ripple>
|
|
35
|
-
${e?
|
|
38
|
+
${e?u`<md-icon>${this.leadingIcon}</md-icon>`:""}
|
|
36
39
|
${this.label}
|
|
37
40
|
</span>
|
|
38
41
|
</button>
|
|
39
42
|
<md-focus-ring for=${this.__focusId} inward></md-focus-ring>
|
|
40
43
|
`}
|
|
41
|
-
${i?
|
|
44
|
+
${i?u`
|
|
42
45
|
<button
|
|
43
46
|
class="menu-chevron-button"
|
|
44
47
|
type="button"
|
|
45
48
|
aria-label=${this.__submenuButtonLabel()}
|
|
46
49
|
aria-expanded=${String(this.expanded)}
|
|
47
50
|
aria-controls=${this.__submenuId}
|
|
48
|
-
tabindex
|
|
51
|
+
tabindex="-1"
|
|
49
52
|
@click=${c=>{c.stopPropagation(),this._toggleExpand(c)}}
|
|
50
53
|
>
|
|
51
54
|
<md-ripple></md-ripple>
|
|
@@ -59,15 +62,15 @@ import{f as g,g as m,h as v,m as _,p as a,v as d,y as f}from"../../vendor/vendor
|
|
|
59
62
|
class="submenu ${this.expanded?"expanded":""}"
|
|
60
63
|
role="region"
|
|
61
64
|
aria-hidden=${this.expanded?"false":"true"}
|
|
62
|
-
aria-busy=${i&&this.loading?"true":
|
|
65
|
+
aria-busy=${i&&this.loading?"true":r}
|
|
63
66
|
>
|
|
64
67
|
<div class="submenu__inner">
|
|
65
68
|
<slot @slotchange=${this._onSlotChange}></slot>
|
|
66
|
-
${this.loading?
|
|
69
|
+
${this.loading?u`<div class="submenu-loading" role="status">${this.loadingLabel}</div>`:r}
|
|
67
70
|
</div>
|
|
68
71
|
</div>
|
|
69
72
|
</div>
|
|
70
|
-
`}__isHiddenByCollapsedAncestor(e,t){let i=e.parentElement;for(;i&&i!==t;){if(i.localName==="scb-menu-item"&&!i.expanded)return!0;i=i.parentElement}return!1}__keyboardItems(){const e=this.closest("scb-sub-menu, scb-menu");return e?Array.from(e.querySelectorAll("scb-menu-item")).filter(t=>!this.__isHiddenByCollapsedAncestor(t,e)):[this]}__focusMenuItem(e){e?.shadowRoot?.querySelector(".scb-menu-label-text")?.focus()}},
|
|
73
|
+
`}__isHiddenByCollapsedAncestor(e,t){let i=e.parentElement;for(;i&&i!==t;){if(i.localName==="scb-menu-item"&&!i.expanded)return!0;i=i.parentElement}return!1}__keyboardItems(){const e=this.closest("scb-sub-menu, scb-menu");return e?Array.from(e.querySelectorAll("scb-menu-item")).filter(t=>!this.__isHiddenByCollapsedAncestor(t,e)):[this]}__focusMenuItem(e){e?.shadowRoot?.querySelector(".scb-menu-label-text")?.focus()}},d=m,m.__rippleLoaded=!1,m.__iconLoaded=!1,m.__focusRingLoaded=!1,m.styles=f`@keyframes scb-menu-loading-spin{to{transform:rotate(1turn)}}:host{--scb-menu-sub-transition-duration:var(--scb-motion-duration-quick, 150ms);--scb-menu-sub-transition-easing:var(--scb-motion-easing-standard, cubic-bezier(.69,.16,.2,.98));--scb-menu-chevron-transition-duration:var(--motion-duration-medium, 150ms);--scb-menu-chevron-transition-easing:var(
|
|
71
74
|
--motion-easing-emphasized-accelerate,
|
|
72
75
|
var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
|
|
73
76
|
);--scb-menu-item-padding-y:var(--scb-navigation-item-padding-block, var(--scale-02, 14px));--scb-menu-item-padding-x:var(--scb-navigation-item-padding-inline, var(--scale-05, 20px));--scb-menu-item-padding-x-has-icon:var(--scb-navigation-item-padding-inline-with-icon, var(--spacing-4, 12px));--scb-menu-item-radius:var(--scb-navigation-item-radius, 28px);--scb-menu-item-gap:var(--scb-navigation-item-gap, var(--spacing-4, 12px));--scb-menu-item-text-font-family:var(--scb-navigation-text-font, var(--scb-typography-body-medium-font, var(--md-sys-typescale-body-medium-font)));--scb-menu-item-text-font-size:var(--scb-navigation-text-size, var(--scb-typography-body-medium-size, var(--md-sys-typescale-body-medium-size)));--scb-menu-item-text-line-height:var(--scb-navigation-text-line-height, var(--scb-typography-body-medium-line-height, var(--md-sys-typescale-body-medium-line-height)));--scb-menu-item-text-letter-spacing:var(--scb-navigation-text-letter-spacing, var(--scb-typography-body-medium-tracking, var(--md-sys-typescale-body-medium-tracking)));--scb-menu-item-text-font-weight:var(--scb-navigation-text-font-weight, var(--scb-typography-body-medium-weight, var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400))))}:host([expanded]){--scb-menu-chevron-transition-easing:var(
|
|
@@ -75,4 +78,4 @@ import{f as g,g as m,h as v,m as _,p as a,v as d,y as f}from"../../vendor/vendor
|
|
|
75
78
|
var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
|
|
76
79
|
)}.scb-menu-item-label{display:flex;align-items:center;position:relative}.scb-menu-label-text{width:100%;display:block;background:0 0;border:0;text-align:left;font-family:var(--scb-menu-item-text-font-family, var(--brand-font, var(--brand, "Inter"), sans-serif));font-size:var(--scb-menu-item-text-font-size);line-height:var(--scb-menu-item-text-line-height);font-weight:var(--scb-menu-item-text-font-weight);letter-spacing:var(--scb-menu-item-text-letter-spacing);color:inherit;text-decoration:none;cursor:pointer;padding:0;margin:0;appearance:none;-webkit-appearance:none;box-sizing:border-box;outline:0;-webkit-tap-highlight-color:transparent}.scb-menu-label-text:focus,.scb-menu-label-text:focus-visible{outline:0}.scb-menu-label-text:-moz-focusring{outline:0}.scb-menu-click,.scb-menu-click.has-icon{padding-block:var(--scb-menu-item-padding-y)}.scb-menu-click{display:flex;align-items:center;gap:var(--scb-menu-item-gap);padding-inline:var(--scb-menu-item-padding-x);border-radius:var(--scb-menu-item-radius);position:relative;overflow:hidden;color:var(--scb-menu-panel-content-color, var(--md-sys-color-on-surface))}.scb-menu-click.has-icon{padding-inline:var(--scb-menu-item-padding-x-has-icon)}.scb-menu-click md-icon{--md-icon-size:var(--scb-menu-leading-icon-size, var(--scb-navigation-icon-size, var(--icon-size-medium, 24px)))}.scb-menu-click md-ripple{--md-ripple-focus-opacity:0}.scb-menu-item-label[selected]:not([no-highlight-selected]) .scb-menu-click,:host([selected]):not([no-highlight-selected]) .scb-menu-click{color:var(--scb-menu-selected-content-color, var(--md-sys-color-on-secondary-container));background:var(--scb-menu-selected-container-color, var(--md-sys-color-secondary-container))}.scb-menu-item-label[selected]:not([no-highlight-selected]) .scb-menu-label-text,:host([selected]):not([no-highlight-selected]) .scb-menu-label-text{font-weight:var(--scb-menu-item-selected-font-weight, var(--scb-typography-label-medium-weight, var(--md-sys-typescale-label-medium-weight, var(--weight-semibold, 600))))}.menu-chevron-button{margin-left:auto;flex:0 0 auto;position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--scb-menu-chevron-button-size, var(--scb-navigation-chevron-button-size, 48px));block-size:var(--scb-menu-chevron-button-size, var(--scb-navigation-chevron-button-size, 48px));padding:0;border:0;border-radius:var(--radius-full, 1000px);background:0 0;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.menu-chevron-button:focus{outline:0}.menu-chevron-button md-ripple{border-radius:inherit}.menu-chevron{--scb-chevron-size:var(--scb-menu-chevron-size, var(--scb-navigation-chevron-size, var(--icon-size-medium, 24px)))}:host([loading]) .menu-chevron-button{cursor:progress}:host([loading]) .menu-chevron{opacity:.7}.submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--scb-menu-sub-transition-duration) var(--scb-menu-sub-transition-easing),opacity var(--scb-menu-sub-transition-duration) var(--scb-menu-sub-transition-easing);opacity:0;padding-left:var(--scb-navigation-submenu-padding-inline, var(--spacing-5, 16px))}.submenu.expanded{grid-template-rows:1fr;opacity:1}.submenu,.submenu__inner{overflow:hidden}.submenu-loading{display:flex;align-items:center;gap:var(--scb-menu-submenu-loading-gap, var(--spacing-3, 8px));padding-block:var(--scb-menu-submenu-loading-padding-block, var(--spacing-3, 8px));padding-inline:var(--scb-navigation-submenu-padding-inline, var(--spacing-5, 16px));color:var(--scb-menu-loading-color,
|
|
77
80
|
var(--md-sys-color-on-surface-variant, currentColor)
|
|
78
|
-
);font-size:var(--scb-typography-body-small-size, var(--md-sys-typescale-body-small-size, 0.875rem));line-height:var(--scb-typography-body-small-line-height, var(--md-sys-typescale-body-small-line-height, 1.25rem))}.submenu-loading::before{content:"";inline-size:.75rem;block-size:.75rem;border-radius:var(--radius-full, 1000px);border:2px solid currentColor;border-inline-end-color:transparent;animation:scb-menu-loading-spin 700ms linear infinite}@media (prefers-reduced-motion:reduce){.submenu{transition:none}.submenu-loading::before{animation:none}}`,
|
|
81
|
+
);font-size:var(--scb-typography-body-small-size, var(--md-sys-typescale-body-small-size, 0.875rem));line-height:var(--scb-typography-body-small-line-height, var(--md-sys-typescale-body-small-line-height, 1.25rem))}.submenu-loading::before{content:"";inline-size:.75rem;block-size:.75rem;border-radius:var(--radius-full, 1000px);border:2px solid currentColor;border-inline-end-color:transparent;animation:scb-menu-loading-spin 700ms linear infinite}@media (prefers-reduced-motion:reduce){.submenu{transition:none}.submenu-loading::before{animation:none}}`,m);s([a({type:String})],n.prototype,"label",void 0);s([a({type:Boolean,reflect:!0})],n.prototype,"selected",void 0);s([a({type:Boolean,attribute:"no-highlight-selected",reflect:!0})],n.prototype,"noHighlightSelected",void 0);s([a({type:String,attribute:"leading-icon"})],n.prototype,"leadingIcon",void 0);s([a({type:String,attribute:"item-href"})],n.prototype,"itemHref",void 0);s([a({type:Boolean,attribute:"has-children",reflect:!0,converter:p})],n.prototype,"hasChildren",void 0);s([a({type:Boolean,reflect:!0,converter:p})],n.prototype,"loading",void 0);s([a({type:String,attribute:"show-submenu-label"})],n.prototype,"showSubmenuLabel",void 0);s([a({type:String,attribute:"hide-submenu-label"})],n.prototype,"hideSubmenuLabel",void 0);s([a({type:String,attribute:"loading-label"})],n.prototype,"loadingLabel",void 0);s([g()],n.prototype,"hasSlotContent",void 0);s([a({type:Boolean,reflect:!0})],n.prototype,"expanded",void 0);n=d=s([_("scb-menu-item")],n);
|