diff --git a/CHANGELOG.md b/CHANGELOG.md index 87b91623..116f4f42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,16 @@ This document maintains a list of released versions and changes introduced by those versions. This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html) +### [5.2.1](https://github.com/Esri/calcite-app-components/compare/v5.2.0...v5.2.1) (2020-02-05) + +### Features + +- multiple actions appear side-by-side ([#798](https://github.com/Esri/calcite-app-components/issues/798)) ([591deaf](https://github.com/Esri/calcite-app-components/commit/591deaf0aada884e24fc8fb6f76322753b8fbe8a)) + +### Bug Fixes + +- Replace shadowroot querying with textInput reference. ([#799](https://github.com/Esri/calcite-app-components/issues/799)) ([5ee3f08](https://github.com/Esri/calcite-app-components/commit/5ee3f085c4f0067850c47db6d912f345b7e88485)) + ## [5.2.0](https://github.com/Esri/calcite-app-components/compare/v5.1.1...v5.2.0) (2020-01-31) ### Features diff --git a/docs/build/calcite-app.esm.js b/docs/build/calcite-app.esm.js index 86471307..a68acb26 100644 --- a/docs/build/calcite-app.esm.js +++ b/docs/build/calcite-app.esm.js @@ -1 +1 @@ -import{p as e,b as t}from"./p-323e88a0.js";e().then(e=>t([["p-soemhbxo",[[1,"calcite-tip",{dismissed:[1028],nonDismissible:[516,"non-dismissible"],heading:[1],selected:[516],textClose:[1,"text-close"],theme:[513]}],[1,"calcite-tip-manager",{closed:[516],textClose:[1,"text-close"],textDefaultTitle:[513,"text-default-title"],textNext:[1,"text-next"],textPaginationLabel:[513,"text-pagination-label"],textPrevious:[1,"text-previous"],theme:[513],selectedIndex:[32],tips:[32],total:[32],direction:[32],groupTitle:[32],nextTip:[64],previousTip:[64]}],[1,"calcite-tip-group",{textGroupTitle:[513,"text-group-title"]}]]],["p-sxjhlvi9",[[1,"calcite-block",{collapsible:[4],disabled:[516],dragHandle:[516,"drag-handle"],heading:[1],open:[516],loading:[516],summary:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],theme:[513]}],[1,"calcite-block-section",{open:[516],text:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],toggleDisplay:[513,"toggle-display"]}]]],["p-ppvbcdwx",[[1,"calcite-pick-list",{compact:[516],disabled:[516],filterEnabled:[516,"filter-enabled"],loading:[516],multiple:[516],textFilterPlaceholder:[513,"text-filter-placeholder"],selectedValues:[32],dataForFilter:[32],getSelectedItems:[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["p-puno4cu5",[[1,"calcite-value-list",{compact:[516],disabled:[516],dragEnabled:[516,"drag-enabled"],filterEnabled:[516,"filter-enabled"],loading:[516],multiple:[516],textFilterPlaceholder:[513,"text-filter-placeholder"],selectedValues:[32],dataForFilter:[32],getSelectedItems:[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["p-dbbbl1hm",[[1,"calcite-value-list-item",{compact:[516],disabled:[516],disableDeselect:[4,"disable-deselect"],handleActivated:[1028,"handle-activated"],icon:[513],metadata:[16],selected:[1540],textLabel:[513,"text-label"],textDescription:[513,"text-description"],value:[513],toggleSelected:[64]}]]],["p-vdxyomtr",[[1,"calcite-shell",{theme:[513]}],[1,"calcite-shell-panel",{collapsed:[516],detached:[516],detachedScale:[1,"detached-scale"],layout:[513]}]]],["p-zxctfi66",[[1,"calcite-pick-list-group",{textGroupTitle:[513,"text-group-title"]}]]],["p-tf2jtkhh",[[1,"calcite-sortable-list",{handleSelector:[1,"handle-selector"],disabled:[516],loading:[516],handleActivated:[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]]],["p-ljeroact",[[1,"calcite-handle",{activated:[1540],textTitle:[1537,"text-title"],setFocus:[64]}]]],["p-wlyhrdjt",[[1,"calcite-filter",{data:[16],textLabel:[1,"text-label"],textPlaceholder:[1,"text-placeholder"],empty:[32]}]]],["p-nm3wmvcl",[[1,"calcite-action-bar",{expand:[516],expanded:[516],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],layout:[513],theme:[513]}],[1,"calcite-action-pad",{expand:[516],expanded:[516],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],layout:[513],theme:[513]}],[1,"calcite-action-group"],[1,"calcite-action",{appearance:[513],active:[516],compact:[516],disabled:[516],indicator:[516],label:[1],loading:[516],scale:[513],text:[1],textEnabled:[516,"text-enabled"],theme:[513],setFocus:[64]}]]],["p-ji6g3zqj",[[1,"calcite-flow-item",{beforeBack:[16],disabled:[516],heightScale:[513,"height-scale"],heading:[1],loading:[516],menuOpen:[516,"menu-open"],showBackButton:[4,"show-back-button"],summary:[1],textBack:[1,"text-back"],textClose:[1,"text-close"],textOpen:[1,"text-open"],theme:[513]}],[1,"calcite-flow",{theme:[513],flowCount:[32],flowDirection:[32],flows:[32],back:[64]},[[0,"calciteFlowItemBackClick","handleCalciteFlowItemBackClick"]]],[1,"calcite-panel",{dismissed:[1540],disabled:[516],dismissible:[516],heightScale:[513,"height-scale"],loading:[516],textClose:[1,"text-close"],theme:[513],setFocus:[64]}]]],["p-pqrkoyb9",[[1,"calcite-pick-list-item",{compact:[516],disabled:[516],disableDeselect:[4,"disable-deselect"],icon:[513],metadata:[16],selected:[1540],textDescription:[513,"text-description"],textLabel:[513,"text-label"],value:[513],toggleSelected:[64]}]]]],e)); \ No newline at end of file +import{p as e,b as t}from"./p-323e88a0.js";e().then(e=>t([["p-soemhbxo",[[1,"calcite-tip",{dismissed:[1028],nonDismissible:[516,"non-dismissible"],heading:[1],selected:[516],textClose:[1,"text-close"],theme:[513]}],[1,"calcite-tip-manager",{closed:[516],textClose:[1,"text-close"],textDefaultTitle:[513,"text-default-title"],textNext:[1,"text-next"],textPaginationLabel:[513,"text-pagination-label"],textPrevious:[1,"text-previous"],theme:[513],selectedIndex:[32],tips:[32],total:[32],direction:[32],groupTitle:[32],nextTip:[64],previousTip:[64]}],[1,"calcite-tip-group",{textGroupTitle:[513,"text-group-title"]}]]],["p-sxjhlvi9",[[1,"calcite-block",{collapsible:[4],disabled:[516],dragHandle:[516,"drag-handle"],heading:[1],open:[516],loading:[516],summary:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],theme:[513]}],[1,"calcite-block-section",{open:[516],text:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],toggleDisplay:[513,"toggle-display"]}]]],["p-ppvbcdwx",[[1,"calcite-pick-list",{compact:[516],disabled:[516],filterEnabled:[516,"filter-enabled"],loading:[516],multiple:[516],textFilterPlaceholder:[513,"text-filter-placeholder"],selectedValues:[32],dataForFilter:[32],getSelectedItems:[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["p-puno4cu5",[[1,"calcite-value-list",{compact:[516],disabled:[516],dragEnabled:[516,"drag-enabled"],filterEnabled:[516,"filter-enabled"],loading:[516],multiple:[516],textFilterPlaceholder:[513,"text-filter-placeholder"],selectedValues:[32],dataForFilter:[32],getSelectedItems:[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["p-dbbbl1hm",[[1,"calcite-value-list-item",{compact:[516],disabled:[516],disableDeselect:[4,"disable-deselect"],handleActivated:[1028,"handle-activated"],icon:[513],metadata:[16],selected:[1540],textLabel:[513,"text-label"],textDescription:[513,"text-description"],value:[513],toggleSelected:[64]}]]],["p-vdxyomtr",[[1,"calcite-shell",{theme:[513]}],[1,"calcite-shell-panel",{collapsed:[516],detached:[516],detachedScale:[1,"detached-scale"],layout:[513]}]]],["p-zxctfi66",[[1,"calcite-pick-list-group",{textGroupTitle:[513,"text-group-title"]}]]],["p-tf2jtkhh",[[1,"calcite-sortable-list",{handleSelector:[1,"handle-selector"],disabled:[516],loading:[516],handleActivated:[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]]],["p-ljeroact",[[1,"calcite-handle",{activated:[1540],textTitle:[1537,"text-title"],setFocus:[64]}]]],["p-iz447tlc",[[1,"calcite-filter",{data:[16],textLabel:[1,"text-label"],textPlaceholder:[1,"text-placeholder"],empty:[32]}]]],["p-nm3wmvcl",[[1,"calcite-action-bar",{expand:[516],expanded:[516],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],layout:[513],theme:[513]}],[1,"calcite-action-pad",{expand:[516],expanded:[516],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],layout:[513],theme:[513]}],[1,"calcite-action-group"],[1,"calcite-action",{appearance:[513],active:[516],compact:[516],disabled:[516],indicator:[516],label:[1],loading:[516],scale:[513],text:[1],textEnabled:[516,"text-enabled"],theme:[513],setFocus:[64]}]]],["p-ji6g3zqj",[[1,"calcite-flow-item",{beforeBack:[16],disabled:[516],heightScale:[513,"height-scale"],heading:[1],loading:[516],menuOpen:[516,"menu-open"],showBackButton:[4,"show-back-button"],summary:[1],textBack:[1,"text-back"],textClose:[1,"text-close"],textOpen:[1,"text-open"],theme:[513]}],[1,"calcite-flow",{theme:[513],flowCount:[32],flowDirection:[32],flows:[32],back:[64]},[[0,"calciteFlowItemBackClick","handleCalciteFlowItemBackClick"]]],[1,"calcite-panel",{dismissed:[1540],disabled:[516],dismissible:[516],heightScale:[513,"height-scale"],loading:[516],textClose:[1,"text-close"],theme:[513],setFocus:[64]}]]],["p-boeqs3xb",[[1,"calcite-pick-list-item",{compact:[516],disabled:[516],disableDeselect:[4,"disable-deselect"],icon:[513],metadata:[16],selected:[1540],textDescription:[513,"text-description"],textLabel:[513,"text-label"],value:[513],toggleSelected:[64]}]]]],e)); \ No newline at end of file diff --git a/docs/build/p-9elatzth.system.entry.js b/docs/build/p-9elatzth.system.entry.js deleted file mode 100644 index 73e41d07..00000000 --- a/docs/build/p-9elatzth.system.entry.js +++ /dev/null @@ -1 +0,0 @@ -System.register(["./p-7b680867.system.js","./p-1071578d.system.js"],(function(e){"use strict";var t,r,a,i,n,l,c;return{setters:[function(e){t=e.r;r=e.c;a=e.h;i=e.H;n=e.g},function(e){l=e.d;c=e.f}],execute:function(){var u={searchIcon:"search-icon",clearButton:"clear-button"};var o={filterLabel:"filter",clear:"Clear filter"};var s={search:"search",close:"x"};var f=250;var h=e("calcite_filter",function(){function e(e){var a=this;t(this,e);this.empty=true;this.filter=l((function(e){var t=new RegExp(e,"ig");if(a.data.length===0){console.warn("No data was passed to calcite-filter.\n The data property expects an array of objects");a.calciteFilterChange.emit([]);return}var r=function(e,t){var a=false;c(e,(function(e){if(typeof e==="function"){return}if(Array.isArray(e)||typeof e==="object"&&e!==null){if(r(e,t)){a=true}}else if(t.test(e)){a=true}}));return a};var i=a.data.filter((function(e){return r(e,t)}));a.calciteFilterChange.emit(i)}),f);this.inputHandler=function(e){var t=e.target;a.empty=t.value==="";a.filter(t.value)};this.clear=function(){a.el.shadowRoot.querySelector("input").value="";a.empty=true;a.calciteFilterChange.emit(a.data)};this.calciteFilterChange=r(this,"calciteFilterChange",7)}e.prototype.render=function(){return a(i,null,a("label",null,a("input",{type:"text",value:"",placeholder:this.textPlaceholder,onInput:this.inputHandler,"aria-label":this.textLabel||o.filterLabel}),a("div",{class:u.searchIcon},a("calcite-icon",{scale:"s",icon:s.search}))),!this.empty?a("button",{onClick:this.clear,class:u.clearButton,"aria-label":o.clear},a("calcite-icon",{icon:s.close})):null)};Object.defineProperty(e.prototype,"el",{get:function(){return n(this)},enumerable:true,configurable:true});Object.defineProperty(e,"style",{get:function(){return":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half);width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#007ac2;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);overflow:hidden;position:relative;width:100%}input[type=text]{background-color:transparent;border:0;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);margin-bottom:calc(var(--calcite-app-cap-spacing-minimum) * 2);padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-quarter) var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-plus-half);-webkit-transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);width:100%}input[type=text]::-ms-clear{display:none}input[type=text]:focus{border-color:var(--calcite-app-foreground-active);-webkit-box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);outline:none;padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-quarter)}.search-icon{color:var(--calcite-app-foreground-subtle);display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.clear-button{color:var(--calcite-app-foreground);background:none;border:0;cursor:pointer}.clear-button:hover,.clear-button:focus{color:var(--calcite-app-foreground-hover)}.calcite--rtl input[type=text]{padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl .search-icon{left:unset;right:0}input[type=text]:focus~.search-icon{left:calc(var(--calcite-app-icon-size) * -1);opacity:0}"},enumerable:true,configurable:true});return e}())}}})); \ No newline at end of file diff --git a/docs/build/p-b77d79ed.system.js b/docs/build/p-b77d79ed.system.js index 5d2de592..974e6fe3 100644 --- a/docs/build/p-b77d79ed.system.js +++ b/docs/build/p-b77d79ed.system.js @@ -1 +1 @@ -System.register(["./p-7b680867.system.js"],(function(){"use strict";var e,t;return{setters:[function(l){e=l.p;t=l.b}],execute:function(){e().then((function(e){return t([["p-k06xi37e.system",[[1,"calcite-tip",{dismissed:[1028],nonDismissible:[516,"non-dismissible"],heading:[1],selected:[516],textClose:[1,"text-close"],theme:[513]}],[1,"calcite-tip-manager",{closed:[516],textClose:[1,"text-close"],textDefaultTitle:[513,"text-default-title"],textNext:[1,"text-next"],textPaginationLabel:[513,"text-pagination-label"],textPrevious:[1,"text-previous"],theme:[513],selectedIndex:[32],tips:[32],total:[32],direction:[32],groupTitle:[32],nextTip:[64],previousTip:[64]}],[1,"calcite-tip-group",{textGroupTitle:[513,"text-group-title"]}]]],["p-gipoehmz.system",[[1,"calcite-block",{collapsible:[4],disabled:[516],dragHandle:[516,"drag-handle"],heading:[1],open:[516],loading:[516],summary:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],theme:[513]}],[1,"calcite-block-section",{open:[516],text:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],toggleDisplay:[513,"toggle-display"]}]]],["p-da58pbhy.system",[[1,"calcite-pick-list",{compact:[516],disabled:[516],filterEnabled:[516,"filter-enabled"],loading:[516],multiple:[516],textFilterPlaceholder:[513,"text-filter-placeholder"],selectedValues:[32],dataForFilter:[32],getSelectedItems:[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["p-6sdjvspw.system",[[1,"calcite-value-list",{compact:[516],disabled:[516],dragEnabled:[516,"drag-enabled"],filterEnabled:[516,"filter-enabled"],loading:[516],multiple:[516],textFilterPlaceholder:[513,"text-filter-placeholder"],selectedValues:[32],dataForFilter:[32],getSelectedItems:[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["p-eyyld3qp.system",[[1,"calcite-value-list-item",{compact:[516],disabled:[516],disableDeselect:[4,"disable-deselect"],handleActivated:[1028,"handle-activated"],icon:[513],metadata:[16],selected:[1540],textLabel:[513,"text-label"],textDescription:[513,"text-description"],value:[513],toggleSelected:[64]}]]],["p-5xdnupvw.system",[[1,"calcite-shell",{theme:[513]}],[1,"calcite-shell-panel",{collapsed:[516],detached:[516],detachedScale:[1,"detached-scale"],layout:[513]}]]],["p-tpumplm2.system",[[1,"calcite-pick-list-group",{textGroupTitle:[513,"text-group-title"]}]]],["p-sm1gzqpb.system",[[1,"calcite-sortable-list",{handleSelector:[1,"handle-selector"],disabled:[516],loading:[516],handleActivated:[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]]],["p-i9z36wup.system",[[1,"calcite-handle",{activated:[1540],textTitle:[1537,"text-title"],setFocus:[64]}]]],["p-9elatzth.system",[[1,"calcite-filter",{data:[16],textLabel:[1,"text-label"],textPlaceholder:[1,"text-placeholder"],empty:[32]}]]],["p-hcjwv65p.system",[[1,"calcite-action-bar",{expand:[516],expanded:[516],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],layout:[513],theme:[513]}],[1,"calcite-action-pad",{expand:[516],expanded:[516],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],layout:[513],theme:[513]}],[1,"calcite-action-group"],[1,"calcite-action",{appearance:[513],active:[516],compact:[516],disabled:[516],indicator:[516],label:[1],loading:[516],scale:[513],text:[1],textEnabled:[516,"text-enabled"],theme:[513],setFocus:[64]}]]],["p-mqb3bw3f.system",[[1,"calcite-flow-item",{beforeBack:[16],disabled:[516],heightScale:[513,"height-scale"],heading:[1],loading:[516],menuOpen:[516,"menu-open"],showBackButton:[4,"show-back-button"],summary:[1],textBack:[1,"text-back"],textClose:[1,"text-close"],textOpen:[1,"text-open"],theme:[513]}],[1,"calcite-flow",{theme:[513],flowCount:[32],flowDirection:[32],flows:[32],back:[64]},[[0,"calciteFlowItemBackClick","handleCalciteFlowItemBackClick"]]],[1,"calcite-panel",{dismissed:[1540],disabled:[516],dismissible:[516],heightScale:[513,"height-scale"],loading:[516],textClose:[1,"text-close"],theme:[513],setFocus:[64]}]]],["p-4gsepcis.system",[[1,"calcite-pick-list-item",{compact:[516],disabled:[516],disableDeselect:[4,"disable-deselect"],icon:[513],metadata:[16],selected:[1540],textDescription:[513,"text-description"],textLabel:[513,"text-label"],value:[513],toggleSelected:[64]}]]]],e)}))}}})); \ No newline at end of file +System.register(["./p-7b680867.system.js"],(function(){"use strict";var e,t;return{setters:[function(l){e=l.p;t=l.b}],execute:function(){e().then((function(e){return t([["p-k06xi37e.system",[[1,"calcite-tip",{dismissed:[1028],nonDismissible:[516,"non-dismissible"],heading:[1],selected:[516],textClose:[1,"text-close"],theme:[513]}],[1,"calcite-tip-manager",{closed:[516],textClose:[1,"text-close"],textDefaultTitle:[513,"text-default-title"],textNext:[1,"text-next"],textPaginationLabel:[513,"text-pagination-label"],textPrevious:[1,"text-previous"],theme:[513],selectedIndex:[32],tips:[32],total:[32],direction:[32],groupTitle:[32],nextTip:[64],previousTip:[64]}],[1,"calcite-tip-group",{textGroupTitle:[513,"text-group-title"]}]]],["p-gipoehmz.system",[[1,"calcite-block",{collapsible:[4],disabled:[516],dragHandle:[516,"drag-handle"],heading:[1],open:[516],loading:[516],summary:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],theme:[513]}],[1,"calcite-block-section",{open:[516],text:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],toggleDisplay:[513,"toggle-display"]}]]],["p-da58pbhy.system",[[1,"calcite-pick-list",{compact:[516],disabled:[516],filterEnabled:[516,"filter-enabled"],loading:[516],multiple:[516],textFilterPlaceholder:[513,"text-filter-placeholder"],selectedValues:[32],dataForFilter:[32],getSelectedItems:[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["p-6sdjvspw.system",[[1,"calcite-value-list",{compact:[516],disabled:[516],dragEnabled:[516,"drag-enabled"],filterEnabled:[516,"filter-enabled"],loading:[516],multiple:[516],textFilterPlaceholder:[513,"text-filter-placeholder"],selectedValues:[32],dataForFilter:[32],getSelectedItems:[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["p-eyyld3qp.system",[[1,"calcite-value-list-item",{compact:[516],disabled:[516],disableDeselect:[4,"disable-deselect"],handleActivated:[1028,"handle-activated"],icon:[513],metadata:[16],selected:[1540],textLabel:[513,"text-label"],textDescription:[513,"text-description"],value:[513],toggleSelected:[64]}]]],["p-5xdnupvw.system",[[1,"calcite-shell",{theme:[513]}],[1,"calcite-shell-panel",{collapsed:[516],detached:[516],detachedScale:[1,"detached-scale"],layout:[513]}]]],["p-tpumplm2.system",[[1,"calcite-pick-list-group",{textGroupTitle:[513,"text-group-title"]}]]],["p-sm1gzqpb.system",[[1,"calcite-sortable-list",{handleSelector:[1,"handle-selector"],disabled:[516],loading:[516],handleActivated:[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]]],["p-i9z36wup.system",[[1,"calcite-handle",{activated:[1540],textTitle:[1537,"text-title"],setFocus:[64]}]]],["p-tbfubelm.system",[[1,"calcite-filter",{data:[16],textLabel:[1,"text-label"],textPlaceholder:[1,"text-placeholder"],empty:[32]}]]],["p-hcjwv65p.system",[[1,"calcite-action-bar",{expand:[516],expanded:[516],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],layout:[513],theme:[513]}],[1,"calcite-action-pad",{expand:[516],expanded:[516],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],layout:[513],theme:[513]}],[1,"calcite-action-group"],[1,"calcite-action",{appearance:[513],active:[516],compact:[516],disabled:[516],indicator:[516],label:[1],loading:[516],scale:[513],text:[1],textEnabled:[516,"text-enabled"],theme:[513],setFocus:[64]}]]],["p-mqb3bw3f.system",[[1,"calcite-flow-item",{beforeBack:[16],disabled:[516],heightScale:[513,"height-scale"],heading:[1],loading:[516],menuOpen:[516,"menu-open"],showBackButton:[4,"show-back-button"],summary:[1],textBack:[1,"text-back"],textClose:[1,"text-close"],textOpen:[1,"text-open"],theme:[513]}],[1,"calcite-flow",{theme:[513],flowCount:[32],flowDirection:[32],flows:[32],back:[64]},[[0,"calciteFlowItemBackClick","handleCalciteFlowItemBackClick"]]],[1,"calcite-panel",{dismissed:[1540],disabled:[516],dismissible:[516],heightScale:[513,"height-scale"],loading:[516],textClose:[1,"text-close"],theme:[513],setFocus:[64]}]]],["p-v72mrutg.system",[[1,"calcite-pick-list-item",{compact:[516],disabled:[516],disableDeselect:[4,"disable-deselect"],icon:[513],metadata:[16],selected:[1540],textDescription:[513,"text-description"],textLabel:[513,"text-label"],value:[513],toggleSelected:[64]}]]]],e)}))}}})); \ No newline at end of file diff --git a/docs/build/p-pqrkoyb9.entry.js b/docs/build/p-boeqs3xb.entry.js similarity index 95% rename from docs/build/p-pqrkoyb9.entry.js rename to docs/build/p-boeqs3xb.entry.js index d2891fe4..6f8d87d6 100644 --- a/docs/build/p-pqrkoyb9.entry.js +++ b/docs/build/p-boeqs3xb.entry.js @@ -1 +1 @@ -import{r as t,c as s,h as e,H as i,g as a}from"./p-323e88a0.js";import{I as h}from"./p-4d533d6f.js";import{C as c,S as l,I as n}from"./p-0405e6a8.js";const r=class{constructor(e){t(this,e),this.compact=!1,this.disabled=!1,this.disableDeselect=!1,this.icon=null,this.selected=!1,this.pickListClickHandler=t=>{this.disabled||this.disableDeselect&&this.selected||(this.shiftPressed=t.shiftKey,this.selected=!this.selected)},this.pickListKeyDownHandler=t=>{if(" "===t.key){if(t.preventDefault(),this.disableDeselect&&this.selected)return;this.selected=!this.selected}},this.calciteListItemChange=s(this,"calciteListItemChange",7),this.calciteListItemPropsChange=s(this,"calciteListItemPropsChange",7),this.calciteListItemValueChange=s(this,"calciteListItemValueChange",7)}metadataWatchHandler(){this.calciteListItemPropsChange.emit()}selectedWatchHandler(){this.calciteListItemChange.emit({item:this.el,value:this.value,selected:this.selected,shiftPressed:this.shiftPressed}),this.shiftPressed=!1}textDescriptionWatchHandler(){this.calciteListItemPropsChange.emit()}textLabelWatchHandler(){this.calciteListItemPropsChange.emit()}valueWatchHandler(t,s){this.calciteListItemValueChange.emit({oldValue:s,newValue:t})}async toggleSelected(t){this.disabled||(this.selected="boolean"==typeof t?t:!this.selected)}renderIcon(){const{compact:t,icon:s,selected:i}=this;return!s||t?null:e("span",{class:c.icon},e("calcite-icon",{scale:"s",icon:s===h.square?i?n.checked:n.unchecked:i?n.selected:n.unselected}))}renderSecondaryAction(){return this.el.querySelector(`[slot=${l.secondaryAction}]`)?e("div",{class:c.action},e("slot",{name:l.secondaryAction})):null}render(){const t=this.textDescription&&!this.compact?e("span",{class:c.description},this.textDescription):null;return e(i,{role:"menuitemcheckbox","aria-checked":this.selected.toString()},e("label",{class:c.label,onClick:this.pickListClickHandler,onKeyDown:this.pickListKeyDownHandler,tabIndex:0,"aria-label":this.textLabel},this.renderIcon(),e("div",{class:c.textContainer},e("span",{class:c.title},this.textLabel),t)),this.renderSecondaryAction())}get el(){return a(this)}static get watchers(){return{metadata:["metadataWatchHandler"],selected:["selectedWatchHandler"],textDescription:["textDescriptionWatchHandler"],textLabel:["textLabelWatchHandler"],value:["valueWatchHandler"]}}static get style(){return":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-align:center;align-items:center;background-color:var(--calcite-app-background-clear);display:-ms-flexbox;display:flex;margin:0;color:var(--calcite-app-foreground);-webkit-transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);-webkit-animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#007ac2;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover),:host(:focus){background-color:var(--calcite-app-background-hover)}.icon{color:var(--calcite-app-foreground-link);-ms-flex:0 0 0%;flex:0 0 0%;line-height:0;width:var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing-quarter);opacity:0}:host([selected]) .icon{-webkit-transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);opacity:1}.label{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);-ms-flex-align:center;align-items:center;cursor:pointer}.label:focus{outline-offset:var(--calcite-app-outline-inset)}.text-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;overflow:hidden;pointer-events:none;padding:0 var(--calcite-app-side-spacing-quarter)}.title{font-size:var(--calcite-app-font-size-0);display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical}.description{color:var(--calcite-app-foreground-subtle);font-family:var(--calcite-app-font-family-monospace);font-size:var(--calcite-app-font-size--1);margin-top:var(--calcite-app-cap-spacing-quarter);display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical}.action{-ms-flex:0 0 0%;flex:0 0 0%;justify-self:flex-end;margin:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half)}"}};export{r as calcite_pick_list_item}; \ No newline at end of file +import{r as t,c as s,h as e,H as i,g as a}from"./p-323e88a0.js";import{I as h}from"./p-4d533d6f.js";import{C as c,S as l,I as n}from"./p-0405e6a8.js";const r=class{constructor(e){t(this,e),this.compact=!1,this.disabled=!1,this.disableDeselect=!1,this.icon=null,this.selected=!1,this.pickListClickHandler=t=>{this.disabled||this.disableDeselect&&this.selected||(this.shiftPressed=t.shiftKey,this.selected=!this.selected)},this.pickListKeyDownHandler=t=>{if(" "===t.key){if(t.preventDefault(),this.disableDeselect&&this.selected)return;this.selected=!this.selected}},this.calciteListItemChange=s(this,"calciteListItemChange",7),this.calciteListItemPropsChange=s(this,"calciteListItemPropsChange",7),this.calciteListItemValueChange=s(this,"calciteListItemValueChange",7)}metadataWatchHandler(){this.calciteListItemPropsChange.emit()}selectedWatchHandler(){this.calciteListItemChange.emit({item:this.el,value:this.value,selected:this.selected,shiftPressed:this.shiftPressed}),this.shiftPressed=!1}textDescriptionWatchHandler(){this.calciteListItemPropsChange.emit()}textLabelWatchHandler(){this.calciteListItemPropsChange.emit()}valueWatchHandler(t,s){this.calciteListItemValueChange.emit({oldValue:s,newValue:t})}async toggleSelected(t){this.disabled||(this.selected="boolean"==typeof t?t:!this.selected)}renderIcon(){const{compact:t,icon:s,selected:i}=this;return!s||t?null:e("span",{class:c.icon},e("calcite-icon",{scale:"s",icon:s===h.square?i?n.checked:n.unchecked:i?n.selected:n.unselected}))}renderSecondaryAction(){return this.el.querySelector(`[slot=${l.secondaryAction}]`)?e("div",{class:c.action},e("slot",{name:l.secondaryAction})):null}render(){const t=this.textDescription&&!this.compact?e("span",{class:c.description},this.textDescription):null;return e(i,{role:"menuitemcheckbox","aria-checked":this.selected.toString()},e("label",{class:c.label,onClick:this.pickListClickHandler,onKeyDown:this.pickListKeyDownHandler,tabIndex:0,"aria-label":this.textLabel},this.renderIcon(),e("div",{class:c.textContainer},e("span",{class:c.title},this.textLabel),t)),this.renderSecondaryAction())}get el(){return a(this)}static get watchers(){return{metadata:["metadataWatchHandler"],selected:["selectedWatchHandler"],textDescription:["textDescriptionWatchHandler"],textLabel:["textLabelWatchHandler"],value:["valueWatchHandler"]}}static get style(){return":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-align:center;align-items:center;background-color:var(--calcite-app-background-clear);display:-ms-flexbox;display:flex;margin:0;color:var(--calcite-app-foreground);-webkit-transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);-webkit-animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#007ac2;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover),:host(:focus){background-color:var(--calcite-app-background-hover)}.icon{color:var(--calcite-app-foreground-link);-ms-flex:0 0 0%;flex:0 0 0%;line-height:0;width:var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing-quarter);opacity:0}:host([selected]) .icon{-webkit-transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);opacity:1}.label{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);-ms-flex-align:center;align-items:center;cursor:pointer}.label:focus{outline-offset:var(--calcite-app-outline-inset)}.text-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;overflow:hidden;pointer-events:none;padding:0 var(--calcite-app-side-spacing-quarter)}.title{font-size:var(--calcite-app-font-size-0);display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical}.description{color:var(--calcite-app-foreground-subtle);font-family:var(--calcite-app-font-family-monospace);font-size:var(--calcite-app-font-size--1);margin-top:var(--calcite-app-cap-spacing-quarter);display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical}.action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;justify-self:flex-end;margin:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half)}"}};export{r as calcite_pick_list_item}; \ No newline at end of file diff --git a/docs/build/p-iz447tlc.entry.js b/docs/build/p-iz447tlc.entry.js new file mode 100644 index 00000000..012c9a69 --- /dev/null +++ b/docs/build/p-iz447tlc.entry.js @@ -0,0 +1 @@ +import{r as t,c as s,h as e,H as i,g as a}from"./p-323e88a0.js";import{d as c,f as l}from"./p-30ecf6c3.js";const r=class{constructor(e){t(this,e),this.empty=!0,this.filter=c(t=>{const s=new RegExp(t,"ig");if(0===this.data.length)return console.warn("No data was passed to calcite-filter.\n The data property expects an array of objects"),void this.calciteFilterChange.emit([]);const e=(t,s)=>{let i=!1;return l(t,t=>{"function"!=typeof t&&(Array.isArray(t)||"object"==typeof t&&null!==t?e(t,s)&&(i=!0):s.test(t)&&(i=!0))}),i},i=this.data.filter(t=>e(t,s));this.calciteFilterChange.emit(i)},250),this.inputHandler=t=>{const s=t.target;this.empty=""===s.value,this.filter(s.value)},this.clear=()=>{this.textInput.value="",this.empty=!0,this.calciteFilterChange.emit(this.data)},this.calciteFilterChange=s(this,"calciteFilterChange",7)}render(){return e(i,null,e("label",null,e("input",{type:"text",value:"",placeholder:this.textPlaceholder,onInput:this.inputHandler,"aria-label":this.textLabel||"filter",ref:t=>this.textInput=t}),e("div",{class:"search-icon"},e("calcite-icon",{scale:"s",icon:"search"}))),this.empty?null:e("button",{onClick:this.clear,class:"clear-button","aria-label":"Clear filter"},e("calcite-icon",{icon:"x"})))}get el(){return a(this)}static get style(){return":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half);width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#007ac2;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);overflow:hidden;position:relative;width:100%}input[type=text]{background-color:transparent;border:0;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);margin-bottom:calc(var(--calcite-app-cap-spacing-minimum) * 2);padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-quarter) var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-plus-half);-webkit-transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);width:100%}input[type=text]::-ms-clear{display:none}input[type=text]:focus{border-color:var(--calcite-app-foreground-active);-webkit-box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);outline:none;padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-quarter)}.search-icon{color:var(--calcite-app-foreground-subtle);display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.clear-button{color:var(--calcite-app-foreground);background:none;border:0;cursor:pointer}.clear-button:hover,.clear-button:focus{color:var(--calcite-app-foreground-hover)}.calcite--rtl input[type=text]{padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl .search-icon{left:unset;right:0}input[type=text]:focus~.search-icon{left:calc(var(--calcite-app-icon-size) * -1);opacity:0}"}};export{r as calcite_filter}; \ No newline at end of file diff --git a/docs/build/p-tbfubelm.system.entry.js b/docs/build/p-tbfubelm.system.entry.js new file mode 100644 index 00000000..addd8d61 --- /dev/null +++ b/docs/build/p-tbfubelm.system.entry.js @@ -0,0 +1 @@ +System.register(["./p-7b680867.system.js","./p-1071578d.system.js"],(function(e){"use strict";var t,r,a,n,i,c,l;return{setters:[function(e){t=e.r;r=e.c;a=e.h;n=e.H;i=e.g},function(e){c=e.d;l=e.f}],execute:function(){var u={searchIcon:"search-icon",clearButton:"clear-button"};var o={filterLabel:"filter",clear:"Clear filter"};var s={search:"search",close:"x"};var f=250;var h=e("calcite_filter",function(){function e(e){var a=this;t(this,e);this.empty=true;this.filter=c((function(e){var t=new RegExp(e,"ig");if(a.data.length===0){console.warn("No data was passed to calcite-filter.\n The data property expects an array of objects");a.calciteFilterChange.emit([]);return}var r=function(e,t){var a=false;l(e,(function(e){if(typeof e==="function"){return}if(Array.isArray(e)||typeof e==="object"&&e!==null){if(r(e,t)){a=true}}else if(t.test(e)){a=true}}));return a};var n=a.data.filter((function(e){return r(e,t)}));a.calciteFilterChange.emit(n)}),f);this.inputHandler=function(e){var t=e.target;a.empty=t.value==="";a.filter(t.value)};this.clear=function(){a.textInput.value="";a.empty=true;a.calciteFilterChange.emit(a.data)};this.calciteFilterChange=r(this,"calciteFilterChange",7)}e.prototype.render=function(){var e=this;return a(n,null,a("label",null,a("input",{type:"text",value:"",placeholder:this.textPlaceholder,onInput:this.inputHandler,"aria-label":this.textLabel||o.filterLabel,ref:function(t){return e.textInput=t}}),a("div",{class:u.searchIcon},a("calcite-icon",{scale:"s",icon:s.search}))),!this.empty?a("button",{onClick:this.clear,class:u.clearButton,"aria-label":o.clear},a("calcite-icon",{icon:s.close})):null)};Object.defineProperty(e.prototype,"el",{get:function(){return i(this)},enumerable:true,configurable:true});Object.defineProperty(e,"style",{get:function(){return":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half);width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#007ac2;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);overflow:hidden;position:relative;width:100%}input[type=text]{background-color:transparent;border:0;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);margin-bottom:calc(var(--calcite-app-cap-spacing-minimum) * 2);padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-quarter) var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-plus-half);-webkit-transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);width:100%}input[type=text]::-ms-clear{display:none}input[type=text]:focus{border-color:var(--calcite-app-foreground-active);-webkit-box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);outline:none;padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-quarter)}.search-icon{color:var(--calcite-app-foreground-subtle);display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.clear-button{color:var(--calcite-app-foreground);background:none;border:0;cursor:pointer}.clear-button:hover,.clear-button:focus{color:var(--calcite-app-foreground-hover)}.calcite--rtl input[type=text]{padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl .search-icon{left:unset;right:0}input[type=text]:focus~.search-icon{left:calc(var(--calcite-app-icon-size) * -1);opacity:0}"},enumerable:true,configurable:true});return e}())}}})); \ No newline at end of file diff --git a/docs/build/p-4gsepcis.system.entry.js b/docs/build/p-v72mrutg.system.entry.js similarity index 96% rename from docs/build/p-4gsepcis.system.entry.js rename to docs/build/p-v72mrutg.system.entry.js index 373672a2..aee49c21 100644 --- a/docs/build/p-4gsepcis.system.entry.js +++ b/docs/build/p-v72mrutg.system.entry.js @@ -1 +1 @@ -var __awaiter=this&&this.__awaiter||function(e,t,n,i){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,c){function s(e){try{l(i.next(e))}catch(t){c(t)}}function a(e){try{l(i["throw"](e))}catch(t){c(t)}}function l(e){e.done?n(e.value):r(e.value).then(s,a)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(c[0]&1)throw c[1];return c[1]},trys:[],ops:[]},i,r,c,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(e){return function(t){return l([e,t])}}function l(s){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(c=s[0]&2?r["return"]:s[0]?r["throw"]||((c=r["return"])&&c.call(r),0):r.next)&&!(c=c.call(r,s[1])).done)return c;if(r=0,c)s=[s[0]&2,c.value];switch(s[0]){case 0:case 1:c=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;r=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(c=n.trys,c=c.length>0&&c[c.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!c||s[1]>c[0]&&s[1]0&&c[c.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!c||s[1]>c[0]&&s[1]{const s=new RegExp(t,"ig");if(0===this.data.length)return console.warn("No data was passed to calcite-filter.\n The data property expects an array of objects"),void this.calciteFilterChange.emit([]);const e=(t,s)=>{let i=!1;return l(t,t=>{"function"!=typeof t&&(Array.isArray(t)||"object"==typeof t&&null!==t?e(t,s)&&(i=!0):s.test(t)&&(i=!0))}),i},i=this.data.filter(t=>e(t,s));this.calciteFilterChange.emit(i)},250),this.inputHandler=t=>{const s=t.target;this.empty=""===s.value,this.filter(s.value)},this.clear=()=>{this.el.shadowRoot.querySelector("input").value="",this.empty=!0,this.calciteFilterChange.emit(this.data)},this.calciteFilterChange=s(this,"calciteFilterChange",7)}render(){return e(i,null,e("label",null,e("input",{type:"text",value:"",placeholder:this.textPlaceholder,onInput:this.inputHandler,"aria-label":this.textLabel||"filter"}),e("div",{class:"search-icon"},e("calcite-icon",{scale:"s",icon:"search"}))),this.empty?null:e("button",{onClick:this.clear,class:"clear-button","aria-label":"Clear filter"},e("calcite-icon",{icon:"x"})))}get el(){return a(this)}static get style(){return":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half);width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#007ac2;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);overflow:hidden;position:relative;width:100%}input[type=text]{background-color:transparent;border:0;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);margin-bottom:calc(var(--calcite-app-cap-spacing-minimum) * 2);padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-quarter) var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-plus-half);-webkit-transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);width:100%}input[type=text]::-ms-clear{display:none}input[type=text]:focus{border-color:var(--calcite-app-foreground-active);-webkit-box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);outline:none;padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-quarter)}.search-icon{color:var(--calcite-app-foreground-subtle);display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.clear-button{color:var(--calcite-app-foreground);background:none;border:0;cursor:pointer}.clear-button:hover,.clear-button:focus{color:var(--calcite-app-foreground-hover)}.calcite--rtl input[type=text]{padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl .search-icon{left:unset;right:0}input[type=text]:focus~.search-icon{left:calc(var(--calcite-app-icon-size) * -1);opacity:0}"}};export{r as calcite_filter}; \ No newline at end of file diff --git a/docs/iframe.html b/docs/iframe.html index 8f356939..13c3650e 100644 --- a/docs/iframe.html +++ b/docs/iframe.html @@ -76,4 +76,4 @@ }

