fancy-ui-ts 1.3.0 → 1.3.2

package/dist/index.css

@@ -134,8 +134,25 @@
   --fc-label-font-size: var(--fc-font-size-md);
   --fc-label-font-weight: var(--fc-font-weight-bold);
   --fc-label-fg: var(--fc-gray-900);
+  --fc-select-bg: var(--fc-white);
+  --fc-select-bg-disabled: var(--fc-gray-50);
+  --fc-select-fg: var(--fc-gray-900);
+  --fc-select-border: var(--fc-gray-300);
+  --fc-select-border-hover: var(--fc-gray-400);
+  --fc-select-border-focus: var(--fc-primary-400);
+  --fc-select-placeholder: var(--fc-gray-400);
+  --fc-select-placeholder-disabled: var(--fc-gray-300);
+  --fc-select-focus-ring: var(--fc-focus-ring-sm) var(--fc-focus-ring-primary);
+  --fc-select-bg-error: var(--fc-danger-50);
+  --fc-select-border-error: var(--fc-danger-300);
+  --fc-select-focus-ring-error: var(--fc-focus-ring-danger);
   --fc-select-dropdown-icon-width: calc(var(--fc-font-size-md) + 4px);
   --fc-select-dropdown-icon-height: calc(var(--fc-font-size-md) + 4px);
+  --fc-select-max-width: 412px;
+  --fc-select-padding: var(--fc-space-3);
+  --fc-select-border-width: var(--fc-border-width-xs);
+  --fc-select-radius: var(--fc-radius-md);
+  --fc-select-shadow: var(--fc-shadow-none);
 }
 
 /* src/styles/themes/fc-theme-light.css */
@@ -188,6 +205,18 @@
   --fc-label-font-size: var(--fc-font-size-md);
   --fc-label-font-weight: var(--fc-font-weight-bold);
   --fc-label-fg: var(--fc-gray-900);
+  --fc-select-bg: var(--fc-white);
+  --fc-select-bg-disabled: var(--fc-gray-50);
+  --fc-select-fg: var(--fc-gray-900);
+  --fc-select-border: var(--fc-gray-300);
+  --fc-select-border-hover: var(--fc-gray-400);
+  --fc-select-border-focus: var(--fc-primary-400);
+  --fc-select-placeholder: var(--fc-gray-400);
+  --fc-select-placeholder-disabled: var(--fc-gray-300);
+  --fc-select-focus-ring: var(--fc-focus-ring-sm) var(--fc-focus-ring-primary);
+  --fc-select-bg-error: var(--fc-danger-50);
+  --fc-select-border-error: var(--fc-danger-300);
+  --fc-select-focus-ring-error: var(--fc-focus-ring-danger);
 }
 
 /* src/styles/themes/fc-theme-dark.css */
@@ -240,4 +269,13 @@
   --fc-label-font-size: var(--fc-font-size-md);
   --fc-label-font-weight: var(--fc-font-weight-bold);
   --fc-label-fg: var(--fc-gray-200);
+  --fc-select-bg: var(--fc-gray-800);
+  --fc-select-bg-disabled: var(--fc-gray-900);
+  --fc-select-fg: var(--fc-gray-200);
+  --fc-select-border: var(--fc-gray-700);
+  --fc-select-border-hover: var(--fc-gray-500);
+  --fc-select-border-focus: var(--fc-primary-400);
+  --fc-select-placeholder: var(--fc-gray-500);
+  --fc-select-placeholder-disabled: var(--fc-gray-700);
+  --fc-select-focus-ring: var(--fc-focus-ring-sm) var(--fc-focus-ring-secondary);
 }

package/dist/index.d.ts

@@ -191,6 +191,7 @@ declare class FcSelect extends HTMLElement {
     private activeIndex;
     private searchBuffer;
     private searchTimeout;
+    private _validatorFunction;
     constructor();
     get validity(): ValidityState;
     get validationMessage(): string;
@@ -218,7 +219,8 @@ declare class FcSelect extends HTMLElement {
     }[]);
     get required(): boolean;
     set required(val: boolean);
