scb-wc-test 0.1.71 → 0.1.73

package/all.js

@@ -43,6 +43,7 @@ import './mvc/components/scb-menu/scb-menu.js';
 import './mvc/components/scb-menu/scb-sub-menu.js';
 import './mvc/components/scb-notification/scb-notification.js';
 import './mvc/components/scb-notification-card/scb-notification-card.js';
+import './mvc/components/scb-pagination/scb-pagination.js';
 import './mvc/components/scb-progress-indicator/scb-progress-indicator.js';
 import './mvc/components/scb-radio-button/scb-radio-button.js';
 import './mvc/components/scb-radio-button/scb-radio-group.js';
@@ -105,6 +106,7 @@ import './scb-menu/scb-menu.js';
 import './scb-menu/scb-sub-menu.js';
 import './scb-notification/scb-notification.js';
 import './scb-notification-card/scb-notification-card.js';
+import './scb-pagination/scb-pagination.js';
 import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-radio-button/scb-radio-button.js';
 import './scb-radio-button/scb-radio-group.js';

package/index.d.ts

@@ -40,6 +40,7 @@ export * from './scb-menu/scb-menu';
 export * from './scb-menu/scb-sub-menu';
 export * from './scb-notification/scb-notification';
 export * from './scb-notification-card/scb-notification-card';
+export * from './scb-pagination/scb-pagination';
 export * from './scb-progress-indicator/scb-progress-indicator';
 export * from './scb-radio-button/scb-radio-button';
 export * from './scb-radio-button/scb-radio-group';

package/index.js

@@ -8,13 +8,13 @@ import { SCBBreadcrumb as n } from "./scb-breadcrumb/scb-breadcrumb.js";
 import { ScbButton as C } from "./scb-button/scb-button.js";
 import { ScbCalendarCard as l } from "./scb-calendar-card/scb-calendar-card.js";
 import { ScbCard as D } from "./scb-card/scb-card.js";
-import { ScbCheckboxGroup as w } from "./scb-checkbox/scb-checkbox-group.js";
+import { ScbCheckboxGroup as g } from "./scb-checkbox/scb-checkbox-group.js";
 import { ScbCheckbox as s } from "./scb-checkbox/scb-checkbox.js";
 import { ScbChip as H } from "./scb-chip/scb-chip.js";
 import { ScbDialog as k } from "./scb-dialog/scb-dialog.js";
 import { ScbDivider as y } from "./scb-divider/scb-divider.js";
-import { ScbDrawerItem as L } from "./scb-drawer/scb-drawer-item.js";
-import { ScbDrawerSection as P } from "./scb-drawer/scb-drawer-section.js";
+import { ScbDrawerItem as P } from "./scb-drawer/scb-drawer-item.js";
+import { ScbDrawerSection as M } from "./scb-drawer/scb-drawer-section.js";
 import { ScbDrawer as N } from "./scb-drawer/scb-drawer.js";
 import { ScbSubDrawer as z } from "./scb-drawer/scb-sub-drawer.js";
 import { ScbFactCardContent as U } from "./scb-fact-card/scb-fact-card-content.js";
@@ -35,27 +35,28 @@ import { ScbKeyFigureCard as nr } from "./scb-keyfigure-card/scb-keyfigure-card.
 import { ScbLink as Cr } from "./scb-link/scb-link.js";
 import { ScbListItem as lr } from "./scb-list/scb-list-item.js";
 import { ScbList as Dr } from "./scb-list/scb-list.js";
-import { ScbMenuItem as wr } from "./scb-menu/scb-menu-item.js";
+import { ScbMenuItem as gr } from "./scb-menu/scb-menu-item.js";
 import { ScbMenu as sr } from "./scb-menu/scb-menu.js";
 import { ScbSubMenu as Hr } from "./scb-menu/scb-sub-menu.js";
 import { ScbNotification as kr } from "./scb-notification/scb-notification.js";
 import { ScbNotificationCard as yr } from "./scb-notification-card/scb-notification-card.js";
