tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/lib/components/switch.js

@@ -1,224 +1,225 @@
+import { DEFAULT_SIZE } from "../types/common.js";
 import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { switchStyles, switchCustomFlavorCss } from "../styles/switch.js";
 export class TySwitch extends TyComponent {
-    constructor() {
-        super();
-        this._customFlavorSheet = null;
-        this._listenersSetup = false;
-        this._clickHandler = null;
-        this._keydownHandler = null;
-        this._focusHandler = null;
-        this._blurHandler = null;
-        const shadow = this.shadowRoot;
-        ensureStyles(shadow, { css: switchStyles, id: "ty-switch" });
-    }
-    onConnect() {
-        this.setupEventListeners();
-        this._syncCustomFlavor();
-    }
-    onDisconnect() {
-        this.removeEventListeners();
-    }
-    onPropertiesChanged(changes) {
-        if (changes.some((c) => c.name === "flavor")) {
-            this._syncCustomFlavor();
-        }
-    }
-    _syncCustomFlavor() {
-        this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => switchCustomFlavorCss(base));
-    }
-    getFormValue() {
-        return this.checked ? this.value : null;
-    }
-    buildClassList() {
-        const classes = [this.size];
-        if (this.disabled)
-            classes.push("disabled");
-        if (this.required)
-            classes.push("required");
-        return classes.join(" ");
-    }
-    handleSwitchClick(e) {
-        if (this.disabled)
-            return;
-        if (this.isDuplicateActivationClick())
-            return;
-        const newValue = !this.checked;
-        this.checked = newValue;
-        setTimeout(() => {
-            const eventDetail = {
-                value: newValue,
-                checked: newValue,
-                formValue: newValue ? this.value : null,
-                originalEvent: e,
-            };
-            this.dispatchEvent(new CustomEvent("input", { detail: eventDetail, bubbles: true, composed: true }));
-            this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
-        }, 0);
-    }
-    handleSwitchKeydown(e) {
-        if (this.disabled)
-            return;
-        if (["Space", " ", "Enter"].includes(e.key)) {
-            e.preventDefault();
-            e.stopPropagation();
-            this.handleSwitchClick(e);
-        }
-    }
-    removeEventListeners() {
-        if (!this._listenersSetup)
-            return;
-        if (this._clickHandler) {
-            this.removeEventListener("click", this._clickHandler);
-            this._clickHandler = null;
-        }
-        const shadow = this.shadowRoot;
-        if (!shadow)
-            return;
-        const el = shadow.querySelector(".switch-container");
-        if (!el) {
-            this._listenersSetup = false;
-            return;
-        }
-        if (this._keydownHandler) {
-            el.removeEventListener("keydown", this._keydownHandler);
-            this._keydownHandler = null;
-        }
-        if (this._focusHandler) {
-            el.removeEventListener("focus", this._focusHandler);
-            this._focusHandler = null;
-        }
-        if (this._blurHandler) {
-            el.removeEventListener("blur", this._blurHandler);
-            this._blurHandler = null;
-        }
-        this._listenersSetup = false;
-    }
-    setupEventListeners() {
-        if (this._listenersSetup)
-            return;
-        const shadow = this.shadowRoot;
-        const el = shadow.querySelector(".switch-container");
-        if (!el)
-            return;
-        this._clickHandler = (e) => this.handleSwitchClick(e);
-        this._keydownHandler = (e) => this.handleSwitchKeydown(e);
-        this._focusHandler = () => el.classList.add("focused");
-        this._blurHandler = () => el.classList.remove("focused");
-        this.addEventListener("click", this._clickHandler);
-        el.addEventListener("keydown", this._keydownHandler);
-        el.addEventListener("focus", this._focusHandler);
-        el.addEventListener("blur", this._blurHandler);
-        this._listenersSetup = true;
-    }
-    render() {
-        const shadow = this.shadowRoot;
-        let switchEl = shadow.querySelector(".switch-container");
-        const classes = this.buildClassList();
-        if (!switchEl) {
-            switchEl = document.createElement("div");
-            switchEl.className = "switch-container " + classes;
-            switchEl.tabIndex = this.disabled ? -1 : 0;
-            switchEl.setAttribute("role", "switch");
-            switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
-            switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-            switchEl.setAttribute("aria-required", this.required ? "true" : "false");
-            const track = document.createElement("div");
-            track.className = "switch-track";
-            const thumb = document.createElement("div");
-            thumb.className = "switch-thumb";
-            track.appendChild(thumb);
-            switchEl.appendChild(track);
-            shadow.appendChild(switchEl);
-        }
-        else {
-            switchEl.className = "switch-container " + classes;
-            switchEl.tabIndex = this.disabled ? -1 : 0;
-            switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
-            switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-            switchEl.setAttribute("aria-required", this.required ? "true" : "false");
-        }
-        this.setupEventListeners();
-        this.applyLabelName(switchEl);
-        this.updateValidity();
-    }
-    updateValidity() {
-        const anchor = this.shadowRoot?.querySelector(".switch-container");
-        if (this.disabled) {
-            this._internals.setValidity({});
-            return;
-        }
-        if (this.required && !this.checked) {
-            this._internals.setValidity({ valueMissing: true }, "Please turn this on", anchor ?? undefined);
-        }
-        else {
-            this._internals.setValidity({});
-        }
-    }
-    get checked() { return this.getProperty("checked"); }
-    set checked(value) { this.setProperty("checked", value); }
-    get value() { return this.getProperty("value"); }
-    set value(val) { this.setProperty("value", val); }
-    get name() { return this.getProperty("name"); }
-    set name(val) { this.setProperty("name", val); }
-    get disabled() { return this.getProperty("disabled"); }
-    set disabled(value) { this.setProperty("disabled", value); }
-    get required() { return this.getProperty("required"); }
-    set required(value) { this.setProperty("required", value); }
-    get size() { return this.getProperty("size"); }
-    set size(value) { this.setProperty("size", value); }
-    get flavor() { return this.getProperty("flavor"); }
-    set flavor(value) { this.setProperty("flavor", value); }
-    get form() { return this._internals.form; }
+constructor() {
+super();
+this._customFlavorSheet = null;
+this._listenersSetup = false;
+this._clickHandler = null;
+this._keydownHandler = null;
+this._focusHandler = null;
+this._blurHandler = null;
+const shadow = this.shadowRoot;
+ensureStyles(shadow, { css: switchStyles, id: "ty-switch" });
+}
+onConnect() {
+this.setupEventListeners();
+this._syncCustomFlavor();
+}
+onDisconnect() {
+this.removeEventListeners();
+}
+onPropertiesChanged(changes) {
+if (changes.some((c) => c.name === "flavor")) {
+this._syncCustomFlavor();
+}
+}
+_syncCustomFlavor() {
+this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => switchCustomFlavorCss(base));
+}
+getFormValue() {
+return this.checked ? this.value : null;
+}
+buildClassList() {
+const classes = [this.size];
+if (this.disabled)
+classes.push("disabled");
+if (this.required)
+classes.push("required");
+return classes.join(" ");
+}
+handleSwitchClick(e) {
+if (this.disabled)
+return;
+if (this.isDuplicateActivationClick())
+return;
+const newValue = !this.checked;
+this.checked = newValue;
+setTimeout(() => {
+const eventDetail = {
+value: newValue,
+checked: newValue,
+formValue: newValue ? this.value : null,
+originalEvent: e,
+};
+this.dispatchEvent(new CustomEvent("input", { detail: eventDetail, bubbles: true, composed: true }));
+this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
+}, 0);
+}
+handleSwitchKeydown(e) {
+if (this.disabled)
+return;
+if (["Space", " ", "Enter"].includes(e.key)) {
+e.preventDefault();
+e.stopPropagation();
+this.handleSwitchClick(e);
+}
+}
+removeEventListeners() {
+if (!this._listenersSetup)
+return;
+if (this._clickHandler) {
+this.removeEventListener("click", this._clickHandler);
+this._clickHandler = null;
+}
+const shadow = this.shadowRoot;
+if (!shadow)
+return;
+const el = shadow.querySelector(".switch-container");
+if (!el) {
+this._listenersSetup = false;
+return;
+}
+if (this._keydownHandler) {
+el.removeEventListener("keydown", this._keydownHandler);
+this._keydownHandler = null;
+}
+if (this._focusHandler) {
+el.removeEventListener("focus", this._focusHandler);
+this._focusHandler = null;
+}
+if (this._blurHandler) {
+el.removeEventListener("blur", this._blurHandler);
+this._blurHandler = null;
+}
+this._listenersSetup = false;
+}
+setupEventListeners() {
+if (this._listenersSetup)
+return;
+const shadow = this.shadowRoot;
+const el = shadow.querySelector(".switch-container");
+if (!el)
+return;
+this._clickHandler = (e) => this.handleSwitchClick(e);
+this._keydownHandler = (e) => this.handleSwitchKeydown(e);
+this._focusHandler = () => el.classList.add("focused");
+this._blurHandler = () => el.classList.remove("focused");
+this.addEventListener("click", this._clickHandler);
+el.addEventListener("keydown", this._keydownHandler);
+el.addEventListener("focus", this._focusHandler);
+el.addEventListener("blur", this._blurHandler);
+this._listenersSetup = true;
+}
+render() {
+const shadow = this.shadowRoot;
+let switchEl = shadow.querySelector(".switch-container");
+const classes = this.buildClassList();
+if (!switchEl) {
+switchEl = document.createElement("div");
+switchEl.className = "switch-container " + classes;
+switchEl.tabIndex = this.disabled ? -1 : 0;
+switchEl.setAttribute("role", "switch");
+switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
+switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+switchEl.setAttribute("aria-required", this.required ? "true" : "false");
+const track = document.createElement("div");
+track.className = "switch-track";
+const thumb = document.createElement("div");
+thumb.className = "switch-thumb";
+track.appendChild(thumb);
+switchEl.appendChild(track);
+shadow.appendChild(switchEl);
+}
+else {
+switchEl.className = "switch-container " + classes;
+switchEl.tabIndex = this.disabled ? -1 : 0;
+switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
+switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+switchEl.setAttribute("aria-required", this.required ? "true" : "false");
+}
+this.setupEventListeners();
+this.applyLabelName(switchEl);
+this.updateValidity();
+}
+updateValidity() {
+const anchor = this.shadowRoot?.querySelector(".switch-container");
+if (this.disabled) {
+this._internals.setValidity({});
+return;
+}
+if (this.required && !this.checked) {
+this._internals.setValidity({ valueMissing: true }, "Please turn this on", anchor ?? undefined);
+}
+else {
+this._internals.setValidity({});
+}
+}
+get checked() { return this.getProperty("checked"); }
+set checked(value) { this.setProperty("checked", value); }
+get value() { return this.getProperty("value"); }
+set value(val) { this.setProperty("value", val); }
+get name() { return this.getProperty("name"); }
+set name(val) { this.setProperty("name", val); }
+get disabled() { return this.getProperty("disabled"); }
+set disabled(value) { this.setProperty("disabled", value); }
+get required() { return this.getProperty("required"); }
+set required(value) { this.setProperty("required", value); }
+get size() { return this.getProperty("size"); }
+set size(value) { this.setProperty("size", value); }
+get flavor() { return this.getProperty("flavor"); }
+set flavor(value) { this.setProperty("flavor", value); }
+get form() { return this._internals.form; }
 }
 TySwitch.formAssociated = true;
 TySwitch.properties = {
-    checked: {
-        type: "boolean",
-        visual: true,
-        formValue: true,
-        emitChange: true,
-        default: false,
-    },
-    value: {
-        type: "string",
-        default: "on",
-    },
-    name: {
-        type: "string",
-        default: "",
-    },
-    disabled: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    required: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    size: {
-        type: "string",
-        visual: true,
-        default: "md",
-        validate: (v) => ["xs", "sm", "md", "lg", "xl"].includes(v),
-        coerce: (v) => {
-            if (!["xs", "sm", "md", "lg", "xl"].includes(v)) {
-                console.warn(`[ty-switch] Invalid size '${v}'. Using 'md'.`);
-                return "md";
-            }
-            return v;
-        },
-    },
-    flavor: {
-        type: "string",
-        visual: true,
-        default: "primary",
-    },
+checked: {
+type: "boolean",
+visual: true,
+formValue: true,
+emitChange: true,
+default: false,
+},
+value: {
+type: "string",
+default: "on",
+},
+name: {
+type: "string",
+default: "",
+},
+disabled: {
+type: "boolean",
+visual: true,
+default: false,
+},
+required: {
+type: "boolean",
+visual: true,
+default: false,
+},
+size: {
+type: "string",
+visual: true,
+default: DEFAULT_SIZE,
+validate: (v) => ["xs", "sm", "md", "lg", "xl"].includes(v),
+coerce: (v) => {
+if (!["xs", "sm", "md", "lg", "xl"].includes(v)) {
+console.warn(`[ty-switch] Invalid size '${v}'. Using '${DEFAULT_SIZE}'.`);
+return DEFAULT_SIZE;
+}
+return v;
+},
+},
+flavor: {
+type: "string",
+visual: true,
+default: "primary",
+},
 };
 if (!customElements.get("ty-switch")) {
-    customElements.define("ty-switch", TySwitch);
+customElements.define("ty-switch", TySwitch);
 }

