FileMaster

Edit File: sc-alert2.js

import{proxyCustomElement,HTMLElement,createEvent,h,Host}from"@stencil/core/internal/client";import{i as isRtl}from"./page-align.js";import{d as defineCustomElement$1}from"./sc-icon2.js";const scAlertCss=":host{display:block}[hidden]{display:none !important}::slotted(*:not(:first-child)){margin-top:0.5rem;margin-bottom:0}::slotted(ul){line-height:1.4em;list-style-type:disc;margin:0;padding:0;padding-left:20px}.alert{font-family:var(--sc-input-font-family);font-weight:var(--sc-font-weight-normal);font-size:var(--sc-button-font-size-medium);line-height:var(--sc-line-height-dense);border-radius:var(--sc-alert-border-radius, var(--sc-border-radius-medium));padding:var(--sc-spacing-large);margin-bottom:var(--sc-spacing-large);display:flex;align-items:flex-start;border:var(--sc-alert-border, var(--sc-input-border));border-top:solid var(--sc-alert-border-width, 3px);color:var(--sc-alert-color, var(--sc-input-label-color));background:var(--sc-alert-background-color, var(--sc-color-white));box-shadow:var(--sc-shadow-small)}.alert__text{flex:1}.alert.alert--primary{border-top-color:var(--sc-alert-primary-border-color, var(--sc-color-primary-500))}.alert.alert--primary a{color:var(--sc-color-primary-900)}.alert.alert--primary .alert__title{color:var(--sc-alert-title-color, var(--sc-color-gray-800))}.alert.alert--primary .alert__icon{color:var(--sc-alert-primary-icon-color, var(--sc-color-primary-500))}.alert.alert--info{border-top-color:var(--sc-alert-info-border-color, var(--sc-color-info-500))}.alert.alert--info a{color:var(--sc-color-info-900)}.alert.alert--info .alert__title{color:var(--sc-alert-title-color, var(--sc-color-gray-800))}.alert.alert--info .alert__icon{color:var(--sc-alert-info-icon-color, var(--sc-color-info-500))}.alert.alert--danger{border-top-color:var(--sc-alert-danger-border-color, var(--sc-color-danger-500))}.alert.alert--danger a{color:var(--sc-color-danger-900)}.alert.alert--danger .alert__title{color:var(--sc-alert-title-color, var(--sc-color-gray-800))}.alert.alert--danger .alert__icon{color:var(--sc-alert-danger-icon-color, var(--sc-color-danger-500))}.alert.alert--warning{border-top-color:var(--sc-alert-warning-border-color, var(--sc-color-warning-500))}.alert.alert--warning a{color:var(--sc-color-warning-900)}.alert.alert--warning .alert__title{color:var(--sc-alert-title-color, var(--sc-color-gray-800))}.alert.alert--warning .alert__icon{color:var(--sc-alert-warning-icon-color, var(--sc-color-warning-500))}.alert.alert--success{border-top-color:var(--sc-alert-success-border-color, var(--sc-color-success-500))}.alert.alert--success a{color:var(--sc-color-success-900)}.alert.alert--success .alert__title{color:var(--sc-alert-title-color, var(--sc-color-gray-800))}.alert.alert--success .alert__icon{color:var(--sc-alert-success-icon-color, var(--sc-color-success-500))}.alert__icon{flex:1;flex:0 0 auto;display:flex;align-items:center;font-size:var(--sc-font-size-large);padding-inline-end:var(--sc-spacing-medium)}.alert__title{font-weight:var(--sc-font-weight-semibold)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert__close{transition:background-color var(--sc-transition-fast) ease;display:inline-flex;border-radius:var(--sc-border-radius-small);padding:var(--sc-spacing-x-small);margin-left:auto;cursor:pointer}.alert__close svg{width:1em;height:1em}.alert--is-rtl{text-align:right}.alert--is-rtl.alert-close{margin-right:auto;margin-left:unset}.alert--is-rtl ::slotted(ul){margin:0;padding:0;padding-right:20px}",ScAlertStyle0=scAlertCss,ScAlert=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.scHide=createEvent(this,"scHide",7),this.scShow=createEvent(this,"scShow",7),this.open=!1,this.title=void 0,this.closable=!1,this.type="primary",this.duration=1/0,this.scrollOnOpen=void 0,this.scrollMargin="0px",this.noIcon=void 0,this.autoHideTimeout=void 0}async show(){this.open||(this.open=!0)}async hide(){this.open&&(this.open=!1)}restartAutoHide(){clearTimeout(this.autoHideTimeout),this.open&&this.duration<1/0&&(this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration))}handleMouseMove(){this.restartAutoHide()}handleCloseClick(){this.hide()}handleOpenChange(){this.open?this.scShow.emit():this.scHide.emit(),this.open&&this.scrollOnOpen&&this.el.scrollIntoView({behavior:"smooth"})}componentDidLoad(){this.handleOpenChange()}iconName(){switch(this.type){case"danger":return"alert-circle";case"success":return"check-circle";case"warning":return"alert-triangle";default:return"info"}}icon(){return h("sc-icon",{name:this.iconName()})}render(){return h(Host,{key:"9e793f9eda3f20c87381a95a376ce94c2cc5f5c9",style:{"scroll-margin-top":this.scrollMargin}},h("div",{key:"897ce58417120b1223d2eaaf67984496dfc7d600",class:{alert:!0,"alert--primary":"primary"===this.type,"alert--success":"success"===this.type,"alert--info":"info"===this.type,"alert--warning":"warning"===this.type,"alert--danger":"danger"===this.type,"alert--is-rtl":isRtl()},part:"base",role:"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true",hidden:!this.open,onMouseMove:()=>this.handleMouseMove()},h("div",{key:"e716644cfcb76f53dfbf549cecea0ec183e18996",class:"alert__icon",part:"icon"},h("slot",{key:"8b0a17621dbe0a2df9a82d8b94e67826d649169e",name:"icon"},this.icon())),h("div",{key:"5dff851009f1db23ef254ad430d022a314f061be",class:"alert__text",part:"text"},h("div",{key:"d03ba5af5d9c56d95aa99e64313881793297cfaf",class:"alert__title",part:"title"},h("slot",{key:"165a81c89d26319d948924657d63008dd7b42452",name:"title"},this.title)),h("div",{key:"fdaeeba96dff1c4e01b7beb5d9017d60bb485a47",class:"alert__message",part:"message"},h("slot",{key:"602f3fb3d4fb8b846c4f162b69f9aad429a75475"}))),this.closable&&h("span",{key:"d7fc47873e24911b8cc569f281b1bb7cd01e089b",part:"close",class:"alert__close",onClick:()=>this.handleCloseClick()},h("span",{key:"f5123e8cff7fbcbee978ae7d1ec6cf363eaf9dc5",class:"sr-only"},"Dismiss"),h("svg",{key:"dbc9b094541f00d32af2b7b2f8117aba54e9e0ff",class:"h-5 w-5","x-description":"Heroicon name: solid/x",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},h("path",{key:"21999c629fe6c5b29cd4bb76fb6fe94736080dac","fill-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","clip-rule":"evenodd"})))))}get el(){return this}static get watchers(){return{open:["handleOpenChange"]}}static get style(){return ScAlertStyle0}},[1,"sc-alert",{open:[1540],title:[1],closable:[516],type:[513],duration:[2],scrollOnOpen:[4,"scroll-on-open"],scrollMargin:[1,"scroll-margin"],noIcon:[4,"no-icon"],autoHideTimeout:[32],show:[64],hide:[64]},void 0,{open:["handleOpenChange"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-alert","sc-icon"].forEach((e=>{switch(e){case"sc-alert":customElements.get(e)||customElements.define(e,ScAlert);break;case"sc-icon":customElements.get(e)||defineCustomElement$1()}}))}export{ScAlert as S,defineCustomElement as d};

Back