@jsfour/root-ui 0.0.1

package/dist/collection/components/banner/banner.css

@@ -0,0 +1,18 @@
+.root-banner {
+  text-align: center;
+  color: var(--rootsdk-text-primary);
+  padding: 0.4rem;
+}
+.root-banner--primary {
+  background-color: var(--rootsdk-brand-primary);
+  color: var(--rootsdk-text-white);
+}
+.root-banner--danger {
+  background-color: var(--rootsdk-error);
+}
+.root-banner--warning {
+  background-color: var(--rootsdk-warning);
+}
+.root-banner--success {
+  background-color: var(--rootsdk-brand-tertiary);
+}

package/dist/collection/components/banner/banner.js

@@ -0,0 +1,147 @@
+import { h } from "@stencil/core";
+import { randomIdGenerator } from "../../global/utils/randomIdGenerator";
+import { RootBannerVariation } from "./banner-variation.enum";
+export class RootBanner {
+    constructor() {
+        this.bannerId = randomIdGenerator('root-banner');
+        this.variation = RootBannerVariation.PRIMARY;
+        this.fullWidth = false;
+        this.disabled = false;
+    }
+    clickHandler(e) {
+        this.rootBannerClick.emit(e);
+    }
+    render() {
+        const classes = {
+            'root-banner': true,
+            [`root-banner--${this.variation}`]: !!this.variation
+        };
+        return (h("div", { key: '96197510d7a0988a356be8a6bdddf637e5383870', id: this.bannerId, class: classes, onClick: (e) => this.clickHandler(e) }, h("slot", { key: 'b17c26ca99e7f3575c9d2849c644e0fef1e30dff' })));
+    }
+    static get is() { return "root-banner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["banner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["banner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "bannerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "banner-id",
+                "defaultValue": "randomIdGenerator('root-banner')"
+            },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RootBannerVariation",
+                    "resolved": "RootBannerVariation.DANGER | RootBannerVariation.PRIMARY | RootBannerVariation.SECONDARY | RootBannerVariation.SUCCESS | RootBannerVariation.TERTIARY | RootBannerVariation.WARNING",
+                    "references": {
+                        "RootBannerVariation": {
+                            "location": "import",
+                            "path": "./banner-variation.enum",
+                            "id": "src/components/banner/banner-variation.enum.ts::RootBannerVariation",
+                            "referenceLocation": "RootBannerVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variation",
+                "defaultValue": "RootBannerVariation.PRIMARY"
+            },
+            "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"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rootBannerClick",
+                "name": "rootBannerClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,49 @@
+.root-breadcrumbs {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 0.5rem;
+  align-items: center;
+}
+.root-breadcrumbs .root-breadcrumbs-item {
+  display: flex;
+  align-items: center;
+}
+.root-breadcrumbs .root-breadcrumbs-item:not(:last-child)::after {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>') center;
+  content: " ";
+  display: inline-block;
+  filter: invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%);
+  height: 0.5rem;
+  margin: 0 0.5rem;
+  opacity: 0.5;
+  width: 0.5rem;
+}
+.root-breadcrumbs .root-breadcrumbs-item--active span {
+  background: var(--rootsdk-highlight-normal);
+  color: var(--rootsdk-text-tertiary);
+  border-radius: 1.5rem;
+  padding: 0.32rem 0.64rem;
+  font-size: 0.8rem;
+}
+.root-breadcrumbs .root-breadcrumbs-item .root-breadcrumbs-link {
+  text-decoration: underline;
+  cursor: pointer;
+  color: var(--rootsdk-text-primary);
+  padding: 0.32rem 0.64rem;
+  border-radius: 1.5rem;
+  transition-duration: 200ms;
+  transition-property: background, color;
+  font-size: 0.8rem;
+}
+.root-breadcrumbs .root-breadcrumbs-item .root-breadcrumbs-link .root-icon {
+  height: 1.1rem;
+  position: relative;
+  top: 1px;
+  vertical-align: top;
+  width: 1.1rem;
+}
+.root-breadcrumbs .root-breadcrumbs-item .root-breadcrumbs-link:hover {
+  background-color: var(--rootsdk-highlight-normal);
+}

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,95 @@
+import { h } from "@stencil/core";
+import { randomIdGenerator } from "../../global/utils/randomIdGenerator";
+export class RootBreadcrumbs {
+    constructor() {
+        this.breadcrumbsId = randomIdGenerator('root-breadcrumbs');
+        this.linkItems = [];
+    }
+    componentDidLoad() {
+        this.getBreadcrumbs();
+    }
+    getBreadcrumbs() {
+        const elements = this.hostElement.children;
+        if (!elements || (elements === null || elements === void 0 ? void 0 : elements.length) <= 0) {
+            console.warn(`The slot contains no link elements.`, this.hostElement);
+            return;
+        }
+        this.linkItems = [...elements]
+            .filter((element) => element.tagName.toLowerCase() === 'a')
+            .map((element) => {
+            return {
+                text: element.textContent,
+                href: element.getAttribute('href') || ''
+            };
+        });
+    }
+    clickHandler(e) {
+        this.linkClick.emit(e);
+    }
+    render() {
+        return (h("ol", { key: 'ffa88751925c0a1f19acb06854bd4add08edec4f', class: 'root-breadcrumbs', id: this.breadcrumbsId }, this.linkItems.map((item, index) => {
+            const isLast = index === this.linkItems.length - 1;
+            return (h("li", { class: { 'root-breadcrumbs-item': true, 'root-breadcrumbs-item--active': isLast } }, isLast ? (h("span", null, item.text)) : (h("a", { class: "root-breadcrumbs-link", onClick: (e) => this.clickHandler(e), href: item.href }, item.text))));
+        })));
+    }
+    static get is() { return "root-breadcrumbs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["breadcrumbs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["breadcrumbs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "breadcrumbsId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "breadcrumbs-id",
+                "defaultValue": "randomIdGenerator('root-breadcrumbs')"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "linkItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "linkClick",
+                "name": "linkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/button/button-size.enum.js

@@ -0,0 +1,5 @@
+export var RootButtonSize;
+(function (RootButtonSize) {
+    RootButtonSize["SMALL"] = "small";
+    RootButtonSize["LARGE"] = "large";
+})(RootButtonSize || (RootButtonSize = {}));

package/dist/collection/components/button/button-type.enum.js

@@ -0,0 +1,6 @@
+export var RootButtonType;
+(function (RootButtonType) {
+    RootButtonType["BUTTON"] = "button";
+    RootButtonType["SUBMIT"] = "submit";
+    RootButtonType["RESET"] = "reset";
+})(RootButtonType || (RootButtonType = {}));

package/dist/collection/components/button/button-variation.enum.js

@@ -0,0 +1,10 @@
+export var RootButtonVariation;
+(function (RootButtonVariation) {
+    RootButtonVariation["PRIMARY"] = "primary";
+    RootButtonVariation["SECONDARY"] = "secondary";
+    RootButtonVariation["TERTIARY"] = "tertiary";
+    RootButtonVariation["OUTLINE"] = "outline";
+    RootButtonVariation["SUBMIT"] = "submit";
+    RootButtonVariation["DANGER"] = "danger";
+    RootButtonVariation["CANCEL"] = "cancel";
+})(RootButtonVariation || (RootButtonVariation = {}));

package/dist/collection/components/button/button.css

@@ -0,0 +1,61 @@
+.root-button {
+  height: 2rem;
+  border-radius: 1.5rem;
+  padding: 0 1.75rem;
+  min-width: fit-content;
+  background-color: transparent;
+  color: var(--rootsdk-text-primary);
+  outline: none;
+  font-size: 1rem;
+  border: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  text-transform: capitalize;
+}
+.root-button--submit {
+  background: var(--rootsdk-text-primary);
+  color: var(--rootsdk-background-tertiary);
+}
+.root-button--danger {
+  background: var(--rootsdk-error);
+  color: var(--rootsdk-text-white);
+}
+.root-button--primary {
+  background: var(--rootsdk-brand-primary);
+  color: var(--rootsdk-text-white);
+}
+.root-button--secondary {
+  background: var(--rootsdk-brand-secondary);
+  color: var(--rootsdk-input);
+}
+.root-button--tertiary {
+  background: var(--rootsdk-brand-tertiary);
+  color: var(--rootsdk-input);
+}
+.root-button--outline {
+  background: transparent;
+  border: 0.0625rem solid var(--rootsdk-text-tertiary);
+  color: var(--rootsdk-text-primary);
+}
+.root-button--cancel {
+  background: transparent;
+  border: 0.0625rem solid var(--rootsdk-text-tertiary);
+  color: var(--rootsdk-text-primary);
+}
+.root-button--large {
+  height: 3.25rem;
+}
+.root-button[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.root-button--full-width {
+  width: 100%;
+}
+.root-button:hover {
+  opacity: 80%;
+}
+.root-button:active {
+  transform: scale(0.98);
+}

package/dist/collection/components/button/button.js

@@ -0,0 +1,207 @@
+import { h } from "@stencil/core";
+import { randomIdGenerator } from "../../global/utils/randomIdGenerator";
+import { RootButtonVariation } from "./button-variation.enum";
+import { RootButtonSize } from "./button-size.enum";
+import { RootButtonType } from "./button-type.enum";
+export class RootButton {
+    constructor() {
+        this.buttonId = randomIdGenerator('root-button');
+        this.size = RootButtonSize.SMALL;
+        this.variation = RootButtonVariation.PRIMARY;
+        this.type = RootButtonType.BUTTON;
+        this.fullWidth = false;
+        this.disabled = false;
+    }
+    clickHandler(e) {
+        this.rootButtonClick.emit(e);
+    }
+    render() {
+        const classes = {
+            'root-button': true,
+            [`root-button--${this.size}`]: !!this.size,
+            [`root-button--${this.variation}`]: !!this.variation,
+            'root-button--full-width': this.fullWidth,
+        };
+        return (h("button", { key: '951b963255c7eab4f286758ff133e9bad9969ee3', id: this.buttonId, class: classes, disabled: this.disabled, type: this.type, onClick: (e) => this.clickHandler(e) }, h("slot", { key: 'f50823d7bcfd0b291fbeddb17e8a5d740b7edb2a' })));
+    }
+    static get is() { return "root-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "buttonId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-id",
+                "defaultValue": "randomIdGenerator('root-button')"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RootButtonSize",
+                    "resolved": "RootButtonSize.LARGE | RootButtonSize.SMALL",
+                    "references": {
+                        "RootButtonSize": {
+                            "location": "import",
+                            "path": "./button-size.enum",
+                            "id": "src/components/button/button-size.enum.ts::RootButtonSize",
+                            "referenceLocation": "RootButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "RootButtonSize.SMALL"
+            },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RootButtonVariation",
+                    "resolved": "RootButtonVariation.CANCEL | RootButtonVariation.DANGER | RootButtonVariation.OUTLINE | RootButtonVariation.PRIMARY | RootButtonVariation.SECONDARY | RootButtonVariation.SUBMIT | RootButtonVariation.TERTIARY",
+                    "references": {
+                        "RootButtonVariation": {
+                            "location": "import",
+                            "path": "./button-variation.enum",
+                            "id": "src/components/button/button-variation.enum.ts::RootButtonVariation",
+                            "referenceLocation": "RootButtonVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variation",
+                "defaultValue": "RootButtonVariation.PRIMARY"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RootButtonType",
+                    "resolved": "RootButtonType.BUTTON | RootButtonType.RESET | RootButtonType.SUBMIT",
+                    "references": {
+                        "RootButtonType": {
+                            "location": "import",
+                            "path": "./button-type.enum",
+                            "id": "src/components/button/button-type.enum.ts::RootButtonType",
+                            "referenceLocation": "RootButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "RootButtonType.BUTTON"
+            },
+            "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"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rootButtonClick",
+                "name": "rootButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/index.js

@@ -0,0 +1,6 @@
+export * from './button/button';
+export * from './badge/badge';
+export * from './banner/banner';
+export * from './breadcrumbs/breadcrumbs';
+export * from './input/input';
+export * from './list/list';

package/dist/collection/components/input/input-type.enum.js

@@ -0,0 +1,18 @@
+export var RootInputType;
+(function (RootInputType) {
+    RootInputType["COLOR"] = "color";
+    RootInputType["DATE"] = "date";
+    RootInputType["EMAIL"] = "email";
+    RootInputType["FILE"] = "file";
+    RootInputType["IMAGE"] = "image";
+    RootInputType["MONTH"] = "month";
+    RootInputType["NUMBER"] = "number";
+    RootInputType["PASSWORD"] = "password";
+    RootInputType["SEARCH"] = "search";
+    RootInputType["SUBMIT"] = "submit";
+    RootInputType["TEL"] = "tel";
+    RootInputType["TEXT"] = "text";
+    RootInputType["TIME"] = "time";
+    RootInputType["URL"] = "url";
+    RootInputType["WEEK"] = "week";
+})(RootInputType || (RootInputType = {}));