@esri/calcite-components 1.0.0-next.399 → 1.0.0-next.401
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/calcite/assets/date-picker/nls/bs.json +1 -1
- package/dist/calcite/assets/date-picker/nls/ca.json +1 -1
- package/dist/calcite/assets/date-picker/nls/cs.json +1 -1
- package/dist/calcite/assets/date-picker/nls/da.json +1 -1
- package/dist/calcite/assets/date-picker/nls/de.json +1 -1
- package/dist/calcite/assets/date-picker/nls/el.json +1 -1
- package/dist/calcite/assets/date-picker/nls/en-AU.json +1 -1
- package/dist/calcite/assets/date-picker/nls/es.json +1 -1
- package/dist/calcite/assets/date-picker/nls/et.json +1 -1
- package/dist/calcite/assets/date-picker/nls/fi.json +1 -1
- package/dist/calcite/assets/date-picker/nls/fr.json +1 -1
- package/dist/calcite/assets/date-picker/nls/hr.json +1 -1
- package/dist/calcite/assets/date-picker/nls/hu.json +1 -1
- package/dist/calcite/assets/date-picker/nls/it.json +1 -1
- package/dist/calcite/assets/date-picker/nls/lt.json +1 -1
- package/dist/calcite/assets/date-picker/nls/lv.json +1 -1
- package/dist/calcite/assets/date-picker/nls/mk.json +1 -1
- package/dist/calcite/assets/date-picker/nls/nb.json +1 -1
- package/dist/calcite/assets/date-picker/nls/nl.json +1 -1
- package/dist/calcite/assets/date-picker/nls/pl.json +1 -1
- package/dist/calcite/assets/date-picker/nls/ro.json +1 -1
- package/dist/calcite/assets/date-picker/nls/ru.json +1 -1
- package/dist/calcite/assets/date-picker/nls/sl.json +1 -1
- package/dist/calcite/assets/date-picker/nls/sr.json +1 -1
- package/dist/calcite/assets/date-picker/nls/sv.json +1 -1
- package/dist/calcite/assets/date-picker/nls/tr.json +1 -1
- package/dist/calcite/assets/date-picker/nls/uk.json +1 -1
- package/dist/calcite/assets/date-picker/nls/vi.json +1 -1
- package/dist/calcite/calcite.esm.js +1 -1
- package/dist/calcite/p-02219f56.system.entry.js +5 -0
- package/dist/calcite/p-233fae89.entry.js +5 -0
- package/dist/calcite/p-26aea1cb.system.js +1 -1
- package/dist/calcite/p-496d3b56.system.entry.js +5 -0
- package/dist/calcite/p-674bdae8.system.entry.js +5 -0
- package/dist/calcite/p-677592a9.system.entry.js +5 -0
- package/dist/calcite/p-779c6e3b.system.entry.js +5 -0
- package/dist/calcite/{p-a1a38c68.entry.js → p-95368cd1.entry.js} +1 -1
- package/dist/calcite/p-a5f8f3a1.entry.js +5 -0
- package/dist/calcite/p-ac33eb33.entry.js +5 -0
- package/dist/calcite/p-b9bfd3f8.entry.js +5 -0
- package/dist/cjs/calcite-accordion_2.cjs.entry.js +13 -4
- package/dist/cjs/calcite-block_2.cjs.entry.js +15 -7
- package/dist/cjs/calcite-popover_2.cjs.entry.js +1 -1
- package/dist/cjs/calcite-tooltip_2.cjs.entry.js +1 -1
- package/dist/cjs/calcite-tree_2.cjs.entry.js +4 -2
- package/dist/collection/components/accordion-item/accordion-item.js +13 -3
- package/dist/collection/components/block/block.js +7 -2
- package/dist/collection/components/block-section/block-section.js +12 -7
- package/dist/collection/components/date-picker/assets/date-picker/nls/bs.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/ca.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/cs.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/da.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/de.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/el.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/en-AU.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/es.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/et.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/fi.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/fr.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/hr.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/hu.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/it.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/lt.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/lv.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/mk.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/nb.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/nl.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/pl.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/ro.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/ru.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/sl.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/sr.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/sv.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/tr.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/uk.json +1 -1
- package/dist/collection/components/date-picker/assets/date-picker/nls/vi.json +1 -1
- package/dist/collection/components/popover/popover.css +5 -0
- package/dist/collection/components/tooltip/tooltip.css +5 -0
- package/dist/collection/components/tree/tree.js +4 -2
- package/dist/components/calcite-accordion-item.js +13 -3
- package/dist/components/calcite-block-section.js +10 -5
- package/dist/components/calcite-block.js +7 -2
- package/dist/components/calcite-tooltip.js +1 -1
- package/dist/components/calcite-tree.js +4 -2
- package/dist/components/popover.js +1 -1
- package/dist/custom-elements/index.js +32 -13
- package/dist/esm/calcite-accordion_2.entry.js +13 -4
- package/dist/esm/calcite-block_2.entry.js +15 -7
- package/dist/esm/calcite-popover_2.entry.js +1 -1
- package/dist/esm/calcite-tooltip_2.entry.js +1 -1
- package/dist/esm/calcite-tree_2.entry.js +4 -2
- package/dist/esm-es5/calcite-accordion_2.entry.js +1 -1
- package/dist/esm-es5/calcite-block_2.entry.js +1 -1
- package/dist/esm-es5/calcite-popover_2.entry.js +1 -1
- package/dist/esm-es5/calcite-tooltip_2.entry.js +1 -1
- package/dist/esm-es5/calcite-tree_2.entry.js +1 -1
- package/dist/extras/docs-json.json +1 -1
- package/dist/types/components/accordion-item/accordion-item.d.ts +1 -0
- package/dist/types/components/block/block.d.ts +1 -0
- package/dist/types/components/block-section/block-section.d.ts +1 -0
- package/hydrate/index.js +32 -13
- package/package.json +2 -2
- package/dist/calcite/p-0db51b2f.entry.js +0 -5
- package/dist/calcite/p-13cbacc6.system.entry.js +0 -5
- package/dist/calcite/p-240099ff.entry.js +0 -5
- package/dist/calcite/p-6eb1302b.entry.js +0 -5
- package/dist/calcite/p-7415264e.system.entry.js +0 -5
- package/dist/calcite/p-9aaeb1df.entry.js +0 -5
- package/dist/calcite/p-c3f5a7c2.system.entry.js +0 -5
- package/dist/calcite/p-d75351e1.system.entry.js +0 -5
- package/dist/calcite/p-e5e29b32.system.entry.js +0 -5
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
3
|
+
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
|
|
4
|
+
*/
|
|
5
|
+
import{r as t,c as e,h as i,H as a,g as n}from"./p-2e29554c.js";import{f as o,n as r,g as c,a as s,C as l,k as m}from"./p-8f3a3e4e.js";import{c as h,d}from"./p-ea510477.js";import"./p-8a63221d.js";import"./p-0a5d059d.js";var f;!function(t){t.Single="single",t.Multi="multi",t.Children="children",t.MultiChildren="multi-children",t.Ancestors="ancestors"}(f||(f={}));let p=class{constructor(i){t(this,i),this.calciteTreeSelect=e(this,"calciteTreeSelect",7),this.lines=!1,this.inputEnabled=!1,this.scale="m",this.selectionMode=f.Single}componentWillRender(){const t=this.el.parentElement.closest("calcite-tree");this.lines=t?t.lines:this.lines,this.scale=t?t.scale:this.scale,this.selectionMode=t?t.selectionMode:this.selectionMode,this.child=!!t}render(){return i(a,{"aria-multiselectable":this.child?void 0:(this.selectionMode===f.Multi||this.selectionMode===f.MultiChildren).toString(),role:this.child?void 0:"tree",tabIndex:this.getRootTabIndex()},i("slot",null))}onFocus(){if(!this.child){const t=this.el.querySelector("calcite-tree-item[selected]")||this.el.querySelector("calcite-tree-item");o(t)}}onFocusIn(t){(t.relatedTarget===this.el||!this.el.contains(t.relatedTarget))&&this.el.removeAttribute("tabindex")}onFocusOut(t){!this.el.contains(t.relatedTarget)&&(this.el.tabIndex=this.getRootTabIndex())}onClick(t){const e=t.target,i=r(e.querySelectorAll("calcite-tree-item"));if(this.child)return;if(this.child||(t.preventDefault(),t.stopPropagation()),this.selectionMode===f.Ancestors&&!this.child)return void this.updateAncestorTree(t);const a=t.detail.modifyCurrentSelection&&(this.selectionMode===f.Multi||this.selectionMode===f.MultiChildren),n=this.selectionMode===f.MultiChildren||this.selectionMode===f.Children,o=!a&&((this.selectionMode===f.Single||this.selectionMode===f.Multi)&&i.length<=0||this.selectionMode===f.Children||this.selectionMode===f.MultiChildren),c=this.selectionMode===f.Children||this.selectionMode===f.MultiChildren;if(!this.child){const s=[];null!==this.selectionMode&&(!e.hasChildren||e.hasChildren&&(this.selectionMode===f.Children||this.selectionMode===f.MultiChildren))&&s.push(e),n&&i.forEach((t=>{s.push(t)})),o&&r(this.el.querySelectorAll("calcite-tree-item[selected]")).forEach((t=>{s.includes(t)||(t.selected=!1)})),c&&!t.detail.forceToggle&&(e.expanded=!0),a&&window.getSelection().removeAllRanges(),s.forEach(a&&e.selected||n&&t.detail.forceToggle?t=>{t.selected=!1}:t=>{t.selected=!0})}this.calciteTreeSelect.emit({selected:r(this.el.querySelectorAll("calcite-tree-item")).filter((t=>t.selected))})}updateAncestorTree(t){const e=t.target,i=e.querySelectorAll("calcite-tree-item"),a=[];let n=e.parentElement.closest("calcite-tree-item");for(;n;)a.push(n),n=n.parentElement.closest("calcite-tree-item");e.selected=!e.selected,e.indeterminate=!1,(null==i?void 0:i.length)&&i.forEach((t=>{t.selected=e.selected,t.indeterminate=!1})),a&&a.forEach((t=>{const e=r(t.querySelectorAll("calcite-tree-item")),i=e.filter((t=>t.selected));if(0===i.length)return t.selected=!1,void(t.indeterminate=!1);const a=i.length<e.length;t.indeterminate=a,t.selected=!a})),this.calciteTreeSelect.emit({selected:r(this.el.querySelectorAll("calcite-tree-item")).filter((t=>t.selected))})}getRootTabIndex(){return this.child?-1:0}get el(){return n(this)}};p.style="@-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{display:block;outline:2px solid transparent;outline-offset:2px}";let k=class{constructor(i){t(this,i),this.calciteTreeItemSelect=e(this,"calciteTreeItemSelect",7),this.selected=!1,this.expanded=!1,this.parentExpanded=!1,this.depth=-1,this.hasChildren=null,this.iconClickHandler=t=>{t.stopPropagation(),this.expanded=!this.expanded,this.selectionMode!==f.Ancestors&&this.calciteTreeItemSelect.emit({modifyCurrentSelection:this.isSelectionMultiLike,forceToggle:!0})},this.childrenClickHandler=t=>t.stopPropagation(),this.updateParentIsExpanded=(t,e)=>{c(t,"children",{all:!0,selector:"calcite-tree-item"}).forEach((t=>t.parentExpanded=e))},this.updateAncestorTree=()=>{if(this.selected&&this.selectionMode===f.Ancestors){const t=[];let e=this.parentTreeItem;for(;e;)t.push(e),e=e.parentElement.closest("calcite-tree-item");t.forEach((t=>t.indeterminate=!0))}}}expandedHandler(t){this.updateParentIsExpanded(this.el,t)}getselectionMode(){this.isSelectionMultiLike=this.selectionMode===f.Multi||this.selectionMode===f.MultiChildren}connectedCallback(){if(this.parentTreeItem=this.el.parentElement.closest("calcite-tree-item"),this.parentTreeItem){const{expanded:t}=this.parentTreeItem;this.updateParentIsExpanded(this.parentTreeItem,t)}h(this)}disconnectedCallback(){d(this)}componentWillRender(){this.hasChildren=!!this.el.querySelector("calcite-tree"),this.depth=0;let t,e=this.el.closest("calcite-tree");if(e)for(this.selectionMode=e.selectionMode,this.scale=e.scale||"m",this.lines=e.lines;e&&(t=e.parentElement.closest("calcite-tree"),t!==e);)e=t,this.depth=this.depth+1}componentDidLoad(){this.updateAncestorTree()}render(){const t="rtl"===s(this.el),e=this.selectionMode===f.Single||this.selectionMode===f.Children,n=this.selectionMode===f.Multi||this.selectionMode===f.MultiChildren,o=this.hasChildren?i("calcite-icon",{class:{chevron:!0,[l.rtl]:t},"data-test-id":"icon",icon:"chevron-right",onClick:this.iconClickHandler,scale:"s"}):null,r=i("slot",{key:"default-slot"}),c=this.selectionMode===f.Ancestors?i("label",{class:"checkbox-label",key:"checkbox-label"},i("calcite-checkbox",{checked:this.selected,class:"checkbox","data-test-id":"checkbox",indeterminate:this.hasChildren&&this.indeterminate,scale:this.scale,tabIndex:-1}),r):null,m=e?"bullet-point":n?"check":null,h=m?i("calcite-icon",{class:{"bullet-point":"bullet-point"===m,checkmark:"check"===m,[l.rtl]:t},icon:m,scale:"s"}):null,d=!(this.parentExpanded||1===this.depth);return i(a,{"aria-expanded":this.hasChildren?this.expanded.toString():void 0,"aria-hidden":d.toString(),"aria-selected":this.selected?"true":n?"false":void 0,"calcite-hydrated-hidden":d,role:"treeitem",tabindex:this.parentExpanded||1===this.depth?"0":"-1"},i("div",{class:{"node-container":!0,[l.rtl]:t},"data-selection-mode":this.selectionMode,ref:t=>this.defaultSlotWrapper=t},o,h,c||r),i("div",{class:{"children-container":!0,[l.rtl]:t},"data-test-id":"calcite-tree-children",onClick:this.childrenClickHandler,ref:t=>this.childrenSlotWrapper=t,role:this.hasChildren?"group":void 0},i("slot",{name:"children"})))}onClick(t){const[e]=m(this.el,"a");e&&"a"!==t.composedPath()[0].tagName.toLowerCase()&&window.open(e.href,""===e.target?"_self":e.target),this.calciteTreeItemSelect.emit({modifyCurrentSelection:this.selectionMode===f.Ancestors||this.isSelectionMultiLike,forceToggle:!1})}keyDownHandler(t){let e;switch(t.key){case" ":this.calciteTreeItemSelect.emit({modifyCurrentSelection:this.isSelectionMultiLike,forceToggle:!1}),t.preventDefault(),t.stopPropagation();break;case"Enter":const i=r(this.el.children).find((t=>t.matches("a")));i?(i.click(),this.selected=!0):this.calciteTreeItemSelect.emit({modifyCurrentSelection:this.isSelectionMultiLike,forceToggle:!1}),t.preventDefault(),t.stopPropagation();break;case"ArrowLeft":if(this.hasChildren&&this.expanded){this.expanded=!1,t.preventDefault(),t.stopPropagation();break}const a=this.parentTreeItem;if(a&&(!this.hasChildren||!1===this.expanded)){a.focus(),t.preventDefault(),t.stopPropagation();break}break;case"ArrowRight":if(this.hasChildren&&!1===this.expanded){this.expanded=!0,t.preventDefault(),t.stopPropagation();break}if(this.hasChildren&&this.expanded){this.el.querySelector("calcite-tree-item").focus();break}break;case"ArrowUp":const n=this.el.previousElementSibling;n&&n.matches("calcite-tree-item")&&n.focus();break;case"ArrowDown":const o=this.el.nextElementSibling;o&&o.matches("calcite-tree-item")&&o.focus();break;case"Home":e=this.el.closest("calcite-tree:not([child])"),e.querySelector("calcite-tree-item").focus();break;case"End":e=this.el.closest("calcite-tree:not([child])");let c=e.children[e.children.length-1],s=r(c.children).find((t=>t.matches("calcite-tree")));for(;s;)c=s.children[e.children.length-1],s=r(c.children).find((t=>t.matches("calcite-tree")));c.focus()}}get el(){return n(this)}static get watchers(){return{expanded:["expandedHandler"],selectionMode:["getselectionMode"]}}};k.style='@-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{display:block;max-width:100%;cursor:pointer;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .node-container{--calcite-tree-padding-y:0.25rem}:host([scale=s]) .node-container .checkbox,:host([scale=s]) .node-container .chevron,:host([scale=s]) .node-container .checkmark,:host([scale=s]) .node-container .bullet-point{margin-inline:0.25rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .node-container{--calcite-tree-padding-y:0.5rem}:host([scale=m]) .node-container .checkbox,:host([scale=m]) .node-container .chevron,:host([scale=m]) .node-container .checkmark,:host([scale=m]) .node-container .bullet-point{margin-inline:0.5rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .node-container{--calcite-tree-padding-y:0.75rem}:host([scale=l]) .node-container .checkbox,:host([scale=l]) .node-container .chevron,:host([scale=l]) .node-container .checkmark,:host([scale=l]) .node-container .bullet-point{margin-inline:0.75rem}:host([lines]) .children-container:after{position:absolute;top:0px;width:1px;transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;-webkit-transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;-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-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;height:96%;content:"";background-color:var(--calcite-ui-border-2);z-index:-1}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-width:0px;max-width:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}::slotted(*):hover{text-decoration:none !important}::slotted(a){width:100%;-webkit-text-decoration-line:none;text-decoration-line:none}:host{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}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.checkbox{outline:2px solid transparent;outline-offset:2px;line-height:0}.checkbox-label{pointer-events:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.children-container{position:relative;height:0px;overflow:hidden;-webkit-margin-start:1.25rem;margin-inline-start:1.25rem;-webkit-transform:scaleY(0);transform:scaleY(0);opacity:0;-webkit-transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;-webkit-transform-origin:top;transform-origin:top}:host([expanded])>.children-container{-webkit-transform:scaleY(1);transform:scaleY(1);opacity:1;height:auto}.node-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--calcite-tree-padding-y) 0}.node-container .checkmark,.node-container .bullet-point{opacity:0;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;color:var(--calcite-ui-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus) .node-container .checkmark,:host(:focus) .node-container .bullet-point{opacity:1}:host([selected])>.node-container,:host([selected])>.node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([selected])>.node-container .bullet-point,:host([selected])>.node-container .checkmark,:host([selected])>.node-container:hover .bullet-point,:host([selected])>.node-container:hover .checkmark{opacity:1;color:var(--calcite-ui-brand)}:host(:not([has-children])):host([scale=s])>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-padding-start:1.25rem;padding-inline-start:1.25rem}:host(:not([has-children])):host([scale=m])>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=l])>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}:host([has-children])>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-margin-start:0;margin-inline-start:0}:host([has-children])>.node-container .bullet-point,:host([has-children])>.node-container .checkmark{display:none}:host([has-children][expanded]:not([selected]))>.node-container ::slotted(*){font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([has-children][selected])>.node-container[data-selection-mode=children],:host([has-children][selected])>.node-container[data-selection-mode=multi-children]{color:var(--calcite-ui-brand)}.chevron{position:relative;-ms-flex-item-align:center;align-self:center;color:var(--calcite-ui-text-3);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.calcite--rtl .chevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([expanded])>.node-container>.chevron{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-ui-brand)}';export{p as calcite_tree,k as calcite_tree_item}
|
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
8
8
|
|
|
9
9
|
const index = require('./index-6b5d2de5.js');
|
|
10
10
|
const dom = require('./dom-f3df220d.js');
|
|
11
|
-
require('./guid-b270f0db.js');
|
|
11
|
+
const guid = require('./guid-b270f0db.js');
|
|
12
12
|
|
|
13
13
|
const accordionCss = "@-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([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-width:100%;border-width:1px;border-bottom-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2);line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{border-color:transparent;--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion--minimal{--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0;border-color:transparent}";
|
|
14
14
|
|
|
@@ -165,6 +165,12 @@ let AccordionItem = class {
|
|
|
165
165
|
//--------------------------------------------------------------------------
|
|
166
166
|
/** Indicates whether the item is active. */
|
|
167
167
|
this.active = false;
|
|
168
|
+
//--------------------------------------------------------------------------
|
|
169
|
+
//
|
|
170
|
+
// Private State/Props
|
|
171
|
+
//
|
|
172
|
+
//--------------------------------------------------------------------------
|
|
173
|
+
this.guid = guid.guid();
|
|
168
174
|
/** what icon position does the parent accordion specify */
|
|
169
175
|
this.iconPosition = "end";
|
|
170
176
|
/** handle clicks on item header */
|
|
@@ -191,16 +197,19 @@ let AccordionItem = class {
|
|
|
191
197
|
render() {
|
|
192
198
|
const dir = dom.getElementDir(this.el);
|
|
193
199
|
const iconEl = index.h("calcite-icon", { class: "accordion-item-icon", icon: this.icon, scale: "s" });
|
|
194
|
-
|
|
200
|
+
const { guid } = this;
|
|
201
|
+
const regionId = `${guid}-region`;
|
|
202
|
+
const buttonId = `${guid}-button`;
|
|
203
|
+
return (index.h(index.Host, { tabindex: "0" }, index.h("div", { class: {
|
|
195
204
|
[`icon-position--${this.iconPosition}`]: true,
|
|
196
205
|
[`icon-type--${this.iconType}`]: true
|
|
197
|
-
} }, index.h("div", { class: { "accordion-item-header": true, [dom.CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.itemHeaderClickHandler }, this.icon ? iconEl : null, index.h("div", { class: "accordion-item-header-text" }, index.h("span", { class: "accordion-item-title" }, this.itemTitle), this.itemSubtitle ? (index.h("span", { class: "accordion-item-subtitle" }, this.itemSubtitle)) : null), index.h("calcite-icon", { class: "accordion-item-expand-icon", icon: this.iconType === "chevron"
|
|
206
|
+
} }, index.h("div", { "aria-controls": regionId, class: { "accordion-item-header": true, [dom.CSS_UTILITY.rtl]: dir === "rtl" }, id: buttonId, onClick: this.itemHeaderClickHandler, role: "button" }, this.icon ? iconEl : null, index.h("div", { class: "accordion-item-header-text" }, index.h("span", { class: "accordion-item-title" }, this.itemTitle), this.itemSubtitle ? (index.h("span", { class: "accordion-item-subtitle" }, this.itemSubtitle)) : null), index.h("calcite-icon", { class: "accordion-item-expand-icon", icon: this.iconType === "chevron"
|
|
198
207
|
? "chevronDown"
|
|
199
208
|
: this.iconType === "caret"
|
|
200
209
|
? "caretDown"
|
|
201
210
|
: this.active
|
|
202
211
|
? "minus"
|
|
203
|
-
: "plus", scale: "s" })), index.h("div", { class: "accordion-item-content" }, index.h("slot", null)))));
|
|
212
|
+
: "plus", scale: "s" })), index.h("div", { "aria-expanded": this.active.toString(), "aria-labelledby": buttonId, class: "accordion-item-content", id: regionId, role: "region" }, index.h("slot", null)))));
|
|
204
213
|
}
|
|
205
214
|
//--------------------------------------------------------------------------
|
|
206
215
|
//
|
|
@@ -10,7 +10,7 @@ const index = require('./index-6b5d2de5.js');
|
|
|
10
10
|
const dom = require('./dom-f3df220d.js');
|
|
11
11
|
const Heading = require('./Heading-ef16f5df.js');
|
|
12
12
|
const conditionalSlot = require('./conditionalSlot-92505fba.js');
|
|
13
|
-
require('./guid-b270f0db.js');
|
|
13
|
+
const guid = require('./guid-b270f0db.js');
|
|
14
14
|
require('./observers-79bfb8bc.js');
|
|
15
15
|
|
|
16
16
|
const CSS$1 = {
|
|
@@ -90,6 +90,7 @@ let Block = class {
|
|
|
90
90
|
* When true, the block's content will be displayed.
|
|
91
91
|
*/
|
|
92
92
|
this.open = false;
|
|
93
|
+
this.guid = guid.guid();
|
|
93
94
|
// --------------------------------------------------------------------------
|
|
94
95
|
//
|
|
95
96
|
// Private Methods
|
|
@@ -145,10 +146,13 @@ let Block = class {
|
|
|
145
146
|
const hasControl = !!dom.getSlotted(el, SLOTS.control);
|
|
146
147
|
const hasMenuActions = !!dom.getSlotted(el, SLOTS.headerMenuActions);
|
|
147
148
|
const collapseIcon = open ? ICONS$1.opened : ICONS$1.closed;
|
|
148
|
-
const
|
|
149
|
+
const { guid } = this;
|
|
150
|
+
const regionId = `${guid}-region`;
|
|
151
|
+
const buttonId = `${guid}-button`;
|
|
152
|
+
const headerNode = (index.h("div", { class: CSS$1.headerContainer }, this.dragHandle ? index.h("calcite-handle", null) : null, collapsible ? (index.h("button", { "aria-controls": regionId, "aria-expanded": collapsible ? open.toString() : null, "aria-label": toggleLabel, class: CSS$1.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, !hasControl && !hasMenuActions ? (index.h("calcite-icon", { "aria-hidden": "true", class: CSS$1.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent), loading ? (index.h("calcite-loader", { inline: true, "is-active": true, label: intlLoading })) : hasControl ? (index.h("div", { class: CSS$1.controlContainer }, index.h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (index.h("calcite-action-menu", { label: this.intlOptions || TEXT$1.options }, index.h("slot", { name: SLOTS.headerMenuActions }))) : null));
|
|
149
153
|
return (index.h(index.Host, { tabIndex: disabled ? -1 : null }, index.h("article", { "aria-busy": loading.toString(), class: {
|
|
150
154
|
[CSS$1.article]: true
|
|
151
|
-
} }, headerNode, index.h("
|
|
155
|
+
} }, headerNode, index.h("section", { "aria-expanded": this.open.toString(), "aria-labelledby": buttonId, class: CSS$1.content, hidden: !open, id: regionId }, this.renderScrim()))));
|
|
152
156
|
}
|
|
153
157
|
get el() { return index.getElement(this); }
|
|
154
158
|
};
|
|
@@ -194,6 +198,7 @@ let BlockSection = class {
|
|
|
194
198
|
* If the value is "button", a clickable header is displayed.
|
|
195
199
|
*/
|
|
196
200
|
this.toggleDisplay = "button";
|
|
201
|
+
this.guid = guid.guid();
|
|
197
202
|
// --------------------------------------------------------------------------
|
|
198
203
|
//
|
|
199
204
|
// Private Methods
|
|
@@ -236,14 +241,17 @@ let BlockSection = class {
|
|
|
236
241
|
? ICONS.menuClosedLeft
|
|
237
242
|
: ICONS.menuClosedRight;
|
|
238
243
|
const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
|
|
239
|
-
const
|
|
244
|
+
const { guid } = this;
|
|
245
|
+
const regionId = `${guid}-region`;
|
|
246
|
+
const buttonId = `${guid}-button`;
|
|
247
|
+
const headerNode = toggleDisplay === "switch" ? (index.h("div", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
|
|
240
248
|
[CSS.toggle]: true,
|
|
241
249
|
[CSS.toggleSwitch]: true
|
|
242
|
-
}, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel }, index.h("div", { class: CSS.toggleSwitchContent }, index.h("span", { class: CSS.toggleSwitchText }, text)), index.h("calcite-switch", { checked: open, label: toggleLabel, scale: "s", tabIndex: -1 }), this.renderStatusIcon())) : (index.h("button", { "aria-label": toggleLabel, class: {
|
|
250
|
+
}, id: buttonId, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel }, index.h("div", { class: CSS.toggleSwitchContent }, index.h("span", { class: CSS.toggleSwitchText }, text)), index.h("calcite-switch", { checked: open, label: toggleLabel, scale: "s", tabIndex: -1 }), this.renderStatusIcon())) : (index.h("button", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
|
|
243
251
|
[CSS.sectionHeader]: true,
|
|
244
252
|
[CSS.toggle]: true
|
|
245
|
-
}, name: toggleLabel, onClick: this.toggleSection }, index.h("calcite-icon", { icon: arrowIcon, scale: "s" }), index.h("span", { class: CSS.sectionHeaderText }, text), this.renderStatusIcon()));
|
|
246
|
-
return (index.h("section", { "aria-expanded": open.toString()
|
|
253
|
+
}, id: buttonId, name: toggleLabel, onClick: this.toggleSection }, index.h("calcite-icon", { icon: arrowIcon, scale: "s" }), index.h("span", { class: CSS.sectionHeaderText }, text), this.renderStatusIcon()));
|
|
254
|
+
return (index.h(index.Host, null, headerNode, index.h("section", { "aria-expanded": open.toString(), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId }, index.h("slot", null))));
|
|
247
255
|
}
|
|
248
256
|
get el() { return index.getElement(this); }
|
|
249
257
|
};
|
|
@@ -32,7 +32,7 @@ const ARIA_CONTROLS = "aria-controls";
|
|
|
32
32
|
const ARIA_EXPANDED = "aria-expanded";
|
|
33
33
|
const HEADING_LEVEL = 2;
|
|
34
34
|
|
|
35
|
-
const popoverCss = "@-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{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-popper-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;background-color:var(--calcite-ui-foreground-1);border-bottom-color:var(--calcite-ui-border-3)}.heading{margin:0px;display:block;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-item-align:center;align-self:center;white-space:normal;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);word-wrap:break-word;word-break:break-word}.container{position:relative;display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1)}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;height:100%;width:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;word-wrap:break-word;word-break:break-word}.close-button-container{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex:0 0 auto;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}";
|
|
35
|
+
const popoverCss = "@-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{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([data-popper-placement][data-popper-escaped]),:host([data-popper-placement][data-popper-reference-hidden]){pointer-events:none;opacity:0}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-popper-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;background-color:var(--calcite-ui-foreground-1);border-bottom-color:var(--calcite-ui-border-3)}.heading{margin:0px;display:block;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-item-align:center;align-self:center;white-space:normal;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);word-wrap:break-word;word-break:break-word}.container{position:relative;display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1)}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;height:100%;width:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;word-wrap:break-word;word-break:break-word}.close-button-container{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex:0 0 auto;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}";
|
|
36
36
|
|
|
37
37
|
let Popover = class {
|
|
38
38
|
constructor(hostRef) {
|
|
@@ -19,7 +19,7 @@ const TOOLTIP_DELAY_MS = 500;
|
|
|
19
19
|
const TOOLTIP_REFERENCE = "data-calcite-tooltip-reference";
|
|
20
20
|
const ARIA_DESCRIBED_BY = "aria-describedby";
|
|
21
21
|
|
|
22
|
-
const tooltipCss = "@-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{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}.container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);overflow:hidden;max-width:20rem;max-height:20rem}.calcite-popper-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}";
|
|
22
|
+
const tooltipCss = "@-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{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([data-popper-placement][data-popper-escaped]),:host([data-popper-placement][data-popper-reference-hidden]){pointer-events:none;opacity:0}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}.container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);overflow:hidden;max-width:20rem;max-height:20rem}.calcite-popper-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}";
|
|
23
23
|
|
|
24
24
|
let Tooltip = class {
|
|
25
25
|
constructor(hostRef) {
|
|
@@ -59,8 +59,10 @@ let Tree = class {
|
|
|
59
59
|
this.child = !!parent;
|
|
60
60
|
}
|
|
61
61
|
render() {
|
|
62
|
-
return (index.h(index.Host, { "aria-multiselectable":
|
|
63
|
-
|
|
62
|
+
return (index.h(index.Host, { "aria-multiselectable": this.child
|
|
63
|
+
? undefined
|
|
64
|
+
: (this.selectionMode === TreeSelectionMode.Multi ||
|
|
65
|
+
this.selectionMode === TreeSelectionMode.MultiChildren).toString(), role: !this.child ? "tree" : undefined, tabIndex: this.getRootTabIndex() }, index.h("slot", null)));
|
|
64
66
|
}
|
|
65
67
|
//--------------------------------------------------------------------------
|
|
66
68
|
//
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
|
|
6
6
|
import { getElementDir, getElementProp } from "../../utils/dom";
|
|
7
7
|
import { CSS_UTILITY } from "../../utils/resources";
|
|
8
|
+
import { guid } from "../../utils/guid";
|
|
8
9
|
/**
|
|
9
10
|
* @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.
|
|
10
11
|
*/
|
|
@@ -17,6 +18,12 @@ export class AccordionItem {
|
|
|
17
18
|
//--------------------------------------------------------------------------
|
|
18
19
|
/** Indicates whether the item is active. */
|
|
19
20
|
this.active = false;
|
|
21
|
+
//--------------------------------------------------------------------------
|
|
22
|
+
//
|
|
23
|
+
// Private State/Props
|
|
24
|
+
//
|
|
25
|
+
//--------------------------------------------------------------------------
|
|
26
|
+
this.guid = guid();
|
|
20
27
|
/** what icon position does the parent accordion specify */
|
|
21
28
|
this.iconPosition = "end";
|
|
22
29
|
/** handle clicks on item header */
|
|
@@ -43,12 +50,15 @@ export class AccordionItem {
|
|
|
43
50
|
render() {
|
|
44
51
|
const dir = getElementDir(this.el);
|
|
45
52
|
const iconEl = h("calcite-icon", { class: "accordion-item-icon", icon: this.icon, scale: "s" });
|
|
46
|
-
|
|
53
|
+
const { guid } = this;
|
|
54
|
+
const regionId = `${guid}-region`;
|
|
55
|
+
const buttonId = `${guid}-button`;
|
|
56
|
+
return (h(Host, { tabindex: "0" },
|
|
47
57
|
h("div", { class: {
|
|
48
58
|
[`icon-position--${this.iconPosition}`]: true,
|
|
49
59
|
[`icon-type--${this.iconType}`]: true
|
|
50
60
|
} },
|
|
51
|
-
h("div", { class: { "accordion-item-header": true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.itemHeaderClickHandler },
|
|
61
|
+
h("div", { "aria-controls": regionId, class: { "accordion-item-header": true, [CSS_UTILITY.rtl]: dir === "rtl" }, id: buttonId, onClick: this.itemHeaderClickHandler, role: "button" },
|
|
52
62
|
this.icon ? iconEl : null,
|
|
53
63
|
h("div", { class: "accordion-item-header-text" },
|
|
54
64
|
h("span", { class: "accordion-item-title" }, this.itemTitle),
|
|
@@ -60,7 +70,7 @@ export class AccordionItem {
|
|
|
60
70
|
: this.active
|
|
61
71
|
? "minus"
|
|
62
72
|
: "plus", scale: "s" })),
|
|
63
|
-
h("div", { class: "accordion-item-content" },
|
|
73
|
+
h("div", { "aria-expanded": this.active.toString(), "aria-labelledby": buttonId, class: "accordion-item-content", id: regionId, role: "region" },
|
|
64
74
|
h("slot", null)))));
|
|
65
75
|
}
|
|
66
76
|
//--------------------------------------------------------------------------
|
|
@@ -7,6 +7,7 @@ import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
|
|
|
7
7
|
import { getSlotted } from "../../utils/dom";
|
|
8
8
|
import { Heading } from "../functional/Heading";
|
|
9
9
|
import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
|
|
10
|
+
import { guid } from "../../utils/guid";
|
|
10
11
|
/**
|
|
11
12
|
* @slot - A slot for adding content to the block.
|
|
12
13
|
* @slot icon - A slot for adding a leading header icon.
|
|
@@ -48,6 +49,7 @@ export class Block {
|
|
|
48
49
|
* When true, the block's content will be displayed.
|
|
49
50
|
*/
|
|
50
51
|
this.open = false;
|
|
52
|
+
this.guid = guid();
|
|
51
53
|
// --------------------------------------------------------------------------
|
|
52
54
|
//
|
|
53
55
|
// Private Methods
|
|
@@ -107,9 +109,12 @@ export class Block {
|
|
|
107
109
|
const hasControl = !!getSlotted(el, SLOTS.control);
|
|
108
110
|
const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);
|
|
109
111
|
const collapseIcon = open ? ICONS.opened : ICONS.closed;
|
|
112
|
+
const { guid } = this;
|
|
113
|
+
const regionId = `${guid}-region`;
|
|
114
|
+
const buttonId = `${guid}-button`;
|
|
110
115
|
const headerNode = (h("div", { class: CSS.headerContainer },
|
|
111
116
|
this.dragHandle ? h("calcite-handle", null) : null,
|
|
112
|
-
collapsible ? (h("button", { "aria-expanded": collapsible ? open.toString() : null, "aria-label": toggleLabel, class: CSS.toggle, onClick: this.onHeaderClick, title: toggleLabel },
|
|
117
|
+
collapsible ? (h("button", { "aria-controls": regionId, "aria-expanded": collapsible ? open.toString() : null, "aria-label": toggleLabel, class: CSS.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel },
|
|
113
118
|
headerContent,
|
|
114
119
|
!hasControl && !hasMenuActions ? (h("calcite-icon", { "aria-hidden": "true", class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent),
|
|
115
120
|
loading ? (h("calcite-loader", { inline: true, "is-active": true, label: intlLoading })) : hasControl ? (h("div", { class: CSS.controlContainer },
|
|
@@ -121,7 +126,7 @@ export class Block {
|
|
|
121
126
|
[CSS.article]: true
|
|
122
127
|
} },
|
|
123
128
|
headerNode,
|
|
124
|
-
h("
|
|
129
|
+
h("section", { "aria-expanded": this.open.toString(), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId }, this.renderScrim()))));
|
|
125
130
|
}
|
|
126
131
|
static get is() { return "calcite-block"; }
|
|
127
132
|
static get encapsulation() { return "shadow"; }
|
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
3
3
|
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
|
|
4
4
|
*/
|
|
5
|
-
import { Component, Element, Event, Prop, h } from "@stencil/core";
|
|
5
|
+
import { Component, Element, Event, Prop, h, Host } from "@stencil/core";
|
|
6
6
|
import { getElementDir } from "../../utils/dom";
|
|
7
7
|
import { CSS, ICONS, TEXT } from "./resources";
|
|
8
|
+
import { guid } from "../../utils/guid";
|
|
8
9
|
/**
|
|
9
10
|
* @slot - A slot for adding content to the block section.
|
|
10
11
|
*/
|
|
@@ -20,6 +21,7 @@ export class BlockSection {
|
|
|
20
21
|
* If the value is "button", a clickable header is displayed.
|
|
21
22
|
*/
|
|
22
23
|
this.toggleDisplay = "button";
|
|
24
|
+
this.guid = guid();
|
|
23
25
|
// --------------------------------------------------------------------------
|
|
24
26
|
//
|
|
25
27
|
// Private Methods
|
|
@@ -62,23 +64,26 @@ export class BlockSection {
|
|
|
62
64
|
? ICONS.menuClosedLeft
|
|
63
65
|
: ICONS.menuClosedRight;
|
|
64
66
|
const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
|
|
65
|
-
const
|
|
67
|
+
const { guid } = this;
|
|
68
|
+
const regionId = `${guid}-region`;
|
|
69
|
+
const buttonId = `${guid}-button`;
|
|
70
|
+
const headerNode = toggleDisplay === "switch" ? (h("div", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
|
|
66
71
|
[CSS.toggle]: true,
|
|
67
72
|
[CSS.toggleSwitch]: true
|
|
68
|
-
}, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel },
|
|
73
|
+
}, id: buttonId, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel },
|
|
69
74
|
h("div", { class: CSS.toggleSwitchContent },
|
|
70
75
|
h("span", { class: CSS.toggleSwitchText }, text)),
|
|
71
76
|
h("calcite-switch", { checked: open, label: toggleLabel, scale: "s", tabIndex: -1 }),
|
|
72
|
-
this.renderStatusIcon())) : (h("button", { "aria-label": toggleLabel, class: {
|
|
77
|
+
this.renderStatusIcon())) : (h("button", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
|
|
73
78
|
[CSS.sectionHeader]: true,
|
|
74
79
|
[CSS.toggle]: true
|
|
75
|
-
}, name: toggleLabel, onClick: this.toggleSection },
|
|
80
|
+
}, id: buttonId, name: toggleLabel, onClick: this.toggleSection },
|
|
76
81
|
h("calcite-icon", { icon: arrowIcon, scale: "s" }),
|
|
77
82
|
h("span", { class: CSS.sectionHeaderText }, text),
|
|
78
83
|
this.renderStatusIcon()));
|
|
79
|
-
return (h(
|
|
84
|
+
return (h(Host, null,
|
|
80
85
|
headerNode,
|
|
81
|
-
h("
|
|
86
|
+
h("section", { "aria-expanded": open.toString(), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId },
|
|
82
87
|
h("slot", null))));
|
|
83
88
|
}
|
|
84
89
|
static get is() { return "calcite-block-section"; }
|