@jsfour/root-ui 0.0.1

package/dist/collection/components/input/input.css

@@ -0,0 +1,134 @@
+.root-input--full-width {
+  width: 100%;
+}
+.root-input .root-input-field {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-radius: 0.75rem;
+  background-color: var(--rootsdk-input);
+  border: 0.03125rem solid var(--rootsdk-highlight-normal);
+  color: var(--rootsdk-text-primary);
+  min-height: 2em;
+  outline: transparent;
+  box-shadow: none;
+  padding: 1rem;
+  box-sizing: border-box;
+  cursor: text;
+}
+.root-input .root-input-field.root-input-field--textarea {
+  align-items: flex-start;
+}
+.root-input .root-input-field.root-input-field--file {
+  position: relative;
+  cursor: pointer;
+}
+.root-input .root-input-field.root-input-field--color {
+  position: relative;
+  cursor: pointer;
+}
+.root-input .root-input-field:focus-within {
+  border: 0.03125rem solid var(--rootsdk-brand-primary);
+}
+.root-input .root-input-field.root-input-field--error {
+  border-color: var(--rootsdk-error, #e53935);
+}
+.root-input .root-input-icon {
+  margin-right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1em;
+}
+.root-input input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  text-overflow: ellipsis;
+  cursor: text;
+}
+.root-input input[type=file] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.root-input input[type=color] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.root-input input::-webkit-calendar-picker-indicator {
+  display: none;
+}
+.root-input input::-webkit-outer-spin-button, .root-input input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.root-input textarea {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  resize: vertical;
+  min-height: 6rem;
+}
+.root-input .root-input-number-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-left: 0;
+  margin-right: 0.5rem;
+  height: 1em;
+  line-height: 0.5;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.root-input .root-input-file-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  pointer-events: none;
+}
+.root-input .root-input-color-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  pointer-events: none;
+}
+.root-input .root-input-color-swatch {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 4px;
+  border: 0.03125rem solid var(--rootsdk-highlight-normal);
+}
+.root-input .root-input-color-text {
+  font-family: inherit;
+  color: inherit;
+}
+.root-input label {
+  font-size: 0.875rem;
+  color: var(--rootsdk-text-tertiary);
+  text-transform: capitalize;
+  margin-bottom: 0.5rem;
+  display: block;
+}
+.root-input .root-input-error {
+  margin-top: 0.35rem;
+  color: var(--rootsdk-error, #e53935);
+  font-size: 0.75rem;
+}

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

@@ -0,0 +1,415 @@
+import { h } from "@stencil/core";
+import { randomIdGenerator } from "../../global/utils/randomIdGenerator";
+import { RootInputType } from "./input-type.enum";
+export class RootInput {
+    constructor() {
+        this.inputId = randomIdGenerator('root-input');
+        this.type = RootInputType.TEXT;
+        this.placeholder = '';
+        this.value = '';
+        this.fullWidth = false;
+        this.multiline = false;
+        this.icon = true;
+        this.showPassword = false;
+        this.inputValue = '';
+        this.error = '';
+        this.touched = false;
+        this.hasIcon = false;
+        this.fileLabel = 'Select file';
+        this.openPicker = () => {
+            if (!this.inputRef)
+                return;
+            const el = this.inputRef;
+            if (el instanceof HTMLInputElement && el.showPicker) {
+                el.showPicker();
+            }
+            else {
+                el.focus();
+                if (el instanceof HTMLInputElement) {
+                    el.click();
+                }
+            }
+        };
+        this.togglePasswordVisibility = () => {
+            this.showPassword = !this.showPassword;
+        };
+        this.incrementNumber = () => {
+            if (this.inputRef instanceof HTMLInputElement) {
+                this.inputRef.stepUp();
+                this.inputValue = this.inputRef.value;
+                this.rootInputChange.emit(this.inputValue);
+            }
+        };
+        this.decrementNumber = () => {
+            if (this.inputRef instanceof HTMLInputElement) {
+                this.inputRef.stepDown();
+                this.inputValue = this.inputRef.value;
+                this.rootInputChange.emit(this.inputValue);
+            }
+        };
+        this.validate = (val) => {
+            if (!val)
+                return '';
+            if (this.type === RootInputType.EMAIL) {
+                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                return emailRegex.test(val) ? '' : 'Please enter a valid email address.';
+            }
+            if (this.type === RootInputType.TEL) {
+                const phoneRegex = /^[+]?[- 0-9()]{7,}$/;
+                return phoneRegex.test(val) ? '' : 'Please enter a valid phone number.';
+            }
+            return '';
+        };
+        this.handleBlur = (e) => {
+            this.touched = true;
+            this.error = this.validate(this.inputValue);
+            this.rootInputBlur.emit(e);
+        };
+        this.handleChange = (e) => {
+            const target = e.target;
+            const nextValue = target.value;
+            this.inputValue = nextValue;
+            this.rootInputChange.emit(nextValue);
+            if (this.touched) {
+                this.error = this.validate(nextValue);
+            }
+        };
+        this.handleFileChange = (e) => {
+            var _a;
+            const target = e.target;
+            const file = (_a = target.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (file) {
+                this.fileLabel = file.name;
+            }
+            else {
+                this.fileLabel = 'Select file';
+            }
+            this.rootInputChange.emit(target.value);
+        };
+        this.handleFieldClick = () => {
+            if (!this.inputRef)
+                return;
+            if (this.multiline) {
+                this.inputRef.focus();
+                return;
+            }
+            if (this.inputRef instanceof HTMLInputElement) {
+                if (this.inputRef.type === 'color') {
+                    this.inputRef.click();
+                    return;
+                }
+                if (this.inputRef.type !== 'date') {
+                    this.inputRef.focus();
+                }
+            }
+        };
+    }
+    onValueChanged(newValue) {
+        this.inputValue = newValue;
+    }
+    componentWillLoad() {
+        this.setHasIcon();
+        this.inputValue = this.value;
+    }
+    setHasIcon() {
+        const icon = !!this.hostElement.querySelector('[slot="icon"]');
+        if (icon) {
+            this.hasIcon = icon;
+        }
+    }
+    render() {
+        const inputType = this.type === RootInputType.PASSWORD
+            ? (this.showPassword ? 'text' : 'password')
+            : this.type;
+        const colorValue = this.type === RootInputType.COLOR
+            ? (this.inputValue || '#000000')
+            : this.inputValue;
+        const classes = {
+            'root-input': true,
+            'root-input--full-width': this.fullWidth,
+        };
+        const fieldClasses = {
+            'root-input-field': true,
+            'root-input-field--error': !!this.error,
+            'root-input-field--file': this.type === RootInputType.FILE,
+            'root-input-field--color': this.type === RootInputType.COLOR,
+            'root-input-field--textarea': this.multiline,
+        };
+        return (h("div", { key: 'f0cfdfa2a787ca3d24467aa14bed615f003669a3', class: classes }, h("label", { key: 'efdc7aa0e6b58ea500d2496c2536c1ed8e1baaeb', htmlFor: this.inputId }, this.label), h("div", { key: '2aeb9c360647154827070708b7ffa5a9c43b48d6', class: fieldClasses, onClick: this.handleFieldClick }, this.hasIcon && (h("div", { key: '8d48d017c77409a49b23c31af4e8010784f7282b', class: "root-input-icon", onClick: this.openPicker }, h("slot", { key: '063c38a33aefd8b6cb3120a35f45600e998c93fa', name: "icon" }))), this.multiline ? (h("textarea", { ref: (el) => this.inputRef = el, placeholder: this.placeholder, id: this.inputId, name: this.inputName, maxLength: this.maxlength, value: this.inputValue, onBlur: this.handleBlur, onInput: this.handleChange, "aria-invalid": !!this.error ? 'true' : 'false', rows: 3 })) : (h("input", { ref: (el) => this.inputRef = el, placeholder: this.placeholder, id: this.inputId, name: this.inputName, maxLength: this.maxlength, type: inputType, value: colorValue, onBlur: this.handleBlur, onInput: this.type === RootInputType.FILE ? this.handleFileChange : this.handleChange, "aria-invalid": !!this.error ? 'true' : 'false' })), this.type === RootInputType.COLOR && (h("div", { key: '7deca8ea931a30fbcfa02cfc7232266a5d04bd6e', class: "root-input-color-label" }, h("span", { key: '03ea754ebde8113944d7a3ca84dc14fb606bed62', class: "root-input-color-swatch", style: { backgroundColor: colorValue } }), h("span", { key: '912f3e9a93f8c6a5e775b2ba7d5ddcb6976fe288', class: "root-input-color-text" }, colorValue))), this.type === RootInputType.FILE && !this.multiline && (h("div", { key: 'fe5ebf39d54b21740d1ff7e18c8ca28633d894a3', class: "root-input-file-label" }, h("span", { key: 'dab576c2c1ba5b0d8f38cd0a981aa90848a8de58' }, this.fileLabel), h("slot", { key: '4a7469093cb502a4596164a39f7e6ba9a2e45f26', name: "file-icon" }))), this.type === RootInputType.PASSWORD && !this.multiline && (h("div", { key: 'fd783cd0384fd5efd9c12e967bfd990281f9f1aa', class: "root-input-icon", onClick: this.togglePasswordVisibility }, h("slot", { key: '242f5399701370494f5f81d41cc40478136871e0', name: "password-icon" }))), this.type === RootInputType.NUMBER && !this.multiline && (h("div", { key: 'f6fa71e43701933280c41f60a27c6e3f923e3670', class: "root-input-number-controls" }, h("div", { key: '04d2f6d6e152c0c6326c0e9f38b78f6c15ea3626', class: "root-input-icon", onClick: this.incrementNumber }, h("slot", { key: '8de93b51aba6b7f220653c39d8a0e1ba234a15ed', name: "number-up-icon" })), h("div", { key: '2baf375834a3926b36d818f563e4fcf545a4146b', class: "root-input-icon", onClick: this.decrementNumber }, h("slot", { key: 'f4a7772d01d7d78e7a675ae34cee3ae76c92cdce', name: "number-down-icon" }))))), this.error && this.touched && (h("div", { key: 'e0d328cc5154baf82963af89a37e70676df94ee2', class: "root-input-error" }, this.error))));
+    }
+    static get is() { return "root-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id",
+                "defaultValue": "randomIdGenerator('root-input')"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RootInputType",
+                    "resolved": "RootInputType.COLOR | RootInputType.DATE | RootInputType.EMAIL | RootInputType.FILE | RootInputType.IMAGE | RootInputType.MONTH | RootInputType.NUMBER | RootInputType.PASSWORD | RootInputType.SEARCH | RootInputType.SUBMIT | RootInputType.TEL | RootInputType.TEXT | RootInputType.TIME | RootInputType.URL | RootInputType.WEEK",
+                    "references": {
+                        "RootInputType": {
+                            "location": "import",
+                            "path": "./input-type.enum",
+                            "id": "src/components/input/input-type.enum.ts::RootInputType",
+                            "referenceLocation": "RootInputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "RootInputType.TEXT"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "inputName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-name"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiline",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showPassword": {},
+            "inputValue": {},
+            "error": {},
+            "touched": {},
+            "hasIcon": {},
+            "fileLabel": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rootInputChange",
+                "name": "rootInputChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "rootInputBlur",
+                "name": "rootInputBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChanged"
+            }];
+    }
+}

package/dist/collection/components/list/list.css

@@ -0,0 +1,18 @@
+.root-list {
+  margin: 0;
+  padding-left: 1.5rem;
+  color: var(--rootsdk-text-primary);
+  font-size: 1rem;
+  line-height: 1.6;
+  list-style-position: inside;
+}
+.root-list--bullet {
+  list-style-type: disc;
+}
+.root-list--numbered {
+  list-style-type: decimal;
+}
+.root-list li {
+  margin-bottom: 0.5rem;
+  padding-left: 0.25rem;
+}

package/dist/collection/components/list/list.js

@@ -0,0 +1,50 @@
+import { h } from "@stencil/core";
+export class RootList {
+    constructor() {
+        /**
+         * The type of list: bullet or numbered
+         */
+        this.type = 'bullet';
+    }
+    render() {
+        const isNumbered = this.type === 'numbered';
+        const Tag = isNumbered ? 'ol' : 'ul';
+        return (h(Tag, { key: '315491245470e4eb4601debdfbdfeebec6ec0862', class: { 'root-list': true, [`root-list--${this.type}`]: true } }, h("slot", { key: '630f9ab955f57568bd6c8686068afc6593a66185' })));
+    }
+    static get is() { return "root-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bullet' | 'numbered'",
+                    "resolved": "\"bullet\" | \"numbered\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of list: bullet or numbered"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'bullet'"
+            }
+        };
+    }
+}

package/dist/collection/enums.js

@@ -0,0 +1,3 @@
+export * from './components/button/button-size.enum';
+export * from './components/button/button-type.enum';
+export * from './components/button/button-variation.enum';

package/dist/collection/global/utils/randomIdGenerator/index.js

@@ -0,0 +1,7 @@
+const ids = [];
+export function randomIdGenerator(prefix = 'root') {
+    let id = `${prefix}-${Math.random().toString(36).substring(2, 7)}`;
+    while (ids.includes(id))
+        id = `${prefix}-${Math.random().toString(36).substring(2, 7)}`;
+    return id;
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './enums';

package/dist/components/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-CIjEN4Bv.js";var t,e,n;!function(t){t.SMALL="small",t.LARGE="large"}(t||(t={})),function(t){t.BUTTON="button",t.SUBMIT="submit",t.RESET="reset"}(e||(e={})),function(t){t.PRIMARY="primary",t.SECONDARY="secondary",t.TERTIARY="tertiary",t.OUTLINE="outline",t.SUBMIT="submit",t.DANGER="danger",t.CANCEL="cancel"}(n||(n={}));export{t as RootButtonSize,e as RootButtonType,n as RootButtonVariation}