-    get readonly(): boolean;
+    get validator(): ((value: string) => string | null) | null;
+    set validator(func: ((value: string) => string | null) | null);
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string, newVal: string): void;
     disconnectedCallback(): void;
@@ -237,7 +239,8 @@ declare class FcSelect extends HTMLElement {
     private setActiveOption;
     private getVisibleOptions;
     private selectOption;
-    private toggleDropdown;
+    private showDropdown;
+    private hideDropdown;
     private syncValidity;
     setProps(props: Record<string, any>): void;
 }

package/dist/index.js

@@ -1343,7 +1343,7 @@ var defineLabel = () => {
     return FcLabel;
 };
 
-var styles6 = `\n    :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        box-sizing: border-box;\n        font-family: var(--fc-font-family);\n        max-width: var(--fc-combobox-max-width);\n        cursor: pointer; \n    }\n\n    \n    .fc-input {\n        width: 100%;\n        box-sizing: border-box;\n        padding: var(--fc-combobox-padding);\n        padding-right: 36px;\n        \n        border-radius: var(--fc-combobox-radius);\n        background: var(--fc-combobox-bg);\n        color: var(--fc-combobox-fg);\n        border: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n        font-size: var(--fc-font-size-md);\n        box-shadow: var(--fc-combobox-shadow);\n        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n        \n        cursor: pointer; \n        caret-color: transparent; \n        user-select: none;\n    }\n\n    \n    :host([touched]:invalid) .fc-input {\n        background-color: var(--fc-combobox-bg-error);\n        border-color: var(--fc-combobox-border-error);\n    }\n\n    :host([touched]:invalid) .fc-input:focus {\n        box-shadow: 0 0 0 2px var(--fc-combobox-focus-ring-error);\n    }\n\n    .fc-input::placeholder {\n        color: var(--fc-combobox-placeholder);\n    }\n\n    .fc-input:hover {\n        border-color: var(--fc-combobox-border-hover);\n    }\n\n    .fc-input:focus {\n        border-color: var(--fc-combobox-border-focus);\n        outline: none;\n        box-shadow: var(--fc-combobox-focus-ring);\n    }\n\n    \n    .fc-chevron {\n        position: absolute;\n        right: 12px;\n        top: 50%;\n        transform: translateY(-50%);\n        width: var(--fc-select-dropdown-icon-width);\n        height: var(--fc-select-dropdown-icon-height);\n        pointer-events: none;\n        color: var(--fc-combobox-fg);\n        transition: transform 0.2s ease;\n    }\n\n    \n    :host([open]) .fc-chevron {\n        transform: translateY(-50%) rotate(180deg);\n    }\n\n    :host([disabled]) {\n        cursor: not-allowed;\n    }\n\n    .fc-input:disabled {\n        background: var(--fc-combobox-bg-disabled);\n        cursor: not-allowed;\n        box-shadow: none;\n        color: var(--fc-combobox-placeholder-disabled);\n    }\n\n    :host([disabled]) .fc-chevron {\n        color: var(--fc-combobox-placeholder-disabled);\n    }\n\n    .fc-options {\n        position: absolute;\n        top: calc(100% + 6px);\n        left: 0;\n        right: 0;\n        z-index: 1000;\n        background: var(--fc-combobox-dropdown-bg, var(--fc-combobox-bg));\n        border: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n        border-radius: var(--fc-combobox-dropdown-radius, var(--fc-combobox-radius));\n        padding: var(--fc-combobox-dropdown-padding, calc(var(--fc-combobox-padding) - 5px));\n        box-shadow: var(--fc-combobox-dropdown-shadow);\n        max-height: var(--fc-combobox-dropdown-max-height, 240px);\n        overflow-y: auto;\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    }\n\n    .fc-options.opens-up {\n        top: auto;\n        bottom: calc(100% + 6px);\n    }\n    \n    .fc-options[hidden] {\n        display: none !important;\n    }\n`;
+var styles6 = `\n    :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        box-sizing: border-box;\n        font-family: var(--fc-font-family);\n        max-width: var(--fc-select-max-width);\n        cursor: pointer; \n    }\n\n    \n    .fc-input {\n        width: 100%;\n        box-sizing: border-box;\n        padding: var(--fc-select-padding);\n        padding-right: 36px; /* space for dropdown icon */\n        border-radius: var(--fc-select-radius);\n        background: var(--fc-select-bg);\n        color: var(--fc-select-fg);\n        border: var(--fc-select-border-width) solid var(--fc-select-border);\n        font-size: var(--fc-font-size-md);\n        box-shadow: var(--fc-select-shadow);\n        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n        \n        cursor: pointer; \n        caret-color: transparent; \n        user-select: none;\n    }\n\n    \n    :host([touched]:invalid) .fc-input {\n        background-color: var(--fc-select-bg-error);\n        border-color: var(--fc-select-border-error);\n    }\n\n    :host([touched]:invalid) .fc-input:focus {\n        box-shadow: 0 0 0 2px var(--fc-select-focus-ring-error);\n    }\n\n    .fc-input::placeholder {\n        color: var(--fc-select-placeholder);\n    }\n\n    .fc-input:hover {\n        border-color: var(--fc-select-border-hover);\n    }\n\n    .fc-input:focus {\n        border-color: var(--fc-select-border-focus);\n        outline: none;\n        box-shadow: var(--fc-select-focus-ring);\n    }\n\n    \n    .fc-chevron {\n        position: absolute;\n        right: 12px;\n        top: 50%;\n        transform: translateY(-50%);\n        width: var(--fc-select-dropdown-icon-width);\n        height: var(--fc-select-dropdown-icon-height);\n        pointer-events: none;\n        color: var(--fc-select-fg);\n        transition: transform 0.2s ease;\n    }\n\n    \n    :host([open]) .fc-chevron {\n        transform: translateY(-50%) rotate(180deg);\n    }\n\n    :host([disabled]) {\n        cursor: not-allowed;\n    }\n\n    .fc-input:disabled {\n        background: var(--fc-select-bg-disabled);\n        cursor: not-allowed;\n        box-shadow: none;\n        color: var(--fc-select-placeholder-disabled);\n    }\n\n    :host([disabled]) .fc-chevron {\n        color: var(--fc-select-placeholder-disabled);\n    }\n\n    .fc-options {\n        position: absolute;\n        top: calc(100% + 6px);\n        left: 0;\n        right: 0;\n        z-index: 1000;\n        background: var(--fc-select-dropdown-bg, var(--fc-select-bg));\n        border: var(--fc-select-border-width) solid var(--fc-select-border);\n        border-radius: var(--fc-select-dropdown-radius, var(--fc-select-radius));\n        padding: var(--fc-select-dropdown-padding, calc(var(--fc-select-padding) - 5px));\n        box-shadow: var(--fc-select-dropdown-shadow);\n        max-height: var(--fc-select-dropdown-max-height, 240px);\n        overflow-y: auto;\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    }\n\n    .fc-options.opens-up {\n        top: auto;\n        bottom: calc(100% + 6px);\n    }\n    \n    .fc-options[hidden] {\n        display: none !important;\n    }\n`;
 
 var template6 = document.createElement("template");
 
