scb-wc 0.1.76 → 0.1.78

package/scb-components/index.d.ts

@@ -0,0 +1,99 @@
+export * from './scb-accordion/scb-accordion-item';
+export * from './scb-accordion/scb-accordion';
+export * from './scb-action-card/scb-action-card';
+export * from './scb-app-bar/scb-app-bar';
+export * from './scb-avatar/scb-avatar';
+export * from './scb-badge/scb-badge';
+export * from './scb-breadcrumb/scb-breadcrumb-item';
+export * from './scb-breadcrumb/scb-breadcrumb';
+export * from './scb-button/scb-button';
+export * from './scb-calendar/scb-calendar-event';
+export * from './scb-calendar/scb-calendar';
+export * from './scb-calendar-card/scb-calendar-card';
+export * from './scb-card/scb-action-card';
+export * from './scb-card/scb-card';
+export * from './scb-card/scb-container-card';
+export * from './scb-card/scb-link-card';
+export * from './scb-card/scb-list-card';
+export * from './scb-card/scb-social-card';
+export * from './scb-checkbox/scb-checkbox-group';
+export * from './scb-checkbox/scb-checkbox';
+export * from './scb-chevron/scb-chevron';
+export * from './scb-chip/scb-chip';
+export * from './scb-collapse/scb-collapse';
+export * from './scb-container-card/scb-container-card';
+export * from './scb-cookies-consent/scb-cookies-consent';
+export * from './scb-datepicker/scb-datepicker';
+export * from './scb-dialog/scb-dialog';
+export * from './scb-divider/scb-divider';
+export * from './scb-drawer/scb-drawer';
+export * from './scb-drop-zone/scb-drop-zone';
+export * from './scb-dropdown/scb-dropdown';
+export * from './scb-fab/scb-fab';
+export * from './scb-fact-card/scb-fact-card-content';
+export * from './scb-fact-card/scb-fact-card';
+export * from './scb-footer/scb-footer-section';
+export * from './scb-footer/scb-footer';
+export * from './scb-gallery-grid/scb-gallery-grid';
+export * from './scb-grid/scb-grid-item';
+export * from './scb-grid/scb-grid';
+export * from './scb-grid/scb-stack';
+export * from './scb-header/scb-header-menu-group';
+export * from './scb-header/scb-header-menu-item';
+export * from './scb-header/scb-header-tab';
+export * from './scb-header/scb-header-utility';
+export * from './scb-header/scb-header';
+export * from './scb-horizontal-scroller/scb-horizontal-scroller';
+export * from './scb-icon-button/scb-icon-button';
+export * from './scb-keyfigure-card/scb-keyfigure-card';
+export * from './scb-link/scb-link';
+export * from './scb-link-card/scb-link-card';
+export * from './scb-list/scb-list-item';
+export * from './scb-list/scb-list';
+export * from './scb-list-card/scb-list-card';
+export * from './scb-menu/scb-menu-item';
+export * from './scb-menu/scb-menu-section';
+export * from './scb-menu/scb-menu';
+export * from './scb-menu/scb-sub-menu';
+export * from './scb-nav/scb-nav-item';
+export * from './scb-nav/scb-nav';
+export * from './scb-notification-card/scb-notification-card';
+export * from './scb-options-menu/scb-options-menu-item';
+export * from './scb-options-menu/scb-options-menu';
+export * from './scb-options-menu/scb-options-sub-menu';
+export * from './scb-overlay/scb-overlay';
+export * from './scb-pagination/scb-pagination';
+export * from './scb-progress-indicator/scb-progress-indicator';
+export * from './scb-progress-stepper/scb-progress-step';
+export * from './scb-progress-stepper/scb-progress-stepper';
+export * from './scb-radio-button/scb-radio-button';
+export * from './scb-radio-button/scb-radio-group';
+export * from './scb-scrollspy/scb-scrollspy';
+export * from './scb-search/scb-search';
+export * from './scb-segmented-button/scb-segmented-button';
+export * from './scb-segmented-button/scb-segmented-item';
+export * from './scb-select/scb-select-option';
+export * from './scb-select/scb-select';
+export * from './scb-skeleton/scb-skeleton';
+export * from './scb-slider/scb-slider';
+export * from './scb-snackbar/scb-snackbar';
+export * from './scb-social-card/scb-social-card';
+export * from './scb-status-pill/scb-status-pill';
+export * from './scb-stepper/scb-step';
+export * from './scb-stepper/scb-stepper';
+export * from './scb-switch/scb-switch';
+export * from './scb-table/scb-table';
+export * from './scb-table-advanced/scb-table-advanced';
+export * from './scb-tabs/scb-primary-tab';
+export * from './scb-tabs/scb-secondary-tab';
+export * from './scb-tabs/scb-tabs';
+export * from './scb-textfield/scb-textfield';
+export * from './scb-toc/scb-toc-item';
+export * from './scb-toc/scb-toc';
+export * from './scb-tooltip/scb-tooltip';
+export * from './scb-viz/scb-viz-actions-runtime';
+export * from './scb-viz/scb-viz-print-runtime';
+export * from './scb-viz/scb-viz-series-differentiation-registry';
+export * from './scb-viz/scb-viz-series-differentiation-runtime';
+export * from './scb-viz/scb-viz-table-runtime';
+export * from './scb-viz/scb-viz';

