scb-wc 0.1.236 → 0.1.238
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.
|
@@ -72,9 +72,9 @@ import{f as g,g as r,h as v,m as _,p as a,v as c,y as f}from"../../vendor/vendor
|
|
|
72
72
|
`}__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()}},m=u,u.__rippleLoaded=!1,u.__iconLoaded=!1,u.__focusRingLoaded=!1,u.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(
|
|
73
73
|
--motion-easing-emphasized-accelerate,
|
|
74
74
|
var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
|
|
75
|
-
);--scb-menu-item-padding-y:var(--scb-menu-item-design-item-padding-block-medium);--scb-menu-item-padding-x:var(--scb-menu-item-design-padding-inline-medium);--scb-menu-item-padding-x-has-icon:var(--scb-menu-item-design-icon-padding-inline-medium);--scb-menu-item-radius:var(--scb-menu-item-design-item-radius-medium);--scb-menu-item-gap:var(--scb-menu-item-design-gap-medium);--scb-menu-item-text-font-family:var(--scb-menu-item-design-text-medium-font);--scb-menu-item-text-font-size:var(--scb-menu-item-design-text-medium-size);--scb-menu-item-text-line-height:var(--scb-menu-item-design-text-medium-line-height);--scb-menu-item-text-letter-spacing:var(--scb-menu-item-design-text-medium-letter-spacing);--scb-menu-item-text-font-weight:var(--scb-menu-item-design-text-medium-font-weight)}:host([expanded]){--scb-menu-chevron-transition-easing:var(
|
|
75
|
+
);--scb-menu-item-padding-y:var(--scb-menu-item-design-item-padding-block-medium);--scb-menu-item-padding-x:var(--scb-menu-item-design-padding-inline-medium);--scb-menu-item-padding-x-has-icon:var(--scb-menu-item-design-icon-padding-inline-medium);--scb-menu-item-radius:var(--scb-menu-item-design-item-radius-medium);--scb-menu-item-gap:var(--scb-menu-item-design-gap-medium);--scb-menu-item-text-font-family:var(--scb-menu-item-design-text-medium-font);--scb-menu-item-text-font-size:var(--scb-menu-item-design-text-medium-size);--scb-menu-item-text-line-height:var(--scb-menu-item-design-text-medium-line-height);--scb-menu-item-text-letter-spacing:var(--scb-menu-item-design-text-medium-letter-spacing);--scb-menu-item-text-font-weight:var(--scb-menu-item-design-text-medium-font-weight);display:block;min-width:0}:host([expanded]){--scb-menu-chevron-transition-easing:var(
|
|
76
76
|
--motion-easing-emphasized-decelerate,
|
|
77
77
|
var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
|
|
78
|
-
)}.scb-menu-item-label{display:flex;align-items:center;position:relative}.scb-menu-label-text{width:
|
|
78
|
+
)}.scb-menu-item-label{display:flex;align-items:center;position:relative;min-width:0}.scb-menu-label-text{flex:1 1 0;min-width:0;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;min-width:0;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;overflow-wrap:anywhere;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-menu-item-design-icon-medium))}.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-menu-item-design-chevron-button-medium));block-size:var(--scb-menu-chevron-button-size, var(--scb-menu-item-design-chevron-button-medium));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-menu-item-design-chevron-icon-medium))}: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-menu-item-design-submenu-padding-inline-medium)}.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-menu-item-design-submenu-padding-inline-medium);color:var(--scb-menu-loading-color,
|
|
79
79
|
var(--md-sys-color-on-surface-variant, currentColor)
|
|
80
80
|
);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}}:host{--scb-menu-item-design-item-padding-block-medium:var(--scb-navigation-item-padding-block, var(--scale-02, 14px));--scb-menu-item-design-padding-inline-medium:var(--scb-navigation-item-padding-inline, var(--scale-05, 20px));--scb-menu-item-design-icon-padding-inline-medium:var(--scb-navigation-item-padding-inline-with-icon, var(--spacing-4, 12px));--scb-menu-item-design-text-medium-font:var(--scb-navigation-text-font, var(--scb-typography-body-medium-font, var(--md-sys-typescale-body-medium-font, var(--brand))));--scb-menu-item-design-text-medium-size:var(--scb-navigation-text-size, var(--scb-typography-body-medium-size, var(--md-sys-typescale-body-medium-size, 16px)));--scb-menu-item-design-text-medium-line-height:var(--scb-navigation-text-line-height, var(--scb-typography-body-medium-line-height, var(--md-sys-typescale-body-medium-line-height, 24px)));--scb-menu-item-design-text-medium-tracking:var(--scb-navigation-text-tracking, var(--scb-typography-body-medium-tracking, var(--md-sys-typescale-body-medium-tracking, var(--tracking-03, -0.15px))));--scb-menu-item-design-text-medium-weight:var(--scb-navigation-text-weight, var(--scb-typography-body-medium-weight, var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400))));--scb-menu-item-design-text-medium-letter-spacing:var(--scb-navigation-text-letter-spacing, var(--scb-navigation-text-tracking, var(--scb-typography-body-medium-tracking, var(--md-sys-typescale-body-medium-tracking, var(--tracking-03, -0.15px)))));--scb-menu-item-design-text-medium-font-weight:var(--scb-navigation-text-font-weight, var(--scb-navigation-text-weight, var(--scb-typography-body-medium-weight, var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400)))));--scb-menu-item-design-icon-medium:var(--scb-navigation-icon-size, var(--icon-size-medium, 24px));--scb-menu-item-design-chevron-icon-medium:var(--scb-navigation-chevron-size, var(--icon-size-medium, 24px));--scb-menu-item-design-chevron-button-medium:var(--scb-navigation-chevron-button-size, var(--scale-11, 48px));--scb-menu-item-design-gap-medium:var(--scb-navigation-item-gap, var(--spacing-4, 12px));--scb-menu-item-design-item-radius-medium:var(--scb-navigation-item-radius, var(--radius-full, 1000px));--scb-menu-item-design-submenu-padding-inline-medium:var(--scb-navigation-submenu-padding-inline, var(--spacing-5, 16px))}`,u);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=m=s([_("scb-menu-item")],n);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{g as
|
|
1
|
+
import{g as b,h as v,m as f,p as r,v as m,y as k}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as s}from"../../vendor/decorate.js";import{t as h}from"../../vendor/assertClassBrand.js";import{t as z}from"../../vendor/classPrivateMethodInitSpec.js";import"../scb-divider/scb-divider.js";import"./scb-menu-item.js";import"./scb-menu-section.js";import"./scb-sub-menu.js";(function(){try{var o=typeof globalThis<"u"?globalThis:window;if(!o.__scb_ce_guard_installed__){o.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,t,a){try{customElements.get(i)||e(i,t,a)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var g,u,n=(g=new WeakSet,u=class extends v{constructor(...e){super(...e),z(this,g),this.label="",this.subLabel="",this.noHighlightSelected=!1,this.elevation=!1,this.lazySrc="",this.lazyIdParam="id",this.lazyChildrenField="",this.lazyIdField="id",this.lazyLabelField="label",this.lazyHrefField="href",this.lazyHasChildrenField="hasChildren",this.lazyHasLinkField="hasLink",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._lazyCache=new Map,this._onGlobalSelect=i=>{const t=i;this.querySelectorAll("scb-menu-item").forEach(a=>{a.selected=!1,this.noHighlightSelected?a.setAttribute("no-highlight-selected",""):a.removeAttribute("no-highlight-selected")}),this.contains(t.detail.item)&&(t.detail.item.selected=!0)},this._onMenuExpand=i=>{this._loadLazyChildren(i)}}render(){return m`
|
|
2
2
|
<nav
|
|
3
|
-
aria-label=${this.label||
|
|
3
|
+
aria-label=${this.label||b}
|
|
4
4
|
>
|
|
5
|
-
${this.label?
|
|
5
|
+
${this.label?m`
|
|
6
6
|
<div class="scb-menu-label-wrapper">
|
|
7
7
|
<div class="scb-menu-label">${this.label}</div>
|
|
8
8
|
<div class="scb-menu-sublabel">
|
|
@@ -10,9 +10,9 @@ import{g as m,h as v,m as f,p as r,v as b,y as k}from"../../vendor/vendor.js";im
|
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
12
12
|
<scb-divider></scb-divider>
|
|
13
|
-
`:
|
|
13
|
+
`:b}
|
|
14
14
|
<div class="panel">
|
|
15
15
|
<slot></slot>
|
|
16
16
|
</div>
|
|
17
17
|
</nav>
|
|
18
|
-
`}firstUpdated(e){super.firstUpdated(e),h(g,this,y).call(this)}updated(e){super.updated(e),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&h(g,this,y).call(this)}mapSpacingToken(e){if(!e)return;const i=String(e).trim();if(i)return/^\d+$/.test(i)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(i,10)))})`:i}connectedCallback(){super.connectedCallback(),window.addEventListener("scb-menu-select",this._onGlobalSelect),this.addEventListener("scb-menu-expand",this._onMenuExpand)}disconnectedCallback(){window.removeEventListener("scb-menu-select",this._onGlobalSelect),this.removeEventListener("scb-menu-expand",this._onMenuExpand),super.disconnectedCallback()}async _loadLazyChildren(e){if(!this.lazySrc)return;const i=e.detail?.item;if(!i||!this.contains(i)||!e.detail?.expanded||i.hasAttribute("data-loaded")||!i.hasAttribute("has-children")||e.detail?.lazy===!1||this._hasSubMenu(i))return;const t=i.getAttribute("data-node-id")??i.dataset.nodeId;if(t){this._setItemLoading(i,!0),i.removeAttribute("data-load-error");try{const a=await this._fetchLazyChildren(t),l=this._createSubMenu(i,a);i.appendChild(l),i.setAttribute("data-loaded",""),this.dispatchEvent(new CustomEvent("scb-menu-lazy-load",{bubbles:!0,composed:!0,detail:{item:i,nodeId:t,children:a}}))}catch(a){i.setAttribute("data-load-error",""),this.dispatchEvent(new CustomEvent("scb-menu-lazy-error",{bubbles:!0,composed:!0,detail:{item:i,nodeId:t,error:a}}))}finally{this._setItemLoading(i,!1)}}}_setItemLoading(e,i){e.loading=i,e.toggleAttribute("loading",i),i?e.setAttribute("aria-busy","true"):e.removeAttribute("aria-busy")}_hasSubMenu(e){return Array.from(e.children).some(i=>i.tagName==="SCB-SUB-MENU")}_createSubMenu(e,i){const t=document.createElement("scb-sub-menu");t.setAttribute("label",e.getAttribute("label")??"");for(const a of i)t.appendChild(this._createLazyMenuItem(a));return t}_createLazyMenuItem(e){const i=document.createElement("scb-menu-item"),t=this._getRecordValue(e,this.lazyIdField,["id","Id"]),a=this._getRecordValue(e,this.lazyLabelField,["label","Label","name","Name"]),l=this._getRecordValue(e,this.lazyHrefField,["href","Href","url","Url"]),d=this._toBoolean(this._getRecordValue(e,this.lazyHasChildrenField,["hasChildren","HasChildren"])),c=this._getRecordValue(e,this.lazyHasLinkField,["hasLink","HasLink"]),p=c==null?!!l:this._toBoolean(c);return a!=null&&i.setAttribute("label",String(a)),t!=null&&i.setAttribute("data-node-id",String(t)),d&&i.setAttribute("has-children",""),p&&l!=null&&String(l).trim()&&i.setAttribute("item-href",String(l)),i}async _fetchLazyChildren(e){const i=`${this.lazySrc}|${this.lazyIdParam}|${e}`;let t=this._lazyCache.get(i);return t||(t=fetch(this._createLazyUrl(e),{credentials:"same-origin"}).then(async a=>{if(!a.ok)throw new Error(`Kunde inte ladda menybarn (${a.status}).`);const l=await a.json();return this._normalizeChildren(l)}).catch(a=>{throw this._lazyCache.delete(i),a}),this._lazyCache.set(i,t)),t}_createLazyUrl(e){if(this.lazySrc.includes("{id}"))return this.lazySrc.split("{id}").join(encodeURIComponent(e));const i=new URL(this.lazySrc,document.baseURI);return this.lazyIdParam&&i.searchParams.set(this.lazyIdParam,e),i.toString()}_normalizeChildren(e){const i=Array.isArray(e)?e:this._getRecordValue(e,this.lazyChildrenField,["children","Children","items","Items","data","Data"]);return Array.isArray(i)?i.filter(t=>!!t&&typeof t=="object"&&!Array.isArray(t)):[]}_getRecordValue(e,i,t=[]){if(!e||typeof e!="object"||Array.isArray(e))return;const a=e,l=[i,...t].filter(Boolean);for(const d of l){if(d in a)return a[d];const c=Object.keys(a).find(p=>p.toLowerCase()===d.toLowerCase());if(c)return a[c]}}_toBoolean(e){return typeof e=="boolean"?e:typeof e=="number"?e!==0:typeof e=="string"?!/^(false|0|off|no|nej)$/i.test(e.trim()):!!e}},u.styles=k`:host{display:block;color:var(--scb-menu-panel-content-color, var(--md-sys-color-on-surface));padding-block:var(--scb-menu-padding-block, var(--scb-menu-design-panel-padding-block-medium));padding-inline:var(--scb-menu-padding-inline, var(--scb-menu-design-panel-padding-inline-medium));background:var(--scb-menu-background, var(--scb-menu-panel-surface-color, var(--md-sys-color-surface-container-low)));font-family:var(--brand-font);margin-block-start:var(--scb-menu-spacing-block-start, 0);margin-block-end:var(--scb-menu-spacing-block-end, 0);margin-inline-start:var(--scb-menu-spacing-inline-start, 0);margin-inline-end:var(--scb-menu-spacing-inline-end, 0)}:host([elevation]){box-shadow:var(--scb-menu-shadow, var(--scb-shadow-menu));border-radius:0 var(--scb-menu-design-panel-radius-medium) var(--scb-menu-design-panel-radius-medium)0}.scb-menu-label,.scb-menu-sublabel{font-family:var(--scb-menu-design-title-medium-font),sans-serif;font-size:var(--scb-menu-design-title-medium-size);line-height:var(--scb-menu-design-title-medium-line-height);font-weight:var(--scb-menu-design-title-medium-weight);letter-spacing:var(--scb-menu-design-title-medium-tracking);color:var(--scb-menu-panel-content-color, var(--md-sys-color-on-surface))}.scb-menu-sublabel{font-family:var(--scb-menu-design-supporting-medium-font),sans-serif;font-size:var(--scb-menu-design-supporting-medium-size);line-height:var(--scb-menu-design-supporting-medium-line-height);font-weight:var(--scb-menu-design-supporting-medium-weight);letter-spacing:var(--scb-menu-design-supporting-medium-tracking)}.scb-menu-label-wrapper{padding-block:var(--scb-menu-header-padding-block, var(--scb-menu-design-header-padding-block-medium));padding-inline:var(--scb-menu-header-padding-inline, var(--scb-menu-design-header-padding-inline-medium));color:inherit}scb-divider{margin-block:var(--scb-menu-divider-gap, var(--scb-menu-design-divider-gap-medium))}::slotted(scb-search){display:block;width:100%;box-sizing:border-box;padding-block:var(--scb-menu-search-padding-block, var(--scb-menu-design-search-padding-block-medium));padding-inline:var(--scb-menu-search-padding-inline, var(--scb-menu-design-search-padding-inline-medium))}.panel{contain:layout paint style}:host{--scb-menu-design-panel-padding-block-medium:var(--scb-navigation-panel-padding-block, var(--spacing-4, 12px));--scb-menu-design-panel-padding-inline-medium:var(--scb-navigation-panel-padding-inline, var(--spacing-4, 12px));--scb-menu-design-panel-radius-medium:var(--scb-navigation-panel-radius, var(--radius-large, 16px));--scb-menu-design-header-padding-block-medium:var(--scb-navigation-header-padding-block, var(--spacing-4, 12px));--scb-menu-design-header-padding-inline-medium:var(--scb-navigation-header-padding-inline, var(--spacing-4, 12px));--scb-menu-design-search-padding-block-medium:var(--scb-navigation-search-padding-block, var(--spacing-4, 12px));--scb-menu-design-search-padding-inline-medium:var(--scb-navigation-search-padding-inline, var(--spacing-4, 12px));--scb-menu-design-divider-gap-medium:var(--scb-navigation-divider-gap, var(--spacing-2, 4px));--scb-menu-design-title-medium-font:var(--scb-navigation-title-font, var(--scb-typography-label-large-font, var(--md-sys-typescale-label-large-font, var(--brand))));--scb-menu-design-title-medium-size:var(--scb-navigation-title-size, var(--scb-typography-label-large-size, var(--md-sys-typescale-label-large-size, 18px)));--scb-menu-design-title-medium-line-height:var(--scb-navigation-title-line-height, var(--scb-typography-label-large-line-height, var(--md-sys-typescale-label-large-line-height, 26px)));--scb-menu-design-title-medium-tracking:var(--scb-navigation-title-tracking, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px))));--scb-menu-design-title-medium-weight:var(--scb-navigation-title-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600))));--scb-menu-design-title-medium-letter-spacing:var(--scb-navigation-title-letter-spacing, var(--scb-navigation-title-tracking, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px)))));--scb-menu-design-title-medium-font-weight:var(--scb-navigation-title-font-weight, var(--scb-navigation-title-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600)))));--scb-menu-design-supporting-medium-font:var(--scb-navigation-supporting-font, var(--scb-typography-body-medium-font, var(--md-sys-typescale-body-medium-font, var(--brand))));--scb-menu-design-supporting-medium-size:var(--scb-navigation-supporting-size, var(--scb-typography-body-medium-size, var(--md-sys-typescale-body-medium-size, 16px)));--scb-menu-design-supporting-medium-line-height:var(--scb-navigation-supporting-line-height, var(--scb-typography-body-medium-line-height, var(--md-sys-typescale-body-medium-line-height, 24px)));--scb-menu-design-supporting-medium-tracking:var(--scb-navigation-supporting-tracking, var(--scb-typography-body-medium-tracking, var(--md-sys-typescale-body-medium-tracking, var(--tracking-03, -0.15px))));--scb-menu-design-supporting-medium-weight:var(--scb-navigation-supporting-weight, var(--scb-typography-body-medium-weight, var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400))));--scb-menu-design-supporting-medium-letter-spacing:var(--scb-navigation-supporting-letter-spacing, var(--scb-navigation-supporting-tracking, var(--scb-typography-body-medium-tracking, var(--md-sys-typescale-body-medium-tracking, var(--tracking-03, -0.15px)))));--scb-menu-design-supporting-medium-font-weight:var(--scb-navigation-supporting-font-weight, var(--scb-navigation-supporting-weight, var(--scb-typography-body-medium-weight, var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400)))))}`,u);function y(){const o=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??o,i=this.mapSpacingToken(this.spacingBottom)??o,t=this.mapSpacingToken(this.spacingLeft),a=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-menu-spacing-block-start",e):this.style.removeProperty("--scb-menu-spacing-block-start"),i?this.style.setProperty("--scb-menu-spacing-block-end",i):this.style.removeProperty("--scb-menu-spacing-block-end"),t?this.style.setProperty("--scb-menu-spacing-inline-start",t):this.style.removeProperty("--scb-menu-spacing-inline-start"),a?this.style.setProperty("--scb-menu-spacing-inline-end",a):this.style.removeProperty("--scb-menu-spacing-inline-end")}s([r({type:String})],n.prototype,"label",void 0);s([r({type:String,attribute:"sub-label"})],n.prototype,"subLabel",void 0);s([r({type:Boolean,attribute:"no-highlight-selected",reflect:!0})],n.prototype,"noHighlightSelected",void 0);s([r({type:Boolean,reflect:!0})],n.prototype,"elevation",void 0);s([r({type:String,attribute:"lazy-src"})],n.prototype,"lazySrc",void 0);s([r({type:String,attribute:"lazy-id-param"})],n.prototype,"lazyIdParam",void 0);s([r({type:String,attribute:"lazy-children-field"})],n.prototype,"lazyChildrenField",void 0);s([r({type:String,attribute:"lazy-id-field"})],n.prototype,"lazyIdField",void 0);s([r({type:String,attribute:"lazy-label-field"})],n.prototype,"lazyLabelField",void 0);s([r({type:String,attribute:"lazy-href-field"})],n.prototype,"lazyHrefField",void 0);s([r({type:String,attribute:"lazy-has-children-field"})],n.prototype,"lazyHasChildrenField",void 0);s([r({type:String,attribute:"lazy-has-link-field"})],n.prototype,"lazyHasLinkField",void 0);s([r({type:String,reflect:!0})],n.prototype,"spacing",void 0);s([r({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",void 0);s([r({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",void 0);s([r({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",void 0);s([r({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",void 0);n=s([f("scb-menu")],n);export{n as ScbMenu};
|
|
18
|
+
`}firstUpdated(e){super.firstUpdated(e),h(g,this,y).call(this)}updated(e){super.updated(e),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&h(g,this,y).call(this)}mapSpacingToken(e){if(!e)return;const i=String(e).trim();if(i)return/^\d+$/.test(i)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(i,10)))})`:i}connectedCallback(){super.connectedCallback(),window.addEventListener("scb-menu-select",this._onGlobalSelect),this.addEventListener("scb-menu-expand",this._onMenuExpand)}disconnectedCallback(){window.removeEventListener("scb-menu-select",this._onGlobalSelect),this.removeEventListener("scb-menu-expand",this._onMenuExpand),super.disconnectedCallback()}async _loadLazyChildren(e){if(!this.lazySrc)return;const i=e.detail?.item;if(!i||!this.contains(i)||!e.detail?.expanded||i.hasAttribute("data-loaded")||!i.hasAttribute("has-children")||e.detail?.lazy===!1||this._hasSubMenu(i))return;const t=i.getAttribute("data-node-id")??i.dataset.nodeId;if(t){this._setItemLoading(i,!0),i.removeAttribute("data-load-error");try{const a=await this._fetchLazyChildren(t),l=this._createSubMenu(i,a);i.appendChild(l),i.setAttribute("data-loaded",""),this.dispatchEvent(new CustomEvent("scb-menu-lazy-load",{bubbles:!0,composed:!0,detail:{item:i,nodeId:t,children:a}}))}catch(a){i.setAttribute("data-load-error",""),this.dispatchEvent(new CustomEvent("scb-menu-lazy-error",{bubbles:!0,composed:!0,detail:{item:i,nodeId:t,error:a}}))}finally{this._setItemLoading(i,!1)}}}_setItemLoading(e,i){e.loading=i,e.toggleAttribute("loading",i),i?e.setAttribute("aria-busy","true"):e.removeAttribute("aria-busy")}_hasSubMenu(e){return Array.from(e.children).some(i=>i.tagName==="SCB-SUB-MENU")}_createSubMenu(e,i){const t=document.createElement("scb-sub-menu");t.setAttribute("label",e.getAttribute("label")??"");for(const a of i)t.appendChild(this._createLazyMenuItem(a));return t}_createLazyMenuItem(e){const i=document.createElement("scb-menu-item"),t=this._getRecordValue(e,this.lazyIdField,["id","Id"]),a=this._getRecordValue(e,this.lazyLabelField,["label","Label","name","Name"]),l=this._getRecordValue(e,this.lazyHrefField,["href","Href","url","Url"]),d=this._toBoolean(this._getRecordValue(e,this.lazyHasChildrenField,["hasChildren","HasChildren"])),c=this._getRecordValue(e,this.lazyHasLinkField,["hasLink","HasLink"]),p=c==null?!!l:this._toBoolean(c);return a!=null&&i.setAttribute("label",String(a)),t!=null&&i.setAttribute("data-node-id",String(t)),d&&i.setAttribute("has-children",""),p&&l!=null&&String(l).trim()&&i.setAttribute("item-href",String(l)),i}async _fetchLazyChildren(e){const i=`${this.lazySrc}|${this.lazyIdParam}|${e}`;let t=this._lazyCache.get(i);return t||(t=fetch(this._createLazyUrl(e),{credentials:"same-origin"}).then(async a=>{if(!a.ok)throw new Error(`Kunde inte ladda menybarn (${a.status}).`);const l=await a.json();return this._normalizeChildren(l)}).catch(a=>{throw this._lazyCache.delete(i),a}),this._lazyCache.set(i,t)),t}_createLazyUrl(e){if(this.lazySrc.includes("{id}"))return this.lazySrc.split("{id}").join(encodeURIComponent(e));const i=new URL(this.lazySrc,document.baseURI);return this.lazyIdParam&&i.searchParams.set(this.lazyIdParam,e),i.toString()}_normalizeChildren(e){const i=Array.isArray(e)?e:this._getRecordValue(e,this.lazyChildrenField,["children","Children","items","Items","data","Data"]);return Array.isArray(i)?i.filter(t=>!!t&&typeof t=="object"&&!Array.isArray(t)):[]}_getRecordValue(e,i,t=[]){if(!e||typeof e!="object"||Array.isArray(e))return;const a=e,l=[i,...t].filter(Boolean);for(const d of l){if(d in a)return a[d];const c=Object.keys(a).find(p=>p.toLowerCase()===d.toLowerCase());if(c)return a[c]}}_toBoolean(e){return typeof e=="boolean"?e:typeof e=="number"?e!==0:typeof e=="string"?!/^(false|0|off|no|nej)$/i.test(e.trim()):!!e}},u.styles=k`:host{display:block;min-width:0;max-width:100%;box-sizing:border-box;color:var(--scb-menu-panel-content-color, var(--md-sys-color-on-surface));padding-block:var(--scb-menu-padding-block, var(--scb-menu-design-panel-padding-block-medium));padding-inline:var(--scb-menu-padding-inline, var(--scb-menu-design-panel-padding-inline-medium));background:var(--scb-menu-background, var(--scb-menu-panel-surface-color, var(--md-sys-color-surface-container-low)));font-family:var(--brand-font);margin-block-start:var(--scb-menu-spacing-block-start, 0);margin-block-end:var(--scb-menu-spacing-block-end, 0);margin-inline-start:var(--scb-menu-spacing-inline-start, 0);margin-inline-end:var(--scb-menu-spacing-inline-end, 0)}:host([elevation]){box-shadow:var(--scb-menu-shadow, var(--scb-shadow-menu));border-radius:0 var(--scb-menu-design-panel-radius-medium) var(--scb-menu-design-panel-radius-medium)0}.scb-menu-label,.scb-menu-sublabel{font-family:var(--scb-menu-design-title-medium-font),sans-serif;font-size:var(--scb-menu-design-title-medium-size);line-height:var(--scb-menu-design-title-medium-line-height);font-weight:var(--scb-menu-design-title-medium-weight);letter-spacing:var(--scb-menu-design-title-medium-tracking);color:var(--scb-menu-panel-content-color, var(--md-sys-color-on-surface))}.scb-menu-sublabel{font-family:var(--scb-menu-design-supporting-medium-font),sans-serif;font-size:var(--scb-menu-design-supporting-medium-size);line-height:var(--scb-menu-design-supporting-medium-line-height);font-weight:var(--scb-menu-design-supporting-medium-weight);letter-spacing:var(--scb-menu-design-supporting-medium-tracking)}.scb-menu-label-wrapper{padding-block:var(--scb-menu-header-padding-block, var(--scb-menu-design-header-padding-block-medium));padding-inline:var(--scb-menu-header-padding-inline, var(--scb-menu-design-header-padding-inline-medium));color:inherit}scb-divider{margin-block:var(--scb-menu-divider-gap, var(--scb-menu-design-divider-gap-medium))}::slotted(scb-search){display:block;width:100%;box-sizing:border-box;padding-block:var(--scb-menu-search-padding-block, var(--scb-menu-design-search-padding-block-medium));padding-inline:var(--scb-menu-search-padding-inline, var(--scb-menu-design-search-padding-inline-medium))}.panel{contain:layout paint style}:host{--scb-menu-design-panel-padding-block-medium:var(--scb-navigation-panel-padding-block, var(--spacing-4, 12px));--scb-menu-design-panel-padding-inline-medium:var(--scb-navigation-panel-padding-inline, var(--spacing-4, 12px));--scb-menu-design-panel-radius-medium:var(--scb-navigation-panel-radius, var(--radius-large, 16px));--scb-menu-design-header-padding-block-medium:var(--scb-navigation-header-padding-block, var(--spacing-4, 12px));--scb-menu-design-header-padding-inline-medium:var(--scb-navigation-header-padding-inline, var(--spacing-4, 12px));--scb-menu-design-search-padding-block-medium:var(--scb-navigation-search-padding-block, var(--spacing-4, 12px));--scb-menu-design-search-padding-inline-medium:var(--scb-navigation-search-padding-inline, var(--spacing-4, 12px));--scb-menu-design-divider-gap-medium:var(--scb-navigation-divider-gap, var(--spacing-2, 4px));--scb-menu-design-title-medium-font:var(--scb-navigation-title-font, var(--scb-typography-label-large-font, var(--md-sys-typescale-label-large-font, var(--brand))));--scb-menu-design-title-medium-size:var(--scb-navigation-title-size, var(--scb-typography-label-large-size, var(--md-sys-typescale-label-large-size, 18px)));--scb-menu-design-title-medium-line-height:var(--scb-navigation-title-line-height, var(--scb-typography-label-large-line-height, var(--md-sys-typescale-label-large-line-height, 26px)));--scb-menu-design-title-medium-tracking:var(--scb-navigation-title-tracking, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px))));--scb-menu-design-title-medium-weight:var(--scb-navigation-title-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600))));--scb-menu-design-title-medium-letter-spacing:var(--scb-navigation-title-letter-spacing, var(--scb-navigation-title-tracking, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px)))));--scb-menu-design-title-medium-font-weight:var(--scb-navigation-title-font-weight, var(--scb-navigation-title-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600)))));--scb-menu-design-supporting-medium-font:var(--scb-navigation-supporting-font, var(--scb-typography-body-medium-font, var(--md-sys-typescale-body-medium-font, var(--brand))));--scb-menu-design-supporting-medium-size:var(--scb-navigation-supporting-size, var(--scb-typography-body-medium-size, var(--md-sys-typescale-body-medium-size, 16px)));--scb-menu-design-supporting-medium-line-height:var(--scb-navigation-supporting-line-height, var(--scb-typography-body-medium-line-height, var(--md-sys-typescale-body-medium-line-height, 24px)));--scb-menu-design-supporting-medium-tracking:var(--scb-navigation-supporting-tracking, var(--scb-typography-body-medium-tracking, var(--md-sys-typescale-body-medium-tracking, var(--tracking-03, -0.15px))));--scb-menu-design-supporting-medium-weight:var(--scb-navigation-supporting-weight, var(--scb-typography-body-medium-weight, var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400))));--scb-menu-design-supporting-medium-letter-spacing:var(--scb-navigation-supporting-letter-spacing, var(--scb-navigation-supporting-tracking, var(--scb-typography-body-medium-tracking, var(--md-sys-typescale-body-medium-tracking, var(--tracking-03, -0.15px)))));--scb-menu-design-supporting-medium-font-weight:var(--scb-navigation-supporting-font-weight, var(--scb-navigation-supporting-weight, var(--scb-typography-body-medium-weight, var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400)))))}`,u);function y(){const o=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??o,i=this.mapSpacingToken(this.spacingBottom)??o,t=this.mapSpacingToken(this.spacingLeft),a=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-menu-spacing-block-start",e):this.style.removeProperty("--scb-menu-spacing-block-start"),i?this.style.setProperty("--scb-menu-spacing-block-end",i):this.style.removeProperty("--scb-menu-spacing-block-end"),t?this.style.setProperty("--scb-menu-spacing-inline-start",t):this.style.removeProperty("--scb-menu-spacing-inline-start"),a?this.style.setProperty("--scb-menu-spacing-inline-end",a):this.style.removeProperty("--scb-menu-spacing-inline-end")}s([r({type:String})],n.prototype,"label",void 0);s([r({type:String,attribute:"sub-label"})],n.prototype,"subLabel",void 0);s([r({type:Boolean,attribute:"no-highlight-selected",reflect:!0})],n.prototype,"noHighlightSelected",void 0);s([r({type:Boolean,reflect:!0})],n.prototype,"elevation",void 0);s([r({type:String,attribute:"lazy-src"})],n.prototype,"lazySrc",void 0);s([r({type:String,attribute:"lazy-id-param"})],n.prototype,"lazyIdParam",void 0);s([r({type:String,attribute:"lazy-children-field"})],n.prototype,"lazyChildrenField",void 0);s([r({type:String,attribute:"lazy-id-field"})],n.prototype,"lazyIdField",void 0);s([r({type:String,attribute:"lazy-label-field"})],n.prototype,"lazyLabelField",void 0);s([r({type:String,attribute:"lazy-href-field"})],n.prototype,"lazyHrefField",void 0);s([r({type:String,attribute:"lazy-has-children-field"})],n.prototype,"lazyHasChildrenField",void 0);s([r({type:String,attribute:"lazy-has-link-field"})],n.prototype,"lazyHasLinkField",void 0);s([r({type:String,reflect:!0})],n.prototype,"spacing",void 0);s([r({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",void 0);s([r({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",void 0);s([r({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",void 0);s([r({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",void 0);n=s([f("scb-menu")],n);export{n as ScbMenu};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.238",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -549,5 +549,5 @@
|
|
|
549
549
|
"./scb-viz/*": null,
|
|
550
550
|
"./mvc/*": "./mvc/*"
|
|
551
551
|
},
|
|
552
|
-
"buildHash": "
|
|
552
|
+
"buildHash": "D1BB030A5E50F79B37580FC4A01FFFFF337C3D1F5370E928D21490623AA655DC"
|
|
553
553
|
}
|
|
@@ -105,6 +105,8 @@ var c, l = {
|
|
|
105
105
|
--scb-menu-item-text-line-height: var(--scb-menu-item-design-text-medium-line-height);
|
|
106
106
|
--scb-menu-item-text-letter-spacing: var(--scb-menu-item-design-text-medium-letter-spacing);
|
|
107
107
|
--scb-menu-item-text-font-weight: var(--scb-menu-item-design-text-medium-font-weight);
|
|
108
|
+
display: block;
|
|
109
|
+
min-width: 0;
|
|
108
110
|
}
|
|
109
111
|
|
|
110
112
|
:host([expanded]) {
|
|
@@ -118,10 +120,12 @@ var c, l = {
|
|
|
118
120
|
display: flex;
|
|
119
121
|
align-items: center;
|
|
120
122
|
position: relative;
|
|
123
|
+
min-width: 0;
|
|
121
124
|
}
|
|
122
125
|
|
|
123
126
|
.scb-menu-label-text {
|
|
124
|
-
|
|
127
|
+
flex: 1 1 0;
|
|
128
|
+
min-width: 0;
|
|
125
129
|
display: block;
|
|
126
130
|
background: transparent;
|
|
127
131
|
border: 0;
|
|
@@ -153,12 +157,14 @@ var c, l = {
|
|
|
153
157
|
.scb-menu-click {
|
|
154
158
|
display: flex;
|
|
155
159
|
align-items: center;
|
|
160
|
+
min-width: 0;
|
|
156
161
|
gap: var(--scb-menu-item-gap);
|
|
157
162
|
padding-block: var(--scb-menu-item-padding-y);
|
|
158
163
|
padding-inline: var(--scb-menu-item-padding-x);
|
|
159
164
|
border-radius: var(--scb-menu-item-radius);
|
|
160
165
|
position: relative;
|
|
161
166
|
overflow: hidden;
|
|
167
|
+
overflow-wrap: anywhere;
|
|
162
168
|
color: var(--scb-menu-panel-content-color, var(--md-sys-color-on-surface));
|
|
163
169
|
}
|
|
164
170
|
.scb-menu-click.has-icon {
|
package/scb-menu/scb-menu.js
CHANGED
|
@@ -26,6 +26,9 @@ var s = class extends t {
|
|
|
26
26
|
*/
|
|
27
27
|
:host {
|
|
28
28
|
display: block;
|
|
29
|
+
min-width: 0;
|
|
30
|
+
max-width: 100%;
|
|
31
|
+
box-sizing: border-box;
|
|
29
32
|
color: var(--scb-menu-panel-content-color, var(--md-sys-color-on-surface));
|
|
30
33
|
padding-block: var(--scb-menu-padding-block, var(--scb-menu-design-panel-padding-block-medium));
|
|
31
34
|
padding-inline: var(--scb-menu-padding-inline, var(--scb-menu-design-panel-padding-inline-medium));
|
package/scb-wc.bundle.js
CHANGED
|
@@ -13685,6 +13685,8 @@
|
|
|
13685
13685
|
--scb-menu-item-text-line-height: var(--scb-menu-item-design-text-medium-line-height);
|
|
13686
13686
|
--scb-menu-item-text-letter-spacing: var(--scb-menu-item-design-text-medium-letter-spacing);
|
|
13687
13687
|
--scb-menu-item-text-font-weight: var(--scb-menu-item-design-text-medium-font-weight);
|
|
13688
|
+
display: block;
|
|
13689
|
+
min-width: 0;
|
|
13688
13690
|
}
|
|
13689
13691
|
|
|
13690
13692
|
:host([expanded]) {
|
|
@@ -13698,10 +13700,12 @@
|
|
|
13698
13700
|
display: flex;
|
|
13699
13701
|
align-items: center;
|
|
13700
13702
|
position: relative;
|
|
13703
|
+
min-width: 0;
|
|
13701
13704
|
}
|
|
13702
13705
|
|
|
13703
13706
|
.scb-menu-label-text {
|
|
13704
|
-
|
|
13707
|
+
flex: 1 1 0;
|
|
13708
|
+
min-width: 0;
|
|
13705
13709
|
display: block;
|
|
13706
13710
|
background: transparent;
|
|
13707
13711
|
border: 0;
|
|
@@ -13733,12 +13737,14 @@
|
|
|
13733
13737
|
.scb-menu-click {
|
|
13734
13738
|
display: flex;
|
|
13735
13739
|
align-items: center;
|
|
13740
|
+
min-width: 0;
|
|
13736
13741
|
gap: var(--scb-menu-item-gap);
|
|
13737
13742
|
padding-block: var(--scb-menu-item-padding-y);
|
|
13738
13743
|
padding-inline: var(--scb-menu-item-padding-x);
|
|
13739
13744
|
border-radius: var(--scb-menu-item-radius);
|
|
13740
13745
|
position: relative;
|
|
13741
13746
|
overflow: hidden;
|
|
13747
|
+
overflow-wrap: anywhere;
|
|
13742
13748
|
color: var(--scb-menu-panel-content-color, var(--md-sys-color-on-surface));
|
|
13743
13749
|
}
|
|
13744
13750
|
.scb-menu-click.has-icon {
|
|
@@ -14030,6 +14036,9 @@
|
|
|
14030
14036
|
*/
|
|
14031
14037
|
:host {
|
|
14032
14038
|
display: block;
|
|
14039
|
+
min-width: 0;
|
|
14040
|
+
max-width: 100%;
|
|
14041
|
+
box-sizing: border-box;
|
|
14033
14042
|
color: var(--scb-menu-panel-content-color, var(--md-sys-color-on-surface));
|
|
14034
14043
|
padding-block: var(--scb-menu-padding-block, var(--scb-menu-design-panel-padding-block-medium));
|
|
14035
14044
|
padding-inline: var(--scb-menu-padding-inline, var(--scb-menu-design-panel-padding-inline-medium));
|