@xplor-education/core-stencil-components 2.0.0

package/dist/components/xplor-expansion-panel.js

@@ -0,0 +1,75 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorExpansionPanelCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    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);\n    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);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-expansion-panel {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-expansion-panel {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-expansion-panel {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-expansion-panel {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-expansion-panel {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-expansion-panel {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-expansion-panel, ul.sc-xplor-expansion-panel {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-expansion-panel li.sc-xplor-expansion-panel, ul.sc-xplor-expansion-panel li.sc-xplor-expansion-panel {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-expansion-panel, ul.mdc-list.sc-xplor-expansion-panel {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-expansion-panel li.mdc-list-item.sc-xplor-expansion-panel, ul.mdc-list.sc-xplor-expansion-panel li.mdc-list-item.sc-xplor-expansion-panel {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-expansion-panel {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-expansion-panel {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-expansion-panel {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-expansion-panel {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-expansion-panel .mdc-text-field--outlined.sc-xplor-expansion-panel .mdc-notched-outline__notch.sc-xplor-expansion-panel {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-expansion-panel .mdc-notched-outline__notch.sc-xplor-expansion-panel {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-expansion-panel .mdc-notched-outline.sc-xplor-expansion-panel .mdc-notched-outline__notch.sc-xplor-expansion-panel {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-expansion-panel {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-expansion-panel:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-expansion-panel {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-expansion-panel-h {\n  display: block;\n}\n\n.expansion-panel.sc-xplor-expansion-panel {\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.expansion-panel.sc-xplor-expansion-panel + .expansion-panel.sc-xplor-expansion-panel {\n  margin-top: -1px;\n}\n.expansion-panel--disabled.sc-xplor-expansion-panel {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.expansion-panel__header.sc-xplor-expansion-panel {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1.5rem;\n  background-color: #f5f5f5;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  transition: background-color 0.2s;\n  font-family: inherit;\n  font-size: inherit;\n}\n.expansion-panel__header.sc-xplor-expansion-panel:hover:not(:disabled) {\n  background-color: #eeeeee;\n}\n.expansion-panel__header.sc-xplor-expansion-panel:focus {\n  outline: 2px solid #1976d2;\n  outline-offset: -2px;\n}\n.expansion-panel__header.sc-xplor-expansion-panel:disabled {\n  cursor: not-allowed;\n}\n\n.expansion-panel__header-content.sc-xplor-expansion-panel {\n  flex: 1;\n  font-weight: 500;\n}\n\n.expansion-panel__icon.sc-xplor-expansion-panel {\n  display: inline-block;\n  transition: transform 0.3s ease;\n  font-size: 0.75rem;\n  margin-left: 0.5rem;\n}\n.expansion-panel__icon--open.sc-xplor-expansion-panel {\n  transform: rotate(180deg);\n}\n\n.expansion-panel__content.sc-xplor-expansion-panel {\n  overflow: hidden;\n  transition: max-height 0.3s ease;\n  background-color: #fff;\n}\n\n.expansion-panel__content-inner.sc-xplor-expansion-panel {\n  padding: 1rem 1.5rem;\n}";
+
+let nextId = 0;
+const XplorExpansionPanel$1 = /*@__PURE__*/ proxyCustomElement(class XplorExpansionPanel extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorPanelToggle = createEvent(this, "xplorPanelToggle");
+        this.disabled = false;
+        this.open = false;
+        this.contentHeight = 0;
+        this.handleToggle = () => {
+            if (this.disabled)
+                return;
+            this.open = !this.open;
+            this.xplorPanelToggle.emit({ id: this.panelId, isOpen: this.open });
+            // Update height after toggle
+            setTimeout(() => this.updateContentHeight(), 0);
+        };
+    }
+    componentWillLoad() {
+        this.panelId = `panel-${nextId++}`;
+    }
+    componentDidLoad() {
+        this.updateContentHeight();
+    }
+    updateContentHeight() {
+        if (this.contentEl) {
+            this.contentHeight = this.contentEl.scrollHeight;
+        }
+    }
+    render() {
+        return (h(Host, { key: '0049148b013c93b1dc071a2ab339b600c9335d14' }, h("div", { key: '95ea285cf259218ecd924ca99ea60f8f82624802', class: {
+                'expansion-panel': true,
+                'expansion-panel--open': this.open,
+                'expansion-panel--disabled': this.disabled,
+            } }, h("button", { key: '6830f386af7ffbbcc126c3e048ea37ba774aea1c', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', type: "button" }, h("div", { key: '07214bcf411e7778d7dd0effb53dfb9d65604646', class: "expansion-panel__header-content" }, h("slot", { key: '351b3e28b5d57169f79aae1fec0df8721a4557e4', name: "header" })), h("span", { key: '041f8e499549325dd46fae89f7797576e43e047c', class: {
+                'expansion-panel__icon': true,
+                'expansion-panel__icon--open': this.open,
+            } }, "\u25BC")), h("div", { key: 'c24a708cb5fb363d4e5e17e34604341872f9e4da', class: "expansion-panel__content", style: {
+                maxHeight: this.open ? `${this.contentHeight}px` : '0',
+            } }, h("div", { key: 'cace106961690c2f4e1312f273136b9342f7eaca', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: 'c29f780d6929b5f9687ea381cf332cfc945c8b5b' }))))));
+    }
+    get el() { return this; }
+    static get style() { return xplorExpansionPanelCss; }
+}, [6, "xplor-expansion-panel", {
+        "disabled": [4],
+        "open": [1028],
+        "panelId": [32],
+        "contentHeight": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-expansion-panel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-expansion-panel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorExpansionPanel$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorExpansionPanel = XplorExpansionPanel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorExpansionPanel, defineCustomElement };
+//# sourceMappingURL=xplor-expansion-panel.js.map
+
+//# sourceMappingURL=xplor-expansion-panel.js.map

package/dist/components/xplor-expansion-panel.js.map

@@ -0,0 +1 @@
+{"file":"xplor-expansion-panel.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,4yQAA4yQ;;ACE30Q,IAAI,MAAM,GAAG,CAAC;MAODA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;AAQY,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACR,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAGrC,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAoB1B,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YACxB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACtB,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;YAGnE,UAAU,CAAC,MAAM,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;AACnD,SAAC;AAgDJ;IAtEG,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS,MAAM,EAAE,EAAE;;IAGtC,gBAAgB,GAAA;QACZ,IAAI,CAAC,mBAAmB,EAAE;;IAGtB,mBAAmB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY;;;IAcxD,MAAM,GAAA;QACF,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE;AACH,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,uBAAuB,EAAE,IAAI,CAAC,IAAI;gBAClC,2BAA2B,EAAE,IAAI,CAAC,QAAQ;AAC7C,aAAA,EAAA,EAED,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACR,eAAA,EAAA,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC3C,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iCAAiC,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACpB,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE;AACH,gBAAA,uBAAuB,EAAE,IAAI;gBAC7B,6BAA6B,EAAE,IAAI,CAAC,IAAI;AAC3C,aAAA,EAAA,EAAA,QAAA,CAGE,CACF,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE;AACH,gBAAA,SAAS,EAAE,IAAI,CAAC,IAAI,GAAG,CAAG,EAAA,IAAI,CAAC,aAAa,CAAA,EAAA,CAAI,GAAG,GAAG;aACzD,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,gCAAgC,EACtC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAA,EAElC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACN,CACJ,CACJ,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorExpansionPanel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-expansion-panel/xplor-expansion-panel.scss?tag=xplor-expansion-panel&encapsulation=scoped","src/components/xplor-expansion-panel/xplor-expansion-panel.tsx"],"sourcesContent":[":host {\n    display: block;\n}\n\n.expansion-panel {\n    border: 1px solid #e0e0e0;\n    border-radius: 4px;\n    overflow: hidden;\n\n    &+& {\n        margin-top: -1px;\n    }\n\n    &--disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n    }\n}\n\n.expansion-panel__header {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 1rem 1.5rem;\n    background-color: #f5f5f5;\n    border: none;\n    cursor: pointer;\n    text-align: left;\n    transition: background-color 0.2s;\n    font-family: inherit;\n    font-size: inherit;\n\n    &:hover:not(:disabled) {\n        background-color: #eeeeee;\n    }\n\n    &:focus {\n        outline: 2px solid #1976d2;\n        outline-offset: -2px;\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n}\n\n.expansion-panel__header-content {\n    flex: 1;\n    font-weight: 500;\n}\n\n.expansion-panel__icon {\n    display: inline-block;\n    transition: transform 0.3s ease;\n    font-size: 0.75rem;\n    margin-left: 0.5rem;\n\n    &--open {\n        transform: rotate(180deg);\n    }\n}\n\n.expansion-panel__content {\n    overflow: hidden;\n    transition: max-height 0.3s ease;\n    background-color: #fff;\n}\n\n.expansion-panel__content-inner {\n    padding: 1rem 1.5rem;\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n    tag: 'xplor-expansion-panel',\n    styleUrl: 'xplor-expansion-panel.scss',\n    scoped: true,\n})\nexport class XplorExpansionPanel {\n    @Element() el: HTMLElement;\n\n    @Prop() disabled: boolean = false;\n    @Prop({ mutable: true }) open: boolean = false;\n\n    @State() panelId: string;\n    @State() contentHeight: number = 0;\n\n    @Event() xplorPanelToggle: EventEmitter<{ id: string; isOpen: boolean }>;\n\n    private contentEl: HTMLDivElement;\n\n    componentWillLoad() {\n        this.panelId = `panel-${nextId++}`;\n    }\n\n    componentDidLoad() {\n        this.updateContentHeight();\n    }\n\n    private updateContentHeight() {\n        if (this.contentEl) {\n            this.contentHeight = this.contentEl.scrollHeight;\n        }\n    }\n\n    private handleToggle = () => {\n        if (this.disabled) return;\n\n        this.open = !this.open;\n        this.xplorPanelToggle.emit({ id: this.panelId, isOpen: this.open });\n\n        // Update height after toggle\n        setTimeout(() => this.updateContentHeight(), 0);\n    };\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'expansion-panel': true,\n                        'expansion-panel--open': this.open,\n                        'expansion-panel--disabled': this.disabled,\n                    }}\n                >\n                    <button\n                        class=\"expansion-panel__header\"\n                        onClick={this.handleToggle}\n                        disabled={this.disabled}\n                        aria-expanded={this.open ? 'true' : 'false'}\n                        type=\"button\"\n                    >\n                        <div class=\"expansion-panel__header-content\">\n                            <slot name=\"header\" />\n                        </div>\n                        <span\n                            class={{\n                                'expansion-panel__icon': true,\n                                'expansion-panel__icon--open': this.open,\n                            }}\n                        >\n                            ▼\n                        </span>\n                    </button>\n                    <div\n                        class=\"expansion-panel__content\"\n                        style={{\n                            maxHeight: this.open ? `${this.contentHeight}px` : '0',\n                        }}\n                    >\n                        <div\n                            class=\"expansion-panel__content-inner\"\n                            ref={(el) => (this.contentEl = el)}\n                        >\n                            <slot />\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/xplor-expansion-panels.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorExpansionPanels extends Components.XplorExpansionPanels, HTMLElement {}
+export const XplorExpansionPanels: {
+    prototype: XplorExpansionPanels;
+    new (): XplorExpansionPanels;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-expansion-panels.js

@@ -0,0 +1,71 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorExpansionPanelsCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    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);\n    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);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-expansion-panels {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-expansion-panels {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-expansion-panels {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-expansion-panels {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-expansion-panels {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-expansion-panels {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-expansion-panels, ul.sc-xplor-expansion-panels {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-expansion-panels li.sc-xplor-expansion-panels, ul.sc-xplor-expansion-panels li.sc-xplor-expansion-panels {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-expansion-panels, ul.mdc-list.sc-xplor-expansion-panels {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-expansion-panels li.mdc-list-item.sc-xplor-expansion-panels, ul.mdc-list.sc-xplor-expansion-panels li.mdc-list-item.sc-xplor-expansion-panels {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-expansion-panels {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-expansion-panels {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-expansion-panels {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-expansion-panels {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-expansion-panels .mdc-text-field--outlined.sc-xplor-expansion-panels .mdc-notched-outline__notch.sc-xplor-expansion-panels {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-expansion-panels .mdc-notched-outline__notch.sc-xplor-expansion-panels {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-expansion-panels .mdc-notched-outline.sc-xplor-expansion-panels .mdc-notched-outline__notch.sc-xplor-expansion-panels {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-expansion-panels {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-expansion-panels:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-expansion-panels {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-expansion-panels-h {\n  display: block;\n}\n\n.expansion-panels.sc-xplor-expansion-panels {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}";
+
+const XplorExpansionPanels$1 = /*@__PURE__*/ proxyCustomElement(class XplorExpansionPanels extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.value = [];
+        this.multiple = false;
+        this.accordion = true; // accordion mode (only one open at a time when not multiple)
+        this.openPanels = new Set();
+    }
+    componentWillLoad() {
+        if (Array.isArray(this.value)) {
+            this.openPanels = new Set(this.value);
+        }
+        else if (this.value) {
+            this.openPanels = new Set([this.value]);
+        }
+    }
+    handlePanelToggle(event) {
+        event.stopPropagation();
+        const { id, isOpen } = event.detail;
+        if (isOpen) {
+            if (this.multiple) {
+                this.openPanels = new Set([...this.openPanels, id]);
+            }
+            else {
+                this.openPanels = new Set([id]);
+            }
+        }
+        else {
+            const newPanels = new Set(this.openPanels);
+            newPanels.delete(id);
+            this.openPanels = newPanels;
+        }
+        this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';
+    }
+    render() {
+        return (h(Host, { key: '84799902825dd3245333d6ae1e3c2016bfe4351c' }, h("div", { key: 'b43833c79be3f85cb941fd26a57f31efddc4b898', class: "expansion-panels" }, h("slot", { key: '56a99fa50bad4de4b1955ce7fd10db7eefa2b0fe' }))));
+    }
+    static get style() { return xplorExpansionPanelsCss; }
+}, [6, "xplor-expansion-panels", {
+        "value": [1025],
+        "multiple": [4],
+        "accordion": [4],
+        "openPanels": [32]
+    }, [[0, "xplorPanelToggle", "handlePanelToggle"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-expansion-panels"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-expansion-panels":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorExpansionPanels$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorExpansionPanels = XplorExpansionPanels$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorExpansionPanels, defineCustomElement };
+//# sourceMappingURL=xplor-expansion-panels.js.map
+
+//# sourceMappingURL=xplor-expansion-panels.js.map

package/dist/components/xplor-expansion-panels.js.map

@@ -0,0 +1 @@
+{"file":"xplor-expansion-panels.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,s4NAAs4N;;MCOz5NA,sBAAoB,iBAAAC,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;AALjC,IAAA,WAAA,GAAA;;;AAM6B,QAAA,IAAK,CAAA,KAAA,GAAsB,EAAE;AAC9C,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAA,CAAA,SAAS,GAAY,IAAI,CAAC;AAEzB,QAAA,IAAA,CAAA,UAAU,GAAgB,IAAI,GAAG,EAAE;AAuC/C;IArCG,iBAAiB,GAAA;QACb,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;;AAClC,aAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAK/C,IAAA,iBAAiB,CAAC,KAAmD,EAAA;QACjE,KAAK,CAAC,eAAe,EAAE;QACvB,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM;QAEnC,IAAI,MAAM,EAAE;AACR,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,gBAAA,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;;iBAChD;gBACH,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;;;aAEhC;YACH,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;AAC1C,YAAA,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;AACpB,YAAA,IAAI,CAAC,UAAU,GAAG,SAAS;;AAG/B,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;;IAGnG,MAAM,GAAA;AACF,QAAA,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EACzB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorExpansionPanels","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-expansion-panels/xplor-expansion-panels.scss?tag=xplor-expansion-panels&encapsulation=scoped","src/components/xplor-expansion-panels/xplor-expansion-panels.tsx"],"sourcesContent":[":host {\n    display: block;\n}\n\n.expansion-panels {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n}","import { Component, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n    tag: 'xplor-expansion-panels',\n    styleUrl: 'xplor-expansion-panels.scss',\n    scoped: true,\n})\nexport class XplorExpansionPanels {\n    @Prop({ mutable: true }) value: string | string[] = [];\n    @Prop() multiple: boolean = false;\n    @Prop() accordion: boolean = true; // accordion mode (only one open at a time when not multiple)\n\n    @State() openPanels: Set<string> = new Set();\n\n    componentWillLoad() {\n        if (Array.isArray(this.value)) {\n            this.openPanels = new Set(this.value);\n        } else if (this.value) {\n            this.openPanels = new Set([this.value]);\n        }\n    }\n\n    @Listen('xplorPanelToggle')\n    handlePanelToggle(event: CustomEvent<{ id: string; isOpen: boolean }>) {\n        event.stopPropagation();\n        const { id, isOpen } = event.detail;\n\n        if (isOpen) {\n            if (this.multiple) {\n                this.openPanels = new Set([...this.openPanels, id]);\n            } else {\n                this.openPanels = new Set([id]);\n            }\n        } else {\n            const newPanels = new Set(this.openPanels);\n            newPanels.delete(id);\n            this.openPanels = newPanels;\n        }\n\n        this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"expansion-panels\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/xplor-file-upload.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorFileUpload extends Components.XplorFileUpload, HTMLElement {}
+export const XplorFileUpload: {
+    prototype: XplorFileUpload;
+    new (): XplorFileUpload;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-file-upload.js

@@ -0,0 +1,184 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorFileUploadCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    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);\n    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);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-file-upload {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-file-upload {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-file-upload {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-file-upload {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-file-upload {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-file-upload {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-file-upload, ul.sc-xplor-file-upload {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-file-upload li.sc-xplor-file-upload, ul.sc-xplor-file-upload li.sc-xplor-file-upload {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-file-upload, ul.mdc-list.sc-xplor-file-upload {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-file-upload li.mdc-list-item.sc-xplor-file-upload, ul.mdc-list.sc-xplor-file-upload li.mdc-list-item.sc-xplor-file-upload {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-file-upload {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-file-upload {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-file-upload {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-file-upload {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-file-upload .mdc-text-field--outlined.sc-xplor-file-upload .mdc-notched-outline__notch.sc-xplor-file-upload {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-file-upload .mdc-notched-outline__notch.sc-xplor-file-upload {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-file-upload .mdc-notched-outline.sc-xplor-file-upload .mdc-notched-outline__notch.sc-xplor-file-upload {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-file-upload {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-file-upload:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-file-upload {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-file-upload-h {\n  display: block;\n}\n\n.file-upload.sc-xplor-file-upload {\n  width: 100%;\n}\n\n.file-upload__dropzone.sc-xplor-file-upload {\n  border: 2px dashed #bdbdbd;\n  border-radius: 8px;\n  padding: 2rem;\n  text-align: center;\n  transition: all 0.2s ease;\n  background-color: #fafafa;\n  cursor: pointer;\n  position: relative;\n}\n.file-upload__dropzone.sc-xplor-file-upload:hover:not(.file-upload__dropzone--disabled) {\n  border-color: #1976d2;\n  background-color: #f0f7ff;\n}\n.file-upload__dropzone--dragging.sc-xplor-file-upload {\n  border-color: #1976d2;\n  background-color: #e3f2fd;\n  transform: scale(1.02);\n}\n.file-upload__dropzone--disabled.sc-xplor-file-upload {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background-color: #f5f5f5;\n}\n\n.file-upload__input.sc-xplor-file-upload {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.file-upload__content.sc-xplor-file-upload {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.file-upload__icon.sc-xplor-file-upload {\n  color: #757575;\n}\n\n.file-upload__text.sc-xplor-file-upload {\n  font-size: 1rem;\n  color: #424242;\n  margin: 0;\n}\n\n.file-upload__button.sc-xplor-file-upload {\n  background: none;\n  border: none;\n  color: #1976d2;\n  text-decoration: underline;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: inherit;\n  padding: 0;\n  transition: color 0.2s;\n}\n.file-upload__button.sc-xplor-file-upload:hover:not(:disabled) {\n  color: #1565c0;\n}\n.file-upload__button.sc-xplor-file-upload:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.file-upload__hint.sc-xplor-file-upload {\n  font-size: 0.875rem;\n  color: #757575;\n  margin: 0;\n}\n\n.file-upload__error.sc-xplor-file-upload {\n  margin-top: 0.5rem;\n  padding: 0.75rem;\n  background-color: #ffebee;\n  color: #c62828;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  border-left: 4px solid #f44336;\n}\n\n.file-upload__files.sc-xplor-file-upload {\n  margin-top: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.file-upload__file.sc-xplor-file-upload {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 0.75rem;\n  background-color: #f5f5f5;\n  border-radius: 4px;\n  border: 1px solid #e0e0e0;\n}\n\n.file-upload__preview.sc-xplor-file-upload {\n  width: 48px;\n  height: 48px;\n  object-fit: cover;\n  border-radius: 4px;\n  flex-shrink: 0;\n}\n\n.file-upload__file-info.sc-xplor-file-upload {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  min-width: 0;\n}\n\n.file-upload__file-name.sc-xplor-file-upload {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: #212121;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-upload__file-size.sc-xplor-file-upload {\n  font-size: 0.75rem;\n  color: #757575;\n}\n\n.file-upload__remove.sc-xplor-file-upload {\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0;\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 4px;\n  transition: all 0.2s;\n  flex-shrink: 0;\n}\n.file-upload__remove.sc-xplor-file-upload:hover {\n  background-color: #ffebee;\n  color: #f44336;\n}\n.file-upload__remove.sc-xplor-file-upload:focus {\n  outline: 2px solid #1976d2;\n  outline-offset: 2px;\n}";
+
+const DEFAULT_ACCEPT_ALL = '*' + '/' + '*';
+const XplorFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class XplorFileUpload extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorFileAdd = createEvent(this, "xplorFileAdd");
+        this.xplorFileRemove = createEvent(this, "xplorFileRemove");
+        this.xplorError = createEvent(this, "xplorError");
+        /**
+         * Accepted file types (e.g., 'image/png', '.pdf', 'image/star'). Default accepts all types.
+         */
+        this.accepts = DEFAULT_ACCEPT_ALL;
+        /**
+         * Maximum file size in bytes
+         */
+        this.maxSize = 10 * 1024 * 1024; // 10MB default
+        /**
+         * Allow multiple file selection
+         */
+        this.multiple = false;
+        /**
+         * Disable the file upload
+         */
+        this.disabled = false;
+        /**
+         * Show image preview for uploaded images
+         */
+        this.showPreview = true;
+        /**
+         * Label text for the upload button
+         */
+        this.label = 'Upload Files';
+        this.files = [];
+        this.isDragging = false;
+        this.error = '';
+        this.handleFileSelect = (event) => {
+            const input = event.target;
+            if (input.files) {
+                this.processFiles(Array.from(input.files));
+            }
+        };
+        this.handleDragOver = (event) => {
+            event.preventDefault();
+            if (!this.disabled) {
+                this.isDragging = true;
+            }
+        };
+        this.handleDragLeave = (event) => {
+            event.preventDefault();
+            this.isDragging = false;
+        };
+        this.handleDrop = (event) => {
+            var _a;
+            event.preventDefault();
+            this.isDragging = false;
+            if (this.disabled)
+                return;
+            if ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                this.processFiles(Array.from(event.dataTransfer.files));
+            }
+        };
+        this.handleRemoveFile = (fileToRemove) => {
+            this.files = this.files.filter(f => f.id !== fileToRemove.id);
+            this.xplorFileRemove.emit(fileToRemove);
+        };
+        this.handleButtonClick = () => {
+            if (!this.disabled && this.fileInputEl) {
+                this.fileInputEl.click();
+            }
+        };
+    }
+    processFiles(fileList) {
+        this.error = '';
+        const validFiles = [];
+        for (const file of fileList) {
+            // Validate file size
+            if (file.size > this.maxSize) {
+                const maxSizeMB = (this.maxSize / (1024 * 1024)).toFixed(2);
+                this.error = `File "${file.name}" exceeds maximum size of ${maxSizeMB}MB`;
+                this.xplorError.emit(this.error);
+                continue;
+            }
+            // Validate file type if specified
+            if (this.accepts !== '*/*') {
+                const acceptedTypes = this.accepts.split(',').map(t => t.trim());
+                const fileExtension = `.${file.name.split('.').pop()}`;
+                const isAccepted = acceptedTypes.some(type => {
+                    if (type.endsWith('/*')) {
+                        return file.type.startsWith(type.replace('/*', ''));
+                    }
+                    return type === file.type || type === fileExtension;
+                });
+                if (!isAccepted) {
+                    this.error = `File type "${file.type}" is not accepted`;
+                    this.xplorError.emit(this.error);
+                    continue;
+                }
+            }
+            const uploadedFile = {
+                file,
+                id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+                name: file.name,
+                size: file.size,
+                type: file.type,
+            };
+            // Generate preview for images
+            if (this.showPreview && file.type.startsWith('image/')) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    var _a;
+                    uploadedFile.dataUrl = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+                    this.files = [...this.files];
+                };
+                reader.readAsDataURL(file);
+            }
+            validFiles.push(uploadedFile);
+        }
+        if (validFiles.length > 0) {
+            if (this.multiple) {
+                this.files = [...this.files, ...validFiles];
+            }
+            else {
+                this.files = [validFiles[0]];
+            }
+            this.xplorFileAdd.emit(validFiles);
+        }
+        // Reset input
+        if (this.fileInputEl) {
+            this.fileInputEl.value = '';
+        }
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+    }
+    render() {
+        return (h(Host, { key: '9c3ad81ff741fe6324a5e8af562c740965024df1' }, h("div", { key: 'b0b9bb545ce5a4e74c38bc6b49f7681f6e10dd89', class: "file-upload" }, h("div", { key: 'd1f1198c0d47009ffa85cc1188d292029b979111', class: {
+                'file-upload__dropzone': true,
+                'file-upload__dropzone--dragging': this.isDragging,
+                'file-upload__dropzone--disabled': this.disabled,
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '1625dae6ee5648ea0dee0673a892420d0dab2e7c', ref: (el) => (this.fileInputEl = el), type: "file", accept: this.accepts, multiple: this.multiple, disabled: this.disabled, onChange: this.handleFileSelect, class: "file-upload__input" }), h("div", { key: '2d1e0ff6e55dd56df7ff04829128dd74eb05d350', class: "file-upload__content" }, h("svg", { key: 'aab4f33389ed3cddc4d6a30300d384209058f64e', class: "file-upload__icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '51da727eaa0d9394184b54c845ae70c0de2c9c5c', d: "M12 15V3M12 3L8 7M12 3L16 7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '38123b6c7c9c898040a225d851ff7b488f8fedf4', d: "M2 17L2 19C2 20.1046 2.89543 21 4 21L20 21C21.1046 21 22 20.1046 22 19L22 17", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })), h("p", { key: '530f416409a178f0dc9de208476085452e66156a', class: "file-upload__text" }, "Drag & drop files here or", ' ', h("button", { key: '9465171b3ee487fbf0e7aa75da09709eb061a32e', type: "button", class: "file-upload__button", onClick: this.handleButtonClick, disabled: this.disabled }, this.label)), h("p", { key: 'b94b0c91a37fc218362a25ffe46d77929a6752f5', class: "file-upload__hint" }, "Max size: ", this.formatFileSize(this.maxSize), this.accepts !== '*/*' && ` • Accepts: ${this.accepts}`))), this.error && (h("div", { key: '46a708db58e94110d41a8b86571dd29e58e76ae2', class: "file-upload__error", role: "alert" }, this.error)), this.files.length > 0 && (h("div", { key: '95d2aadf7587f759ecd3b55a84b7d6a7ec8c61ac', class: "file-upload__files" }, this.files.map((file) => (h("div", { key: file.id, class: "file-upload__file" }, file.dataUrl && (h("img", { src: file.dataUrl, alt: file.name, class: "file-upload__preview" })), h("div", { class: "file-upload__file-info" }, h("span", { class: "file-upload__file-name", title: file.name }, file.name), h("span", { class: "file-upload__file-size" }, this.formatFileSize(file.size))), h("button", { type: "button", class: "file-upload__remove", onClick: () => this.handleRemoveFile(file), "aria-label": `Remove ${file.name}` }, "\u00D7")))))))));
+    }
+    static get style() { return xplorFileUploadCss; }
+}, [2, "xplor-file-upload", {
+        "accepts": [1],
+        "maxSize": [2, "max-size"],
+        "multiple": [4],
+        "disabled": [4],
+        "showPreview": [4, "show-preview"],
+        "label": [1],
+        "files": [32],
+        "isDragging": [32],
+        "error": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-file-upload"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-file-upload":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorFileUpload$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorFileUpload = XplorFileUpload$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorFileUpload, defineCustomElement };
+//# sourceMappingURL=xplor-file-upload.js.map
+
+//# sourceMappingURL=xplor-file-upload.js.map

package/dist/components/xplor-file-upload.js.map

@@ -0,0 +1 @@
+{"file":"xplor-file-upload.js","mappings":"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","names":["XplorFileUpload","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-file-upload/xplor-file-upload.scss?tag=xplor-file-upload&encapsulation=scoped","src/components/xplor-file-upload/xplor-file-upload.tsx"],"sourcesContent":[":host {\n    display: block;\n}\n\n.file-upload {\n    width: 100%;\n}\n\n.file-upload__dropzone {\n    border: 2px dashed #bdbdbd;\n    border-radius: 8px;\n    padding: 2rem;\n    text-align: center;\n    transition: all 0.2s ease;\n    background-color: #fafafa;\n    cursor: pointer;\n    position: relative;\n\n    &:hover:not(&--disabled) {\n        border-color: #1976d2;\n        background-color: #f0f7ff;\n    }\n\n    &--dragging {\n        border-color: #1976d2;\n        background-color: #e3f2fd;\n        transform: scale(1.02);\n    }\n\n    &--disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n        background-color: #f5f5f5;\n    }\n}\n\n.file-upload__input {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    opacity: 0;\n    pointer-events: none;\n}\n\n.file-upload__content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 0.75rem;\n}\n\n.file-upload__icon {\n    color: #757575;\n}\n\n.file-upload__text {\n    font-size: 1rem;\n    color: #424242;\n    margin: 0;\n}\n\n.file-upload__button {\n    background: none;\n    border: none;\n    color: #1976d2;\n    text-decoration: underline;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: inherit;\n    padding: 0;\n    transition: color 0.2s;\n\n    &:hover:not(:disabled) {\n        color: #1565c0;\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n    }\n}\n\n.file-upload__hint {\n    font-size: 0.875rem;\n    color: #757575;\n    margin: 0;\n}\n\n.file-upload__error {\n    margin-top: 0.5rem;\n    padding: 0.75rem;\n    background-color: #ffebee;\n    color: #c62828;\n    border-radius: 4px;\n    font-size: 0.875rem;\n    border-left: 4px solid #f44336;\n}\n\n.file-upload__files {\n    margin-top: 1rem;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.file-upload__file {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 0.75rem;\n    background-color: #f5f5f5;\n    border-radius: 4px;\n    border: 1px solid #e0e0e0;\n}\n\n.file-upload__preview {\n    width: 48px;\n    height: 48px;\n    object-fit: cover;\n    border-radius: 4px;\n    flex-shrink: 0;\n}\n\n.file-upload__file-info {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    min-width: 0;\n}\n\n.file-upload__file-name {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #212121;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.file-upload__file-size {\n    font-size: 0.75rem;\n    color: #757575;\n}\n\n.file-upload__remove {\n    background: none;\n    border: none;\n    font-size: 1.5rem;\n    line-height: 1;\n    cursor: pointer;\n    padding: 0;\n    width: 2rem;\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #757575;\n    border-radius: 4px;\n    transition: all 0.2s;\n    flex-shrink: 0;\n\n    &:hover {\n        background-color: #ffebee;\n        color: #f44336;\n    }\n\n    &:focus {\n        outline: 2px solid #1976d2;\n        outline-offset: 2px;\n    }\n}","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\n\nexport interface UploadedFile {\n    file: File;\n    id: string;\n    name: string;\n    size: number;\n    type: string;\n    dataUrl?: string;\n}\n\n@Component({\n    tag: 'xplor-file-upload',\n    styleUrl: 'xplor-file-upload.scss',\n    scoped: true,\n})\nexport class XplorFileUpload {\n    /**\n     * Accepted file types (e.g., 'image/png', '.pdf', 'image/star'). Default accepts all types.\n     */\n    @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n    /**\n     * Maximum file size in bytes\n     */\n    @Prop() maxSize: number = 10 * 1024 * 1024; // 10MB default\n\n    /**\n     * Allow multiple file selection\n     */\n    @Prop() multiple: boolean = false;\n\n    /**\n     * Disable the file upload\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Show image preview for uploaded images\n     */\n    @Prop() showPreview: boolean = true;\n\n    /**\n     * Label text for the upload button\n     */\n    @Prop() label: string = 'Upload Files';\n\n    @State() files: UploadedFile[] = [];\n    @State() isDragging: boolean = false;\n    @State() error: string = '';\n\n    @Event() xplorFileAdd: EventEmitter<UploadedFile[]>;\n    @Event() xplorFileRemove: EventEmitter<UploadedFile>;\n    @Event() xplorError: EventEmitter<string>;\n\n    private fileInputEl: HTMLInputElement;\n\n    private handleFileSelect = (event: Event) => {\n        const input = event.target as HTMLInputElement;\n        if (input.files) {\n            this.processFiles(Array.from(input.files));\n        }\n    };\n\n    private handleDragOver = (event: DragEvent) => {\n        event.preventDefault();\n        if (!this.disabled) {\n            this.isDragging = true;\n        }\n    };\n\n    private handleDragLeave = (event: DragEvent) => {\n        event.preventDefault();\n        this.isDragging = false;\n    };\n\n    private handleDrop = (event: DragEvent) => {\n        event.preventDefault();\n        this.isDragging = false;\n\n        if (this.disabled) return;\n\n        if (event.dataTransfer?.files) {\n            this.processFiles(Array.from(event.dataTransfer.files));\n        }\n    };\n\n    private processFiles(fileList: File[]) {\n        this.error = '';\n        const validFiles: UploadedFile[] = [];\n\n        for (const file of fileList) {\n            // Validate file size\n            if (file.size > this.maxSize) {\n                const maxSizeMB = (this.maxSize / (1024 * 1024)).toFixed(2);\n                this.error = `File \"${file.name}\" exceeds maximum size of ${maxSizeMB}MB`;\n                this.xplorError.emit(this.error);\n                continue;\n            }\n\n            // Validate file type if specified\n            if (this.accepts !== '*/*') {\n                const acceptedTypes = this.accepts.split(',').map(t => t.trim());\n                const fileExtension = `.${file.name.split('.').pop()}`;\n                const isAccepted = acceptedTypes.some(type => {\n                    if (type.endsWith('/*')) {\n                        return file.type.startsWith(type.replace('/*', ''));\n                    }\n                    return type === file.type || type === fileExtension;\n                });\n\n                if (!isAccepted) {\n                    this.error = `File type \"${file.type}\" is not accepted`;\n                    this.xplorError.emit(this.error);\n                    continue;\n                }\n            }\n\n            const uploadedFile: UploadedFile = {\n                file,\n                id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,\n                name: file.name,\n                size: file.size,\n                type: file.type,\n            };\n\n            // Generate preview for images\n            if (this.showPreview && file.type.startsWith('image/')) {\n                const reader = new FileReader();\n                reader.onload = (e) => {\n                    uploadedFile.dataUrl = e.target?.result as string;\n                    this.files = [...this.files];\n                };\n                reader.readAsDataURL(file);\n            }\n\n            validFiles.push(uploadedFile);\n        }\n\n        if (validFiles.length > 0) {\n            if (this.multiple) {\n                this.files = [...this.files, ...validFiles];\n            } else {\n                this.files = [validFiles[0]];\n            }\n            this.xplorFileAdd.emit(validFiles);\n        }\n\n        // Reset input\n        if (this.fileInputEl) {\n            this.fileInputEl.value = '';\n        }\n    }\n\n    private handleRemoveFile = (fileToRemove: UploadedFile) => {\n        this.files = this.files.filter(f => f.id !== fileToRemove.id);\n        this.xplorFileRemove.emit(fileToRemove);\n    };\n\n    private handleButtonClick = () => {\n        if (!this.disabled && this.fileInputEl) {\n            this.fileInputEl.click();\n        }\n    };\n\n    private formatFileSize(bytes: number): string {\n        if (bytes === 0) return '0 Bytes';\n        const k = 1024;\n        const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n        const i = Math.floor(Math.log(bytes) / Math.log(k));\n        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"file-upload\">\n                    <div\n                        class={{\n                            'file-upload__dropzone': true,\n                            'file-upload__dropzone--dragging': this.isDragging,\n                            'file-upload__dropzone--disabled': this.disabled,\n                        }}\n                        onDragOver={this.handleDragOver}\n                        onDragLeave={this.handleDragLeave}\n                        onDrop={this.handleDrop}\n                    >\n                        <input\n                            ref={(el) => (this.fileInputEl = el)}\n                            type=\"file\"\n                            accept={this.accepts}\n                            multiple={this.multiple}\n                            disabled={this.disabled}\n                            onChange={this.handleFileSelect}\n                            class=\"file-upload__input\"\n                        />\n\n                        <div class=\"file-upload__content\">\n                            <svg class=\"file-upload__icon\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\">\n                                <path d=\"M12 15V3M12 3L8 7M12 3L16 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M2 17L2 19C2 20.1046 2.89543 21 4 21L20 21C21.1046 21 22 20.1046 22 19L22 17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n                            </svg>\n                            <p class=\"file-upload__text\">\n                                Drag & drop files here or{' '}\n                                <button\n                                    type=\"button\"\n                                    class=\"file-upload__button\"\n                                    onClick={this.handleButtonClick}\n                                    disabled={this.disabled}\n                                >\n                                    {this.label}\n                                </button>\n                            </p>\n                            <p class=\"file-upload__hint\">\n                                Max size: {this.formatFileSize(this.maxSize)}\n                                {this.accepts !== '*/*' && ` • Accepts: ${this.accepts}`}\n                            </p>\n                        </div>\n                    </div>\n\n                    {this.error && (\n                        <div class=\"file-upload__error\" role=\"alert\">\n                            {this.error}\n                        </div>\n                    )}\n\n                    {this.files.length > 0 && (\n                        <div class=\"file-upload__files\">\n                            {this.files.map((file) => (\n                                <div key={file.id} class=\"file-upload__file\">\n                                    {file.dataUrl && (\n                                        <img src={file.dataUrl} alt={file.name} class=\"file-upload__preview\" />\n                                    )}\n                                    <div class=\"file-upload__file-info\">\n                                        <span class=\"file-upload__file-name\" title={file.name}>\n                                            {file.name}\n                                        </span>\n                                        <span class=\"file-upload__file-size\">\n                                            {this.formatFileSize(file.size)}\n                                        </span>\n                                    </div>\n                                    <button\n                                        type=\"button\"\n                                        class=\"file-upload__remove\"\n                                        onClick={() => this.handleRemoveFile(file)}\n                                        aria-label={`Remove ${file.name}`}\n                                    >\n                                        ×\n                                    </button>\n                                </div>\n                            ))}\n                        </div>\n                    )}\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/xplor-inline-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorInlineCheckbox extends Components.XplorInlineCheckbox, HTMLElement {}
+export const XplorInlineCheckbox: {
+    prototype: XplorInlineCheckbox;
+    new (): XplorInlineCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-inline-checkbox.js

@@ -0,0 +1,76 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorInlineCheckboxCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    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);\n    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);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-inline-checkbox {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-inline-checkbox {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-inline-checkbox {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-inline-checkbox {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-inline-checkbox {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-inline-checkbox {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-inline-checkbox, ul.sc-xplor-inline-checkbox {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-inline-checkbox li.sc-xplor-inline-checkbox, ul.sc-xplor-inline-checkbox li.sc-xplor-inline-checkbox {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-inline-checkbox, ul.mdc-list.sc-xplor-inline-checkbox {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-inline-checkbox li.mdc-list-item.sc-xplor-inline-checkbox, ul.mdc-list.sc-xplor-inline-checkbox li.mdc-list-item.sc-xplor-inline-checkbox {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-inline-checkbox {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-inline-checkbox {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-inline-checkbox {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-inline-checkbox {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-inline-checkbox .mdc-text-field--outlined.sc-xplor-inline-checkbox .mdc-notched-outline__notch.sc-xplor-inline-checkbox {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-inline-checkbox .mdc-notched-outline__notch.sc-xplor-inline-checkbox {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-inline-checkbox .mdc-notched-outline.sc-xplor-inline-checkbox .mdc-notched-outline__notch.sc-xplor-inline-checkbox {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-inline-checkbox {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-inline-checkbox:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-inline-checkbox {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-inline-checkbox-h {\n  display: inline-block;\n}\n\n.xplor-inline-checkbox.sc-xplor-inline-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  user-select: none;\n}\n.xplor-inline-checkbox__input.sc-xplor-inline-checkbox {\n  width: 1.125rem;\n  height: 1.125rem;\n  cursor: pointer;\n  margin: 0;\n  flex-shrink: 0;\n}\n.xplor-inline-checkbox__input.sc-xplor-inline-checkbox:disabled {\n  cursor: not-allowed;\n  opacity: 0.38;\n}\n.xplor-inline-checkbox__label.sc-xplor-inline-checkbox {\n  font-size: 1rem;\n  color: rgba(0, 0, 0, 0.87);\n}\n.xplor-inline-checkbox--disabled.sc-xplor-inline-checkbox {\n  cursor: not-allowed;\n}\n.xplor-inline-checkbox--disabled.sc-xplor-inline-checkbox .xplor-inline-checkbox__label.sc-xplor-inline-checkbox {\n  color: rgba(0, 0, 0, 0.38);\n}";
+
+const XplorInlineCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class XplorInlineCheckbox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorChange = createEvent(this, "xplorChange");
+        /**
+         * Checked state
+         */
+        this.checked = false;
+        /**
+         * Checkbox color
+         */
+        this.color = '#008480';
+        /**
+         * Whether the checkbox is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the checkbox is indeterminate
+         */
+        this.indeterminate = false;
+        /**
+         * Label text
+         */
+        this.label = '';
+        this.handleChange = (event) => {
+            const target = event.target;
+            this.checked = target.checked;
+            this.xplorChange.emit(this.checked);
+        };
+    }
+    render() {
+        const containerClasses = {
+            'xplor-inline-checkbox': true,
+            'xplor-inline-checkbox--disabled': this.disabled,
+            'xplor-inline-checkbox--checked': this.checked,
+        };
+        return (h(Host, { key: 'e8d3c2bfb8824944eb230ab67dd282da16eac103' }, h("label", { key: 'ecbecd91460e78f0e1fa50013b36d8ff37fbaa65', class: containerClasses }, h("input", { key: '6e5ad3043737fc8fcd46c477cd11279a18df6646', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
+                accentColor: this.color,
+            } }), this.label && h("span", { key: '9ae4683f392b63af41286676b0bd6c648fc9571a', class: "xplor-inline-checkbox__label" }, this.label), h("slot", { key: 'd6d6642934b65aacf4d5ed899b925b7445414ae0' }))));
+    }
+    static get style() { return xplorInlineCheckboxCss; }
+}, [6, "xplor-inline-checkbox", {
+        "checked": [1028],
+        "value": [8],
+        "color": [1],
+        "disabled": [4],
+        "indeterminate": [4],
+        "label": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-inline-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-inline-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorInlineCheckbox$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorInlineCheckbox = XplorInlineCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorInlineCheckbox, defineCustomElement };
+//# sourceMappingURL=xplor-inline-checkbox.js.map
+
+//# sourceMappingURL=xplor-inline-checkbox.js.map

package/dist/components/xplor-inline-checkbox.js.map

@@ -0,0 +1 @@
+{"file":"xplor-inline-checkbox.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,2gPAA2gP;;MCO7hPA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAOjD;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAEtC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAOlB,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO;YAC7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AACrC,SAAC;AA8BF;IA5BC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,uBAAuB,EAAE,IAAI;YAC7B,iCAAiC,EAAE,IAAI,CAAC,QAAQ;YAChD,gCAAgC,EAAE,IAAI,CAAC,OAAO;SAC/C;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC5B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI,CAAC,KAAK;AACxB,aAAA,EACD,CAAA,EACD,IAAI,CAAC,KAAK,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,EAC7E,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorInlineCheckbox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-inline-checkbox/xplor-inline-checkbox.scss?tag=xplor-inline-checkbox&encapsulation=scoped","src/components/xplor-inline-checkbox/xplor-inline-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.xplor-inline-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  user-select: none;\n\n  &__input {\n    width: 1.125rem;\n    height: 1.125rem;\n    cursor: pointer;\n    margin: 0;\n    flex-shrink: 0;\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.38;\n    }\n  }\n\n  &__label {\n    font-size: 1rem;\n    color: rgba(0, 0, 0, 0.87);\n  }\n\n  &--disabled {\n    cursor: not-allowed;\n\n    .xplor-inline-checkbox__label {\n      color: rgba(0, 0, 0, 0.38);\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-inline-checkbox',\n  styleUrl: 'xplor-inline-checkbox.scss',\n  scoped: true,\n})\nexport class XplorInlineCheckbox {\n  /**\n   * Checked state\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * Value (for use in forms)\n   */\n  @Prop() value: any;\n\n  /**\n   * Checkbox color\n   */\n  @Prop() color: string = '#008480';\n\n  /**\n   * Whether the checkbox is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the checkbox is indeterminate\n   */\n  @Prop() indeterminate: boolean = false;\n\n  /**\n   * Label text\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<boolean>;\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.xplorChange.emit(this.checked);\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-inline-checkbox': true,\n      'xplor-inline-checkbox--disabled': this.disabled,\n      'xplor-inline-checkbox--checked': this.checked,\n    };\n\n    return (\n      <Host>\n        <label class={containerClasses}>\n          <input\n            type=\"checkbox\"\n            class=\"xplor-inline-checkbox__input\"\n            checked={this.checked}\n            value={this.value}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            onChange={this.handleChange}\n            style={{\n              accentColor: this.color,\n            }}\n          />\n          {this.label && <span class=\"xplor-inline-checkbox__label\">{this.label}</span>}\n          <slot />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-inline-date-picker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorInlineDatePicker extends Components.XplorInlineDatePicker, HTMLElement {}
+export const XplorInlineDatePicker: {
+    prototype: XplorInlineDatePicker;
+    new (): XplorInlineDatePicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-inline-date-picker.js

@@ -0,0 +1,9 @@
+import { X as XplorInlineDatePicker$1, d as defineCustomElement$1 } from './p-BIFlTsO8.js';
+
+const XplorInlineDatePicker = XplorInlineDatePicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorInlineDatePicker, defineCustomElement };
+//# sourceMappingURL=xplor-inline-date-picker.js.map
+
+//# sourceMappingURL=xplor-inline-date-picker.js.map

package/dist/components/xplor-inline-date-picker.js.map

@@ -0,0 +1 @@
+{"file":"xplor-inline-date-picker.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}