package/scb-components/scb-chevron/scb-chevron.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class ScbChevron extends LitElement {
+    open: boolean;
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-chevron': ScbChevron;
+    }
+}

package/scb-components/scb-datepicker/scb-datepicker.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+export declare class ScbDatepicker extends LitElement {
+    private _currentDate;
+    private _selectedDate;
+    private _showMonthDropdown;
+    private _showYearDropdown;
+    variant: 'datetime-local' | 'date';
+    lang: 'sv' | 'en';
+    selectedValue: string;
+    open: boolean;
+    private _selectedHour;
+    private _selectedMinute;
+    private readonly _viewportMargin;
+    private readonly _popupOffset;
+    private _onWindowReposition;
+    private _isRenderedInsideDialog;
+    private _positionPopupWithinViewport;
+    static styles: import('lit').CSSResult[];
+    updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private _monthNames;
+    render(): TemplateResult;
+    private _getMonthDays;
+    private _outsideClickHandler;
+    private _toggleMonthDropdown;
+    private _toggleYearDropdown;
+    private _onMonthChangeCustom;
+    private _onYearChangeCustom;
+    private _prevMonth;
+    private _prevYear;
+    private _nextMonth;
+    private _nextYear;
+    private _isToday;
+    private _isSelected;
+    private _selectDate;
+    private _fireDateTimeChange;
+    private _onTimeChange;
+    private _close;
+}

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

