UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

5 lines (4 loc) 7.21 kB
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details. v3.2.1 */ import{d as t}from"./JUI753HR.js";import{a as v,b as B}from"./BVJFCLMH.js";import{a as $}from"./YXZ62PQO.js";import{d as y}from"./CKRTMNFR.js";import{b as h}from"./5RDOSP2E.js";import{e as k}from"./3ADX47DD.js";import{d as w}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as u,F as m,R as g,c as p,d,h as b,q as l}from"./BJZTU5BQ.js";var A={backButton:"back-button"},C={backLeft:"chevron-left",backRight:"chevron-right"},o={actionBar:"action-bar",alerts:"alerts",contentTop:"content-top",contentBottom:"content-bottom",headerActionsStart:"header-actions-start",headerActionsEnd:"header-actions-end",headerMenuActions:"header-menu-actions",headerContent:"header-content",fab:"fab",footer:"footer",footerActions:"footer-actions",footerEnd:"footer-end",footerStart:"footer-start"},L=p`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:none;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([selected]){display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.back-button{border-width:0px;border-style:solid;border-inline-end-width:1px;border-color:var(--calcite-flow-border-color, var(--calcite-color-border-3))}calcite-panel{--calcite-panel-background-color: var(--calcite-flow-background-color);--calcite-panel-border-color: var(--calcite-flow-border-color, var(--calcite-flow-item-header-border-block-end));--calcite-panel-corner-radius: var(--calcite-flow-corner-radius);--calcite-panel-description-text-color: var(--calcite-flow-description-text-color);--calcite-panel-footer-background-color: var(--calcite-flow-footer-background-color);--calcite-panel-footer-space: var(--calcite-flow-footer-space, var(--calcite-flow-item-footer-padding));--calcite-panel-header-action-background-color-hover: var(--calcite-flow-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-flow-header-action-background-color-press);--calcite-panel-header-action-background-color: var(--calcite-flow-header-action-background-color);--calcite-panel-header-action-indicator-color: var(--calcite-flow-header-action-indicator-color);--calcite-panel-header-action-text-color-press: var(--calcite-flow-header-action-text-color-press);--calcite-panel-header-action-text-color: var(--calcite-flow-header-action-text-color);--calcite-panel-header-background-color: var(--calcite-flow-header-background-color);--calcite-panel-header-content-space: var(--calcite-flow-header-content-space);--calcite-panel-heading-text-color: var(--calcite-flow-heading-text-color);--calcite-panel-space: var(--calcite-flow-space)}:host([hidden]){display:none}[hidden]{display:none}`,f=class extends u{constructor(){super(...arguments),this.messages=y(),this.closable=!1,this.closed=!1,this.collapseDirection="down",this.collapsed=!1,this.collapsible=!1,this.disabled=!1,this.loading=!1,this.menuOpen=!1,this.overlayPositioning="absolute",this.scale="m",this.selected=!1,this.showBackButton=!1,this.calciteFlowItemBack=l(),this.calciteFlowItemClose=l({cancelable:!1}),this.calciteFlowItemScroll=l({cancelable:!1}),this.calciteFlowItemToggle=l({cancelable:!1}),this.calciteInternalFlowItemChange=l({cancelable:!1})}static{this.properties={beforeBack:[0,{},{attribute:!1}],beforeClose:[0,{},{attribute:!1}],closable:[7,{},{reflect:!0,type:Boolean}],closed:[7,{},{reflect:!0,type:Boolean}],collapseDirection:1,collapsed:[7,{},{reflect:!0,type:Boolean}],collapsible:[7,{},{reflect:!0,type:Boolean}],description:1,disabled:[7,{},{reflect:!0,type:Boolean}],heading:1,headingLevel:[11,{},{type:Number,reflect:!0}],loading:[7,{},{reflect:!0,type:Boolean}],menuOpen:[7,{},{reflect:!0,type:Boolean}],messageOverrides:[0,{},{attribute:!1}],overlayPositioning:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}],selected:[7,{},{reflect:!0,type:Boolean}],showBackButton:[5,{},{type:Boolean}]}}static{this.styles=L}async scrollContentTo(e){await this.containerEl?.scrollContentTo(e)}async setFocus(){await w(this);let{backButtonEl:e,containerEl:a}=this;if(e)return e.setFocus();if(a)return a.setFocus()}willUpdate(e){e.has("selected")&&(this.hasUpdated||this.selected!==!1)&&this.calciteInternalFlowItemChange.emit()}updated(){v(this)}handleInternalPanelScroll(e){e.target===this.containerEl&&(e.stopPropagation(),this.calciteFlowItemScroll.emit())}handleInternalPanelClose(e){e.target===this.containerEl&&(e.stopPropagation(),this.closed=!0,this.calciteFlowItemClose.emit())}handleInternalPanelToggle(e){e.target===this.containerEl&&(e.stopPropagation(),this.collapsed=e.target.collapsed,this.calciteFlowItemToggle.emit())}backButtonClick(){this.calciteFlowItemBack.emit()}setBackRef(e){this.backButtonEl=e}setContainerRef(e){this.containerEl=e}renderBackButton(){let{el:e}=this,a=k(e)==="rtl",{showBackButton:n,backButtonClick:s,messages:i}=this,c=i.back,r=a?C.backRight:C.backLeft;return n?$("flow-back-button",d`<calcite-action .ariaLabel=${c} class=${m(A.backButton)} .icon=${r} @click=${s} scale=s slot=header-actions-start .text=${c} title=${c??b} ${h(this.setBackRef)}></calcite-action>`):null}render(){let{collapsed:e,collapseDirection:a,collapsible:n,closable:s,closed:i,description:c,disabled:r,heading:I,headingLevel:x,loading:S,menuOpen:E,messages:P,overlayPositioning:F,beforeClose:T}=this;return B({disabled:r,children:d`<calcite-panel .beforeClose=${T} .closable=${s} .closed=${i} .collapseDirection=${a} .collapsed=${e} .collapsible=${n} .description=${c} .disabled=${r} .heading=${I} .headingLevel=${x} .loading=${S} .menuOpen=${E} .messageOverrides=${P} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${F} .scale=${this.scale} ${h(this.setContainerRef)}>${this.renderBackButton()}<slot name=${o.actionBar} slot=${t.actionBar}></slot><slot name=${o.alerts} slot=${t.alerts}></slot><slot name=${o.headerActionsStart} slot=${t.headerActionsStart}></slot><slot name=${o.headerActionsEnd} slot=${t.headerActionsEnd}></slot><slot name=${o.headerContent} slot=${t.headerContent}></slot><slot name=${o.headerMenuActions} slot=${t.headerMenuActions}></slot><slot name=${o.fab} slot=${t.fab}></slot><slot name=${o.contentTop} slot=${t.contentTop}></slot><slot name=${o.contentBottom} slot=${t.contentBottom}></slot><slot name=${o.footerStart} slot=${t.footerStart}></slot><slot name=${o.footer} slot=${t.footer}></slot><slot name=${o.footerEnd} slot=${t.footerEnd}></slot><slot name=${o.footerActions} slot=${t.footerActions}></slot><slot></slot></calcite-panel>`})}};g("calcite-flow-item",f);export{f as FlowItem};