globuswebcomponents 0.2.6 → 0.2.9

package/dist/collection/components/gb-notification-panel/gb-notification-panel.js

@@ -0,0 +1,79 @@
+import { h } from "@stencil/core";
+export class GbNotificationPanel {
+    constructor() {
+        this.state = undefined;
+        this.notifications = [];
+        this.shadowRoot = null;
+    }
+    componentDidLoad() {
+        this.shadowRoot = this.shadowRoot;
+    }
+    handleSlotChange() {
+        const slot = this.getSlotContent();
+        this.notifications = slot ? Array.from(slot.assignedElements()) : [];
+        this.notifications.forEach(notification => {
+            notification.addEventListener('click', this.handleNotificationClick.bind(this, notification));
+        });
+    }
+    getSlotContent() {
+        var _a;
+        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+    }
+    markAllAsRead() {
+        this.notifications.forEach(notification => notification.remove());
+    }
+    handleNotificationClick(notification) {
+        notification.remove();
+    }
+    render() {
+        return (h("div", { key: '804531cee1f749b49940b34ebab398959c9eecc5', class: "notification-panel" }, this.state === 'empty' && this.notifications.length === 0 && (h("div", { key: '5d6741763509f22166afc2935165b09bb45a0e60' }, h("div", { key: '011dbf8e068020315d1d8d67a82315210a80df2f', class: "empty-state" }, h("img", { key: '70e458db4b76b88805c4f7b6b81dd05f07fe3282', src: "./build/assets/panel_bell.svg", alt: "No notification" }), h("h3", { key: '9b04867c710208fd67eb3452f7555c266effa68d' }, "No notification"), h("p", { key: 'c53d6517279d48dca70c0697fd5610b2cefd5224' }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events.")), h("gb-button", { key: '5db6372bcfb2b616391369cf75638f4d2b011acb', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read"))), this.state === 'notification_dropdown' && (h("div", { key: '99940dd6181966bb54195b63e385ee99f5475740', class: "notification-dropdown" }, h("slot", { key: 'f40c93c496752e9557915f206b7a26ecf435843e' }), h("gb-button", { key: '63bee176b6773c4e32ccffbc4479c5bda037cbfe', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read")))));
+    }
+    static get is() { return "gb-notification-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-notification-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-notification-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'empty' | 'notification_dropdown'",
+                    "resolved": "\"empty\" | \"notification_dropdown\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "notifications": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "slotchange",
+                "method": "handleSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=gb-notification-panel.js.map

package/dist/collection/components/gb-notification-panel/gb-notification-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-notification-panel.js","sourceRoot":"","sources":["../../../src/components/gb-notification-panel/gb-notification-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,mBAAmB;IAQ5B;;6BALwC,EAAE;QAMtC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KAC1B;IAED,gBAAgB;QACZ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACtC,CAAC;IAGD,gBAAgB;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;QAEtF,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;YAC1C,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;QAC9F,CAAC,CAAC,CAAC;IACP,CAAC;IAED,cAAc;;QACV,OAAO,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAClD,CAAC;IAED,aAAa;QACT,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC;IACtE,CAAC;IAED,uBAAuB,CAAC,YAAyB;QAC7C,YAAY,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,oBAAoB;YAC1B,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,CAC1D;gBACI,4DAAK,KAAK,EAAC,aAAa;oBACpB,4DAAK,GAAG,EAAC,+BAA+B,EAAC,GAAG,EAAC,iBAAiB,GAAG;oBACjE,+EAAwB;oBACxB,2KAAmH,CACjH;gBACV,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,eAAW,aAAa,uBAA6B,CAC9F,CACT;YACA,IAAI,CAAC,KAAK,KAAK,uBAAuB,IAAI,CACvC,4DAAK,KAAK,EAAC,uBAAuB;gBAC9B,8DAAa;gBACb,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,eAAW,aAAa,uBAA6B,CAClG,CACT,CACC,CACP,CAAC;IACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {Component, Prop, h, State, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'gb-notification-panel',\r\n    styleUrl: 'gb-notification-panel.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbNotificationPanel {\r\n    @Prop() state: 'empty' | 'notification_dropdown';\r\n\r\n    @State() notifications: HTMLElement[] = [];\r\n\r\n    // Add type definition for shadowRoot\r\n    private shadowRoot: ShadowRoot | null;\r\n\r\n    constructor() {\r\n        this.shadowRoot = null;\r\n    }\r\n\r\n    componentDidLoad() {\r\n        this.shadowRoot = this.shadowRoot;\r\n    }\r\n\r\n    @Listen('slotchange')\r\n    handleSlotChange() {\r\n        const slot = this.getSlotContent();\r\n        this.notifications = slot ? Array.from(slot.assignedElements()) as HTMLElement[] : [];\r\n        \r\n        this.notifications.forEach(notification => {\r\n        notification.addEventListener('click', this.handleNotificationClick.bind(this, notification));\r\n        });\r\n    }\r\n\r\n    getSlotContent() {\r\n        return this.shadowRoot?.querySelector('slot');\r\n    }\r\n\r\n    markAllAsRead() {\r\n        this.notifications.forEach(notification => notification.remove());\r\n    }\r\n\r\n    handleNotificationClick(notification: HTMLElement) {\r\n        notification.remove();\r\n    }\r\n\r\n    render(){\r\n        return (\r\n            <div class=\"notification-panel\">\r\n                {this.state === 'empty' && this.notifications.length === 0 && (\r\n                    <div>\r\n                        <div class=\"empty-state\">\r\n                            <img src=\"./build/assets/panel_bell.svg\" alt=\"No notification\" />\r\n                            <h3>No notification</h3>\r\n                            <p>Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events.</p>\r\n                        </div>\r\n                    <gb-button size='sm' hierarchy='tertiary_color' left-icon='blush_brush'>Mark all as read</gb-button>\r\n                    </div> \r\n                )}  \r\n                {this.state === 'notification_dropdown' && (\r\n                    <div class=\"notification-dropdown\">\r\n                        <slot></slot> \r\n                        <gb-button size='sm' hierarchy='tertiary_color' left-icon='blush_brush'>Mark all as read</gb-button>\r\n                    </div>\r\n                )} \r\n            </div>\r\n          );\r\n    }\r\n}"]}