package/lib/components/tab.js

@@ -2,68 +2,68 @@ import { ensureStyles } from '../utils/styles.js';
 import { tabStyles } from '../styles/tab.js';
 import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
 export class TyTab extends HTMLElement {
-    static get observedAttributes() {
-        return ['id', 'label', 'disabled'];
-    }
-    constructor() {
-        super();
-        this._scrollbar = null;
-        this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        this._render();
-    }
-    disconnectedCallback() {
-        this._destroyScrollbar();
-    }
-    attributeChangedCallback(_name, _oldValue, _newValue) {
-        this._render();
-    }
-    _render() {
-        const shadowRoot = this.shadowRoot;
-        if (!shadowRoot)
-            return;
-        const id = this.getAttribute('id');
-        if (!shadowRoot.querySelector('.tab-wrapper')) {
-            ensureStyles(shadowRoot, { css: tabStyles, id: 'ty-tab' });
-            shadowRoot.innerHTML = `
-        <div class="tab-wrapper"
-             role="tabpanel"
-             ${id ? `id="panel-${id}"` : ''}
-             ${id ? `aria-labelledby="tab-${id}"` : ''}
-        >
-          <div class="tab-panel">
-            <slot></slot>
-          </div>
-        </div>
-      `;
-            this._setupScrollbar();
-        }
-    }
-    _setupScrollbar() {
-        const panel = this.shadowRoot?.querySelector('.tab-panel');
-        const wrapper = this.shadowRoot?.querySelector('.tab-wrapper');
-        if (!panel || !wrapper)
-            return;
-        if (!isCustomScrollbarEnabled())
-            return;
-        panel.classList.add('ty-custom-scroll');
-        this._scrollbar = new CustomScrollbar(panel, { vertical: true });
-        if (this._scrollbar.trackY) {
-            wrapper.appendChild(this._scrollbar.trackY);
-        }
-    }
-    _destroyScrollbar() {
-        if (this._scrollbar) {
-            this._scrollbar.trackY?.remove();
-            this._scrollbar.destroy();
-            this._scrollbar = null;
-        }
-    }
-    resetScroll() {
-        this._scrollbar?.scrollToTop(false);
-    }
+static get observedAttributes() {
+return ['id', 'label', 'disabled'];
+}
+constructor() {
+super();
+this._scrollbar = null;
+this.attachShadow({ mode: 'open' });
+}
+connectedCallback() {
+this._render();
+}
+disconnectedCallback() {
+this._destroyScrollbar();
+}
+attributeChangedCallback(_name, _oldValue, _newValue) {
+this._render();
+}
+_render() {
+const shadowRoot = this.shadowRoot;
+if (!shadowRoot)
+return;
+const id = this.getAttribute('id');
+if (!shadowRoot.querySelector('.tab-wrapper')) {
+ensureStyles(shadowRoot, { css: tabStyles, id: 'ty-tab' });
+shadowRoot.innerHTML = `
+<div class="tab-wrapper"
+role="tabpanel"
+${id ? `id="panel-${id}"` : ''}
+${id ? `aria-labelledby="tab-${id}"` : ''}
+>
+<div class="tab-panel">
+<slot></slot>
+</div>
+</div>
+`;
+this._setupScrollbar();
+}
+}
+_setupScrollbar() {
+const panel = this.shadowRoot?.querySelector('.tab-panel');
+const wrapper = this.shadowRoot?.querySelector('.tab-wrapper');
+if (!panel || !wrapper)
+return;
+if (!isCustomScrollbarEnabled())
+return;
+panel.classList.add('ty-custom-scroll');
+this._scrollbar = new CustomScrollbar(panel, { vertical: true });
+if (this._scrollbar.trackY) {
+wrapper.appendChild(this._scrollbar.trackY);
+}
+}
+_destroyScrollbar() {
+if (this._scrollbar) {
+this._scrollbar.trackY?.remove();
+this._scrollbar.destroy();
+this._scrollbar = null;
+}
+}
+resetScroll() {
+this._scrollbar?.scrollToTop(false);
+}
 }
 if (!customElements.get('ty-tab')) {
-    customElements.define('ty-tab', TyTab);
+customElements.define('ty-tab', TyTab);
 }