globuswebcomponents 0.3.5 → 0.3.7

package/dist/collection/components/gb-checkbox-group-item/gb-checkbox-group-item.js

@@ -0,0 +1,230 @@
+import { h } from "@stencil/core";
+export class GbCheckboxGroupItem {
+    constructor() {
+        this.size = undefined;
+        this.type = undefined;
+        this.state = undefined;
+        this.breakpoint = undefined;
+        this.showCost = false;
+        this.selected = false;
+    }
+    getLabelSizeClass() {
+        switch (this.size) {
+            case 'md':
+                return 'text-lg-semi-bold';
+            case 'sm':
+                return 'text-md-semi-bold';
+        }
+    }
+    getCostSizeClass() {
+        switch (this.size) {
+            case 'xl':
+                return 'text-md-regular';
+            case 'lg':
+                return 'text-md-regular';
+            case 'md':
+                return 'text-sm-regular';
+            case 'sm':
+                return 'text-xs-regular';
+            default:
+                return 'text-xs-regular';
+        }
+    }
+    getLabelColorClasses() {
+        switch (this.selected) {
+            case true: return 'label_selected';
+            case false: return 'label_not_selected';
+        }
+    }
+    getCostColorClasses() {
+        switch (this.selected) {
+            case true: return 'cost_selected';
+            case false: return 'cost_not_selected';
+        }
+    }
+    componentDidUpdate() {
+        const labelSlot = this.el.querySelector('[slot="label"]');
+        const costSlot = this.el.querySelector('[slot="cost"]');
+        labelSlot.classList.add(this.getLabelColorClasses());
+        costSlot.classList.add(this.getCostColorClasses());
+    }
+    componentDidLoad() {
+        const labelSlot = this.el.querySelector('[slot="label"]');
+        const costSlot = this.el.querySelector('[slot="cost"]');
+        const supportingTextSlot = this.el.querySelector('[slot="supporting_text"]');
+        if (labelSlot) {
+            labelSlot.classList.add(this.getLabelSizeClass());
+        }
+        if (costSlot) {
+            costSlot.classList.add(this.getCostSizeClass());
+            costSlot.classList.add(this.getCostColorClasses());
+        }
+        if (supportingTextSlot) {
+            supportingTextSlot.classList.add(this.getCostSizeClass());
+            supportingTextSlot.classList.add('supporting_text');
+        }
+    }
+    renderIcon() {
+        switch (this.type) {
+            case 'avatar':
+                return (h("gb-avatar", { class: "icon-md", size: "md", placeholder: false, icon: "user" }, h("img", { src: "build/assets/avatar_pic.jpg", slot: "image" })));
+            case 'payment_icon':
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "46", height: "32", viewBox: "0 0 46 32", fill: "none" }, h("rect", { x: "0.5", y: "0.5", width: "45", height: "31", rx: "5.5", fill: "white" }), h("rect", { x: "0.5", y: "0.5", width: "45", height: "31", rx: "5.5", stroke: "#F8FAFC" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.3336 21.1444H11.5872L9.52784 13.0565C9.43009 12.6845 9.22255 12.3556 8.91725 12.2006C8.15535 11.811 7.31579 11.501 6.3999 11.3446V11.0332H10.824C11.4346 11.0332 11.8925 11.501 11.9689 12.0442L13.0374 17.8782L15.7824 11.0332H18.4524L14.3336 21.1444ZM19.9789 21.1444H17.3852L19.5209 11.0332H22.1146L19.9789 21.1444ZM25.4702 13.8343C25.5465 13.2898 26.0044 12.9784 26.5387 12.9784C27.3783 12.9002 28.2928 13.0566 29.0561 13.4448L29.514 11.2678C28.7508 10.9564 27.9112 10.8 27.1493 10.8C24.6319 10.8 22.8002 12.2006 22.8002 14.1444C22.8002 15.6231 24.0977 16.3995 25.0136 16.8673C26.0044 17.3337 26.3861 17.6451 26.3097 18.1114C26.3097 18.811 25.5465 19.1224 24.7846 19.1224C23.8687 19.1224 22.9528 18.8892 22.1146 18.4997L21.6567 20.678C22.5725 21.0662 23.5634 21.2226 24.4793 21.2226C27.3019 21.2994 29.0561 19.9002 29.0561 17.8001C29.0561 15.1553 25.4702 15.0003 25.4702 13.8343ZM38.1332 21.1444L36.0738 11.0332H33.8618C33.4038 11.0332 32.9459 11.3446 32.7932 11.811L28.9797 21.1444H31.6497L32.1826 19.667H35.4632L35.7685 21.1444H38.1332ZM34.2434 13.7562L35.0053 17.5669H32.8696L34.2434 13.7562Z", fill: "#172B85" })));
+            case 'icon_simple':
+            default:
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none" }, h("path", { opacity: "0.4", d: "M11.524 4.19421L9.25088 5.24491C5.75029 6.863 4 7.67204 4 9.00008C4 10.3281 5.7503 11.1372 9.25089 12.7553L11.524 13.806C13.727 14.8243 14.8285 15.3334 16 15.3334C17.1715 15.3334 18.273 14.8243 20.476 13.806L22.7491 12.7553C26.2497 11.1372 28 10.3281 28 9.00008C28 7.67204 26.2497 6.86299 22.7491 5.2449L20.476 4.19421C18.273 3.1759 17.1715 2.66675 16 2.66675C14.8285 2.66675 13.727 3.1759 11.524 4.19421Z", fill: "#064E94" }), h("path", { d: "M27.7173 14.797C27.9058 15.062 28 15.3382 28 15.6419C28 16.951 26.2497 17.7486 22.7491 19.3436L20.476 20.3794C18.273 21.3832 17.1715 21.8851 16 21.8851C14.8285 21.8851 13.727 21.3832 11.524 20.3794L9.25089 19.3436C5.7503 17.7486 4 16.951 4 15.6419C4 15.3382 4.09422 15.062 4.28267 14.797M27.1689 21.6876C27.723 22.1289 28 22.5688 28 23.0896C28 24.3987 26.2497 25.1962 22.7491 26.7913L20.476 27.827C18.273 28.8308 17.1715 29.3327 16 29.3327C14.8285 29.3327 13.727 28.8308 11.524 27.827L9.25089 26.7913C5.7503 25.1962 4 24.3987 4 23.0896C4 22.5688 4.27704 22.1289 4.83112 21.6876M9.25088 5.24491L11.524 4.19421C13.727 3.1759 14.8285 2.66675 16 2.66675C17.1715 2.66675 18.273 3.1759 20.476 4.19421L22.7491 5.2449C26.2497 6.863 28 7.67204 28 9.00008C28 10.3281 26.2497 11.1372 22.7491 12.7553L20.476 13.806C18.273 14.8243 17.1715 15.3334 16 15.3334C14.8285 15.3334 13.727 14.8243 11.524 13.806L9.25089 12.7553C5.7503 11.1372 4 10.3281 4 9.00008C4 7.67204 5.75029 6.863 9.25088 5.24491Z", stroke: "#064E94", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+        }
+    }
+    // Toggle selected state on checkbox click
+    toggleSelection() {
+        if (this.state === 'default') {
+            this.selected = !this.selected;
+        }
+    }
+    render() {
+        console.log(this.selected);
+        return [
+            h("div", { key: 'c665a17b068b9ba93de074fe905a60acff0d8dfe', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''}`, onClick: () => this.toggleSelection() }, h("div", { key: 'affab9552cf222333f5f2f7689e84967c7ab9e39', class: "item-content" }, this.renderIcon(), h("div", { key: 'e0edfa4c1ae23416444425fdc6b100d97fe5d525', class: "text-container" }, h("div", { key: '1e48aae03edcac1b9a0a28588a0a3013693b1679', class: `label-cost ${this.type}` }, h("slot", { key: '769d68dc5cdd1632928c6387cfcfb75bb99d1b28', name: "label" }), this.showCost && (h("slot", { key: '8e931ffce11d945f6f74adb254020fd09d33e428', name: "cost" }))), this.type === 'payment_icon' ? (h("div", { class: "buttons" }, h("gb-button", { size: this.size, hierarchy: "link_gray", icon: "default", state: this.state }, h("p", null, "Set as default")), h("gb-button", { size: this.size, hierarchy: "link_color", icon: "default", state: this.state }, h("p", null, "Edit")))) : (h("slot", { name: "supporting_text" })))), h("div", { key: '7ced61272e57a66cf6899dc97005c02bb9f6ca18', class: `checkbox_container` }, h("gb-checkbox-base", { key: 'b3f6ca21775ba7560e14a261b1170054b4201b24', type: this.type === 'radio_button' ? 'radio' : this.type === 'checkbox' ? 'checkbox' : 'check_circle', size: this.size, state: this.state, checked: this.selected }))),
+        ];
+    }
+    static get is() { return "gb-checkbox-group-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-checkbox-group-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-checkbox-group-item.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
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'icon_simple' | 'avatar' | 'payment_icon' | 'radio_button' | 'checkbox'",
+                    "resolved": "\"avatar\" | \"checkbox\" | \"icon_simple\" | \"payment_icon\" | \"radio_button\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "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
+            },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BreakPoints",
+                    "resolved": "\"desktop\" | \"mobile\"",
+                    "references": {
+                        "BreakPoints": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::BreakPoints"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "breakpoint",
+                "reflect": false
+            },
+            "showCost": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-cost",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-checkbox-group-item.js.map

package/dist/collection/components/gb-checkbox-group-item/gb-checkbox-group-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-checkbox-group-item.js","sourceRoot":"","sources":["../../../src/components/gb-checkbox-group-item/gb-checkbox-group-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\r\nimport {  GeneralSizes, StateEnum, BreakPoints } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-checkbox-group-item',\r\n  styleUrl: 'gb-checkbox-group-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbCheckboxGroupItem {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: 'icon_simple' | 'avatar' | 'payment_icon' | 'radio_button' | 'checkbox';\r\n  @Prop() state: StateEnum;\r\n  @Prop() breakpoint: BreakPoints;\r\n  @Prop() showCost: boolean = false; // to control cost visibility\r\n  @Element() el: HTMLElement;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n\r\n  private getLabelSizeClass() {\r\n    switch (this.size) {\r\n      case 'md':\r\n        return 'text-lg-semi-bold';\r\n      case 'sm':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  private getCostSizeClass() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-md-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      default:\r\n        return 'text-xs-regular';\r\n    }\r\n  }\r\n\r\n  private getLabelColorClasses() {\r\n    switch(this.selected) {\r\n      case true : return 'label_selected';\r\n      case false : return 'label_not_selected';\r\n    }\r\n  }\r\n\r\n  private getCostColorClasses() {\r\n    switch(this.selected) {\r\n      case true : return 'cost_selected';\r\n      case false : return 'cost_not_selected';\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\r\n\r\n      labelSlot.classList.add(this.getLabelColorClasses());\r\n      costSlot.classList.add(this.getCostColorClasses());\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (labelSlot) {\r\n      labelSlot.classList.add(this.getLabelSizeClass());\r\n    }\r\n\r\n    if (costSlot) {\r\n      costSlot.classList.add(this.getCostSizeClass());\r\n      costSlot.classList.add(this.getCostColorClasses());\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add(this.getCostSizeClass());\r\n      supportingTextSlot.classList.add('supporting_text');\r\n    }\r\n  }\r\n\r\n  private renderIcon() {\r\n    switch (this.type) {\r\n      case 'avatar':\r\n        return (\r\n          <gb-avatar class=\"icon-md\" size=\"md\" placeholder={false} icon=\"user\">\r\n            <img src=\"build/assets/avatar_pic.jpg\" slot=\"image\"></img>\r\n          </gb-avatar>\r\n        );\r\n      case 'payment_icon':\r\n        return (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"32\" viewBox=\"0 0 46 32\" fill=\"none\">\r\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" fill=\"white\" />\r\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" stroke=\"#F8FAFC\" />\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              clip-rule=\"evenodd\"\r\n              d=\"M14.3336 21.1444H11.5872L9.52784 13.0565C9.43009 12.6845 9.22255 12.3556 8.91725 12.2006C8.15535 11.811 7.31579 11.501 6.3999 11.3446V11.0332H10.824C11.4346 11.0332 11.8925 11.501 11.9689 12.0442L13.0374 17.8782L15.7824 11.0332H18.4524L14.3336 21.1444ZM19.9789 21.1444H17.3852L19.5209 11.0332H22.1146L19.9789 21.1444ZM25.4702 13.8343C25.5465 13.2898 26.0044 12.9784 26.5387 12.9784C27.3783 12.9002 28.2928 13.0566 29.0561 13.4448L29.514 11.2678C28.7508 10.9564 27.9112 10.8 27.1493 10.8C24.6319 10.8 22.8002 12.2006 22.8002 14.1444C22.8002 15.6231 24.0977 16.3995 25.0136 16.8673C26.0044 17.3337 26.3861 17.6451 26.3097 18.1114C26.3097 18.811 25.5465 19.1224 24.7846 19.1224C23.8687 19.1224 22.9528 18.8892 22.1146 18.4997L21.6567 20.678C22.5725 21.0662 23.5634 21.2226 24.4793 21.2226C27.3019 21.2994 29.0561 19.9002 29.0561 17.8001C29.0561 15.1553 25.4702 15.0003 25.4702 13.8343ZM38.1332 21.1444L36.0738 11.0332H33.8618C33.4038 11.0332 32.9459 11.3446 32.7932 11.811L28.9797 21.1444H31.6497L32.1826 19.667H35.4632L35.7685 21.1444H38.1332ZM34.2434 13.7562L35.0053 17.5669H32.8696L34.2434 13.7562Z\"\r\n              fill=\"#172B85\"\r\n            />\r\n          </svg>\r\n        );\r\n      case 'icon_simple':\r\n      default:\r\n        return (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <path\r\n              opacity=\"0.4\"\r\n              d=\"M11.524 4.19421L9.25088 5.24491C5.75029 6.863 4 7.67204 4 9.00008C4 10.3281 5.7503 11.1372 9.25089 12.7553L11.524 13.806C13.727 14.8243 14.8285 15.3334 16 15.3334C17.1715 15.3334 18.273 14.8243 20.476 13.806L22.7491 12.7553C26.2497 11.1372 28 10.3281 28 9.00008C28 7.67204 26.2497 6.86299 22.7491 5.2449L20.476 4.19421C18.273 3.1759 17.1715 2.66675 16 2.66675C14.8285 2.66675 13.727 3.1759 11.524 4.19421Z\"\r\n              fill=\"#064E94\"\r\n            />\r\n            <path\r\n              d=\"M27.7173 14.797C27.9058 15.062 28 15.3382 28 15.6419C28 16.951 26.2497 17.7486 22.7491 19.3436L20.476 20.3794C18.273 21.3832 17.1715 21.8851 16 21.8851C14.8285 21.8851 13.727 21.3832 11.524 20.3794L9.25089 19.3436C5.7503 17.7486 4 16.951 4 15.6419C4 15.3382 4.09422 15.062 4.28267 14.797M27.1689 21.6876C27.723 22.1289 28 22.5688 28 23.0896C28 24.3987 26.2497 25.1962 22.7491 26.7913L20.476 27.827C18.273 28.8308 17.1715 29.3327 16 29.3327C14.8285 29.3327 13.727 28.8308 11.524 27.827L9.25089 26.7913C5.7503 25.1962 4 24.3987 4 23.0896C4 22.5688 4.27704 22.1289 4.83112 21.6876M9.25088 5.24491L11.524 4.19421C13.727 3.1759 14.8285 2.66675 16 2.66675C17.1715 2.66675 18.273 3.1759 20.476 4.19421L22.7491 5.2449C26.2497 6.863 28 7.67204 28 9.00008C28 10.3281 26.2497 11.1372 22.7491 12.7553L20.476 13.806C18.273 14.8243 17.1715 15.3334 16 15.3334C14.8285 15.3334 13.727 14.8243 11.524 13.806L9.25089 12.7553C5.7503 11.1372 4 10.3281 4 9.00008C4 7.67204 5.75029 6.863 9.25088 5.24491Z\"\r\n              stroke=\"#064E94\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        );\r\n    }\r\n  }\r\n\r\n  // Toggle selected state on checkbox click\r\n  private toggleSelection() {\r\n    if(this.state === 'default') {\r\n      this.selected = !this.selected;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    console.log(this.selected);\r\n    return [\r\n      <div class={`checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''}`} onClick={() => this.toggleSelection()}>\r\n        <div class=\"item-content\">\r\n          {this.renderIcon()}\r\n          <div class=\"text-container\">\r\n            <div class={`label-cost ${this.type}`}>\r\n              <slot name=\"label\"></slot>\r\n              {this.showCost && (\r\n                <slot name=\"cost\"></slot>\r\n              )}\r\n            </div>\r\n              {this.type === 'payment_icon' ? (\r\n                <div class=\"buttons\">\r\n                  <gb-button size={this.size} hierarchy=\"link_gray\" icon=\"default\" state={this.state}>\r\n                    <p>Set as default</p>\r\n                  </gb-button>\r\n                  <gb-button size={this.size} hierarchy=\"link_color\" icon=\"default\" state={this.state}>\r\n                    <p>Edit</p>\r\n                  </gb-button>\r\n                </div>\r\n              ) : (\r\n                <slot name=\"supporting_text\"></slot>\r\n              )}\r\n          </div>\r\n        </div>\r\n        <div class={`checkbox_container`}>\r\n          <gb-checkbox-base\r\n            type={this.type === 'radio_button' ? 'radio' : this.type === 'checkbox' ? 'checkbox' : 'check_circle'}\r\n            size={this.size}\r\n            state={this.state}\r\n            checked={this.selected}\r\n          ></gb-checkbox-base>\r\n        </div>\r\n      </div>,\r\n    ];\r\n  }\r\n}\r\n"]}