@zywave/zui-bundle
Version:
ZUI, out of the box, provides ES modules with bare path modifiers (e.g. `import '@zywave/zui-foo-bar'`). This is great as that's the way browsers are _going_, but they aren't there quite yet. Tooling exists to help solve this problem like webpack or rollu
2 lines (1 loc) • 12.2 kB
JavaScript
import{i as t,n as e,Z as i,k as o,o as s}from"../internals/_9c1b2703.js";import"../internals/_3acd3140.js";const n=t`:host{display:block;background-color:var(--zui-gray-50)}:host .wrapper{width:100%;margin:0 auto;padding:15px;box-sizing:border-box}{:host .wrapper{padding:30px}}{:host .wrapper{padding:60px}}:host .title-wrap{position:relative;display:flex;min-height:44px;justify-content:center;align-items:center;margin-bottom:15px}:host .title-wrap .title{align-self:center;font-size:1rem;font-weight:300;color:var(--zui-gray-800);transition:width .1s ease-in-out}:host .title-wrap .close{--zui-button-color:transparent;--zui-button-hover-color:var(--zui-gray-50);--zui-button-text-color:var(--zui-gray-800);position:absolute;right:-6px;z-index:1}:host .title-wrap .close ::slotted(button){display:flex;width:44px;height:44px;justify-content:center;align-items:center;padding:0;background-color:rgba(0,0,0,0);border:0;cursor:pointer;color:var(--zui-gray-800);transition:color 250ms ease-in-out}:host .title-wrap .close ::slotted(button:hover){color:var(--zui-gray-700)}:host .title-wrap .close ::slotted(button:focus){outline:0}{:host .title-wrap{margin-bottom:30px}}:host .indicator-card{min-height:250px}:host([orientation=vertical]) .title-wrap{justify-content:flex-start;margin-bottom:10px}:host([orientation=vertical]) .title-wrap .title{position:relative;display:flex;width:100%;margin-bottom:0}:host([orientation=vertical]) .title-wrap .title::before{display:block;content:"";width:calc(24px + .9375rem);box-sizing:border-box}{:host([orientation=vertical]) .title-wrap .title::before{min-width:200px}}:host([orientation=vertical]) .indicator-card{display:flex}`;var r=function(t,e,i,o){var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class a extends i{constructor(){super(),this.step=0,this.orientation="horizontal",this.stepFlowIndicator=void 0,this.stepFlowContent=void 0,this.addEventListener("nextstep",(()=>{this._setStep(this.step+1)})),this.addEventListener("previousstep",(()=>{this._setStep(this.step-1)})),this.addEventListener("setstep",this._setStepEvent)}firstUpdated(){this.stepFlowIndicator=this.querySelector("zui-step-flow-indicator")}static get styles(){return[super.styles,n]}render(){return o`<div class="wrapper"><div class="title-wrap"><div class="title"><slot name="title"></slot></div><div class="close"><slot name="close"></slot></div></div><div class="indicator-card"><slot></slot></div></div>`}updated(t){super.update(t);const e=this.step,i=Array.from(this.getElementsByTagName("zui-step-flow-content-item")),o=i.length,s=i.some((t=>t.hasAttribute("intro"))),n=i.some((t=>t.hasAttribute("end")));if(s&&0===e||n&&e===o-1?this._setIndicatorHidden(!0):this._setIndicatorHidden(!1),this._hasValidStepNumber(e)&&(this._setIndicatorStep(s?e-1:e),this._setContentStep(e),this._setStep(e)),t.has("orientation")){const t=this.querySelector("zui-step-flow-indicator");t&&(this.orientation&&"vertical"===this.orientation?t.setAttribute("orientation","vertical"):t.removeAttribute("orientation"))}}_hasValidStepNumber(t){const e=Array.from(this.getElementsByTagName("zui-step-flow-content-item")).length;return t>=0&&t<e}_setStepEvent(t){let e=t.detail;Array.from(this.getElementsByTagName("zui-step-flow-content-item")).some((t=>t.hasAttribute("intro")))&&(e+=1),e!==this.step&&(this.step=e,this._setStep(e))}_setStep(t){this._hasValidStepNumber(t)&&(this.step=t)}_setIndicatorStep(t){this.stepFlowIndicator||(this.stepFlowIndicator=this._getElement("zui-step-flow-indicator")),this.stepFlowIndicator.step=t}_setContentStep(t){this.stepFlowContent||(this.stepFlowContent=this._getElement("zui-step-flow-content")),this.stepFlowContent.step=t}_setIndicatorHidden(t){this.stepFlowIndicator||(this.stepFlowIndicator=this._getElement("zui-step-flow-indicator")),this.stepFlowIndicator.hide!==t&&(this.stepFlowIndicator.hide=t)}_getElement(t){const e=this.getElementsByTagName(t);return e&&e.length>0?e[0]:{}}}r([e({type:Number,reflect:!0})],a.prototype,"step",void 0),r([e({type:String})],a.prototype,"orientation",void 0),window.customElements.define("zui-step-flow",a);const l=t`:host{position:relative;display:flex;flex-direction:row;flex-grow:1;justify-content:space-between;margin-bottom:15px;font-size:0;color:transparent;animation:indicator 250ms ease-in-out forwards;transition:width .1s ease-in-out,font-size .1s ease-in-out,color 50ms ease-in-out,margin .1s ease-in-out}{:host{margin-bottom:30px}}{:host{justify-content:space-around;box-shadow:none;font-size:inherit;color:inherit}}:host .sub-text{display:block;font-size:0;font-style:italic;color:var(--zui-gray-300)}{:host .sub-text{font-size:.75rem}}:host ::slotted(zui-step-flow-indicator-item:first-of-type)::before{content:none}:host ::slotted(zui-step-flow-indicator-item:last-of-type)::after{content:none}:host(.hide){display:none}:host([orientation=vertical]){width:39px;flex-direction:column;flex-grow:0;justify-content:flex-start;margin-top:30px;margin-bottom:0}{:host([orientation=vertical]){width:200px}}`;var c=function(t,e,i,o){var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class d extends i{constructor(){super(...arguments),this.step=0,this.hide=!1,this.orientation="horizontal",this.#t=void 0}#t;firstUpdated(){this._setupChildren()}static get styles(){return[super.styles,l]}render(){return this.hide?this.classList.add("hide"):this.classList.remove("hide"),o`<slot id="indicator-items"></slot>`}updated(t){super.update(t);const e=this._getIndicatorItems();for(let t=0;t<e.length;t++){const i=e[t];t===this.step?i.setAttribute("active",""):i.removeAttribute("active")}if(t.has("orientation"))for(let t=0;t<e.length;t++){const i=e[t];this.orientation&&"vertical"===this.orientation?i.setAttribute("orientation","vertical"):i.removeAttribute("orientation")}}_setupChildren(){const t=this._getIndicatorItems();for(let e=0;e<t.length;e++){const i=t[e];i.index=e,i.addEventListener("click",this._onItemClick.bind(this))}}_onItemClick(t){const e=t.target;this.dispatchEvent(new CustomEvent("setstep",{bubbles:!0,composed:!0,detail:e.index}))}_getIndicatorItems(){const t=this.querySelectorAll("zui-step-flow-indicator-item");return this.#t=t||[],this.#t}}c([e({type:Number})],d.prototype,"step",void 0),c([e({type:Boolean})],d.prototype,"hide",void 0),c([e({type:String})],d.prototype,"orientation",void 0),window.customElements.define("zui-step-flow-indicator",d);const p=t`:host{position:relative;display:flex;flex:1 1 0;padding-bottom:0;cursor:not-allowed;pointer-events:none}:host::after,:host::before{position:absolute;top:7.5px;right:50%;display:block;content:"";width:50%;height:1px;background-color:var(--zui-gray-200)}{:host::after,:host::before{top:10px}}{:host::after,:host::before{top:12px}}:host::after{right:unset;right:auto;left:50%}:host .step{display:flex;flex-direction:column;flex:1 0 0;justify-content:flex-start;align-items:center;text-align:center}:host .indicator{display:flex;width:15px;height:15px;z-index:1;justify-content:center;align-items:center;background-color:#f4f4f4;border:2px solid var(--zui-gray-300);border-radius:100%;transition:border-top-color .15s linear,border-right-color .15s linear .1s,border-bottom-color .15s linear .2s,border-left-color .15s linear .3s}{:host .indicator{width:20px;height:20px;margin-bottom:10px}}:host .indicator .icon{display:none}:host .indicator .icon zui-icon{width:14px;height:14px;fill:#fff}{:host .indicator .icon zui-icon{width:16px;height:16px}}:host .label{width:0;min-width:100%}:host([complete]){cursor:pointer;pointer-events:auto}:host([complete]) .indicator{background-color:var(--zui-step-flow-indicator-item-complete-color,var(--zui-gray-800));border-color:var(--zui-step-flow-indicator-item-complete-color,var(--zui-gray-800))}:host([complete]) .indicator .icon{display:flex;justify-content:center;align-items:center}:host([active]){font-weight:600}:host([active]) .indicator{border-color:var(--zui-step-flow-indicator-item-active-color,var(--zui-gray-800))}:host([disabled]){cursor:not-allowed;color:var(--zui-gray-300);pointer-events:none}:host([disabled]) .indicator{border-color:var(--zui-gray-100)}:host([orientation=vertical]){display:block;flex:0 1 auto;padding-bottom:30px}:host([orientation=vertical])::after,:host([orientation=vertical])::before{top:0;left:9px;width:2px;height:calc(50% - 8px)}{:host([orientation=vertical])::after,:host([orientation=vertical])::before{left:11.5px;height:calc(50% - 3px)}}:host([orientation=vertical])::after{top:calc(50% - 8px);height:calc(50% + 8px)}{:host([orientation=vertical])::after{top:calc(50% - 3px);height:calc(50% + 3px)}}:host([orientation=vertical]) .step{flex-direction:row;align-items:flex-start;text-align:left}:host([orientation=vertical]) .indicator{flex-shrink:0;margin-right:10px;margin-bottom:0}:host([orientation=vertical]) .label{width:auto;min-width:0;margin-right:20px;line-height:1.5rem}`;var h=function(t,e,i,o){var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class m extends i{constructor(){super(...arguments),this.active=!1,this.complete=!1,this.orientation="horizontal",this.index=void 0}static get styles(){return[super.styles,p]}render(){return o`<div class="step"><div class="indicator"><div class="icon"><zui-icon icon="zui-check" class="small"></zui-icon></div></div><div class="label"><slot></slot></div></div>`}}h([e({type:Boolean})],m.prototype,"active",void 0),h([e({type:Boolean})],m.prototype,"complete",void 0),h([e({type:String})],m.prototype,"orientation",void 0),window.customElements.define("zui-step-flow-indicator-item",m);const u=t`:host{display:flex;flex-direction:column;flex-grow:1;justify-content:space-between;background-color:#fff;box-shadow:0 1px 1px 0 #999;padding:1.25rem;transition:.2s padding ease-in-out;box-sizing:border-box}{:host{padding:1.875rem}}::slotted(:not(.is-visible):not([slot=footer])){display:none}`;var f=function(t,e,i,o){var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class g extends i{constructor(){super(...arguments),this.step=0}static get styles(){return[super.styles,u]}updated(){this._slottedContentItems.find((t=>{t.classList.contains("is-visible")&&t.classList.remove("is-visible")})),this._slottedContentItems[this.step].classList.add("is-visible")}render(){return o`<slot></slot><slot name="footer"></slot>`}}f([e({type:Number})],g.prototype,"step",void 0),f([s({slot:""})],g.prototype,"_slottedContentItems",void 0),window.customElements.define("zui-step-flow-content",g);const v=t`:host{display:flex;flex-direction:column;flex-grow:1}`;window.customElements.define("zui-step-flow-content-item",class extends i{static get styles(){return[super.styles,v]}render(){return o`<div><slot></slot></div>`}});window.customElements.define("zui-step-flow-footer",class extends i{static get styles(){return[super.styles,v]}render(){return o`<slot id="previous-button" name="previous"></slot><slot id="next-button" name="next"></slot><slot></slot>`}});