@@ -1356,6 +1356,7 @@ var FcSelect = class extends HTMLElement {
         this.activeIndex = -1;
         this.searchBuffer = "";
         this.searchTimeout = null;
+        this._validatorFunction = null;
         const shadow = this.attachShadow({
             mode: "open",
             delegatesFocus: true
@@ -1467,8 +1468,12 @@ var FcSelect = class extends HTMLElement {
         }
         this.removeAttribute("required");
     }
-    get readonly() {
-        return this.hasAttribute("readonly");
+    get validator() {
+        return this._validatorFunction;
+    }
+    set validator(func) {
+        this._validatorFunction = func;
+        this.syncValidity();
     }
     connectedCallback() {
         this.internals.setFormValue(this.value);
@@ -1509,7 +1514,7 @@ var FcSelect = class extends HTMLElement {
             this.inputEl.disabled = isDisabled;
             this.internals.ariaDisabled = isDisabled ? "true" : "false";
             if (isDisabled) {
-                this.toggleDropdown(false);
+                this.hideDropdown();
             }
         }
         if (name === "required" && this.inputEl) {
@@ -1532,7 +1537,7 @@ var FcSelect = class extends HTMLElement {
         options.forEach(option => {
             option.selected = false;
         });
-        this.toggleDropdown(false);
+        this.hideDropdown();
         this.removeAttribute("touched");
         this.syncValidity();
         this.dispatchEvent(new CustomEvent("fc-reset", {
@@ -1565,7 +1570,11 @@ var FcSelect = class extends HTMLElement {
         if (this.disabled) {
             return;
         }
-        this.toggleDropdown(this.dropdownEl.hidden);
+        if (this.dropdownEl.hidden) {
+            this.showDropdown();
+        } else {
+            this.hideDropdown();
+        }
     }
     onChange(e) {
         e.stopPropagation();
@@ -1592,7 +1601,7 @@ var FcSelect = class extends HTMLElement {
             option.selected = selected;
             option.active = false;
         });
-        this.toggleDropdown(false);
+        this.hideDropdown();
         this.syncValidity();
         this.dispatchEvent(new CustomEvent("fc-change", {
             detail: {
@@ -1605,13 +1614,13 @@ var FcSelect = class extends HTMLElement {
     }
     onOutsideClick(e) {
         if (!this.contains(e.target)) {
-            this.toggleDropdown(false);
+            this.hideDropdown();
         }
     }
     onFocusOut(e) {
         const target = e.relatedTarget;
         if (!target || !this.contains(target)) {
-            this.toggleDropdown(false);
+            this.hideDropdown();
         }
     }
     onSlotChange() {
@@ -1640,7 +1649,7 @@ var FcSelect = class extends HTMLElement {
         if (e.key === "ArrowDown") {
             e.preventDefault();
             if (this.dropdownEl.hidden) {
-                this.toggleDropdown(true);
+                this.showDropdown();
                 return;
             }
             const nextIndex = this.activeIndex >= options.length - 1 ? 0 : this.activeIndex + 1;
@@ -1648,7 +1657,7 @@ var FcSelect = class extends HTMLElement {
         } else if (e.key === "ArrowUp") {
             e.preventDefault();
             if (this.dropdownEl.hidden) {
-                this.toggleDropdown(true);
+                this.showDropdown();
                 return;
             }
             const prevIndex = this.activeIndex <= 0 ? options.length - 1 : this.activeIndex - 1;
@@ -1656,20 +1665,20 @@ var FcSelect = class extends HTMLElement {
         } else if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
             if (this.dropdownEl.hidden) {
-                this.toggleDropdown(true);
+                this.showDropdown();
             } else {
                 if (this.activeIndex > -1 && options[this.activeIndex]) {
                     const target = options[this.activeIndex];
                     this.selectOption(target);
                 } else {
-                    this.toggleDropdown(false);
+                    this.hideDropdown();
                 }
             }
         } else if (e.key === "Escape") {
             e.preventDefault();
-            this.toggleDropdown(false);
+            this.hideDropdown();
         } else if (e.key === "Tab") {
-            this.toggleDropdown(false);
+            this.hideDropdown();
         } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
             e.preventDefault();
             this.handleTypeAhead(e.key);
@@ -1738,7 +1747,7 @@ var FcSelect = class extends HTMLElement {
             opt.selected = selected;
             opt.active = false;
         });
-        this.toggleDropdown(false);
+        this.hideDropdown();
         this.syncValidity();
         this.dispatchEvent(new CustomEvent("fc-change", {
             detail: {
@@ -1749,41 +1758,41 @@ var FcSelect = class extends HTMLElement {
             composed: true
         }));
     }
-    toggleDropdown(show) {
-        if (!this.dropdownEl) {
+    showDropdown() {
+        if (!this.dropdownEl || this.disabled) {
             return;
         }
-        if (this.disabled && show) {
+        const dropdown = this.dropdownEl;
+        const showEvent = new CustomEvent("fc-show", {
+            bubbles: true,
+            composed: true,
+            cancelable: true
+        });
+        this.dispatchEvent(showEvent);
+        if (showEvent.defaultPrevented) {
             return;
         }
-        const dropdown = this.dropdownEl;
-        if (show) {
-            const showEvent = new CustomEvent("fc-show", {
-                bubbles: true,
-                composed: true,
-                cancelable: true
-            });
-            this.dispatchEvent(showEvent);
-            if (showEvent.defaultPrevented) {
-                return;
-            }
-            const spaceBelow = calculateBottomAvaliableSpace(this.inputEl);
-            const spaceAbove = calculateTopAvaliableSpace(this.inputEl);
-            dropdown.hidden = false;
-            this.setAttribute("open", "true");
-            this.inputEl.setAttribute("aria-expanded", "true");
-            const shouldOpenUp = spaceBelow < dropdown.clientHeight && spaceAbove > spaceBelow;
-            dropdown.classList.toggle("opens-up", shouldOpenUp);
-            const options = this.getVisibleOptions();
-            const selectedIndex = options.findIndex(opt => opt.value === this._value);
-            if (selectedIndex >= 0) {
-                this.setActiveOption(selectedIndex, options);
-            } else {
-                this.activeIndex = -1;
-            }
-            setTimeout(() => {
-                document.addEventListener("click", this.onOutsideClick);
-            }, 0);
+        const spaceBelow = calculateBottomAvaliableSpace(this.inputEl);
+        const spaceAbove = calculateTopAvaliableSpace(this.inputEl);
+        dropdown.hidden = false;
+        this.setAttribute("open", "true");
+        this.inputEl.setAttribute("aria-expanded", "true");
+        const shouldOpenUp = spaceBelow < dropdown.clientHeight && spaceAbove > spaceBelow;
+        dropdown.classList.toggle("opens-up", shouldOpenUp);
+        const options = this.getVisibleOptions();
+        const selectedIndex = options.findIndex(opt => opt.value === this._value);
+        if (selectedIndex >= 0) {
+            this.setActiveOption(selectedIndex, options);
+        } else {
+            this.activeIndex = -1;
+        }
+        setTimeout(() => {
+            document.addEventListener("click", this.onOutsideClick);
+        }, 0);
+        return;
+    }
+    hideDropdown() {
+        if (!this.dropdownEl) {
             return;
         }
         if (!this.dropdownEl.hidden) {
@@ -1808,18 +1817,15 @@ var FcSelect = class extends HTMLElement {
             this.internals.setValidity(this.inputEl.validity, this.inputEl.validationMessage, this.inputEl);
             return;
         }
-        const options = this.querySelectorAll("fc-option");
-        let match = false;
-        options.forEach(option => {
-            if (option.value === this._value) {
-                match = true;
+        this.querySelectorAll("fc-option");
+        if (this._validatorFunction) {
+            const customErrorMessage = this._validatorFunction(this.value);
+            if (customErrorMessage) {
+                this.internals.setValidity({
+                    customError: true
+                }, customErrorMessage, this.inputEl);
+                return;
             }
-        });
-        if (!match) {
-            this.internals.setValidity({
-                customError: true
-            }, "Please select a valid option from the list.", this.inputEl);
-            return;
         }
         this.internals.setValidity({});
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancy-ui-ts",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "type": "module",
   "description": "A library to easily create cool and customizable webcomponents.",
   "main": "dist/index.js",