scb-wc 0.1.3 → 0.1.4

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,312 @@
+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

@@ -0,0 +1,87 @@
+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);

package/mvc/components/scb-progress-stepper/scb-progress-step.js

@@ -0,0 +1,147 @@
+import"../../vendor/vendor-material.js";import{_ as h,b,g as f,h as a,m as u,y as r}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as s}from"../../vendor/decorate.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(o,i,c){try{customElements.get(o)||t(o,i,c)}catch(d){var p=String(d||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var n,e=(n=class extends h{constructor(...t){super(...t),this.width="100%",this.active=!1,this.disabled=!1,this.href="",this.label="",this.position="top",this._stepId=`scb-step-${Math.random().toString(36).slice(2)}`}updated(t){super.updated?.(t),this.style.setProperty("--progress-step-width",this.width)}_onClick(){const t={width:this.width,label:this.label,active:this.active,disabled:this.disabled,href:this.href||void 0};this.dispatchEvent(new CustomEvent("step-click",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepclick",{detail:t,bubbles:!0,composed:!0}))}firstUpdated(t){super.firstUpdated?.(t),this._setupTooltipPositioning()}_setupTooltipPositioning(){new MutationObserver(()=>this._adjustTooltipPosition()).observe(this,{attributes:!0,childList:!0,subtree:!0}),window.addEventListener("resize",()=>this._adjustTooltipPosition())}_adjustTooltipPosition(){const t=this.renderRoot.querySelector(".tooltip");if(!t)return;t.style.left="50%",t.style.right="",t.style.transform="translateX(-50%)",t.classList.remove("tooltip-left","tooltip-right");const o=t.getBoundingClientRect(),i=8;o.right>window.innerWidth-i&&(t.style.left="auto",t.style.right=`${i}px`,t.style.transform="none",t.classList.add("tooltip-right")),o.left<i&&(t.style.left=`${i}px`,t.style.right="auto",t.style.transform="none",t.classList.add("tooltip-left"))}render(){return r`
+      ${this.href&&!this.disabled?r`
+            <a
+              id=${this._stepId}
+              class="progress-step"
+              href=${this.href}
+              @click=${this._onClick}
+              tabindex="0"
+              role="link"
+              aria-disabled="false"
+            >
+              <md-ripple></md-ripple>
+            </a>
+          `:r`
+            <div
+              id=${this._stepId}
+              class="progress-step"
+              @click=${this._onClick}
+              tabindex=${this.disabled?-1:0}
+              role="button"
+              aria-disabled=${this.disabled?"true":"false"}
+            >
+              ${this.disabled?"":r`<md-ripple></md-ripple>`}
+            </div>
+          `}
+      ${this.disabled?"":r`<md-focus-ring for="${this._stepId}"></md-focus-ring>`}
+      ${this.label&&!this.disabled?r`<div class="tooltip ${this.position==="bottom"?"bottom":"top"}">${this.label}</div>`:""}
+    `}},n.styles=b`
+    :host {
+      display: block;
+      width: var(--progress-step-width, 100%);
+      height: 100%;
+      cursor: pointer;
+      background: transparent;
+      position: relative;
+    }
+    .progress-step {
+      width: 100%;
+      height: 100%;
+      background: transparent;
+      position: relative;
+      overflow: hidden;
+      border-right: 2px solid var(--md-sys-color-surface);
+      outline: none;
+      box-shadow: none;
+      display: block;
+    }
+    :host(.last-step) .progress-step {
+      border-right: none !important;
+    }
+    .progress-step:focus {
+      outline: none;
+      box-shadow: none;
+    }
+    :host([active]) .progress-step {
+      border-right: 2px solid var(--md-sys-color-surface);
+    }
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+    :host([disabled]) .progress-step {
+      background: #e6e6e699;
+      border-right: 2px solid #e6e6e699;
+    }
+
+    md-focus-ring {
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      border-radius: 0;
+      transition: opacity 0.15s;
+      z-index: 4;
+    }
+    .progress-step:focus + md-focus-ring,
+    .progress-step:focus-visible + md-focus-ring {
+      opacity: 1;
+    }
+
+    .tooltip {
+      visibility: hidden;
+      opacity: 0;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+      max-width: 220px;
+      width: max-content;
+      background: var(--md-sys-color-inverse-surface);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      padding: var(--spacing-2) var(--spacing-3);
+      color: var(--md-sys-color-inverse-on-surface);
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-body-small-size);
+      font-style: normal;
+      line-height: var(--md-sys-typescale-body-small-line-height);
+      letter-spacing: var(--md-sys-typescale-body-small-tracking);
+      white-space: normal;
+      pointer-events: none;
+      transition: opacity 0.2s, visibility 0.2s;
+      text-align: center;
+    }
+    .tooltip.top {
+      top: calc(100% + 10px);
+    }
+    .tooltip.bottom {
+      bottom: calc(100% + 10px);
+    }
+    .progress-step:hover ~ .tooltip,
+    .progress-step:focus ~ .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      pointer-events: none;
+      display: block;
+    }
+    .tooltip.top::after {
+      top: -6px;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-bottom: 8px solid var(--md-sys-color-inverse-surface);
+      border-top: none;
+    }
+    .tooltip.bottom::after {
+      bottom: -6px;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 8px solid var(--md-sys-color-inverse-surface);
+      border-bottom: none;
+    }
+    .tooltip.tooltip-left::after {
+      left: 2px;
+      transform: none;
+    }
+    .tooltip.tooltip-right::after {
+      right: 2px;
+      left: auto;
+      transform: none;
+    }
+  `,n);s([a({type:String})],e.prototype,"width",void 0);s([a({type:Boolean,reflect:!0})],e.prototype,"active",void 0);s([a({type:Boolean,reflect:!0})],e.prototype,"disabled",void 0);s([a({type:String,reflect:!0})],e.prototype,"href",void 0);s([a({type:String})],e.prototype,"label",void 0);s([a({type:String})],e.prototype,"position",void 0);s([u()],e.prototype,"_stepId",void 0);e=s([f("scb-progress-step")],e);export{e as ScbProgressStep};