From e019b14d20ba85d3492b5e9541eb0a1de1a003f8 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 20 Aug 2020 13:44:50 -0700 Subject: [PATCH] 6.2.0 --- CHANGELOG.md | 10 ++++++++++ docs/iframe.html | 2 +- ...js => main.896181a518e8af717664.bundle.js} | 20 +++++++++---------- ...> main.896181a518e8af717664.bundle.js.map} | 2 +- ...ntime~main.896181a518e8af717664.bundle.js} | 2 +- ...me~main.896181a518e8af717664.bundle.js.map | 1 + ...me~main.989c458bbc9c8bd401e1.bundle.js.map | 1 - ...ndors~main.896181a518e8af717664.bundle.js} | 4 ++-- ...96181a518e8af717664.bundle.js.LICENSE.txt} | 0 ...rs~main.896181a518e8af717664.bundle.js.map | 1 + ...rs~main.989c458bbc9c8bd401e1.bundle.js.map | 1 - package-lock.json | 2 +- package.json | 2 +- 13 files changed, 29 insertions(+), 19 deletions(-) rename docs/{main.989c458bbc9c8bd401e1.bundle.js => main.896181a518e8af717664.bundle.js} (56%) rename docs/{main.989c458bbc9c8bd401e1.bundle.js.map => main.896181a518e8af717664.bundle.js.map} (85%) rename docs/{runtime~main.989c458bbc9c8bd401e1.bundle.js => runtime~main.896181a518e8af717664.bundle.js} (97%) create mode 100644 docs/runtime~main.896181a518e8af717664.bundle.js.map delete mode 100644 docs/runtime~main.989c458bbc9c8bd401e1.bundle.js.map rename docs/{vendors~main.989c458bbc9c8bd401e1.bundle.js => vendors~main.896181a518e8af717664.bundle.js} (99%) rename docs/{vendors~main.989c458bbc9c8bd401e1.bundle.js.LICENSE.txt => vendors~main.896181a518e8af717664.bundle.js.LICENSE.txt} (100%) create mode 100644 docs/vendors~main.896181a518e8af717664.bundle.js.map delete mode 100644 docs/vendors~main.989c458bbc9c8bd401e1.bundle.js.map diff --git a/CHANGELOG.md b/CHANGELOG.md index 40a7744b..7eba4c11 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,16 @@ This document maintains a list of released versions and changes introduced by them. This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html) +## [6.2.0](https://github.com/Esri/calcite-app-components/compare/v6.1.2...v6.2.0) (2020-08-20) + +### Features + +- **panel:** Add tooling to test onscroll event for FlowItem and Panel [#842](https://github.com/Esri/calcite-app-components/issues/842) [#859](https://github.com/Esri/calcite-app-components/issues/859) ([#1050](https://github.com/Esri/calcite-app-components/issues/1050)) ([1cfe5e3](https://github.com/Esri/calcite-app-components/commit/1cfe5e397a507a62f083f166e9028b8f49a267d3)) + +### Bug Fixes + +- **panel:** remove slot-container and associated styles ([ceb6ab7](https://github.com/Esri/calcite-app-components/commit/ceb6ab768a23c1a0772e937628054a14033b370c)) + ### [6.1.2](https://github.com/Esri/calcite-app-components/compare/v6.1.1...v6.1.2) (2020-07-29) ### Bug Fixes diff --git a/docs/iframe.html b/docs/iframe.html index cff2e145..d07080ff 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/main.989c458bbc9c8bd401e1.bundle.js b/docs/main.896181a518e8af717664.bundle.js
similarity index 56%
rename from docs/main.989c458bbc9c8bd401e1.bundle.js
rename to docs/main.896181a518e8af717664.bundle.js
index b7e42af1..ab8c176f 100644
--- a/docs/main.989c458bbc9c8bd401e1.bundle.js
+++ b/docs/main.896181a518e8af717664.bundle.js
@@ -1,4 +1,4 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1601:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){var _storybook_html__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(159);module._StorybookPreserveDecorators=!0,Object(_storybook_html__WEBPACK_IMPORTED_MODULE_0__.configure)([__webpack_require__(1603)],module)}.call(this,__webpack_require__(1602)(module))},1603:function(module,exports,__webpack_require__){var map={"./1-introduction.stories.mdx":1604,"./2-getting-started.stories.mdx":1631,"./3-contributing.stories.mdx":1632,"./4-code-of-conduct.stories.mdx":1633,"./5-licensing.stories.mdx":1634,"./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":1635,"./components/calcite-block/calcite-block.stories.ts":1623,"./components/calcite-fab/calcite-fab.stories.ts":1624,"./components/calcite-flow/calcite-flow.stories.ts":1620,"./components/calcite-panel/calcite-panel.stories.ts":1625,"./components/calcite-pick-list/calcite-pick-list.stories.ts":1636,"./components/calcite-shell/calcite-shell.stories.ts":1626,"./components/calcite-tip-manager/calcite-tip-manager.stories.ts":1627,"./components/calcite-tip/calcite-tip.stories.ts":1628,"./components/calcite-value-list/calcite-value-list.stories.ts":1637};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=1603},1604: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__(51),__webpack_require__(39),__webpack_require__(12),__webpack_require__(4),__webpack_require__(157),__webpack_require__(158),__webpack_require__(6),__webpack_require__(46),__webpack_require__(0);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(5),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(43);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 _objectSpread(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: "intl-back",\n      value: text("intlBack", TEXT.back, group)\n    },\n    {\n      name: "intl-open",\n      value: text("intlOpen", TEXT.open, group)\n    },\n    {\n      name: "intl-close",\n      value: text("intlClose", TEXT.close, group)\n    }\n  ];\n};\n\nconst menuActionsHTML = dedent`\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 = (): string =>\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:117},endLoc:{col:3,line:123},startBody:{col:21,line:117},endBody:{col:3,line:123}}}},backgrounds:utils.b,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\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## Properties\n\n| Property | Attribute | Description                               | Type                | Default     |\n| -------- | --------- | ----------------------------------------- | ------------------- | ----------- |\n| `theme`  | `theme`   | Used to set the component\'s color scheme. | `"dark" \\| "light"` | `undefined` |\n\n\n## Methods\n\n### `back() => Promise`\n\nRemoves the currently active `calcite-flow-item`.\n\n#### Returns\n\nType: `Promise`\n\n\n\n\n## Slots\n\n| Slot | Description                                         |\n| ---- | --------------------------------------------------- |\n|      | A slot for adding `calcite-flow-item`s to the flow. |\n\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" \\| "m" \\| "s"`   | `undefined` |\n| `intlBack`       | `intl-back`        | \'Back\' text string.                                                                                       | `string`              | `undefined` |\n| `intlClose`      | `intl-close`       | \'Close\' text string for the close button. The close button will only be shown when \'dismissible\' is true. | `string`              | `undefined` |\n| `intlOpen`       | `intl-open`        | \'Open\' text string for the menu.                                                                          | `string`              | `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| `theme`          | `theme`            | Used to set the component\'s color scheme.                                                                 | `"dark" \\| "light"`   | `undefined` |\n\n## Events\n\n| Event                      | Description                                    | Type               |\n| -------------------------- | ---------------------------------------------- | ------------------ |\n| `calciteFlowItemBackClick` | Emitted when the back button has been clicked. | `CustomEvent` |\n| `calciteFlowItemScroll`    | Emitted when the content has been scrolled.    | `CustomEvent` |\n\n## Slots\n\n| Slot               | Description                                                                                                                     |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------------- |\n|                    | A slot for adding content to the flow item.                                                                                     |\n| `"fab"`            | A slot for adding a `calcite-fab` (floating action button) to perform an action.                                                |\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:"intl-back",value:Object(dist.text)("intlBack",TEXT_back,group)},{name:"intl-open",value:Object(dist.text)("intlOpen",TEXT_open,group)},{name:"intl-close",value:Object(dist.text)("intlClose",TEXT_close,group)}],menuActionsHTML=dedent_default.a`
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1601:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){var _storybook_html__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(159);module._StorybookPreserveDecorators=!0,Object(_storybook_html__WEBPACK_IMPORTED_MODULE_0__.configure)([__webpack_require__(1603)],module)}.call(this,__webpack_require__(1602)(module))},1603:function(module,exports,__webpack_require__){var map={"./1-introduction.stories.mdx":1604,"./2-getting-started.stories.mdx":1631,"./3-contributing.stories.mdx":1632,"./4-code-of-conduct.stories.mdx":1633,"./5-licensing.stories.mdx":1634,"./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":1635,"./components/calcite-block/calcite-block.stories.ts":1623,"./components/calcite-fab/calcite-fab.stories.ts":1624,"./components/calcite-flow/calcite-flow.stories.ts":1620,"./components/calcite-panel/calcite-panel.stories.ts":1625,"./components/calcite-pick-list/calcite-pick-list.stories.ts":1636,"./components/calcite-shell/calcite-shell.stories.ts":1626,"./components/calcite-tip-manager/calcite-tip-manager.stories.ts":1627,"./components/calcite-tip/calcite-tip.stories.ts":1628,"./components/calcite-value-list/calcite-value-list.stories.ts":1637};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=1603},1604: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__(51),__webpack_require__(39),__webpack_require__(12),__webpack_require__(4),__webpack_require__(157),__webpack_require__(158),__webpack_require__(6),__webpack_require__(46),__webpack_require__(0);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(5),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(43);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 _objectSpread(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: "intl-back",\n      value: text("intlBack", TEXT.back, group)\n    },\n    {\n      name: "intl-open",\n      value: text("intlOpen", TEXT.open, group)\n    },\n    {\n      name: "intl-close",\n      value: text("intlClose", TEXT.close, group)\n    }\n  ];\n};\n\nconst menuActionsHTML = dedent`\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 = (): string =>\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:117},endLoc:{col:3,line:123},startBody:{col:21,line:117},endBody:{col:3,line:123}}}},backgrounds:utils.b,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\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## Properties\n\n| Property | Attribute | Description                               | Type                | Default     |\n| -------- | --------- | ----------------------------------------- | ------------------- | ----------- |\n| `theme`  | `theme`   | Used to set the component\'s color scheme. | `"dark" \\| "light"` | `undefined` |\n\n\n## Methods\n\n### `back() => Promise`\n\nRemoves the currently active `calcite-flow-item`.\n\n#### Returns\n\nType: `Promise`\n\n\n\n\n## Slots\n\n| Slot | Description                                         |\n| ---- | --------------------------------------------------- |\n|      | A slot for adding `calcite-flow-item`s to the flow. |\n\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\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" \\| "m" \\| "s"`   | `undefined` |\n| `intlBack`       | `intl-back`        | \'Back\' text string.                                                                                       | `string`              | `undefined` |\n| `intlClose`      | `intl-close`       | \'Close\' text string for the close button. The close button will only be shown when \'dismissible\' is true. | `string`              | `undefined` |\n| `intlOpen`       | `intl-open`        | \'Open\' text string for the menu.                                                                          | `string`              | `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| `theme`          | `theme`            | Used to set the component\'s color scheme.                                                                 | `"dark" \\| "light"`   | `undefined` |\n\n\n## Events\n\n| Event                      | Description                                    | Type               |\n| -------------------------- | ---------------------------------------------- | ------------------ |\n| `calciteFlowItemBackClick` | Emitted when the back button has been clicked. | `CustomEvent` |\n| `calciteFlowItemScroll`    | Emitted when the content has been scrolled.    | `CustomEvent` |\n\n\n## Slots\n\n| Slot               | Description                                                                                                                     |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------------- |\n|                    | A slot for adding content to the flow item.                                                                                     |\n| `"fab"`            | A slot for adding a `calcite-fab` (floating action button) to perform an action.                                                |\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\n## Dependencies\n\n### Depends on\n\n- [calcite-action](../calcite-action)\n- [calcite-panel](../calcite-panel)\n\n### Graph\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:"intl-back",value:Object(dist.text)("intlBack",TEXT_back,group)},{name:"intl-open",value:Object(dist.text)("intlOpen",TEXT_open,group)},{name:"intl-close",value:Object(dist.text)("intlClose",TEXT_close,group)}],menuActionsHTML=dedent_default.a`
   
   
   
