globuswebcomponents 1.7.1 → 1.7.3

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

@@ -0,0 +1,136 @@
+import { h } from "@stencil/core";
+export class GbButtonGroup {
+    constructor() {
+        this.items = [
+            { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },
+            { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },
+            // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },
+            // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },
+            // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },
+        ];
+        this.label = '';
+        this.internalItems = [];
+        this.selectedValue = '';
+    }
+    componentWillLoad() {
+        this.internalItems = [...this.items];
+    }
+    handleSelect(index) {
+        const selectedValue = this.internalItems[index].label;
+        this.internalItems = this.internalItems.map((item, i) => (Object.assign(Object.assign({}, item), { current: i === index })));
+        this.selectedValue = selectedValue;
+        // console.log(this.selectedValue)
+        this.valueChange.emit(this.selectedValue);
+        // console.log({ value: this.selectedValue, current: this.internalItems[index].current });
+        // this.valueChange.emit({ value: this.selectedValue, current: this.internalItems[index].current });
+    }
+    render() {
+        return (h("div", { key: '347230e82046656126aaa2c9bf2cd88f38b25484', class: "button_group_wrapper" }, this.internalItems.map((item, index) => (h("gb-button-group-base", { key: index, state: "default", icon: this.icon, label: item.label, current: item.current, onClick: () => this.handleSelect(index), "icon-src": item.icon })))));
+    }
+    static get is() { return "gb-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-button-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ label: string; current?: boolean; icon?: string }[]",
+                    "resolved": "{ label: string; current?: boolean; icon?: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },\r\n    { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },\r\n  ]"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonGroupTypes",
+                    "resolved": "\"checkbox\" | \"dot\" | \"false\" | \"leading\" | \"only\"",
+                    "references": {
+                        "ButtonGroupTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::ButtonGroupTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalItems": {},
+            "selectedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=gb-button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gb-button-group.js","sourceRoot":"","sources":["../../../src/components/gb-button-group/gb-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAShG,MAAM,OAAO,aAAa;IAN1B;QAQU,UAAK,GAA0D;YACrE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,wBAAwB,EAAE;YAChE,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,wBAAwB,EAAE;YACnE,mEAAmE;YACnE,uEAAuE;YACvE,yEAAyE;SAC1E,CAAC;QAEM,UAAK,GAAW,EAAE,CAAC;QAClB,kBAAa,GAA0D,EAAE,CAAC;QAC1E,kBAAa,GAAW,EAAE,CAAC;KA0CrC;IAtCC,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED,YAAY,CAAC,KAAa;QACxB,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QAEtD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,iCACpD,IAAI,KACP,OAAO,EAAE,CAAC,KAAK,KAAK,IACpB,CAAC,CAAC;QAEJ,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QAEnC,kCAAkC;QAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAE1C,0FAA0F;QAC1F,oGAAoG;IACtG,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,4BACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAC7B,IAAI,CAAC,IAAI,GACG,CACzB,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Event, EventEmitter, Prop, State, h } from '@stencil/core';\r\nimport { ButtonGroupTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button-group',\r\n  styleUrl: 'gb-button-group.css',\r\n  shadow: true,\r\n  formAssociated: true,\r\n})\r\nexport class GbButtonGroup {\r\n  @AttachInternals() internals: ElementInternals;\r\n  @Prop() items: { label: string; current?: boolean; icon?: string }[] = [\r\n    { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },\r\n    { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },\r\n  ];\r\n  @Prop() icon: ButtonGroupTypes;\r\n  @Prop() label: string = '';\r\n  @State() internalItems: { label: string; current?: boolean; icon?: string }[] = [];\r\n  @State() selectedValue: string = '';\r\n  // @Event() valueChange: EventEmitter<{ value: string; current: boolean }>;\r\n  @Event() valueChange: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    this.internalItems = [...this.items];\r\n  }\r\n\r\n  handleSelect(index: number) {\r\n    const selectedValue = this.internalItems[index].label;\r\n\r\n    this.internalItems = this.internalItems.map((item, i) => ({\r\n      ...item,\r\n      current: i === index,\r\n    }));\r\n\r\n    this.selectedValue = selectedValue;\r\n\r\n    // console.log(this.selectedValue)\r\n    this.valueChange.emit(this.selectedValue);\r\n\r\n    // console.log({ value: this.selectedValue, current: this.internalItems[index].current });\r\n    // this.valueChange.emit({ value: this.selectedValue, current: this.internalItems[index].current });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"button_group_wrapper\">\r\n        {this.internalItems.map((item, index) => (\r\n          <gb-button-group-base\r\n            key={index}\r\n            state=\"default\"\r\n            icon={this.icon}\r\n            label={item.label}\r\n            current={item.current}\r\n            onClick={() => this.handleSelect(index)}\r\n            icon-src={item.icon}\r\n          ></gb-button-group-base>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}