-import { ScbProgressIndicator as Lr } from "./scb-progress-indicator/scb-progress-indicator.js";
-import { ScbRadioButton as Pr } from "./scb-radio-button/scb-radio-button.js";
-import { ScbRadioGroup as Nr } from "./scb-radio-button/scb-radio-group.js";
-import { ScbSearch as zr } from "./scb-search/scb-search.js";
-import { ScbSegmentedButton as Ur } from "./scb-segmented-button/scb-segmented-button.js";
-import { ScbSegmentedItem as qr } from "./scb-segmented-button/scb-segmented-item.js";
-import { ScbSnackbar as Jr } from "./scb-snackbar/scb-snackbar.js";
-import { ScbStatusPill as Qr } from "./scb-status-pill/scb-status-pill.js";
-import { ScbSwitch as Wr } from "./scb-switch/scb-switch.js";
-import { ScbPrimaryTab as Yr } from "./scb-tabs/scb-primary-tab.js";
-import { ScbSecondaryTab as _r } from "./scb-tabs/scb-secondary-tab.js";
-import { ScbTabs as ro } from "./scb-tabs/scb-tabs.js";
-import { ScbTextField2 as eo } from "./scb-textfield/scb-textfield.js";
-import { ScbTocItem as co } from "./scb-toc/scb-toc-item.js";
-import { ScbToc as So } from "./scb-toc/scb-toc.js";
-import { ScbTooltip as po } from "./scb-tooltip/scb-tooltip.js";
+import { ScbPagination as Pr } from "./scb-pagination/scb-pagination.js";
+import { ScbProgressIndicator as Mr } from "./scb-progress-indicator/scb-progress-indicator.js";
+import { ScbRadioButton as Nr } from "./scb-radio-button/scb-radio-button.js";
+import { ScbRadioGroup as zr } from "./scb-radio-button/scb-radio-group.js";
+import { ScbSearch as Ur } from "./scb-search/scb-search.js";
+import { ScbSegmentedButton as qr } from "./scb-segmented-button/scb-segmented-button.js";
+import { ScbSegmentedItem as Jr } from "./scb-segmented-button/scb-segmented-item.js";
+import { ScbSnackbar as Qr } from "./scb-snackbar/scb-snackbar.js";
+import { ScbStatusPill as Wr } from "./scb-status-pill/scb-status-pill.js";
+import { ScbSwitch as Yr } from "./scb-switch/scb-switch.js";
+import { ScbPrimaryTab as _r } from "./scb-tabs/scb-primary-tab.js";
+import { ScbSecondaryTab as ro } from "./scb-tabs/scb-secondary-tab.js";
+import { ScbTabs as eo } from "./scb-tabs/scb-tabs.js";
+import { ScbTextField2 as co } from "./scb-textfield/scb-textfield.js";
+import { ScbTocItem as So } from "./scb-toc/scb-toc-item.js";
+import { ScbToc as po } from "./scb-toc/scb-toc.js";
+import { ScbTooltip as fo } from "./scb-tooltip/scb-tooltip.js";
 export {
   n as SCBBreadcrumb,
   i as SCBBreadcrumbItem,
@@ -68,13 +69,13 @@ export {
   l as ScbCalendarCard,
   D as ScbCard,
   s as ScbCheckbox,
-  w as ScbCheckboxGroup,
+  g as ScbCheckboxGroup,
   H as ScbChip,
   k as ScbDialog,
   y as ScbDivider,
   N as ScbDrawer,
-  L as ScbDrawerItem,
-  P as ScbDrawerSection,
+  P as ScbDrawerItem,
+  M as ScbDrawerSection,
   q as ScbFactCard,
   U as ScbFactCardContent,
   Q as ScbFooter,
@@ -93,26 +94,27 @@ export {
   Dr as ScbList,
   lr as ScbListItem,
   sr as ScbMenu,
-  wr as ScbMenuItem,
+  gr as ScbMenuItem,
   kr as ScbNotification,
   yr as ScbNotificationCard,
-  Yr as ScbPrimaryTab,
-  Lr as ScbProgressIndicator,
-  Pr as ScbRadioButton,
-  Nr as ScbRadioGroup,
-  zr as ScbSearch,
-  _r as ScbSecondaryTab,
-  Ur as ScbSegmentedButton,
-  qr as ScbSegmentedItem,
-  Jr as ScbSnackbar,
+  Pr as ScbPagination,
+  _r as ScbPrimaryTab,
+  Mr as ScbProgressIndicator,
+  Nr as ScbRadioButton,
+  zr as ScbRadioGroup,
+  Ur as ScbSearch,
+  ro as ScbSecondaryTab,
+  qr as ScbSegmentedButton,
+  Jr as ScbSegmentedItem,
+  Qr as ScbSnackbar,
   _ as ScbStack,
-  Qr as ScbStatusPill,
+  Wr as ScbStatusPill,
   z as ScbSubDrawer,
   Hr as ScbSubMenu,
-  Wr as ScbSwitch,
-  ro as ScbTabs,
-  eo as ScbTextField2,
-  So as ScbToc,
-  co as ScbTocItem,
-  po as ScbTooltip
+  Yr as ScbSwitch,
+  eo as ScbTabs,
+  co as ScbTextField2,
+  po as ScbToc,
+  So as ScbTocItem,
+  fo as ScbTooltip
 };

package/mvc/components/all.js

@@ -40,6 +40,7 @@ import './scb-menu/scb-menu-item.js';
 import './scb-menu/scb-sub-menu.js';
 import './scb-notification-card/scb-notification-card.js';
 import './scb-notification/scb-notification.js';
+import './scb-pagination/scb-pagination.js';
 import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-radio-button/scb-radio-button.js';
 import './scb-radio-button/scb-radio-group.js';

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

@@ -1,24 +1,24 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../scb-drawer/scb-drawer.js","../../vendor/preload-helper.js","../../vendor/vendor.js","../scb-divider/scb-divider.js","../scb-tabs/scb-tabs.js","../../vendor/vendor-material.js","../scb-tabs/scb-primary-tab.js","../scb-tabs/scb-secondary-tab.js","../scb-search/scb-search.js","../scb-list/scb-list.js","../scb-list/scb-list-item.js"])))=>i.map(i=>d[i]);
-import{_ as g}from"../../vendor/preload-helper.js";import{a as x,n as l,r as u,i as S,x as c,E as d,t as C}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-grid/scb-grid-item.js";import"../scb-grid/scb-grid.js";import"../scb-link/scb-link.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-tooltip/scb-tooltip.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(s,a,o){try{customElements.get(s)||t(s,a,o)}catch(n){var h=String(n||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var T=Object.defineProperty,A=Object.getOwnPropertyDescriptor,i=(e,t,s,a)=>{for(var o=a>1?void 0:a?A(t,s):t,h=e.length-1,n;h>=0;h--)(n=e[h])&&(o=(a?n(t,s,o):n(o))||o);return a&&o&&T(t,s,o),o};const w={fromAttribute:e=>e==null?!0:!/^(false|0|off|no)$/i.test(e),toAttribute:e=>String(!!e)};let r=class extends S{constructor(){super(...arguments),this.maxWidth="1440px",this.logoText="",this.logoHref="/",this.banner=!1,this.tabs=[],this.activeTab=0,this.utilityItems=[],this.showDrawer=!0,this.showSearch=!0,this.includeUtilityInDrawer=!1,this._drawerId="main-drawer",this._drawerMounted=!1,this._drawerExpanded=!1,this._searchId="header-search",this._slotTabs=[],this._slotUtils=[],this._slotMenu=[],this._measureScheduled=!1,this._scheduleMeasure=()=>{this._measureScheduled||(this._measureScheduled=!0,requestAnimationFrame(()=>{this._measureScheduled=!1,this._measure()}))},this._onWindowResize=()=>{this._scheduleMeasure()},this._onDrawerSelect=e=>{this.dispatchEvent(new CustomEvent("drawer-select",{detail:e.detail,bubbles:!0,composed:!0})),this._closeDrawerNow()},this._collapsed=!1,this._unlockAtWidth=0,this._hideLogoText=!1,this._logoTextUnlockAt=0,this._harvestPending=!1,this.__drawerLoaded=!1,this.__tabsLoaded=!1,this.__searchLoaded=!1,this._harvest=()=>{const e=this._slotEl;if(!e)return;const t=e.assignedElements({flatten:!0}),s=[],a=[],o=[],h=n=>({label:n.getAttribute("label")??"",href:n.getAttribute("href")??void 0,icon:n.getAttribute("icon")??void 0});for(const n of t){const p=n.tagName.toLowerCase();if(p==="scb-header-tab"){s.push({label:n.getAttribute("label")??"",href:n.getAttribute("href")??"#"});continue}if(p==="scb-header-utility"){a.push({label:n.getAttribute("label")??"",href:n.getAttribute("href")??"#",target:n.getAttribute("target")??void 0});continue}if(p==="scb-header-drawer-group"){const b={label:n.getAttribute("label")??"",icon:n.getAttribute("icon")??void 0,children:[]};n.querySelectorAll("scb-header-drawer-item").forEach(m=>b.children.push(h(m))),o.push(b);continue}p==="scb-header-drawer-item"&&o.push(h(n))}this._slotTabs=s,this._slotUtils=a,this._slotMenu=o,queueMicrotask(()=>{this.updateComplete.then(()=>{this._applyActiveToTabs(),this._scheduleMeasure()})})},this._measure=()=>{const e=this._top,t=this._logoGroup;if(!e||!t)return;const s=window.innerWidth,a=e.clientWidth,o=this._overflows(this._util),h=this._overflows(this._tabsEl),n=s<this.BP_MD||o||h;this._collapsed?!n&&a>=this._unlockAtWidth&&this._setCollapsed(!1):n&&(this._unlockAtWidth=a+this._HYST,this._setCollapsed(!0));let p=!1;if(this.showSearch&&s>=this.BP_SM&&s<this.BP_MD&&this._searchWrap){const m=getComputedStyle(this._searchWrap),y=Math.max(this._num(m.minWidth,this._tokenPx("--scb-header-search-min",320)),this._tokenPx("--scb-header-search-min",320)),_=this._num(getComputedStyle(e).gap,this._tokenPx("--spacing-7",24)),f=this.showDrawer&&(s<this.BP_MD||this._collapsed)?this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-large",48):0;p=t.getBoundingClientRect().width+_+y+_+f+8>a+.5}this._setHideSearch(p);let b=!1;if(this.showDrawer&&(s<this.BP_MD||this._collapsed)&&!this._visible(this._util)&&!this._visible(this._searchWrap)){const m=this._num(getComputedStyle(e).gap,this._tokenPx("--spacing-7",24)),y=this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-large",48),_=(this._logoGroup?.getBoundingClientRect().width||0)+m+y;this._hideLogoText?b=!(a>=this._logoTextUnlockAt):_>a+.5&&(b=!0,this._logoTextUnlockAt=a+this._HYST)}else b=!1,this._logoTextUnlockAt=0;this._setHideLogoText(b)},this._onMenuClick=async e=>{e.preventDefault(),e.stopPropagation(),this.showDrawer&&(this.dispatchEvent(new CustomEvent("menu-click",{bubbles:!0,composed:!0})),await this._ensureDrawerMounted(),await r._nextFrame(),await r._nextFrame(),this._openDrawerNow())},this._onSearchClick=e=>{const t=this._searchEl;if(t?.submit&&typeof t.submit=="function"){t.submit();return}const s=t?.value??void 0;this.dispatchEvent(new CustomEvent("search-click",{detail:{value:s},bubbles:!0,composed:!0})),t?.focus?.()},this._onTabsChange=e=>{const s=e?.detail?.activeTabIndex??e.target?.activeTabIndex??0;this.activeTab=s;const o=(this._slotTabs.length?this._slotTabs:this.tabs)[s]?.href??"";this.dispatchEvent(new CustomEvent("tab-change",{detail:{index:s,href:o},bubbles:!0,composed:!0}))}}get _HYST(){return this._tokenPx("--spacing-11",64)}get BP_SM(){return this._tokenPx("--bp-sm",r.BP_SM_DEFAULT)}get BP_MD(){return this._tokenPx("--bp-md",r.BP_MD_DEFAULT)}_scheduleHarvest(){this._harvestPending||(this._harvestPending=!0,queueMicrotask(()=>{this._harvestPending=!1,this._harvest()}))}async __ensureDrawer(){if(!this.__drawerLoaded)return this.__ensureDrawerPromise??(this.__ensureDrawerPromise=(async()=>{await g(()=>import("../scb-drawer/scb-drawer.js"),__vite__mapDeps([0,1,2,3]),import.meta.url),this.__drawerLoaded=!0})()),this.__ensureDrawerPromise}async __ensureTabs(){if(!this.__tabsLoaded)return this.__ensureTabsPromise??(this.__ensureTabsPromise=(async()=>{await Promise.all([g(()=>import("../scb-tabs/scb-tabs.js"),__vite__mapDeps([4,5,2,6,1,7]),import.meta.url),g(()=>import("../scb-tabs/scb-secondary-tab.js"),__vite__mapDeps([7,1,5,2]),import.meta.url)]),this.__tabsLoaded=!0})()),this.__ensureTabsPromise}async __ensureSearch(){if(!this.__searchLoaded)return this.__ensureSearchPromise??(this.__ensureSearchPromise=(async()=>{await g(()=>import("../scb-search/scb-search.js"),__vite__mapDeps([8,2,9,1,10,5]),import.meta.url),this.__searchLoaded=!0})()),this.__ensureSearchPromise}get _slotEl(){return this.shadowRoot?.querySelector("slot#data-slot")??null}get _top(){return this.renderRoot.querySelector(".top-row")}get _util(){return this.renderRoot.querySelector(".utility")}get _tabsEl(){return this.renderRoot.querySelector("scb-tabs")}get _logoGroup(){return this.renderRoot.querySelector(".logo-wrap")||this.renderRoot.querySelector(".logo-group")}get _searchWrap(){return this.renderRoot.querySelector(".search")}get _menuBtn(){return this.renderRoot.querySelector(".menu-trigger")}get _searchEl(){return this.renderRoot.querySelector(`#${this._searchId}`)}_attachSlotObservers(){this._slotMo?.disconnect();const e=new MutationObserver(t=>{this._scheduleHarvest()});this._slotMo=e,e.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["label","href","icon","target"]})}_setCollapsed(e){this._collapsed!==e&&(this._collapsed=e,e?this.setAttribute("data-collapsed",""):this.removeAttribute("data-collapsed"))}_setHideSearch(e){e?this.setAttribute("data-hide-search",""):this.removeAttribute("data-hide-search")}_setHideLogoText(e){this._hideLogoText!==e&&(this._hideLogoText=e,e?this.setAttribute("data-hide-logo-text",""):this.removeAttribute("data-hide-logo-text"))}_num(e,t){const s=Number.parseFloat(String(e??"").trim());return Number.isFinite(s)?s:t}_tokenPx(e,t){const s=getComputedStyle(this);return this._num(s.getPropertyValue(e),t)}_visible(e){return e?getComputedStyle(e).display!=="none":!1}_overflows(e){return!e||!this._visible(e)?!1:e.scrollWidth>e.clientWidth+1}firstUpdated(){this.updateComplete.then(()=>{this._harvest(),this._attachSlotObservers()});const e=this._top;e&&(this._ro=new ResizeObserver(()=>this._scheduleMeasure()),this._ro.observe(e)),window.addEventListener("resize",this._onWindowResize,{passive:!0});const t=this._menuBtn,s=()=>this._ensureDrawerMounted();t?.addEventListener("pointerenter",s,{once:!0}),t?.addEventListener("focusin",s,{once:!0}),t?.addEventListener("touchstart",s,{once:!0,passive:!0});const a=o=>"requestIdleCallback"in window?window.requestIdleCallback(o,{timeout:1500}):setTimeout(o,600);this.showDrawer&&a(()=>{this.__ensureDrawer()}),this._collapsed||a(()=>{this.__ensureTabs()}),this.showSearch&&a(()=>{this.__ensureSearch()})}updated(e){e.has("searchMax")&&this.style.setProperty("--scb-header-search-max",this.searchMax??"480px"),e.has("searchMin")&&this.style.setProperty("--scb-header-search-min",this.searchMin??"320px"),e.has("searchHeight")&&(this.searchHeight&&this.searchHeight.trim()?this.style.setProperty("--scb-search-height",this.searchHeight.trim()):this.style.removeProperty("--scb-search-height")),(e.has("utilityItems")||e.has("tabs")||e.has("logoText")||e.has("activeTab")||e.has("_slotTabs")||e.has("_slotUtils")||e.has("_slotMenu")||e.has("showDrawer")||e.has("showSearch")||e.has("searchMax")||e.has("searchMin"))&&this.updateComplete.then(()=>{this._scheduleMeasure(),this._applyActiveToTabs()}),e.has("showSearch")&&this.showSearch&&!this.__searchLoaded&&this.__ensureSearch()}disconnectedCallback(){this._ro?.disconnect(),this._slotMo?.disconnect(),window.removeEventListener("resize",this._onWindowResize),super.disconnectedCallback()}async _ensureDrawerMounted(){this._drawerMounted||(await this.__ensureDrawer(),this._drawerMounted=!0,await this.updateComplete)}_openDrawerNow(){const e=this.renderRoot.querySelector(`#${this._drawerId}`);e&&(e.open=!0,e.setAttribute("open",""),e.show?.(),e.openDrawer?.(),this._drawerExpanded=!0,this._syncMenuBtnAria(),this.dispatchEvent(new CustomEvent("drawer-open",{bubbles:!0,composed:!0})))}_closeDrawerNow(){const e=this.renderRoot.querySelector(`#${this._drawerId}`);e&&(e.open=!1),this._drawerExpanded=!1,this._syncMenuBtnAria(),this.dispatchEvent(new CustomEvent("drawer-close",{bubbles:!0,composed:!0}))}_syncMenuBtnAria(){const e=this.renderRoot.querySelector(".menu-trigger");e&&e.setAttribute("aria-expanded",String(this._drawerExpanded))}_applyActiveToTabs(){const e=this._tabsEl;if(!e)return;e.activeTabIndex=this.activeTab,e.querySelectorAll("scb-secondary-tab").forEach((s,a)=>{s.selected=a===this.activeTab})}_renderDrawerNodes(e){return!e||e.length===0?c``:c`${e.map(t=>{const s=Array.isArray(t.children)&&t.children.length>0;return c`
+import{_ as g}from"../../vendor/preload-helper.js";import{a as x,n as l,r as u,i as S,x as c,E as d,t as C}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-grid/scb-grid-item.js";import"../scb-grid/scb-grid.js";import"../scb-link/scb-link.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-tooltip/scb-tooltip.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(r,i,o){try{customElements.get(r)||t(r,i,o)}catch(n){var h=String(n||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var T=Object.defineProperty,$=Object.getOwnPropertyDescriptor,a=(e,t,r,i)=>{for(var o=i>1?void 0:i?$(t,r):t,h=e.length-1,n;h>=0;h--)(n=e[h])&&(o=(i?n(t,r,o):n(o))||o);return i&&o&&T(t,r,o),o};const v={fromAttribute:e=>e==null?!0:!/^(false|0|off|no)$/i.test(e),toAttribute:e=>String(!!e)};let s=class extends S{constructor(){super(...arguments),this.maxWidth="1440px",this.logoText="",this.logoHref="/",this.banner=!1,this.tabs=[],this.activeTab=0,this.utilityItems=[],this.showDrawer=!0,this.showSearch=!0,this.includeUtilityInDrawer=!1,this.searchText="",this._drawerId="main-drawer",this._drawerMounted=!1,this._drawerExpanded=!1,this._searchId="header-search",this._slotTabs=[],this._slotUtils=[],this._slotMenu=[],this._measureScheduled=!1,this._scheduleMeasure=()=>{this._measureScheduled||(this._measureScheduled=!0,requestAnimationFrame(()=>{this._measureScheduled=!1,this._measure()}))},this._onWindowResize=()=>{this._scheduleMeasure()},this._onDrawerSelect=e=>{this.dispatchEvent(new CustomEvent("drawer-select",{detail:e.detail,bubbles:!0,composed:!0})),this._closeDrawerNow()},this._collapsed=!1,this._unlockAtWidth=0,this._hideLogoText=!1,this._logoTextUnlockAt=0,this._harvestPending=!1,this.__drawerLoaded=!1,this.__tabsLoaded=!1,this.__searchLoaded=!1,this._harvest=()=>{const e=this._slotEl;if(!e)return;const t=e.assignedElements({flatten:!0}),r=[],i=[],o=[],h=n=>({label:n.getAttribute("label")??"",href:n.getAttribute("href")??void 0,icon:n.getAttribute("icon")??void 0});for(const n of t){const p=n.tagName.toLowerCase();if(p==="scb-header-tab"){r.push({label:n.getAttribute("label")??"",href:n.getAttribute("href")??"#"});continue}if(p==="scb-header-utility"){i.push({label:n.getAttribute("label")??"",href:n.getAttribute("href")??"#",target:n.getAttribute("target")??void 0});continue}if(p==="scb-header-drawer-group"){const b={label:n.getAttribute("label")??"",icon:n.getAttribute("icon")??void 0,children:[]};n.querySelectorAll("scb-header-drawer-item").forEach(m=>b.children.push(h(m))),o.push(b);continue}p==="scb-header-drawer-item"&&o.push(h(n))}this._slotTabs=r,this._slotUtils=i,this._slotMenu=o,queueMicrotask(()=>{this.updateComplete.then(()=>{this._applyActiveToTabs(),this._scheduleMeasure()})})},this._measure=()=>{const e=this._top,t=this._logoGroup;if(!e||!t)return;const r=window.innerWidth,i=e.clientWidth,o=this._overflows(this._util),h=this._overflows(this._tabsEl),n=r<this.BP_MD||o||h;this._collapsed?!n&&i>=this._unlockAtWidth&&this._setCollapsed(!1):n&&(this._unlockAtWidth=i+this._HYST,this._setCollapsed(!0));let p=!1;if(this.showSearch&&r>=this.BP_SM&&r<this.BP_MD&&this._searchWrap){const m=getComputedStyle(this._searchWrap),y=Math.max(this._num(m.minWidth,this._tokenPx("--scb-header-search-min",320)),this._tokenPx("--scb-header-search-min",320)),_=this._num(getComputedStyle(e).gap,this._tokenPx("--spacing-7",24)),f=this.showDrawer&&(r<this.BP_MD||this._collapsed)?this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-large",48):0;p=t.getBoundingClientRect().width+_+y+_+f+8>i+.5}this._setHideSearch(p);let b=!1;if(this.showDrawer&&(r<this.BP_MD||this._collapsed)&&!this._visible(this._util)&&!this._visible(this._searchWrap)){const m=this._num(getComputedStyle(e).gap,this._tokenPx("--spacing-7",24)),y=this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-large",48),_=(this._logoGroup?.getBoundingClientRect().width||0)+m+y;this._hideLogoText?b=!(i>=this._logoTextUnlockAt):_>i+.5&&(b=!0,this._logoTextUnlockAt=i+this._HYST)}else b=!1,this._logoTextUnlockAt=0;this._setHideLogoText(b)},this._onMenuClick=async e=>{e.preventDefault(),e.stopPropagation(),this.showDrawer&&(this.dispatchEvent(new CustomEvent("menu-click",{bubbles:!0,composed:!0})),await this._ensureDrawerMounted(),await s._nextFrame(),await s._nextFrame(),this._openDrawerNow())},this._onSearchClick=e=>{const t=this._searchEl;if(t?.submit&&typeof t.submit=="function"){t.submit();return}const r=t?.value??"";this.searchText=r,this.dispatchEvent(new CustomEvent("search-click",{detail:{value:r},bubbles:!0,composed:!0})),t?.focus?.()},this._onTabsChange=e=>{const r=e?.detail?.activeTabIndex??e.target?.activeTabIndex??0;this.activeTab=r;const o=(this._slotTabs.length?this._slotTabs:this.tabs)[r]?.href??"";this.dispatchEvent(new CustomEvent("tab-change",{detail:{index:r,href:o},bubbles:!0,composed:!0}))},this._onSearchInput=e=>{this.searchText=e.detail?.value??"",this.dispatchEvent(new CustomEvent("search-input",{detail:{value:this.searchText},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("search-text-change",{detail:{value:this.searchText},bubbles:!0,composed:!0}))},this._onSearchSubmit=e=>{this.searchText=e.detail?.value??"",this.dispatchEvent(new CustomEvent("search-change",{detail:{value:this.searchText,active:e.detail?.active},bubbles:!0,composed:!0}))},this._onSearchClear=()=>{this.searchText="",this.dispatchEvent(new CustomEvent("search-text-change",{detail:{value:""},bubbles:!0,composed:!0}))}}get _HYST(){return this._tokenPx("--spacing-11",64)}get BP_SM(){return this._tokenPx("--bp-sm",s.BP_SM_DEFAULT)}get BP_MD(){return this._tokenPx("--bp-md",s.BP_MD_DEFAULT)}_scheduleHarvest(){this._harvestPending||(this._harvestPending=!0,queueMicrotask(()=>{this._harvestPending=!1,this._harvest()}))}async __ensureDrawer(){if(!this.__drawerLoaded)return this.__ensureDrawerPromise??(this.__ensureDrawerPromise=(async()=>{await g(()=>import("../scb-drawer/scb-drawer.js"),__vite__mapDeps([0,1,2,3]),import.meta.url),this.__drawerLoaded=!0})()),this.__ensureDrawerPromise}async __ensureTabs(){if(!this.__tabsLoaded)return this.__ensureTabsPromise??(this.__ensureTabsPromise=(async()=>{await Promise.all([g(()=>import("../scb-tabs/scb-tabs.js"),__vite__mapDeps([4,5,2,6,1,7]),import.meta.url),g(()=>import("../scb-tabs/scb-secondary-tab.js"),__vite__mapDeps([7,1,5,2]),import.meta.url)]),this.__tabsLoaded=!0})()),this.__ensureTabsPromise}async __ensureSearch(){if(!this.__searchLoaded)return this.__ensureSearchPromise??(this.__ensureSearchPromise=(async()=>{await g(()=>import("../scb-search/scb-search.js"),__vite__mapDeps([8,2,9,1,10,5]),import.meta.url),this.__searchLoaded=!0})()),this.__ensureSearchPromise}get _slotEl(){return this.shadowRoot?.querySelector("slot#data-slot")??null}get _top(){return this.renderRoot.querySelector(".top-row")}get _util(){return this.renderRoot.querySelector(".utility")}get _tabsEl(){return this.renderRoot.querySelector("scb-tabs")}get _logoGroup(){return this.renderRoot.querySelector(".logo-wrap")||this.renderRoot.querySelector(".logo-group")}get _searchWrap(){return this.renderRoot.querySelector(".search")}get _menuBtn(){return this.renderRoot.querySelector(".menu-trigger")}get _searchEl(){return this.renderRoot.querySelector(`#${this._searchId}`)}_attachSlotObservers(){this._slotMo?.disconnect();const e=new MutationObserver(t=>{this._scheduleHarvest()});this._slotMo=e,e.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["label","href","icon","target"]})}_setCollapsed(e){this._collapsed!==e&&(this._collapsed=e,e?this.setAttribute("data-collapsed",""):this.removeAttribute("data-collapsed"))}_setHideSearch(e){e?this.setAttribute("data-hide-search",""):this.removeAttribute("data-hide-search")}_setHideLogoText(e){this._hideLogoText!==e&&(this._hideLogoText=e,e?this.setAttribute("data-hide-logo-text",""):this.removeAttribute("data-hide-logo-text"))}_num(e,t){const r=Number.parseFloat(String(e??"").trim());return Number.isFinite(r)?r:t}_tokenPx(e,t){const r=getComputedStyle(this);return this._num(r.getPropertyValue(e),t)}_visible(e){return e?getComputedStyle(e).display!=="none":!1}_overflows(e){return!e||!this._visible(e)?!1:e.scrollWidth>e.clientWidth+1}firstUpdated(){this.updateComplete.then(()=>{this._harvest(),this._attachSlotObservers()});const e=this._top;e&&(this._ro=new ResizeObserver(()=>this._scheduleMeasure()),this._ro.observe(e)),window.addEventListener("resize",this._onWindowResize,{passive:!0});const t=this._menuBtn,r=()=>this._ensureDrawerMounted();t?.addEventListener("pointerenter",r,{once:!0}),t?.addEventListener("focusin",r,{once:!0}),t?.addEventListener("touchstart",r,{once:!0,passive:!0});const i=o=>"requestIdleCallback"in window?window.requestIdleCallback(o,{timeout:1500}):setTimeout(o,600);this.showDrawer&&i(()=>{this.__ensureDrawer()}),this._collapsed||i(()=>{this.__ensureTabs()}),this.showSearch&&i(()=>{this.__ensureSearch()})}updated(e){e.has("searchMax")&&this.style.setProperty("--scb-header-search-max",this.searchMax??"480px"),e.has("searchMin")&&this.style.setProperty("--scb-header-search-min",this.searchMin??"320px"),e.has("searchHeight")&&(this.searchHeight&&this.searchHeight.trim()?this.style.setProperty("--scb-search-height",this.searchHeight.trim()):this.style.removeProperty("--scb-search-height")),(e.has("utilityItems")||e.has("tabs")||e.has("logoText")||e.has("activeTab")||e.has("_slotTabs")||e.has("_slotUtils")||e.has("_slotMenu")||e.has("showDrawer")||e.has("showSearch")||e.has("searchMax")||e.has("searchMin"))&&this.updateComplete.then(()=>{this._scheduleMeasure(),this._applyActiveToTabs()}),e.has("showSearch")&&this.showSearch&&!this.__searchLoaded&&this.__ensureSearch()}disconnectedCallback(){this._ro?.disconnect(),this._slotMo?.disconnect(),window.removeEventListener("resize",this._onWindowResize),super.disconnectedCallback()}async _ensureDrawerMounted(){this._drawerMounted||(await this.__ensureDrawer(),this._drawerMounted=!0,await this.updateComplete)}_openDrawerNow(){const e=this.renderRoot.querySelector(`#${this._drawerId}`);e&&(e.open=!0,e.setAttribute("open",""),e.show?.(),e.openDrawer?.(),this._drawerExpanded=!0,this._syncMenuBtnAria(),this.dispatchEvent(new CustomEvent("drawer-open",{bubbles:!0,composed:!0})))}_closeDrawerNow(){const e=this.renderRoot.querySelector(`#${this._drawerId}`);e&&(e.open=!1),this._drawerExpanded=!1,this._syncMenuBtnAria(),this.dispatchEvent(new CustomEvent("drawer-close",{bubbles:!0,composed:!0}))}_syncMenuBtnAria(){const e=this.renderRoot.querySelector(".menu-trigger");e&&e.setAttribute("aria-expanded",String(this._drawerExpanded))}_applyActiveToTabs(){const e=this._tabsEl;if(!e)return;e.activeTabIndex=this.activeTab,e.querySelectorAll("scb-secondary-tab").forEach((r,i)=>{r.selected=i===this.activeTab})}_renderDrawerNodes(e){return!e||e.length===0?c``:c`${e.map(t=>{const r=Array.isArray(t.children)&&t.children.length>0;return c`
         <scb-drawer-item
           label=${t.label}
           ?selected=${!1}
           leading-icon=${t.icon??""}
           item-href=${t.href??""}
         >
-          ${s?c`
+          ${r?c`
             <scb-sub-drawer label=${t.label}>
-              ${t.children.map(a=>c`
+              ${t.children.map(i=>c`
                 <scb-drawer-item
-                  label=${a.label}
-                  item-href=${a.href??""}
-                  leading-icon=${a.icon??""}
+                  label=${i.label}
+                  item-href=${i.href??""}
+                  leading-icon=${i.icon??""}
                 ></scb-drawer-item>
               `)}
             </scb-sub-drawer>
           `:d}
         </scb-drawer-item>
-      `})}`}_syncFlags(e,t){this.toggleAttribute("data-no-utility",e),this.toggleAttribute("data-no-search",t)}render(){const e=this._slotTabs.length?this._slotTabs:this.tabs,t=this._slotUtils.length?this._slotUtils:this.utilityItems,s=this._slotMenu.length?this._slotMenu:this.menuData??[];this._syncFlags(t.length===0,!this.showSearch);const a=this.searchHeight&&this.searchHeight.trim()?`--scb-search-height:${this.searchHeight.trim()}`:d;return c`
+      `})}`}_syncFlags(e,t){this.toggleAttribute("data-no-utility",e),this.toggleAttribute("data-no-search",t)}render(){const e=this._slotTabs.length?this._slotTabs:this.tabs,t=this._slotUtils.length?this._slotUtils:this.utilityItems,r=this._slotMenu.length?this._slotMenu:this.menuData??[];this._syncFlags(t.length===0,!this.showSearch);const i=this.searchHeight&&this.searchHeight.trim()?`--scb-search-height:${this.searchHeight.trim()}`:d;return c`
       <slot id="data-slot" @slotchange=${()=>{this._harvest(),this._attachSlotObservers()}} hidden></slot>
 
       <div
@@ -42,12 +42,16 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as x,n as l,r as u,i
                 </nav>
 
                 ${this.showSearch?c`
-                  <div class="search" style=${a} @focusin=${()=>this.__ensureSearch()} @pointerenter=${()=>this.__ensureSearch()}>
+                  <div class="search" style=${i} @focusin=${()=>this.__ensureSearch()} @pointerenter=${()=>this.__ensureSearch()}>
                     <scb-search
                       id=${this._searchId}
                       size="compact"
-                      style=${a}
+                      style=${i}
+                      .value=${this.searchText}
                       .supportingText=${this.searchPlaceholder??""}
+                      @scb-search-input=${this._onSearchInput}
+                      @scb-search-submit=${this._onSearchSubmit}
+                      @scb-search-clear=${this._onSearchClear}
                     ></scb-search>
                     <scb-button
                       variant="filled-tonal"
@@ -100,7 +104,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as x,n as l,r as u,i
 
           ${this.drawerSectionLabel?c`<scb-drawer-section .label=${this.drawerSectionLabel}></scb-drawer-section>`:d}
 
-          ${this._renderDrawerNodes(s)}
+          ${this._renderDrawerNodes(r)}
 
           ${this.includeUtilityInDrawer&&(t?.length??0)>0?c`
             <scb-drawer-section label=''></scb-drawer-section>
@@ -120,7 +124,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as x,n as l,r as u,i
         </g>
         <defs><clipPath id="clip0_scb_header"><rect width="48" height="54" fill="white" /></clipPath></defs>
       </svg>
-    `}};r._JSON_ARRAY={fromAttribute:e=>{if(e==null||e==="")return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}},toAttribute:e=>e==null?null:JSON.stringify(e)};r.BP_SM_DEFAULT=600;r.BP_MD_DEFAULT=840;r.styles=x`
+    `}};s._JSON_ARRAY={fromAttribute:e=>{if(e==null||e==="")return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}},toAttribute:e=>e==null?null:JSON.stringify(e)};s.BP_SM_DEFAULT=600;s.BP_MD_DEFAULT=840;s.styles=x`
     :host {
       display:block;
       background: var(--scb-header-background, var(--md-sys-color-surface))
@@ -265,4 +269,4 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as x,n as l,r as u,i
     :host([data-hide-logo-text]) .logo-text {
       display: none;
     }
-  `;r._nextFrame=()=>new Promise(e=>requestAnimationFrame(()=>e()));i([l({type:String,attribute:"max-width"})],r.prototype,"maxWidth",2);i([l({type:String,attribute:"logo-text"})],r.prototype,"logoText",2);i([l({type:String,attribute:"logo-href"})],r.prototype,"logoHref",2);i([l({type:Boolean,reflect:!0})],r.prototype,"banner",2);i([l({type:String,attribute:"banner-label"})],r.prototype,"bannerLabel",2);i([l({attribute:"tabs",converter:r._JSON_ARRAY})],r.prototype,"tabs",2);i([l({type:Number,attribute:"active-tab"})],r.prototype,"activeTab",2);i([l({attribute:"utility-items",converter:r._JSON_ARRAY})],r.prototype,"utilityItems",2);i([l({type:String,attribute:"search-placeholder"})],r.prototype,"searchPlaceholder",2);i([l({type:String,attribute:"drawer-label"})],r.prototype,"drawerLabel",2);i([l({type:String,attribute:"drawer-sub-label"})],r.prototype,"drawerSubLabel",2);i([l({type:String,attribute:"drawer-section-label"})],r.prototype,"drawerSectionLabel",2);i([l({type:String,attribute:"drawer-search-placeholder"})],r.prototype,"drawerSearchPlaceholder",2);i([l({attribute:"menu-data",converter:r._JSON_ARRAY})],r.prototype,"menuData",2);i([l({attribute:"show-drawer",reflect:!0,converter:w})],r.prototype,"showDrawer",2);i([l({attribute:"show-search",reflect:!0,converter:w})],r.prototype,"showSearch",2);i([l({attribute:"include-utility-in-drawer",reflect:!0,converter:w})],r.prototype,"includeUtilityInDrawer",2);i([l({type:String,attribute:"search-max"})],r.prototype,"searchMax",2);i([l({type:String,attribute:"search-min"})],r.prototype,"searchMin",2);i([l({type:String,attribute:"search-height"})],r.prototype,"searchHeight",2);i([u()],r.prototype,"_drawerId",2);i([u()],r.prototype,"_drawerMounted",2);i([u()],r.prototype,"_drawerExpanded",2);i([u()],r.prototype,"_searchId",2);i([u()],r.prototype,"_slotTabs",2);i([u()],r.prototype,"_slotUtils",2);i([u()],r.prototype,"_slotMenu",2);i([u()],r.prototype,"_collapsed",2);i([u()],r.prototype,"_hideLogoText",2);r=i([C("scb-header")],r);
+  `;s._nextFrame=()=>new Promise(e=>requestAnimationFrame(()=>e()));a([l({type:String,attribute:"max-width"})],s.prototype,"maxWidth",2);a([l({type:String,attribute:"logo-text"})],s.prototype,"logoText",2);a([l({type:String,attribute:"logo-href"})],s.prototype,"logoHref",2);a([l({type:Boolean,reflect:!0})],s.prototype,"banner",2);a([l({type:String,attribute:"banner-label"})],s.prototype,"bannerLabel",2);a([l({attribute:"tabs",converter:s._JSON_ARRAY})],s.prototype,"tabs",2);a([l({type:Number,attribute:"active-tab"})],s.prototype,"activeTab",2);a([l({attribute:"utility-items",converter:s._JSON_ARRAY})],s.prototype,"utilityItems",2);a([l({type:String,attribute:"search-placeholder"})],s.prototype,"searchPlaceholder",2);a([l({type:String,attribute:"drawer-label"})],s.prototype,"drawerLabel",2);a([l({type:String,attribute:"drawer-sub-label"})],s.prototype,"drawerSubLabel",2);a([l({type:String,attribute:"drawer-section-label"})],s.prototype,"drawerSectionLabel",2);a([l({type:String,attribute:"drawer-search-placeholder"})],s.prototype,"drawerSearchPlaceholder",2);a([l({attribute:"menu-data",converter:s._JSON_ARRAY})],s.prototype,"menuData",2);a([l({attribute:"show-drawer",reflect:!0,converter:v})],s.prototype,"showDrawer",2);a([l({attribute:"show-search",reflect:!0,converter:v})],s.prototype,"showSearch",2);a([l({attribute:"include-utility-in-drawer",reflect:!0,converter:v})],s.prototype,"includeUtilityInDrawer",2);a([l({type:String,attribute:"search-max"})],s.prototype,"searchMax",2);a([l({type:String,attribute:"search-min"})],s.prototype,"searchMin",2);a([l({type:String,attribute:"search-height"})],s.prototype,"searchHeight",2);a([l({type:String,attribute:"search-text",reflect:!0})],s.prototype,"searchText",2);a([u()],s.prototype,"_drawerId",2);a([u()],s.prototype,"_drawerMounted",2);a([u()],s.prototype,"_drawerExpanded",2);a([u()],s.prototype,"_searchId",2);a([u()],s.prototype,"_slotTabs",2);a([u()],s.prototype,"_slotUtils",2);a([u()],s.prototype,"_slotMenu",2);a([u()],s.prototype,"_collapsed",2);a([u()],s.prototype,"_hideLogoText",2);s=a([C("scb-header")],s);

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

@@ -0,0 +1,175 @@
+import{a as g,n as d,i as b,x as s,t as h}from"../../vendor/vendor.js";import"../scb-link/scb-link.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-tooltip/scb-tooltip.js";(function(){try{var p=typeof globalThis<"u"?globalThis:window;if(!p.__scb_ce_guard_installed__){p.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(n,i,r){try{customElements.get(n)||e(n,i,r)}catch(a){var o=String(a||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,c=(p,e,n,i)=>{for(var r=i>1?void 0:i?v(e,n):e,o=p.length-1,a;o>=0;o--)(a=p[o])&&(r=(i?a(e,n,r):a(r))||r);return i&&r&&u(e,n,r),r};let l=class extends b{constructor(){super(...arguments),this.variant="icon-text",this.page=1,this.totalPages=0,this.pagingHref="/products?page=",this.paginationAriaLabel="Paginering",this.currentAriaLabel="Nuvarande sida, ",this.pagingNumberAriaLabel="Gå till sida ",this.isNarrow=window.innerWidth<=768,this._onResize=()=>{this.isNarrow=window.innerWidth<=768}}_prevPage(){this.page>1&&this.page--,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:this.page}}))}_nextPage(){this.page<this.totalPages&&this.page++,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:this.page}}))}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._onResize),this._onResize()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._onResize)}render(){if(this.totalPages===0)return null;const p=this.variant?`${this.variant.toLowerCase()}`:"",e=[],{page:n,totalPages:i}=this,r=window.innerWidth<=768,o=r?1:2,a=t=>t===n?s`
+        <li>
+            <span
+            class="page-number active"
+            aria-current="page"
+            aria-label="${this.currentAriaLabel} ${t}"
+            >${t}</span>
+        </li>
+        `:s`
+        <li>
+            <scb-link
+                class="page-number${t===n?" active":""}"
+                @click=${()=>{this.page=t,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:t}}))}}
+                aria-current=${t===n?"page":void 0}
+                aria-label="${this.pagingNumberAriaLabel} ${t}"
+                href=${this.pagingHref}${t}
+                ?disabled=${t===n}>${t}
+            </scb-link>
+        </li>
+    `;if(i<=8)for(let t=1;t<=i;t++)e.push(a(t));else if(e.push(a(1)),n<=4&&!r){for(let t=2;t<=5;t++)e.push(a(t));i>6?(e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(a(i))):i===6&&e.push(a(i))}else if(n<=3&&r){for(let t=2;t<=3;t++)e.push(a(t));i>4?(e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(a(i))):i===4&&e.push(a(i))}else if(n>=i-(o+1)){e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let t=i-o*2;t<=i;t++)t>1&&e.push(a(t))}else{e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let t=n-o;t<=n+o;t++)t>1&&t<i&&e.push(a(t));e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(a(i))}return r?s`      
+         <nav aria-label="${this.paginationAriaLabel}" class="pagination ${p}">
+            <div class="pagination-row">
+                <div class="prev">
+                    ${this.variant==="icon"?s`<scb-icon-button icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page===1} aria-label="Föregående sida"></scb-icon-button>`:s`<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>`}       
+                </div>
+                <ol>
+                    ${e}
+                </ol>
+            </div>
+            <div class="next">
+            ${this.variant==="icon"?s`<scb-icon-button icon="chevron_right" @click=${this._nextPage} ?disabled=${this.page===this.totalPages} aria-label="Nästa sida"></scb-icon-button>`:s`<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>`}
+            </div>
+        </nav>
+      `:s`
+        <nav aria-label="${this.paginationAriaLabel}" class="pagination ${p}">
+            <div class="pagination-row">
+                <div class="prev">
+                 ${this.variant==="icon"?s`<scb-icon-button icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page===1} aria-label="Föregående sida"></scb-icon-button>`:s`<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>`}
+                </div>
+                <ol>
+                    ${e}
+                </ol>
+                <div class="next">
+                    ${this.variant==="icon"?s`<scb-icon-button icon="chevron_right" @click=${this._nextPage} ?disabled=${this.page===this.totalPages} aria-label="Nästa sida"></scb-icon-button>`:s`<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>`}
+                </div>
+            </div>
+        </nav>
+      `}};l.styles=[g`
+    :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-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;
+    }
+    .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;
+      }
+
+@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;
+    }
+  }
+`];c([d({type:String})],l.prototype,"variant",2);c([d({type:Number})],l.prototype,"page",2);c([d({type:Number,attribute:"total-pages"})],l.prototype,"totalPages",2);c([d({type:String,attribute:"paging-href"})],l.prototype,"pagingHref",2);c([d({type:String,attribute:"pagination-aria-label"})],l.prototype,"paginationAriaLabel",2);c([d({type:String,attribute:"current-aria-label"})],l.prototype,"currentAriaLabel",2);c([d({type:String,attribute:"paging-number-aria-label"})],l.prototype,"pagingNumberAriaLabel",2);c([d({type:Boolean})],l.prototype,"isNarrow",2);l=c([h("scb-pagination")],l);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.71",
+    "version":  "0.1.73",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -226,6 +226,10 @@
                                                     "import":  "./scb-notification-card/scb-notification-card.js",
                                                     "require":  "./scb-notification-card/scb-notification-card.js"
                                                 },
