@reliability-design/web 1.0.2

package/dist/components/rel-select/rel-select.ts

@@ -0,0 +1,261 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export type SelectState = "default" | "error" | "disabled";
+export type SelectSize = "small" | "medium" | "large";
+export type SelectBorder = "rounded" | "sharp";
+
+@customElement("rel-select")
+export class RelSelect extends LitElement {
+  @property({ type: String }) label: string = "";
+
+  @property({ type: Array }) options: string[] = [];
+
+  @property({ type: String }) selected: string = "";
+
+  @property({ type: String }) state: SelectState = "default";
+
+  @property({ type: String }) supportingText: string = "";
+
+  @property({ type: String }) size: SelectSize = "medium";
+
+  @property({ type: String }) border: SelectBorder = "rounded";
+
+  @property({ type: String }) leftIcon: string = "";
+
+  @property({ type: String }) rightIcon: string = "";
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+      width: 100%;
+    }
+
+    .select-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    .select-label {
+      font-size: var(--rel-fontSizes-sm);
+      margin-bottom: var(--rel-spacing-space-3xs);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-heading);
+    }
+
+    .select-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .icon {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 16px;
+      color: var(--rel-colors-gray-primary);
+    }
+
+    .icon.left {
+      left: 12px;
+    }
+
+    .icon.right {
+      right: 36px;
+    }
+
+    select {
+      flex: 1;
+      appearance: none;
+      border: 1px solid var(--rel-colors-gray-border);
+      background-color: var(--rel-colors-white);
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 12px center;
+      font-family: var(--rel-fontFamilies-primary);
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+      color: var(--rel-colors-gray-heading);
+      width: 100%;
+      outline: none;
+    }
+
+    select:hover:not(:disabled) {
+      border-color: var(--rel-colors-gray-primary);
+    }
+
+    select:focus:not(:disabled) {
+      border-color: var(--rel-colors-black);
+      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
+    }
+
+    /* States */
+    select.error {
+      border-color: var(--rel-colors-red-secondary);
+    }
+
+    select.error:focus {
+      box-shadow: 0 0 0 3px rgba(213, 0, 0, 0.1);
+    }
+
+    select:disabled {
+      background-color: var(--rel-colors-gray-bg);
+      border-color: var(--rel-colors-gray-border);
+      color: var(--rel-colors-gray-placeholder);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    /* Sizes */
+    .select-small select {
+      font-size: var(--rel-fontSizes-xs);
+      padding: var(--rel-spacing-space-3xs) var(--rel-spacing-space-lg)
+        var(--rel-spacing-space-3xs) var(--rel-spacing-space-2xs);
+    }
+
+    .select-medium select {
+      font-size: var(--rel-fontSizes-sm);
+      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-xl)
+        var(--rel-spacing-space-2xs) var(--rel-spacing-space-xs);
+    }
+
+    .select-large select {
+      font-size: var(--rel-fontSizes-md);
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-2xl)
+        var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+    }
+
+    /* With icons */
+    .with-left-icon.select-small select {
+      padding-left: var(--rel-spacing-space-xl);
+    }
+
+    .with-left-icon.select-medium select {
+      padding-left: var(--rel-spacing-space-2xl);
+    }
+
+    .with-left-icon.select-large select {
+      padding-left: var(--rel-spacing-space-3xl);
+    }
+
+    .with-right-icon.select-small select {
+      padding-right: var(--rel-spacing-space-2xl);
+    }
+
+    .with-right-icon.select-medium select {
+      padding-right: var(--rel-spacing-space-3xl);
+    }
+
+    .with-right-icon.select-large select {
+      padding-right: 4rem;
+    }
+
+    /* Border */
+    .border-rounded select {
+      border-radius: var(--rel-borders-radius-border-radius-300);
+    }
+
+    .border-sharp select {
+      border-radius: 0;
+    }
+
+    /* Supporting text */
+    .supporting-text {
+      font-size: var(--rel-fontSizes-xs);
+      margin-top: var(--rel-spacing-space-3xs);
+      color: var(--rel-colors-gray-placeholder);
+    }
+
+    .error-text {
+      color: var(--rel-colors-red-secondary);
+    }
+  `;
+
+  private onChange(event: Event) {
+    const value = (event.target as HTMLSelectElement).value;
+    this.selected = value;
+    this.dispatchEvent(
+      new CustomEvent("changed", {
+        detail: { value },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    const containerClasses = [
+      "select-container",
+      this.leftIcon ? "with-left-icon" : "",
+      this.rightIcon ? "with-right-icon" : "",
+      `select-${this.size}`,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const wrapperClasses = [
+      "select-wrapper",
+      `select-${this.state}`,
+      `border-${this.border}`,
+    ].join(" ");
+
+    const selectClasses = [this.state === "error" ? "error" : ""]
+      .filter(Boolean)
+      .join(" ");
+
+    const isDisabled = this.state === "disabled";
+
+    return html`
+      <div class="${wrapperClasses}">
+        ${this.label
+          ? html`<label class="select-label">${this.label}</label>`
+          : ""}
+
+        <div class="${containerClasses}">
+          ${this.leftIcon
+            ? html`<span class="icon left">${this.leftIcon}</span>`
+            : ""}
+
+          <select
+            class="${selectClasses}"
+            ?disabled="${isDisabled}"
+            @change="${this.onChange}"
+            .value="${this.selected}">
+            <option value="" disabled ?selected="${!this.selected}" hidden>
+              Select Option
+            </option>
+            ${this.options.map(
+              (option) => html`
+                <option value="${option}" ?selected="${option === this.selected}">
+                  ${option}
+                </option>
+              `
+            )}
+          </select>
+
+          ${this.rightIcon
+            ? html`<span class="icon right">${this.rightIcon}</span>`
+            : ""}
+        </div>
+
+        ${this.supportingText
+          ? html`
+              <span
+                class="supporting-text ${this.state === "error"
+                  ? "error-text"
+                  : ""}">
+                ${this.supportingText}
+              </span>
+            `
+          : ""}
+      </div>
+    `;
+  }
+}