123456 |
- /*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
- */
- import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-8ece2564.js";import{g as getSlotted,t as toAriaBoolean,a as getElementDir}from"./dom-da697a3f.js";import{H as Heading}from"./Heading-8d613e81.js";import{c as connectConditionalSlotComponent,d as disconnectConditionalSlotComponent}from"./conditionalSlot-203be745.js";import{u as updateHostInteraction}from"./interactive-cb5bf285.js";import{g as guid}from"./guid-b4461004.js";import"./observers-b198f831.js";var CSS$1={article:"article",content:"content",headerContainer:"header-container",icon:"icon",statusIcon:"status-icon",toggle:"toggle",toggleIcon:"toggle-icon",title:"title",heading:"heading",header:"header",button:"button",summary:"summary",controlContainer:"control-container",valid:"valid",invalid:"invalid",loading:"loading"};var TEXT$1={collapse:"Collapse",expand:"Expand",loading:"Loading",options:"Options"};var SLOTS={icon:"icon",control:"control",headerMenuActions:"header-menu-actions"};var ICONS$1={opened:"chevron-up",closed:"chevron-down",valid:"check-circle",invalid:"exclamation-mark-triangle",refresh:"refresh"};var HEADING_LEVEL=4;var blockCss='@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-direction:column;flex-direction:column;border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);padding:0px;-webkit-transition-property:margin;transition-property:margin;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);-ms-flex-preferred-size:auto;flex-basis:auto}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.header{margin:0px;display:-ms-flexbox;display:flex;-ms-flex-line-pack:justify;align-content:space-between;-ms-flex-align:center;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{-ms-flex:1 1 auto;flex:1 1 auto;padding:0.5rem}h1.heading{font-size:var(--calcite-font-size-2);line-height:1.5rem}h2.heading{font-size:var(--calcite-font-size-1);line-height:1.5rem}h3.heading{font-size:var(--calcite-font-size-0);line-height:1.25rem}h4.heading,h5.heading{font-size:var(--calcite-font-size--1);line-height:1rem}.header{-ms-flex-pack:start;justify-content:flex-start;padding:0px}.header,.toggle{grid-area:header}.header-container{display:grid;-ms-flex-align:stretch;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:"handle header control menu";grid-column:header-start/menu-end;grid-row:1/2}.toggle{margin:0px;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;border-style:none;padding:0px;font-family:inherit;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;text-align:initial;background-color:transparent}.toggle:hover{background-color:var(--calcite-ui-foreground-2)}.toggle:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0px;padding:0.75rem}.header .title .heading{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-ui-text-2);-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}.summary{margin-top:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);color:var(--calcite-ui-text-3);word-wrap:break-word;word-break:break-word}.icon{-webkit-margin-start:0.75rem;margin-inline-start:0.75rem;-webkit-margin-end:0px;margin-inline-end:0px;margin-block:0.75rem}.status-icon.valid{color:var(--calcite-ui-success)}.status-icon.invalid{color:var(--calcite-ui-danger)}.status-icon.loading{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.toggle-icon{margin-top:0.75rem;margin-bottom:0.75rem;-ms-flex-item-align:center;align-self:center;justify-self:end;color:var(--calcite-ui-text-3);-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-margin-end:1rem;margin-inline-end:1rem;-webkit-margin-start:auto;margin-inline-start:auto}.toggle:hover .toggle-icon{color:var(--calcite-ui-text-1)}.content{position:relative}@keyframes in{0%{opacity:0}100%{opacity:1}}.content{-webkit-animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem}.control-container{margin:0px;display:-ms-flexbox;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}:host([open]){margin-top:0.5rem;margin-bottom:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-ui-text-1)}';var Block=function(){function t(t){var e=this;registerInstance(this,t);this.calciteBlockToggle=createEvent(this,"calciteBlockToggle",7);this.collapsible=false;this.disabled=false;this.dragHandle=false;this.intlCollapse=TEXT$1.collapse;this.intlExpand=TEXT$1.expand;this.intlLoading=TEXT$1.loading;this.intlOptions=TEXT$1.options;this.loading=false;this.open=false;this.guid=guid();this.onHeaderClick=function(){e.open=!e.open;e.calciteBlockToggle.emit()}}t.prototype.componentDidRender=function(){updateHostInteraction(this)};t.prototype.connectedCallback=function(){connectConditionalSlotComponent(this)};t.prototype.disconnectedCallback=function(){disconnectConditionalSlotComponent(this)};t.prototype.renderScrim=function(){var t=this.loading;var e=h("slot",null);return[t?h("calcite-scrim",{loading:t}):null,e]};t.prototype.renderIcon=function(){var t;var e=this,i=e.el,a=e.status;var n=this.loading&&!this.open;var o=n?ICONS$1.refresh:ICONS$1[a];var r=getSlotted(i,SLOTS.icon)||o;var l=!o?h("slot",{key:"icon-slot",name:SLOTS.icon}):h("calcite-icon",{class:(t={},t[CSS$1.statusIcon]=true,t[CSS$1.valid]=a=="valid",t[CSS$1.invalid]=a=="invalid",t[CSS$1.loading]=n,t),icon:o,scale:"m"});return r?h("div",{class:CSS$1.icon},l):null};t.prototype.renderTitle=function(){var t=this,e=t.heading,i=t.headingLevel,a=t.summary;return e||a?h("div",{class:CSS$1.title},h(Heading,{class:CSS$1.heading,level:i||HEADING_LEVEL},e),a?h("div",{class:CSS$1.summary},a):null):null};t.prototype.render=function(){var t;var e=this,i=e.collapsible,a=e.el,n=e.intlCollapse,o=e.intlExpand,r=e.loading,l=e.open,c=e.intlLoading;var s=l?n||TEXT$1.collapse:o||TEXT$1.expand;var m=h("header",{class:CSS$1.header},this.renderIcon(),this.renderTitle());var d=!!getSlotted(a,SLOTS.control);var g=!!getSlotted(a,SLOTS.headerMenuActions);var p=l?ICONS$1.opened:ICONS$1.closed;var u=this.guid;var f="".concat(u,"-region");var b="".concat(u,"-button");var v=h("div",{class:CSS$1.headerContainer},this.dragHandle?h("calcite-handle",null):null,i?h("button",{"aria-controls":f,"aria-expanded":i?toAriaBoolean(l):null,"aria-label":s,class:CSS$1.toggle,id:b,onClick:this.onHeaderClick,title:s},m,!d&&!g?h("calcite-icon",{"aria-hidden":"true",class:CSS$1.toggleIcon,icon:p,scale:"s"}):null):m,r?h("calcite-loader",{inline:true,"is-active":true,label:c}):d?h("div",{class:CSS$1.controlContainer},h("slot",{name:SLOTS.control})):null,g?h("calcite-action-menu",{label:this.intlOptions||TEXT$1.options},h("slot",{name:SLOTS.headerMenuActions})):null);return h(Host,null,h("article",{"aria-busy":toAriaBoolean(r),class:(t={},t[CSS$1.article]=true,t)},v,h("section",{"aria-expanded":toAriaBoolean(l),"aria-labelledby":b,class:CSS$1.content,hidden:!l,id:f},this.renderScrim())))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();Block.style=blockCss;var CSS={content:"content",invalid:"invalid",toggle:"toggle",toggleSwitch:"toggle--switch",toggleSwitchContent:"toggle--switch__content",toggleSwitchText:"toggle--switch__text",sectionHeader:"section-header",sectionHeaderText:"section-header__text",statusIcon:"status-icon",valid:"valid"};var TEXT={collapse:"Collapse",expand:"Expand"};var ICONS={menuOpen:"chevron-down",menuClosedLeft:"chevron-left",menuClosedRight:"chevron-right",valid:"check-circle",invalid:"exclamation-mark-triangle"};var blockSectionCss="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}:host([open]){border-width:0px;border-bottom-width:1px;border-style:solid;border-bottom-color:var(--calcite-ui-border-3)}:host(:last-child){border-bottom-width:0px}.toggle{width:100%;border-width:0px;background-color:transparent;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}.toggle--switch,.section-header{margin-left:0px;margin-right:0px;margin-top:0.25rem;margin-bottom:0.25rem;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center;padding-left:0px;padding-right:0px;padding-top:0.5rem;padding-bottom:0.5rem;font-size:var(--calcite-font-size--1);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.toggle--switch:focus,.section-header:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.toggle--switch:hover,.section-header:hover{color:var(--calcite-ui-text-1)}.section-header .status-icon{-ms-flex-item-align:end;align-self:flex-end}.section-header__text{margin-left:0.75rem;margin-right:0.75rem;margin-top:0px;margin-bottom:0px;-ms-flex:1 1 auto;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle--switch calcite-switch{pointer-events:none;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.toggle--switch .status-icon{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.toggle--switch__content{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:center;align-items:center}.status-icon.valid{color:var(--calcite-ui-success)}.status-icon.invalid{color:var(--calcite-ui-danger)}";var BlockSection=function(){function t(t){var e=this;registerInstance(this,t);this.calciteBlockSectionToggle=createEvent(this,"calciteBlockSectionToggle",7);this.open=false;this.toggleDisplay="button";this.guid=guid();this.handleHeaderKeyDown=function(t){if(t.key===" "||t.key==="Enter"){e.toggleSection();t.preventDefault();t.stopPropagation()}};this.toggleSection=function(){e.open=!e.open;e.calciteBlockSectionToggle.emit()}}t.prototype.renderStatusIcon=function(){var t;var e;var i=this.status;var a=(e=ICONS[i])!==null&&e!==void 0?e:false;var n=(t={},t[CSS.statusIcon]=true,t[CSS.valid]=i=="valid",t[CSS.invalid]=i=="invalid",t);return!!a?h("calcite-icon",{class:n,icon:a,scale:"s"}):null};t.prototype.render=function(){var t,e;var i=this,a=i.el,n=i.intlCollapse,o=i.intlExpand,r=i.open,l=i.text,c=i.toggleDisplay;var s=getElementDir(a);var m=r?ICONS.menuOpen:s==="rtl"?ICONS.menuClosedLeft:ICONS.menuClosedRight;var d=r?n||TEXT.collapse:o||TEXT.expand;var g=this.guid;var p="".concat(g,"-region");var u="".concat(g,"-button");var f=c==="switch"?h("div",{"aria-controls":p,"aria-label":d,class:(t={},t[CSS.toggle]=true,t[CSS.toggleSwitch]=true,t),id:u,onClick:this.toggleSection,onKeyDown:this.handleHeaderKeyDown,tabIndex:0,title:d},h("div",{class:CSS.toggleSwitchContent},h("span",{class:CSS.toggleSwitchText},l)),h("calcite-switch",{checked:r,label:d,scale:"s",tabIndex:-1}),this.renderStatusIcon()):h("button",{"aria-controls":p,"aria-label":d,class:(e={},e[CSS.sectionHeader]=true,e[CSS.toggle]=true,e),id:u,name:d,onClick:this.toggleSection},h("calcite-icon",{icon:m,scale:"s"}),h("span",{class:CSS.sectionHeaderText},l),this.renderStatusIcon());return h(Host,null,f,h("section",{"aria-expanded":toAriaBoolean(r),"aria-labelledby":u,class:CSS.content,hidden:!r,id:p},h("slot",null)))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();BlockSection.style=blockSectionCss;export{Block as calcite_block,BlockSection as calcite_block_section};
|