globuswebcomponents 0.6.3 → 0.6.4

package/dist/collection/components/gb-toast-button/gb-toast-button.js

@@ -0,0 +1,78 @@
+import { h } from "@stencil/core";
+export class GbToastButton {
+    constructor() {
+        this.state = undefined;
+        this.color = undefined;
+    }
+    componentDidLoad() {
+        const slottedContent = this.el.querySelector('p');
+        slottedContent.classList.add('text-sm-semi-bold');
+    }
+    render() {
+        return (h("div", { key: '8528b384f3c85eca2d301774ea64d648b83dced2', class: `toast_button ${this.state} ${this.color}` }, h("slot", { key: '9a6a36ef088a3f5fdd0ae3e85833cc2fa83d23d6' })));
+    }
+    static get is() { return "gb-toast-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-toast-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-toast-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StateEnum",
+                    "resolved": "StateEnum.Default | StateEnum.Disabled",
+                    "references": {
+                        "StateEnum": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateEnum"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralColors",
+                    "resolved": "\"default\" | \"discovery\" | \"error\" | \"gray\" | \"information\" | \"pink\" | \"primary\" | \"purple\" | \"success\" | \"warning\"",
+                    "references": {
+                        "GeneralColors": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralColors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-toast-button.js.map

package/dist/collection/components/gb-toast-button/gb-toast-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-toast-button.js","sourceRoot":"","sources":["../../../src/components/gb-toast-button/gb-toast-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAS5D,MAAM,OAAO,aAAa;;;;;IAKtB,gBAAgB;QACZ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAElD,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACtD,CAAC;IAED,MAAM;QACF,OAAO,CACL,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;YACpD,8DAAa,CACT,CACP,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Prop, h } from \"@stencil/core\";\r\nimport { GeneralColors, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-toast-button',\r\n    styleUrl: 'gb-toast-button.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbToastButton {\r\n    @Prop() state: StateEnum;\r\n    @Prop() color: GeneralColors;\r\n    @Element() el: HTMLElement;\r\n\r\n    componentDidLoad() {\r\n        const slottedContent = this.el.querySelector('p');\r\n\r\n        slottedContent.classList.add('text-sm-semi-bold');\r\n    }\r\n\r\n    render() {\r\n        return (\r\n          <div class={`toast_button ${this.state} ${this.color}`}>\r\n            <slot></slot>\r\n          </div>\r\n        );\r\n    }\r\n}"]}

package/dist/collection/components/gb-toggle/gb-toggle.css

@@ -0,0 +1,28 @@
+.toggle_div{
+    display: flex;
+    justify-content: space-between;
+    width: fit-content;
+}
+
+.toggle_div.sm{
+    gap: var(--spacing-2);
+}
+
+.toggle_div.md{
+    gap: var(--spacing-3);
+}
+
+.text{
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+}
+
+.div_centered{
+    justify-content: center;
+    padding-bottom: 0.2rem;
+}
+
+::slotted(p){
+    color: #4B5565;
+}

package/dist/collection/components/gb-toggle/gb-toggle.js

@@ -0,0 +1,138 @@
+import { h } from "@stencil/core";
+export class GbToggle {
+    constructor() {
+        this.size = undefined;
+        this.state = undefined;
+        this.supportingText = false;
+        this.pressed = false;
+    }
+    getMainTextClass() {
+        switch (this.size) {
+            case 'sm': return `text-sm-medium`;
+            case 'md': return `text-md-medium`;
+        }
+    }
+    getSupportingTextClass() {
+        switch (this.size) {
+            case 'sm': return 'text-sm-regular';
+            case 'md': return 'text-md-regular';
+        }
+    }
+    componentDidLoad() {
+        const mainTextSlot = this.el.querySelector('[slot="main_text"]');
+        const supportingTextSlot = this.el.querySelector('[slot="supporting_text"]');
+        const mainDiv = this.el.querySelector('.text');
+        if (mainTextSlot) {
+            mainTextSlot.classList.add(this.getMainTextClass());
+        }
+        if (supportingTextSlot) {
+            supportingTextSlot.classList.add(this.getSupportingTextClass());
+        }
+        if (!this.supportingText) {
+            mainDiv.classList.add('div_centered');
+        }
+    }
+    render() {
+        return (h("div", { key: '9d6db64f63f81b36c948b93e1abe081fccc1adba', class: `toggle_div ${this.size}` }, h("div", { key: 'f0c0a943b471a7c5d14cd5baa1c961ae7108a8f9', class: "toggle_base" }, h("gb-toggle-base", { key: '77f8d44dca42ae45c5543d71c25a1c7042549a75', size: this.size, state: this.state, pressed: this.pressed })), h("div", { key: '9c4fbe159ae3f5b7099e4a5796f18c81656df8c1', class: "text" }, h("slot", { key: '640ac4d9c395fe24325b2e85801b37c0835e9657', name: "main_text" }), this.supportingText && (h("slot", { key: 'd53984a05e2c997eec8af85aa8ff3b7e2652d6d9', name: "supporting_text" })))));
+    }
+    static get is() { return "gb-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-toggle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralSizes",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
+                    "references": {
+                        "GeneralSizes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StateEnum",
+                    "resolved": "StateEnum.Default | StateEnum.Disabled",
+                    "references": {
+                        "StateEnum": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateEnum"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
+            },
+            "supportingText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "supporting-text",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "pressed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "pressed",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-toggle.js.map

package/dist/{globuscomponents/gb-toggle.entry.js.map → collection/components/gb-toggle/gb-toggle.js.map}

@@ -1 +1 @@
-{"file":"gb-toggle.entry.esm.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uSAAuS;;MCS9S,QAAQ;;;;;8BAGiB,KAAK;uBACZ,KAAK;;IAGhC,gBAAgB;QACZ,QAAO,IAAI,CAAC,IAAI;YACZ,KAAK,IAAK,EAAE,OAAO,gBAAgB,CAAC;YACpC,KAAK,IAAK,EAAE,OAAO,gBAAgB,CAAC;SACvC;KACJ;IAED,sBAAsB;QAClB,QAAO,IAAI,CAAC,IAAI;YACZ,KAAK,IAAK,EAAE,OAAO,iBAAiB,CAAC;YACrC,KAAK,IAAK,EAAE,OAAO,iBAAiB,CAAC;SACxC;KACJ;IAED,gBAAgB;QACZ,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACjE,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAG,YAAY,EAAC;YACZ,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;SACvD;QAED,IAAG,kBAAkB,EAAE;YACnB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;SACnE;QAED,IAAG,CAAC,IAAI,CAAC,cAAc,EAAE;YACrB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SACzC;KACJ;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,cAAc,IAAI,CAAC,IAAI,EAAE,IACjC,4DAAK,KAAK,EAAC,aAAa,IACpB,uEACA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,GACH,CAChB,EACN,4DAAK,KAAK,EAAC,MAAM,IACb,6DAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,cAAc,KAChB,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CACvC,CACC,CACJ,EACT;KACJ;;;;;;;","names":[],"sources":["src/components/gb-toggle/gb-toggle.css?tag=gb-toggle&encapsulation=shadow","src/components/gb-toggle/gb-toggle.tsx"],"sourcesContent":[".toggle_div{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    width: fit-content;\r\n}\r\n\r\n.toggle_div.sm{\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.toggle_div.md{\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.text{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.div_centered{\r\n    justify-content: center;\r\n    padding-bottom: 0.2rem;\r\n}\r\n\r\n::slotted(p){\r\n    color: #4B5565;\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-toggle',\r\n    styleUrl: 'gb-toggle.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbToggle {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() state: StateEnum;\r\n    @Prop() supportingText: boolean = false;\r\n    @Prop() pressed: boolean = false;\r\n    @Element() el: HTMLElement;\r\n\r\n    getMainTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return `text-sm-medium`;\r\n            case 'md' : return `text-md-medium`;\r\n        }\r\n    }\r\n\r\n    getSupportingTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return 'text-sm-regular';\r\n            case 'md' : return 'text-md-regular';\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const mainTextSlot = this.el.querySelector('[slot=\"main_text\"]');\r\n        const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n        const mainDiv = this.el.querySelector('.text');\r\n\r\n        if(mainTextSlot){\r\n            mainTextSlot.classList.add(this.getMainTextClass());\r\n        }\r\n\r\n        if(supportingTextSlot) {\r\n            supportingTextSlot.classList.add(this.getSupportingTextClass());\r\n        }\r\n\r\n        if(!this.supportingText) {\r\n            mainDiv.classList.add('div_centered');\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`toggle_div ${this.size}`}>\r\n                <div class=\"toggle_base\">\r\n                    <gb-toggle-base \r\n                    size={this.size}\r\n                    state={this.state}\r\n                    pressed={this.pressed}\r\n                    ></gb-toggle-base>\r\n                </div>\r\n                <div class=\"text\">\r\n                    <slot name=\"main_text\"></slot>\r\n                    {this.supportingText && (\r\n                        <slot name=\"supporting_text\"></slot>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}"],"version":3}
+{"version":3,"file":"gb-toggle.js","sourceRoot":"","sources":["../../../src/components/gb-toggle/gb-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS5D,MAAM,OAAO,QAAQ;;;;8BAGiB,KAAK;uBACZ,KAAK;;IAGhC,gBAAgB;QACZ,QAAO,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,KAAK,IAAK,CAAC,CAAC,OAAO,gBAAgB,CAAC;YACpC,KAAK,IAAK,CAAC,CAAC,OAAO,gBAAgB,CAAC;QACxC,CAAC;IACL,CAAC;IAED,sBAAsB;QAClB,QAAO,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,KAAK,IAAK,CAAC,CAAC,OAAO,iBAAiB,CAAC;YACrC,KAAK,IAAK,CAAC,CAAC,OAAO,iBAAiB,CAAC;QACzC,CAAC;IACL,CAAC;IAED,gBAAgB;QACZ,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACjE,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAG,YAAY,EAAC,CAAC;YACb,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACxD,CAAC;QAED,IAAG,kBAAkB,EAAE,CAAC;YACpB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;QACpE,CAAC;QAED,IAAG,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC1C,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,cAAc,IAAI,CAAC,IAAI,EAAE;YACjC,4DAAK,KAAK,EAAC,aAAa;gBACpB,uEACA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,GACH,CAChB;YACN,4DAAK,KAAK,EAAC,MAAM;gBACb,6DAAM,IAAI,EAAC,WAAW,GAAQ;gBAC7B,IAAI,CAAC,cAAc,IAAI,CACpB,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CACvC,CACC,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-toggle',\r\n    styleUrl: 'gb-toggle.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbToggle {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() state: StateEnum;\r\n    @Prop() supportingText: boolean = false;\r\n    @Prop() pressed: boolean = false;\r\n    @Element() el: HTMLElement;\r\n\r\n    getMainTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return `text-sm-medium`;\r\n            case 'md' : return `text-md-medium`;\r\n        }\r\n    }\r\n\r\n    getSupportingTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return 'text-sm-regular';\r\n            case 'md' : return 'text-md-regular';\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const mainTextSlot = this.el.querySelector('[slot=\"main_text\"]');\r\n        const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n        const mainDiv = this.el.querySelector('.text');\r\n\r\n        if(mainTextSlot){\r\n            mainTextSlot.classList.add(this.getMainTextClass());\r\n        }\r\n\r\n        if(supportingTextSlot) {\r\n            supportingTextSlot.classList.add(this.getSupportingTextClass());\r\n        }\r\n\r\n        if(!this.supportingText) {\r\n            mainDiv.classList.add('div_centered');\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`toggle_div ${this.size}`}>\r\n                <div class=\"toggle_base\">\r\n                    <gb-toggle-base \r\n                    size={this.size}\r\n                    state={this.state}\r\n                    pressed={this.pressed}\r\n                    ></gb-toggle-base>\r\n                </div>\r\n                <div class=\"text\">\r\n                    <slot name=\"main_text\"></slot>\r\n                    {this.supportingText && (\r\n                        <slot name=\"supporting_text\"></slot>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}"]}