@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-modal/xplor-modal.js

@@ -0,0 +1,279 @@
+import { Host, h } from "@stencil/core";
+export class XplorModal {
+    constructor() {
+        /**
+         * Whether the modal is open
+         */
+        this.open = false;
+        /**
+         * Modal width
+         */
+        this.width = '600px';
+        /**
+         * Maximum width
+         */
+        this.maxWidth = '90%';
+        /**
+         * Maximum height
+         */
+        this.maxHeight = '90%';
+        /**
+         * Whether the modal content is scrollable
+         */
+        this.scrollable = true;
+        /**
+         * Persistent mode - prevents closing on backdrop click
+         */
+        this.persistent = false;
+        /**
+         * Loading state
+         */
+        this.loading = false;
+        /**
+         * Whether to show the title area (for spacing)
+         */
+        this.showTitle = true;
+        this.handleBackdropClick = () => {
+            if (!this.persistent) {
+                this.closeModal();
+            }
+        };
+        this.handleCardClick = (event) => {
+            event.stopPropagation();
+        };
+        this.closeModal = () => {
+            this.open = false;
+            this.xplorClose.emit();
+        };
+    }
+    handleOpenChange(newValue) {
+        if (newValue) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+    }
+    disconnectedCallback() {
+        document.body.style.overflow = '';
+    }
+    render() {
+        if (!this.open) {
+            return null;
+        }
+        const cardClasses = {
+            'xplor-modal__card': true,
+            'xplor-modal__card--scrollable': this.scrollable,
+        };
+        const bodyClasses = {
+            'xplor-modal__body': true,
+            'xplor-modal__body--no-title': !this.showTitle,
+        };
+        return (h(Host, null, h("div", { class: "xplor-modal__backdrop", onClick: this.handleBackdropClick }, h("div", { class: cardClasses, style: {
+                width: this.width,
+                maxWidth: this.maxWidth,
+                maxHeight: this.maxHeight,
+            }, onClick: this.handleCardClick }, h("button", { type: "button", class: "xplor-modal__close-btn", onClick: this.closeModal, "aria-label": "Close modal", "data-testid": "common-modal-close-button" }, "\u2715"), h("div", { class: "xplor-modal__title" }, h("slot", { name: "title" })), h("div", { class: "xplor-modal__subtitle" }, h("slot", { name: "subtitle" })), h("div", { class: bodyClasses }, this.loading ? (h("div", { class: "xplor-modal__loading" }, h("div", { class: "xplor-modal__spinner" }))) : (h("slot", { name: "body" }))), h("div", { class: "xplor-modal__actions" }, h("slot", { name: "actions" }))))));
+    }
+    static get is() { return "xplor-modal"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal is open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "width": {
+                "type": "string",
+                "attribute": "width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Modal width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'600px'"
+            },
+            "maxWidth": {
+                "type": "string",
+                "attribute": "max-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'90%'"
+            },
+            "maxHeight": {
+                "type": "string",
+                "attribute": "max-height",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'90%'"
+            },
+            "scrollable": {
+                "type": "boolean",
+                "attribute": "scrollable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal content is scrollable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "persistent": {
+                "type": "boolean",
+                "attribute": "persistent",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Persistent mode - prevents closing on backdrop click"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showTitle": {
+                "type": "boolean",
+                "attribute": "show-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the title area (for spacing)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xplorClose",
+                "name": "xplorClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Close event"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=xplor-modal.js.map

package/dist/collection/components/xplor-modal/xplor-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-modal.js","sourceRoot":"","sources":["../../../src/components/xplor-modal/xplor-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-modal',\n  styleUrl: 'xplor-modal.scss',\n  scoped: true,\n})\nexport class XplorModal {\n  /**\n   * Whether the modal is open\n   */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /**\n   * Modal width\n   */\n  @Prop() width: string = '600px';\n\n  /**\n   * Maximum width\n   */\n  @Prop() maxWidth: string = '90%';\n\n  /**\n   * Maximum height\n   */\n  @Prop() maxHeight: string = '90%';\n\n  /**\n   * Whether the modal content is scrollable\n   */\n  @Prop() scrollable: boolean = true;\n\n  /**\n   * Persistent mode - prevents closing on backdrop click\n   */\n  @Prop() persistent: boolean = false;\n\n  /**\n   * Loading state\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Whether to show the title area (for spacing)\n   */\n  @Prop() showTitle: boolean = true;\n\n  /**\n   * Close event\n   */\n  @Event() xplorClose: EventEmitter<void>;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n  }\n\n  disconnectedCallback() {\n    document.body.style.overflow = '';\n  }\n\n  private handleBackdropClick = () => {\n    if (!this.persistent) {\n      this.closeModal();\n    }\n  };\n\n  private handleCardClick = (event: Event) => {\n    event.stopPropagation();\n  };\n\n  private closeModal = () => {\n    this.open = false;\n    this.xplorClose.emit();\n  };\n\n  render() {\n    if (!this.open) {\n      return null;\n    }\n\n    const cardClasses = {\n      'xplor-modal__card': true,\n      'xplor-modal__card--scrollable': this.scrollable,\n    };\n\n    const bodyClasses = {\n      'xplor-modal__body': true,\n      'xplor-modal__body--no-title': !this.showTitle,\n    };\n\n    return (\n      <Host>\n        <div class=\"xplor-modal__backdrop\" onClick={this.handleBackdropClick}>\n          <div\n            class={cardClasses}\n            style={{\n              width: this.width,\n              maxWidth: this.maxWidth,\n              maxHeight: this.maxHeight,\n            }}\n            onClick={this.handleCardClick}\n          >\n            <button\n              type=\"button\"\n              class=\"xplor-modal__close-btn\"\n              onClick={this.closeModal}\n              aria-label=\"Close modal\"\n              data-testid=\"common-modal-close-button\"\n            >\n              ✕\n            </button>\n\n            <div class=\"xplor-modal__title\">\n              <slot name=\"title\" />\n            </div>\n\n            <div class=\"xplor-modal__subtitle\">\n              <slot name=\"subtitle\" />\n            </div>\n\n            <div class={bodyClasses}>\n              {this.loading ? (\n                <div class=\"xplor-modal__loading\">\n                  <div class=\"xplor-modal__spinner\"></div>\n                </div>\n              ) : (\n                <slot name=\"body\" />\n              )}\n            </div>\n\n            <div class=\"xplor-modal__actions\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-modal-persistent/xplor-modal-persistent.js

@@ -0,0 +1,152 @@
+import { Host, h } from "@stencil/core";
+export class XplorModalPersistent {
+    constructor() {
+        /**
+         * Whether the modal is open
+         */
+        this.open = false;
+        /**
+         * Modal width
+         */
+        this.width = '600px';
+        /**
+         * Maximum width
+         */
+        this.maxWidth = '90%';
+        /**
+         * Maximum height
+         */
+        this.maxHeight = '90%';
+        /**
+         * Loading state
+         */
+        this.loading = false;
+    }
+    render() {
+        return (h(Host, { key: '607487d12b9744b7915c168a702b9f53c1edd18a' }, h("xplor-modal", { key: '72213498ca31332338afda4b1a8520fd34fbec19', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '4841432590db3562ca033f57325aca10b947c60f', name: "title", slot: "title" }), h("slot", { key: '78263228bc06c994c6107b0fea103b25a5171f7f', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'b51d5bf90aa0b9c3889a897adda36eaaf1a72659', name: "body", slot: "body" }), h("slot", { key: '4c4c403072d0a0f10da0eeeefbe73e05d4a9f33d', name: "actions", slot: "actions" }))));
+    }
+    static get is() { return "xplor-modal-persistent"; }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal is open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "width": {
+                "type": "string",
+                "attribute": "width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Modal width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'600px'"
+            },
+            "maxWidth": {
+                "type": "string",
+                "attribute": "max-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'90%'"
+            },
+            "maxHeight": {
+                "type": "string",
+                "attribute": "max-height",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'90%'"
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xplorClose",
+                "name": "xplorClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Close event"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xplor-modal-persistent.js.map

package/dist/collection/components/xplor-modal-persistent/xplor-modal-persistent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-modal-persistent.js","sourceRoot":"","sources":["../../../src/components/xplor-modal-persistent/xplor-modal-persistent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAM9E,MAAM,OAAO,oBAAoB;IAJjC;QAKE;;WAEG;QACK,SAAI,GAAY,KAAK,CAAC;QAE9B;;WAEG;QACK,UAAK,GAAW,OAAO,CAAC;QAEhC;;WAEG;QACK,aAAQ,GAAW,KAAK,CAAC;QAEjC;;WAEG;QACK,cAAS,GAAW,KAAK,CAAC;QAElC;;WAEG;QACK,YAAO,GAAY,KAAK,CAAC;KA2BlC;IApBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,oEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,UAAU,EAAE,IAAI,EAChB,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;gBAE1C,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAG;gBAClC,6DAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAG;gBACxC,6DAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAG;gBAChC,6DAAM,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,GAAG,CAC1B,CACT,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-modal-persistent',\n  shadow: false,\n})\nexport class XplorModalPersistent {\n  /**\n   * Whether the modal is open\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Modal width\n   */\n  @Prop() width: string = '600px';\n\n  /**\n   * Maximum width\n   */\n  @Prop() maxWidth: string = '90%';\n\n  /**\n   * Maximum height\n   */\n  @Prop() maxHeight: string = '90%';\n\n  /**\n   * Loading state\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Close event\n   */\n  @Event() xplorClose: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host>\n        <xplor-modal\n          open={this.open}\n          width={this.width}\n          maxWidth={this.maxWidth}\n          maxHeight={this.maxHeight}\n          loading={this.loading}\n          persistent={true}\n          onXplorClose={() => this.xplorClose.emit()}\n        >\n          <slot name=\"title\" slot=\"title\" />\n          <slot name=\"subtitle\" slot=\"subtitle\" />\n          <slot name=\"body\" slot=\"body\" />\n          <slot name=\"actions\" slot=\"actions\" />\n        </xplor-modal>\n      </Host>\n    );\n  }\n}\n"]}