@xplor-education/core-stencil-components 2.0.0

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

@@ -0,0 +1 @@
+{"file":"xplor-alert-message.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,+8QAA+8Q;;MCO/9QA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;AAMY,QAAA,IAAI,CAAA,IAAA,GAA6C,MAAM;AAEvD,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAI5B,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC5B,SAAC;AAuCJ;IArCG,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,eAAe,EAAE,IAAI;AACrB,gBAAA,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACxC,aAAA,EACD,IAAI,EAAC,OAAO,EAAA,EAEZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAC9B,IAAI,CAAC,UAAU,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,UAAU,CAAQ,CACzC,CACT,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACN,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CACrB,CACJ,EACL,IAAI,CAAC,WAAW,KACb,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,aAAa,EAAA,YAAA,EAChB,eAAe,EAC1B,IAAI,EAAC,QAAQ,EAAA,EAAA,QAAA,CAGR,CACZ,CACC,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorAlertMessage","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-alert-message/xplor-alert-message.scss?tag=xplor-alert-message&encapsulation=scoped","src/components/xplor-alert-message/xplor-alert-message.tsx"],"sourcesContent":[":host {\n    display: block;\n}\n\n.alert-message {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 1rem 1.5rem;\n    border-radius: 4px;\n    border-left: 4px solid;\n    gap: 1rem;\n\n    &--info {\n        background-color: #ede7f6;\n        border-left-color: #673ab7;\n        color: #4a148c;\n    }\n\n    &--warning {\n        background-color: #fff3e0;\n        border-left-color: #ff9800;\n        color: #e65100;\n    }\n\n    &--success {\n        background-color: #e8f5e9;\n        border-left-color: #4caf50;\n        color: #1b5e20;\n    }\n\n    &--error {\n        background-color: #ffebee;\n        border-left-color: #f44336;\n        color: #b71c1c;\n    }\n}\n\n.alert-message__content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.alert-message__title {\n    font-weight: 600;\n    font-size: 1rem;\n    line-height: 1.5;\n}\n\n.alert-message__body {\n    font-size: 0.875rem;\n    line-height: 1.5;\n}\n\n.alert-message__actions {\n    margin-top: 0.5rem;\n\n    &:empty {\n        display: none;\n    }\n}\n\n.alert-message__dismiss {\n    background: none;\n    border: none;\n    font-size: 1.5rem;\n    line-height: 1;\n    cursor: pointer;\n    padding: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: currentColor;\n    opacity: 0.7;\n    transition: opacity 0.2s;\n    flex-shrink: 0;\n\n    &:hover {\n        opacity: 1;\n    }\n\n    &:focus {\n        outline: 2px solid currentColor;\n        outline-offset: 2px;\n        border-radius: 2px;\n    }\n}","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"],"version":3}

package/components/xplor-assistant.d.ts

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