@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-alert-dialog/xplor-alert-dialog.js

@@ -0,0 +1,163 @@
+import { Host, h } from "@stencil/core";
+export class XplorAlertDialog {
+    constructor() {
+        /**
+         * Whether the dialog is open
+         */
+        this.open = false;
+        /**
+         * Dialog width (can be pixel value or percentage)
+         */
+        this.width = '408px';
+        /**
+         * Persistent mode - prevents closing on backdrop click
+         */
+        this.persistent = true;
+        this.handleBackdropClick = () => {
+            if (!this.persistent) {
+                this.closeDialog();
+            }
+        };
+        this.handleCardClick = (event) => {
+            event.stopPropagation();
+        };
+        this.closeDialog = () => {
+            this.open = false;
+            this.xplorClose.emit();
+            this.xplorDialogChange.emit(false);
+        };
+    }
+    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;
+        }
+        return (h(Host, null, h("div", { class: "xplor-alert-dialog__backdrop", onClick: this.handleBackdropClick }, h("div", { class: "xplor-alert-dialog__card", style: { width: this.width }, onClick: this.handleCardClick }, h("button", { type: "button", class: "xplor-alert-dialog__close-btn", onClick: this.closeDialog, "aria-label": "Close dialog" }, "\u2715"), h("div", { class: "xplor-alert-dialog__title" }, h("slot", { name: "title" })), h("div", { class: "xplor-alert-dialog__text" }, h("slot", { name: "text" })), h("div", { class: "xplor-alert-dialog__actions" }, h("slot", { name: "actions" }))))));
+    }
+    static get is() { return "xplor-alert-dialog"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-alert-dialog.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-alert-dialog.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 dialog 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": "Dialog width (can be pixel value or percentage)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'408px'"
+            },
+            "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": "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": {}
+                }
+            }, {
+                "method": "xplorDialogChange",
+                "name": "xplorDialogChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog state change event"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=xplor-alert-dialog.js.map

package/dist/collection/components/xplor-alert-dialog/xplor-alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-alert-dialog.js","sourceRoot":"","sources":["../../../src/components/xplor-alert-dialog/xplor-alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAOrF,MAAM,OAAO,gBAAgB;IAL7B;QAME;;WAEG;QACsB,SAAI,GAAY,KAAK,CAAC;QAE/C;;WAEG;QACK,UAAK,GAAW,OAAO,CAAC;QAEhC;;WAEG;QACK,eAAU,GAAY,IAAI,CAAC;QAyB3B,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;gBACrB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAY,EAAE,EAAE;YACzC,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC,CAAC;KAwCH;IAlEC,gBAAgB,CAAC,QAAiB;QAChC,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;QACpC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IACpC,CAAC;IAkBD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,WAAK,KAAK,EAAC,8BAA8B,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB;gBACzE,WACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAC5B,OAAO,EAAE,IAAI,CAAC,eAAe;oBAE7B,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,+BAA+B,EACrC,OAAO,EAAE,IAAI,CAAC,WAAW,gBACd,cAAc,aAGlB;oBAET,WAAK,KAAK,EAAC,2BAA2B;wBACpC,YAAM,IAAI,EAAC,OAAO,GAAG,CACjB;oBAEN,WAAK,KAAK,EAAC,0BAA0B;wBACnC,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB;oBAEN,WAAK,KAAK,EAAC,6BAA6B;wBACtC,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-alert-dialog',\n  styleUrl: 'xplor-alert-dialog.scss',\n  scoped: true,\n})\nexport class XplorAlertDialog {\n  /**\n   * Whether the dialog is open\n   */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /**\n   * Dialog width (can be pixel value or percentage)\n   */\n  @Prop() width: string = '408px';\n\n  /**\n   * Persistent mode - prevents closing on backdrop click\n   */\n  @Prop() persistent: boolean = true;\n\n  /**\n   * Close event\n   */\n  @Event() xplorClose: EventEmitter<void>;\n\n  /**\n   * Dialog state change event\n   */\n  @Event() xplorDialogChange: EventEmitter<boolean>;\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.closeDialog();\n    }\n  };\n\n  private handleCardClick = (event: Event) => {\n    event.stopPropagation();\n  };\n\n  private closeDialog = () => {\n    this.open = false;\n    this.xplorClose.emit();\n    this.xplorDialogChange.emit(false);\n  };\n\n  render() {\n    if (!this.open) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <div class=\"xplor-alert-dialog__backdrop\" onClick={this.handleBackdropClick}>\n          <div\n            class=\"xplor-alert-dialog__card\"\n            style={{ width: this.width }}\n            onClick={this.handleCardClick}\n          >\n            <button\n              type=\"button\"\n              class=\"xplor-alert-dialog__close-btn\"\n              onClick={this.closeDialog}\n              aria-label=\"Close dialog\"\n            >\n              ✕\n            </button>\n\n            <div class=\"xplor-alert-dialog__title\">\n              <slot name=\"title\" />\n            </div>\n\n            <div class=\"xplor-alert-dialog__text\">\n              <slot name=\"text\" />\n            </div>\n\n            <div class=\"xplor-alert-dialog__actions\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-alert-message/xplor-alert-message.css

@@ -0,0 +1,352 @@
+/* on mobile browsers, I set a width of 100% */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  /* html[data-theme='office'] {
+    --color-primary: rgb(219, 59, 3);
+    --color-secondary: rgb(0, 119, 107);
+    --color-buttons: #89da59;
+    --color-typography: #ff320e;
+  }
+
+  html {
+    --color-primary: #db3b03;
+    --color-primary-50: #db3b03;
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgb(0, 119, 107);
+    --color-tertiary: rgb(128, 104, 186);
+  } */
+  :root {
+    --color-primary: #db3b03;
+    --color-primary-50: rgba(255, 152, 0, 1);
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgba(1, 163, 157, 1);
+    --color-tertiary: rgb(128, 104, 186);
+    --color-tertiary: rgb(223, 242, 241);
+    --color-white: white;
+    --color-emphasis: rgb(8, 8, 9);
+    --color-supergiant: rgb(213, 66, 99);
+    --color-orange: rgb(250, 200, 127);
+    --color-buttons: #fbbc05;
+    --color-typography: #ea4335;
+    --background: 20 66% 99%;
+    --foreground: 20 51% 4%;
+    --muted: 20 25% 86%;
+    --muted-foreground: 20 7% 25%;
+    --popover: 20 66% 98%;
+    --popover-foreground: 20 51% 3%;
+    --card: 20 66% 98%;
+    --card-foreground: 20 51% 3%;
+    --border: 20 15% 94%;
+    --input: 20 15% 94%;
+    --primary: 20 48% 72%;
+    --primary-foreground: 20 48% 12%;
+    --secondary: 20 12% 92%;
+    --secondary-foreground: 20 12% 32%;
+    --accent: 20 12% 92%;
+    --accent-foreground: 20 12% 32%;
+    --destructive: 11 80% 22%;
+    --destructive-foreground: 11 80% 82%;
+    --ring: 20 48% 72%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+  .dark {
+    --background: 253 43% 3%;
+    --foreground: 253 31% 98%;
+    --muted: 253 7% 13%;
+    --muted-foreground: 253 13% 63%;
+    --popover: 253 43% 3%;
+    --popover-foreground: 253 31% 98%;
+    --card: 253 43% 4%;
+    --card-foreground: 253 31% 99%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --primary: 253 91% 58%;
+    --primary-foreground: 253 91% 98%;
+    --secondary: 253 7% 9%;
+    --secondary-foreground: 253 7% 69%;
+    --accent: 253 13% 14%;
+    --accent-foreground: 253 13% 74%;
+    --destructive: 339.2 90.36% 51.18%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 253 91% 58%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply box-border bg-background text-foreground;
+  }
+}
+@layer utilities {
+  .min-h-screen {
+    min-height: 100vh;
+    /* Fallback */
+    min-height: 100dvh;
+  }
+  .h-screen {
+    height: 100vh;
+    /* Fallback */
+    height: 100dvh;
+  }
+}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer components {
+  .glass {
+    border: none;
+    backdrop-filter: blur(var(--glass-blur, 40px));
+    background-color: transparent;
+    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);
+    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);
+    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));
+  }
+}
+.tox.tox-tinymce {
+  width: 50% !important;
+  height: 400px !important;
+  display: inline-flex;
+}
+
+/* on large screens, I use a different layout, so 600px are sufficient */
+@media only screen and (min-width: 600px) {
+  .tox.tox-tinymce {
+    width: 600px !important;
+  }
+}
+h1 {
+  color: var(--color-primary);
+  /* Header/H1 */
+  font-family: Inter;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 56px; /* 116.667% */
+}
+
+h2 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H2 Bold */
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 38px; /* 118.75% */
+  letter-spacing: 0.25px;
+}
+
+h3 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H3 */
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px; /* 133.333% */
+}
+
+.overline {
+  color: var(--grey-1100252525, #252525);
+  /* Overline/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 3.2px;
+  text-transform: uppercase;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 1rem;
+  padding: 0;
+}
+ol li,
+ul li {
+  margin: 1rem;
+  padding: 0;
+}
+ol.mdc-list,
+ul.mdc-list {
+  list-style-type: none;
+  list-style: none;
+}
+ol.mdc-list li.mdc-list-item,
+ul.mdc-list li.mdc-list-item {
+  list-style-type: none;
+  list-style: none !important;
+}
+
+.orange-label {
+  color: var(--Orange-900-Primary, #db3b03);
+  /* Caption 1/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 0.4px;
+  margin: 0px 0 -9px 16px;
+  z-index: 1 !important;
+  position: relative;
+  width: fit-content;
+}
+.orange-label.grey-bg {
+  background-color: #fefcfb;
+}
+
+#spinnerLoader {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+}
+
+#textfield-Title-label {
+  background-color: white;
+}
+
+.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 1px solid #db3b03 !important;
+  padding: 0;
+  height: 0;
+}
+
+.mdc-text-field--focused .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 2px solid #db3b03 !important;
+}
+
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
+  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
+  border-top: transparent;
+}
+
+.generate-btn {
+  display: flex;
+  height: 48px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+}
+.generate-btn.link:hover {
+  background-color: var(--Cyan-700-Secondary, #e27046);
+  color: var(--Cyan-700-Secondary-Text, #fff);
+}
+
+.bg-green {
+  background: var(--Cyan-700-Secondary, #00776b);
+}
+
+:host {
+  display: block;
+}
+
+.alert-message {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-radius: 4px;
+  border-left: 4px solid;
+  gap: 1rem;
+}
+.alert-message--info {
+  background-color: #ede7f6;
+  border-left-color: #673ab7;
+  color: #4a148c;
+}
+.alert-message--warning {
+  background-color: #fff3e0;
+  border-left-color: #ff9800;
+  color: #e65100;
+}
+.alert-message--success {
+  background-color: #e8f5e9;
+  border-left-color: #4caf50;
+  color: #1b5e20;
+}
+.alert-message--error {
+  background-color: #ffebee;
+  border-left-color: #f44336;
+  color: #b71c1c;
+}
+
+.alert-message__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.alert-message__title {
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.alert-message__body {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.alert-message__actions {
+  margin-top: 0.5rem;
+}
+.alert-message__actions:empty {
+  display: none;
+}
+
+.alert-message__dismiss {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+  flex-shrink: 0;
+}
+.alert-message__dismiss:hover {
+  opacity: 1;
+}
+.alert-message__dismiss:focus {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 2px;
+}

package/dist/collection/components/xplor-alert-message/xplor-alert-message.js

@@ -0,0 +1,110 @@
+import { Host, h } from "@stencil/core";
+export class XplorAlertMessage {
+    constructor() {
+        this.type = 'info';
+        this.dismissible = false;
+        this.handleDismiss = () => {
+            this.xplorDismiss.emit();
+        };
+    }
+    render() {
+        return (h(Host, { key: '9b7353e68d89701b3fdb4dcd5fb5e6c886b08d8b' }, h("div", { key: '335c16829ae65019c3c7d32a9e7dd3a3ef13c1ae', class: {
+                'alert-message': true,
+                [`alert-message--${this.type}`]: true,
+            }, role: "alert" }, h("div", { key: '08feddcdf81a93b0aaa907688923d3b943fcc7ed', class: "alert-message__content" }, this.alertTitle && (h("div", { key: 'a994f5d65e9112cae41bf3379f4454e986d62e00', class: "alert-message__title" }, h("slot", { key: 'b4cd15b229b6e5539c29c929dfa804b7da537030', name: "title" }, this.alertTitle))), h("div", { key: 'ef6135360584c77ad418f46022ed8600c5786c2a', class: "alert-message__body" }, h("slot", { key: '36d800fb3ebdfad5c2bf602212410381210db99b' })), h("div", { key: '79d1d65fc21759299f17d42523839c0d733b2098', class: "alert-message__actions" }, h("slot", { key: 'f4cc482a2392656d0bc385c0d3cafe23285f32e8', name: "actions" }))), this.dismissible && (h("button", { key: '37656219e43ce25d72e7afa66a1fc1a2e9f22002', class: "alert-message__dismiss", onClick: this.handleDismiss, "aria-label": "Dismiss alert", type: "button" }, "\u00D7")))));
+    }
+    static get is() { return "xplor-alert-message"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-alert-message.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-alert-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'info' | 'warning' | 'success' | 'error'",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'info'"
+            },
+            "alertTitle": {
+                "type": "string",
+                "attribute": "alert-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dismissible": {
+                "type": "boolean",
+                "attribute": "dismissible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xplorDismiss",
+                "name": "xplorDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xplor-alert-message.js.map

package/dist/collection/components/xplor-alert-message/xplor-alert-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-alert-message.js","sourceRoot":"","sources":["../../../src/components/xplor-alert-message/xplor-alert-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,iBAAiB;IAL9B;QAMY,SAAI,GAA6C,MAAM,CAAC;QAExD,gBAAW,GAAY,KAAK,CAAC;QAI7B,kBAAa,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QAC7B,CAAC,CAAC;KAuCL;IArCG,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,eAAe,EAAE,IAAI;oBACrB,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;iBACxC,EACD,IAAI,EAAC,OAAO;gBAEZ,4DAAK,KAAK,EAAC,wBAAwB;oBAC9B,IAAI,CAAC,UAAU,IAAI,CAChB,4DAAK,KAAK,EAAC,sBAAsB;wBAC7B,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,UAAU,CAAQ,CACzC,CACT;oBACD,4DAAK,KAAK,EAAC,qBAAqB;wBAC5B,8DAAQ,CACN;oBACN,4DAAK,KAAK,EAAC,wBAAwB;wBAC/B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACrB,CACJ;gBACL,IAAI,CAAC,WAAW,IAAI,CACjB,+DACI,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,aAAa,gBAChB,eAAe,EAC1B,IAAI,EAAC,QAAQ,aAGR,CACZ,CACC,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'xplor-alert-message',\n    styleUrl: 'xplor-alert-message.scss',\n    scoped: true,\n})\nexport class XplorAlertMessage {\n    @Prop() type: 'info' | 'warning' | 'success' | 'error' = 'info';\n    @Prop() alertTitle: string;\n    @Prop() dismissible: boolean = false;\n\n    @Event() xplorDismiss: EventEmitter<void>;\n\n    private handleDismiss = () => {\n        this.xplorDismiss.emit();\n    };\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'alert-message': true,\n                        [`alert-message--${this.type}`]: true,\n                    }}\n                    role=\"alert\"\n                >\n                    <div class=\"alert-message__content\">\n                        {this.alertTitle && (\n                            <div class=\"alert-message__title\">\n                                <slot name=\"title\">{this.alertTitle}</slot>\n                            </div>\n                        )}\n                        <div class=\"alert-message__body\">\n                            <slot />\n                        </div>\n                        <div class=\"alert-message__actions\">\n                            <slot name=\"actions\" />\n                        </div>\n                    </div>\n                    {this.dismissible && (\n                        <button\n                            class=\"alert-message__dismiss\"\n                            onClick={this.handleDismiss}\n                            aria-label=\"Dismiss alert\"\n                            type=\"button\"\n                        >\n                            ×\n                        </button>\n                    )}\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/xplor-assistant/internal/AssistantInput.js

@@ -0,0 +1,39 @@
+/**
+ * AssistantInput - Internal component
+ * Renders the input field with voice and send buttons
+ */
+import { h } from "@stencil/core";
+import { microphoneIcon, sendIcon } from "../utils/icons";
+export const AssistantInput = (props) => {
+    const { placeholder, disabled, isLoading, enableVoiceInput, isListening, inputValue, onSendMessage, onStartListening, onStopListening, setInputValue, } = props;
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        console.log('[AssistantInput] Submit triggered, inputValue:', inputValue);
+        if (inputValue.trim() && !disabled && !isLoading) {
+            console.log('[AssistantInput] Calling onSendMessage with:', inputValue);
+            onSendMessage(inputValue);
+            setInputValue('');
+        }
+        else {
+            console.log('[AssistantInput] Submit blocked - disabled:', disabled, 'isLoading:', isLoading, 'hasValue:', !!inputValue.trim());
+        }
+    };
+    const handleInputChange = (e) => {
+        const target = e.target;
+        setInputValue(target.value);
+    };
+    const handleVoiceClick = () => {
+        if (isListening) {
+            onStopListening();
+        }
+        else {
+            onStartListening();
+        }
+    };
+    const isSendDisabled = !inputValue.trim() || disabled || isLoading;
+    return (h("div", { class: "xplor-assistant__input-container" }, h("form", { onSubmit: handleSubmit, class: "xplor-assistant__input-form" }, enableVoiceInput && (h("button", { type: "button", class: {
+            'xplor-assistant__voice-button': true,
+            'xplor-assistant__voice-button--listening': isListening,
+        }, onClick: handleVoiceClick, disabled: disabled || isLoading, title: isListening ? 'Stop listening' : 'Start voice input' }, h("span", { class: "xplor-assistant__voice-icon", innerHTML: microphoneIcon }))), h("input", { type: "text", class: "xplor-assistant__input", placeholder: placeholder, value: inputValue, onInput: handleInputChange, disabled: disabled || isLoading }), h("button", { type: "submit", class: "xplor-assistant__send-button", disabled: isSendDisabled, title: "Send message" }, h("span", { class: "xplor-assistant__send-icon", innerHTML: sendIcon })))));
+};
+//# sourceMappingURL=AssistantInput.js.map