scb-wc-test 0.1.99 → 0.1.101

package/scb-select/scb-select.js

@@ -0,0 +1,258 @@
+import { css as p, LitElement as h, html as d } from "lit";
+import { property as r, customElement as u } from "lit/decorators.js";
+import "./scb-select-option.js";
+import "@material/web/focus/md-focus-ring.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (e, i, o, t) => {
+  for (var s = t > 1 ? void 0 : t ? b(i, o) : i, c = e.length - 1, l; c >= 0; c--)
+    (l = e[c]) && (s = (t ? l(i, o, s) : l(s)) || s);
+  return t && s && v(i, o, s), s;
+};
+let a = class extends h {
+  constructor() {
+    super(...arguments), this.focusedIndex = -1, this.variant = "single-select", this.value = "", this.values = [], this.disabled = !1, this.open = !1, this.label = "", this.name = "", this.placeholder = "", this.supportingText = "", this.withRadiobuttons = !1, this._onDocumentClick = (e) => {
+      if (!this.open) return;
+      e.composedPath().includes(this) || (this.open = !1, this.removeAttribute("open"));
+    }, this._onSlotClick = (e) => {
+      var c;
+      const i = (c = this.shadowRoot) == null ? void 0 : c.querySelector("slot");
+      if (!i) return;
+      const o = i.assignedElements({ flatten: !0 }).filter((l) => l.tagName.toLowerCase() === "scb-select-option"), t = e.composedPath(), s = o.find((l) => t.includes(l));
+      s && (this._selectOption(s), e.stopPropagation());
+    }, this._onKeyDown = (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._toggleOpen());
+    }, this._onOptionKeyDown = (e) => {
+      var i;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const o = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot");
+        if (!o) return;
+        const t = o.assignedElements({ flatten: !0 }).filter((l) => l.tagName.toLowerCase() === "scb-select-option"), s = e.composedPath(), c = t.find((l) => s.includes(l));
+        c && this._selectOption(c);
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("mousedown", this._onDocumentClick);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("mousedown", this._onDocumentClick), super.disconnectedCallback();
+  }
+  _toggleOpen() {
+    this.disabled || (this.open = !this.open, this.open ? (this.focusedIndex = 0, this.requestUpdate()) : this.focusedIndex = -1);
+  }
+  _selectOption(e) {
+    e.disabled || (this.variant === "multi-select" ? (this.values.indexOf(e.value) > -1 ? this.values = this.values.filter((o) => o !== e.value) : this.values = [...this.values, e.value], this.dispatchEvent(new CustomEvent("change", { detail: { values: this.values } }))) : this.variant === "single-select" && this.withRadiobuttons ? (this.value = e.value, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }))) : (this.value = e.value, this.open = !1, this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }))), this._updateOptionsChecked(), this.requestUpdate());
+  }
+  _getSelectedLabel() {
+    var o;
+    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot");
+    if (!e) return "";
+    const i = e.assignedElements({ flatten: !0 }).filter((t) => t.tagName.toLowerCase() === "scb-select-option");
+    if (this.variant === "multi-select") {
+      const t = i.filter((s) => this.values.includes(s.value));
+      return t && t.length > 0 ? t.map((s) => s.textContent).join(", ") : "";
+    } else {
+      const t = i.find((s) => s.value === this.value);
+      return t ? t.textContent : "";
+    }
+  }
+  firstUpdated() {
+    this._updateOptionsChecked();
+  }
+  updated() {
+    this._updateOptionsChecked();
+  }
+  _updateOptionsChecked() {
+    var o;
+    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot");
+    if (!e) return;
+    e.assignedElements({ flatten: !0 }).filter((t) => t.tagName.toLowerCase() === "scb-select-option").forEach((t) => {
+      this.variant === "multi-select" ? (t.showCheckbox = !0, t.checked = this.values.includes(t.value), t.showRadio = !1) : (t.showCheckbox = !1, t.checked = this.value === t.value, this.withRadiobuttons && (t.showRadio = !0));
+    });
+  }
+  render() {
+    return d`
+			${this.label ? d`
+		    <label class="select-label">${this.label}</label>
+			` : ""}
+			${this.supportingText ? d`
+      		<div class="select-sub-label">${this.supportingText}</div>
+			` : ""}
+			<div class="select">
+				<div class="selected-value-container" tabindex="0" @click="${this._toggleOpen}" @keydown="${this._onKeyDown}">
+				<md-focus-ring inward></md-focus-ring>
+					<md-ripple></md-ripple>
+					<input tabindex="-1" class="selected-value" type="text" readonly .value="${this._getSelectedLabel() || this.placeholder}" name="${this.name}" />
+					<span class="arrow">
+						<md-icon>${this.open ? "expand_less" : "expand_more"}</md-icon>
+					</span>
+				</div>
+				<div class="options" @click=${this._onSlotClick} @keydown=${this._onOptionKeyDown}>
+					<slot @slotchange="${() => {
+      this.requestUpdate();
+    }}"></slot>
+				</div>
+			</div>
+		`;
+  }
+};
+a.styles = p`
+		:host {
+			display: block;
+			color: var(--md-sys-color-on-surface-variant);
+			font-family: var(--brand-font);
+			--scb-select-max-width: 400px;
+			max-width: var(--scb-select-max-width);
+			width: 100%;
+		}
+		:host([disabled]) {
+			pointer-events: none;
+			opacity: 0.38;
+		}
+		   .select {
+			   position: relative;
+
+			   background: var(--md-sys-color-surface);
+			   cursor: pointer;
+			   border-radius: var(--md-sys-shape-corner-small);
+			   border: 1px solid var(--md-sys-color-outline);
+			   outline: 1px solid transparent;
+			   transition: border 0.2s;
+			   
+		   }
+		   :host .select:hover, :host([open]) .select {
+			   outline: 1px solid var(--md-sys-color-outline);
+		   }
+		   
+		   .selected-value {
+			   flex: 1 1 auto;
+			   min-width: 0;
+			   overflow: hidden;
+			   text-overflow: ellipsis;
+			   white-space: nowrap;
+			   display: block;
+			   border: none;
+			   background: transparent;
+			   font: inherit;
+			   color: inherit;
+			   padding: 0;
+			   outline: none;
+			   cursor: pointer;
+				font-size: var(--md-sys-typescale-body-large-size);
+				line-height: var(--md-sys-typescale-body-large-line-height);
+				letter-spacing: var(--md-sys-typescale-body-large-tracking);
+		   }
+		   .selected-value-container:focus-within {
+			   outline: none;
+		   }
+		   .select-label{
+			font-size: var(--md-sys-typescale-label-large-size);
+			font-weight: var(--weight-semibold);
+			line-height: var(--md-sys-typescale-label-large-line-height);
+			letter-spacing: var(--md-sys-typescale-label-large-tracking);
+		   }
+		   .select-sub-label{
+			font-size: var(--md-sys-typescale-body-large-size);
+			line-height: var(--md-sys-typescale-body-large-line-height);
+			letter-spacing: var(--md-sys-typescale-body-large-tracking);
+		   }
+		   md-focus-ring {
+			position:absolute;
+			border-radius: 8px;
+		   }
+		   
+		.arrow {
+			position: absolute;
+			right: 8px;
+			pointer-events: none;
+		}
+		.options {
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: calc(100% + 3px);
+			z-index: 10;
+			max-height: 0;
+			overflow-y: hidden;
+			transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+			visibility: hidden;
+			opacity: 0;
+			border-radius: var(--md-sys-shape-corner-small);
+			background: var(--md-sys-color-surface);
+			padding: 8px 0;
+			/* Drop Shadow/2 */
+			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+		}
+			.options::-webkit-scrollbar {
+				width: 12px;
+				background: var(--md-sys-color-surface);
+				border-radius: 8px;
+			}
+			.options::-webkit-scrollbar-thumb {
+				background: var(--md-sys-color-outline);
+				border-radius: 8px;
+				border: 4px solid var(--md-sys-color-surface);
+				
+			}
+			.options::-webkit-scrollbar-track {
+				background: var(--md-sys-color-surface);
+				border-radius: 8px;
+			}
+		:host([open]) .options {
+			max-height: 240px;
+			overflow-y: auto;
+			visibility: visible;
+			opacity: 1;
+		}
+		.option[aria-selected="true"] {
+			background: #e6f0fa;
+		}
+		.option[aria-disabled="true"] {
+			color: #aaa;
+			pointer-events: none;
+		}
+		.selected-value-container {
+			height: 100%;
+			position: relative;
+			display: flex;
+			align-items: center;
+			padding: var(--spacing-6) 52px var(--spacing-6) var(--spacing-5);
+		}
+
+	`;
+n([
+  r({ type: String })
+], a.prototype, "variant", 2);
+n([
+  r({ type: String })
+], a.prototype, "value", 2);
+n([
+  r({ type: Array })
+], a.prototype, "values", 2);
+n([
+  r({ type: Boolean })
+], a.prototype, "disabled", 2);
+n([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "open", 2);
+n([
+  r({ type: String })
+], a.prototype, "label", 2);
+n([
+  r({ type: String })
+], a.prototype, "name", 2);
+n([
+  r({ type: String })
+], a.prototype, "placeholder", 2);
+n([
+  r({ type: String, attribute: "supporting-text" })
+], a.prototype, "supportingText", 2);
+n([
+  r({ type: Boolean, attribute: "with-radiobuttons" })
+], a.prototype, "withRadiobuttons", 2);
+a = n([
+  u("scb-select")
+], a);
+export {
+  a as ScbSelect
+};