fancy-ui-ts 1.1.0 → 1.2.0

package/dist/index.css

@@ -129,6 +129,9 @@
   --fc-error-fg: var(--fc-danger-300);
   --fc-error-max-width: fit-content;
   --fc-error-font-size: var(--fc-font-size-sm);
+  --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);
 }
 
 /* src/styles/themes/fc-theme-light.css */
@@ -180,6 +183,9 @@
   --fc-input-radius: var(--fc-radius-md);
   --fc-input-shadow: var(--fc-shadow-none);
   --fc-error-fg: var(--fc-danger-300);
+  --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);
 }
 
 /* src/styles/themes/fc-theme-dark.css */
@@ -231,4 +237,7 @@
   --fc-input-radius: var(--fc-radius-md);
   --fc-input-shadow: var(--fc-shadow-none);
   --fc-error-fg: var(--fc-danger-700);
+  --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);
 }

package/dist/index.d.ts

@@ -168,6 +168,20 @@ declare class FcError extends HTMLElement {
 
 declare const defineError: () => typeof FcError;
 
+declare class FcLabel extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldVal: string, newVal: string): void;
+    get htmlFor(): string;
+    set htmlFor(val: string);
+    private onClick;
+    setProps(props: Record<string, any>): void;
+}
+
+declare const defineLabel: () => typeof FcLabel;
+
 declare const defineAll: () => void;
 
-export { FcCombobox, FcError, FcInput, FcOption, defineAll, defineCombobox, defineError, defineInput, defineOption };
+export { FcCombobox, FcError, FcInput, FcLabel, FcOption, defineAll, defineCombobox, defineError, defineInput, defineLabel, defineOption };

package/dist/index.js