No Preview

Sorry, but you either have no stories or none are selected somehow.

  • Please check the Storybook config.
  • Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.


\ No newline at end of file
+      }
No Preview
Sorry, but you either have no stories or none are selected somehow.
  • Please check the Storybook config.
  • Try reloading the page.
If the problem persists, check the browser console, or the terminal you've run Storybook from.

\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index b9d4aed2..cbde1ab4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,4 +16,4 @@
   }

\ No newline at end of file
+      }

\ No newline at end of file
diff --git a/docs/main.5fd4b338549f0c7dd436.bundle.js b/docs/main.5fd4b338549f0c7dd436.bundle.js
new file mode 100644
index 00000000..8a52d328
--- /dev/null
+++ b/docs/main.5fd4b338549f0c7dd436.bundle.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1:function(n,o){},1267:function(n,o){},1288:function(n,o){},2:function(n,o){},3:function(n,o){},4:function(n,o){},5:function(n,o){},617:function(n,o,c){c(495),c(1060),c(667),n.exports=c(1058)},667:function(n,o,c){"use strict";c.r(o);c(668),c(940),c(1053)}},[[617,1,2]]]);
\ No newline at end of file
diff --git a/docs/main.6ed89cf18aa0fc32c807.bundle.js b/docs/main.6ed89cf18aa0fc32c807.bundle.js
deleted file mode 100644
index 835e0a6f..00000000
--- a/docs/main.6ed89cf18aa0fc32c807.bundle.js
+++ /dev/null
@@ -1,365 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1562:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){var _storybook_html__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(205),_storybook_addon_centered_html__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(515),_storybook_addon_centered_html__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_storybook_addon_centered_html__WEBPACK_IMPORTED_MODULE_1__),_theme__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(516);Object(_storybook_html__WEBPACK_IMPORTED_MODULE_0__.addDecorator)(_storybook_addon_centered_html__WEBPACK_IMPORTED_MODULE_1___default.a),Object(_storybook_html__WEBPACK_IMPORTED_MODULE_0__.addParameters)({backgrounds:[{name:"Light",value:"#f8f8f8",default:!0}],options:{theme:_theme__WEBPACK_IMPORTED_MODULE_2__.a,storySort:(a,b)=>{const sectionA=a[1].id.split("-")[0];return b[1].id.split("-")[0].localeCompare(sectionA)}}}),Object(_storybook_html__WEBPACK_IMPORTED_MODULE_0__.configure)(__webpack_require__(1595),module)}.call(this,__webpack_require__(1563)(module))},1595:function(module,exports,__webpack_require__){var map={"./1-introduction.stories.mdx":1596,"./2-getting-started.stories.mdx":1617,"./3-contributing.stories.mdx":1618,"./4-code-of-conduct.stories.mdx":1619,"./5-licensing.stories.mdx":1620,"./components/calcite-action-bar/calcite-action-bar.stories.ts":1621,"./components/calcite-action-pad/calcite-action-pad.stories.ts":1622,"./components/calcite-action/calcite-action.stories.ts":1623,"./components/calcite-block/calcite-block.stories.ts":1611,"./components/calcite-flow/calcite-flow.stories.ts":1610,"./components/calcite-panel/calcite-panel.stories.ts":1612,"./components/calcite-pick-list/calcite-pick-list.stories.ts":1624,"./components/calcite-shell/calcite-shell.stories.ts":1613,"./components/calcite-tip-manager/calcite-tip-manager.stories.ts":1614,"./components/calcite-tip/calcite-tip.stories.ts":1615,"./components/calcite-value-list/calcite-value-list.stories.ts":1625};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=1595},1596:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(3),__webpack_require__(50),__webpack_require__(39),__webpack_require__(11),__webpack_require__(4),__webpack_require__(155),__webpack_require__(156),__webpack_require__(5),__webpack_require__(44),__webpack_require__(0);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(8),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(41);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _extends(){return(_extends=Object.assign||function(target){for(var source,i=1;i Attributes = () => {\n  const group = "Flow";\n\n  return [\n    {\n      name: "dir",\n      value: select("dir", dir.values, dir.defaultValue, group)\n    },\n    {\n      name: "theme",\n      value: select("theme", theme.values, theme.defaultValue, group)\n    }\n  ];\n};\n\nconst createFlowItemAttributes: (group: string) => Attributes = (group) => {\n  return [\n    {\n      name: "disabled",\n      value: boolean("disabled", false, group)\n    },\n    {\n      name: "heading",\n      value: text("heading", "Heading", group)\n    },\n    {\n      name: "loading",\n      value: boolean("loading", false, group)\n    },\n    {\n      name: "menu-open",\n      value: boolean("menuOpen", false, group)\n    },\n    {\n      name: "summary",\n      value: text("summary", "Summary", group)\n    },\n    {\n      name: "text-back",\n      value: text("textBack", "Back", group)\n    },\n    {\n      name: "text-open",\n      value: text("textOpen", "Open", group)\n    }\n  ];\n};\n\nconst menuActionsHTML = dedent`\n  
\n    \n    \n    \n  
\n`;\n\nconst footerActionsHTML = dedent`\n  Save\n  Cancel\n`;\n\nfunction createItemHTML(content: string): string {\n  return `${menuActionsHTML}${content}${footerActionsHTML}`;\n}\n\nconst item1HTML = dedent`\n  
\n  Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae.\n  
\n  
\n  Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis leo.\n  
\n  
\n  Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti. Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.\n  
\n  
\n  Magna ligula neque phasellus. Velit duis auctor etiam nullam sociis nam neque quis. Donec fusce bibendum quam egestas sociosqu orci tempus vulputate egestas penatibus urna sociosqu. Nulla nam potenti diam egestas litora lobortis tristique maecenas pulvinar maecenas vitae tortor. Lacus purus facilisi est accumsan varius gravida facilisis rutrum tortor potenti rhoncus id. Ipsum praesent tristique blandit taciti morbi torquent pharetra fermentum aenean!\n  
\n  
\n  Congue eu duis integer nisl molestie nostra dis auctor lobortis tellus parturient. Porttitor dis curae; maecenas quis praesent ridiculus posuere mus. Dictumst, vivamus fames semper congue fusce! Nunc placerat enim fermentum posuere magna justo habitasse. Tristique placerat mauris, per nulla gravida dui urna ut nec venenatis! Non lacus iaculis quisque, neque erat integer. Duis tortor ad habitant turpis dis eu mollis at facilisis. Tellus nisl amet morbi fringilla mus dui neque himenaeos maecenas platea venenatis. Tristique nisl quisque ad aliquam senectus pulvinar litora.\n  
\n`;\n\nconst item2HTML = dedent`\n  
    \n    
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
    • \n    
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
    • \n    
  • Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
    • \n    
  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
    • \n  
\n`;\n\nexport const basic = () =>\n  create(\n    "calcite-flow",\n    createAttributes(),\n    `${create("calcite-flow-item", createFlowItemAttributes("Flow Item 1"), createItemHTML(item1HTML))}\n    ${create("calcite-flow-item", createFlowItemAttributes("Flow Item 2"), createItemHTML(item2HTML))}`\n  );\n',locationsMap:{"components-calcite-flow--basic":{startLoc:{col:21,line:123},endLoc:{col:3,line:129},startBody:{col:21,line:123},endBody:{col:3,line:129}}}},backgrounds:utils.b,docs:{page:utils.d},notes:{flow:Object(utils.c)('# calcite-flow\n\nThe `calcite-flow` component is a series of panels that provides a user with a workflow (eg. editing experience), by which the user can switch from panel to panel of `calcite-flow-item`s.\n\n\x3c!-- Auto Generated Below --\x3e\n\n## Usage\n\n### Basic\n\n#### Basic\n\nRenders a basic flow with a couple `calcite-flow-item`s.\n\n```html\n\n  \n    \x3c!-- image --\x3e\n  \n  \n    \x3c!-- image --\x3e\n  \n\n```\n\n#### Menu-actions and footer-actions\n\nRenders a flow with menu-actions and footer-actions in the form of buttons.\n\n```html\n\n  \n    
\n      \n      \n    
\n    
\n      \n      \n    
\n  \n\n```\n\n## Properties\n\n| Property | Attribute | Description                               | Type                | Default     |\n| -------- | --------- | ----------------------------------------- | ------------------- | ----------- |\n| `theme`  | `theme`   | Used to set the component\'s color scheme. | `"dark" or "light"` | `undefined` |\n\n## Methods\n\n### `back() => Promise`\n\nRemoves the currently active `calcite-flow-item`.\n\n#### Returns\n\nType: `Promise`\n\n## Slots\n\n| Slot | Description                                         |\n| ---- | --------------------------------------------------- |\n|      | A slot for adding `calcite-flow-item`s to the flow. |\n\n---\n\n_Built with [StencilJS](https://stenciljs.com/)_\n'),item:Object(utils.c)('# calcite-flow-item\n\nA `calcite-flow-item` is a child element of `calcite-flow` and lives in a panel with a heading and content.\n\n\x3c!-- Auto Generated Below --\x3e\n\n## Properties\n\n| Property         | Attribute          | Description                                                                                 | Type                  | Default      |\n| ---------------- | ------------------ | ------------------------------------------------------------------------------------------- | --------------------- | ------------ |\n| `beforeBack`     | --                 | When provided, this method will be called before it is removed from the parent flow.        | `() => Promise` | `undefined`  |\n| `disabled`       | `disabled`         | When true, disabled prevents interaction. This state shows items with lower opacity/grayed. | `boolean`             | `false`      |\n| `heading`        | `heading`          | Heading text.                                                                               | `string`              | `undefined`  |\n| `heightScale`    | `height-scale`     | Specifies the maxiumum height of the panel that this wraps.                                 | `"l" or "m" or "s"`   | `undefined`  |\n| `loading`        | `loading`          | When true, content is waiting to be loaded. This state shows a busy indicator.              | `boolean`             | `false`      |\n| `menuOpen`       | `menu-open`        | Opens the action menu.                                                                      | `boolean`             | `false`      |\n| `showBackButton` | `show-back-button` | Shows a back button in the header.                                                          | `boolean`             | `false`      |\n| `summary`        | `summary`          | Summary text. A description displayed underneath the heading.                               | `string`              | `undefined`  |\n| `textBack`       | `text-back`        | \'Back\' text string.                                                                         | `string`              | `TEXT.back`  |\n| `textClose`      | `text-close`       | \'Close\' text string for the menu.                                                           | `string`              | `TEXT.close` |\n| `textOpen`       | `text-open`        | \'Open\' text string for the menu.                                                            | `string`              | `TEXT.open`  |\n| `theme`          | `theme`            | Used to set the component\'s color scheme.                                                   | `"dark" or "light"`   | `undefined`  |\n\n## Events\n\n| Event                      | Description                                    | Type               |\n| -------------------------- | ---------------------------------------------- | ------------------ |\n| `calciteFlowItemBackClick` | Emitted when the back button has been clicked. | `CustomEvent` |\n\n## Slots\n\n| Slot               | Description                                                                                                                     |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------------- |\n|                    | A slot for adding content to the flow item.                                                                                     |\n| `"footer-actions"` | A slot for adding `calcite-button`s to the footer.                                                                              |\n| `"menu-actions"`   | A slot for adding `calcite-action`s to a menu under the `...` in the header. These actions are displayed when the menu is open. |\n\n## Dependencies\n\n### Depends on\n\n- [calcite-action](../calcite-action)\n- [calcite-panel](../calcite-panel)\n\n### Graph\n\n```mermaid\ngraph TD;\n  calcite-flow-item --\x3e calcite-action\n  calcite-flow-item --\x3e calcite-panel\n  calcite-panel --\x3e calcite-action\n  style calcite-flow-item fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n---\n\n_Built with [StencilJS](https://stenciljs.com/)_\n')}}};const createFlowItemAttributes=group=>[{name:"disabled",value:Object(dist.boolean)("disabled",!1,group)},{name:"heading",value:Object(dist.text)("heading","Heading",group)},{name:"loading",value:Object(dist.boolean)("loading",!1,group)},{name:"menu-open",value:Object(dist.boolean)("menuOpen",!1,group)},{name:"summary",value:Object(dist.text)("summary","Summary",group)},{name:"text-back",value:Object(dist.text)("textBack","Back",group)},{name:"text-open",value:Object(dist.text)("textOpen","Open",group)}],menuActionsHTML=dedent_default.a`
-  

-    
-    
-    
-  

-`,footerActionsHTML=dedent_default.a`
-  Save
-  Cancel
-`;function createItemHTML(content){return`${menuActionsHTML}${content}${footerActionsHTML}`}const item1HTML=dedent_default.a`
-  

-  Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae.
-  

-  

-  Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis leo.
-  

-  

-  Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti. Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.
-  

-  

-  Magna ligula neque phasellus. Velit duis auctor etiam nullam sociis nam neque quis. Donec fusce bibendum quam egestas sociosqu orci tempus vulputate egestas penatibus urna sociosqu. Nulla nam potenti diam egestas litora lobortis tristique maecenas pulvinar maecenas vitae tortor. Lacus purus facilisi est accumsan varius gravida facilisis rutrum tortor potenti rhoncus id. Ipsum praesent tristique blandit taciti morbi torquent pharetra fermentum aenean!
-  

-  

-  Congue eu duis integer nisl molestie nostra dis auctor lobortis tellus parturient. Porttitor dis curae; maecenas quis praesent ridiculus posuere mus. Dictumst, vivamus fames semper congue fusce! Nunc placerat enim fermentum posuere magna justo habitasse. Tristique placerat mauris, per nulla gravida dui urna ut nec venenatis! Non lacus iaculis quisque, neque erat integer. Duis tortor ad habitant turpis dis eu mollis at facilisis. Tellus nisl amet morbi fringilla mus dui neque himenaeos maecenas platea venenatis. Tristique nisl quisque ad aliquam senectus pulvinar litora.
-  

-`,item2HTML=dedent_default.a`
-  
    
-    
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
    • 
-    
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
    • 
-    
  • Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
    • 
-    
  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
    • 
-  

-`,basic=addSourceDecorator(()=>Object(utils.a)("calcite-flow",[{name:"dir",value:Object(dist.select)("dir",dir.values,dir.defaultValue,"Flow")},{name:"theme",value:Object(dist.select)("theme",theme.values,theme.defaultValue,"Flow")}],`${Object(utils.a)("calcite-flow-item",createFlowItemAttributes("Flow Item 1"),createItemHTML(item1HTML))}\n    ${Object(utils.a)("calcite-flow-item",createFlowItemAttributes("Flow Item 2"),createItemHTML(item2HTML))}`),{__STORY__:'import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";\nimport {\n  Attributes,\n  createComponentHTML as create,\n  darkBackground,\n  parseReadme,\n  titlelessDocsPage\n} from "../../../.storybook/utils";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\nconst { dir, theme } = ATTRIBUTES;\nimport readme from "./readme.md";\nimport itemReadme from "../calcite-flow-item/readme.md";\nimport { SLOTS } from "../calcite-flow-item/resources";\nimport dedent from "dedent";\n\nexport default {\n  title: "components|calcite-flow",\n  decorators: [withKnobs],\n  parameters: {\n    backgrounds: darkBackground,\n    docs: {\n      page: titlelessDocsPage\n    },\n    notes: {\n      flow: parseReadme(readme),\n      item: parseReadme(itemReadme)\n    }\n  }\n};\n\nconst createAttributes: () => Attributes = () => {\n  const group = "Flow";\n\n  return [\n    {\n      name: "dir",\n      value: select("dir", dir.values, dir.defaultValue, group)\n    },\n    {\n      name: "theme",\n      value: select("theme", theme.values, theme.defaultValue, group)\n    }\n  ];\n};\n\nconst createFlowItemAttributes: (group: string) => Attributes = (group) => {\n  return [\n    {\n      name: "disabled",\n      value: boolean("disabled", false, group)\n    },\n    {\n      name: "heading",\n      value: text("heading", "Heading", group)\n    },\n    {\n      name: "loading",\n      value: boolean("loading", false, group)\n    },\n    {\n      name: "menu-open",\n      value: boolean("menuOpen", false, group)\n    },\n    {\n      name: "summary",\n      value: text("summary", "Summary", group)\n    },\n    {\n      name: "text-back",\n      value: text("textBack", "Back", group)\n    },\n    {\n      name: "text-open",\n      value: text("textOpen", "Open", group)\n    }\n  ];\n};\n\nconst menuActionsHTML = dedent`\n  
\n    \n    \n    \n  
\n`;\n\nconst footerActionsHTML = dedent`\n  Save\n  Cancel\n`;\n\nfunction createItemHTML(content: string): string {\n  return `${menuActionsHTML}${content}${footerActionsHTML}`;\n}\n\nconst item1HTML = dedent`\n  
\n  Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae.\n  
\n  
\n  Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis leo.\n  
\n  
\n  Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti. Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.\n  
\n  
\n  Magna ligula neque phasellus. Velit duis auctor etiam nullam sociis nam neque quis. Donec fusce bibendum quam egestas sociosqu orci tempus vulputate egestas penatibus urna sociosqu. Nulla nam potenti diam egestas litora lobortis tristique maecenas pulvinar maecenas vitae tortor. Lacus purus facilisi est accumsan varius gravida facilisis rutrum tortor potenti rhoncus id. Ipsum praesent tristique blandit taciti morbi torquent pharetra fermentum aenean!\n  
\n  
\n  Congue eu duis integer nisl molestie nostra dis auctor lobortis tellus parturient. Porttitor dis curae; maecenas quis praesent ridiculus posuere mus. Dictumst, vivamus fames semper congue fusce! Nunc placerat enim fermentum posuere magna justo habitasse. Tristique placerat mauris, per nulla gravida dui urna ut nec venenatis! Non lacus iaculis quisque, neque erat integer. Duis tortor ad habitant turpis dis eu mollis at facilisis. Tellus nisl amet morbi fringilla mus dui neque himenaeos maecenas platea venenatis. Tristique nisl quisque ad aliquam senectus pulvinar litora.\n  
\n`;\n\nconst item2HTML = dedent`\n  
    \n    
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
    • \n    
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
    • \n    
  • Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
    • \n    
  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
    • \n  
\n`;\n\nexport const basic = () =>\n  create(\n    "calcite-flow",\n    createAttributes(),\n    `${create("calcite-flow-item", createFlowItemAttributes("Flow Item 1"), createItemHTML(item1HTML))}\n    ${create("calcite-flow-item", createFlowItemAttributes("Flow Item 2"), createItemHTML(item2HTML))}`\n  );\n',__ADDS_MAP__:{"components-calcite-flow--basic":{startLoc:{col:21,line:123},endLoc:{col:3,line:129},startBody:{col:21,line:123},endBody:{col:3,line:129}}},__MAIN_FILE_LOCATION__:"/calcite-flow.stories.ts",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/Users/juan6600/dev/projects/calcite-app-components/src/components/calcite-flow",__IDS_TO_FRAMEWORKS__:{}})},1611:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var dist=__webpack_require__(1),utils=__webpack_require__(2),resources=__webpack_require__(38),dedent=__webpack_require__(12),dedent_default=__webpack_require__.n(dedent);__webpack_require__.d(__webpack_exports__,"basic",(function(){return basic})),__webpack_require__.d(__webpack_exports__,"withHeaderControl",(function(){return withHeaderControl})),__webpack_require__.d(__webpack_exports__,"withIconAndHeader",(function(){return withIconAndHeader}));__webpack_require__(37).withSource;var addSourceDecorator=__webpack_require__(37).addSource,__SOURCE_PREFIX__="/Users/juan6600/dev/projects/calcite-app-components/src/components/calcite-block",__STORY__='import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";\nimport {\n  Attribute,\n  Attributes,\n  createComponentHTML as create,\n  darkBackground,\n  parseReadme,\n  titlelessDocsPage\n} from "../../../.storybook/utils";\nimport blockReadme from "./readme.md";\nimport sectionReadme from "../calcite-block-section/readme.md";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\nimport dedent from "dedent";\n\nexport default {\n  title: "components|calcite-block",\n  decorators: [withKnobs],\n  parameters: {\n    backgrounds: darkBackground,\n    docs: {\n      page: titlelessDocsPage\n    },\n    notes: {\n      block: parseReadme(blockReadme),\n      section: parseReadme(sectionReadme)\n    }\n  }\n};\n\nconst createBlockAttributes: (options?: { except: string[] }) => Attributes = ({ except } = { except: [] }) => {\n  const group = "block";\n  const { dir, theme } = ATTRIBUTES;\n\n  interface DeferredAttribute {\n    name: string;\n    commit: () => Attribute;\n  }\n\n  return ([\n    {\n      name: "heading",\n      commit() {\n        this.value = text("heading", "Heading", group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "dir",\n      commit() {\n        this.value = select("dir", dir.values, dir.defaultValue, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "summary",\n      commit() {\n        this.value = text("summary", "summary", group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "open",\n      commit() {\n        this.value = boolean("open", true, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "collapsible",\n      commit() {\n        this.value = boolean("collapsible", true, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "loading",\n      commit() {\n        this.value = boolean("loading", false, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "disabled",\n      commit() {\n        this.value = boolean("disabled", false, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "theme",\n      commit() {\n        this.value = select("theme", theme.values, theme.defaultValue, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "text-collapse",\n      commit() {\n        this.value = text("textCollapse", "Collapse", group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "text-expand",\n      commit() {\n        this.value = text("textExpand", "Expand", group);\n        delete this.build;\n        return this;\n      }\n    }\n  ] as DeferredAttribute[])\n    .filter((attr) => !except.find((excluded) => excluded === attr.name))\n    .map((attr) => attr.commit());\n};\n\nconst createSectionAttributes: () => Attributes = () => {\n  const group = "section (animals)";\n  const toggleDisplayOptions = ["button", "switch"];\n\n  return [\n    {\n      name: "text",\n      value: text("text", "Animals", group)\n    },\n    {\n      name: "open",\n      value: boolean("open", true, group)\n    },\n    {\n      name: "toggle-display",\n      value: select("toggleDisplay", toggleDisplayOptions, toggleDisplayOptions[0], group)\n    },\n    {\n      name: "text-collapse",\n      value: text("textCollapse", "Collapse", group)\n    },\n    {\n      name: "text-expand",\n      value: text("textExpand", "Expand", group)\n    }\n  ];\n};\n\nexport const basic = () =>\n  create(\n    "calcite-block",\n    createBlockAttributes(),\n    dedent`\n    ${create(\n      "calcite-block-section",\n      createSectionAttributes(),\n      `demo`\n    )}\n\n    \n      demo\n    \n  `\n  );\n\nexport const withHeaderControl = () =>\n  create(\n    "calcite-block",\n    createBlockAttributes({ except: ["open", "collapsible"] }),\n    ``\n  );\n\nexport const withIconAndHeader = () =>\n  create("calcite-block", createBlockAttributes({ except: ["open", "collapsible"] }), `
✅
`);\n',__ADDS_MAP__={"components-calcite-block--basic":{startLoc:{col:21,line:153},endLoc:{col:3,line:168},startBody:{col:21,line:153},endBody:{col:3,line:168}},"components-calcite-block--with-header-control":{startLoc:{col:33,line:170},endLoc:{col:3,line:175},startBody:{col:33,line:170},endBody:{col:3,line:175}},"components-calcite-block--with-icon-and-header":{startLoc:{col:33,line:177},endLoc:{col:113,line:178},startBody:{col:33,line:177},endBody:{col:113,line:178}}},__MODULE_DEPENDENCIES__=[],__LOCAL_DEPENDENCIES__={},__IDS_TO_FRAMEWORKS__={};__webpack_exports__.default={title:"components|calcite-block",decorators:[dist.withKnobs],parameters:{storySource:{source:'import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";\nimport {\n  Attribute,\n  Attributes,\n  createComponentHTML as create,\n  darkBackground,\n  parseReadme,\n  titlelessDocsPage\n} from "../../../.storybook/utils";\nimport blockReadme from "./readme.md";\nimport sectionReadme from "../calcite-block-section/readme.md";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\nimport dedent from "dedent";\n\nexport default {\n  title: "components|calcite-block",\n  decorators: [withKnobs],\n  parameters: {\n    backgrounds: darkBackground,\n    docs: {\n      page: titlelessDocsPage\n    },\n    notes: {\n      block: parseReadme(blockReadme),\n      section: parseReadme(sectionReadme)\n    }\n  }\n};\n\nconst createBlockAttributes: (options?: { except: string[] }) => Attributes = ({ except } = { except: [] }) => {\n  const group = "block";\n  const { dir, theme } = ATTRIBUTES;\n\n  interface DeferredAttribute {\n    name: string;\n    commit: () => Attribute;\n  }\n\n  return ([\n    {\n      name: "heading",\n      commit() {\n        this.value = text("heading", "Heading", group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "dir",\n      commit() {\n        this.value = select("dir", dir.values, dir.defaultValue, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "summary",\n      commit() {\n        this.value = text("summary", "summary", group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "open",\n      commit() {\n        this.value = boolean("open", true, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "collapsible",\n      commit() {\n        this.value = boolean("collapsible", true, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "loading",\n      commit() {\n        this.value = boolean("loading", false, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "disabled",\n      commit() {\n        this.value = boolean("disabled", false, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "theme",\n      commit() {\n        this.value = select("theme", theme.values, theme.defaultValue, group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "text-collapse",\n      commit() {\n        this.value = text("textCollapse", "Collapse", group);\n        delete this.build;\n        return this;\n      }\n    },\n    {\n      name: "text-expand",\n      commit() {\n        this.value = text("textExpand", "Expand", group);\n        delete this.build;\n        return this;\n      }\n    }\n  ] as DeferredAttribute[])\n    .filter((attr) => !except.find((excluded) => excluded === attr.name))\n    .map((attr) => attr.commit());\n};\n\nconst createSectionAttributes: () => Attributes = () => {\n  const group = "section (animals)";\n  const toggleDisplayOptions = ["button", "switch"];\n\n  return [\n    {\n      name: "text",\n      value: text("text", "Animals", group)\n    },\n    {\n      name: "open",\n      value: boolean("open", true, group)\n    },\n    {\n      name: "toggle-display",\n      value: select("toggleDisplay", toggleDisplayOptions, toggleDisplayOptions[0], group)\n    },\n    {\n      name: "text-collapse",\n      value: text("textCollapse", "Collapse", group)\n    },\n    {\n      name: "text-expand",\n      value: text("textExpand", "Expand", group)\n    }\n  ];\n};\n\nexport const basic = () =>\n  create(\n    "calcite-block",\n    createBlockAttributes(),\n    dedent`\n    ${create(\n      "calcite-block-section",\n      createSectionAttributes(),\n      `demo`\n    )}\n\n    \n      demo\n    \n  `\n  );\n\nexport const withHeaderControl = () =>\n  create(\n    "calcite-block",\n    createBlockAttributes({ except: ["open", "collapsible"] }),\n    ``\n  );\n\nexport const withIconAndHeader = () =>\n  create("calcite-block", createBlockAttributes({ except: ["open", "collapsible"] }), `
✅
`);\n',locationsMap:{"components-calcite-block--basic":{startLoc:{col:21,line:153},endLoc:{col:3,line:168},startBody:{col:21,line:153},endBody:{col:3,line:168}},"components-calcite-block--with-header-control":{startLoc:{col:33,line:170},endLoc:{col:3,line:175},startBody:{col:33,line:170},endBody:{col:3,line:175}},"components-calcite-block--with-icon-and-header":{startLoc:{col:33,line:177},endLoc:{col:113,line:178},startBody:{col:33,line:177},endBody:{col:113,line:178}}}},backgrounds:utils.b,docs:{page:utils.d},notes:{block:Object(utils.c)('# calcite-block\n\nThe `calcite-block` component is intended for displaying a heading and content. Content can also include stacked, collapsible `calcite-block-section`s typically housed in a panel.\n\n\x3c!-- Auto Generated Below --\x3e\n\n## Usage\n\n### Basic\n\n#### Default (non-collapsible)\n\n```html\n \n```\n\n#### Header with control\n\nRenders a header and control with a slot for adding a single HTML element (in the header).\n\n```html\n\n  
\n\n```\n\n#### Header with Icon\n\nRenders a header and icon with the icon.\n\n```html\n\n  
🤯
\n\n```\n\n#### Header with content (always open)\n\nRenders a header and content that remains open - no collapsible option.\n\n```html\n\n  
Father or Son?
\n\n```\n\n#### Header with content (collapsible)\n\nRenders a header with a clickable icon to toggle the block open and closed.\n\n```html\n\n   \n\n```\n\n## Properties\n\n| Property       | Attribute       | Description                                                                                 | Type                | Default         |\n| -------------- | --------------- | ------------------------------------------------------------------------------------------- | ------------------- | --------------- |\n| `collapsible`  | `collapsible`   | When true, this block will be collapsible.                                                  | `boolean`           | `false`         |\n| `disabled`     | `disabled`      | When true, disabled prevents interaction. This state shows items with lower opacity/grayed. | `boolean`           | `false`         |\n| `dragHandle`   | `drag-handle`   | When true, displays a drag handle in the header.                                            | `boolean`           | `false`         |\n| `heading`      | `heading`       | Block heading.                                                                              | `string`            | `undefined`     |\n| `loading`      | `loading`       | When true, content is waiting to be loaded. This state shows a busy indicator.              | `boolean`           | `false`         |\n| `open`         | `open`          | When true, the block\'s content will be displayed.                                           | `boolean`           | `false`         |\n| `summary`      | `summary`       | Block summary.                                                                              | `string`            | `undefined`     |\n| `textCollapse` | `text-collapse` | Tooltip used for the toggle when expanded.                                                  | `string`            | `TEXT.collapse` |\n| `textExpand`   | `text-expand`   | Tooltip used for the toggle when collapsed.                                                 | `string`            | `TEXT.expand`   |\n| `theme`        | `theme`         | Used to set the component\'s color scheme.                                                   | `"dark" or "light"` | `undefined`     |\n\n## Events\n\n| Event                | Description                               | Type               |\n| -------------------- | ----------------------------------------- | ------------------ |\n| `calciteBlockToggle` | Emitted when the header has been clicked. | `CustomEvent` |\n\n## Slots\n\n| Slot        | Description                                                |\n| ----------- | ---------------------------------------------------------- |\n|             | A slot for adding content to the block.                    |\n| `"control"` | A slot for adding a single HTML input element in a header. |\n| `"icon"`    | A slot for adding a trailing header icon.                  |\n\n## Dependencies\n\n### Depends on\n\n- [calcite-handle](../calcite-handle)\n\n### Graph\n\n```mermaid\ngraph TD;\n  calcite-block --\x3e calcite-handle\n  style calcite-block fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n---\n\n_Built with [StencilJS](https://stenciljs.com/)_\n'),section:Object(utils.c)('# calcite-block-section\n\nThe `calcite-block-section` component is a child element of `calcite-block`. Sections can have their own header and content and can be toggled open or closed.\n\n\x3c!-- Auto Generated Below --\x3e\n\n## Properties\n\n| Property        | Attribute        | Description                                                                                                                                                                      | Type                   | Default         |\n| --------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------- |\n| `open`          | `open`           | When true, the block\'s section content will be displayed.                                                                                                                        | `boolean`              | `false`         |\n| `text`          | `text`           | Text displayed in the button.                                                                                                                                                    | `string`               | `undefined`     |\n| `textCollapse`  | `text-collapse`  | Tooltip used for the toggle when expanded.                                                                                                                                       | `string`               | `TEXT.collapse` |\n| `textExpand`    | `text-expand`    | Tooltip used for the toggle when collapsed.                                                                                                                                      | `string`               | `TEXT.expand`   |\n| `toggleDisplay` | `toggle-display` | This property determines the look of the section toggle. If the value is "switch", a toggle-switch will be displayed. If the value is "button", a clickable header is displayed. | `"button" or "switch"` | `"button"`      |\n\n## Events\n\n| Event                       | Description                               | Type               |\n| --------------------------- | ----------------------------------------- | ------------------ |\n| `calciteBlockSectionToggle` | Emitted when the header has been clicked. | `CustomEvent` |\n\n## Slots\n\n| Slot | Description                                     |\n| ---- | ----------------------------------------------- |\n|      | A slot for adding content to the block section. |\n\n## Dependencies\n\n### Depends on\n\n- [calcite-action](../calcite-action)\n\n### Graph\n\n```mermaid\ngraph TD;\n  calcite-block-section --\x3e calcite-action\n  style calcite-block-section fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n---\n\n_Built with [StencilJS](https://stenciljs.com/)_\n')}}};const createBlockAttributes=({except:except}={except:[]})=>{const group="block",{dir:dir,theme:theme}=resources.a;return[{name:"heading",commit(){return this.value=Object(dist.text)("heading","Heading",group),delete this.build,this}},{name:"dir",commit(){return this.value=Object(dist.select)("dir",dir.values,dir.defaultValue,group),delete this.build,this}},{name:"summary",commit(){return this.value=Object(dist.text)("summary","summary",group),delete this.build,this}},{name:"open",commit(){return this.value=Object(dist.boolean)("open",!0,group),delete this.build,this}},{name:"collapsible",commit(){return this.value=Object(dist.boolean)("collapsible",!0,group),delete this.build,this}},{name:"loading",commit(){return this.value=Object(dist.boolean)("loading",!1,group),delete this.build,this}},{name:"disabled",commit(){return this.value=Object(dist.boolean)("disabled",!1,group),delete this.build,this}},{name:"theme",commit(){return this.value=Object(dist.select)("theme",theme.values,theme.defaultValue,group),delete this.build,this}},{name:"text-collapse",commit(){return this.value=Object(dist.text)("textCollapse","Collapse",group),delete this.build,this}},{name:"text-expand",commit(){return this.value=Object(dist.text)("textExpand","Expand",group),delete this.build,this}}].filter(attr=>!except.find(excluded=>excluded===attr.name)).map(attr=>attr.commit())},basic=addSourceDecorator(()=>Object(utils.a)("calcite-block",createBlockAttributes(),dedent_default.a`
-    ${Object(utils.a)("calcite-block-section",(()=>{const group="section (animals)",toggleDisplayOptions=["button","switch"];return[{name:"text",value:Object(dist.text)("text","Animals",group)},{name:"open",value:Object(dist.boolean)("open",!0,group)},{name:"toggle-display",value:Object(dist.select)("toggleDisplay",toggleDisplayOptions,toggleDisplayOptions[0],group)},{name:"text-collapse",value:Object(dist.text)("textCollapse","Collapse",group)},{name:"text-expand",value:Object(dist.text)("textExpand","Expand",group)}]})(),'demo')}
-
-    
-      demo
-    
-  `),{__STORY__:__STORY__,__ADDS_MAP__:__ADDS_MAP__,__MAIN_FILE_LOCATION__:"/calcite-block.stories.ts",__MODULE_DEPENDENCIES__:__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__:__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__:__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__:__IDS_TO_FRAMEWORKS__}),withHeaderControl=addSourceDecorator(()=>Object(utils.a)("calcite-block",createBlockAttributes({except:["open","collapsible"]}),''),{__STORY__:__STORY__,__ADDS_MAP__:__ADDS_MAP__,__MAIN_FILE_LOCATION__:"/calcite-block.stories.ts",__MODULE_DEPENDENCIES__:__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__:__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__:__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__:__IDS_TO_FRAMEWORKS__}),withIconAndHeader=addSourceDecorator(()=>Object(utils.a)("calcite-block",createBlockAttributes({except:["open","collapsible"]}),'
✅
'),{__STORY__:__STORY__,__ADDS_MAP__:__ADDS_MAP__,__MAIN_FILE_LOCATION__:"/calcite-block.stories.ts",__MODULE_DEPENDENCIES__:__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__:__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__:__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__:__IDS_TO_FRAMEWORKS__})},1612:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var dist=__webpack_require__(1),utils=__webpack_require__(2),resources=__webpack_require__(38);const SLOTS_headerContent="header-content",SLOTS_headerLeadingContent="header-leading-content",SLOTS_headerTrailingContent="header-trailing-content",SLOTS_footer="footer";var dedent=__webpack_require__(12),dedent_default=__webpack_require__.n(dedent);__webpack_require__.d(__webpack_exports__,"basic",(function(){return basic}));__webpack_require__(37).withSource;var addSourceDecorator=__webpack_require__(37).addSource;const{dir:dir,theme:theme,scale:scale}=resources.a;__webpack_exports__.default={title:"components|calcite-panel",decorators:[dist.withKnobs],parameters:{storySource:{source:'import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";\nimport {\n  Attributes,\n  createComponentHTML as create,\n  darkBackground,\n  parseReadme,\n  titlelessDocsPage\n} from "../../../.storybook/utils";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\nconst { dir, theme, scale } = ATTRIBUTES;\nimport readme from "./readme.md";\nimport { SLOTS } from "./resources";\nimport dedent from "dedent";\n\nexport default {\n  title: "components|calcite-panel",\n  decorators: [withKnobs],\n  parameters: {\n    backgrounds: darkBackground,\n    docs: {\n      page: titlelessDocsPage\n    },\n    notes: parseReadme(readme)\n  }\n};\n\nconst createAttributes: () => Attributes = () => [\n  {\n    name: "dir",\n    value: select("dir", dir.values, dir.defaultValue)\n  },\n  {\n    name: "dismissed",\n    value: boolean("dismissed", false)\n  },\n  {\n    name: "disabled",\n    value: boolean("disabled", false)\n  },\n  {\n    name: "dismissible",\n    value: boolean("dismissible", false)\n  },\n  {\n    name: "height-scale",\n    value: select("heightScale", scale.values, scale.defaultValue)\n  },\n  {\n    name: "loading",\n    value: boolean("loading", false)\n  },\n  {\n    name: "text-close",\n    value: text("textClose", "Close")\n  },\n  {\n    name: "theme",\n    value: select("theme", theme.values, theme.defaultValue)\n  }\n];\n\nconst headerHTML = `
Heading
`;\n\nconst contentHTML = dedent`\n  
\n  Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae.\n  
\n  
\n  Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis leo.\n  
\n  
\n  Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti. Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.\n  
\n`;\n\nconst footerHTML = dedent`\n  Yeah!\n  Naw.\n`;\n\nexport const basic = () =>\n  create(\n    "calcite-panel",\n    createAttributes(),\n    `${headerHTML}\n    \n    \n    ${contentHTML}\n    ${footerHTML}`\n  );\n',locationsMap:{"components-calcite-panel--basic":{startLoc:{col:21,line:81},endLoc:{col:3,line:90},startBody:{col:21,line:81},endBody:{col:3,line:90}}}},backgrounds:utils.b,docs:{page:utils.d},notes:Object(utils.c)('# calcite-panel\n\nThe `calcite-panel` component is a container for a header, content and optional footer. The header will have centered content as well as optional leading and trailing content. The panel can also be setup to be dismissible which allows it to be closed by a user.\n\n\x3c!-- Auto Generated Below --\x3e\n\n## Usage\n\n### Basic\n\n#### Basic\n\nRenders a basic panel with a header.\n\n```html\n\n  
Header!
\n  
Slotted content!
\n\n```\n\n#### With footer\n\nRenders a panel with a header and a footer.\n\n```html\n\n  
Header!
\n  
I have a footer.
\n  
Footer!
\n\n```\n\n#### Header with actions\n\nRenders a panel with leading and trailing `calcite-action`s.\n\n```html\n\n  
\n    \n      \n    \n  
\n  
Header!
\n  
\n    \n      \n    \n  
\n  
Actions are in the top left and right.
\n\n```\n\n#### Dismissible panel\n\nRenders a panel that is dismissible with a click of the "x".\n\n```html\n\n  
Dismissible Header
\n  
Click the X and I go away!
\n\n```\n\n## Properties\n\n| Property      | Attribute      | Description                                                                                               | Type                | Default      |\n| ------------- | -------------- | --------------------------------------------------------------------------------------------------------- | ------------------- | ------------ |\n| `disabled`    | `disabled`     | When true, disabled prevents interaction. This state shows items with lower opacity/grayed.               | `boolean`           | `false`      |\n| `dismissed`   | `dismissed`    | Hides the panel.                                                                                          | `boolean`           | `false`      |\n| `dismissible` | `dismissible`  | Displays a close button in the trailing side of the header.                                               | `boolean`           | `false`      |\n| `heightScale` | `height-scale` | Specifies the maxiumum height of the panel.                                                               | `"l" or "m" or "s"` | `undefined`  |\n| `loading`     | `loading`      | When true, content is waiting to be loaded. This state shows a busy indicator.                            | `boolean`           | `false`      |\n| `textClose`   | `text-close`   | \'Close\' text string for the close button. The close button will only be shown when \'dismissible\' is true. | `string`            | `TEXT.close` |\n| `theme`       | `theme`        | Used to set the component\'s color scheme.                                                                 | `"dark" or "light"` | `undefined`  |\n\n## Events\n\n| Event                         | Description                                     | Type               |\n| ----------------------------- | ----------------------------------------------- | ------------------ |\n| `calcitePanelDismissedChange` | Emitted when the close button has been clicked. | `CustomEvent` |\n\n## Methods\n\n### `setFocus(focusId?: "dismiss-button") => Promise`\n\n#### Returns\n\nType: `Promise`\n\n## Slots\n\n| Slot                        | Description                                                              |\n| --------------------------- | ------------------------------------------------------------------------ |\n|                             | A slot for adding content to the panel.                                  |\n| `"footer"`                  | A slot for adding `calcite-button`s to the footer.                       |\n| `"header-content"`          | A slot for adding content in the center of the header.                   |\n| `"header-leading-content"`  | A slot for adding a `calcite-action` on the leading side of the header.  |\n| `"header-trailing-content"` | A slot for adding a `calcite-action` on the trailing side of the header. |\n\n## Dependencies\n\n### Used by\n\n- [calcite-flow-item](../calcite-flow-item)\n\n### Depends on\n\n- [calcite-action](../calcite-action)\n\n### Graph\n\n```mermaid\ngraph TD;\n  calcite-panel --\x3e calcite-action\n  calcite-flow-item --\x3e calcite-panel\n  style calcite-panel fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n---\n\n_Built with [StencilJS](https://stenciljs.com/)_\n')}};const headerHTML=`
Heading
`,contentHTML=dedent_default.a`
-  

-  Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae.
-  

-  

-  Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis leo.
-  

-  

-  Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti. Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.
-  

-`,footerHTML=dedent_default.a`
-  Yeah!
-  Naw.
-`,basic=addSourceDecorator(()=>Object(utils.a)("calcite-panel",[{name:"dir",value:Object(dist.select)("dir",dir.values,dir.defaultValue)},{name:"dismissed",value:Object(dist.boolean)("dismissed",!1)},{name:"disabled",value:Object(dist.boolean)("disabled",!1)},{name:"dismissible",value:Object(dist.boolean)("dismissible",!1)},{name:"height-scale",value:Object(dist.select)("heightScale",scale.values,scale.defaultValue)},{name:"loading",value:Object(dist.boolean)("loading",!1)},{name:"text-close",value:Object(dist.text)("textClose","Close")},{name:"theme",value:Object(dist.select)("theme",theme.values,theme.defaultValue)}],`${headerHTML}\n    \n    \n    ${contentHTML}\n    ${footerHTML}`),{__STORY__:'import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";\nimport {\n  Attributes,\n  createComponentHTML as create,\n  darkBackground,\n  parseReadme,\n  titlelessDocsPage\n} from "../../../.storybook/utils";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\nconst { dir, theme, scale } = ATTRIBUTES;\nimport readme from "./readme.md";\nimport { SLOTS } from "./resources";\nimport dedent from "dedent";\n\nexport default {\n  title: "components|calcite-panel",\n  decorators: [withKnobs],\n  parameters: {\n    backgrounds: darkBackground,\n    docs: {\n      page: titlelessDocsPage\n    },\n    notes: parseReadme(readme)\n  }\n};\n\nconst createAttributes: () => Attributes = () => [\n  {\n    name: "dir",\n    value: select("dir", dir.values, dir.defaultValue)\n  },\n  {\n    name: "dismissed",\n    value: boolean("dismissed", false)\n  },\n  {\n    name: "disabled",\n    value: boolean("disabled", false)\n  },\n  {\n    name: "dismissible",\n    value: boolean("dismissible", false)\n  },\n  {\n    name: "height-scale",\n    value: select("heightScale", scale.values, scale.defaultValue)\n  },\n  {\n    name: "loading",\n    value: boolean("loading", false)\n  },\n  {\n    name: "text-close",\n    value: text("textClose", "Close")\n  },\n  {\n    name: "theme",\n    value: select("theme", theme.values, theme.defaultValue)\n  }\n];\n\nconst headerHTML = `
Heading
`;\n\nconst contentHTML = dedent`\n  
\n  Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae.\n  
\n  
\n  Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis leo.\n  
\n  
\n  Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti. Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.\n  
\n`;\n\nconst footerHTML = dedent`\n  Yeah!\n  Naw.\n`;\n\nexport const basic = () =>\n  create(\n    "calcite-panel",\n    createAttributes(),\n    `${headerHTML}\n    \n    \n    ${contentHTML}\n    ${footerHTML}`\n  );\n',__ADDS_MAP__:{"components-calcite-panel--basic":{startLoc:{col:21,line:81},endLoc:{col:3,line:90},startBody:{col:21,line:81},endBody:{col:3,line:90}}},__MAIN_FILE_LOCATION__:"/calcite-panel.stories.ts",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/Users/juan6600/dev/projects/calcite-app-components/src/components/calcite-panel",__IDS_TO_FRAMEWORKS__:{}})},1613:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var dist=__webpack_require__(1),utils=__webpack_require__(2),resources=__webpack_require__(38),dedent=__webpack_require__(12),dedent_default=__webpack_require__.n(dedent);__webpack_require__.d(__webpack_exports__,"basic",(function(){return basic})),__webpack_require__.d(__webpack_exports__,"advanced",(function(){return advanced}));__webpack_require__(37).withSource;var addSourceDecorator=__webpack_require__(37).addSource,__SOURCE_PREFIX__="/Users/juan6600/dev/projects/calcite-app-components/src/components/calcite-shell",__STORY__='import { boolean, select, withKnobs } from "@storybook/addon-knobs";\nimport {\n  Attributes,\n  createComponentHTML as create,\n  darkBackground,\n  parseReadme,\n  titlelessDocsPage\n} from "../../../.storybook/utils";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\nconst { dir, layout, scale, theme } = ATTRIBUTES;\nimport readme from "./readme.md";\nimport panelReadme from "../calcite-shell-panel/readme.md";\nimport dedent from "dedent";\n\nexport default {\n  title: "components|calcite-shell",\n  decorators: [withKnobs],\n  parameters: {\n    backgrounds: darkBackground,\n    docs: {\n      page: titlelessDocsPage\n    },\n    notes: {\n      shell: parseReadme(readme),\n      panel: parseReadme(panelReadme)\n    }\n  }\n};\n\nconst createAttributes: (group: string) => Attributes = (group) => {\n  return [\n    {\n      name: "dir",\n      value: select("dir", dir.values, dir.defaultValue, group)\n    },\n    {\n      name: "theme",\n      value: select("theme", theme.values, theme.defaultValue, group)\n    }\n  ];\n};\n\nconst createShellPanelAttributes: (group: "Leading Panel" | "Trailing Panel") => Attributes = (group) => {\n  return [\n    {\n      name: "slot",\n      value: group === "Leading Panel" ? "primary-panel" : "contextual-panel"\n    },\n    {\n      name: "collapsed",\n      value: boolean("collapsed", false, group)\n    },\n    {\n      name: "detached",\n      value: boolean("detached", false, group)\n    },\n    {\n      name: "detached-scale",\n      value: select("detachedScale", scale.values, scale.defaultValue, group)\n    },\n    {\n      name: "layout",\n      value: select("layout", layout.values, group === "Leading Panel" ? layout.values[0] : layout.values[1], group)\n    }\n  ];\n};\n\nconst actionBarPrimaryContentHTML = dedent`\n  \n    \n    \n  \n  \n    \n  \n`;\n\nconst actionBarContextualContentHTML = dedent`\n  \n    \n    \n  \n  \n    \n  \n`;\n\nconst actionBarPrimaryHTML = dedent`\n  \n    ${actionBarPrimaryContentHTML}\n  \n`;\n\nconst actionBarContextualHTML = dedent`\n  \n    ${actionBarContextualContentHTML}\n  \n`;\n\nconst leadingPanelHTML = dedent`\n  ${actionBarPrimaryHTML}\n  
My Leading Panel
\n`;\n\nconst trailingPanelHTML = dedent`\n  ${actionBarContextualHTML}\n  
My Trailing Panel
\n`;\n\nconst headerHTML = dedent`\n  
\n    
My Shell Header
\n  
\n`;\n\nconst footerHTML = `
My Shell Footer
`;\n\nconst contentHTML = dedent`\n  
\n`;\n\nconst tipManagerHTML = dedent`\n  \n    \n      \n        This is an image.\n        
\n          This tip is how a tip should really look. It has a landscape or square image and a small amount of text\n          content. This paragraph is in an "info" slot.\n        
\n        
\n          This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem ipsum is\n          a placeholder text commonly used to demonstrate the visual form of a document without relying on\n          meaningful content (also called greeking). Replacing the actual content with placeholder text allows\n          designers to design the form of the content before the content itself has been produced.\n        
\n        This is the "link" slot.\n      \n      \n        This is an image.\n        
\n          This tip has an image that is a pretty tall. And the text will run out before the end of the image.\n        
\n        
In astronomy, the terms object and body are often used interchangeably.
\n        View Esri\n      \n    \n    \n      This is an image.\n      
\n        This tip has an image that is square. And the text will run out before the end of the image.\n      
\n      
In astronomy, the terms object and body are often used interchangeably.
\n      
\n        In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the\n        visual form of a document without relying on meaningful content (also called greeking). Replacing the\n        actual content with placeholder text allows designers to design the form of the content before the content\n        itself has been produced.\n      
\n      View Esri\n    \n    \n      
\n        This tip has no image. As such, the content area will take up the entire width of the tip.\n      
\n      
\n        This is the next paragraph and should show how wide the content area is now. Of course, the width of the\n        overall tip will affect things. In astronomy, the terms object and body are often used interchangeably.\n      
\n      View Esri\n    \n  \n`;\n\nexport const basic = () =>\n  create(\n    "calcite-shell",\n    createAttributes("Shell"),\n    dedent`\n    ${headerHTML}\n    ${create("calcite-shell-panel", createShellPanelAttributes("Leading Panel"), leadingPanelHTML)}\n    ${contentHTML}\n    ${create("calcite-shell-panel", createShellPanelAttributes("Trailing Panel"), trailingPanelHTML)}\n    ${footerHTML}\n  `\n  );\n\n// TODO: UPDATE\nconst advancedLeadingPanelHTML = dedent`\n  ${actionBarPrimaryHTML}\n  \n    \n      \n      \n      \n    \n  \n  \n    \n      
\n        
Cool thing.
\n      
\n    \n  \n  \n    \n      
\n        
Cool thing.
\n      
\n    \n  \n  \n    \n      
\n        
Cool thang.
\n      
\n    \n  \n`;\n\n// TODO: UPDATE\nconst advancedTrailingPanelHTMl = dedent`\n  ${actionBarContextualHTML}\n  \n    \n      
\n        \n        \n        \n      
\n      \n        \n          demo\n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      \n      Save\n      Cancel\n    \n    \n      \n        \n          \n            \n            \n            \n          \n          demo\n          \n            \n            \n            \n          \n        \n      \n      \n        \n          \n            \n            \n            \n          \n          demo\n          \n            \n            \n            \n          \n        \n      \n      Save\n      Cancel\n    \n  \n`;\n\nexport const advanced = () =>\n  create(\n    "calcite-shell",\n    createAttributes("Shell"),\n    dedent`\n    ${headerHTML}\n    ${create("calcite-shell-panel", createShellPanelAttributes("Leading Panel"), advancedLeadingPanelHTML)}\n    ${contentHTML}\n    ${create("calcite-shell-panel", createShellPanelAttributes("Trailing Panel"), advancedTrailingPanelHTMl)}\n    ${tipManagerHTML}\n    ${footerHTML}\n  `\n  );\n',__ADDS_MAP__={"components-calcite-shell--basic":{startLoc:{col:21,line:184},endLoc:{col:3,line:195},startBody:{col:21,line:184},endBody:{col:3,line:195}},"components-calcite-shell--advanced":{startLoc:{col:24,line:295},endLoc:{col:3,line:307},startBody:{col:24,line:295},endBody:{col:3,line:307}}},__MODULE_DEPENDENCIES__=[],__LOCAL_DEPENDENCIES__={},__IDS_TO_FRAMEWORKS__={};const{dir:dir,layout:layout,scale:scale,theme:theme}=resources.a;__webpack_exports__.default={title:"components|calcite-shell",decorators:[dist.withKnobs],parameters:{storySource:{source:'import { boolean, select, withKnobs } from "@storybook/addon-knobs";\nimport {\n  Attributes,\n  createComponentHTML as create,\n  darkBackground,\n  parseReadme,\n  titlelessDocsPage\n} from "../../../.storybook/utils";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\nconst { dir, layout, scale, theme } = ATTRIBUTES;\nimport readme from "./readme.md";\nimport panelReadme from "../calcite-shell-panel/readme.md";\nimport dedent from "dedent";\n\nexport default {\n  title: "components|calcite-shell",\n  decorators: [withKnobs],\n  parameters: {\n    backgrounds: darkBackground,\n    docs: {\n      page: titlelessDocsPage\n    },\n    notes: {\n      shell: parseReadme(readme),\n      panel: parseReadme(panelReadme)\n    }\n  }\n};\n\nconst createAttributes: (group: string) => Attributes = (group) => {\n  return [\n    {\n      name: "dir",\n      value: select("dir", dir.values, dir.defaultValue, group)\n    },\n    {\n      name: "theme",\n      value: select("theme", theme.values, theme.defaultValue, group)\n    }\n  ];\n};\n\nconst createShellPanelAttributes: (group: "Leading Panel" | "Trailing Panel") => Attributes = (group) => {\n  return [\n    {\n      name: "slot",\n      value: group === "Leading Panel" ? "primary-panel" : "contextual-panel"\n    },\n    {\n      name: "collapsed",\n      value: boolean("collapsed", false, group)\n    },\n    {\n      name: "detached",\n      value: boolean("detached", false, group)\n    },\n    {\n      name: "detached-scale",\n      value: select("detachedScale", scale.values, scale.defaultValue, group)\n    },\n    {\n      name: "layout",\n      value: select("layout", layout.values, group === "Leading Panel" ? layout.values[0] : layout.values[1], group)\n    }\n  ];\n};\n\nconst actionBarPrimaryContentHTML = dedent`\n  \n    \n    \n  \n  \n    \n  \n`;\n\nconst actionBarContextualContentHTML = dedent`\n  \n    \n    \n  \n  \n    \n  \n`;\n\nconst actionBarPrimaryHTML = dedent`\n  \n    ${actionBarPrimaryContentHTML}\n  \n`;\n\nconst actionBarContextualHTML = dedent`\n  \n    ${actionBarContextualContentHTML}\n  \n`;\n\nconst leadingPanelHTML = dedent`\n  ${actionBarPrimaryHTML}\n  
My Leading Panel
\n`;\n\nconst trailingPanelHTML = dedent`\n  ${actionBarContextualHTML}\n  
My Trailing Panel
\n`;\n\nconst headerHTML = dedent`\n  
\n    
My Shell Header
\n  
\n`;\n\nconst footerHTML = `
My Shell Footer
`;\n\nconst contentHTML = dedent`\n  
\n`;\n\nconst tipManagerHTML = dedent`\n  \n    \n      \n        This is an image.\n        
\n          This tip is how a tip should really look. It has a landscape or square image and a small amount of text\n          content. This paragraph is in an "info" slot.\n        
\n        
\n          This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem ipsum is\n          a placeholder text commonly used to demonstrate the visual form of a document without relying on\n          meaningful content (also called greeking). Replacing the actual content with placeholder text allows\n          designers to design the form of the content before the content itself has been produced.\n        
\n        This is the "link" slot.\n      \n      \n        This is an image.\n        
\n          This tip has an image that is a pretty tall. And the text will run out before the end of the image.\n        
\n        
In astronomy, the terms object and body are often used interchangeably.
\n        View Esri\n      \n    \n    \n      This is an image.\n      
\n        This tip has an image that is square. And the text will run out before the end of the image.\n      
\n      
In astronomy, the terms object and body are often used interchangeably.
\n      
\n        In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the\n        visual form of a document without relying on meaningful content (also called greeking). Replacing the\n        actual content with placeholder text allows designers to design the form of the content before the content\n        itself has been produced.\n      
\n      View Esri\n    \n    \n      
\n        This tip has no image. As such, the content area will take up the entire width of the tip.\n      
\n      
\n        This is the next paragraph and should show how wide the content area is now. Of course, the width of the\n        overall tip will affect things. In astronomy, the terms object and body are often used interchangeably.\n      
\n      View Esri\n    \n  \n`;\n\nexport const basic = () =>\n  create(\n    "calcite-shell",\n    createAttributes("Shell"),\n    dedent`\n    ${headerHTML}\n    ${create("calcite-shell-panel", createShellPanelAttributes("Leading Panel"), leadingPanelHTML)}\n    ${contentHTML}\n    ${create("calcite-shell-panel", createShellPanelAttributes("Trailing Panel"), trailingPanelHTML)}\n    ${footerHTML}\n  `\n  );\n\n// TODO: UPDATE\nconst advancedLeadingPanelHTML = dedent`\n  ${actionBarPrimaryHTML}\n  \n    \n      \n      \n      \n    \n  \n  \n    \n      
\n        
Cool thing.
\n      
\n    \n  \n  \n    \n      
\n        
Cool thing.
\n      
\n    \n  \n  \n    \n      
\n        
Cool thang.
\n      
\n    \n  \n`;\n\n// TODO: UPDATE\nconst advancedTrailingPanelHTMl = dedent`\n  ${actionBarContextualHTML}\n  \n    \n      
\n        \n        \n        \n      
\n      \n        \n          demo\n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      \n      Save\n      Cancel\n    \n    \n      \n        \n          \n            \n            \n            \n          \n          demo\n          \n            \n            \n            \n          \n        \n      \n      \n        \n          \n            \n            \n            \n          \n          demo\n          \n            \n            \n            \n          \n        \n      \n      Save\n      Cancel\n    \n  \n`;\n\nexport const advanced = () =>\n  create(\n    "calcite-shell",\n    createAttributes("Shell"),\n    dedent`\n    ${headerHTML}\n    ${create("calcite-shell-panel", createShellPanelAttributes("Leading Panel"), advancedLeadingPanelHTML)}\n    ${contentHTML}\n    ${create("calcite-shell-panel", createShellPanelAttributes("Trailing Panel"), advancedTrailingPanelHTMl)}\n    ${tipManagerHTML}\n    ${footerHTML}\n  `\n  );\n',locationsMap:{"components-calcite-shell--basic":{startLoc:{col:21,line:184},endLoc:{col:3,line:195},startBody:{col:21,line:184},endBody:{col:3,line:195}},"components-calcite-shell--advanced":{startLoc:{col:24,line:295},endLoc:{col:3,line:307},startBody:{col:24,line:295},endBody:{col:3,line:307}}}},backgrounds:utils.b,docs:{page:utils.d},notes:{shell:Object(utils.c)('# calcite-shell\n\nThe `calcite-shell` component is used for application layout management. It is a container for the view as well as other calcite app components like `calcite-shell-panel` and `calcite-tip-manager`.\n\n_note: calcite-shell supports tablet as the smallest screen size_\n\n\x3c!-- Auto Generated Below --\x3e\n\n## Usage\n\n### Advanced\n\n#### Advanced\n\nRenders a shell with leading and trailing floating panels, action bar/pad, block, flow, tip manager, footer.\nnote: calcite-icon is pulled in from [calcite-components](https://esri.github.io/calcite-components/).\\_\n\n```html\n\n  \n    \n      \n        \n          \n        \n        \n          \n        \n        \n          \n        \n      \n      \n        \n          \n        \n        \n          \n        \n      \n    \n    \n      \n        \n          \n        \n        \n          \n        \n        \n          \n        \n      \n    \n    \n      \n          
Cool thing.
\n      \n    \n  \n\n   \n      \n        \n          \n            \n          \n          \n            \n          \n          \n            \n          \n        \n        \n          \n            \n          \n          \n            \n          \n          \n            \n          \n        \n        \n          \n            \n          \n        \n      \n      \n        \n          \n            \n              \n                \n                  \n                \n              \n              \n                \n                  \n                \n              \n              \n                \n                  \n                \n              \n            \n          \n        \n      \n  \n  \n    \n    \n  \n  
Footer
\n\n```\n\n### Basic\n\n#### Basic\n\nRenders a basic shell with a header and a footer.\n\n```html\n\n  
\n    
\n      
Shell Header: My App
\n    
\n  
\n  
Shell Content
\n  \x3c!-- insert map or fillable content here --\x3e\n  
Footer
\n\n```\n\n#### With panels\n\nRenders a shell with a header and panels on the left and right sides of the app.\n\n```html\n\n  \n    Leading panel! (on the left side, since this is a LTR app)\n  \n  \n    Trailing panel! (right side)\n  \n  
\n    
\n      
Shell Header: My App
\n    
\n  
\n  
Shell Content
\n  \x3c!-- insert map or fillable content here --\x3e\n\n```\n\n#### Panel with action bar\n\nRenders a single panel with actions in an action bar.\n\n```html\n\n  \n    placeholder\n    \n      \n        \n      \n      \n        \n      \n      \n        \n      \n    \n  \n\n```\n\n## Properties\n\n| Property | Attribute | Description                               | Type                | Default     |\n| -------- | --------- | ----------------------------------------- | ------------------- | ----------- |\n| `theme`  | `theme`   | Used to set the component\'s color scheme. | `"dark" or "light"` | `undefined` |\n\n## Slots\n\n| Slot                 | Description                                                                                                                              |\n| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |\n|                      | A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map) |\n| `"contextual-panel"` | A slot for adding the trailing `calcite-shell-panel`.                                                                                    |\n| `"primary-panel"`    | A slot for adding the leading `calcite-shell-panel`.                                                                                     |\n| `"shell-footer"`     | A slot for adding footer content. This content will be positioned at the bottom of the shell.                                            |\n| `"shell-header"`     | A slot for adding header content. This content will be positioned at the top of the shell.                                               |\n| `"tip-manager"`      | A slot for adding a `calcite-tip-manager`. This component will be absolutely positioned.                                                 |\n\n---\n\n_Built with [StencilJS](https://stenciljs.com/)_\n'),panel:Object(utils.c)('# calcite-shell-panel\n\nThe `calcite-shell-panel` is a child component of `calcite-shell` used as a container to display other components like `calcite-block` and `calcite-flow`.\n\n\x3c!-- Auto Generated Below --\x3e\n\n## Usage\n\n### Basic\n\n#### Basic\n\nRenders a basic shell panel with text content.\n\n```html\n\n  
Primary Content
\n\n```\n\n#### With action bar\n\nRenders a panel with an action bar.\n\n```html\n\n  \n    \n      \n    \n    \n      \n    \n    \n      \n    \n  \n\n```\n\n## Properties\n\n| Property        | Attribute        | Description                                                                             | Type                      | Default     |\n| --------------- | ---------------- | --------------------------------------------------------------------------------------- | ------------------------- | ----------- |\n| `collapsed`     | `collapsed`      | Hide the content panel.                                                                 | `boolean`                 | `false`     |\n| `detached`      | `detached`       | This property makes the content area appear like a "floating" panel.                    | `boolean`                 | `false`     |\n| `detachedScale` | `detached-scale` | This sets limits the height of the content area. It only applies when detached is true. | `"l" or "m" or "s"`       | `"m"`       |\n| `layout`        | `layout`         | Arrangement of the component.                                                           | `"leading" or "trailing"` | `"leading"` |\n\n## Events\n\n| Event                     | Description                             | Type               |\n| ------------------------- | --------------------------------------- | ------------------ |\n| `calciteShellPanelToggle` | Emitted when collapse has been toggled. | `CustomEvent` |\n\n## Slots\n\n| Slot           | Description                                            |\n| -------------- | ------------------------------------------------------ |\n|                | A slot for adding content to the shell panel.          |\n| `"action-bar"` | A slot for adding a `calcite-action-bar` to the panel. |\n\n---\n\n_Built with [StencilJS](https://stenciljs.com/)_\n')}}};const createAttributes=group=>[{name:"dir",value:Object(dist.select)("dir",dir.values,dir.defaultValue,group)},{name:"theme",value:Object(dist.select)("theme",theme.values,theme.defaultValue,group)}],createShellPanelAttributes=group=>[{name:"slot",value:"Leading Panel"===group?"primary-panel":"contextual-panel"},{name:"collapsed",value:Object(dist.boolean)("collapsed",!1,group)},{name:"detached",value:Object(dist.boolean)("detached",!1,group)},{name:"detached-scale",value:Object(dist.select)("detachedScale",scale.values,scale.defaultValue,group)},{name:"layout",value:Object(dist.select)("layout",layout.values,"Leading Panel"===group?layout.values[0]:layout.values[1],group)}],actionBarPrimaryContentHTML=dedent_default.a`
-  
-    
-    
-  
-  
-    
-  
-`,actionBarContextualContentHTML=dedent_default.a`
-  
-    
-    
-  
-  
-    
-  
-`,actionBarPrimaryHTML=dedent_default.a`
-  
-    ${actionBarPrimaryContentHTML}
-  
-`,actionBarContextualHTML=dedent_default.a`
-  
-    ${actionBarContextualContentHTML}
-  
-`,leadingPanelHTML=dedent_default.a`
-  ${actionBarPrimaryHTML}
-  
My Leading Panel

-`,trailingPanelHTML=dedent_default.a`
-  ${actionBarContextualHTML}
-  
My Trailing Panel

-`,headerHTML=dedent_default.a`
-  

-    
My Shell Header

-  

-`,footerHTML='
My Shell Footer
',contentHTML=dedent_default.a`
-  

-`,tipManagerHTML=dedent_default.a`
-  
-    
-      
-        This is an image.
-        

-          This tip is how a tip should really look. It has a landscape or square image and a small amount of text
-          content. This paragraph is in an "info" slot.
-        

-        

-          This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem ipsum is
-          a placeholder text commonly used to demonstrate the visual form of a document without relying on
-          meaningful content (also called greeking). Replacing the actual content with placeholder text allows
-          designers to design the form of the content before the content itself has been produced.
-        

-        This is the "link" slot.
-      
-      
-        This is an image.
-        

-          This tip has an image that is a pretty tall. And the text will run out before the end of the image.
-        

-        
In astronomy, the terms object and body are often used interchangeably.

-        View Esri
-      
-    
-    
-      This is an image.
-      

-        This tip has an image that is square. And the text will run out before the end of the image.
-      

-      
In astronomy, the terms object and body are often used interchangeably.

-      

-        In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the
-        visual form of a document without relying on meaningful content (also called greeking). Replacing the
-        actual content with placeholder text allows designers to design the form of the content before the content
-        itself has been produced.
-      

-      View Esri
-    
-    
-      

-        This tip has no image. As such, the content area will take up the entire width of the tip.
-      

-      

-        This is the next paragraph and should show how wide the content area is now. Of course, the width of the
-        overall tip will affect things. In astronomy, the terms object and body are often used interchangeably.
-      

-      View Esri
-    
-  
-`,basic=addSourceDecorator(()=>Object(utils.a)("calcite-shell",createAttributes("Shell"),dedent_default.a`
-    ${headerHTML}
-    ${Object(utils.a)("calcite-shell-panel",createShellPanelAttributes("Leading Panel"),leadingPanelHTML)}
-    ${contentHTML}
-    ${Object(utils.a)("calcite-shell-panel",createShellPanelAttributes("Trailing Panel"),trailingPanelHTML)}
-    ${footerHTML}
-  `),{__STORY__:__STORY__,__ADDS_MAP__:__ADDS_MAP__,__MAIN_FILE_LOCATION__:"/calcite-shell.stories.ts",__MODULE_DEPENDENCIES__:__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__:__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__:__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__:__IDS_TO_FRAMEWORKS__}),advancedLeadingPanelHTML=dedent_default.a`
-  ${actionBarPrimaryHTML}
-  
-    
-      
-      
-      
-    
-  
-  
-    
-      

-        
Cool thing.

-      

-    
-  
-  
-    
-      

-        
Cool thing.

-      

-    
-  
-  
-    
-      

-        
Cool thang.

-      

-    
-  
-`,advancedTrailingPanelHTMl=dedent_default.a`
-  ${actionBarContextualHTML}
-  
-    
-      

-        
-        
-        
-      

-      
-        
-          demo
-          
-            
-            
-            
-          
-          
-            
-            
-            
-          
-        
-      
-      Save
-      Cancel
-    
-    
-      
-        
-          
-            
-            
-            
-          
-          demo
-          
-            
-            
-            
-          
-        
-      
-      
-        
-          
-            
-            
-            
-          
-          demo
-          
-            
-            
-            
-          
-        
-      
-      Save
-      Cancel
-    
-  
-`,advanced=addSourceDecorator(()=>Object(utils.a)("calcite-shell",createAttributes("Shell"),dedent_default.a`
-    ${headerHTML}
-    ${Object(utils.a)("calcite-shell-panel",createShellPanelAttributes("Leading Panel"),advancedLeadingPanelHTML)}
-    ${contentHTML}
-    ${Object(utils.a)("calcite-shell-panel",createShellPanelAttributes("Trailing Panel"),advancedTrailingPanelHTMl)}
-    ${tipManagerHTML}
-    ${footerHTML}
-  `),{__STORY__:__STORY__,__ADDS_MAP__:__ADDS_MAP__,__MAIN_FILE_LOCATION__:"/calcite-shell.stories.ts",__MODULE_DEPENDENCIES__:__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__:__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__:__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__:__IDS_TO_FRAMEWORKS__})},1614:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var dist=__webpack_require__(1),utils=__webpack_require__(2);const TEXT_defaultGroupTitle="Tips",TEXT_defaultPaginationLabel="Tip",TEXT_close="Close",TEXT_previous="Previous",TEXT_next="Next";var resources=__webpack_require__(38),dedent=__webpack_require__(12),dedent_default=__webpack_require__.n(dedent);__webpack_require__.d(__webpack_exports__,"basic",(function(){return basic}));__webpack_require__(37).withSource;var addSourceDecorator=__webpack_require__(37).addSource;const{dir:dir,theme:theme}=resources.a;__webpack_exports__.default={title:"components|calcite-tip-manager",decorators:[dist.withKnobs],parameters:{storySource:{source:'import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";\nimport {\n  Attributes,\n  createComponentHTML as create,\n  darkBackground,\n  parseReadme,\n  titlelessDocsPage\n} from "../../../.storybook/utils";\nimport readme from "./readme.md";\nimport { TEXT } from "./resources";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\nimport dedent from "dedent";\nconst { dir, theme } = ATTRIBUTES;\n\nexport default {\n  title: "components|calcite-tip-manager",\n  decorators: [withKnobs],\n  parameters: {\n    backgrounds: darkBackground,\n    docs: {\n      page: titlelessDocsPage\n    },\n    notes: parseReadme(readme)\n  }\n};\n\nconst createAttributes: () => Attributes = () => [\n  {\n    name: "closed",\n    value: boolean("closed", false)\n  },\n  {\n    name: "dir",\n    value: select("dir", dir.values, dir.defaultValue)\n  },\n  {\n    name: "text-close",\n    value: text("textClose", TEXT.close)\n  },\n  {\n    name: "text-defalut-title",\n    value: text("textDefaultTitle", TEXT.defaultGroupTitle)\n  },\n  {\n    name: "text-pagination-label",\n    value: text("textPaginationLabel", TEXT.defaultPaginationLabel)\n  },\n  {\n    name: "text-next",\n    value: text("textNext", TEXT.next)\n  },\n  {\n    name: "text-previous",\n    value: text("textPrevious", TEXT.previous)\n  },\n  {\n    name: "theme",\n    value: select("theme", theme.values, theme.defaultValue)\n  }\n];\n\nexport const basic = () =>\n  create(\n    "calcite-tip-manager",\n    createAttributes(),\n    dedent`\n    \n      \n        This is an image.\n        
\n          This tip is how a tip should really look. It has a landscape or square image and a small amount of text\n          content. This paragraph is in an "info" slot.\n        
\n        
\n          This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem ipsum is\n          a placeholder text commonly used to demonstrate the visual form of a document without relying on\n          meaningful content (also called greeking). Replacing the actual content with placeholder text allows\n          designers to design the form of the content before the content itself has been produced.\n        
\n        This is the "link" slot.\n      \n      \n        This is an image.\n        
\n          This tip has an image that is a pretty tall. And the text will run out before the end of the image.\n        
\n        
In astronomy, the terms object and body are often used interchangeably.
\n        View Esri\n      \n    \n    \n      This is an image.\n      
\n        This tip has an image that is square. And the text will run out before the end of the image.\n      
\n      
In astronomy, the terms object and body are often used interchangeably.
\n      
\n        In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the\n        visual form of a document without relying on meaningful content (also called greeking). Replacing the\n        actual content with placeholder text allows designers to design the form of the content before the content\n        itself has been produced.\n      
\n      View Esri\n    \n    \n      
\n        This tip has no image. As such, the content area will take up the entire width of the tip.\n      
\n      
\n        This is the next paragraph and should show how wide the content area is now. Of course, the width of the\n        overall tip will affect things. In astronomy, the terms object and body are often used interchangeably.\n      
\n      View Esri\n    \n  `\n  );\n',locationsMap:{"components-calcite-tip-manager--basic":{startLoc:{col:21,line:62},endLoc:{col:3,line:116},startBody:{col:21,line:62},endBody:{col:3,line:116}}}},backgrounds:utils.b,docs:{page:utils.d},notes:Object(utils.c)('# calcite-tip-manager\n\nThe `calcite-tip-manager` component contains multiple `calcite-tip`s that a user can view through via interactive arrows to go back and forth through the tips in the deck.\n\n\x3c!-- Auto Generated Below --\x3e\n\n## Usage\n\n### Basic\n\n#### Basic\n\nRenders a tip manager using a group of tips as well as a single tip.\n\n```html\n\n  \n    \n      
\n        Usually depicted as pure white, Pegasus is the offspring of the Olympian god Poseidon. He was foaled by the\n        Gorgon Medusa upon her death, when the hero Perseus decapitated her.\n      
\n      Magical flying horsey\n    \n    \n      
\n        The creature resided in the twisting maze of the labyrinth where it was offfered a regular sacrifice of youths\n        and maidens to satisfy its cannibalistic hunger.\n      
\n      Bull headed man\n    \n  \n  \n    
\n      Dangerous creatures who lured nearby sailors with their enchanting music and singing voices to shipwreck on the\n      rocky coast of their island.\n    
\n    Sexy bird lady\n  \n\n```\n\n## Properties\n\n| Property              | Attribute               | Description                                            | Type                | Default                       |\n| --------------------- | ----------------------- | ------------------------------------------------------ | ------------------- | ----------------------------- |\n| `closed`              | `closed`                | Alternate text for closing the `calcite-tip-manager`.  | `boolean`           | `false`                       |\n| `textClose`           | `text-close`            | Alternate text for closing the `calcite-tip-manager`.  | `string`            | `TEXT.close`                  |\n| `textDefaultTitle`    | `text-default-title`    | The default group title for the `calcite-tip-manager`. | `string`            | `TEXT.defaultGroupTitle`      |\n| `textNext`            | `text-next`             | Alternate text for navigating to the next tip.         | `string`            | `TEXT.next`                   |\n| `textPaginationLabel` | `text-pagination-label` | Label that appears on hover of pagination icon.        | `string`            | `TEXT.defaultPaginationLabel` |\n| `textPrevious`        | `text-previous`         | Alternate text for navigating to the previous tip.     | `string`            | `TEXT.previous`               |\n| `theme`               | `theme`                 | Used to set the component\'s color scheme.              | `"dark" or "light"` | `undefined`                   |\n\n## Events\n\n| Event                     | Description                                                             | Type               |\n| ------------------------- | ----------------------------------------------------------------------- | ------------------ |\n| `calciteTipManagerToggle` | Emitted when the `calcite-tip-manager` has been toggled open or closed. | `CustomEvent` |\n\n## Methods\n\n### `nextTip() => Promise`\n\n#### Returns\n\nType: `Promise`\n\n### `previousTip() => Promise`\n\n#### Returns\n\nType: `Promise`\n\n## Slots\n\n| Slot | Description                       |\n| ---- | --------------------------------- |\n|      | A slot for adding `calcite-tip`s. |\n\n## Dependencies\n\n### Depends on\n\n- [calcite-action](../calcite-action)\n\n### Graph\n\n```mermaid\ngraph TD;\n  calcite-tip-manager --\x3e calcite-action\n  style calcite-tip-manager fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n---\n\n_Built with [StencilJS](https://stenciljs.com/)_\n')}};const basic=addSourceDecorator(()=>Object(utils.a)("calcite-tip-manager",[{name:"closed",value:Object(dist.boolean)("closed",!1)},{name:"dir",value:Object(dist.select)("dir",dir.values,dir.defaultValue)},{name:"text-close",value:Object(dist.text)("textClose",TEXT_close)},{name:"text-defalut-title",value:Object(dist.text)("textDefaultTitle",TEXT_defaultGroupTitle)},{name:"text-pagination-label",value:Object(dist.text)("textPaginationLabel",TEXT_defaultPaginationLabel)},{name:"text-next",value:Object(dist.text)("textNext",TEXT_next)},{name:"text-previous",value:Object(dist.text)("textPrevious",TEXT_previous)},{name:"theme",value:Object(dist.select)("theme",theme.values,theme.defaultValue)}],dedent_default.a`
-    
-      
-        This is an image.
-        

-          This tip is how a tip should really look. It has a landscape or square image and a small amount of text
-          content. This paragraph is in an "info" slot.
-        

-        

-          This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem ipsum is
-          a placeholder text commonly used to demonstrate the visual form of a document without relying on
-          meaningful content (also called greeking). Replacing the actual content with placeholder text allows
-          designers to design the form of the content before the content itself has been produced.
-        

-        This is the "link" slot.
-      
-      
-        This is an image.
-        

-          This tip has an image that is a pretty tall. And the text will run out before the end of the image.
-        

-        
In astronomy, the terms object and body are often used interchangeably.

-        View Esri
-      
-    
-    
-      This is an image.
-      

-        This tip has an image that is square. And the text will run out before the end of the image.
-      

-      
In astronomy, the terms object and body are often used interchangeably.

-      

-        In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the
-        visual form of a document without relying on meaningful content (also called greeking). Replacing the
-        actual content with placeholder text allows designers to design the form of the content before the content
-        itself has been produced.
-      

-      View Esri
-    
-    
-      

-        This tip has no image. As such, the content area will take up the entire width of the tip.
-      

-      

-        This is the next paragraph and should show how wide the content area is now. Of course, the width of the
-        overall tip will affect things. In astronomy, the terms object and body are often used interchangeably.
-      

-      View Esri
-    
-  `),{__STORY__:'import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";\nimport {\n  Attributes,\n  createComponentHTML as create,\n  darkBackground,\n  parseReadme,\n  titlelessDocsPage\n} from "../../../.storybook/utils";\nimport readme from "./readme.md";\nimport { TEXT } from "./resources";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\nimport dedent from "dedent";\nconst { dir, theme } = ATTRIBUTES;\n\nexport default {\n  title: "components|calcite-tip-manager",\n  decorators: [withKnobs],\n  parameters: {\n    backgrounds: darkBackground,\n    docs: {\n      page: titlelessDocsPage\n    },\n    notes: parseReadme(readme)\n  }\n};\n\nconst createAttributes: () => Attributes = () => [\n  {\n    name: "closed",\n    value: boolean("closed", false)\n  },\n  {\n    name: "dir",\n    value: select("dir", dir.values, dir.defaultValue)\n  },\n  {\n    name: "text-close",\n    value: text("textClose", TEXT.close)\n  },\n  {\n    name: "text-defalut-title",\n    value: text("textDefaultTitle", TEXT.defaultGroupTitle)\n  },\n  {\n    name: "text-pagination-label",\n    value: text("textPaginationLabel", TEXT.defaultPaginationLabel)\n  },\n  {\n    name: "text-next",\n    value: text("textNext", TEXT.next)\n  },\n  {\n    name: "text-previous",\n    value: text("textPrevious", TEXT.previous)\n  },\n  {\n    name: "theme",\n    value: select("theme", theme.values, theme.defaultValue)\n  }\n];\n\nexport const basic = () =>\n  create(\n    "calcite-tip-manager",\n    createAttributes(),\n    dedent`\n    \n      \n        This is an image.\n        
\n          This tip is how a tip should really look. It has a landscape or square image and a small amount of text\n          content. This paragraph is in an "info" slot.\n        
\n        
\n          This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem ipsum is\n          a placeholder text commonly used to demonstrate the visual form of a document without relying on\n          meaningful content (also called greeking). Replacing the actual content with placeholder text allows\n          designers to design the form of the content before the content itself has been produced.\n        
\n        This is the "link" slot.\n      \n      \n        This is an image.\n        
\n          This tip has an image that is a pretty tall. And the text will run out before the end of the image.\n        
\n        
In astronomy, the terms object and body are often used interchangeably.
\n        View Esri\n      \n    \n    \n      This is an image.\n      
\n        This tip has an image that is square. And the text will run out before the end of the image.\n      
\n      
In astronomy, the terms object and body are often used interchangeably.
\n      
\n        In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the\n        visual form of a document without relying on meaningful content (also called greeking). Replacing the\n        actual content with placeholder text allows designers to design the form of the content before the content\n        itself has been produced.\n      
\n      View Esri\n    \n    \n      
\n        This tip has no image. As such, the content area will take up the entire width of the tip.\n      
\n      
\n        This is the next paragraph and should show how wide the content area is now. Of course, the width of the\n        overall tip will affect things. In astronomy, the terms object and body are often used interchangeably.\n      
\n      View Esri\n    \n  `\n  );\n',__ADDS_MAP__:{"components-calcite-tip-manager--basic":{startLoc:{col:21,line:62},endLoc:{col:3,line:116},startBody:{col:21,line:62},endBody:{col:3,line:116}}},__MAIN_FILE_LOCATION__:"/calcite-tip-manager.stories.ts",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/Users/juan6600/dev/projects/calcite-app-components/src/components/calcite-tip-manager",__IDS_TO_FRAMEWORKS__:{}})},1615:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var dist=__webpack_require__(1),utils=__webpack_require__(2);const TEXT_close="Close";var resources=__webpack_require__(38);__webpack_require__.d(__webpack_exports__,"basic",(function(){return basic}));__webpack_require__(37).withSource;var addSourceDecorator=__webpack_require__(37).addSource;__webpack_exports__.default={title:"components|calcite-tip",decorators:[dist.withKnobs],parameters:{storySource:{source:'import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";\nimport {\n  Attributes,\n  createComponentHTML as create,\n  darkBackground,\n  parseReadme,\n  titlelessDocsPage\n} from "../../../.storybook/utils";\nimport readme from "./readme.md";\nimport { TEXT } from "./resources";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\n\nexport default {\n  title: "components|calcite-tip",\n  decorators: [withKnobs],\n  parameters: {\n    backgrounds: darkBackground,\n    docs: {\n      page: titlelessDocsPage\n    },\n    notes: parseReadme(readme)\n  }\n};\n\nconst { dir, theme } = ATTRIBUTES;\n\nconst createAttributes: () => Attributes = () => [\n  {\n    name: "dir",\n    value: select("dir", dir.values, dir.defaultValue)\n  },\n  {\n    name: "dismissed",\n    value: boolean("dismissed", false)\n  },\n  {\n    name: "non-dismissible",\n    value: boolean("nonDismissible", false)\n  },\n  {\n    name: "heading",\n    value: text("heading", "My Tip")\n  },\n  {\n    name: "text-close",\n    value: text("textClose", TEXT.close)\n  },\n  {\n    name: "theme",\n    value: select("theme", theme.values, theme.defaultValue)\n  }\n];\n\nconst html = `This is an image.Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae.
This is a "link".`;\n\nexport const basic = () => create("calcite-tip", createAttributes(), html);\n',locationsMap:{"components-calcite-tip--basic":{startLoc:{col:21,line:56},endLoc:{col:74,line:56},startBody:{col:21,line:56},endBody:{col:74,line:56}}}},backgrounds:utils.b,docs:{page:utils.d},notes:Object(utils.c)('# calcite-tip\n\nThe `calcite-tip` component can comprise of an image, text and hyperlink to give helpful hints to a user about using the platform.\n\n\x3c!-- Auto Generated Below --\x3e\n\n## Usage\n\n### Basic\n\n#### Basic\n\nRenders a non-dismissible tip with a heading, thumbnail, info and a link.\n\n```html\n\n  This is an image of nature.\n  
\n    Normal tip with a landscape or square image and a small amount of text in the "info" slot.\n  
\n  Put a link hurr!\n\n```\n\n## Properties\n\n| Property         | Attribute         | Description                                                                       | Type                | Default      |\n| ---------------- | ----------------- | --------------------------------------------------------------------------------- | ------------------- | ------------ |\n| `dismissed`      | `dismissed`       | No longer displays the tip.                                                       | `boolean`           | `false`      |\n| `heading`        | `heading`         | The heading of the tip.                                                           | `string`            | `undefined`  |\n| `nonDismissible` | `non-dismissible` | Indicates whether the tip can be dismissed.                                       | `boolean`           | `false`      |\n| `selected`       | `selected`        | The selected state of the tip if it is being used inside a `calcite-tip-manager`. | `boolean`           | `undefined`  |\n| `textClose`      | `text-close`      | Alternate text for closing the tip.                                               | `string`            | `TEXT.close` |\n| `theme`          | `theme`           | Used to set the component\'s color scheme.                                         | `"dark" or "light"` | `undefined`  |\n\n## Events\n\n| Event               | Description                                    | Type               |\n| ------------------- | ---------------------------------------------- | ------------------ |\n| `calciteTipDismiss` | Emitted when the component has been dismissed. | `CustomEvent` |\n\n## Slots\n\n| Slot          | Description                                         |\n| ------------- | --------------------------------------------------- |\n| `"thumbnail"` | A slot for adding an HTML image element to the tip. |\n\n## Dependencies\n\n### Depends on\n\n- [calcite-action](../calcite-action)\n\n### Graph\n\n```mermaid\ngraph TD;\n  calcite-tip --\x3e calcite-action\n  style calcite-tip fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n---\n\n_Built with [StencilJS](https://stenciljs.com/)_\n')}};const{dir:dir,theme:theme}=resources.a,basic=addSourceDecorator(()=>Object(utils.a)("calcite-tip",[{name:"dir",value:Object(dist.select)("dir",dir.values,dir.defaultValue)},{name:"dismissed",value:Object(dist.boolean)("dismissed",!1)},{name:"non-dismissible",value:Object(dist.boolean)("nonDismissible",!1)},{name:"heading",value:Object(dist.text)("heading","My Tip")},{name:"text-close",value:Object(dist.text)("textClose",TEXT_close)},{name:"theme",value:Object(dist.select)("theme",theme.values,theme.defaultValue)}],'This is an image.Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae.This is a "link".'),{__STORY__:'import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";\nimport {\n  Attributes,\n  createComponentHTML as create,\n  darkBackground,\n  parseReadme,\n  titlelessDocsPage\n} from "../../../.storybook/utils";\nimport readme from "./readme.md";\nimport { TEXT } from "./resources";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\n\nexport default {\n  title: "components|calcite-tip",\n  decorators: [withKnobs],\n  parameters: {\n    backgrounds: darkBackground,\n    docs: {\n      page: titlelessDocsPage\n    },\n    notes: parseReadme(readme)\n  }\n};\n\nconst { dir, theme } = ATTRIBUTES;\n\nconst createAttributes: () => Attributes = () => [\n  {\n    name: "dir",\n    value: select("dir", dir.values, dir.defaultValue)\n  },\n  {\n    name: "dismissed",\n    value: boolean("dismissed", false)\n  },\n  {\n    name: "non-dismissible",\n    value: boolean("nonDismissible", false)\n  },\n  {\n    name: "heading",\n    value: text("heading", "My Tip")\n  },\n  {\n    name: "text-close",\n    value: text("textClose", TEXT.close)\n  },\n  {\n    name: "theme",\n    value: select("theme", theme.values, theme.defaultValue)\n  }\n];\n\nconst html = `This is an image.Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae.This is a "link".`;\n\nexport const basic = () => create("calcite-tip", createAttributes(), html);\n',__ADDS_MAP__:{"components-calcite-tip--basic":{startLoc:{col:21,line:56},endLoc:{col:74,line:56},startBody:{col:21,line:56},endBody:{col:74,line:56}}},__MAIN_FILE_LOCATION__:"/calcite-tip.stories.ts",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/Users/juan6600/dev/projects/calcite-app-components/src/components/calcite-tip",__IDS_TO_FRAMEWORKS__:{}})},1617:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(3),__webpack_require__(50),__webpack_require__(39),__webpack_require__(11),__webpack_require__(4),__webpack_require__(155),__webpack_require__(156),__webpack_require__(5),__webpack_require__(44),__webpack_require__(0);var esm=__webpack_require__(8),blocks=__webpack_require__(41);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _extends(){return(_extends=Object.assign||function(target){for(var source,i=1;i` tags in the head of your HTML document:\n\n```html\n