+                    "./scb-pagination":  {
+                                             "import":  "./scb-pagination/scb-pagination.js",
+                                             "require":  "./scb-pagination/scb-pagination.js"
+                                         },
                     "./scb-progress-indicator":  {
                                                      "import":  "./scb-progress-indicator/scb-progress-indicator.js",
                                                      "require":  "./scb-progress-indicator/scb-progress-indicator.js"
@@ -292,5 +296,5 @@
                                       },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "4AFCE4286FCF8A151F1ACB56B2D0ABAE1670938C70F8E5DADA1BEA57F7034084"
+    "buildHash":  "1E21267DF6FC15177380C53642516E5D5CB28925177DA537848C86C04E5E3520"
 }

package/scb-header/scb-header.d.ts

@@ -36,6 +36,7 @@ export declare class ScbHeader extends LitElement {
     searchMax?: string;
     searchMin?: string;
     searchHeight?: string;
+    searchText: string;
     private _drawerId;
     private _drawerMounted;
     private _drawerExpanded;
@@ -102,6 +103,9 @@ export declare class ScbHeader extends LitElement {
     private _applyActiveToTabs;
     private _renderDrawerNodes;
     private _syncFlags;
+    private _onSearchInput;
+    private _onSearchSubmit;
+    private _onSearchClear;
     render(): TemplateResult;
     private _renderLogo;
 }

package/scb-header/scb-header.js

@@ -1,15 +1,15 @@
 import { css as C, LitElement as T, html as h, nothing as u } from "lit";
-import { property as l, state as p, customElement as M } from "lit/decorators.js";
+import { property as l, state as p, customElement as $ } from "lit/decorators.js";
 import "@material/web/focus/md-focus-ring.js";
 import "../scb-grid/scb-grid-item.js";
 import "../scb-grid/scb-grid.js";
 import "../scb-link/scb-link.js";
 import "../scb-icon-button/scb-icon-button.js";
 import "../scb-button/scb-button.js";
-var $ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (e, t, r, a) => {
+var M = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (e, t, r, a) => {
   for (var o = a > 1 ? void 0 : a ? A(t, r) : t, c = e.length - 1, n; c >= 0; c--)
     (n = e[c]) && (o = (a ? n(t, r, o) : n(o)) || o);
-  return a && o && $(t, r, o), o;
+  return a && o && M(t, r, o), o;
 };
 const w = {
   fromAttribute: (e) => e == null ? !0 : !/^(false|0|off|no)$/i.test(e),
@@ -17,7 +17,7 @@ const w = {
 };
 let s = class extends T {
   constructor() {
-    super(...arguments), this.maxWidth = "1440px", this.logoText = "", this.logoHref = "/", this.banner = !1, this.tabs = [], this.activeTab = 0, this.utilityItems = [], this.showDrawer = !0, this.showSearch = !0, this.includeUtilityInDrawer = !1, this._drawerId = "main-drawer", this._drawerMounted = !1, this._drawerExpanded = !1, this._searchId = "header-search", this._slotTabs = [], this._slotUtils = [], this._slotMenu = [], this._measureScheduled = !1, this._scheduleMeasure = () => {
+    super(...arguments), this.maxWidth = "1440px", this.logoText = "", this.logoHref = "/", this.banner = !1, this.tabs = [], this.activeTab = 0, this.utilityItems = [], this.showDrawer = !0, this.showSearch = !0, this.includeUtilityInDrawer = !1, this.searchText = "", this._drawerId = "main-drawer", this._drawerMounted = !1, this._drawerExpanded = !1, this._searchId = "header-search", this._slotTabs = [], this._slotUtils = [], this._slotMenu = [], this._measureScheduled = !1, this._scheduleMeasure = () => {
       this._measureScheduled || (this._measureScheduled = !0, requestAnimationFrame(() => {
         this._measureScheduled = !1, this._measure();
       }));
@@ -98,8 +98,8 @@ let s = class extends T {
         t.submit();
         return;
       }
-      const r = (t == null ? void 0 : t.value) ?? void 0;
-      this.dispatchEvent(new CustomEvent("search-click", {
+      const r = (t == null ? void 0 : t.value) ?? "";
+      this.searchText = r, this.dispatchEvent(new CustomEvent("search-click", {
         detail: { value: r },
         bubbles: !0,
         composed: !0
@@ -114,6 +114,30 @@ let s = class extends T {
         bubbles: !0,
         composed: !0
       }));
+    }, this._onSearchInput = (e) => {
+      var t;
+      this.searchText = ((t = e.detail) == null ? void 0 : t.value) ?? "", this.dispatchEvent(new CustomEvent("search-input", {
+        detail: { value: this.searchText },
+        bubbles: !0,
+        composed: !0
+      })), this.dispatchEvent(new CustomEvent("search-text-change", {
+        detail: { value: this.searchText },
+        bubbles: !0,
+        composed: !0
+      }));
+    }, this._onSearchSubmit = (e) => {
+      var t, r;
+      this.searchText = ((t = e.detail) == null ? void 0 : t.value) ?? "", this.dispatchEvent(new CustomEvent("search-change", {
+        detail: { value: this.searchText, active: (r = e.detail) == null ? void 0 : r.active },
+        bubbles: !0,
+        composed: !0
+      }));
+    }, this._onSearchClear = () => {
+      this.searchText = "", this.dispatchEvent(new CustomEvent("search-text-change", {
+        detail: { value: "" },
+        bubbles: !0,
+        composed: !0
+      }));
     };
   }
   get _HYST() {
@@ -324,7 +348,11 @@ let s = class extends T {
                       id=${this._searchId}
                       size="compact"
                       style=${a}
+                      .value=${this.searchText}
                       .supportingText=${this.searchPlaceholder ?? ""}
+                      @scb-search-input=${this._onSearchInput}
+                      @scb-search-submit=${this._onSearchSubmit}
+                      @scb-search-clear=${this._onSearchClear}
                     ></scb-search>
                     <scb-button
                       variant="filled-tonal"
@@ -624,6 +652,9 @@ i([
 i([
   l({ type: String, attribute: "search-height" })
 ], s.prototype, "searchHeight", 2);
+i([
+  l({ type: String, attribute: "search-text", reflect: !0 })
+], s.prototype, "searchText", 2);
 i([
   p()
 ], s.prototype, "_drawerId", 2);
@@ -652,7 +683,7 @@ i([
   p()
 ], s.prototype, "_hideLogoText", 2);
 s = i([
-  M("scb-header")
+  $("scb-header")
 ], s);
 export {
   s as ScbHeader