@@ -28,7 +28,7 @@
     
  • 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 { withA11y } from "@storybook/addon-a11y";\nimport { Attributes, createComponentHTML as create, darkBackground, parseReadme } 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, TEXT } from "../calcite-flow-item/resources";\nimport dedent from "dedent";\n\nexport default {\n  title: "components|calcite-flow",\n  decorators: [withKnobs, withA11y],\n  parameters: {\n    backgrounds: darkBackground,\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: "intl-back",\n      value: text("intlBack", TEXT.back, group)\n    },\n    {\n      name: "intl-open",\n      value: text("intlOpen", TEXT.open, group)\n    },\n    {\n      name: "intl-close",\n      value: text("intlClose", TEXT.close, group)\n    }\n  ];\n};\n\nconst menuActionsHTML = dedent`\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 = (): string =>\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:117},endLoc:{col:3,line:123},startBody:{col:21,line:117},endBody:{col:3,line:123}}},__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__:{}})},1621:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"basic",(function(){return basic})),__webpack_require__.d(__webpack_exports__,"withTooltip",(function(){return withTooltip}));var dist=__webpack_require__(1),addon_a11y_dist=__webpack_require__(29),utils=__webpack_require__(2),resources=__webpack_require__(30),dedent=__webpack_require__(11),dedent_default=__webpack_require__.n(dedent);const TEXT_expand="Expand",TEXT_collapse="Collapse";__webpack_require__(28).withSource;var addSourceDecorator=__webpack_require__(28).addSource,__SOURCE_PREFIX__="/Users/juan6600/dev/projects/calcite-app-components/src/components/calcite-action-bar",__STORY__='import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";\nimport { withA11y } from "@storybook/addon-a11y";\nimport { Attributes, createComponentHTML as create, darkBackground, parseReadme } from "../../../.storybook/utils";\nimport readme from "./readme.md";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\nimport dedent from "dedent";\nconst { dir, position, theme } = ATTRIBUTES;\nimport { TEXT } from "./resources";\n\nexport default {\n  title: "components|calcite-action-bar",\n  decorators: [withKnobs, withA11y],\n  parameters: {\n    backgrounds: darkBackground,\n    notes: parseReadme(readme)\n  }\n};\n\nconst createAttributes: () => Attributes = () => [\n  {\n    name: "expand",\n    value: boolean("expand", true)\n  },\n  {\n    name: "expanded",\n    value: boolean("expanded", false)\n  },\n  {\n    name: "dir",\n    value: select("dir", dir.values, dir.defaultValue)\n  },\n  {\n    name: "intl-expand",\n    value: text("intlExpand", TEXT.expand)\n  },\n  {\n    name: "intl-collapse",\n    value: text("intlCollapse", TEXT.collapse)\n  },\n  {\n    name: "position",\n    value: select("position", position.values, position.defaultValue)\n  },\n  {\n    name: "theme",\n    value: select("theme", theme.values, theme.defaultValue)\n  }\n];\n\nexport const basic = (): string =>\n  create(\n    "calcite-action-bar",\n    createAttributes(),\n    dedent`\n    \n      \n      \n    \n    \n      \n    \n  `\n  );\n\nexport const withTooltip = (): DocumentFragment => {\n  const action = document.createElement("calcite-action");\n  action.text = "Add";\n  action.icon = "plus";\n\n  const tooltip = document.createElement("calcite-tooltip");\n  tooltip.innerText = "Expand";\n\n  const actionBar = document.createElement("calcite-action-bar");\n  actionBar.tooltipExpand = tooltip;\n\n  actionBar.append(action);\n\n  const fragment = document.createDocumentFragment();\n\n  fragment.append(actionBar);\n  fragment.append(tooltip);\n\n  return fragment;\n};\n',__ADDS_MAP__={"components-calcite-action-bar--basic":{startLoc:{col:21,line:50},endLoc:{col:3,line:63},startBody:{col:21,line:50},endBody:{col:3,line:63}},"components-calcite-action-bar--with-tooltip":{startLoc:{col:27,line:65},endLoc:{col:1,line:84},startBody:{col:27,line:65},endBody:{col:1,line:84}}},__MODULE_DEPENDENCIES__=[],__LOCAL_DEPENDENCIES__={},__IDS_TO_FRAMEWORKS__={};const{dir:dir,position:position,theme:theme}=resources.a;__webpack_exports__.default={title:"components|calcite-action-bar",decorators:[dist.withKnobs,addon_a11y_dist.withA11y],parameters:{storySource:{source:'import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";\nimport { withA11y } from "@storybook/addon-a11y";\nimport { Attributes, createComponentHTML as create, darkBackground, parseReadme } from "../../../.storybook/utils";\nimport readme from "./readme.md";\nimport { ATTRIBUTES } from "../../../.storybook/resources";\nimport dedent from "dedent";\nconst { dir, position, theme } = ATTRIBUTES;\nimport { TEXT } from "./resources";\n\nexport default {\n  title: "components|calcite-action-bar",\n  decorators: [withKnobs, withA11y],\n  parameters: {\n    backgrounds: darkBackground,\n    notes: parseReadme(readme)\n  }\n};\n\nconst createAttributes: () => Attributes = () => [\n  {\n    name: "expand",\n    value: boolean("expand", true)\n  },\n  {\n    name: "expanded",\n    value: boolean("expanded", false)\n  },\n  {\n    name: "dir",\n    value: select("dir", dir.values, dir.defaultValue)\n  },\n  {\n    name: "intl-expand",\n    value: text("intlExpand", TEXT.expand)\n  },\n  {\n    name: "intl-collapse",\n    value: text("intlCollapse", TEXT.collapse)\n  },\n  {\n    name: "position",\n    value: select("position", position.values, position.defaultValue)\n  },\n  {\n    name: "theme",\n    value: select("theme", theme.values, theme.defaultValue)\n  }\n];\n\nexport const basic = (): string =>\n  create(\n    "calcite-action-bar",\n    createAttributes(),\n    dedent`\n    \n      \n      \n    \n    \n      \n    \n  `\n  );\n\nexport const withTooltip = (): DocumentFragment => {\n  const action = document.createElement("calcite-action");\n  action.text = "Add";\n  action.icon = "plus";\n\n  const tooltip = document.createElement("calcite-tooltip");\n  tooltip.innerText = "Expand";\n\n  const actionBar = document.createElement("calcite-action-bar");\n  actionBar.tooltipExpand = tooltip;\n\n  actionBar.append(action);\n\n  const fragment = document.createDocumentFragment();\n\n  fragment.append(actionBar);\n  fragment.append(tooltip);\n\n  return fragment;\n};\n',locationsMap:{"components-calcite-action-bar--basic":{startLoc:{col:21,line:50},endLoc:{col:3,line:63},startBody:{col:21,line:50},endBody:{col:3,line:63}},"components-calcite-action-bar--with-tooltip":{startLoc:{col:27,line:65},endLoc:{col:1,line:84},startBody:{col:27,line:65},endBody:{col:1,line:84}}}},backgrounds:utils.b,notes:Object(utils.c)('# calcite-action-bar\n\n## Description\n\nThe `calcite-action-bar` component is made up of multiple `calcite-action`s in the form of clickable icons. The action bar can be expanded to view actions with descriptive text or made smaller to view with just icons.\n\n\x3c!-- Auto Generated Below --\x3e\n\n## Usage\n\n### Basic\n\n#### Basic Action Bar (Top Actions)\n\nRenders `calcite-action`s that stick to the top of the bar.\n\n```html\n\n  \n  \n\n```\n\n#### With grouping\n\nRenders a group of `calcite-action`s contained in a `calcite-action-group`. Actions in a group are visually separated from other groups or actions in the bar.\n\n```html\n\n  \n    \n    \n  \n\n  \n    \n    \n  \n\n```\n\n#### Bottom Actions\n\nThe bottom-actions slot renders `calcite-action`s that stick to the bottom of the bar above the expand/collapse icon.\n\n```html\n\n  \n  \n\n```\n\n### Tooltip\n\n### Tooltip on the expand action\n\n```html\n\n  \n\nExpand\n