@@ -101,6 +101,9 @@ export declare class ScbHeader extends LitElement {
     private _sameNavItems;
     private _sameUtilityItems;
     private _sameMenuNodes;
+    private _isDrawerCloseNode;
+    private _syncDrawerCloseNode;
+    private _syncDrawerCloseNodes;
     private _harvest;
     private _setCollapsed;
     private _setHideSearch;
@@ -128,6 +131,8 @@ export declare class ScbHeader extends LitElement {
     private _onGlobalFocusRingPointerDown;
     private _onLocalFocusIn;
     private _ensureDrawerReady;
+    private _drawerSlotContains;
+    private _ensureDrawerSlotComponentsReady;
     private _ensureDropdownReady;
     private _onDrawerOpened;
     private _onDrawerClosed;

package/scb-datepicker/scb-datepicker.js

@@ -467,3 +467,4 @@ var s = class extends t {
 };
 e([o()], s.prototype, "_currentDate", void 0), e([o()], s.prototype, "_selectedDate", void 0), e([o()], s.prototype, "_showMonthDropdown", void 0), e([o()], s.prototype, "_showYearDropdown", void 0), e([a({ type: String })], s.prototype, "variant", void 0), e([a({ type: String })], s.prototype, "lang", void 0), e([a({ type: String })], s.prototype, "selectedValue", void 0), e([a({ type: Boolean })], s.prototype, "open", void 0), e([o()], s.prototype, "_selectedHour", void 0), e([o()], s.prototype, "_selectedMinute", void 0), s = e([i("scb-datepicker")], s);
 //#endregion
+export { s as ScbDatepicker };

package/scb-header/scb-header.js

@@ -122,11 +122,16 @@ var u = {
 				href: e.getAttribute("href") ?? void 0,
 				icon: e.getAttribute("icon") ?? void 0
 			}), c = (e) => {
-				e.hasAttribute("role") && e.removeAttribute("role"), e.getAttribute("aria-hidden") !== "true" && e.setAttribute("aria-hidden", "true");
+				e.hasAttribute("role") && e.removeAttribute("role"), e.hasAttribute("hidden") || e.setAttribute("hidden", ""), e.getAttribute("aria-hidden") !== "true" && e.setAttribute("aria-hidden", "true");
 			};
 			for (let e of t) {
 				let t = e.tagName.toLowerCase();
+				if (this._isDrawerCloseNode(e)) {
+					this._syncDrawerCloseNode(e);
+					continue;
+				}
 				if (t === "scb-header-tab") {
+					c(e);
 					let t = e.getAttribute("label") ?? "", r = e.getAttribute("href"), i = r && r.trim() !== "" ? r : void 0;
 					(e.hasAttribute("selected") || e.getAttribute("selected") === "true" || e.getAttribute("active") === "true" || e.getAttribute("aria-current") === "page") && a === -1 && (a = n.length), n.push({
 						kind: "tab",
@@ -171,6 +176,7 @@ var u = {
 					continue;
 				}
 				if (t === "scb-header-menu-group") {
+					c(e);
 					let t = {
 						label: e.getAttribute("label") ?? "",
 						icon: e.getAttribute("icon") ?? void 0,
@@ -179,7 +185,11 @@ var u = {
 					e.querySelectorAll("scb-header-menu-item").forEach((e) => t.children.push(s(e))), i.push(t);
 					continue;
 				}
-				t === "scb-header-menu-item" && i.push(s(e));
+				if (t === "scb-header-menu-item") {
+					c(e), i.push(s(e));
+					continue;
+				}
+				e.hasAttribute("slot") || c(e);
 			}
 			let l = !this._sameNavItems(this._slotNavItems, n), u = !this._sameUtilityItems(this._slotUtils, r), d = !this._sameMenuNodes(this._slotMenu, i);
 			l && (this._slotNavItems = n), u && (this._slotUtils = r), d && (this._slotMenu = i), o && this._ensureDropdownReady(), !this.hasAttribute("active-tab") && a >= 0 && this.activeTab !== a && (this.activeTab = a), (e.scheduleMeasure ?? !0) && queueMicrotask(() => {
@@ -1155,6 +1165,23 @@ var u = {
       border: 0;
     }
 
+    .drawer-close {
+      box-sizing: border-box;
+      display: flex;
+      justify-content: flex-end;
+      padding-block-start: var(--spacing-4, 12px);
+      padding-inline: var(--spacing-4, 12px);
+      background: var(--md-sys-color-surface-container-lowest);
+    }
+
+    .drawer-close[hidden] {
+      display: none;
+    }
+
+    .drawer-close ::slotted(*) {
+      flex: 0 0 auto;
+    }
+
     .divider {
       border-bottom: var(--stroke-border, 1px) solid
         var(--md-sys-color-outline-variant, #e0e0e0);
@@ -1265,6 +1292,19 @@ var u = {
 		}
 		return !0;
 	}
+	_isDrawerCloseNode(e) {
+		let t = e.tagName.toLowerCase(), n = e.getAttribute("slot");
+		if (n === "drawer-close") return !0;
+		if (n || t !== "scb-icon-button") return !1;
+		let r = (e.getAttribute("icon") ?? "").trim().toLowerCase(), i = (e.getAttribute("aria-label") ?? "").trim().toLowerCase();
+		return r === "close" || i.includes("stäng") || i.includes("close");
+	}
+	_syncDrawerCloseNode(e) {
+		e.getAttribute("slot") !== "drawer-close" && e.setAttribute("slot", "drawer-close"), e.setAttribute("data-drawer-close", this._drawerId), e.setAttribute("aria-controls", this._drawerId), this._drawerReady ? (e.removeAttribute("hidden"), e.removeAttribute("aria-hidden")) : (e.hasAttribute("hidden") || e.setAttribute("hidden", ""), e.getAttribute("aria-hidden") !== "true" && e.setAttribute("aria-hidden", "true"));
+	}
+	_syncDrawerCloseNodes() {
+		for (let e of Array.from(this.children)) this._isDrawerCloseNode(e) && this._syncDrawerCloseNode(e);
+	}
 	_setCollapsed(e) {
 		this._collapsed !== e && (this._collapsed = e, e ? this.setAttribute("data-collapsed", "") : this.removeAttribute("data-collapsed"));
 	}
@@ -1364,11 +1404,24 @@ var u = {
 		customElements.get("md-focus-ring") || (this._focusRingImportPromise ??= import("@material/web/focus/md-focus-ring.js").then(() => void 0), this._focusRingImportPromise);
 	}
 	async _ensureDrawerReady() {
-		this._drawerReady ||= (this._drawerImportPromise ??= Promise.all([
+		this._drawerReady || (this._drawerImportPromise ??= Promise.all([
 			import("../scb-drawer/scb-drawer.js"),
 			import("../scb-menu/scb-menu.js"),
-			import("../scb-search/scb-search.js")
-		]).then(() => void 0), await this._drawerImportPromise, !0);
+			import("../scb-search/scb-search.js"),
+			this._ensureDrawerSlotComponentsReady()
+		]).then(() => void 0), await this._drawerImportPromise, this._drawerReady = !0, this._syncDrawerCloseNodes());
+	}
+	_drawerSlotContains(e) {
+		return [...this.querySelectorAll("[slot=\"drawer-menu\"], [slot=\"drawer-close\"]")].some((t) => t.matches(e) || !!t.querySelector(e));
+	}
+	async _ensureDrawerSlotComponentsReady() {
+		this.querySelector("[slot=\"drawer-menu\"], [slot=\"drawer-close\"]") && await Promise.all([
+			this._drawerSlotContains("scb-button") ? import("../scb-button/scb-button.js") : Promise.resolve(),
+			this._drawerSlotContains("scb-icon-button") ? import("../scb-icon-button/scb-icon-button.js") : Promise.resolve(),
+			this._drawerSlotContains("scb-skeleton") ? import("../scb-skeleton/scb-skeleton.js") : Promise.resolve(),
+			this._drawerSlotContains("scb-grid") ? import("../scb-grid/scb-grid.js") : Promise.resolve(),
+			this._drawerSlotContains("scb-grid-item") ? import("../scb-grid/scb-grid-item.js") : Promise.resolve()
+		]);
 	}
 	async _ensureDropdownReady() {
 		customElements.get("scb-dropdown") || (this._dropdownImportPromise ??= import("../scb-dropdown/scb-dropdown.js").then(() => void 0), await this._dropdownImportPromise);
@@ -1557,9 +1610,9 @@ var u = {
     `;
 	}
 	render() {
-		let e = this._getNavItems(), t = this._slotUtils.length ? this._slotUtils : this.utilityItems, n = this._slotMenu.length ? this._slotMenu : this.menuData ?? [], a = this.logoText || this.logotypeText, o = this.logoAlt || a || "Gå till startsidan", s = this.querySelector("[slot=\"drawer-menu\"]") !== null;
+		let e = this._getNavItems(), t = this._slotUtils.length ? this._slotUtils : this.utilityItems, n = this._slotMenu.length ? this._slotMenu : this.menuData ?? [], a = this.logoText || this.logotypeText, o = this.logoAlt || a || "Gå till startsidan", s = this.querySelector("[slot=\"drawer-menu\"]") !== null, c = this.querySelector("[slot=\"drawer-close\"]") !== null;
 		this._syncFlags(t.length === 0, !this.showSearch);
-		let c = this.searchHeight && this.searchHeight.trim() ? `--scb-search-height:${this.searchHeight.trim()}` : "", l = e.length > 0 || this.reserveTabs || this.layoutPending, u = (this.reserveTabs || this.layoutPending) && (this.layoutPending || e.length === 0), d = this.showDrawer && (!this.deferDrawer || this._drawerReady), f = typeof window < "u" && window.innerWidth >= this.BP_MD, p = this.showDrawer && (f ? this.alwaysShowMenuButton || this._collapsed : !0), m = p && !f, h = p && f, g = (this.searchButtonLabel ?? "").trim() || "Sök", _ = this.showSearch && !this._mobileSearchOpen;
+		let l = this.searchHeight && this.searchHeight.trim() ? `--scb-search-height:${this.searchHeight.trim()}` : "", u = e.length > 0 || this.reserveTabs || this.layoutPending, d = (this.reserveTabs || this.layoutPending) && (this.layoutPending || e.length === 0), f = this.showDrawer && (!this.deferDrawer || this._drawerReady), p = typeof window < "u" && window.innerWidth >= this.BP_MD, m = this.showDrawer && (p ? this.alwaysShowMenuButton || this._collapsed : !0), h = m && !p, g = m && p, _ = (this.searchButtonLabel ?? "").trim() || "Sök", v = this.showSearch && !this._mobileSearchOpen;
 		return r`
       <slot
         id="data-slot"
@@ -1604,28 +1657,28 @@ var u = {
                 </nav>
 
                 ${this.showSearch ? r`
-                      <div class="search" style=${c}>
-                        ${this._renderSearchForm(g, c)}
+                      <div class="search" style=${l}>
+                        ${this._renderSearchForm(_, l)}
                       </div>
                     ` : i}
-                ${_ ? r`
+                ${v ? r`
                       <button
                         type="button"
                         class="mobile-search-trigger header-icon-button"
-                        aria-label=${g}
-                        title=${g}
+                        aria-label=${_}
+                        title=${_}
                         @click=${this._onMobileSearchToggle}
                       >
                         <span class="header-symbol" aria-hidden="true">search</span>
                         <md-focus-ring aria-hidden="true"></md-focus-ring>
                       </button>
                     ` : i}
-                ${m ? this._renderMenuButton("", !0) : i}
+                ${h ? this._renderMenuButton("", !0) : i}
               </div>
 
               ${this.showSearch && this._mobileSearchOpen ? r`
-                    <div class="mobile-search-panel" style=${c}>
-                      ${this._renderSearchForm(g, c, !1, !0)}
+                    <div class="mobile-search-panel" style=${l}>
+                      ${this._renderSearchForm(_, l, !1, !0)}
                       <button
                         type="button"
                         class="mobile-search-close header-icon-button"
@@ -1643,8 +1696,8 @@ var u = {
           </div>
 
           <div class="header-grid-item">
-            <div class=${l || h ? "tabs-row" : "tabs-row tabs-row--empty"}>
-              ${l ? u ? r`
+            <div class=${u || g ? "tabs-row" : "tabs-row tabs-row--empty"}>
+              ${u ? d ? r`
                       <div class="tabs-inset">
                         <div class="tabs-nav tabs-nav--skeleton" aria-hidden="true">
                           ${this._renderTabSkeletons()}
@@ -1693,14 +1746,14 @@ var u = {
                         </div>
                       ` : i : i}
 
-              ${h ? this._renderMenuButton("menu-trigger--tabs-right") : i}
+              ${g ? this._renderMenuButton("menu-trigger--tabs-right") : i}
             </div>
           </div>
         </div>
         <div class="divider" role="presentation"></div>
       </div>
 
-      ${d ? r`
+      ${f ? r`
             <scb-drawer
               id=${this._drawerId}
               floating
@@ -1713,7 +1766,16 @@ var u = {
               @scb-drawer-closed=${this._onDrawerClosed}
               @scb-menu-select=${this._onMenuSelect}
             >
-            <slot name="drawer-menu"></slot>
+              ${c ? r`
+                    <div class="drawer-close">
+                      <slot
+                        name="drawer-close"
+                        @slotchange=${this._ensureDrawerSlotComponentsReady}
+                      ></slot>
+                    </div>
+                  ` : i}
+
+              <slot name="drawer-menu" @slotchange=${this._ensureDrawerSlotComponentsReady}></slot>
 
               ${s ? i : r`
                     <scb-menu