@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 3.3 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{g as KolCardWcTag}from"./component-names.js";import{h as watchString,w as watchValidator,s as setState}from"./common.js";import{v as validateLabel}from"./label.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{h as handleCancelOverlay}from"./tooltip-open-tracking.js";const validateWidth=(a,t,e)=>{watchString(a,"_width",t,Object.assign({defaultValue:"100%"},e))},DialogVariantPropTypeOptions=["blank","card"],validateDialogVariant=(a,t)=>{watchValidator(a,"_variant",a=>"string"==typeof a&&DialogVariantPropTypeOptions.includes(a),new Set(DialogVariantPropTypeOptions),t)},KolDialogWc$1=proxyCustomElement(class extends HTMLElement{constructor(a){super(),!1!==a&&this.__registerHost(),this.on={onClose:async()=>{await this.closeModal()}},this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var a,t;null===(t=null===(a=this.state._on)||void 0===a?void 0:a.onClose)||void 0===t||t.call(a),this.host&&dispatchDomEvent(this.host,KolEvent.close)}async openModal(){var a;null===(a=this.refDialog)||void 0===a||a.showModal()}async closeModal(){var a,t;null===(t=null===(a=this.refDialog)||void 0===a?void 0:a.close)||void 0===t||t.call(a)}render(){return h("dialog",{key:"288b2934310b2d34013f55e0f4636263e2be22aa","aria-label":this.state._label,class:clsx("kol-dialog","kol-modal",{"kol-dialog__blank":"blank"===this.state._variant,"kol-dialog__card":"card"===this.state._variant,"kol-modal__blank":"blank"===this.state._variant,"kol-modal__card":"card"===this.state._variant}),onCancel:handleCancelOverlay,onClose:this.handleNativeCloseEvent.bind(this),ref:a=>{this.refDialog=a},style:{width:this.state._width}},"blank"===this.state._variant&&h("slot",{key:"08ea19cdd17c7dcd6fcdb58b1d083665268285a8"}),"card"===this.state._variant&&h(KolCardWcTag,{key:"2801d5a45ea0e99406b1710dbfa76c320970ed0d",_label:this.state._label,_hasCloser:!0,_on:this.on},h("slot",{key:"447c1819769635b6b8c7891d252da2ac9b9ece36"})))}validateLabel(a){validateLabel(this,a,{required:!0})}validateOn(a){if("object"==typeof a&&null!==a){const t={};"function"!=typeof a.onClose&&!0!==a.onClose||(t.onClose=a.onClose),setState(this,"_on",t)}}validateWidth(a){validateWidth(this,a)}validateVariant(a){validateDialogVariant(this,a)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return this}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}},[260,"kol-dialog-wc",{_label:[1],_on:[16],_width:[1],_variant:[1],state:[32],openModal:[64],closeModal:[64]},void 0,{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-dialog-wc"].forEach(a=>{if("kol-dialog-wc"===a)customElements.get(a)||customElements.define(a,KolDialogWc$1)})}const KolDialogWc=KolDialogWc$1,defineCustomElement=defineCustomElement$1;export{KolDialogWc,defineCustomElement};