inputs-wc 0.1.0

package/dist/collection/collection-manifest.json

@@ -0,0 +1,14 @@
+{
+  "entries": [
+    "components/alt-input/alt-input.js",
+    "components/numeric-input/numeric-input.js",
+    "components/sample-form/sample-form.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.26.0",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/alt-input/alt-input.js

@@ -0,0 +1,118 @@
+import { h } from "@stencil/core";
+import { actions, tw } from "../../utils";
+export class AltInput {
+    constructor() {
+        this.min = 0;
+        this.max = undefined;
+        this.xId = '';
+        this.value = 0;
+        this.isInvalid = (num) => {
+            const { min, max } = this;
+            return num < min || (max !== undefined && num > max);
+        };
+        this.handleInput = event => {
+            event.preventDefault();
+            const target = event.target;
+            const num = target.value != '' ? target.value : 0;
+            actions.update(this.xId, num);
+        };
+    }
+    render() {
+        return (h("input", { key: '4f722d7778500c3f5038667e0b977dd04389c185', class: tw('text-right', this.isInvalid(this.value) ? 'text-clrs-red' : 'text-clrs-navy'), type: "number", onInput: this.handleInput, value: this.value }));
+    }
+    static get is() { return "alt-input"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["alt-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["alt-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "xId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "x-id",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "x-value",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+}

package/dist/collection/components/numeric-input/numeric-input.js

@@ -0,0 +1,144 @@
+import { h } from "@stencil/core";
+import { actions, tw } from "../../utils";
+export class NumericInput {
+    constructor() {
+        this.min = 0;
+        this.max = undefined;
+        this.xId = '';
+        this.xPrefix = '';
+        this.value = 0;
+        this.labelFor = (num) => {
+            return num > 0 ? this.xPrefix.concat(num.toLocaleString()) : '';
+        };
+        this.isInvalid = (num) => {
+            const { min, max } = this;
+            return num < min || (max !== undefined && num > max);
+        };
+        this.handleInput = event => {
+            event.preventDefault();
+            const target = event.target;
+            const text = target.value;
+            const stripped = text.replace(/[^0-9]/g, '');
+            const num = stripped !== '' ? parseInt(stripped) : 0;
+            actions.update(this.xId, num);
+        };
+    }
+    render() {
+        return (h("input", { key: '7bc740cc171519ea2928f1b63054bd8566605248', class: tw('text-right', this.isInvalid(this.value) ? 'text-clrs-red' : 'text-clrs-navy'), type: "text", onInput: this.handleInput, value: this.labelFor(this.value) }));
+    }
+    static get is() { return "numeric-input"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["numeric-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["numeric-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "xId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "x-id",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "xPrefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "x-prefix",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "x-value",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+}

package/dist/collection/components/sample-form/button.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+import { tw } from "../../utils";
+const Button = props => {
+    const { label, callback } = props;
+    return (h("button", { class: tw('mr-2 rounded-md border border-solid border-clrs-slate4 font-bold', 'bg-clrs-blue px-2 py-1 text-clrs-white', 'hover:bg-clrs-red'), onClick: callback }, label));
+};
+export { Button };
+export default Button;

package/dist/collection/components/sample-form/check.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+const Check = props => {
+    const hex = props.hex || 'currentColor';
+    const klass = props.class;
+    const label = props.label || 'check';
+    const selected = props.selected || false;
+    const size = props.size || 24;
+    return (h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" }, h("title", null, label), ' ', h("g", { fill: hex }, selected ? (h("path", { d: "M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M19 3H5C3.89 3 3 3.89 3 5V19A2 2 0 0 0 5 21H19A2 2 0 0 0 21 19V5C21 3.89 20.1 3 19 3Z" })) : (h("path", { d: "M19 3H5C3.89 3 3 3.89 3 5V19A2 2 0 0 0 5 21H19A2 2 0 0 0 21 19V5C21 3.89 20.1 3 19 3M19 5V19H5V5H19Z" }))), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+};
+export { Check };
+export default Check;

package/dist/collection/components/sample-form/radio.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+const Radio = props => {
+    const hex = props.hex || 'currentColor';
+    const klass = props.class;
+    const label = props.label || 'radio';
+    const selected = props.selected || false;
+    const size = props.size || 24;
+    return (h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" }, h("title", null, label), ' ', h("g", { fill: hex }, selected ? (h("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })) : (h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }))), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+};
+export { Radio };
+export default Radio;

package/dist/collection/components/sample-form/sample-form.js

@@ -0,0 +1,34 @@
+import { h } from "@stencil/core";
+import { actions, state } from "../../utils";
+import { Button } from "./button";
+import { Check } from "./check";
+import { Radio } from "./radio";
+export class SampleForm {
+    refresh() {
+        actions.refresh();
+    }
+    render() {
+        const { items, itemSets, pick } = state;
+        const TAG = state.tag;
+        const radios = itemSets.map((_item, indx) => {
+            return (h("span", { onClick: () => actions.pick(indx) }, h(Radio, { selected: indx == pick })));
+        });
+        const inputs = items.map(({ key, value }) => {
+            // NOTE:  we're not using the key attribute, and it works...
+            return h(TAG, { "x-id": key, "x-value": value, max: 20 });
+        });
+        return (h("div", { class: "flex flex-col gap-2 text-clrs-navy" }, h("div", { class: "flex" }, h(Button, { label: "Refresh", callback: this.refresh }), h("span", { onClick: () => actions.toggle() }, h(Check, { selected: TAG === 'numeric-input', label: TAG })), ...radios), ...inputs));
+    }
+    static get is() { return "sample-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sample-form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sample-form.css"]
+        };
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/props.css

@@ -0,0 +1,100 @@
+@property --tw-border-style {
+  syntax: '*';
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-inset-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-ring-color {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: '*';
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-blur {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: '*';
+  inherits: false;
+}