@@ -1,9 +1,20 @@
-var styles = `\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n    \tfont-family: var(--fc-font-family);\n\t\tmax-width: var(--fc-combobox-max-width);\n\t}\n\n\t/* only show invalid style if the user has touched the field (blurred). the :invalid pseudo-class comes from \n\tinternals.setValidity() logic. */\n\n\t: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\t.fc-input {\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\n\t\tpadding: var(--fc-combobox-padding);\n\t\tborder-radius: var(--fc-combobox-radius);\n\t\tbackground: var(--fc-combobox-bg);\n\t\tcolor: var(--fc-combobox-fg);\n\n\t\tborder: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n\t\tfont-size: var(--fc-font-size-md);\n\n\t\tbox-shadow: var(--fc-combobox-shadow);\n\t\ttransition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\t}\n\n\t.fc-input::placeholder {\n\t\tcolor: var(--fc-combobox-placeholder);\n\t}\n\n\t.fc-input:hover {\n\t\tborder-color: var(--fc-combobox-border-hover);\n\t}\n\n\t.fc-input:focus {\n\t\tborder-color: var(--fc-combobox-border-focus);\n\t\toutline: none;\n\t\tbox-shadow: var(--fc-combobox-focus-ring);\n\t}\n\n\t.fc-options {\n\t\tposition: absolute;\n\t\ttop: calc(100% + 6px);\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 1000;\n\t\tbackground: var(--fc-combobox-dropdown-bg, var(--fc-combobox-bg));\n\t\tborder: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n\t\tborder-radius: var(--fc-combobox-dropdown-radius, var(--fc-combobox-radius));\n\t\tpadding: var(--fc-combobox-dropdown-padding, calc(var(--fc-combobox-padding) - 5px));\n\t\tbox-shadow: var(--fc-combobox-dropdown-shadow);\n\t\tmax-height: var(--fc-combobox-dropdown-max-height, 240px);\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 4px;\n\t}\n\t\n\t.fc-options[hidden] {\n        display: none !important;\n    }\n\n\t:host([disabled]) {\n        cursor: not-allowed;\n    }\n\n\t.fc-input:disabled {\n\t\tbackground: var(--fc-combobox-bg-disabled);\n        cursor: not-allowed;\n\t\tbox-shadow: none;\n    }\n\n\t.fc-input:disabled::placeholder {\n\t\tcolor: var(--fc-combobox-placeholder-disabled);\n    }\n\n\t.fc-input:disabled:hover {\n\t\tborder-color: var(--fc-combobox-border);\n\t}\n\n\t.fc-input:disabled:focus {\n\t\tborder-color: var(--fc-combobox-border);\n\t}\n`;
+var styles = `\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n    \tfont-family: var(--fc-font-family);\n\t\tmax-width: var(--fc-combobox-max-width);\n\t}\n\n\t/* only show invalid style if the user has touched the field (blurred). the :invalid pseudo-class comes from \n\tinternals.setValidity() logic. */\n\n\t: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\t.fc-input {\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\n\t\tpadding: var(--fc-combobox-padding);\n\t\tborder-radius: var(--fc-combobox-radius);\n\t\tbackground: var(--fc-combobox-bg);\n\t\tcolor: var(--fc-combobox-fg);\n\n\t\tborder: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n\t\tfont-size: var(--fc-font-size-md);\n\n\t\tbox-shadow: var(--fc-combobox-shadow);\n\t\ttransition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\t}\n\n\t.fc-input::placeholder {\n\t\tcolor: var(--fc-combobox-placeholder);\n\t}\n\n\t.fc-input:hover {\n\t\tborder-color: var(--fc-combobox-border-hover);\n\t}\n\n\t.fc-input:focus {\n\t\tborder-color: var(--fc-combobox-border-focus);\n\t\toutline: none;\n\t\tbox-shadow: var(--fc-combobox-focus-ring);\n\t}\n\n\t.fc-options {\n\t\tposition: absolute;\n\t\ttop: calc(100% + 6px);\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 1000;\n\t\tbackground: var(--fc-combobox-dropdown-bg, var(--fc-combobox-bg));\n\t\tborder: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n\t\tborder-radius: var(--fc-combobox-dropdown-radius, var(--fc-combobox-radius));\n\t\tpadding: var(--fc-combobox-dropdown-padding, calc(var(--fc-combobox-padding) - 5px));\n\t\tbox-shadow: var(--fc-combobox-dropdown-shadow);\n\t\tmax-height: var(--fc-combobox-dropdown-max-height, 240px);\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 4px;\n\t}\n\n\t.fc-options.opens-up {\n        top: auto;\n        bottom: calc(100% + 6px);\n    }\n\t\n\t.fc-options[hidden] {\n        display: none !important;\n    }\n\n\t:host([disabled]) {\n        cursor: not-allowed;\n    }\n\n\t.fc-input:disabled {\n\t\tbackground: var(--fc-combobox-bg-disabled);\n        cursor: not-allowed;\n\t\tbox-shadow: none;\n    }\n\n\t.fc-input:disabled::placeholder {\n\t\tcolor: var(--fc-combobox-placeholder-disabled);\n    }\n\n\t.fc-input:disabled:hover {\n\t\tborder-color: var(--fc-combobox-border);\n\t}\n\n\t.fc-input:disabled:focus {\n\t\tborder-color: var(--fc-combobox-border);\n\t}\n`;
 
 var template = document.createElement("template");
 
 template.innerHTML = `\n\t<style>${styles}</style>\n\n\t<input \n\t\tclass="fc-input"\n\t\ttype="text" \n\t\trole="combobox"\n\t\taria-autocomplete="list"\n\t\taria-expanded="false"\n\t\taria-haspopup="listbox"\n\t\taria-controls="fc-options"\n\t\tpart="input"\n\t\tautocomplete="off"\n\t/>\n\n\t<div \n\t\tpart="options" \n\t\tclass="fc-options" \n\t\trole="listbox"\n\t\thidden\n\t>\n\t\t<slot></slot>\n\t</div>\n\t\n`;
 
