scb-wc 0.1.11 → 0.1.13

package/mvc/components/scb-options-menu/scb-options-menu.js

@@ -1 +1,88 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-options-menu/scb-options-menu.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(e,r,c){try{customElements.get(e)||o(e,r,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+import{_ as y,b as v,g as x,h as r,y as E}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as n}from"../../vendor/decorate.js";import"./scb-options-menu-item.js";import"./scb-options-sub-menu.js";(function(){try{var g=typeof globalThis<"u"?globalThis:window;if(!g.__scb_ce_guard_installed__){g.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,i,a){try{customElements.get(t)||e(t,i,a)}catch(l){var o=String(l||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var m,s=(m=class extends y{constructor(...e){super(...e),this.open=!1,this.size="large",this.inSb=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.__lastTriggerEl=null,this.__onViewportChange=()=>{this.open&&this.__positionToTrigger()},this.__onDocumentClick=t=>{const i=this.__getActionFromEvent(t);if(i){i==="open"&&(this.__setOpen(!0),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))),i==="close"&&(this.__setOpen(!1),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))),i==="toggle"&&(this.__setOpen(!this.open),this.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,composed:!0}))),t.stopPropagation();return}if(!this.inSb&&this.open&&!this.isClickInScbMenu(t)){this.__setOpen(!1);return}},this.__onDocumentKeydown=t=>{if(this.open&&t.key==="Escape"){this.__setOpen(!1);return}}}firstUpdated(){this.__applySpacing()}render(){return E`
+      <div
+        role="menu"
+        class="scb-options-menu-panel${this.open?" open":""}"
+      >
+        <slot></slot>
+      </div>
+    `}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0),window.addEventListener("resize",this.__onViewportChange,{passive:!0}),window.addEventListener("scroll",this.__onViewportChange,{passive:!0,capture:!0})}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),window.removeEventListener("resize",this.__onViewportChange),window.removeEventListener("scroll",this.__onViewportChange,!0),super.disconnectedCallback()}__setOpen(e){this.open=e}__getActionFromEvent(e){if(!this.id)return null;const t=e.composedPath();for(const i of t)if(i instanceof Element){if(i.getAttribute("data-menu-open")===this.id)return this.__lastTriggerEl=i,"open";if(i.getAttribute("data-menu-close")===this.id)return this.__lastTriggerEl=i,"close";if(i.getAttribute("data-menu-toggle")===this.id)return this.__lastTriggerEl=i,"toggle";if(i.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=i,"toggle"}return null}isClickInScbMenu(e){return e.composedPath().some(t=>t instanceof Element&&(t.tagName==="SCB-OPTIONS-MENU"||t.tagName==="SCB-OPTIONS-SUB-MENU"))}updated(e){e.has("open")&&(this.__applyOpenSideEffects(),this.open?this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&this.__applySpacing()}__applyOpenSideEffects(){this.__updateTriggersExpanded(),this.open?this.__positionToTrigger():this.__restoreFocusToTrigger()}__positionToTrigger(){if(!this.open||!this.__lastTriggerEl)return;const e=this.__lastTriggerEl,t=this.shadowRoot?.querySelector(".scb-options-menu-panel");t&&requestAnimationFrame(()=>{if(!this.open)return;const i=e.getBoundingClientRect(),a=t.getBoundingClientRect(),o=window.innerWidth,l=window.innerHeight,p=8,d=4;let c=i.left,u=i.bottom+d;const h=a.width,b=a.height;c+h>o-p&&(c=Math.max(p,o-p-h)),c<p&&(c=p);let _="top";if(u+b>l-p){const f=i.top-d-b;f>=p&&(u=f,_="bottom")}this.style.position="fixed",this.style.left=`${Math.round(c)}px`,this.style.top=`${Math.round(u)}px`,this.style.setProperty("--scb-options-menu-transform-origin",_)})}__restoreFocusToTrigger(){this.__lastTriggerEl&&requestAnimationFrame(()=>{this.__lastTriggerEl?.focus?.()})}__updateTriggersExpanded(){if(!this.id)return;const e=String(this.open),t=i=>{i.getAttribute("aria-controls")===this.id&&i.setAttribute("aria-expanded",e)};this.__lastTriggerEl&&t(this.__lastTriggerEl),document.querySelectorAll(`[aria-controls="${this.id}"], [data-menu-open="${this.id}"], [data-menu-close="${this.id}"], [data-menu-toggle="${this.id}"]`).forEach(t)}__applySpacing(){const e=this.__mapSpacingToken(this.spacing),t=this.__mapSpacingToken(this.spacingTop)??e,i=this.__mapSpacingToken(this.spacingBottom)??e,a=this.__mapSpacingToken(this.spacingLeft),o=this.__mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-options-menu-spacing-block-start",t):this.style.removeProperty("--scb-options-menu-spacing-block-start"),i?this.style.setProperty("--scb-options-menu-spacing-block-end",i):this.style.removeProperty("--scb-options-menu-spacing-block-end"),a?this.style.setProperty("--scb-options-menu-spacing-inline-start",a):this.style.removeProperty("--scb-options-menu-spacing-inline-start"),o?this.style.setProperty("--scb-options-menu-spacing-inline-end",o):this.style.removeProperty("--scb-options-menu-spacing-inline-end")}__mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}},m.styles=v`
+    :host {
+      position: absolute;
+      display: block;
+      width: fit-content;
+      font-family: var(--brand-font);
+      --scb-options-menu-max-width: 300px;
+      --scb-options-menu-max-height: 600px;
+      --scb-options-menu-panel-padding-block: var(--spacing-3, 8px);
+      --scb-options-menu-item-padding-inline: var(--spacing-5, 16px);
+      --scb-options-menu-item-padding-block: var(--spacing-3, 8px);
+      --scb-options-menu-item-gap: var(--spacing-4, 12px);
+      --scb-options-menu-item-min-height: 56px;
+      --scb-options-menu-label-font-size: var(--md-sys-typescale-body-large-size);
+      --scb-options-menu-label-line-height: var(--md-sys-typescale-body-large-line-height);
+      --scb-options-menu-label-letter-spacing: var(--md-sys-typescale-body-large-tracking);
+      --scb-options-menu-icon-size: 24px;
+      --scb-options-sub-menu-offset-top: -44px;
+      z-index: 1000;
+
+      margin-block-start: var(--scb-options-menu-spacing-block-start, 0);
+      margin-block-end: var(--scb-options-menu-spacing-block-end, 0);
+      margin-inline-start: var(--scb-options-menu-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-options-menu-spacing-inline-end, 0);
+    }
+
+    :host([size='medium']) {
+      --scb-options-menu-panel-padding-block: var(--spacing-2, 4px);
+      --scb-options-menu-item-padding-inline: var(--spacing-5, 16px);
+      --scb-options-menu-item-padding-block: var(--spacing-2, 4px);
+      --scb-options-menu-item-gap: var(--spacing-3, 8px);
+      --scb-options-menu-item-min-height: 48px;
+      --scb-options-menu-label-font-size: var(--md-sys-typescale-body-medium-size);
+      --scb-options-menu-label-line-height: var(--md-sys-typescale-body-medium-line-height);
+      --scb-options-menu-label-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+      --scb-options-menu-icon-size: 20px;
+      --scb-options-sub-menu-offset-top: -40px;
+    }
+
+    :host([size='small']) {
+      --scb-options-menu-panel-padding-block: var(--spacing-1, 2px);
+      --scb-options-menu-item-padding-inline: var(--spacing-4, 12px);
+      --scb-options-menu-item-padding-block: var(--spacing-2, 4px);
+      --scb-options-menu-item-gap: var(--spacing-3, 8px);
+      --scb-options-menu-item-min-height: 40px;
+      --scb-options-menu-label-font-size: var(--md-sys-typescale-body-small-size);
+      --scb-options-menu-label-line-height: var(--md-sys-typescale-body-small-line-height);
+      --scb-options-menu-label-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+      --scb-options-menu-icon-size: 18px;
+      --scb-options-sub-menu-offset-top: -32px;
+    }
+
+    :host > .scb-options-menu-panel {
+      padding: var(--scb-options-menu-panel-padding-block) 0;
+      color: var(--md-sys-color-on-surface);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      background: var(--md-sys-color-surface, #FFF);
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+      background: var(--md-sys-color-surface, #FFF);
+      opacity: 0;
+      max-height: 0;
+      transform: scaleY(0.8);
+      transform-origin: var(--scb-options-menu-transform-origin, top);
+      transition:
+        opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1),
+        transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
+      will-change: opacity, transform;
+
+    }
+    :host > .scb-options-menu-panel.open {
+      opacity: 1;
+      transform: scaleY(1);
+      max-width: var(--scb-options-menu-max-width);
+      max-height: var(--scb-options-menu-max-height);
+      min-width: 112px;
+      overflow: visible;
+      transition:
+        opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1),
+        transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
+    }
+  `,m);n([r({type:Boolean,reflect:!0})],s.prototype,"open",void 0);n([r({type:String,reflect:!0})],s.prototype,"size",void 0);n([r({type:Boolean,attribute:!1})],s.prototype,"inSb",void 0);n([r({type:String,reflect:!0})],s.prototype,"spacing",void 0);n([r({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",void 0);n([r({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",void 0);n([r({type:String,attribute:"spacing-left",reflect:!0})],s.prototype,"spacingLeft",void 0);n([r({type:String,attribute:"spacing-right",reflect:!0})],s.prototype,"spacingRight",void 0);s=n([x("scb-options-menu")],s);

package/mvc/components/scb-options-menu/scb-options-sub-menu.js

@@ -1 +1,34 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-options-menu/scb-options-sub-menu.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(e,r,c){try{customElements.get(e)||o(e,r,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+import{_ as d,b as p,g as b,h as l,y as m}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as a}from"../../vendor/decorate.js";(function(){try{var s=typeof globalThis<"u"?globalThis:window;if(!s.__scb_ce_guard_installed__){s.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,u,h){try{customElements.get(e)||t(e,u,h)}catch(r){var o=String(r||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var i,n=(i=class extends d{constructor(...t){super(...t),this.open=!1,this._show=()=>{this.setAttribute("open",""),this.open=!0},this._hide=e=>{this.removeAttribute("open"),this.open=!1,e&&e.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("show-submenu",this._show),this.addEventListener("showsubmenu",this._show),this.addEventListener("hide-submenu",this._hide),this.addEventListener("hidesubmenu",this._hide)}disconnectedCallback(){this.removeEventListener("show-submenu",this._show),this.removeEventListener("showsubmenu",this._show),this.removeEventListener("hide-submenu",this._hide),this.removeEventListener("hidesubmenu",this._hide),super.disconnectedCallback()}firstUpdated(){let t=0,e=this.parentElement;for(;e;)e.tagName==="SCB-OPTIONS-SUB-MENU"&&t++,e=e.parentElement;t%2===1?this.setAttribute("open-left",""):this.removeAttribute("open-left")}render(){return m`
+      <div role="menu" class="submenu${this.open?" open":""}">
+        <slot></slot>
+      </div>
+    `}},i.styles=p`
+    :host {
+      display: block;
+      position: relative;
+        --scb-options-sub-menu-max-width: 300px;
+        --scb-options-sub-menu-max-height: 600px;
+    }
+    .submenu {
+        max-width: var(--scb-options-sub-menu-max-width);
+        max-height: var(--scb-options-sub-menu-max-height);
+      min-width: 112px;
+      display: none;
+      position: absolute;
+      left: 100%;
+      top: var(--scb-options-sub-menu-offset-top, -44px);
+      z-index: 100;
+      padding: var(--scb-options-menu-panel-padding-block, var(--spacing-3, 8px)) 0;
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      background: var(--md-sys-color-surface, #FFF);
+      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.20), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
+    }
+    :host([open-left]) .submenu {
+      left: auto;
+      right: 100%;
+    }
+    :host([open]) .submenu,
+    .submenu.open {
+      display: block;
+    }
+  `,i);a([l({type:Boolean,reflect:!0})],n.prototype,"open",void 0);n=a([b("scb-options-sub-menu")],n);

package/mvc/components/scb-overlay/scb-overlay.js

@@ -1 +1,49 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-overlay/scb-overlay.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,o,c){try{customElements.get(e)||r(e,o,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+import{_ as L,b as w,g as z,h as f,v as g,y as A}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as u}from"../../vendor/decorate.js";import{n as C,t as r}from"../../vendor/assertClassBrand.js";import{n as k,r as S,t as y}from"../../vendor/classPrivateFieldGet2.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(t,a,h){try{customElements.get(t)||s(t,a,h)}catch(p){var d=String(p||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var n,v,_,c,e,l=(n=new WeakSet,v=new WeakMap,_=new WeakMap,c=class extends L{constructor(...s){super(...s),C(this,n),S(this,v,void 0),S(this,_,void 0),this.open=!1,this.variant="scrim",this.isStatic=!1,this.ariaLabel="",this.__lastTriggerEl=null,k(v,this,t=>{this.isStatic||r(n,this,O).call(this,t)||r(n,this,x).call(this)}),k(_,this,t=>{this.open&&t.key==="Escape"&&r(n,this,x).call(this)})}static __handleDocClick(s){const t=s.composedPath();for(const a of t){if(!(a instanceof Element))continue;const h=a.getAttribute("data-overlay-open"),d=a.getAttribute("data-overlay-close"),p=a.getAttribute("data-overlay-toggle"),E=a.getAttribute("aria-controls"),m=h||d||p||E;if(!m)continue;const o=e.__instances.get(m);if(!o){e.__instances.delete(m);continue}o.__lastTriggerEl=a,h?r(n,o,b).call(o,!0):d?r(n,o,b).call(o,!1):r(n,o,b).call(o,!o.open);break}}static __ensureDocListener(){e.__docListenerAttached||(document.addEventListener("click",e.__handleDocClick,!0),e.__docListenerAttached=!0)}static __maybeRemoveDocListener(){!e.__docListenerAttached||e.__instances.size>0||(document.removeEventListener("click",e.__handleDocClick,!0),e.__docListenerAttached=!1)}render(){return this.open?A`
+      <div class="scrim" @click=${y(v,this)}>
+        <div class="content" role="dialog" aria-modal="true" aria-label="${this.ariaLabel||g}">
+          <slot></slot>
+        </div>
+      </div>
+    `:g}connectedCallback(){super.connectedCallback(),this.id&&e.__instances.set(this.id,this),e.__ensureDocListener(),window.addEventListener("keydown",y(_,this))}updated(s){s.has("open")&&r(n,this,D).call(this)}disconnectedCallback(){this.id&&e.__instances.delete(this.id),e.__maybeRemoveDocListener(),window.removeEventListener("keydown",y(_,this)),super.disconnectedCallback()}},e=c,c.__instances=new Map,c.__docListenerAttached=!1,c.styles=w`
+    :host {
+      position: fixed;
+      inset: 0;
+      z-index: var(--scb-overlay-z-index, 1000);
+      display: none;
+      box-sizing: border-box;
+    }
+
+    :host([open]) {
+      display: block;
+    }
+
+    .scrim {
+      display: grid;
+      place-items: center;
+      inline-size: 100%;
+      block-size: 100%;
+      padding: var(--scb-overlay-padding, var(--spacing-6, 24px));
+      background: var(
+        --scb-overlay-backdrop,
+        color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent)
+      );
+      box-sizing: border-box;
+    }
+
+    :host([variant='solid']) .scrim {
+      background: var(--md-sys-color-surface);
+    }
+
+    .content {
+      position: relative;
+      max-inline-size: 100%;
+      max-block-size: 100%;
+      box-sizing: border-box;
+    }
+
+    .content ::slotted(*) {
+      margin: auto;
+      max-inline-size: 100%;
+      max-block-size: 100%;
+    }
+  `,c);function b(i){this.open=i}function x(){this.open&&(this.isStatic||(r(n,this,b).call(this,!1),this.dispatchEvent(new CustomEvent("scb-overlay-dismiss",{bubbles:!0,composed:!0}))))}function O(i){const s=this.renderRoot.querySelector("slot");if(!(s instanceof HTMLSlotElement))return!1;const t=i.composedPath();return s.assignedNodes({flatten:!0}).some(a=>t.includes(a))}function D(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-overlay-toggle="${this.id}"], [data-overlay-open="${this.id}"], [data-overlay-close="${this.id}"]`).forEach(i=>{i.hasAttribute("aria-controls")&&i.setAttribute("aria-expanded",String(this.open))})}u([f({type:Boolean,reflect:!0})],l.prototype,"open",void 0);u([f({type:String,reflect:!0})],l.prototype,"variant",void 0);u([f({type:Boolean,reflect:!0,attribute:"static"})],l.prototype,"isStatic",void 0);u([f({type:String,attribute:"aria-label"})],l.prototype,"ariaLabel",void 0);l=e=u([z("scb-overlay")],l);

