scb-wc 0.1.3 → 0.1.4

package/scb-slider/scb-slider.js

@@ -0,0 +1,98 @@
+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, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import "@material/web/slider/slider.js";
+//#region src/scb-test-components/scb-slider/scb-slider.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.ticks = !1, this.step = 5, this.value = 20, this.range = !1, this.valueStart = 0, this.valueEnd = 100, this.min = 0, this.max = 100, this.labeled = !0, this.disabled = !1, this.name = "";
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+    }
+    `;
+	}
+	_onInput(e) {
+		let t = e.target;
+		this.range ? (this.valueStart = t.valueStart, this.valueEnd = t.valueEnd) : this.value = t.value, this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_onChange(e) {
+		let t = e.target;
+		this.range ? (this.valueStart = t.valueStart, this.valueEnd = t.valueEnd) : this.value = t.value, this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		let e = this.labeled ? i : this.ariaLabel || i;
+		return r`
+          <md-slider
+            ?ticks=${this.ticks}
+            .value=${this.value}
+            .step=${this.step}
+            ?range=${this.range}
+            .valueStart=${this.valueStart}
+            .valueEnd=${this.valueEnd}
+            .min=${this.min}
+            .max=${this.max}
+            ?labeled=${this.labeled}  
+            .valueLabel=${this.valueLabel}
+            .valueLabelStart=${this.valueLabelStart}
+            .valueLabelEnd=${this.valueLabelEnd}
+            ?disabled=${this.disabled}
+            aria-label=${e}
+            name=${this.name}
+            name-start=${this.nameStart}
+            name-end=${this.nameEnd}
+            @input=${this._onInput}
+            @change=${this._onChange}
+          ></md-slider>
+        `;
+	}
+};
+e([o({ type: Boolean })], s.prototype, "ticks", void 0), e([o({ type: Number })], s.prototype, "step", void 0), e([o({
+	type: Number,
+	reflect: !0
+})], s.prototype, "value", void 0), e([o({ type: Boolean })], s.prototype, "range", void 0), e([o({
+	type: Number,
+	attribute: "value-start"
+})], s.prototype, "valueStart", void 0), e([o({
+	type: Number,
+	attribute: "value-end"
+})], s.prototype, "valueEnd", void 0), e([o({
+	type: Number,
+	reflect: !0
+})], s.prototype, "min", void 0), e([o({
+	type: Number,
+	reflect: !0
+})], s.prototype, "max", void 0), e([o({ type: Boolean })], s.prototype, "labeled", void 0), e([o({
+	type: String,
+	attribute: "value-label"
+})], s.prototype, "valueLabel", void 0), e([o({
+	type: String,
+	attribute: "value-label-start"
+})], s.prototype, "valueLabelStart", void 0), e([o({
+	type: String,
+	attribute: "value-label-end"
+})], s.prototype, "valueLabelEnd", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "name", void 0), e([o({
+	type: String,
+	attribute: "name-start",
+	reflect: !0
+})], s.prototype, "nameStart", void 0), e([o({
+	type: String,
+	attribute: "name-end",
+	reflect: !0
+})], s.prototype, "nameEnd", void 0), s = e([a("scb-slider")], s);
+//#endregion
+export { s as ScbSlider };

package/scb-snackbar/scb-snackbar.js

@@ -0,0 +1,223 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-button/scb-button.js";
+import "../scb-icon-button/scb-icon-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-snackbar/scb-snackbar.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.message = "", this.open = !1, this.actionText = "", this.showClose = !1, this.fixed = !1, this.fadeout = !1, this.withLongerAction = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
+	}
+	static {
+		this.styles = n`
+    :host {
+      position: relative;
+      display: block;
+      min-width: 312px;
+      max-width: 560px;
+      font-family: var(--brand-font, 'Inter', sans-serif);
+
+      margin-block-start: var(--scb-snackbar-spacing-block-start, 0);
+      margin-block-end: var(--scb-snackbar-spacing-block-end, 0);
+      margin-inline-start: var(--scb-snackbar-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-snackbar-spacing-inline-end, 0);
+    }
+    :host([fixed]) {
+      position: fixed;
+      z-index: 9999;
+      left: 50%;
+      bottom: 24px;
+      transform: translateX(-50%);
+    }
+    .snackbar {
+      background: var(--md-sys-color-inverse-surface);
+      color: var(--md-sys-color-inverse-on-surface);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      box-shadow:
+        0 4px 8px 3px rgba(0, 0, 0, 0.15),
+        0 1px 3px 0 rgba(0, 0, 0, 0.3);
+      display: flex;
+      align-items: center;
+      padding: 14px var(--spacing-5);
+      opacity: 0;
+      transition: opacity 0.3s, bottom 0.3s;
+      pointer-events: auto;
+      position: relative;
+    }
+    .snackbar.longer-action {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    .snackbar .actions {
+      display: flex;
+      margin-top: 10px;
+      width: 100%;
+      justify-content: flex-end;
+    }
+    .message.no-actions {
+      margin-right: 0;
+    }
+    :host([open]) .snackbar {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .message {
+      flex: 1 1 auto;
+      margin-right: var(--spacing-2);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+    }
+    .snackbar scb-icon-button {
+      --md-icon-button-icon-color: var(--md-sys-color-inverse-on-surface);
+      --md-icon-button-hover-icon-color: var(--md-sys-color-inverse-on-surface);
+      --md-icon-button-hover-state-layer-color: var(
+        --md-sys-color-surface-container
+      );
+      --md-icon-button-focus-icon-color: var(
+        --md-sys-color-inverse-on-surface
+      );
+      --md-icon-button-pressed-icon-color: var(
+        --md-sys-color-inverse-on-surface
+      );
+      --md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
+    }
+    .snackbar scb-button {
+      --md-text-button-label-text-color: var(--md-sys-color-inverse-primary);
+      --md-text-button-hover-label-text-color: var(
+        --md-sys-color-inverse-primary
+      );
+      --md-text-button-hover-state-layer-color: var(
+        --md-sys-color-surface-container
+      );
+      --md-text-button-focus-label-text-color: var(
+        --md-sys-color-inverse-primary
+      );
+      --md-text-button-pressed-label-text-color: var(
+        --md-sys-color-inverse-primary
+      );
+      --md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
+    }
+  `;
+	}
+	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-snackbar-spacing-block-start", t) : this.style.removeProperty("--scb-snackbar-spacing-block-start"), n ? this.style.setProperty("--scb-snackbar-spacing-block-end", n) : this.style.removeProperty("--scb-snackbar-spacing-block-end"), r ? this.style.setProperty("--scb-snackbar-spacing-inline-start", r) : this.style.removeProperty("--scb-snackbar-spacing-inline-start"), i ? this.style.setProperty("--scb-snackbar-spacing-inline-end", i) : this.style.removeProperty("--scb-snackbar-spacing-inline-end");
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.applySpacing();
+	}
+	handleAction() {
+		this.dispatchEvent(new CustomEvent("snackbar-action", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("snackbaraction", {
+			bubbles: !0,
+			composed: !0
+		})), this.open = !1;
+	}
+	handleClose() {
+		this.open = !1;
+	}
+	updated(e) {
+		super.updated(e), e.has("open") && (this.open ? (this.dispatchEvent(new CustomEvent("snackbar-open", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("snackbaropen", {
+			bubbles: !0,
+			composed: !0
+		}))) : (this.dispatchEvent(new CustomEvent("snackbar-close", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("snackbarclose", {
+			bubbles: !0,
+			composed: !0
+		})))), (e.has("open") || e.has("fadeout")) && (this.open && this.fadeout ? (window.clearTimeout(this._fadeoutTimer), this._fadeoutTimer = window.setTimeout(() => {
+			this.open = !1;
+		}, 5e3)) : window.clearTimeout(this._fadeoutTimer)), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.applySpacing();
+	}
+	render() {
+		let e = !!this.actionText, t = !!this.showClose, n = "snackbar";
+		return !e && !t && (n += " no-actions"), this.withLongerAction && (n += " longer-action"), r`
+      <div class="${n}" ?hidden=${!this.open}>
+        ${this.withLongerAction ? r`
+              <div class="message">${this.message}</div>
+              <div class="actions">
+                ${e ? r`
+                      <scb-button
+                        variant="text"
+                        label=${this.actionText}
+                        @click=${this.handleAction}
+                      ></scb-button>
+                    ` : ""}
+                ${t ? r`
+                      <scb-icon-button
+                        icon="close"
+                        @click=${this.handleClose}
+                        aria-label="Stäng"
+                      ></scb-icon-button>
+                    ` : ""}
+              </div>
+            ` : r`
+              <span class="message">${this.message}</span>
+              ${e ? r`
+                    <scb-button
+                      variant="text"
+                      label=${this.actionText}
+                      @click=${this.handleAction}
+                    ></scb-button>
+                  ` : ""}
+              ${t ? r`
+                    <scb-icon-button
+                      icon="close"
+                      @click=${this.handleClose}
+                      aria-label="Stäng"
+                    ></scb-icon-button>
+                  ` : ""}
+            `}
+      </div>
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "message", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "open", void 0), e([a({
+	type: String,
+	attribute: "action-text"
+})], o.prototype, "actionText", void 0), e([a({
+	type: Boolean,
+	attribute: "show-close"
+})], o.prototype, "showClose", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "fixed", void 0), e([a({ type: Boolean })], o.prototype, "fadeout", void 0), e([a({
+	type: Boolean,
+	attribute: "with-longer-action"
+})], o.prototype, "withLongerAction", 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-snackbar")], o);
+//#endregion
+export { o as ScbSnackbar };

package/scb-status-pill/scb-status-pill.js

@@ -0,0 +1,100 @@
+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";
+import "@material/web/icon/icon.js";
+//#region src/scb-test-components/scb-status-pill/scb-status-pill.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.status = "", this.label = "", this.showIcon = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+      border-radius: var(--md-sys-shape-corner-full);
+      padding: 6px var(--spacing-5);
+      border: none;
+      box-sizing: border-box;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      width: fit-content;
+      font-family: var(--brand-font);
+
+      margin-block-start: var(--scb-status-pill-spacing-block-start, 0);
+      margin-block-end: var(--scb-status-pill-spacing-block-end, 0);
+      margin-inline-start: var(--scb-status-pill-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-status-pill-spacing-inline-end, 0);
+    }
+
+    .label {
+      font-size: var(--md-sys-typescale-label-medium-size);
+      line-height: var(--md-sys-typescale-label-medium-line-height);
+      font-weight: var(--md-sys-typescale-label-medium-weight);
+      letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+    }
+
+    :host([status='success']) {
+      background: var(--md-sys-color-success-container);
+      color: var(--md-sys-color-on-success-container);
+    }
+
+    :host([status='warning']) {
+      background: var(--md-sys-color-warning-container);
+      color: var(--md-sys-color-on-warning-container);
+    }
+
+    :host([status='error']) {
+      background: var(--md-sys-color-error-container);
+      color: var(--md-sys-color-on-error-container);
+    }
+  `;
+	}
+	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-status-pill-spacing-block-start", t) : this.style.removeProperty("--scb-status-pill-spacing-block-start"), n ? this.style.setProperty("--scb-status-pill-spacing-block-end", n) : this.style.removeProperty("--scb-status-pill-spacing-block-end"), r ? this.style.setProperty("--scb-status-pill-spacing-inline-start", r) : this.style.removeProperty("--scb-status-pill-spacing-inline-start"), i ? this.style.setProperty("--scb-status-pill-spacing-inline-end", i) : this.style.removeProperty("--scb-status-pill-spacing-inline-end");
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.applySpacing();
+	}
+	updated(e) {
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.applySpacing();
+	}
+	render() {
+		return r`
+      ${this.showIcon ? this.status === "success" ? r`<md-icon>check_circle</md-icon>` : this.status === "warning" ? r`<md-icon>warning</md-icon>` : this.status === "error" ? r`<md-icon>error</md-icon>` : "" : ""}
+      <span class="label">${this.label}</span>
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "status", void 0), e([a({ type: String })], o.prototype, "label", void 0), e([a({
+	type: Boolean,
+	attribute: "show-icon"
+})], o.prototype, "showIcon", 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-status-pill")], o);
+//#endregion
+export { o as ScbStatusPill };