+var calculateBottomAvaliableSpace = element => {
+    const rect = element.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    return viewportHeight - rect.bottom;
+};
+
+var calculateTopAvaliableSpace = element => {
+    const rect = element.getBoundingClientRect();
+    return rect.top;
+};
+
 var FcCombobox = class extends HTMLElement {
     constructor() {
         super();
@@ -89,19 +100,6 @@ var FcCombobox = class extends HTMLElement {
         if (!this.inputEl) {
             return;
         }
-        const options = this.querySelectorAll("fc-option");
-        options.forEach(option => {
-            const selected = option.value === newValue;
-            option.selected = selected;
-            option.hidden = !selected;
-            option.active = false;
-            if (selected) {
-                this.inputEl.value = option.label;
-            }
-        });
-        if (this.inputEl.value === "") {
-            this.inputEl.value = newValue;
-        }
         this.syncValidity();
     }
     get label() {
@@ -256,12 +254,23 @@ var FcCombobox = class extends HTMLElement {
             this._value = restoredValue;
             this.internals.setFormValue(restoredValue);
             const options = this.querySelectorAll("fc-option");
+            let foundMatch = false;
             options.forEach(option => {
-                if (option.value === restoredValue && this.inputEl) {
+                const selected = option.value === this._value;
+                option.selected = selected;
+                option.hidden = !selected;
+                if (selected) {
                     this.inputEl.value = option.label;
-                    option.selected = true;
+                    foundMatch = true;
                 }
             });
+            if (!foundMatch && this.inputEl.value === "") {
+                this.inputEl.value = this._value;
+                options.forEach(option => {
+                    const match = option.label.includes(this._value);
+                    option.hidden = !match;
+                });
+            }
             this.syncValidity();
         }
     }
@@ -393,7 +402,6 @@ var FcCombobox = class extends HTMLElement {
             const selected = option.value === this._value;
             option.selected = selected;
             option.hidden = !selected;
-            option.active = false;
             if (selected) {
                 this.inputEl.value = option.label;
                 foundMatch = true;
@@ -401,6 +409,11 @@ var FcCombobox = class extends HTMLElement {
         });
         if (!foundMatch && this.inputEl.value === "") {
             this.inputEl.value = this._value;
+            options.forEach(option => {
+                console.log(option.value);
+                const match = option.label.toLowerCase().includes(this._value.toLowerCase());
+                option.hidden = !match;
+            });
         }
         this.syncValidity();
     }
@@ -492,9 +505,13 @@ var FcCombobox = class extends HTMLElement {
         }
         const dropdown = this.dropdownEl;
         if (show) {
+            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);
             return;
         }
         this.dropdownEl.hidden = true;
@@ -1236,11 +1253,77 @@ var defineError = () => {
     return FcError;
 };
 
+var styles5 = `\n    :host {\n        display: block;\n        width: 100%;\n        box-sizing: border-box;\n        font-family: var(--fc-font-family, inherit);\n        font-size: var(--fc-label-font-size);\n        font-weight: var(--fc-label-font-weight);\n        color: var(--fc-label-fg);\n        cursor: pointer;\n        line-height: 1.5;\n    }\n\n    :host([hidden]) {\n        display: none !important;\n    }\n\n    .fc-label-text {\n        display: flex;\n        align-items: center;\n    }\n`;
+
+var template5 = document.createElement("template");
+
+template5.innerHTML = `\n    <style>${styles5}</style>\n    <div class="fc-label-text" part="text">\n        <slot></slot>\n    </div>\n`;
+
+var FcLabel = class extends HTMLElement {
+    static get observedAttributes() {
+        return [ "for" ];
+    }
+    constructor() {
+        super();
+        const shadow = this.attachShadow({
+            mode: "open"
+        });
+        shadow.appendChild(template5.content.cloneNode(true));
+        this.onClick = this.onClick.bind(this);
+    }
+    connectedCallback() {
+        this.addEventListener("click", this.onClick);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.onClick);
+    }
+    attributeChangedCallback(name, _oldVal, newVal) {}
+    get htmlFor() {
+        var _a;
+        return (_a = this.getAttribute("for")) != null ? _a : "";
+    }
+    set htmlFor(val) {
+        this.setAttribute("for", val);
+    }
+    onClick(e) {
+        e.preventDefault();
+        const targetId = this.getAttribute("for");
+        if (!targetId) {
+            return;
+        }
+        const targetEl = document.getElementById(targetId);
+        if (targetEl) {
+            targetEl.focus();
+            targetEl.click();
+        }
+    }
+    setProps(props) {
+        for (const property in props) {
+            const value = props[property];
+            if (property in this) {
+                this[property] = value;
+                continue;
+            }
+            if ([ "string", "number", "boolean" ].includes(typeof value)) {
+                this.setAttribute(property, String(value));
+            }
+        }
+    }
+};
+
+var defineLabel = () => {
+    if (!customElements.get("fc-label")) {
+        customElements.define("fc-label", FcLabel);
+    }
+    return FcLabel;
+};
+
 var defineAll = () => {
     defineCombobox();
     defineOption();
     defineInput();
     defineError();
+    defineLabel();
 };
 
-export { FcCombobox, FcError, FcInput, FcOption, defineAll, defineCombobox, defineError, defineInput, defineOption };
+export { FcCombobox, FcError, FcInput, FcLabel, FcOption, defineAll, defineCombobox, defineError, defineInput, defineLabel, defineOption };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancy-ui-ts",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "description": "A library to easily create cool and customizable webcomponents.",
   "main": "dist/index.js",
@@ -26,6 +26,20 @@
     "build": "tsup",
     "build:watch": "tsup --watch"
   },
+  "keywords": [
+    "web-components",
+    "components",
+    "custom-elements",
+    "typescript",
+    "ui-library",
+    "design-system",
+    "combobox",
+    "input",
+    "label",
+    "html",
+    "react",
+    "vue"
+  ],
   "author": "Luan Peixoto",
   "license": "MIT",
   "devDependencies": {