package/mvc/components/scb-pagination/scb-pagination.js

@@ -1 +1,312 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-pagination/scb-pagination.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(e,r,c){try{customElements.get(e)||o(e,r,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+import"../../vendor/vendor-material.js";import{_ as y,b as x,g as w,h as c,y as n}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as r}from"../../vendor/decorate.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-link/scb-link.js";(function(){try{var d=typeof globalThis<"u"?globalThis:window;if(!d.__scb_ce_guard_installed__){d.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(t,s,a){try{customElements.get(t)||i(t,s,a)}catch(g){var l=String(g||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw g}}}}catch{}})();var h,o=(h=class extends y{constructor(...i){super(...i),this.variant="icon-text",this.page=1,this.totalPages=0,this.pagingHref="",this.baseUri="",this.paginationAriaLabel="Paginering",this.currentAriaLabel="Nuvarande sida, ",this.pagingNumberAriaLabel="Gå till sida ",this.isNarrow=window.innerWidth<=768,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._onResize=()=>{this.isNarrow=window.innerWidth<=768}}_emitPageChange(i){const t={page:i};this.dispatchEvent(new CustomEvent("page-change",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("pagechange",{detail:t,bubbles:!0,composed:!0}))}_getPagingHref(i){if(!this.pagingHref)return;const t=(this.baseUri||"").trim(),s=t||window.location.href,a=new URL(s,window.location.href),l=this.pagingHref.trim().replace(/^[?&]/,"").split("=")[0];if(l)return a.searchParams.delete(l),a.searchParams.set(l,String(i)),/^https?:\/\//i.test(t)?a.toString():`${a.pathname}${a.search}${a.hash}`}_handlePageSelection(i,t){!this.pagingHref&&t&&t.preventDefault(),this.page=i,this._emitPageChange(i)}_prevPage(i){if(this.page<=1){!this.pagingHref&&i&&i.preventDefault();return}this._handlePageSelection(this.page-1,i)}_nextPage(i){if(this.page>=this.totalPages){!this.pagingHref&&i&&i.preventDefault();return}this._handlePageSelection(this.page+1,i)}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._onResize),this._onResize()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._onResize)}mapSpacingToken(i){if(i==null)return;const t=String(i).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}__applySpacing(){const i=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??i,s=this.mapSpacingToken(this.spacingBottom)??i,a=this.mapSpacingToken(this.spacingLeft),l=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-pagination-spacing-block-start",t):this.style.removeProperty("--scb-pagination-spacing-block-start"),s?this.style.setProperty("--scb-pagination-spacing-block-end",s):this.style.removeProperty("--scb-pagination-spacing-block-end"),a?this.style.setProperty("--scb-pagination-spacing-inline-start",a):this.style.removeProperty("--scb-pagination-spacing-inline-start"),l?this.style.setProperty("--scb-pagination-spacing-inline-end",l):this.style.removeProperty("--scb-pagination-spacing-inline-end")}firstUpdated(){this.__applySpacing()}updated(i){super.updated(i),(i.has("spacing")||i.has("spacingTop")||i.has("spacingBottom")||i.has("spacingLeft")||i.has("spacingRight"))&&this.__applySpacing()}render(){if(this.totalPages===0)return null;const i=this.variant?`${this.variant.toLowerCase()}`:"",t=[],{page:s,totalPages:a}=this,l=window.innerWidth<=768,g=l?1:2,b=this._getPagingHref(Math.max(1,this.page-1)),u=this._getPagingHref(Math.min(this.totalPages,this.page+1)),f=this.pagingHref?this.variant==="icon"?n`<a
+              class="paging-action-link"
+              href=${b}
+              @click=${this._prevPage}
+              aria-label="Föregående sida"
+              aria-disabled=${this.page===1?"true":"false"}
+            >
+              <scb-icon-button
+                icon="chevron_left"
+                ?disabled=${this.page===1}
+                aria-label="Föregående sida"
+              ></scb-icon-button>
+            </a>`:n`<a
+              class="paging-action-link"
+              href=${b}
+              @click=${this._prevPage}
+              aria-label="Föregående sida"
+              aria-disabled=${this.page===1?"true":"false"}
+            >
+              <scb-button
+                variant="text"
+                label="Föregående"
+                icon="chevron_left"
+                ?disabled=${this.page===1}
+                aria-label="Föregående sida"
+              ></scb-button>
+            </a>`:this.variant==="icon"?n`<scb-icon-button
+              icon="chevron_left"
+              @click=${this._prevPage}
+              ?disabled=${this.page===1}
+              aria-label="Föregående sida"
+            ></scb-icon-button>`:n`<scb-button
+              variant="text"
+              label="Föregående"
+              icon="chevron_left"
+              @click=${this._prevPage}
+              ?disabled=${this.page===1}
+              aria-label="Föregående sida"
+            ></scb-button>`,m=this.pagingHref?this.variant==="icon"?n`<a
+              class="paging-action-link"
+              href=${u}
+              @click=${this._nextPage}
+              aria-label="Nästa sida"
+              aria-disabled=${this.page===this.totalPages?"true":"false"}
+            >
+              <scb-icon-button
+                icon="chevron_right"
+                ?disabled=${this.page===this.totalPages}
+                aria-label="Nästa sida"
+              ></scb-icon-button>
+            </a>`:n`<a
+              class="paging-action-link"
+              href=${u}
+              @click=${this._nextPage}
+              aria-label="Nästa sida"
+              aria-disabled=${this.page===this.totalPages?"true":"false"}
+            >
+              <scb-button
+                variant="text"
+                label="Nästa"
+                icon="chevron_right"
+                iconPosition="right"
+                ?disabled=${this.page===this.totalPages}
+                aria-label="Nästa sida"
+                trailing-icon
+              ></scb-button>
+            </a>`:this.variant==="icon"?n`<scb-icon-button
+              icon="chevron_right"
+              @click=${this._nextPage}
+              ?disabled=${this.page===this.totalPages}
+              aria-label="Nästa sida"
+            ></scb-icon-button>`:n`<scb-button
+              variant="text"
+              label="Nästa"
+              icon="chevron_right"
+              iconPosition="right"
+              @click=${this._nextPage}
+              ?disabled=${this.page===this.totalPages}
+              aria-label="Nästa sida"
+              trailing-icon
+            ></scb-button>`,p=e=>e===s?n`
+            <li>
+              <span
+                class="page-number active"
+                aria-current="page"
+                aria-label="${this.currentAriaLabel} ${e}"
+                >${e}</span
+              >
+            </li>
+          `:n`
+            <li>
+              <scb-link
+                class="page-number${e===s?" active":""}"
+                @click=${v=>this._handlePageSelection(e,v)}
+                aria-current=${e===s?"page":void 0}
+                aria-label="${this.pagingNumberAriaLabel} ${e}"
+                href=${this._getPagingHref(e)}
+                ?disabled=${e===s}
+                >${e}</scb-link
+              >
+            </li>
+          `;if(a<=8)for(let e=1;e<=a;e++)t.push(p(e));else if(t.push(p(1)),s<=4&&!l){for(let e=2;e<=5;e++)t.push(p(e));a>6?(t.push(n`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),t.push(p(a))):a===6&&t.push(p(a))}else if(s<=3&&l){for(let e=2;e<=3;e++)t.push(p(e));a>4?(t.push(n`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),t.push(p(a))):a===4&&t.push(p(a))}else if(s>=a-(g+1)){t.push(n`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let e=a-g*2;e<=a;e++)e>1&&t.push(p(e))}else{t.push(n`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let e=s-g;e<=s+g;e++)e>1&&e<a&&t.push(p(e));t.push(n`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),t.push(p(a))}return l?n`
+        <nav aria-label="${this.paginationAriaLabel}" class="pagination ${i}">
+          <div class="pagination-row">
+            <div class="prev">
+              ${f}
+            </div>
+            <ol>
+              ${t}
+            </ol>
+          </div>
+          <div class="next">
+            ${m}
+          </div>
+        </nav>
+      `:n`
+      <nav aria-label="${this.paginationAriaLabel}" class="pagination ${i}">
+        <div class="pagination-row">
+          <div class="prev">
+            ${f}
+          </div>
+          <ol>
+            ${t}
+          </ol>
+          <div class="next">
+            ${m}
+          </div>
+        </div>
+      </nav>
+    `}},h.styles=[x`
+      :host {
+        display: block;
+        width: 100%;
+
+        margin-block-start: var(--scb-pagination-spacing-block-start, 0);
+        margin-block-end: var(--scb-pagination-spacing-block-end, 0);
+        margin-inline-start: var(--scb-pagination-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-pagination-spacing-inline-end, 0);
+      }
+
+      :host .pagination {
+        --md-text-button-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-pressed-state-layer-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-focus-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-hover-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-pressed-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-hover-state-layer-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-label-text-weight: var(--weight-regular, 400);
+        --md-text-button-label-text-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+        --md-text-button-label-text-size: var(--md-sys-typescale-body-medium-size, 16px);
+        --md-text-button-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-focus-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-hover-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-pressed-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --scb-link-decoration: none;
+        --scb-link-color: var(--md-sys-color-on-surface, #0F0865);
+
+        scb-link.page-number a {
+          cursor: pointer;
+          text-decoration: none;
+          display: inline-flex;
+        }
+      }
+
+      .pagination {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+      }
+      .pagination-row {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4px;
+      }
+      .pagination-row .prev {
+        display: flex;
+        justify-content: flex-start;
+        width: auto;
+      }
+      .pagination-row ol {
+        width: auto;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        gap: 4px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      .pagination-row ol li {
+        min-width: 40px;
+        min-height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .pagination-row .next {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        width: auto;
+        margin-top: 0;
+      }
+      scb-link.page-number a {
+        cursor: pointer;
+        text-decoration: none;
+        display: inline-flex;
+      }
+      .pagination-row ol li scb-link.page-number {
+        --scb-link-focus-ring-gap: 0;
+        --scb-link-decoration: none;
+        --scb-link-hover-thickness: 1px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 999px;
+      }
+      .pagination-row ol li scb-link.page-number::part(anchor) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 999px;
+        color: var(--md-sys-color-on-surface, #0F0865);
+        cursor: pointer;
+        text-decoration: none;
+        transition: background-color 120ms linear;
+      }
+      .pagination-row ol li scb-link.page-number::part(anchor):hover {
+        background: color-mix(
+          in srgb,
+          var(--md-text-button-hover-state-layer-color, var(--md-sys-color-on-surface, #0F0865)) 8%,
+          transparent
+        );
+      }
+      .pagination-row ol li scb-link.page-number::part(anchor):focus-visible {
+        background: color-mix(
+          in srgb,
+          var(--md-sys-color-on-surface, #0F0865) 10%,
+          transparent
+        );
+      }
+      .page-number.active {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background: var(--md-sys-color-primary, #1F44FF);
+        color: var(--md-sys-color-on-primary, #FFF);
+        text-align: center;
+        width: 40px;
+        height: 40px;
+      }
+      .page-number.active {
+        font-family: var(--brand-font, 'Inter', sans-serif);
+      }
+      .ellipsis {
+        margin: 0 4px;
+        color: #888;
+        user-select: none;
+        pointer-events: none;
+      }
+      scb-button[disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      .paging-action-link {
+        display: inline-flex;
+        text-decoration: none;
+      }
+      .paging-action-link[aria-disabled='true'] {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      @media (max-width: 768px) {
+        .pagination .prev {
+          display: flex;
+          justify-content: flex-start;
+        }
+        .pagination .next {
+          width: 100%;
+          margin-top: 8px;
+        }
+      }
+
+      @media (max-width: 390px) {
+        .pagination-row {
+          flex-direction: column;
+          gap: 0;
+        }
+        .pagination-row .prev {
+          width: 100%;
+          margin-bottom: 8px;
+          align-items: center;
+        }
+        .pagination-row ol {
+          width: 100%;
+          align-items: center;
+        }
+        .pagination-row .next {
+          width: 100%;
+          margin-top: 8px;
+        }
+      }
+    `],h);r([c({type:String})],o.prototype,"variant",void 0);r([c({type:Number})],o.prototype,"page",void 0);r([c({type:Number,attribute:"total-pages"})],o.prototype,"totalPages",void 0);r([c({type:String,attribute:"paging-href"})],o.prototype,"pagingHref",void 0);r([c({type:String,attribute:"base-uri"})],o.prototype,"baseUri",void 0);r([c({type:String,attribute:"pagination-aria-label"})],o.prototype,"paginationAriaLabel",void 0);r([c({type:String,attribute:"current-aria-label"})],o.prototype,"currentAriaLabel",void 0);r([c({type:String,attribute:"paging-number-aria-label"})],o.prototype,"pagingNumberAriaLabel",void 0);r([c({type:Boolean})],o.prototype,"isNarrow",void 0);r([c({type:String})],o.prototype,"spacing",void 0);r([c({type:String,attribute:"spacing-top"})],o.prototype,"spacingTop",void 0);r([c({type:String,attribute:"spacing-bottom"})],o.prototype,"spacingBottom",void 0);r([c({type:String,attribute:"spacing-left"})],o.prototype,"spacingLeft",void 0);r([c({type:String,attribute:"spacing-right"})],o.prototype,"spacingRight",void 0);o=r([w("scb-pagination")],o);

package/mvc/components/scb-progress-indicator/scb-progress-indicator.js

@@ -1 +1,87 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-progress-indicator/scb-progress-indicator.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(e,o,c){try{customElements.get(e)||i(e,o,c)}catch(r){var n=String(r||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();
+import{_ as h,b as u,g,h as a,y as o}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as s}from"../../vendor/decorate.js";(function(){try{var p=typeof globalThis<"u"?globalThis:window;if(!p.__scb_ce_guard_installed__){p.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(i,r,n){try{customElements.get(i)||t(i,r,n)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var c,e=(c=class extends h{constructor(...t){super(...t),this.id="",this.type="circular",this.progress=25,this.isStatic=!0,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._isSyncingAria=!1,this._defaultAriaLabelApplied=!1,this._defaultAriaValueTextApplied=!1}static get observedAttributes(){return[...super.observedAttributes,"role","aria-label","aria-labelledby","aria-valuemin","aria-valuemax","aria-valuetext"]}attributeChangedCallback(t,i,r){super.attributeChangedCallback(t,i,r),i!==r&&(t==="role"||t.startsWith("aria-"))&&this.syncAria()}connectedCallback(){super.connectedCallback(),this.syncAria()}clampProgress(t){return Number.isNaN(t)?0:Math.max(0,Math.min(100,t))}applyDefaultAriaLabel(t){const i=this.getAttribute("aria-labelledby"),r=this.getAttribute("aria-label");if(i){this._defaultAriaLabelApplied&&(this.removeAttribute("aria-label"),this._defaultAriaLabelApplied=!1);return}if(r!==null){this._defaultAriaLabelApplied&&r!==t&&(this._defaultAriaLabelApplied=!1);return}this.setAttribute("aria-label",t),this._defaultAriaLabelApplied=!0}syncAria(){if(!this._isSyncingAria){this._isSyncingAria=!0;try{if(this.hasAttribute("role")||this.setAttribute("role","progressbar"),this.hasAttribute("aria-valuemin")||this.setAttribute("aria-valuemin","0"),this.hasAttribute("aria-valuemax")||this.setAttribute("aria-valuemax","100"),this.type==="linear"&&!this.isStatic){this.removeAttribute("aria-valuenow");const i=this.getAttribute("aria-valuetext");i===null?(this.setAttribute("aria-valuetext","Laddar"),this._defaultAriaValueTextApplied=!0):this._defaultAriaValueTextApplied&&i!=="Laddar"&&(this._defaultAriaValueTextApplied=!1),this.applyDefaultAriaLabel("Laddar");return}const t=this.clampProgress(this.progress);this.setAttribute("aria-valuenow",String(t)),this._defaultAriaValueTextApplied&&(this.getAttribute("aria-valuetext")==="Laddar"&&this.removeAttribute("aria-valuetext"),this._defaultAriaValueTextApplied=!1),this.applyDefaultAriaLabel("Förlopp")}finally{this._isSyncingAria=!1}}}mapSpacingToken(t){if(!t)return;const i=String(t).trim();if(i)return/^\d+$/.test(i)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(i,10)))})`:i}applySpacing(){const t=this.mapSpacingToken(this.spacing),i=this.mapSpacingToken(this.spacingTop)??t,r=this.mapSpacingToken(this.spacingBottom)??t,n=this.mapSpacingToken(this.spacingLeft),l=this.mapSpacingToken(this.spacingRight);i?this.style.setProperty("--scb-progress-indicator-spacing-block-start",i):this.style.removeProperty("--scb-progress-indicator-spacing-block-start"),r?this.style.setProperty("--scb-progress-indicator-spacing-block-end",r):this.style.removeProperty("--scb-progress-indicator-spacing-block-end"),n?this.style.setProperty("--scb-progress-indicator-spacing-inline-start",n):this.style.removeProperty("--scb-progress-indicator-spacing-inline-start"),l?this.style.setProperty("--scb-progress-indicator-spacing-inline-end",l):this.style.removeProperty("--scb-progress-indicator-spacing-inline-end")}applyTypeLayout(){this.type==="linear"?(this.style.display="block",this.style.width="100%"):(this.style.removeProperty("display"),this.style.removeProperty("width"))}firstUpdated(t){this.applyTypeLayout(),this.applySpacing(),this.syncAria()}updated(t){super.updated(t),t.has("type")&&this.applyTypeLayout(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.applySpacing(),(t.has("type")||t.has("progress")||t.has("isStatic"))&&this.syncAria()}render(){return o`
+      <div class="scb-progress-indicator">
+        ${this.type==="circular"?o`
+          <div class="circular">
+            <svg class="circular-spin" viewBox="0 0 40 40" aria-hidden="true" focusable="false">
+              <circle class="circular-bg" cx="20" cy="20" r="16" fill="none" stroke-width="4" />
+              <circle
+                class="circular-fg"
+                cx="20" cy="20" r="16" fill="none" stroke-width="4"
+                stroke="var(--md-sys-color-primary)"
+                stroke-dasharray="${2*Math.PI*16}"
+                stroke-dashoffset="${(1-this.progress/100)*2*Math.PI*16}"
+              />
+            </svg>
+          </div>
+        `:o`
+      <div class="linear" style="--progress-fill: var(--md-sys-color-primary);">
+            ${this.isStatic?o`<div class="linear-static" style="width: ${this.progress}%;"></div>`:o`<div class="linear-loader"></div>`}
+          </div>
+        `}
+      </div>
+    `}},c.styles=[u`
+
+      .circular {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 46px;
+        height: 46px;
+        position: relative;
+      }
+      .circular-spin {
+        animation: spin 1s linear infinite;
+        width: 46px;
+        height: 46px ;
+        position: relative;
+        z-index: 1;
+      }
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      .circular-bg {
+        stroke:  var(--md-sys-color-secondary-container);
+      }
+      .circular-fg {
+        transition: stroke-dashoffset 0.3s ease;
+      }
+      .linear {
+        width: 100%;
+        height: 6px;
+        background: var(--md-sys-color-secondary-container);
+        border-radius: 3px;
+        overflow: hidden;
+        position: relative;
+      }
+      :host {
+        display: inline-block;
+        margin-block-start: var(--scb-progress-indicator-spacing-block-start, 0);
+        margin-block-end: var(--scb-progress-indicator-spacing-block-end, 0);
+        margin-inline-start: var(--scb-progress-indicator-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-progress-indicator-spacing-inline-end, 0);
+        --progress-fill: var(--md-sys-color-primary);
+      }
+      :host([type='linear']) {
+        display: block;
+        width: 100%;
+      }
+      .linear-loader {
+        height: 100%;
+        width: 40%;
+        background: var(--progress-fill);
+        border-radius: 3px;
+        animation: linear-progress 1.2s cubic-bezier(.4,0,.2,1) infinite;
+      }
+      .linear-static {
+        height: 100%;
+        border-radius: 3px;
+        transition: width 0.3s ease;
+        background: var(--progress-fill);
+      }
+      @keyframes linear-progress {
+        0% { margin-left: -40%; width: 40%; }
+        50% { margin-left: 30%; width: 60%; }
+        100% { margin-left: 100%; width: 40%; }
+      }
+    `],c);s([a({type:String})],e.prototype,"id",void 0);s([a({type:String,reflect:!0})],e.prototype,"type",void 0);s([a({type:Number,reflect:!0})],e.prototype,"progress",void 0);s([a({type:Boolean,attribute:"is-static"})],e.prototype,"isStatic",void 0);s([a({type:String,reflect:!0})],e.prototype,"spacing",void 0);s([a({type:String,attribute:"spacing-top",reflect:!0})],e.prototype,"spacingTop",void 0);s([a({type:String,attribute:"spacing-bottom",reflect:!0})],e.prototype,"spacingBottom",void 0);s([a({type:String,attribute:"spacing-left",reflect:!0})],e.prototype,"spacingLeft",void 0);s([a({type:String,attribute:"spacing-right",reflect:!0})],e.prototype,"spacingRight",void 0);e=s([g("scb-progress-indicator")],e);