scb-wc 0.1.2 → 0.1.4

package/scb-chip/scb-chip.js

@@ -0,0 +1,234 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-chip/scb-chip.ts
+var o = class extends t {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this.variant = "assist", this.label = "", this.icon = "", this.disabled = !1, this.elevated = !1, this.removable = !1, this.selected = !1, this.disableToggle = !1, this.href = "", this.target = "", this.name = "", this.value = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.size = "medium", this._internals = null, this.__loadedVariants = /* @__PURE__ */ new Set(), this.__chipSetLoaded = !1, this.__iconLoaded = !1, this._onFilterClick = (e) => {
+			if (this.disableToggle) {
+				let t = e.currentTarget;
+				t && (t.selected = this.selected), e.preventDefault();
+				return;
+			}
+			this._toggleSelected();
+		}, "attachInternals" in this && (this._internals = this.attachInternals());
+	}
+	updated(e) {
+		super.updated(e), (e.has("variant") || e.has("icon")) && this.__ensureDepsLoaded(), e.has("disabled") && (this.toggleAttribute("aria-disabled", this.disabled), this.dispatchEvent(new CustomEvent("disabled-changed", {
+			detail: { disabled: this.disabled },
+			bubbles: !0,
+			composed: !0
+		}))), e.has("variant") && this.dispatchEvent(new CustomEvent("variant-changed", {
+			detail: { variant: this.variant },
+			bubbles: !0,
+			composed: !0
+		})), e.has("label") && this.dispatchEvent(new CustomEvent("label-changed", {
+			detail: { label: this.label },
+			bubbles: !0,
+			composed: !0
+		})), e.has("elevated") && this.dispatchEvent(new CustomEvent("elevated-changed", {
+			detail: { elevated: this.elevated },
+			bubbles: !0,
+			composed: !0
+		})), e.has("icon") && this.dispatchEvent(new CustomEvent("icon-changed", {
+			detail: { icon: this.icon },
+			bubbles: !0,
+			composed: !0
+		})), e.has("size") && this.dispatchEvent(new CustomEvent("size-changed", {
+			detail: { size: this.size },
+			bubbles: !0,
+			composed: !0
+		})), (e.has("selected") || e.has("disabled") || e.has("variant") || e.has("value") || e.has("name")) && this._updateFormValue(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+	}
+	firstUpdated() {
+		this.__ensureDepsLoaded(), this.#e(), this._updateFormValue();
+	}
+	async __ensureDepsLoaded() {
+		if (!this.__loadedVariants.has(this.variant)) {
+			switch (this.variant) {
+				case "assist":
+					await import("@material/web/chips/assist-chip.js");
+					break;
+				case "filter":
+					await import("@material/web/chips/filter-chip.js");
+					break;
+			}
+			this.__loadedVariants.add(this.variant);
+		}
+		!this._insideChipSet && !this.__chipSetLoaded && (await import("@material/web/chips/chip-set.js"), this.__chipSetLoaded = !0), this.icon && !this.__iconLoaded && (await import("@material/web/icon/icon.js"), this.__iconLoaded = !0);
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+      margin-block-start: var(--scb-chip-spacing-block-start, 0);
+      margin-block-end: var(--scb-chip-spacing-block-end, 0);
+      margin-inline-start: var(--scb-chip-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-chip-spacing-inline-end, 0);
+    }
+
+    /* Sätt samma färg på label för assist som är på filter */
+    :host md-assist-chip {
+      --_label-text-color: var(--md-sys-color-on-surface-variant);
+      --_hover-label-text-color: var(--md-sys-color-on-surface-variant);
+      --_focus-label-text-color: var(--md-sys-color-on-surface-variant);
+      --_pressed-label-text-color: var(--md-sys-color-on-surface-variant);
+    }
+
+    /* Storlekar: små/medium/stora chips via tokens.
+       Medium (default) är Material-standardvärdena. */
+    :host([size='small']) md-assist-chip,
+    :host([size='small']) md-filter-chip {
+      --md-assist-chip-label-text-size: var(--md-sys-typescale-label-small-size);
+      --md-filter-chip-label-text-size: var(--md-sys-typescale-label-small-size);
+    }
+    :host([size='medium']) md-assist-chip,
+    :host([size='medium']) md-filter-chip {
+      --md-assist-chip-label-text-size: var(--md-sys-typescale-label-medium-size);
+      --md-filter-chip-label-text-size: var(--md-sys-typescale-label-medium-size);
+    }
+
+    :host([size='large']) md-assist-chip,
+    :host([size='large']) md-filter-chip {
+      --md-assist-chip-label-text-size: var(--md-sys-typescale-body-large-size);
+      --md-filter-chip-label-text-size: var(--md-sys-typescale-body-large-size);
+    }
+
+/*     md-icon {
+      color: var(--md-sys-color-on-surface);
+      font-size: var(--md-sys-typescale-body-large-size);
+    } */
+  `;
+	}
+	get _insideChipSet() {
+		return !!this.closest("md-chip-set");
+	}
+	render() {
+		let e = this._renderChip();
+		return this._insideChipSet ? e : r`<md-chip-set>${e}</md-chip-set>`;
+	}
+	_renderChip() {
+		let e = this.icon ? r`<md-icon slot="icon">${this.icon}</md-icon>` : null;
+		switch (this.variant) {
+			case "assist": {
+				let t = this.target === "_blank" ? "noopener noreferrer" : void 0;
+				return r`
+          <md-assist-chip
+            label=${this.label}
+            ?disabled=${this.disabled}
+            ?elevated=${this.elevated}
+            href=${this.href || void 0}
+            target=${this.href && this.target || void 0}
+            rel=${t}
+            @update-focus=${this._forward}
+          >
+            ${e}
+          </md-assist-chip>
+        `;
+			}
+			case "filter": return r`
+          <md-filter-chip
+            label=${this.label}
+            ?disabled=${this.disabled}
+            ?removable=${this.removable}
+            ?selected=${this.selected}
+            @remove=${this._onRemove}
+            @update-focus=${this._forward}
+            @click=${this._onFilterClick}
+          >
+            ${e}
+          </md-filter-chip>
+        `;
+			default: return r``;
+		}
+	}
+	_toggleSelected() {
+		this.selected = !this.selected, this.dispatchEvent(new CustomEvent("selected-changed", {
+			detail: { selected: this.selected },
+			bubbles: !0,
+			composed: !0
+		})), this._updateFormValue();
+	}
+	_onRemove(e) {
+		e.stopPropagation(), this.dispatchEvent(new CustomEvent("remove", {
+			detail: { label: this.label },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_forward(e) {
+		this.dispatchEvent(new CustomEvent(e.type, {
+			detail: e.detail,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_updateFormValue() {
+		if (!this._internals) return;
+		if (!(this.variant === "filter" && this.selected && !this.disabled && this.name)) {
+			this._internals.setFormValue(null), this._internals.setValidity({});
+			return;
+		}
+		let e = this.value || this.label || "";
+		this._internals.setFormValue(e, this.name), this._internals.setValidity({});
+	}
+	formDisabledCallback(e) {
+		this.disabled = e;
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	#e() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop), n = this.mapSpacingToken(this.spacingBottom), r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight), a = t ?? e, o = n ?? e;
+		a ? this.style.setProperty("--scb-chip-spacing-block-start", a) : this.style.removeProperty("--scb-chip-spacing-block-start"), o ? this.style.setProperty("--scb-chip-spacing-block-end", o) : this.style.removeProperty("--scb-chip-spacing-block-end"), r ? this.style.setProperty("--scb-chip-spacing-inline-start", r) : this.style.removeProperty("--scb-chip-spacing-inline-start"), i ? this.style.setProperty("--scb-chip-spacing-inline-end", i) : this.style.removeProperty("--scb-chip-spacing-inline-end");
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "variant", void 0), e([a({ type: String })], o.prototype, "label", void 0), e([a({ type: String })], o.prototype, "icon", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "disabled", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "elevated", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "removable", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "selected", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "disable-toggle"
+})], o.prototype, "disableToggle", void 0), e([a({ type: String })], o.prototype, "href", void 0), e([a({ type: String })], o.prototype, "target", void 0), e([a({ type: String })], o.prototype, "name", void 0), e([a({ type: String })], o.prototype, "value", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-top"
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-bottom"
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-left"
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-right"
+})], o.prototype, "spacingRight", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "size", void 0), o = e([i("scb-chip")], o);
+//#endregion
+export { o as ScbChip };

package/scb-collapse/scb-collapse.js

@@ -0,0 +1,231 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-button/scb-button.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-collapse/scb-collapse.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this._contentId = `scb-collapse-content-${Math.random().toString(36).substr(2, 9)}`, this.variant = "elements", this.collapsedHeight = 40, this.visibleElements = 1, this.expanded = !1, this._elementCount = 0, this.expandButtonLabel = "Mer", this.collapseButtonLabel = "Mindre", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.itemsGap = void 0, this._contentHeight = 0;
+	}
+	get _regionLabel() {
+		return `${this.expanded ? this.collapseButtonLabel : this.expandButtonLabel} – ${this._contentId}`;
+	}
+	static {
+		this.styles = n`
+:host {
+  display: block;
+  box-sizing: border-box;
+  margin-block-start: var(--scb-collapse-spacing-block-start, 0);
+  margin-block-end: var(--scb-collapse-spacing-block-end, 0);
+  margin-inline-start: var(--scb-collapse-spacing-inline-start, 0);
+  margin-inline-end: var(--scb-collapse-spacing-inline-end, 0);
+}
+    .collapse-content {
+      overflow: hidden;
+      transition: max-height var(--motion-duration-medium) var(--motion-easing-standard);
+    }
+    .collapse-gradient-overlay {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 48px;
+      pointer-events: none;
+      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--md-sys-color-surface) 100%);
+      z-index: 1;
+    }
+    .collapse-content {
+      position: relative;
+    }
+    scb-button {
+      margin-top: 8px;
+    }
+    ::slotted(.scb-collapsed-hidden) {
+        max-height: 0 !important;
+        opacity: 0;
+        overflow: hidden;
+        transition: max-height var(--motion-duration-medium) var(--motion-easing-standard), opacity var(--motion-duration-medium) var(--motion-easing-standard);
+        pointer-events: none;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+    ::slotted(*) {
+        max-height: 1000px;
+        transition: max-height var(--motion-duration-medium) var(--motion-easing-standard), opacity var(--motion-duration-medium) var(--motion-easing-standard);
+        overflow: hidden;
+        display: block;
+    }
+  `;
+	}
+	toggle() {
+		this.expanded = !this.expanded;
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	#e() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
+		t ? this.style.setProperty("--scb-collapse-spacing-block-start", t) : this.style.removeProperty("--scb-collapse-spacing-block-start"), n ? this.style.setProperty("--scb-collapse-spacing-block-end", n) : this.style.removeProperty("--scb-collapse-spacing-block-end"), r ? this.style.setProperty("--scb-collapse-spacing-inline-start", r) : this.style.removeProperty("--scb-collapse-spacing-inline-start"), i ? this.style.setProperty("--scb-collapse-spacing-inline-end", i) : this.style.removeProperty("--scb-collapse-spacing-inline-end");
+	}
+	#t() {
+		let e = this.mapSpacingToken(this.itemsGap);
+		e ? this.style.setProperty("--scb-collapse-items-gap", e) : this.style.removeProperty("--scb-collapse-items-gap");
+		let t = this.shadowRoot?.querySelector("slot");
+		t && t.assignedNodes({ flatten: !0 }).filter((e) => e.nodeType === Node.ELEMENT_NODE).forEach((t, n) => {
+			let r = t;
+			n === 0 || !e ? r.style.removeProperty("margin-block-start") : r.style.setProperty("margin-block-start", "var(--scb-collapse-items-gap)");
+		});
+	}
+	willUpdate(e) {
+		e.has("variant") && (this._measureContent(!1), this._countElements(!1));
+	}
+	firstUpdated() {
+		requestAnimationFrame(() => {
+			this._measureContent(), this._countElements();
+		});
+		let e = this.shadowRoot?.querySelector("slot");
+		e && e.addEventListener("slotchange", () => {
+			requestAnimationFrame(() => {
+				this._measureContent(), this._countElements(), this.#t();
+			});
+		}), this.#e(), this.#t();
+	}
+	updated(e) {
+		(e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e(), e.has("itemsGap") && (this.#t(), this._measureContent()), e.has("expanded") && (this.#t(), this.dispatchEvent(new CustomEvent("expandedchange", {
+			detail: { expanded: this.expanded },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_measureContent(e = !0) {
+		if (this.variant === "height") {
+			let t = this.shadowRoot?.querySelector("slot");
+			if (t) {
+				let n = t.assignedNodes({ flatten: !0 }), r = 0;
+				n.forEach((e) => {
+					if (e.nodeType === Node.ELEMENT_NODE) {
+						let t = e;
+						r += t.offsetHeight || t.scrollHeight || 0;
+					}
+				});
+				let i = r;
+				i !== this._contentHeight && (this._contentHeight = i, e && this.requestUpdate());
+			}
+		}
+	}
+	_countElements(e = !0) {
+		if (this.variant === "elements") {
+			let t = this.shadowRoot?.querySelector("slot");
+			if (t) {
+				let n = t.assignedNodes({ flatten: !0 }).filter((e) => e.nodeType === Node.ELEMENT_NODE).length;
+				n !== this._elementCount && (this._elementCount = n, e && this.requestUpdate());
+			}
+		}
+	}
+	render() {
+		if (this.variant === "height") {
+			let e = this.expanded ? `${this._contentHeight}px` : `${this.collapsedHeight}px`, t = this._contentHeight > this.collapsedHeight;
+			return r`
+        <div
+          class="collapse-content"
+          id="${this._contentId}"
+          style="max-height: ${e};"
+          role="region"
+           aria-label="${this._regionLabel}"
+        >
+          <slot></slot>
+          ${t && !this.expanded ? r`<div class="collapse-gradient-overlay"></div>` : ""}
+        </div>
+        ${t ? r`
+            <scb-button
+              id="${this._contentId}-button"
+              @click="${this.toggle}"
+              variant="text"
+              label="${this.expanded ? this.collapseButtonLabel : this.expandButtonLabel}"
+              icon="${this.expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}"
+              aria-controls="${this._contentId}"
+              aria-expanded="${this.expanded ? "true" : "false"}"
+            >
+            </scb-button>
+        ` : ""}
+      `;
+		} else {
+			let e = typeof this.visibleElements == "string" ? parseInt(this.visibleElements, 10) : this.visibleElements, t = this._elementCount > e;
+			return setTimeout(() => {
+				let t = this.shadowRoot?.querySelector("slot");
+				t && t.assignedNodes({ flatten: !0 }).filter((e) => e.nodeType === Node.ELEMENT_NODE).forEach((t, n) => {
+					let r = t;
+					!this.expanded && n >= e ? r.classList.add("scb-collapsed-hidden") : r.classList.remove("scb-collapsed-hidden");
+				});
+			}, 0), r`
+        <div
+          class="collapse-content"
+          id="${this._contentId}"
+          role="region"
+           aria-label="${this._regionLabel}"
+        >
+          <slot></slot>
+        </div>
+        ${t ? r`
+            <scb-button
+              id="${this._contentId}-button"
+              @click="${this.toggle}"
+              variant="text"
+              label="${this.expanded ? this.collapseButtonLabel : this.expandButtonLabel}"
+              icon="${this.expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}"
+              aria-controls="${this._contentId}"
+              aria-expanded="${this.expanded ? "true" : "false"}"
+            >
+            </scb-button>
+        ` : ""}
+      `;
+		}
+	}
+};
+e([a({ type: String })], o.prototype, "variant", void 0), e([a({
+	type: Number,
+	attribute: "collapsed-height",
+	reflect: !0
+})], o.prototype, "collapsedHeight", void 0), e([a({
+	type: Number,
+	attribute: "visible-elements",
+	reflect: !0
+})], o.prototype, "visibleElements", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "expanded", void 0), e([a({
+	type: String,
+	attribute: "expand-button-label",
+	reflect: !0
+})], o.prototype, "expandButtonLabel", void 0), e([a({
+	type: String,
+	attribute: "collapse-button-label",
+	reflect: !0
+})], o.prototype, "collapseButtonLabel", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], o.prototype, "spacingRight", void 0), e([a({
+	type: String,
+	attribute: "items-gap",
+	reflect: !0
+})], o.prototype, "itemsGap", void 0), o = e([i("scb-collapse")], o);
+//#endregion
+export { o as ScbCollapse };

package/scb-cookies-consent/scb-cookies-consent.js

@@ -0,0 +1,164 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-button/scb-button.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-cookies-consent/scb-cookies-consent.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !0, this.autoRemove = !0, this.title = "", this.supportingText = "", this.ariaLabel = "Cookie-inställningar", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._updateButtonWidth = () => {
+			let e = window.innerWidth <= 480, t = this.shadowRoot.querySelector("slot[name=\"buttons\"]");
+			t && t.assignedElements().forEach((t) => {
+				e ? t.setAttribute("full-width", "") : t.removeAttribute("full-width");
+			});
+		};
+	}
+	static {
+		this.styles = n`
+  :host {
+      position: fixed;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      bottom: 32px;
+      left: 32px;
+      background: #fff;
+      color: #222;
+      box-shadow: 0 8px 10px -6px #0000001a, 0 20px 25px -5px #0000001a;
+      color: var(--md-sys-color-on-surface, #0f0865);
+      background: var(--md-sys-color-surface, #fff);
+      border-radius: 16px;
+      padding: 36px 0;
+      z-index: 1000;
+      gap: 16px;
+      font-family: 'Inter', sans-serif;
+
+      margin-block-start: var(--scb-cookies-consent-spacing-block-start, 0);
+      margin-block-end: var(--scb-cookies-consent-spacing-block-end, 0);
+      margin-inline-start: var(--scb-cookies-consent-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-cookies-consent-spacing-inline-end, 0);
+  }
+  .cookies-consent {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 0 20px;
+      box-sizing: border-box;
+      margin: 0 auto;
+      max-width: 1440px;
+      position: relative;
+      width: 100%;
+  }    
+  .cookies-consent h2 {
+      font-size: 16px;
+      line-height: 24px;
+      margin: 0;
+      hyphens: auto;
+  }
+  .button-container {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      justify-content: flex-start;
+  }
+
+  ::slotted{
+    md-filled-button {
+      width: 100%;
+    }
+  }
+
+  @media only screen and (min-width: 481px) {
+    :host {
+      width: auto;
+      max-width: 650px;
+    }
+    .button-container {
+      flex-direction: row;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        justify-content: flex-start;
+    }
+}
+`;
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	applySpacing() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
+		t ? this.style.setProperty("--scb-cookies-consent-spacing-block-start", t) : this.style.removeProperty("--scb-cookies-consent-spacing-block-start"), n ? this.style.setProperty("--scb-cookies-consent-spacing-block-end", n) : this.style.removeProperty("--scb-cookies-consent-spacing-block-end"), r ? this.style.setProperty("--scb-cookies-consent-spacing-inline-start", r) : this.style.removeProperty("--scb-cookies-consent-spacing-inline-start"), i ? this.style.setProperty("--scb-cookies-consent-spacing-inline-end", i) : this.style.removeProperty("--scb-cookies-consent-spacing-inline-end");
+	}
+	firstUpdated(e) {
+		this._updateButtonWidth(), window.addEventListener("resize", this._updateButtonWidth), this.addEventListener("click", (e) => {
+			let t = e.target;
+			t.slot === "buttons" && (t.id === "accept-btn" ? this.closeAndRemove("cookies-accept") : t.id === "decline-btn" ? this.closeAndRemove("cookies-decline") : t.id === "handle-btn" && this.closeAndRemove("cookies-handle"));
+		}), this.applySpacing();
+	}
+	updated(e) {
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.applySpacing(), e.has("open") && this.open && this._updateButtonWidth();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.id ||= "cookie-consent";
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("resize", this._updateButtonWidth);
+	}
+	closeAndRemove(e) {
+		this.dispatchEvent(new CustomEvent(e));
+		let t = e.includes("-") ? e.replace(/-/g, "") : "";
+		t && t !== e && this.dispatchEvent(new CustomEvent(t)), this.autoRemove ? this.remove() : this.open = !1;
+	}
+	render() {
+		return this.open ? r`
+      <div role="dialog" class="cookies-consent" aria-modal="true" aria-label=${this.ariaLabel}>
+        <h2>${this.title}</h2>
+        <div>
+            ${this.supportingText}
+        </div>
+         <div class="button-container">
+            <slot name="buttons"></slot>
+        </div> 
+      </div>
+    ` : null;
+	}
+};
+e([a({ type: Boolean })], o.prototype, "open", void 0), e([a({
+	type: Boolean,
+	attribute: "auto-remove",
+	converter: { fromAttribute: (e) => e !== "false" }
+})], o.prototype, "autoRemove", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "title", void 0), e([a({
+	type: String,
+	attribute: "supporting-text",
+	reflect: !0
+})], o.prototype, "supportingText", void 0), e([a({
+	type: String,
+	attribute: "aria-label",
+	reflect: !0
+})], o.prototype, "ariaLabel", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], o.prototype, "spacingRight", void 0), o = e([i("scb-cookies-consent")], o);
+//#endregion
+export { o as ScbCookiesConsent };