fancy-ui-ts 1.1.1 → 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

@@ -410,7 +410,8 @@ var FcCombobox = class extends HTMLElement {
         if (!foundMatch && this.inputEl.value === "") {
             this.inputEl.value = this._value;
             options.forEach(option => {
-                const match = option.label.includes(this._value);
+                console.log(option.value);
+                const match = option.label.toLowerCase().includes(this._value.toLowerCase());
                 option.hidden = !match;
             });
         }
@@ -1252,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.1",
+  "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": {