From a121a477cfe53712f46fe2f055eca555ee55d58b Mon Sep 17 00:00:00 2001
From: telekom <telekom@users.noreply.github.com>
Date: Mon, 15 Jan 2024 14:25:03 +0000
Subject: [PATCH] chore(deploy): storybook to gh-pages

---
 22.aea24da8.iframe.bundle.js                                | 3 +++
 ....LICENSE.txt => 22.aea24da8.iframe.bundle.js.LICENSE.txt | 0
 22.aea24da8.iframe.bundle.js.map                            | 1 +
 22.ea896cd8.iframe.bundle.js.map                            | 1 -
 23.c3f02ba7.iframe.bundle.js.map                            | 1 -
 ...a896cd8.iframe.bundle.js => 23.e35fb606.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 23.e35fb606.iframe.bundle.js.LICENSE.txt | 0
 23.e35fb606.iframe.bundle.js.map                            | 1 +
 24.46af6fde.iframe.bundle.js.map                            | 1 -
 ...3f02ba7.iframe.bundle.js => 24.fb94a1bc.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 24.fb94a1bc.iframe.bundle.js.LICENSE.txt | 0
 24.fb94a1bc.iframe.bundle.js.map                            | 1 +
 ...6af6fde.iframe.bundle.js => 25.1d2be920.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 25.1d2be920.iframe.bundle.js.LICENSE.txt | 0
 25.1d2be920.iframe.bundle.js.map                            | 1 +
 ...dad6f3a.iframe.bundle.js => 26.a10c5b97.iframe.bundle.js | 2 +-
 ...6f352ae.iframe.bundle.js => 27.b98b7b21.iframe.bundle.js | 2 +-
 ...21d2f07.iframe.bundle.js => 28.7f1fa39e.iframe.bundle.js | 2 +-
 28.85806c32.iframe.bundle.js.map                            | 1 -
 ...5806c32.iframe.bundle.js => 29.0667ce4d.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 29.0667ce4d.iframe.bundle.js.LICENSE.txt | 0
 29.0667ce4d.iframe.bundle.js.map                            | 1 +
 29.f8831396.iframe.bundle.js.map                            | 1 -
 30.dd39afef.iframe.bundle.js.map                            | 1 -
 ...8831396.iframe.bundle.js => 30.f906ea1f.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 30.f906ea1f.iframe.bundle.js.LICENSE.txt | 0
 30.f906ea1f.iframe.bundle.js.map                            | 1 +
 31.457199ae.iframe.bundle.js.map                            | 1 -
 ...d39afef.iframe.bundle.js => 31.8a31389e.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 31.8a31389e.iframe.bundle.js.LICENSE.txt | 0
 31.8a31389e.iframe.bundle.js.map                            | 1 +
 ...57199ae.iframe.bundle.js => 32.5f1e238f.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 32.5f1e238f.iframe.bundle.js.LICENSE.txt | 0
 32.5f1e238f.iframe.bundle.js.map                            | 1 +
 32.e5672086.iframe.bundle.js                                | 3 ---
 32.e5672086.iframe.bundle.js.map                            | 1 -
 33.7cd840dd.iframe.bundle.js.map                            | 1 -
 33.999d48ff.iframe.bundle.js                                | 3 +++
 ....LICENSE.txt => 33.999d48ff.iframe.bundle.js.LICENSE.txt | 0
 33.999d48ff.iframe.bundle.js.map                            | 1 +
 ...cd840dd.iframe.bundle.js => 34.2d48b0e5.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 34.2d48b0e5.iframe.bundle.js.LICENSE.txt | 0
 34.2d48b0e5.iframe.bundle.js.map                            | 1 +
 34.b9ee6464.iframe.bundle.js.map                            | 1 -
 35.82777aa1.iframe.bundle.js.map                            | 1 -
 ...9ee6464.iframe.bundle.js => 35.d8aef789.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 35.d8aef789.iframe.bundle.js.LICENSE.txt | 0
 35.d8aef789.iframe.bundle.js.map                            | 1 +
 ...2777aa1.iframe.bundle.js => 36.349e1fe7.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 36.349e1fe7.iframe.bundle.js.LICENSE.txt | 0
 36.349e1fe7.iframe.bundle.js.map                            | 1 +
 36.352c0c88.iframe.bundle.js.map                            | 1 -
 37.6a0f30c6.iframe.bundle.js.map                            | 1 -
 ...52c0c88.iframe.bundle.js => 37.ffa26d95.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 37.ffa26d95.iframe.bundle.js.LICENSE.txt | 0
 37.ffa26d95.iframe.bundle.js.map                            | 1 +
 38.4f21af2e.iframe.bundle.js.map                            | 1 -
 ...a0f30c6.iframe.bundle.js => 38.8618c2b2.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 38.8618c2b2.iframe.bundle.js.LICENSE.txt | 0
 38.8618c2b2.iframe.bundle.js.map                            | 1 +
 39.98fbd534.iframe.bundle.js.map                            | 1 -
 ...f21af2e.iframe.bundle.js => 39.f8ecdf25.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 39.f8ecdf25.iframe.bundle.js.LICENSE.txt | 0
 39.f8ecdf25.iframe.bundle.js.map                            | 1 +
 4.25209701.iframe.bundle.js                                 | 3 +++
 ...s.LICENSE.txt => 4.25209701.iframe.bundle.js.LICENSE.txt | 0
 4.25209701.iframe.bundle.js.map                             | 1 +
 4.433b77b8.iframe.bundle.js                                 | 3 ---
 4.433b77b8.iframe.bundle.js.map                             | 1 -
 40.70e384bd.iframe.bundle.js.map                            | 1 -
 ...8fbd534.iframe.bundle.js => 40.df867ae9.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 40.df867ae9.iframe.bundle.js.LICENSE.txt | 0
 40.df867ae9.iframe.bundle.js.map                            | 1 +
 41.05f31bce.iframe.bundle.js                                | 3 ---
 41.05f31bce.iframe.bundle.js.map                            | 1 -
 ...0e384bd.iframe.bundle.js => 41.2ba0fc83.iframe.bundle.js | 6 +++---
 ....LICENSE.txt => 41.2ba0fc83.iframe.bundle.js.LICENSE.txt | 0
 41.2ba0fc83.iframe.bundle.js.map                            | 1 +
 iframe.html                                                 | 2 +-
 main.c702baf6.iframe.bundle.js                              | 1 -
 main.cb105c1e.iframe.bundle.js                              | 1 +
 ...rame.bundle.js => runtime~main.fb412144.iframe.bundle.js | 2 +-
 scale-components.css                                        | 2 +-
 83 files changed, 79 insertions(+), 79 deletions(-)
 create mode 100644 22.aea24da8.iframe.bundle.js
 rename 22.ea896cd8.iframe.bundle.js.LICENSE.txt => 22.aea24da8.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 22.aea24da8.iframe.bundle.js.map
 delete mode 100644 22.ea896cd8.iframe.bundle.js.map
 delete mode 100644 23.c3f02ba7.iframe.bundle.js.map
 rename 22.ea896cd8.iframe.bundle.js => 23.e35fb606.iframe.bundle.js (98%)
 rename 23.c3f02ba7.iframe.bundle.js.LICENSE.txt => 23.e35fb606.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 23.e35fb606.iframe.bundle.js.map
 delete mode 100644 24.46af6fde.iframe.bundle.js.map
 rename 23.c3f02ba7.iframe.bundle.js => 24.fb94a1bc.iframe.bundle.js (99%)
 rename 24.46af6fde.iframe.bundle.js.LICENSE.txt => 24.fb94a1bc.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 24.fb94a1bc.iframe.bundle.js.map
 rename 24.46af6fde.iframe.bundle.js => 25.1d2be920.iframe.bundle.js (98%)
 rename 29.f8831396.iframe.bundle.js.LICENSE.txt => 25.1d2be920.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 25.1d2be920.iframe.bundle.js.map
 rename 25.adad6f3a.iframe.bundle.js => 26.a10c5b97.iframe.bundle.js (99%)
 rename 26.46f352ae.iframe.bundle.js => 27.b98b7b21.iframe.bundle.js (99%)
 rename 27.e21d2f07.iframe.bundle.js => 28.7f1fa39e.iframe.bundle.js (99%)
 delete mode 100644 28.85806c32.iframe.bundle.js.map
 rename 28.85806c32.iframe.bundle.js => 29.0667ce4d.iframe.bundle.js (98%)
 rename 28.85806c32.iframe.bundle.js.LICENSE.txt => 29.0667ce4d.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 29.0667ce4d.iframe.bundle.js.map
 delete mode 100644 29.f8831396.iframe.bundle.js.map
 delete mode 100644 30.dd39afef.iframe.bundle.js.map
 rename 29.f8831396.iframe.bundle.js => 30.f906ea1f.iframe.bundle.js (97%)
 rename 31.457199ae.iframe.bundle.js.LICENSE.txt => 30.f906ea1f.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 30.f906ea1f.iframe.bundle.js.map
 delete mode 100644 31.457199ae.iframe.bundle.js.map
 rename 30.dd39afef.iframe.bundle.js => 31.8a31389e.iframe.bundle.js (99%)
 rename 30.dd39afef.iframe.bundle.js.LICENSE.txt => 31.8a31389e.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 31.8a31389e.iframe.bundle.js.map
 rename 31.457199ae.iframe.bundle.js => 32.5f1e238f.iframe.bundle.js (98%)
 rename 35.82777aa1.iframe.bundle.js.LICENSE.txt => 32.5f1e238f.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 32.5f1e238f.iframe.bundle.js.map
 delete mode 100644 32.e5672086.iframe.bundle.js
 delete mode 100644 32.e5672086.iframe.bundle.js.map
 delete mode 100644 33.7cd840dd.iframe.bundle.js.map
 create mode 100644 33.999d48ff.iframe.bundle.js
 rename 32.e5672086.iframe.bundle.js.LICENSE.txt => 33.999d48ff.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 33.999d48ff.iframe.bundle.js.map
 rename 33.7cd840dd.iframe.bundle.js => 34.2d48b0e5.iframe.bundle.js (98%)
 rename 33.7cd840dd.iframe.bundle.js.LICENSE.txt => 34.2d48b0e5.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 34.2d48b0e5.iframe.bundle.js.map
 delete mode 100644 34.b9ee6464.iframe.bundle.js.map
 delete mode 100644 35.82777aa1.iframe.bundle.js.map
 rename 34.b9ee6464.iframe.bundle.js => 35.d8aef789.iframe.bundle.js (99%)
 rename 34.b9ee6464.iframe.bundle.js.LICENSE.txt => 35.d8aef789.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 35.d8aef789.iframe.bundle.js.map
 rename 35.82777aa1.iframe.bundle.js => 36.349e1fe7.iframe.bundle.js (97%)
 rename 36.352c0c88.iframe.bundle.js.LICENSE.txt => 36.349e1fe7.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 36.349e1fe7.iframe.bundle.js.map
 delete mode 100644 36.352c0c88.iframe.bundle.js.map
 delete mode 100644 37.6a0f30c6.iframe.bundle.js.map
 rename 36.352c0c88.iframe.bundle.js => 37.ffa26d95.iframe.bundle.js (99%)
 rename 39.98fbd534.iframe.bundle.js.LICENSE.txt => 37.ffa26d95.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 37.ffa26d95.iframe.bundle.js.map
 delete mode 100644 38.4f21af2e.iframe.bundle.js.map
 rename 37.6a0f30c6.iframe.bundle.js => 38.8618c2b2.iframe.bundle.js (98%)
 rename 37.6a0f30c6.iframe.bundle.js.LICENSE.txt => 38.8618c2b2.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 38.8618c2b2.iframe.bundle.js.map
 delete mode 100644 39.98fbd534.iframe.bundle.js.map
 rename 38.4f21af2e.iframe.bundle.js => 39.f8ecdf25.iframe.bundle.js (98%)
 rename 38.4f21af2e.iframe.bundle.js.LICENSE.txt => 39.f8ecdf25.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 39.f8ecdf25.iframe.bundle.js.map
 create mode 100644 4.25209701.iframe.bundle.js
 rename 4.433b77b8.iframe.bundle.js.LICENSE.txt => 4.25209701.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 4.25209701.iframe.bundle.js.map
 delete mode 100644 4.433b77b8.iframe.bundle.js
 delete mode 100644 4.433b77b8.iframe.bundle.js.map
 delete mode 100644 40.70e384bd.iframe.bundle.js.map
 rename 39.98fbd534.iframe.bundle.js => 40.df867ae9.iframe.bundle.js (98%)
 rename 40.70e384bd.iframe.bundle.js.LICENSE.txt => 40.df867ae9.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 40.df867ae9.iframe.bundle.js.map
 delete mode 100644 41.05f31bce.iframe.bundle.js
 delete mode 100644 41.05f31bce.iframe.bundle.js.map
 rename 40.70e384bd.iframe.bundle.js => 41.2ba0fc83.iframe.bundle.js (56%)
 rename 41.05f31bce.iframe.bundle.js.LICENSE.txt => 41.2ba0fc83.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 41.2ba0fc83.iframe.bundle.js.map
 delete mode 100644 main.c702baf6.iframe.bundle.js
 create mode 100644 main.cb105c1e.iframe.bundle.js
 rename runtime~main.bc15a3ff.iframe.bundle.js => runtime~main.fb412144.iframe.bundle.js (96%)

diff --git a/22.aea24da8.iframe.bundle.js b/22.aea24da8.iframe.bundle.js
new file mode 100644
index 0000000000..8b2a3e6fe5
--- /dev/null
+++ b/22.aea24da8.iframe.bundle.js
@@ -0,0 +1,3 @@
+/*! For license information please see 22.aea24da8.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{"../../node_modules/core-js/modules/es.date.now.js":function(module,exports,__webpack_require__){__webpack_require__("../../node_modules/core-js/internals/export.js")({target:"Date",stat:!0},{now:function now(){return(new Date).getTime()}})},"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-table.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_table",(function(){return Table}));__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.now.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Table=function(){function Table(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Table),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_5__.i)(this,hostRef),this.showSort=!1,this.striped=!1,this.slots={}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Table,[{key:"addSortIndicator",value:function addSortIndicator(el){el.insertAdjacentHTML("afterbegin",'\n        <span class="scale-sort-indicator" aria-hidden="true">\n          <scale-icon-content-sort-indicator-up class="scale-sort-indicator-icon up" size="16"></scale-icon-content-sort-indicator-up>\n          <scale-icon-content-sort-indicator-down class="scale-sort-indicator-icon down" size="16"></scale-icon-content-sort-indicator-down>\n        </span>')}},{key:"componentWillLoad",value:function componentWillLoad(){var _this=this;this.hostElement.querySelectorAll("th").forEach((function(th){_this.addSortIndicator(th)}))}},{key:"componentWillUpdate",value:function componentWillUpdate(){var _this2=this;this.hostElement.querySelectorAll("th").forEach((function(th){0===th.children.length&&(th.classList.add("dynamically-added"),_this2.addSortIndicator(th))}))}},{key:"componentDidLoad",value:function componentDidLoad(){var _this3=this,progressbar=this.hostElement.querySelectorAll("scale-progress-bar");progressbar&&progressbar.forEach((function(el){el.showStatus=!1})),this.mutationObserver=new MutationObserver((function(){_this3.forceUpdate=String(Date.now())})),this.mutationObserver.observe(this.hostElement,{childList:!0,subtree:!0})}},{key:"componentDidRender",value:function componentDidRender(){this.size&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_7__.a)({tag:"deprecated",message:'Property "size" is deprecated. Please use css overwrites for a small version!',type:"warn",source:this.hostElement})}},{key:"disconnectedCallback",value:function disconnectedCallback(){this.mutationObserver&&this.mutationObserver.disconnect()}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_5__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_5__.c,{class:this.getCssClassMap()},this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_5__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_5__.g)("slot",null))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_6__.a)("table",this.showSort&&"table--sortable",this.striped&&"table--striped")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_5__.f)(this)}}]),Table}();Table.style="scale-table{--radius:var(--telekom-radius-standard) var(--telekom-radius-standard) 0 0;--background:var(--telekom-color-ui-state-fill-standard);--color:var(--telekom-color-text-and-icon-standard);--color-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-active:var(--telekom-color-text-and-icon-primary-pressed);--font-size:var(--telekom-typography-font-size-small);--font-weight:var(--telekom-typography-font-weight-bold);--spacing-tbody-td:var(--telekom-spacing-composition-space-06)\n    var(--telekom-spacing-composition-space-04);--border-bottom-tbody-td:var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-faint);--background-tbody:var(--telekom-color-ui-state-fill-standard);--background-tbody-tr-hover:var(--telekom-color-ui-state-fill-hovered);--background-tfoot:var(--telekom-color-ui-state-fill-standard);--border-bottom-tfoot-td:var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-extra-strong);--spacing-th-sortable:0 var(--telekom-spacing-composition-space-04) 0 0;--background-th-sortable-hover:var(--telekom-color-ui-subtle);--background-th-sortable-active:var(--telekom-color-ui-faint);--box-shadow-th-sortable-focus:inset 0 0 0\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-color-functional-focus-standard);--background-tr-striped:var(--telekom-color-ui-subtle);--padding:var(--telekom-spacing-composition-space-00)\n    var(--telekom-spacing-composition-space-04)}.table{display:block;overflow:auto;border-radius:var(--radius);background:var(--background);color:var(--color)}.table table{width:100%;white-space:nowrap;border-spacing:0;border-collapse:collapse}.table th{padding:var(--padding);text-align:left;line-height:32px;color:var(--color);font-size:var(--font-size);background:var(--telekom-color-background-surface-subtle)}.table td{padding:var(--padding)}.table tbody tr td{padding:8px}.table tbody td{border-bottom:var(--border-bottom-tbody-td)}.table thead tr th:last-of-type,.table tbody tr td:last-of-type,.table tfoot tr td:last-of-type{padding-right:12px}.table tfoot{background:var(--background-tfoot)}.table tbody{background:var(--background-tbody)}.table tfoot tr td{padding:8px;font-weight:var(--font-weight);border-bottom:var(--border-bottom-tfoot-td)}.table .scale-sort-indicator-icon{display:none !important}.table tbody tr:hover{background:var(--background-tbody-tr-hover)}.table th:focus{outline:none}.table--size-default tbody tr td{padding:var(--spacing-tbody-td)}.table--sortable th{cursor:pointer;padding:var(--spacing-th-sortable)}.table--sortable th:hover{padding:var(--spacing-th-sortable);background:var(--background-th-sortable-hover)}.table--sortable th:active{background:var(--background-th-sortable-active)}.table--sortable th:focus{box-shadow:var(--box-shadow-th-sortable-focus);border-radius:var(--radius)}.table--sortable th .scale-sort-indicator-icon{display:inline-flex !important}.table--sortable th[aria-disabled]{padding:var(--padding);pointer-events:none}.table--sortable th:not([aria-sort]){padding:var(--padding)}.table--sortable th[aria-sort='none']{padding:var(--padding)}.table--sortable th[aria-sort='ascending'] .scale-sort-indicator .up{color:var(--color)}.table--sortable th:hover .scale-sort-indicator .up{color:var(--color-hover)}.table--sortable th:hover[aria-sort='ascending'] .scale-sort-indicator-icon.up{color:var(--color-hover)}.table--sortable th:active[aria-sort='ascending'] .scale-sort-indicator-icon.up{color:var(--color-active)}.table--sortable th[aria-sort='ascending'] .scale-sort-indicator{color:transparent}.table--sortable th:hover[aria-sort='ascending'] .scale-sort-indicator{color:transparent}.table--sortable th:active[aria-sort='ascending'] .scale-sort-indicator{color:transparent}.table--sortable th[aria-sort='descending'] .scale-sort-indicator-icon.up{color:transparent}.table--sortable th:hover[aria-sort='descending'] .scale-sort-indicator-icon.up{color:transparent}.table--sortable th:active[aria-sort='descending'] .scale-sort-indicator-icon.up{color:transparent}.table--sortable th[aria-sort='descending'] .scale-sort-indicator-icon{color:var(--color)}.table--sortable th:hover[aria-sort='descending'] .scale-sort-indicator-icon{color:var(--color-hover)}.table--sortable th:active[aria-sort='descending'] .scale-sort-indicator-icon{color:var(--color-active)}.table--sortable th .scale-sort-indicator{width:16px;height:16px;margin:0 0 0 4px;display:inline-block;position:relative}.table--sortable th .scale-sort-indicator-icon{top:4px;left:0;width:16px;height:16px;position:absolute}.table--sortable th .scale-sort-indicator{color:transparent}.table--sortable th[aria-sort='none']:hover{padding:0 8px 0 0}.table--sortable th[aria-sort='none'] .scale-sort-indicator{display:none}.table--sortable th:not([aria-sort]):hover{padding:0 8px 0 0}.table--sortable th:not([aria-sort]) .scale-sort-indicator{display:none}.table--sortable th:hover .scale-sort-indicator{display:inline-block}.table--striped table tr:nth-child(even){background:var(--background-tr-striped)}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
+//# sourceMappingURL=22.aea24da8.iframe.bundle.js.map
\ No newline at end of file
diff --git a/22.ea896cd8.iframe.bundle.js.LICENSE.txt b/22.aea24da8.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 22.ea896cd8.iframe.bundle.js.LICENSE.txt
rename to 22.aea24da8.iframe.bundle.js.LICENSE.txt
diff --git a/22.aea24da8.iframe.bundle.js.map b/22.aea24da8.iframe.bundle.js.map
new file mode 100644
index 0000000000..e58d0771df
--- /dev/null
+++ b/22.aea24da8.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"22.aea24da8.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/22.ea896cd8.iframe.bundle.js.map b/22.ea896cd8.iframe.bundle.js.map
deleted file mode 100644
index d480a15e9f..0000000000
--- a/22.ea896cd8.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"22.ea896cd8.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/23.c3f02ba7.iframe.bundle.js.map b/23.c3f02ba7.iframe.bundle.js.map
deleted file mode 100644
index d21f7db930..0000000000
--- a/23.c3f02ba7.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"23.c3f02ba7.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/22.ea896cd8.iframe.bundle.js b/23.e35fb606.iframe.bundle.js
similarity index 98%
rename from 22.ea896cd8.iframe.bundle.js
rename to 23.e35fb606.iframe.bundle.js
index 146b420a14..ae78fda9db 100644
--- a/22.ea896cd8.iframe.bundle.js
+++ b/23.e35fb606.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 22.ea896cd8.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-textarea.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_textarea",(function(){return Textarea}));__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Textarea=function(){function Textarea(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Textarea),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.i)(this,hostRef),this.scaleInput=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scale-input",7),this.scaleInputLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scaleInput",7),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scaleChange",7),this.scaleFocus=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scale-focus",7),this.scaleFocusLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scaleFocus",7),this.scaleBlur=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scale-blur",7),this.scaleBlurLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scaleBlur",7),this.scaleKeyDown=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scale-keydown",7),this.scaleKeyDownLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scaleKeyDown",7),this.name="",this.label="",this.helperText="",this.status="",this.invalid=!1,this.variant="informational",this.placeholder="",this.value="",this.hasFocus=!1,this.internalId=Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.e)(),this.handleInput=function(event){var target=event.target;target&&(_this.value=target.value||"",_this.emitChange()),Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.d)(_this,"scaleInput",event)},this.handleChange=function(event){var target=event.target;target&&(_this.value=target.value||"",_this.emitChange())},this.handleFocus=function(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.d)(_this,"scaleFocus"),_this.hasFocus=!0},this.handleBlur=function(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.d)(_this,"scaleBlur"),_this.hasFocus=!1},this.handleKeyDown=function(event){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.d)(_this,"scaleKeyDown",event)}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Textarea,[{key:"componentWillLoad",value:function componentWillLoad(){null==this.inputId&&(this.inputId="input-textarea-"+this.internalId)}},{key:"componentDidRender",value:function componentDidRender(){""!==this.status&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_9__.a)({tag:"deprecated",message:'Property "status" is deprecated. Please use the "invalid" property!',type:"warn",source:this.hostElement})}},{key:"emitChange",value:function emitChange(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.d)(this,"scaleChange",{value:null==this.value?this.value:this.value.toString()})}},{key:"render",value:function render(){var _this2=this,ariaInvalidAttr="error"===this.status||this.invalid?{"aria-invalid":"true"}:{},helperTextId="helper-message-"+this.internalId,ariaDescribedByAttr={"aria-describedBy":helperTextId},readonlyAttr=this.readonly?{readonly:"readonly"}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("div",{class:"textarea__wrapper",onClick:function onClick(){return _this2.focusableElement.focus()},style:!!this.resize&&"horizontal"===this.resize&&{width:"max-content"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("label",{class:"textarea__label",htmlFor:this.inputId},this.label),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("textarea",Object.assign({class:"textarea__control",style:!!this.resize&&{resize:this.resize},value:this.value},this.name?{name:this.name}:{},this.inputAutofocus?{autofocus:"true"}:{},{required:this.required,minLength:this.minLength,maxLength:this.maxLength,id:this.inputId,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown},this.placeholder?{placeholder:this.placeholder}:{},{disabled:this.disabled},readonlyAttr,this.rows?{rows:this.rows}:{},this.cols?{cols:this.cols}:{},ariaInvalidAttr,this.helperText?ariaDescribedByAttr:{},{ref:function ref(el){return _this2.focusableElement=el}}))),(!!this.helperText||!!this.counter)&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("div",{class:"textarea__meta",id:helperTextId,"aria-live":"polite","aria-relevant":"additions removals"},!!this.helperText&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("scale-helper-text",{helperText:this.helperText,variant:this.invalid?"danger":this.variant}),this.counter&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("div",{class:"textarea__counter"},this.value?String(this.value).length:0," /"," ",this.maxLength))))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_7__.a)("textarea",this.hasFocus&&"textarea--has-focus",this.resize&&"textarea--resize-"+this.resize,this.disabled&&"textarea--disabled",this.transparent&&"textarea--transparent",this.status&&"textarea--status-"+this.status,this.invalid&&"textarea--status-error",this.variant&&"textarea--variant-"+this.variant,this.readonly&&"textarea--readonly",null!=this.value&&""!==this.value&&"animated")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.f)(this)}}]),Textarea}();Textarea.style="scale-textarea{--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);--radius:var(--telekom-radius-standard);--border:var(--telekom-line-weight-standard) solid\n    var(--telekom-color-ui-border-standard);--border-error:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-danger-standard);--border-color-hover:var(--telekom-color-ui-border-hovered);--border-color-focus:var(--telekom-color-ui-border-hovered);--border-color-disabled:var(--telekom-color-ui-border-disabled);--background-color-hover:var(--telekom-color-ui-state-fill-hovered);--background-color-disabled:none;--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--spacing-x-control:var(--telekom-spacing-composition-space-05);--spacing-bottom-control:var(--telekom-spacing-composition-space-05);--spacing-top-control:calc(\n    1.125rem - var(--telekom-spacing-composition-space-01)\n  );--color-disabled:var(--telekom-color-text-and-icon-disabled);--background-disabled:transparent;--border-color-readonly:transparent;--background-readonly:var(--telekom-color-ui-disabled);--font-weight-meta:var(--telekom-typography-font-weight-bold);--font-size-meta:var(--telekom-typography-font-size-small);--line-height-meta:var(--telekom-typography-line-spacing-standard);--spacing-y-meta:var(--telekom-spacing-composition-space-03);--color-meta:var(--telekom-color-text-and-icon-standard);--color-meta-error:var(--telekom-color-text-and-icon-functional-danger);--spacing-control:0 calc(2rem - var(--telekom-spacing-composition-space-01))\n    0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));--transition-control:var(--transition);--background-control:var(--telekom-color-ui-state-fill-standard);--transition-counter:var(--transition);--color-counter-error:var(--color-meta-error);--transition-placeholder:var(--transition);--color-placeholder:var(--telekom-color-text-and-icon-additional);--color-label:var(--telekom-color-text-and-icon-additional);--color-label-readonly:var(--telekom-color-text-and-icon-standard);--z-index-label:var(--scl-z-index-10);--transition-label:var(--transition)}.textarea{position:relative;display:flex;flex-direction:column}.textarea__wrapper{display:flex;flex-direction:column;border-radius:var(--radius);border:var(--border)}.textarea__wrapper .textarea__control{margin:0;width:100%;resize:vertical;display:flex;outline:none;padding:var(--spacing-control);z-index:1;box-sizing:border-box;transition:var(--transition-control);font:var(--telekom-text-style-body);border:none;background-color:transparent;color:var(--color-meta);margin-top:var(--spacing-top-control)}.textarea .textarea__counter{display:flex;flex-shrink:0;transition:var(--transition-counter);margin-left:auto;justify-content:flex-end;font:var(--telekom-text-style-small);color:var(--telekom-color-text-and-icon-standard)}.textarea .textarea__meta{display:flex;justify-content:space-between;margin-top:var(--spacing-y-meta);color:var(--color-meta)}.textarea:not(.textarea--disabled):not(.textarea--readonly) .textarea__wrapper:hover{border-color:var(--border-color-hover);background-color:var(--background-color-hover)}.textarea:not(.textarea--disabled):not(.textarea--readonly).textarea--has-focus .textarea__wrapper{border-color:var(--border-color-focus);outline:var(--focus-outline);outline-offset:1px}.textarea:not(.textarea--disabled) .textarea__control:focus::placeholder{color:var(--color-placeholder)}.textarea .textarea__control::placeholder,.textarea ::placeholder{color:transparent;transition:var(--transition-placeholder)}.textarea__label{top:0;left:0;color:var(--color-label);display:flex;z-index:var(--z-index-label);position:absolute;transition:var(--transition-label);pointer-events:none;font:var(--telekom-text-style-ui);transform:translate(var(--spacing-x-control), 0.875rem)}.textarea--has-focus .textarea__label,.animated .textarea__label{font:var(--telekom-text-style-small-bold);transform:translate(\n    var(--spacing-x-control),\n    calc(0.25rem + var(--telekom-spacing-composition-space-01))\n  )}.textarea--status-error .textarea__wrapper{border:var(--border-error)}.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly) .textarea__wrapper:hover,.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly).textarea--has-focus .textarea__wrapper{border-color:var(--telekom-color-functional-danger-hovered)}.textarea--status-error .textarea__counter{color:var(--color-counter-error)}.textarea--transparent .textarea__control{background-color:transparent}.textarea--readonly .textarea__wrapper{border-color:var(--border-color-readonly);background:var(--background-readonly)}.textarea--readonly.textarea--has-focus .textarea__wrapper{outline:var(--focus-outline);outline-offset:1px}.textarea--readonly textarea,.textarea--readonly .textarea__wrapper .textarea__control{color:var(--color-label-readonly)}.textarea--disabled label,.textarea--disabled .textarea__label,.textarea--disabled textarea,.textarea--disabled .textarea__wrapper,.textarea--disabled .textarea__control,.textarea--disabled .textarea__meta{cursor:not-allowed;color:var(--color-disabled)}.textarea--disabled .textarea__wrapper{border-color:var(--border-color-disabled);background-color:var(--background-color-disabled)}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
-//# sourceMappingURL=22.ea896cd8.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 23.e35fb606.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-textarea.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_textarea",(function(){return Textarea}));__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Textarea=function(){function Textarea(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Textarea),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.i)(this,hostRef),this.scaleInput=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scale-input",7),this.scaleInputLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scaleInput",7),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scaleChange",7),this.scaleFocus=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scale-focus",7),this.scaleFocusLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scaleFocus",7),this.scaleBlur=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scale-blur",7),this.scaleBlurLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scaleBlur",7),this.scaleKeyDown=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scale-keydown",7),this.scaleKeyDownLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.e)(this,"scaleKeyDown",7),this.name="",this.label="",this.helperText="",this.status="",this.invalid=!1,this.variant="informational",this.placeholder="",this.value="",this.hasFocus=!1,this.internalId=Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.e)(),this.handleInput=function(event){var target=event.target;target&&(_this.value=target.value||"",_this.emitChange()),Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.d)(_this,"scaleInput",event)},this.handleChange=function(event){var target=event.target;target&&(_this.value=target.value||"",_this.emitChange())},this.handleFocus=function(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.d)(_this,"scaleFocus"),_this.hasFocus=!0},this.handleBlur=function(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.d)(_this,"scaleBlur"),_this.hasFocus=!1},this.handleKeyDown=function(event){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.d)(_this,"scaleKeyDown",event)}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Textarea,[{key:"componentWillLoad",value:function componentWillLoad(){null==this.inputId&&(this.inputId="input-textarea-"+this.internalId)}},{key:"componentDidRender",value:function componentDidRender(){""!==this.status&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_9__.a)({tag:"deprecated",message:'Property "status" is deprecated. Please use the "invalid" property!',type:"warn",source:this.hostElement})}},{key:"emitChange",value:function emitChange(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_8__.d)(this,"scaleChange",{value:null==this.value?this.value:this.value.toString()})}},{key:"render",value:function render(){var _this2=this,ariaInvalidAttr="error"===this.status||this.invalid?{"aria-invalid":"true"}:{},helperTextId="helper-message-"+this.internalId,ariaDescribedByAttr={"aria-describedBy":helperTextId},readonlyAttr=this.readonly?{readonly:"readonly"}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("div",{class:"textarea__wrapper",onClick:function onClick(){return _this2.focusableElement.focus()},style:!!this.resize&&"horizontal"===this.resize&&{width:"max-content"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("label",{class:"textarea__label",htmlFor:this.inputId},this.label),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("textarea",Object.assign({class:"textarea__control",style:!!this.resize&&{resize:this.resize},value:this.value},this.name?{name:this.name}:{},this.inputAutofocus?{autofocus:"true"}:{},{required:this.required,minLength:this.minLength,maxLength:this.maxLength,id:this.inputId,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown},this.placeholder?{placeholder:this.placeholder}:{},{disabled:this.disabled},readonlyAttr,this.rows?{rows:this.rows}:{},this.cols?{cols:this.cols}:{},ariaInvalidAttr,this.helperText?ariaDescribedByAttr:{},{ref:function ref(el){return _this2.focusableElement=el}}))),(!!this.helperText||!!this.counter)&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("div",{class:"textarea__meta",id:helperTextId,"aria-live":"polite","aria-relevant":"additions removals"},!!this.helperText&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("scale-helper-text",{helperText:this.helperText,variant:this.invalid?"danger":this.variant}),this.counter&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("div",{class:"textarea__counter"},this.value?String(this.value).length:0," /"," ",this.maxLength))))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_7__.a)("textarea",this.hasFocus&&"textarea--has-focus",this.resize&&"textarea--resize-"+this.resize,this.disabled&&"textarea--disabled",this.transparent&&"textarea--transparent",this.status&&"textarea--status-"+this.status,this.invalid&&"textarea--status-error",this.variant&&"textarea--variant-"+this.variant,this.readonly&&"textarea--readonly",null!=this.value&&""!==this.value&&"animated")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.f)(this)}}]),Textarea}();Textarea.style="scale-textarea{--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);--radius:var(--telekom-radius-standard);--border:var(--telekom-line-weight-standard) solid\n    var(--telekom-color-ui-border-standard);--border-error:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-danger-standard);--border-color-hover:var(--telekom-color-ui-border-hovered);--border-color-focus:var(--telekom-color-ui-border-hovered);--border-color-disabled:var(--telekom-color-ui-border-disabled);--background-color-hover:var(--telekom-color-ui-state-fill-hovered);--background-color-disabled:none;--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--spacing-x-control:var(--telekom-spacing-composition-space-05);--spacing-bottom-control:var(--telekom-spacing-composition-space-05);--spacing-top-control:calc(\n    1.125rem - var(--telekom-spacing-composition-space-01)\n  );--color-disabled:var(--telekom-color-text-and-icon-disabled);--background-disabled:transparent;--border-color-readonly:transparent;--background-readonly:var(--telekom-color-ui-disabled);--font-weight-meta:var(--telekom-typography-font-weight-bold);--font-size-meta:var(--telekom-typography-font-size-small);--line-height-meta:var(--telekom-typography-line-spacing-standard);--spacing-y-meta:var(--telekom-spacing-composition-space-03);--color-meta:var(--telekom-color-text-and-icon-standard);--color-meta-error:var(--telekom-color-text-and-icon-functional-danger);--spacing-control:0 calc(2rem - var(--telekom-spacing-composition-space-01))\n    0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));--transition-control:var(--transition);--background-control:var(--telekom-color-ui-state-fill-standard);--transition-counter:var(--transition);--color-counter-error:var(--color-meta-error);--transition-placeholder:var(--transition);--color-placeholder:var(--telekom-color-text-and-icon-additional);--color-label:var(--telekom-color-text-and-icon-additional);--color-label-readonly:var(--telekom-color-text-and-icon-standard);--z-index-label:var(--scl-z-index-10);--transition-label:var(--transition)}.textarea{position:relative;display:flex;flex-direction:column}.textarea__wrapper{display:flex;flex-direction:column;border-radius:var(--radius);border:var(--border)}.textarea__wrapper .textarea__control{margin:0;width:100%;resize:vertical;display:flex;outline:none;padding:var(--spacing-control);z-index:1;box-sizing:border-box;transition:var(--transition-control);font:var(--telekom-text-style-body);border:none;background-color:transparent;color:var(--color-meta);margin-top:var(--spacing-top-control)}.textarea .textarea__counter{display:flex;flex-shrink:0;transition:var(--transition-counter);margin-left:auto;justify-content:flex-end;font:var(--telekom-text-style-small);color:var(--telekom-color-text-and-icon-standard)}.textarea .textarea__meta{display:flex;justify-content:space-between;margin-top:var(--spacing-y-meta);color:var(--color-meta)}.textarea:not(.textarea--disabled):not(.textarea--readonly) .textarea__wrapper:hover{border-color:var(--border-color-hover);background-color:var(--background-color-hover)}.textarea:not(.textarea--disabled):not(.textarea--readonly).textarea--has-focus .textarea__wrapper{border-color:var(--border-color-focus);outline:var(--focus-outline);outline-offset:1px}.textarea:not(.textarea--disabled) .textarea__control:focus::placeholder{color:var(--color-placeholder)}.textarea .textarea__control::placeholder,.textarea ::placeholder{color:transparent;transition:var(--transition-placeholder)}.textarea__label{top:0;left:0;color:var(--color-label);display:flex;z-index:var(--z-index-label);position:absolute;transition:var(--transition-label);pointer-events:none;font:var(--telekom-text-style-ui);transform:translate(var(--spacing-x-control), 0.875rem)}.textarea--has-focus .textarea__label,.animated .textarea__label{font:var(--telekom-text-style-small-bold);transform:translate(\n    var(--spacing-x-control),\n    calc(0.25rem + var(--telekom-spacing-composition-space-01))\n  )}.textarea--status-error .textarea__wrapper{border:var(--border-error)}.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly) .textarea__wrapper:hover,.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly).textarea--has-focus .textarea__wrapper{border-color:var(--telekom-color-functional-danger-hovered)}.textarea--status-error .textarea__counter{color:var(--color-counter-error)}.textarea--transparent .textarea__control{background-color:transparent}.textarea--readonly .textarea__wrapper{border-color:var(--border-color-readonly);background:var(--background-readonly)}.textarea--readonly.textarea--has-focus .textarea__wrapper{outline:var(--focus-outline);outline-offset:1px}.textarea--readonly textarea,.textarea--readonly .textarea__wrapper .textarea__control{color:var(--color-label-readonly)}.textarea--disabled label,.textarea--disabled .textarea__label,.textarea--disabled textarea,.textarea--disabled .textarea__wrapper,.textarea--disabled .textarea__control,.textarea--disabled .textarea__meta{cursor:not-allowed;color:var(--color-disabled)}.textarea--disabled .textarea__wrapper{border-color:var(--border-color-disabled);background-color:var(--background-color-disabled)}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
+//# sourceMappingURL=23.e35fb606.iframe.bundle.js.map
\ No newline at end of file
diff --git a/23.c3f02ba7.iframe.bundle.js.LICENSE.txt b/23.e35fb606.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 23.c3f02ba7.iframe.bundle.js.LICENSE.txt
rename to 23.e35fb606.iframe.bundle.js.LICENSE.txt
diff --git a/23.e35fb606.iframe.bundle.js.map b/23.e35fb606.iframe.bundle.js.map
new file mode 100644
index 0000000000..95ed91a511
--- /dev/null
+++ b/23.e35fb606.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"23.e35fb606.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/24.46af6fde.iframe.bundle.js.map b/24.46af6fde.iframe.bundle.js.map
deleted file mode 100644
index 686622f463..0000000000
--- a/24.46af6fde.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"24.46af6fde.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/23.c3f02ba7.iframe.bundle.js b/24.fb94a1bc.iframe.bundle.js
similarity index 99%
rename from 23.c3f02ba7.iframe.bundle.js
rename to 24.fb94a1bc.iframe.bundle.js
index 5c0e7a2ec4..cee1aeb756 100644
--- a/23.c3f02ba7.iframe.bundle.js
+++ b/24.fb94a1bc.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 23.c3f02ba7.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-toggle-button.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_toggle_button",(function(){return ToggleButton}));__webpack_require__("../../node_modules/core-js/modules/es.string.small.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.trim.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var iconSizes;!function(iconSizes){iconSizes.xs="12",iconSizes.small="16",iconSizes.regular="22",iconSizes.large="24"}(iconSizes||(iconSizes={}));var i=0,ToggleButton=function(){function ToggleButton(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,ToggleButton),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.i)(this,hostRef),this.scaleClick=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.e)(this,"scale-click",7),this.scaleClickLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.e)(this,"scaleClick",7),this.size="regular",this.background="white",this.colorScheme="color",this.variant="color",this.disabled=!1,this.selected=!1,this.iconOnly=!1,this.iconPosition="before",this.radius=null,this.ariaLangSelected="selected",this.ariaLangDeselected="deselected",this.ariaDescriptionTranslation="$selected",this.hasScaleIcon=!1,this.handleClick=function(event){event.preventDefault(),_this.selected=!_this.selected,_this.handleIconShape(),_this.scaleClick.emit({id:_this.toggleButtonId,selected:_this.selected}),Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_14__.d)(_this,"scaleClick",{id:_this.toggleButtonId,selected:_this.selected})},this.handleIconShape=function(){_this.hasScaleIcon&&Array.from(_this.hostElement.children).forEach((function(node){"SCALE-ICON"===node.nodeName.substr(0,10)&&(_this.selected?node.setAttribute("selected","true"):node.removeAttribute("selected"))}))}}var _setFocus;return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(ToggleButton,[{key:"setFocus",value:(_setFocus=function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(regeneratorRuntime.mark((function _callee(){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:this.focusableElement.focus();case 1:case"end":return _context.stop()}}),_callee,this)}))),function setFocus(){return _setFocus.apply(this,arguments)})},{key:"connectedCallback",value:function connectedCallback(){this.setIconPositionProp(),this.handleIconShape()}},{key:"componentDidLoad",value:function componentDidLoad(){this.handleIconSize()}},{key:"componentDidRender",value:function componentDidRender(){this.handleIconSize(),this.hostElement.hasAttribute("aria-label")&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_15__.a)({tag:"deprecated",message:'Property "ariaLabel" is deprecated. Please use the "ariaLabelToggleButton" property!',type:"warn",source:this.hostElement})}},{key:"componentWillLoad",value:function componentWillLoad(){null==this.toggleButtonId&&(this.toggleButtonId="toggle-button-"+i++)}},{key:"getAriaDescriptionTranslation",value:function getAriaDescriptionTranslation(){var replaceSelected=this.selected?this.ariaLangSelected:this.ariaLangDeselected;return this.ariaDescriptionTranslation.replace(/\$position/g,""+this.position).replace(/\$selected/g,""+replaceSelected)}},{key:"handleIconSize",value:function handleIconSize(){var _this2=this;Array.from(this.hostElement.children).forEach((function(child){"SCALE-ICON"===child.tagName.substr(0,10)&&child.setAttribute("size",iconSizes[_this2.size])}))}},{key:"setIconPositionProp",value:function setIconPositionProp(){var _this3=this,nodes=Array.from(this.hostElement.childNodes).filter((function(node){return"SCALE-ICON"===node.nodeName.substr(0,10)&&(_this3.hasScaleIcon=!0),!(3===node.nodeType&&""===node.nodeValue.trim())}));!this.iconOnly&&nodes&&nodes.length&&nodes[nodes.length-1]&&"SCALE-ICON"===nodes[nodes.length-1].nodeName.substr(0,10)&&(this.iconPosition="after")}},{key:"render",value:function render(){var _this4=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("button",{ref:function ref(el){return _this4.focusableElement=el},class:this.getCssClassMap(),id:this.toggleButtonId,onClick:this.handleClick,disabled:this.disabled,type:"button","aria-label":this.ariaLabelToggleButton,"aria-pressed":this.selected,part:this.getBasePartMap(),"aria-description":this.getAriaDescriptionTranslation()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("slot",null)))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"toggle-button--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_13__.a)("toggle-button",this.size&&""+prefix+this.size,this.background&&prefix+("grey"===this.background?"primary":"secondary"),!this.iconOnly&&this.iconPosition&&"toggle-button--icon-"+this.iconPosition,this.iconOnly&&prefix+"icon-only",!this.disabled&&this.selected&&prefix+"selected",this.radius&&""+prefix+this.radius,this.colorScheme&&""+prefix+this.colorScheme,this.variant&&""+prefix+this.variant,!this.hideBorder&&prefix+"border")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.f)(this)}}]),ToggleButton}();ToggleButton.style=":host{--width:auto;--spacing-x:var(--telekom-spacing-composition-space-08);--spacing-x-icon-only:var(--telekom-spacing-composition-space-04);--min-height:var(--telekom-spacing-composition-space-08);--height-xs:var(--telekom-spacing-composition-space-08);--height-small:var(--telekom-spacing-composition-space-10);--height-regular:var(--telekom-spacing-composition-space-12);--height-large:var(--telekom-spacing-composition-space-14);--radius:var(--telekom-radius-small);--transition:all var(--telekom-motion-duration-transition)\n      var(--telekom-motion-easing-standard),\n    border-radius var(--telekom-motion-duration-instant);--box-shadow-focus:inset 0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);--font-weight:var(--telekom-typography-font-weight-bold);--font-size-large:var(--telekom-typography-font-size-body);--font-size-small:var(--telekom-typography-font-size-caption);--font-size-xs:var(--telekom-typography-font-size-small);--line-height:var(--telekom-spacing-composition-space-04);--spacing-icon-x:var(--telekom-spacing-composition-space-04);--vertical-align:middle;--border-color:var(--telekom-color-ui-border-standard);--border-color-disabled:var(--telekom-color-ui-border-disabled);--color-disabled:var(--telekom-color-text-and-icon-disabled);--font-size-small:var(--telekom-typography-font-size-small);--line-height-small:var(--telekom-typography-line-spacing-standard);--min-height-small:var(--telekom-spacing-composition-space-10);--radius-primary:var(--radius);--background-primary:var(--telekom-color-ui-subtle);--background-primary-disabled:var(--telekom-color-ui-disabled);--color-primary:var(--telekom-color-ui-extra-strong);--color-primary-hover:var(--telekom-color-primary-hovered);--color-primary-active:var(--telekom-color-primary-pressed);--background-secondary:transparent;--color-secondary:var(--telekom-color-text-and-icon-standard);--background-secondary-hover:var(--telekom-color-ui-state-fill-hovered);--background-secondary-active:var(--telekom-color-ui-state-fill-pressed);--background-secondary-disabled:none;--border-secondary:var(--telekom-color-ui-border-standard);--border-secondary-hover:var(--telekom-color-ui-border-hovered);--border-secondary-active:var(--telekom-color-ui-border-pressed);--border-secondary-focus:var(--telekom-color-functional-focus-standard);--color-selected:var(--telekom-color-text-and-icon-white-standard);--background-selected-light:var(--telekom-color-primary-standard);--background-selected-hover-light:var(--telekom-color-primary-hovered);--background-selected-active-light:var(--telekom-color-primary-pressed);--background-selected-dark:var(--telekom-color-ui-extra-strong);--background-selected-hover-dark:var(--telekom-color-ui-strong);--background-selected-active-dark:var(--telekom-color-ui-strong);--color-high-contrast:var(--telekom-color-text-and-icon-white-standard)}.toggle-button{box-sizing:border-box;display:inline-flex;align-items:center;position:relative;border:0;outline:none;cursor:pointer;user-select:none;font-family:inherit;word-spacing:inherit;letter-spacing:inherit;justify-content:center;text-decoration:none;font-weight:var(--font-weight);font-size:var(--font-size);line-height:var(--line-height);min-height:var(--min-height);width:var(--width);padding-left:var(--spacing-x);padding-right:var(--spacing-x);vertical-align:var(--vertical-align);transition:var(--transition);margin:0;color:var(--color-primary)}.toggle-button--primary{background:var(--background-primary)}.toggle-button--secondary{color:var(--color-secondary);background:var(--background-secondary)}.toggle-button--icon-before ::slotted(*){margin-right:var(--spacing-icon-x);pointer-events:none}.toggle-button--icon-after ::slotted(*){margin-left:var(--spacing-icon-x);pointer-events:none}.toggle-button--icon-only ::slotted(*){pointer-events:none}.toggle-button--xs{height:var(--height-xs);font-size:var(--font-size-xs)}.toggle-button--small{height:var(--height-small);font-size:var(--font-size-small)}.toggle-button--regular{height:var(--height-regular);font-size:var(--font-size-large)}.toggle-button--large{height:var(--height-large);font-size:var(--font-size-large)}.toggle-button:not(.button--disabled):focus{box-shadow:var(--box-shadow-focus)}.toggle-button:not(.button--disabled):hover{color:var(--color-secondary-hover);background-color:var(--background-secondary-hover)}.toggle-button:not(.button--disabled):active{color:var(--color-secondary-active);background-color:var(--background-secondary-active)}.toggle-button:disabled{color:var(--color-disabled);pointer-events:none;border:1px solid var(--border-color-disabled)}.toggle-button:disabled.toggle-button--primary{background:var(--background-primary-disabled)}.toggle-button--selected.toggle-button--color{color:var(--color-selected);background:var(--background-selected-light)}.toggle-button--selected:not(.button--disabled).toggle-button--color:hover{color:var(--color-selected);background:var(--background-selected-hover-light)}.toggle-button--selected:not(.button--disabled).toggle-button--color:active{color:var(--color-selected);background:var(--background-selected-active-light)}.toggle-button--selected.toggle-button--monochrome{color:var(--telekom-color-text-and-icon-inverted-standard);background:var(--background-selected-dark)}.toggle-button--selected:not(.button--disabled).toggle-button--monochrome:hover{color:var(--color-selected);background:var(--background-selected-hover-dark)}.toggle-button--selected:not(.button--disabled).toggle-button--monochrome:active{color:var(--color-selected);background:var(--background-selected-active-dark)}.toggle-button--border{border:1px solid var(--border-color)}.toggle-button--left,.toggle-button--left:disabled{border-right:0;border-radius:var(--radius-primary) 0 0 var(--radius-primary)}.toggle-button--right,.toggle-button--right:disabled{border-left:0;border-radius:0 var(--radius-primary) var(--radius-primary) 0}.toggle-button--both,.toggle-button--both:disabled{border-radius:var(--radius-primary)}.toggle-button--all,.toggle-button--all:disabled{border-radius:var(--radius-primary)}.toggle-button--neither,.toggle-button--neither:disabled{border-right:0;border-left:0;border-radius:0}@media screen and (forced-colors: active), (-ms-high-contrast: active){.toggle-button{color:var(--color-high-contrast)}}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
-//# sourceMappingURL=23.c3f02ba7.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 24.fb94a1bc.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-toggle-button.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_toggle_button",(function(){return ToggleButton}));__webpack_require__("../../node_modules/core-js/modules/es.string.small.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.trim.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var iconSizes;!function(iconSizes){iconSizes.xs="12",iconSizes.small="16",iconSizes.regular="22",iconSizes.large="24"}(iconSizes||(iconSizes={}));var i=0,ToggleButton=function(){function ToggleButton(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,ToggleButton),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.i)(this,hostRef),this.scaleClick=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.e)(this,"scale-click",7),this.scaleClickLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.e)(this,"scaleClick",7),this.size="regular",this.background="white",this.colorScheme="color",this.variant="color",this.disabled=!1,this.selected=!1,this.iconOnly=!1,this.iconPosition="before",this.radius=null,this.ariaLangSelected="selected",this.ariaLangDeselected="deselected",this.ariaDescriptionTranslation="$selected",this.hasScaleIcon=!1,this.handleClick=function(event){event.preventDefault(),_this.selected=!_this.selected,_this.handleIconShape(),_this.scaleClick.emit({id:_this.toggleButtonId,selected:_this.selected}),Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_14__.d)(_this,"scaleClick",{id:_this.toggleButtonId,selected:_this.selected})},this.handleIconShape=function(){_this.hasScaleIcon&&Array.from(_this.hostElement.children).forEach((function(node){"SCALE-ICON"===node.nodeName.substr(0,10)&&(_this.selected?node.setAttribute("selected","true"):node.removeAttribute("selected"))}))}}var _setFocus;return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(ToggleButton,[{key:"setFocus",value:(_setFocus=function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(regeneratorRuntime.mark((function _callee(){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:this.focusableElement.focus();case 1:case"end":return _context.stop()}}),_callee,this)}))),function setFocus(){return _setFocus.apply(this,arguments)})},{key:"connectedCallback",value:function connectedCallback(){this.setIconPositionProp(),this.handleIconShape()}},{key:"componentDidLoad",value:function componentDidLoad(){this.handleIconSize()}},{key:"componentDidRender",value:function componentDidRender(){this.handleIconSize(),this.hostElement.hasAttribute("aria-label")&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_15__.a)({tag:"deprecated",message:'Property "ariaLabel" is deprecated. Please use the "ariaLabelToggleButton" property!',type:"warn",source:this.hostElement})}},{key:"componentWillLoad",value:function componentWillLoad(){null==this.toggleButtonId&&(this.toggleButtonId="toggle-button-"+i++)}},{key:"getAriaDescriptionTranslation",value:function getAriaDescriptionTranslation(){var replaceSelected=this.selected?this.ariaLangSelected:this.ariaLangDeselected;return this.ariaDescriptionTranslation.replace(/\$position/g,""+this.position).replace(/\$selected/g,""+replaceSelected)}},{key:"handleIconSize",value:function handleIconSize(){var _this2=this;Array.from(this.hostElement.children).forEach((function(child){"SCALE-ICON"===child.tagName.substr(0,10)&&child.setAttribute("size",iconSizes[_this2.size])}))}},{key:"setIconPositionProp",value:function setIconPositionProp(){var _this3=this,nodes=Array.from(this.hostElement.childNodes).filter((function(node){return"SCALE-ICON"===node.nodeName.substr(0,10)&&(_this3.hasScaleIcon=!0),!(3===node.nodeType&&""===node.nodeValue.trim())}));!this.iconOnly&&nodes&&nodes.length&&nodes[nodes.length-1]&&"SCALE-ICON"===nodes[nodes.length-1].nodeName.substr(0,10)&&(this.iconPosition="after")}},{key:"render",value:function render(){var _this4=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("button",{ref:function ref(el){return _this4.focusableElement=el},class:this.getCssClassMap(),id:this.toggleButtonId,onClick:this.handleClick,disabled:this.disabled,type:"button","aria-label":this.ariaLabelToggleButton,"aria-pressed":this.selected,part:this.getBasePartMap(),"aria-description":this.getAriaDescriptionTranslation()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("slot",null)))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"toggle-button--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_13__.a)("toggle-button",this.size&&""+prefix+this.size,this.background&&prefix+("grey"===this.background?"primary":"secondary"),!this.iconOnly&&this.iconPosition&&"toggle-button--icon-"+this.iconPosition,this.iconOnly&&prefix+"icon-only",!this.disabled&&this.selected&&prefix+"selected",this.radius&&""+prefix+this.radius,this.colorScheme&&""+prefix+this.colorScheme,this.variant&&""+prefix+this.variant,!this.hideBorder&&prefix+"border")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.f)(this)}}]),ToggleButton}();ToggleButton.style=":host{--width:auto;--spacing-x:var(--telekom-spacing-composition-space-08);--spacing-x-icon-only:var(--telekom-spacing-composition-space-04);--min-height:var(--telekom-spacing-composition-space-08);--height-xs:var(--telekom-spacing-composition-space-08);--height-small:var(--telekom-spacing-composition-space-10);--height-regular:var(--telekom-spacing-composition-space-12);--height-large:var(--telekom-spacing-composition-space-14);--radius:var(--telekom-radius-small);--transition:all var(--telekom-motion-duration-transition)\n      var(--telekom-motion-easing-standard),\n    border-radius var(--telekom-motion-duration-instant);--box-shadow-focus:inset 0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);--font-weight:var(--telekom-typography-font-weight-bold);--font-size-large:var(--telekom-typography-font-size-body);--font-size-small:var(--telekom-typography-font-size-caption);--font-size-xs:var(--telekom-typography-font-size-small);--line-height:var(--telekom-spacing-composition-space-04);--spacing-icon-x:var(--telekom-spacing-composition-space-04);--vertical-align:middle;--border-color:var(--telekom-color-ui-border-standard);--border-color-disabled:var(--telekom-color-ui-border-disabled);--color-disabled:var(--telekom-color-text-and-icon-disabled);--font-size-small:var(--telekom-typography-font-size-small);--line-height-small:var(--telekom-typography-line-spacing-standard);--min-height-small:var(--telekom-spacing-composition-space-10);--radius-primary:var(--radius);--background-primary:var(--telekom-color-ui-subtle);--background-primary-disabled:var(--telekom-color-ui-disabled);--color-primary:var(--telekom-color-ui-extra-strong);--color-primary-hover:var(--telekom-color-primary-hovered);--color-primary-active:var(--telekom-color-primary-pressed);--background-secondary:transparent;--color-secondary:var(--telekom-color-text-and-icon-standard);--background-secondary-hover:var(--telekom-color-ui-state-fill-hovered);--background-secondary-active:var(--telekom-color-ui-state-fill-pressed);--background-secondary-disabled:none;--border-secondary:var(--telekom-color-ui-border-standard);--border-secondary-hover:var(--telekom-color-ui-border-hovered);--border-secondary-active:var(--telekom-color-ui-border-pressed);--border-secondary-focus:var(--telekom-color-functional-focus-standard);--color-selected:var(--telekom-color-text-and-icon-white-standard);--background-selected-light:var(--telekom-color-primary-standard);--background-selected-hover-light:var(--telekom-color-primary-hovered);--background-selected-active-light:var(--telekom-color-primary-pressed);--background-selected-dark:var(--telekom-color-ui-extra-strong);--background-selected-hover-dark:var(--telekom-color-ui-strong);--background-selected-active-dark:var(--telekom-color-ui-strong);--color-high-contrast:var(--telekom-color-text-and-icon-white-standard)}.toggle-button{box-sizing:border-box;display:inline-flex;align-items:center;position:relative;border:0;outline:none;cursor:pointer;user-select:none;font-family:inherit;word-spacing:inherit;letter-spacing:inherit;justify-content:center;text-decoration:none;font-weight:var(--font-weight);font-size:var(--font-size);line-height:var(--line-height);min-height:var(--min-height);width:var(--width);padding-left:var(--spacing-x);padding-right:var(--spacing-x);vertical-align:var(--vertical-align);transition:var(--transition);margin:0;color:var(--color-primary)}.toggle-button--primary{background:var(--background-primary)}.toggle-button--secondary{color:var(--color-secondary);background:var(--background-secondary)}.toggle-button--icon-before ::slotted(*){margin-right:var(--spacing-icon-x);pointer-events:none}.toggle-button--icon-after ::slotted(*){margin-left:var(--spacing-icon-x);pointer-events:none}.toggle-button--icon-only ::slotted(*){pointer-events:none}.toggle-button--xs{height:var(--height-xs);font-size:var(--font-size-xs)}.toggle-button--small{height:var(--height-small);font-size:var(--font-size-small)}.toggle-button--regular{height:var(--height-regular);font-size:var(--font-size-large)}.toggle-button--large{height:var(--height-large);font-size:var(--font-size-large)}.toggle-button:not(.button--disabled):focus{box-shadow:var(--box-shadow-focus)}.toggle-button:not(.button--disabled):hover{color:var(--color-secondary-hover);background-color:var(--background-secondary-hover)}.toggle-button:not(.button--disabled):active{color:var(--color-secondary-active);background-color:var(--background-secondary-active)}.toggle-button:disabled{color:var(--color-disabled);pointer-events:none;border:1px solid var(--border-color-disabled)}.toggle-button:disabled.toggle-button--primary{background:var(--background-primary-disabled)}.toggle-button--selected.toggle-button--color{color:var(--color-selected);background:var(--background-selected-light)}.toggle-button--selected:not(.button--disabled).toggle-button--color:hover{color:var(--color-selected);background:var(--background-selected-hover-light)}.toggle-button--selected:not(.button--disabled).toggle-button--color:active{color:var(--color-selected);background:var(--background-selected-active-light)}.toggle-button--selected.toggle-button--monochrome{color:var(--telekom-color-text-and-icon-inverted-standard);background:var(--background-selected-dark)}.toggle-button--selected:not(.button--disabled).toggle-button--monochrome:hover{color:var(--color-selected);background:var(--background-selected-hover-dark)}.toggle-button--selected:not(.button--disabled).toggle-button--monochrome:active{color:var(--color-selected);background:var(--background-selected-active-dark)}.toggle-button--border{border:1px solid var(--border-color)}.toggle-button--left,.toggle-button--left:disabled{border-right:0;border-radius:var(--radius-primary) 0 0 var(--radius-primary)}.toggle-button--right,.toggle-button--right:disabled{border-left:0;border-radius:0 var(--radius-primary) var(--radius-primary) 0}.toggle-button--both,.toggle-button--both:disabled{border-radius:var(--radius-primary)}.toggle-button--all,.toggle-button--all:disabled{border-radius:var(--radius-primary)}.toggle-button--neither,.toggle-button--neither:disabled{border-right:0;border-left:0;border-radius:0}@media screen and (forced-colors: active), (-ms-high-contrast: active){.toggle-button{color:var(--color-high-contrast)}}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
+//# sourceMappingURL=24.fb94a1bc.iframe.bundle.js.map
\ No newline at end of file
diff --git a/24.46af6fde.iframe.bundle.js.LICENSE.txt b/24.fb94a1bc.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 24.46af6fde.iframe.bundle.js.LICENSE.txt
rename to 24.fb94a1bc.iframe.bundle.js.LICENSE.txt
diff --git a/24.fb94a1bc.iframe.bundle.js.map b/24.fb94a1bc.iframe.bundle.js.map
new file mode 100644
index 0000000000..53b04474c1
--- /dev/null
+++ b/24.fb94a1bc.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"24.fb94a1bc.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/24.46af6fde.iframe.bundle.js b/25.1d2be920.iframe.bundle.js
similarity index 98%
rename from 24.46af6fde.iframe.bundle.js
rename to 25.1d2be920.iframe.bundle.js
index 1a9d0262f1..bcc311ef6a 100644
--- a/24.46af6fde.iframe.bundle.js
+++ b/25.1d2be920.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 24.46af6fde.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-toggle-group.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_toggle_group",(function(){return ToggleGroup}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var ToggleGroup=function(){function ToggleGroup(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,ToggleGroup),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.i)(this,hostRef),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.e)(this,"scaleChange",7),this.position=0,this.slottedButtons=0,this.status=[],this.size="regular",this.background="white",this.fullWidth=!1,this.disabled=!1,this.hideBorder=!1,this.singleSelect=!1,this.ariaLabelTranslation="toggle button group with $slottedButtons buttons",this.colorScheme="color",this.variant="color"}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(ToggleGroup,[{key:"scaleClickHandler",value:function scaleClickHandler(ev){var tempState;tempState=this.singleSelect&&ev.detail.selected?this.status.map((function(obj){return ev.detail.id===obj.id?ev.detail:Object.assign(Object.assign({},obj),{selected:!1})})):this.status.map((function(obj){return ev.detail.id===obj.id?ev.detail:Object.assign({},obj)})),this.setNewState(tempState)}},{key:"handlePropsChange",value:function handlePropsChange(){this.propagatePropsToChildren()}},{key:"componentDidLoad",value:function componentDidLoad(){var _this=this,tempState=[],toggleButtons=this.getAllToggleButtons();this.slottedButtons=toggleButtons.length,toggleButtons.forEach((function(toggleButton){_this.position++,tempState.push({id:toggleButton.getAttribute("toggle-button-id"),selected:toggleButton.hasAttribute("selected")}),toggleButton.setAttribute("position",_this.position.toString()),toggleButton.setAttribute("aria-description-translation","$position $selected")})),this.propagatePropsToChildren(),this.position=0,this.status=tempState}},{key:"getAllToggleButtons",value:function getAllToggleButtons(){return Array.from(this.hostElement.querySelectorAll("scale-toggle-button"))}},{key:"propagatePropsToChildren",value:function propagatePropsToChildren(){var _this2=this;this.getAllToggleButtons().forEach((function(el){el.setAttribute("size",_this2.size),el.setAttribute("background",_this2.background),el.setAttribute("disabled",_this2.disabled&&"disabled"),el.setAttribute("color-scheme","color"!==_this2.variant?_this2.variant:_this2.colorScheme),el.setAttribute("variant","color"!==_this2.colorScheme?_this2.colorScheme:_this2.variant),el.setAttribute("hide-border",_this2.hideBorder?"true":"false")}))}},{key:"getAriaLabelTranslation",value:function getAriaLabelTranslation(){return this.ariaLabelTranslation.replace(/\$slottedButtons/g,""+this.slottedButtons)}},{key:"componentDidRender",value:function componentDidRender(){this.fullWidth&&this.setButtonWidth(),this.setChildrenCorners(),"color"!==this.colorScheme&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_15__.a)({tag:"deprecated",message:'Property "colorScheme" is deprecated. Please use the "variant" property!',type:"warn",source:this.hostElement})}},{key:"setNewState",value:function setNewState(tempState){Array.from(this.hostElement.querySelectorAll("scale-toggle-button")).forEach((function(button,i){button.setAttribute("selected",tempState[i].selected?"true":"false")})),this.status=tempState,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_14__.d)(this,"scaleChange",this.status)}},{key:"setButtonWidth",value:function setButtonWidth(){Array.from(this.hostElement.children).forEach((function(child){child.shadowRoot.querySelector("button").style.width="100%"}))}},{key:"setChildrenCorners",value:function setChildrenCorners(){var children=Array.from(this.hostElement.children);if(1===children.length)children[0].setAttribute("radius","all");else for(var i=0;i<children.length;i++)0===i&&children[i].setAttribute("radius","left"),i>0&&i<children.length-1&&children[i].setAttribute("radius","neither"),i===children.length-1&&children[i].setAttribute("radius","right")}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("div",{class:this.getCssClassMap(),part:this.getBasePartMap(),"aria-label":this.getAriaLabelTranslation(),role:"group"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("slot",null)))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"toggle-group--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_13__.a)("toggle-group",this.fullWidth&&prefix+"block",!this.fullWidth&&prefix+"inline",this.disabled&&prefix+"disabled")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.f)(this)}}],[{key:"watchers",get:function get(){return{background:["handlePropsChange"],disabled:["handlePropsChange"],hideBorder:["handlePropsChange"],size:["handlePropsChange"],variant:["handlePropsChange"]}}}]),ToggleGroup}();ToggleGroup.style=":host{--border-color:var(--telekom-color-ui-border-standard);--border-color-disabled:var(--telekom-color-ui-border-disabled);--border:var(--telekom-spacing-composition-space-01) solid\n    var(--border-color);--border-disabled:var(--telekom-spacing-composition-space-01) solid\n    var(--border-color-disabled);--radius:var(--telekom-radius-standard)}.toggle-group--inline{display:inline-flex}.toggle-group--block{display:flex}.toggle-group--block ::slotted(*){flex-grow:1}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
-//# sourceMappingURL=24.46af6fde.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 25.1d2be920.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-toggle-group.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_toggle_group",(function(){return ToggleGroup}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var ToggleGroup=function(){function ToggleGroup(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,ToggleGroup),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.i)(this,hostRef),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.e)(this,"scaleChange",7),this.position=0,this.slottedButtons=0,this.status=[],this.size="regular",this.background="white",this.fullWidth=!1,this.disabled=!1,this.hideBorder=!1,this.singleSelect=!1,this.ariaLabelTranslation="toggle button group with $slottedButtons buttons",this.colorScheme="color",this.variant="color"}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(ToggleGroup,[{key:"scaleClickHandler",value:function scaleClickHandler(ev){var tempState;tempState=this.singleSelect&&ev.detail.selected?this.status.map((function(obj){return ev.detail.id===obj.id?ev.detail:Object.assign(Object.assign({},obj),{selected:!1})})):this.status.map((function(obj){return ev.detail.id===obj.id?ev.detail:Object.assign({},obj)})),this.setNewState(tempState)}},{key:"handlePropsChange",value:function handlePropsChange(){this.propagatePropsToChildren()}},{key:"componentDidLoad",value:function componentDidLoad(){var _this=this,tempState=[],toggleButtons=this.getAllToggleButtons();this.slottedButtons=toggleButtons.length,toggleButtons.forEach((function(toggleButton){_this.position++,tempState.push({id:toggleButton.getAttribute("toggle-button-id"),selected:toggleButton.hasAttribute("selected")}),toggleButton.setAttribute("position",_this.position.toString()),toggleButton.setAttribute("aria-description-translation","$position $selected")})),this.propagatePropsToChildren(),this.position=0,this.status=tempState}},{key:"getAllToggleButtons",value:function getAllToggleButtons(){return Array.from(this.hostElement.querySelectorAll("scale-toggle-button"))}},{key:"propagatePropsToChildren",value:function propagatePropsToChildren(){var _this2=this;this.getAllToggleButtons().forEach((function(el){el.setAttribute("size",_this2.size),el.setAttribute("background",_this2.background),el.setAttribute("disabled",_this2.disabled&&"disabled"),el.setAttribute("color-scheme","color"!==_this2.variant?_this2.variant:_this2.colorScheme),el.setAttribute("variant","color"!==_this2.colorScheme?_this2.colorScheme:_this2.variant),el.setAttribute("hide-border",_this2.hideBorder?"true":"false")}))}},{key:"getAriaLabelTranslation",value:function getAriaLabelTranslation(){return this.ariaLabelTranslation.replace(/\$slottedButtons/g,""+this.slottedButtons)}},{key:"componentDidRender",value:function componentDidRender(){this.fullWidth&&this.setButtonWidth(),this.setChildrenCorners(),"color"!==this.colorScheme&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_15__.a)({tag:"deprecated",message:'Property "colorScheme" is deprecated. Please use the "variant" property!',type:"warn",source:this.hostElement})}},{key:"setNewState",value:function setNewState(tempState){Array.from(this.hostElement.querySelectorAll("scale-toggle-button")).forEach((function(button,i){button.setAttribute("selected",tempState[i].selected?"true":"false")})),this.status=tempState,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_14__.d)(this,"scaleChange",this.status)}},{key:"setButtonWidth",value:function setButtonWidth(){Array.from(this.hostElement.children).forEach((function(child){child.shadowRoot.querySelector("button").style.width="100%"}))}},{key:"setChildrenCorners",value:function setChildrenCorners(){var children=Array.from(this.hostElement.children);if(1===children.length)children[0].setAttribute("radius","all");else for(var i=0;i<children.length;i++)0===i&&children[i].setAttribute("radius","left"),i>0&&i<children.length-1&&children[i].setAttribute("radius","neither"),i===children.length-1&&children[i].setAttribute("radius","right")}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("div",{class:this.getCssClassMap(),part:this.getBasePartMap(),"aria-label":this.getAriaLabelTranslation(),role:"group"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.g)("slot",null)))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"toggle-group--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_13__.a)("toggle-group",this.fullWidth&&prefix+"block",!this.fullWidth&&prefix+"inline",this.disabled&&prefix+"disabled")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_12__.f)(this)}}],[{key:"watchers",get:function get(){return{background:["handlePropsChange"],disabled:["handlePropsChange"],hideBorder:["handlePropsChange"],size:["handlePropsChange"],variant:["handlePropsChange"]}}}]),ToggleGroup}();ToggleGroup.style=":host{--border-color:var(--telekom-color-ui-border-standard);--border-color-disabled:var(--telekom-color-ui-border-disabled);--border:var(--telekom-spacing-composition-space-01) solid\n    var(--border-color);--border-disabled:var(--telekom-spacing-composition-space-01) solid\n    var(--border-color-disabled);--radius:var(--telekom-radius-standard)}.toggle-group--inline{display:inline-flex}.toggle-group--block{display:flex}.toggle-group--block ::slotted(*){flex-grow:1}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
+//# sourceMappingURL=25.1d2be920.iframe.bundle.js.map
\ No newline at end of file
diff --git a/29.f8831396.iframe.bundle.js.LICENSE.txt b/25.1d2be920.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 29.f8831396.iframe.bundle.js.LICENSE.txt
rename to 25.1d2be920.iframe.bundle.js.LICENSE.txt
diff --git a/25.1d2be920.iframe.bundle.js.map b/25.1d2be920.iframe.bundle.js.map
new file mode 100644
index 0000000000..bf60e45325
--- /dev/null
+++ b/25.1d2be920.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"25.1d2be920.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/25.adad6f3a.iframe.bundle.js b/26.a10c5b97.iframe.bundle.js
similarity index 99%
rename from 25.adad6f3a.iframe.bundle.js
rename to 26.a10c5b97.iframe.bundle.js
index 24c82dd57a..883b0bd764 100644
--- a/25.adad6f3a.iframe.bundle.js
+++ b/26.a10c5b97.iframe.bundle.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{"../../node_modules/core-js/internals/array-reduce.js":function(module,exports,__webpack_require__){var aFunction=__webpack_require__("../../node_modules/core-js/internals/a-function.js"),toObject=__webpack_require__("../../node_modules/core-js/internals/to-object.js"),IndexedObject=__webpack_require__("../../node_modules/core-js/internals/indexed-object.js"),toLength=__webpack_require__("../../node_modules/core-js/internals/to-length.js"),createMethod=function(IS_RIGHT){return function(that,callbackfn,argumentsLength,memo){aFunction(callbackfn);var O=toObject(that),self=IndexedObject(O),length=toLength(O.length),index=IS_RIGHT?length-1:0,i=IS_RIGHT?-1:1;if(argumentsLength<2)for(;;){if(index in self){memo=self[index],index+=i;break}if(index+=i,IS_RIGHT?index<0:length<=index)throw TypeError("Reduce of empty array with no initial value")}for(;IS_RIGHT?index>=0:length>index;index+=i)index in self&&(memo=callbackfn(memo,self[index],index,O));return memo}};module.exports={left:createMethod(!1),right:createMethod(!0)}},"../../node_modules/core-js/modules/es.array.reduce.js":function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),$reduce=__webpack_require__("../../node_modules/core-js/internals/array-reduce.js").left,arrayMethodIsStrict=__webpack_require__("../../node_modules/core-js/internals/array-method-is-strict.js"),CHROME_VERSION=__webpack_require__("../../node_modules/core-js/internals/engine-v8-version.js"),IS_NODE=__webpack_require__("../../node_modules/core-js/internals/engine-is-node.js");$({target:"Array",proto:!0,forced:!arrayMethodIsStrict("reduce")||!IS_NODE&&CHROME_VERSION>79&&CHROME_VERSION<83},{reduce:function reduce(callbackfn){return $reduce(this,callbackfn,arguments.length,arguments.length>1?arguments[1]:void 0)}})},"../components/dist/esm/scale-grid-item.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_grid_item",(function(){return GridItem}));__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/valuesTransformation-ce891c3a.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var GridItem=function(){function GridItem(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,GridItem),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.i)(this,hostRef)}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(GridItem,[{key:"componentWillLoad",value:function componentWillLoad(){var cssStrings=[Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("size",this.size),Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("offset",this.offset)].filter((function(setProp){return setProp})).map((function(setProp){return Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.a)(setProp)}));this.hostElement.setAttribute("style",cssStrings.join(""))}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",null))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.f)(this)}}]),GridItem}()},"../components/dist/esm/valuesTransformation-ce891c3a.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return createCssString})),__webpack_require__.d(__webpack_exports__,"b",(function(){return createBreakpointValuedProp}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.entries.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.reduce.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||_unsupportedIterableToArray(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function createCssString(setProp){var values=setProp.breakpointValues;if(!function isBreakpointValuesEmpty(values){var _step,isEmpty=!0,_iterator=function _createForOfIteratorHelper(o,allowArrayLike){var it;if("undefined"==typeof Symbol||null==o[Symbol.iterator]){if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function F(){};return{s:F,n:function n(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function e(_e2){throw _e2},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function s(){it=o[Symbol.iterator]()},n:function n(){var step=it.next();return normalCompletion=step.done,step},e:function e(_e3){didErr=!0,err=_e3},f:function f(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}(values);try{for(_iterator.s();!(_step=_iterator.n()).done;){if(_step.value.value){isEmpty=!1;break}}}catch(err){_iterator.e(err)}finally{_iterator.f()}return isEmpty}(values)){var filledArray=function fillEmptyBreakpointValues(values){for(var filledArray=_toConsumableArray(values),i=1;i<filledArray.length;i++)filledArray[i].value||(filledArray[i].value=filledArray[i-1].value);return filledArray}(values),valuesObj=function transformBreakpointValuesData(values){return values.reduce((function(a,v){var _Object$assign;return Object.assign(Object.assign({},a),((_Object$assign={})[v.breakpointName]=v.value,_Object$assign))}),{})}(filledArray);return Object.entries(valuesObj).map((function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];return"--"+setProp.propName+"-"+key+":"+value})).join(";")+";"}}function propsToBreakpointValuesArray(values){return[{breakpointName:"sm",value:values[0]},{breakpointName:"md",value:values[1]},{breakpointName:"lg",value:values[2]},{breakpointName:"xl",value:values[3]},{breakpointName:"xxl",value:values[4]}]}function createBreakpointValuedProp(propName,values){if(propName&&values)return{propName:propName,breakpointValues:propsToBreakpointValuesArray(values.split(","))}}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{"../../node_modules/core-js/internals/array-reduce.js":function(module,exports,__webpack_require__){var aFunction=__webpack_require__("../../node_modules/core-js/internals/a-function.js"),toObject=__webpack_require__("../../node_modules/core-js/internals/to-object.js"),IndexedObject=__webpack_require__("../../node_modules/core-js/internals/indexed-object.js"),toLength=__webpack_require__("../../node_modules/core-js/internals/to-length.js"),createMethod=function(IS_RIGHT){return function(that,callbackfn,argumentsLength,memo){aFunction(callbackfn);var O=toObject(that),self=IndexedObject(O),length=toLength(O.length),index=IS_RIGHT?length-1:0,i=IS_RIGHT?-1:1;if(argumentsLength<2)for(;;){if(index in self){memo=self[index],index+=i;break}if(index+=i,IS_RIGHT?index<0:length<=index)throw TypeError("Reduce of empty array with no initial value")}for(;IS_RIGHT?index>=0:length>index;index+=i)index in self&&(memo=callbackfn(memo,self[index],index,O));return memo}};module.exports={left:createMethod(!1),right:createMethod(!0)}},"../../node_modules/core-js/modules/es.array.reduce.js":function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),$reduce=__webpack_require__("../../node_modules/core-js/internals/array-reduce.js").left,arrayMethodIsStrict=__webpack_require__("../../node_modules/core-js/internals/array-method-is-strict.js"),CHROME_VERSION=__webpack_require__("../../node_modules/core-js/internals/engine-v8-version.js"),IS_NODE=__webpack_require__("../../node_modules/core-js/internals/engine-is-node.js");$({target:"Array",proto:!0,forced:!arrayMethodIsStrict("reduce")||!IS_NODE&&CHROME_VERSION>79&&CHROME_VERSION<83},{reduce:function reduce(callbackfn){return $reduce(this,callbackfn,arguments.length,arguments.length>1?arguments[1]:void 0)}})},"../components/dist/esm/scale-grid-item.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_grid_item",(function(){return GridItem}));__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/valuesTransformation-ce891c3a.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var GridItem=function(){function GridItem(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,GridItem),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.i)(this,hostRef)}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(GridItem,[{key:"componentWillLoad",value:function componentWillLoad(){var cssStrings=[Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("size",this.size),Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("offset",this.offset)].filter((function(setProp){return setProp})).map((function(setProp){return Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.a)(setProp)}));this.hostElement.setAttribute("style",cssStrings.join(""))}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",null))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.f)(this)}}]),GridItem}()},"../components/dist/esm/valuesTransformation-ce891c3a.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return createCssString})),__webpack_require__.d(__webpack_exports__,"b",(function(){return createBreakpointValuedProp}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.entries.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.reduce.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||_unsupportedIterableToArray(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function createCssString(setProp){var values=setProp.breakpointValues;if(!function isBreakpointValuesEmpty(values){var _step,isEmpty=!0,_iterator=function _createForOfIteratorHelper(o,allowArrayLike){var it;if("undefined"==typeof Symbol||null==o[Symbol.iterator]){if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function F(){};return{s:F,n:function n(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function e(_e2){throw _e2},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function s(){it=o[Symbol.iterator]()},n:function n(){var step=it.next();return normalCompletion=step.done,step},e:function e(_e3){didErr=!0,err=_e3},f:function f(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}(values);try{for(_iterator.s();!(_step=_iterator.n()).done;){if(_step.value.value){isEmpty=!1;break}}}catch(err){_iterator.e(err)}finally{_iterator.f()}return isEmpty}(values)){var filledArray=function fillEmptyBreakpointValues(values){for(var filledArray=_toConsumableArray(values),i=1;i<filledArray.length;i++)filledArray[i].value||(filledArray[i].value=filledArray[i-1].value);return filledArray}(values),valuesObj=function transformBreakpointValuesData(values){return values.reduce((function(a,v){var _Object$assign;return Object.assign(Object.assign({},a),((_Object$assign={})[v.breakpointName]=v.value,_Object$assign))}),{})}(filledArray);return Object.entries(valuesObj).map((function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];return"--"+setProp.propName+"-"+key+":"+value})).join(";")+";"}}function propsToBreakpointValuesArray(values){return[{breakpointName:"sm",value:values[0]},{breakpointName:"md",value:values[1]},{breakpointName:"lg",value:values[2]},{breakpointName:"xl",value:values[3]},{breakpointName:"xxl",value:values[4]}]}function createBreakpointValuedProp(propName,values){if(propName&&values)return{propName:propName,breakpointValues:propsToBreakpointValuesArray(values.split(","))}}}}]);
\ No newline at end of file
diff --git a/26.46f352ae.iframe.bundle.js b/27.b98b7b21.iframe.bundle.js
similarity index 99%
rename from 26.46f352ae.iframe.bundle.js
rename to 27.b98b7b21.iframe.bundle.js
index b7c9aba9e8..38f79efd0d 100644
--- a/26.46f352ae.iframe.bundle.js
+++ b/27.b98b7b21.iframe.bundle.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{"../../node_modules/core-js/internals/array-reduce.js":function(module,exports,__webpack_require__){var aFunction=__webpack_require__("../../node_modules/core-js/internals/a-function.js"),toObject=__webpack_require__("../../node_modules/core-js/internals/to-object.js"),IndexedObject=__webpack_require__("../../node_modules/core-js/internals/indexed-object.js"),toLength=__webpack_require__("../../node_modules/core-js/internals/to-length.js"),createMethod=function(IS_RIGHT){return function(that,callbackfn,argumentsLength,memo){aFunction(callbackfn);var O=toObject(that),self=IndexedObject(O),length=toLength(O.length),index=IS_RIGHT?length-1:0,i=IS_RIGHT?-1:1;if(argumentsLength<2)for(;;){if(index in self){memo=self[index],index+=i;break}if(index+=i,IS_RIGHT?index<0:length<=index)throw TypeError("Reduce of empty array with no initial value")}for(;IS_RIGHT?index>=0:length>index;index+=i)index in self&&(memo=callbackfn(memo,self[index],index,O));return memo}};module.exports={left:createMethod(!1),right:createMethod(!0)}},"../../node_modules/core-js/modules/es.array.reduce.js":function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),$reduce=__webpack_require__("../../node_modules/core-js/internals/array-reduce.js").left,arrayMethodIsStrict=__webpack_require__("../../node_modules/core-js/internals/array-method-is-strict.js"),CHROME_VERSION=__webpack_require__("../../node_modules/core-js/internals/engine-v8-version.js"),IS_NODE=__webpack_require__("../../node_modules/core-js/internals/engine-is-node.js");$({target:"Array",proto:!0,forced:!arrayMethodIsStrict("reduce")||!IS_NODE&&CHROME_VERSION>79&&CHROME_VERSION<83},{reduce:function reduce(callbackfn){return $reduce(this,callbackfn,arguments.length,arguments.length>1?arguments[1]:void 0)}})},"../components/dist/esm/scale-grid.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_grid",(function(){return Grid}));__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/valuesTransformation-ce891c3a.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Grid=function(){function Grid(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Grid),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.i)(this,hostRef)}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Grid,[{key:"componentWillLoad",value:function componentWillLoad(){var sizableCssStrings=[Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("columns",this.columns),Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("gutter-y",this.gutterY),Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("gutter-x",this.gutterX),Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("spacing",this.spacing)].filter((function(sizeProp){return sizeProp})).map((function(sizedProp){return Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.a)(sizedProp)})),maxWidthCssStirng=this.maxWidth?"--max-width:"+this.maxWidth+";":"",styleString=sizableCssStrings.join("")+maxWidthCssStirng;this.hostElement.setAttribute("style",styleString)}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",null))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.f)(this)}}]),Grid}()},"../components/dist/esm/valuesTransformation-ce891c3a.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return createCssString})),__webpack_require__.d(__webpack_exports__,"b",(function(){return createBreakpointValuedProp}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.entries.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.reduce.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||_unsupportedIterableToArray(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function createCssString(setProp){var values=setProp.breakpointValues;if(!function isBreakpointValuesEmpty(values){var _step,isEmpty=!0,_iterator=function _createForOfIteratorHelper(o,allowArrayLike){var it;if("undefined"==typeof Symbol||null==o[Symbol.iterator]){if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function F(){};return{s:F,n:function n(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function e(_e2){throw _e2},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function s(){it=o[Symbol.iterator]()},n:function n(){var step=it.next();return normalCompletion=step.done,step},e:function e(_e3){didErr=!0,err=_e3},f:function f(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}(values);try{for(_iterator.s();!(_step=_iterator.n()).done;){if(_step.value.value){isEmpty=!1;break}}}catch(err){_iterator.e(err)}finally{_iterator.f()}return isEmpty}(values)){var filledArray=function fillEmptyBreakpointValues(values){for(var filledArray=_toConsumableArray(values),i=1;i<filledArray.length;i++)filledArray[i].value||(filledArray[i].value=filledArray[i-1].value);return filledArray}(values),valuesObj=function transformBreakpointValuesData(values){return values.reduce((function(a,v){var _Object$assign;return Object.assign(Object.assign({},a),((_Object$assign={})[v.breakpointName]=v.value,_Object$assign))}),{})}(filledArray);return Object.entries(valuesObj).map((function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];return"--"+setProp.propName+"-"+key+":"+value})).join(";")+";"}}function propsToBreakpointValuesArray(values){return[{breakpointName:"sm",value:values[0]},{breakpointName:"md",value:values[1]},{breakpointName:"lg",value:values[2]},{breakpointName:"xl",value:values[3]},{breakpointName:"xxl",value:values[4]}]}function createBreakpointValuedProp(propName,values){if(propName&&values)return{propName:propName,breakpointValues:propsToBreakpointValuesArray(values.split(","))}}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{"../../node_modules/core-js/internals/array-reduce.js":function(module,exports,__webpack_require__){var aFunction=__webpack_require__("../../node_modules/core-js/internals/a-function.js"),toObject=__webpack_require__("../../node_modules/core-js/internals/to-object.js"),IndexedObject=__webpack_require__("../../node_modules/core-js/internals/indexed-object.js"),toLength=__webpack_require__("../../node_modules/core-js/internals/to-length.js"),createMethod=function(IS_RIGHT){return function(that,callbackfn,argumentsLength,memo){aFunction(callbackfn);var O=toObject(that),self=IndexedObject(O),length=toLength(O.length),index=IS_RIGHT?length-1:0,i=IS_RIGHT?-1:1;if(argumentsLength<2)for(;;){if(index in self){memo=self[index],index+=i;break}if(index+=i,IS_RIGHT?index<0:length<=index)throw TypeError("Reduce of empty array with no initial value")}for(;IS_RIGHT?index>=0:length>index;index+=i)index in self&&(memo=callbackfn(memo,self[index],index,O));return memo}};module.exports={left:createMethod(!1),right:createMethod(!0)}},"../../node_modules/core-js/modules/es.array.reduce.js":function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),$reduce=__webpack_require__("../../node_modules/core-js/internals/array-reduce.js").left,arrayMethodIsStrict=__webpack_require__("../../node_modules/core-js/internals/array-method-is-strict.js"),CHROME_VERSION=__webpack_require__("../../node_modules/core-js/internals/engine-v8-version.js"),IS_NODE=__webpack_require__("../../node_modules/core-js/internals/engine-is-node.js");$({target:"Array",proto:!0,forced:!arrayMethodIsStrict("reduce")||!IS_NODE&&CHROME_VERSION>79&&CHROME_VERSION<83},{reduce:function reduce(callbackfn){return $reduce(this,callbackfn,arguments.length,arguments.length>1?arguments[1]:void 0)}})},"../components/dist/esm/scale-grid.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_grid",(function(){return Grid}));__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/valuesTransformation-ce891c3a.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Grid=function(){function Grid(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Grid),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.i)(this,hostRef)}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Grid,[{key:"componentWillLoad",value:function componentWillLoad(){var sizableCssStrings=[Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("columns",this.columns),Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("gutter-y",this.gutterY),Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("gutter-x",this.gutterX),Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.b)("spacing",this.spacing)].filter((function(sizeProp){return sizeProp})).map((function(sizedProp){return Object(_valuesTransformation_ce891c3a_js__WEBPACK_IMPORTED_MODULE_5__.a)(sizedProp)})),maxWidthCssStirng=this.maxWidth?"--max-width:"+this.maxWidth+";":"",styleString=sizableCssStrings.join("")+maxWidthCssStirng;this.hostElement.setAttribute("style",styleString)}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",null))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.f)(this)}}]),Grid}()},"../components/dist/esm/valuesTransformation-ce891c3a.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return createCssString})),__webpack_require__.d(__webpack_exports__,"b",(function(){return createBreakpointValuedProp}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.entries.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.reduce.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||_unsupportedIterableToArray(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function createCssString(setProp){var values=setProp.breakpointValues;if(!function isBreakpointValuesEmpty(values){var _step,isEmpty=!0,_iterator=function _createForOfIteratorHelper(o,allowArrayLike){var it;if("undefined"==typeof Symbol||null==o[Symbol.iterator]){if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function F(){};return{s:F,n:function n(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function e(_e2){throw _e2},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function s(){it=o[Symbol.iterator]()},n:function n(){var step=it.next();return normalCompletion=step.done,step},e:function e(_e3){didErr=!0,err=_e3},f:function f(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}(values);try{for(_iterator.s();!(_step=_iterator.n()).done;){if(_step.value.value){isEmpty=!1;break}}}catch(err){_iterator.e(err)}finally{_iterator.f()}return isEmpty}(values)){var filledArray=function fillEmptyBreakpointValues(values){for(var filledArray=_toConsumableArray(values),i=1;i<filledArray.length;i++)filledArray[i].value||(filledArray[i].value=filledArray[i-1].value);return filledArray}(values),valuesObj=function transformBreakpointValuesData(values){return values.reduce((function(a,v){var _Object$assign;return Object.assign(Object.assign({},a),((_Object$assign={})[v.breakpointName]=v.value,_Object$assign))}),{})}(filledArray);return Object.entries(valuesObj).map((function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];return"--"+setProp.propName+"-"+key+":"+value})).join(";")+";"}}function propsToBreakpointValuesArray(values){return[{breakpointName:"sm",value:values[0]},{breakpointName:"md",value:values[1]},{breakpointName:"lg",value:values[2]},{breakpointName:"xl",value:values[3]},{breakpointName:"xxl",value:values[4]}]}function createBreakpointValuedProp(propName,values){if(propName&&values)return{propName:propName,breakpointValues:propsToBreakpointValuesArray(values.split(","))}}}}]);
\ No newline at end of file
diff --git a/27.e21d2f07.iframe.bundle.js b/28.7f1fa39e.iframe.bundle.js
similarity index 99%
rename from 27.e21d2f07.iframe.bundle.js
rename to 28.7f1fa39e.iframe.bundle.js
index ddabbdca49..9337aed082 100644
--- a/27.e21d2f07.iframe.bundle.js
+++ b/28.7f1fa39e.iframe.bundle.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{"../../node_modules/core-js/internals/number-parse-int.js":function(module,exports,__webpack_require__){var global=__webpack_require__("../../node_modules/core-js/internals/global.js"),trim=__webpack_require__("../../node_modules/core-js/internals/string-trim.js").trim,whitespaces=__webpack_require__("../../node_modules/core-js/internals/whitespaces.js"),$parseInt=global.parseInt,hex=/^[+-]?0[Xx]/,FORCED=8!==$parseInt(whitespaces+"08")||22!==$parseInt(whitespaces+"0x16");module.exports=FORCED?function parseInt(string,radix){var S=trim(String(string));return $parseInt(S,radix>>>0||(hex.test(S)?16:10))}:$parseInt},"../../node_modules/core-js/modules/es.parse-int.js":function(module,exports,__webpack_require__){var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),parseIntImplementation=__webpack_require__("../../node_modules/core-js/internals/number-parse-int.js");$({global:!0,forced:parseInt!=parseIntImplementation},{parseInt:parseIntImplementation})},"../components/dist/esm/duet-date-picker_2.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"duet_date_picker",(function(){return DuetDatePicker})),__webpack_require__.d(__webpack_exports__,"scale_icon_content_calendar",(function(){return ContentCalendar}));__webpack_require__("../../node_modules/core-js/modules/es.parse-int.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.is-integer.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.match.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.fill.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}var DaysOfWeek,ISO_DATE_FORMAT=/^(\d{4})-(\d{2})-(\d{2})$/;function createDate(year,month,day){var dayInt=parseInt(day,10),monthInt=parseInt(month,10),yearInt=parseInt(year,10);if(Number.isInteger(yearInt)&&Number.isInteger(monthInt)&&Number.isInteger(dayInt)&&monthInt>0&&monthInt<=12&&dayInt>0&&dayInt<=31&&yearInt>0)return new Date(yearInt,monthInt-1,dayInt)}function parseISODate(value){if(value){var matches=value.match(ISO_DATE_FORMAT);return matches?createDate(matches[1],matches[2],matches[3]):void 0}}function printISODate(date){if(!date)return"";var d=date.getDate().toString(10),m=(date.getMonth()+1).toString(10),y=date.getFullYear().toString(10);return date.getDate()<10&&(d="0"+d),date.getMonth()<9&&(m="0"+m),y+"-"+m+"-"+d}function isEqual(a,b){return null!=a&&null!=b&&(a.getFullYear()===b.getFullYear()&&a.getMonth()===b.getMonth()&&a.getDate()===b.getDate())}function _addDays(date,days){var d=new Date(date);return d.setDate(d.getDate()+days),d}function _startOfWeek(date){var firstDayOfWeek=arguments.length>1&&void 0!==arguments[1]?arguments[1]:DaysOfWeek.Monday,d=new Date(date),day=d.getDay(),diff=(day<firstDayOfWeek?7:0)+day-firstDayOfWeek;return d.setDate(d.getDate()-diff),d}function _endOfWeek(date){var firstDayOfWeek=arguments.length>1&&void 0!==arguments[1]?arguments[1]:DaysOfWeek.Monday,d=new Date(date),day=d.getDay(),diff=6+(day<firstDayOfWeek?-7:0)-(day-firstDayOfWeek);return d.setDate(d.getDate()+diff),d}function startOfMonth(date){return new Date(date.getFullYear(),date.getMonth(),1)}function endOfMonth(date){return new Date(date.getFullYear(),date.getMonth()+1,0)}function _setMonth(date,month){var d=new Date(date);return d.setMonth(month),d}function _setYear(date,year){var d=new Date(date);return d.setFullYear(year),d}function inRange(date,min,max){return clamp(date,min,max)===date}function clamp(date,min,max){var time=date.getTime();return min&&min instanceof Date&&time<min.getTime()?min:max&&max instanceof Date&&time>max.getTime()?max:date}function getDaysInRange(start,end){for(var days=[],current=start;!isEqual(current,end);)days.push(current),current=_addDays(current,1);return days.push(current),days}function chr4(){return Math.random().toString(16).slice(-4)}function createIdentifier(prefix){return prefix+"-"+chr4()+chr4()+"-"+chr4()+"-"+chr4()+"-"+chr4()+"-"+chr4()+chr4()+chr4()}!function(DaysOfWeek){DaysOfWeek[DaysOfWeek.Sunday=0]="Sunday",DaysOfWeek[DaysOfWeek.Monday=1]="Monday",DaysOfWeek[DaysOfWeek.Tuesday=2]="Tuesday",DaysOfWeek[DaysOfWeek.Wednesday=3]="Wednesday",DaysOfWeek[DaysOfWeek.Thursday=4]="Thursday",DaysOfWeek[DaysOfWeek.Friday=5]="Friday",DaysOfWeek[DaysOfWeek.Saturday=6]="Saturday"}(DaysOfWeek||(DaysOfWeek={}));var DatePickerInput=function DatePickerInput(_ref){var onClick=_ref.onClick,dateFormatter=_ref.dateFormatter,localization=_ref.localization,name=_ref.name,formattedValue=_ref.formattedValue,valueAsDate=_ref.valueAsDate,value=_ref.value,identifier=_ref.identifier,disabled=_ref.disabled,required=_ref.required,role=_ref.role,buttonRef=_ref.buttonRef,inputRef=_ref.inputRef,onInput=_ref.onInput,onBlur=_ref.onBlur,onFocus=_ref.onFocus;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__input-wrapper"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("input",{class:"duet-date__input",value:formattedValue,placeholder:localization.placeholder,id:identifier,disabled:disabled,role:role,required:!!required||void 0,"aria-autocomplete":"none",onInput:onInput,onFocus:onFocus,onBlur:onBlur,autoComplete:"off",ref:inputRef}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("input",{type:"hidden",name:name,value:value}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("button",{class:"duet-date__toggle",onClick:onClick,disabled:disabled,ref:buttonRef,type:"button"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__toggle-icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{"aria-hidden":"true",height:"24",viewBox:"0 0 21 21",width:"24",xmlns:"http://www.w3.org/2000/svg"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("g",{fill:"none","fill-rule":"evenodd",transform:"translate(2 2)"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"m.5 4.5h16",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("g",{fill:"currentColor"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"8.5",cy:"8.5",r:"1"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"4.5",cy:"8.5",r:"1"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"12.5",cy:"8.5",r:"1"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"8.5",cy:"12.5",r:"1"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"4.5",cy:"12.5",r:"1"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"12.5",cy:"12.5",r:"1"}))))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},localization.buttonLabel,valueAsDate&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",null,", ",localization.selectedDateMessage," ",dateFormatter.format(valueAsDate)))))},DatePickerDay=function DatePickerDay(_ref2){var focusedDay=_ref2.focusedDay,today=_ref2.today,day=_ref2.day,onDaySelect=_ref2.onDaySelect,onKeyboardNavigation=_ref2.onKeyboardNavigation,focusedDayRef=_ref2.focusedDayRef,inRange=_ref2.inRange,isSelected=_ref2.isSelected,dateFormatter=_ref2.dateFormatter,isToday=isEqual(day,today),isFocused=isEqual(day,focusedDay),isDisabled=day.getMonth()!==focusedDay.getMonth(),isOutsideRange=!inRange;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("button",{class:{"duet-date__day":!0,"is-outside":isOutsideRange,"is-disabled":isDisabled,"is-today":isToday},tabIndex:isFocused?0:-1,onClick:function handleClick(e){onDaySelect(e,day)},onKeyDown:onKeyboardNavigation,disabled:isOutsideRange||isDisabled,type:"button","aria-pressed":isSelected?"true":"false",ref:function ref(el){isFocused&&el&&focusedDayRef&&focusedDayRef(el)}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{"aria-hidden":"true"},day.getDate()),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},dateFormatter.format(day)))};var DatePickerMonth=function DatePickerMonth(_ref3){var selectedDate=_ref3.selectedDate,focusedDate=_ref3.focusedDate,labelledById=_ref3.labelledById,localization=_ref3.localization,firstDayOfWeek=_ref3.firstDayOfWeek,min=_ref3.min,max=_ref3.max,dateFormatter=_ref3.dateFormatter,onDateSelect=_ref3.onDateSelect,onKeyboardNavigation=_ref3.onKeyboardNavigation,focusedDayRef=_ref3.focusedDayRef,today=new Date,days=function getViewOfMonth(date){var firstDayOfWeek=arguments.length>1&&void 0!==arguments[1]?arguments[1]:DaysOfWeek.Monday,start=_startOfWeek(startOfMonth(date),firstDayOfWeek),end=_endOfWeek(endOfMonth(date),firstDayOfWeek);return getDaysInRange(start,end)}(focusedDate,firstDayOfWeek);return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("table",{class:"duet-date__table","aria-labelledby":labelledById},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("thead",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("tr",null,function mapWithOffset(array,startingOffset,mapFn){return array.map((function(_,i){var adjustedIndex=(i+startingOffset)%array.length;return mapFn(array[adjustedIndex])}))}(localization.dayNames,firstDayOfWeek,(function(dayName){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("th",{class:"duet-date__table-header",scope:"col"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{"aria-hidden":"true"},dayName.substr(0,2)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},dayName))})))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("tbody",null,function chunk(array,chunkSize){for(var result=[],i=0;i<array.length;i+=chunkSize)result.push(array.slice(i,i+chunkSize));return result}(days,7).map((function(week){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("tr",{class:"duet-date__row"},week.map((function(day){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("td",{class:"duet-date__cell"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)(DatePickerDay,{day:day,today:today,focusedDay:focusedDate,isSelected:isEqual(day,selectedDate),inRange:inRange(day,min,max),onDaySelect:onDateSelect,dateFormatter:dateFormatter,onKeyboardNavigation:onKeyboardNavigation,focusedDayRef:focusedDayRef}))})))}))))},localization={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],locale:"en-GB"},isoAdapter={parse:parseISODate,format:printISODate};var keyCode_TAB=9,keyCode_ESC=27,keyCode_PAGE_UP=33,keyCode_PAGE_DOWN=34,keyCode_END=35,keyCode_HOME=36,keyCode_LEFT=37,keyCode_UP=38,keyCode_RIGHT=39,keyCode_DOWN=40,DISALLOWED_CHARACTERS=/[^0-9\.\/\-]+/g,DuetDatePicker=function(){function DuetDatePicker(hostRef){var _this=this;_classCallCheck(this,DuetDatePicker),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.i)(this,hostRef),this.duetChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.e)(this,"duetChange",7),this.duetBlur=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.e)(this,"duetBlur",7),this.duetFocus=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.e)(this,"duetFocus",7),this.monthSelectId=createIdentifier("DuetDateMonth"),this.yearSelectId=createIdentifier("DuetDateYear"),this.dialogLabelId=createIdentifier("DuetDateLabel"),this.initialTouchX=null,this.initialTouchY=null,this.activeFocus=!1,this.focusedDay=new Date,this.open=!1,this.name="date",this.identifier="",this.disabled=!1,this.direction="right",this.required=!1,this.value="",this.min="",this.max="",this.firstDayOfWeek=DaysOfWeek.Monday,this.localization=localization,this.dateAdapter=isoAdapter,this.enableActiveFocus=function(){_this.activeFocus=!0},this.disableActiveFocus=function(){_this.activeFocus=!1},this.toggleOpen=function(e){e.preventDefault(),_this.open?_this.hide(!1):_this.show()},this.handleEscKey=function(event){event.keyCode===keyCode_ESC&&_this.hide()},this.handleBlur=function(event){event.stopPropagation(),_this.duetBlur.emit({component:"duet-date-picker"})},this.handleFocus=function(event){event.stopPropagation(),_this.duetFocus.emit({component:"duet-date-picker"})},this.handleTouchStart=function(event){var touch=event.changedTouches[0];_this.initialTouchX=touch.pageX,_this.initialTouchY=touch.pageY},this.handleTouchMove=function(event){event.preventDefault()},this.handleTouchEnd=function(event){var touch=event.changedTouches[0],distX=touch.pageX-_this.initialTouchX,distY=touch.pageY-_this.initialTouchY,isHorizontalSwipe=Math.abs(distX)>=70&&Math.abs(distY)<=70,isDownwardsSwipe=Math.abs(distY)>=70&&Math.abs(distX)<=70&&distY>0;isHorizontalSwipe?_this.addMonths(distX<0?1:-1):isDownwardsSwipe&&(_this.hide(!1),event.preventDefault()),_this.initialTouchY=null,_this.initialTouchX=null},this.handleNextMonthClick=function(event){event.preventDefault(),_this.addMonths(1)},this.handlePreviousMonthClick=function(event){event.preventDefault(),_this.addMonths(-1)},this.handleFirstFocusableKeydown=function(event){event.keyCode===keyCode_TAB&&event.shiftKey&&(_this.focusedDayNode.focus(),event.preventDefault())},this.handleKeyboardNavigation=function(event){if(event.keyCode===keyCode_TAB&&!event.shiftKey)return event.preventDefault(),void _this.firstFocusableElement.focus();var handled=!0;switch(event.keyCode){case keyCode_RIGHT:_this.addDays(1);break;case keyCode_LEFT:_this.addDays(-1);break;case keyCode_DOWN:_this.addDays(7);break;case keyCode_UP:_this.addDays(-7);break;case keyCode_PAGE_UP:event.shiftKey?_this.addYears(-1):_this.addMonths(-1);break;case keyCode_PAGE_DOWN:event.shiftKey?_this.addYears(1):_this.addMonths(1);break;case keyCode_HOME:_this.startOfWeek();break;case keyCode_END:_this.endOfWeek();break;default:handled=!1}handled&&(event.preventDefault(),_this.enableActiveFocus())},this.handleDaySelect=function(_event,day){inRange(day,parseISODate(_this.min),parseISODate(_this.max))&&(day.getMonth()===_this.focusedDay.getMonth()?(_this.setValue(day),_this.hide()):_this.setFocusedDay(day))},this.handleMonthSelect=function(e){_this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=function(e){_this.setYear(parseInt(e.target.value,10))},this.handleInputChange=function(e){var target=e.target;target.value=target.value.replace(DISALLOWED_CHARACTERS,"");var parsed=_this.dateAdapter.parse(target.value,createDate);(parsed||""===target.value)&&_this.setValue(parsed)},this.processFocusedDayNode=function(element){_this.focusedDayNode=element,_this.activeFocus&&_this.open&&setTimeout((function(){return element.focus()}),0)}}var _hide,_show,_setFocus;return _createClass(DuetDatePicker,[{key:"connectedCallback",value:function connectedCallback(){this.createDateFormatters()}},{key:"createDateFormatters",value:function createDateFormatters(){this.dateFormatShort=new Intl.DateTimeFormat(this.localization.locale,{day:"numeric",month:"long"}),this.dateFormatLong=new Intl.DateTimeFormat(this.localization.locale,{day:"numeric",month:"long",year:"numeric"})}},{key:"handleDocumentClick",value:function handleDocumentClick(e){if(this.open){var target=e.target;this.dialogWrapperNode.contains(target)||this.datePickerButton.contains(target)||this.hide(!1)}}},{key:"setFocus",value:(_setFocus=_asyncToGenerator(regeneratorRuntime.mark((function _callee(){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return _context.abrupt("return",this.datePickerInput.focus());case 1:case"end":return _context.stop()}}),_callee,this)}))),function setFocus(){return _setFocus.apply(this,arguments)})},{key:"show",value:(_show=_asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var _this2=this;return regeneratorRuntime.wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:this.open=!0,this.setFocusedDay(parseISODate(this.value)||new Date),clearTimeout(this.focusTimeoutId),this.focusTimeoutId=setTimeout((function(){return _this2.monthSelectNode.focus()}),300);case 4:case"end":return _context2.stop()}}),_callee2,this)}))),function show(){return _show.apply(this,arguments)})},{key:"hide",value:(_hide=_asyncToGenerator(regeneratorRuntime.mark((function _callee3(){var moveFocusToButton,_this3=this,_args3=arguments;return regeneratorRuntime.wrap((function _callee3$(_context3){for(;;)switch(_context3.prev=_context3.next){case 0:moveFocusToButton=!(_args3.length>0&&void 0!==_args3[0])||_args3[0],this.open=!1,clearTimeout(this.focusTimeoutId),moveFocusToButton&&setTimeout((function(){return _this3.datePickerButton.focus()}),500);case 4:case"end":return _context3.stop()}}),_callee3,this)}))),function hide(){return _hide.apply(this,arguments)})},{key:"addDays",value:function addDays(days){this.setFocusedDay(_addDays(this.focusedDay,days))}},{key:"addMonths",value:function addMonths(months){this.setMonth(this.focusedDay.getMonth()+months)}},{key:"addYears",value:function addYears(years){this.setYear(this.focusedDay.getFullYear()+years)}},{key:"startOfWeek",value:function startOfWeek(){this.setFocusedDay(_startOfWeek(this.focusedDay,this.firstDayOfWeek))}},{key:"endOfWeek",value:function endOfWeek(){this.setFocusedDay(_endOfWeek(this.focusedDay,this.firstDayOfWeek))}},{key:"setMonth",value:function setMonth(month){var min=_setMonth(startOfMonth(this.focusedDay),month),max=endOfMonth(min),date=_setMonth(this.focusedDay,month);this.setFocusedDay(clamp(date,min,max))}},{key:"setYear",value:function setYear(year){var min=_setYear(startOfMonth(this.focusedDay),year),max=endOfMonth(min),date=_setYear(this.focusedDay,year);this.setFocusedDay(clamp(date,min,max))}},{key:"setFocusedDay",value:function setFocusedDay(day){this.focusedDay=clamp(day,parseISODate(this.min),parseISODate(this.max))}},{key:"setValue",value:function setValue(date){this.value=printISODate(date),this.duetChange.emit({component:"duet-date-picker",value:this.value,valueAsDate:date})}},{key:"render",value:function render(){var _this4=this,valueAsDate=parseISODate(this.value),formattedDate=valueAsDate&&this.dateAdapter.format(valueAsDate),selectedYear=(valueAsDate||this.focusedDay).getFullYear(),focusedMonth=this.focusedDay.getMonth(),focusedYear=this.focusedDay.getFullYear(),minDate=parseISODate(this.min),maxDate=parseISODate(this.max),prevMonthDisabled=null!=minDate&&minDate.getMonth()===focusedMonth&&minDate.getFullYear()===focusedYear,nextMonthDisabled=null!=maxDate&&maxDate.getMonth()===focusedMonth&&maxDate.getFullYear()===focusedYear,minYear=minDate?minDate.getFullYear():selectedYear-10,maxYear=maxDate?maxDate.getFullYear():selectedYear+10;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)(DatePickerInput,{dateFormatter:this.dateFormatLong,value:this.value,valueAsDate:valueAsDate,formattedValue:formattedDate,onInput:this.handleInputChange,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.toggleOpen,name:this.name,disabled:this.disabled,role:this.role,required:this.required,identifier:this.identifier,localization:this.localization,buttonRef:function buttonRef(element){return _this4.datePickerButton=element},inputRef:function inputRef(element){return _this4.datePickerInput=element}}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:{"duet-date__dialog":!0,"is-left":"left"===this.direction,"is-active":this.open},role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-labelledby":this.dialogLabelId,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__dialog-content",onKeyDown:this.handleEscKey,ref:function ref(element){return _this4.dialogWrapperNode=element}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__mobile",onFocusin:this.disableActiveFocus},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("label",{class:"duet-date__mobile-heading"},this.localization.calendarHeading),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("button",{class:"duet-date__close",ref:function ref(element){return _this4.firstFocusableElement=element},onKeyDown:this.handleFirstFocusableKeydown,onClick:function onClick(){return _this4.hide()},type:"button"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M0 0h24v24H0V0z",fill:"none"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},this.localization.closeLabel))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite","aria-atomic":"true"},this.localization.monthNames[focusedMonth]," ",this.focusedDay.getFullYear()),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__select"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("select",{id:this.monthSelectId,class:"duet-date__select--month",ref:function ref(element){return _this4.monthSelectNode=element},onChange:this.handleMonthSelect},this.localization.monthNames.map((function(month,i){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("option",{key:month,value:i,selected:i===focusedMonth},month)}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__select-label","aria-hidden":"true"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",null,this.localization.monthNamesShort[focusedMonth]),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"})))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__select"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("select",{id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect},function range(from,to){for(var result=[],i=from;i<=to;i++)result.push(i);return result}(minYear,maxYear).map((function(year){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("option",{key:year,selected:year===focusedYear},year)}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__select-label","aria-hidden":"true"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",null,this.focusedDay.getFullYear()),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"}))))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__nav"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:prevMonthDisabled,type:"button"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},this.localization.prevMonthLabel)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:nextMonthDisabled,type:"button"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)(DatePickerMonth,{dateFormatter:this.dateFormatShort,selectedDate:valueAsDate,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:minDate,max:maxDate})))))}},{key:"element",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.f)(this)}}],[{key:"watchers",get:function get(){return{localization:["createDateFormatters"]}}}]),DuetDatePicker}();DuetDatePicker.style='.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0;width:auto}.duet-date{box-sizing:border-box;color:var(--duet-color-text);display:block;font-family:var(--duet-font);margin:0;position:relative;text-align:left;width:100%}.duet-date__input{-webkit-appearance:none;appearance:none;background:var(--duet-color-surface);border:1px solid var(--duet-color-text);border-radius:var(--duet-radius);color:var(--duet-color-text);float:none;font-family:var(--duet-font);font-size:100%;line-height:normal;padding:14px 60px 14px 14px;width:100%}.duet-date__input:focus{border-color:var(--duet-color-primary);box-shadow:0 0 0 1px var(--duet-color-primary);outline:0}.duet-date__input::-webkit-input-placeholder{color:var(--duet-color-placeholder);opacity:1}.duet-date__input:-moz-placeholder{color:var(--duet-color-placeholder);opacity:1}.duet-date__input:-ms-input-placeholder{color:var(--duet-color-placeholder)}.duet-date__input-wrapper{position:relative;width:100%}.duet-date__toggle{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:var(--duet-color-button);border:0;border-radius:0;border-bottom-right-radius:var(--duet-radius);border-top-right-radius:var(--duet-radius);box-shadow:inset 1px 0 0 rgba(0, 0, 0, 0.1);color:var(--duet-color-text);cursor:pointer;display:flex;height:calc(100% - 2px);justify-content:center;padding:0;position:absolute;right:1px;top:1px;user-select:none;width:48px;z-index:2}.duet-date__toggle:focus{box-shadow:0 0 0 2px var(--duet-color-primary);outline:0}.duet-date__toggle-icon{display:flex;flex-basis:100%;justify-content:center;align-items:center}.duet-date__dialog{display:flex;left:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;width:100%;will-change:transform, opacity, visibility;z-index:var(--duet-z-index)}@media (max-width: 35.9375em){.duet-date__dialog{background:var(--duet-color-overlay);bottom:0;position:fixed;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.duet-date__dialog.is-left{left:auto;right:0;width:auto}.duet-date__dialog.is-active{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.duet-date__dialog-content{background:var(--duet-color-surface);border:1px solid rgba(0, 0, 0, 0.1);border-radius:var(--duet-radius);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.1);margin-left:auto;margin-top:8px;max-width:310px;min-width:290px;padding:16px 16px 20px;position:relative;transform:none;width:100%;z-index:var(--duet-z-index)}@media (max-width: 35.9375em){.duet-date__dialog-content{border:0;border-radius:0;border-top-left-radius:var(--duet-radius);border-top-right-radius:var(--duet-radius);bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active .duet-date__dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.duet-date__table{border-collapse:collapse;border-spacing:0;color:var(--duet-color-text);font-size:1rem;font-weight:var(--duet-font-normal);line-height:1.25;text-align:center;width:100%}.duet-date__table-header{font-size:0.75rem;font-weight:var(--duet-font-bold);letter-spacing:1px;line-height:1.25;padding-bottom:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;color:var(--duet-color-text);cursor:pointer;display:inline-block;font-family:var(--duet-font);font-size:0.875rem;font-variant-numeric:tabular-nums;font-weight:var(--duet-font-normal);height:36px;line-height:1.25;padding:0 0 1px;position:relative;text-align:center;vertical-align:middle;width:36px;z-index:1}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--duet-color-primary);position:relative;z-index:200}.duet-date__day:hover::before,.duet-date__day.is-today::before{background:var(--duet-color-primary);border-radius:50%;bottom:0;content:"";left:0;opacity:0.06;position:absolute;right:0;top:0}.duet-date__day[aria-pressed=true],.duet-date__day:focus{background:var(--duet-color-primary);box-shadow:none;color:var(--duet-color-text-active);outline:0}.duet-date__day:active{background:var(--duet-color-primary);box-shadow:0 0 5px var(--duet-color-primary);color:var(--duet-color-text-active);z-index:200}.duet-date__day:focus{box-shadow:0 0 5px var(--duet-color-primary);z-index:200}.duet-date__day.is-disabled{background:transparent;box-shadow:none;color:var(--duet-color-text);cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--duet-color-button);box-shadow:none;color:var(--duet-color-text);cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--duet-color-button);border:0;border-radius:50%;color:var(--duet-color-text);cursor:pointer;display:inline-flex;height:32px;justify-content:center;margin-left:8px;padding:0;transition:background-color 300ms ease;width:32px}@media (max-width: 35.9375em){.duet-date__prev,.duet-date__next{height:40px;width:40px}}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:0 0 0 2px var(--duet-color-primary);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev svg,.duet-date__next svg{margin:0 auto}.duet-date__select{display:inline-flex;margin-top:4px;position:relative}.duet-date__select span{margin-right:4px}.duet-date__select select{cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.duet-date__select select:focus+.duet-date__select-label{box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__select-label{align-items:center;border-radius:var(--duet-radius);color:var(--duet-color-text);display:flex;font-size:1.25rem;font-weight:var(--duet-font-bold);line-height:1.25;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.duet-date__select-label svg{width:16px;height:16px}.duet-date__mobile{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.duet-date__mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-8px;top:-8px;width:auto}}.duet-date__mobile-heading{display:inline-block;font-weight:var(--duet-font-bold);max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.duet-date__mobile-heading{display:none}}.duet-date__close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--duet-color-button);border:0;border-radius:50%;color:var(--duet-color-text);cursor:pointer;display:flex;height:24px;justify-content:center;padding:0;width:24px}@media (min-width: 36em){.duet-date__close{opacity:0}}.duet-date__close:focus{box-shadow:0 0 0 2px var(--duet-color-primary);outline:none}@media (min-width: 36em){.duet-date__close:focus{opacity:1}}.duet-date__close svg{margin:0 auto}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}';var ContentCalendar=function(){function ContentCalendar(hostRef){_classCallCheck(this,ContentCalendar),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ContentCalendar,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M17.5 3.5v-2H16v2H8v-2H6.5v2H2V19a3 3 0 003 3h14a3 3 0 003-3V3.5h-4.5zm-10 14a1 1 0 110-2 1 1 0 010 2zm0-4.5a1 1 0 110-2 1 1 0 010 2zm4.5 4.5a1 1 0 110-2 1 1 0 010 2zm0-4.5a1 1 0 110-2 1 1 0 010 2zm4.5 4.5a1 1 0 110-2 1 1 0 010 2zm0-4.5a1 1 0 110-2 1 1 0 010 2z","fill-rule":"evenodd"})):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M8 1.5v2h8v-2h1.5v2H22V19a3.01 3.01 0 01-2.824 2.995L19 22H5a3.01 3.01 0 01-2.995-2.824L2 19V3.5h4.5v-2H8zM20.5 8h-17v11c0 .8.576 1.423 1.352 1.493L5 20.5h14c.8 0 1.423-.576 1.493-1.352L20.5 19V8zm-13 7.5a1 1 0 110 2 1 1 0 010-2zm4.5 0a1 1 0 110 2 1 1 0 010-2zm4.5 0a1 1 0 110 2 1 1 0 010-2zm-9-4.5a1 1 0 110 2 1 1 0 010-2zm4.5 0a1 1 0 110 2 1 1 0 010-2zm4.5 0a1 1 0 110 2 1 1 0 010-2z","fill-rule":"evenodd"})))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.f)(this)}}]),ContentCalendar}();ContentCalendar.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{"../../node_modules/core-js/internals/number-parse-int.js":function(module,exports,__webpack_require__){var global=__webpack_require__("../../node_modules/core-js/internals/global.js"),trim=__webpack_require__("../../node_modules/core-js/internals/string-trim.js").trim,whitespaces=__webpack_require__("../../node_modules/core-js/internals/whitespaces.js"),$parseInt=global.parseInt,hex=/^[+-]?0[Xx]/,FORCED=8!==$parseInt(whitespaces+"08")||22!==$parseInt(whitespaces+"0x16");module.exports=FORCED?function parseInt(string,radix){var S=trim(String(string));return $parseInt(S,radix>>>0||(hex.test(S)?16:10))}:$parseInt},"../../node_modules/core-js/modules/es.parse-int.js":function(module,exports,__webpack_require__){var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),parseIntImplementation=__webpack_require__("../../node_modules/core-js/internals/number-parse-int.js");$({global:!0,forced:parseInt!=parseIntImplementation},{parseInt:parseIntImplementation})},"../components/dist/esm/duet-date-picker_2.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"duet_date_picker",(function(){return DuetDatePicker})),__webpack_require__.d(__webpack_exports__,"scale_icon_content_calendar",(function(){return ContentCalendar}));__webpack_require__("../../node_modules/core-js/modules/es.parse-int.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.is-integer.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.match.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.fill.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}var DaysOfWeek,ISO_DATE_FORMAT=/^(\d{4})-(\d{2})-(\d{2})$/;function createDate(year,month,day){var dayInt=parseInt(day,10),monthInt=parseInt(month,10),yearInt=parseInt(year,10);if(Number.isInteger(yearInt)&&Number.isInteger(monthInt)&&Number.isInteger(dayInt)&&monthInt>0&&monthInt<=12&&dayInt>0&&dayInt<=31&&yearInt>0)return new Date(yearInt,monthInt-1,dayInt)}function parseISODate(value){if(value){var matches=value.match(ISO_DATE_FORMAT);return matches?createDate(matches[1],matches[2],matches[3]):void 0}}function printISODate(date){if(!date)return"";var d=date.getDate().toString(10),m=(date.getMonth()+1).toString(10),y=date.getFullYear().toString(10);return date.getDate()<10&&(d="0"+d),date.getMonth()<9&&(m="0"+m),y+"-"+m+"-"+d}function isEqual(a,b){return null!=a&&null!=b&&(a.getFullYear()===b.getFullYear()&&a.getMonth()===b.getMonth()&&a.getDate()===b.getDate())}function _addDays(date,days){var d=new Date(date);return d.setDate(d.getDate()+days),d}function _startOfWeek(date){var firstDayOfWeek=arguments.length>1&&void 0!==arguments[1]?arguments[1]:DaysOfWeek.Monday,d=new Date(date),day=d.getDay(),diff=(day<firstDayOfWeek?7:0)+day-firstDayOfWeek;return d.setDate(d.getDate()-diff),d}function _endOfWeek(date){var firstDayOfWeek=arguments.length>1&&void 0!==arguments[1]?arguments[1]:DaysOfWeek.Monday,d=new Date(date),day=d.getDay(),diff=6+(day<firstDayOfWeek?-7:0)-(day-firstDayOfWeek);return d.setDate(d.getDate()+diff),d}function startOfMonth(date){return new Date(date.getFullYear(),date.getMonth(),1)}function endOfMonth(date){return new Date(date.getFullYear(),date.getMonth()+1,0)}function _setMonth(date,month){var d=new Date(date);return d.setMonth(month),d}function _setYear(date,year){var d=new Date(date);return d.setFullYear(year),d}function inRange(date,min,max){return clamp(date,min,max)===date}function clamp(date,min,max){var time=date.getTime();return min&&min instanceof Date&&time<min.getTime()?min:max&&max instanceof Date&&time>max.getTime()?max:date}function getDaysInRange(start,end){for(var days=[],current=start;!isEqual(current,end);)days.push(current),current=_addDays(current,1);return days.push(current),days}function chr4(){return Math.random().toString(16).slice(-4)}function createIdentifier(prefix){return prefix+"-"+chr4()+chr4()+"-"+chr4()+"-"+chr4()+"-"+chr4()+"-"+chr4()+chr4()+chr4()}!function(DaysOfWeek){DaysOfWeek[DaysOfWeek.Sunday=0]="Sunday",DaysOfWeek[DaysOfWeek.Monday=1]="Monday",DaysOfWeek[DaysOfWeek.Tuesday=2]="Tuesday",DaysOfWeek[DaysOfWeek.Wednesday=3]="Wednesday",DaysOfWeek[DaysOfWeek.Thursday=4]="Thursday",DaysOfWeek[DaysOfWeek.Friday=5]="Friday",DaysOfWeek[DaysOfWeek.Saturday=6]="Saturday"}(DaysOfWeek||(DaysOfWeek={}));var DatePickerInput=function DatePickerInput(_ref){var onClick=_ref.onClick,dateFormatter=_ref.dateFormatter,localization=_ref.localization,name=_ref.name,formattedValue=_ref.formattedValue,valueAsDate=_ref.valueAsDate,value=_ref.value,identifier=_ref.identifier,disabled=_ref.disabled,required=_ref.required,role=_ref.role,buttonRef=_ref.buttonRef,inputRef=_ref.inputRef,onInput=_ref.onInput,onBlur=_ref.onBlur,onFocus=_ref.onFocus;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__input-wrapper"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("input",{class:"duet-date__input",value:formattedValue,placeholder:localization.placeholder,id:identifier,disabled:disabled,role:role,required:!!required||void 0,"aria-autocomplete":"none",onInput:onInput,onFocus:onFocus,onBlur:onBlur,autoComplete:"off",ref:inputRef}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("input",{type:"hidden",name:name,value:value}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("button",{class:"duet-date__toggle",onClick:onClick,disabled:disabled,ref:buttonRef,type:"button"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__toggle-icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{"aria-hidden":"true",height:"24",viewBox:"0 0 21 21",width:"24",xmlns:"http://www.w3.org/2000/svg"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("g",{fill:"none","fill-rule":"evenodd",transform:"translate(2 2)"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"m.5 4.5h16",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("g",{fill:"currentColor"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"8.5",cy:"8.5",r:"1"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"4.5",cy:"8.5",r:"1"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"12.5",cy:"8.5",r:"1"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"8.5",cy:"12.5",r:"1"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"4.5",cy:"12.5",r:"1"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("circle",{cx:"12.5",cy:"12.5",r:"1"}))))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},localization.buttonLabel,valueAsDate&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",null,", ",localization.selectedDateMessage," ",dateFormatter.format(valueAsDate)))))},DatePickerDay=function DatePickerDay(_ref2){var focusedDay=_ref2.focusedDay,today=_ref2.today,day=_ref2.day,onDaySelect=_ref2.onDaySelect,onKeyboardNavigation=_ref2.onKeyboardNavigation,focusedDayRef=_ref2.focusedDayRef,inRange=_ref2.inRange,isSelected=_ref2.isSelected,dateFormatter=_ref2.dateFormatter,isToday=isEqual(day,today),isFocused=isEqual(day,focusedDay),isDisabled=day.getMonth()!==focusedDay.getMonth(),isOutsideRange=!inRange;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("button",{class:{"duet-date__day":!0,"is-outside":isOutsideRange,"is-disabled":isDisabled,"is-today":isToday},tabIndex:isFocused?0:-1,onClick:function handleClick(e){onDaySelect(e,day)},onKeyDown:onKeyboardNavigation,disabled:isOutsideRange||isDisabled,type:"button","aria-pressed":isSelected?"true":"false",ref:function ref(el){isFocused&&el&&focusedDayRef&&focusedDayRef(el)}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{"aria-hidden":"true"},day.getDate()),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},dateFormatter.format(day)))};var DatePickerMonth=function DatePickerMonth(_ref3){var selectedDate=_ref3.selectedDate,focusedDate=_ref3.focusedDate,labelledById=_ref3.labelledById,localization=_ref3.localization,firstDayOfWeek=_ref3.firstDayOfWeek,min=_ref3.min,max=_ref3.max,dateFormatter=_ref3.dateFormatter,onDateSelect=_ref3.onDateSelect,onKeyboardNavigation=_ref3.onKeyboardNavigation,focusedDayRef=_ref3.focusedDayRef,today=new Date,days=function getViewOfMonth(date){var firstDayOfWeek=arguments.length>1&&void 0!==arguments[1]?arguments[1]:DaysOfWeek.Monday,start=_startOfWeek(startOfMonth(date),firstDayOfWeek),end=_endOfWeek(endOfMonth(date),firstDayOfWeek);return getDaysInRange(start,end)}(focusedDate,firstDayOfWeek);return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("table",{class:"duet-date__table","aria-labelledby":labelledById},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("thead",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("tr",null,function mapWithOffset(array,startingOffset,mapFn){return array.map((function(_,i){var adjustedIndex=(i+startingOffset)%array.length;return mapFn(array[adjustedIndex])}))}(localization.dayNames,firstDayOfWeek,(function(dayName){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("th",{class:"duet-date__table-header",scope:"col"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{"aria-hidden":"true"},dayName.substr(0,2)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},dayName))})))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("tbody",null,function chunk(array,chunkSize){for(var result=[],i=0;i<array.length;i+=chunkSize)result.push(array.slice(i,i+chunkSize));return result}(days,7).map((function(week){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("tr",{class:"duet-date__row"},week.map((function(day){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("td",{class:"duet-date__cell"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)(DatePickerDay,{day:day,today:today,focusedDay:focusedDate,isSelected:isEqual(day,selectedDate),inRange:inRange(day,min,max),onDaySelect:onDateSelect,dateFormatter:dateFormatter,onKeyboardNavigation:onKeyboardNavigation,focusedDayRef:focusedDayRef}))})))}))))},localization={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],locale:"en-GB"},isoAdapter={parse:parseISODate,format:printISODate};var keyCode_TAB=9,keyCode_ESC=27,keyCode_PAGE_UP=33,keyCode_PAGE_DOWN=34,keyCode_END=35,keyCode_HOME=36,keyCode_LEFT=37,keyCode_UP=38,keyCode_RIGHT=39,keyCode_DOWN=40,DISALLOWED_CHARACTERS=/[^0-9\.\/\-]+/g,DuetDatePicker=function(){function DuetDatePicker(hostRef){var _this=this;_classCallCheck(this,DuetDatePicker),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.i)(this,hostRef),this.duetChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.e)(this,"duetChange",7),this.duetBlur=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.e)(this,"duetBlur",7),this.duetFocus=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.e)(this,"duetFocus",7),this.monthSelectId=createIdentifier("DuetDateMonth"),this.yearSelectId=createIdentifier("DuetDateYear"),this.dialogLabelId=createIdentifier("DuetDateLabel"),this.initialTouchX=null,this.initialTouchY=null,this.activeFocus=!1,this.focusedDay=new Date,this.open=!1,this.name="date",this.identifier="",this.disabled=!1,this.direction="right",this.required=!1,this.value="",this.min="",this.max="",this.firstDayOfWeek=DaysOfWeek.Monday,this.localization=localization,this.dateAdapter=isoAdapter,this.enableActiveFocus=function(){_this.activeFocus=!0},this.disableActiveFocus=function(){_this.activeFocus=!1},this.toggleOpen=function(e){e.preventDefault(),_this.open?_this.hide(!1):_this.show()},this.handleEscKey=function(event){event.keyCode===keyCode_ESC&&_this.hide()},this.handleBlur=function(event){event.stopPropagation(),_this.duetBlur.emit({component:"duet-date-picker"})},this.handleFocus=function(event){event.stopPropagation(),_this.duetFocus.emit({component:"duet-date-picker"})},this.handleTouchStart=function(event){var touch=event.changedTouches[0];_this.initialTouchX=touch.pageX,_this.initialTouchY=touch.pageY},this.handleTouchMove=function(event){event.preventDefault()},this.handleTouchEnd=function(event){var touch=event.changedTouches[0],distX=touch.pageX-_this.initialTouchX,distY=touch.pageY-_this.initialTouchY,isHorizontalSwipe=Math.abs(distX)>=70&&Math.abs(distY)<=70,isDownwardsSwipe=Math.abs(distY)>=70&&Math.abs(distX)<=70&&distY>0;isHorizontalSwipe?_this.addMonths(distX<0?1:-1):isDownwardsSwipe&&(_this.hide(!1),event.preventDefault()),_this.initialTouchY=null,_this.initialTouchX=null},this.handleNextMonthClick=function(event){event.preventDefault(),_this.addMonths(1)},this.handlePreviousMonthClick=function(event){event.preventDefault(),_this.addMonths(-1)},this.handleFirstFocusableKeydown=function(event){event.keyCode===keyCode_TAB&&event.shiftKey&&(_this.focusedDayNode.focus(),event.preventDefault())},this.handleKeyboardNavigation=function(event){if(event.keyCode===keyCode_TAB&&!event.shiftKey)return event.preventDefault(),void _this.firstFocusableElement.focus();var handled=!0;switch(event.keyCode){case keyCode_RIGHT:_this.addDays(1);break;case keyCode_LEFT:_this.addDays(-1);break;case keyCode_DOWN:_this.addDays(7);break;case keyCode_UP:_this.addDays(-7);break;case keyCode_PAGE_UP:event.shiftKey?_this.addYears(-1):_this.addMonths(-1);break;case keyCode_PAGE_DOWN:event.shiftKey?_this.addYears(1):_this.addMonths(1);break;case keyCode_HOME:_this.startOfWeek();break;case keyCode_END:_this.endOfWeek();break;default:handled=!1}handled&&(event.preventDefault(),_this.enableActiveFocus())},this.handleDaySelect=function(_event,day){inRange(day,parseISODate(_this.min),parseISODate(_this.max))&&(day.getMonth()===_this.focusedDay.getMonth()?(_this.setValue(day),_this.hide()):_this.setFocusedDay(day))},this.handleMonthSelect=function(e){_this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=function(e){_this.setYear(parseInt(e.target.value,10))},this.handleInputChange=function(e){var target=e.target;target.value=target.value.replace(DISALLOWED_CHARACTERS,"");var parsed=_this.dateAdapter.parse(target.value,createDate);(parsed||""===target.value)&&_this.setValue(parsed)},this.processFocusedDayNode=function(element){_this.focusedDayNode=element,_this.activeFocus&&_this.open&&setTimeout((function(){return element.focus()}),0)}}var _hide,_show,_setFocus;return _createClass(DuetDatePicker,[{key:"connectedCallback",value:function connectedCallback(){this.createDateFormatters()}},{key:"createDateFormatters",value:function createDateFormatters(){this.dateFormatShort=new Intl.DateTimeFormat(this.localization.locale,{day:"numeric",month:"long"}),this.dateFormatLong=new Intl.DateTimeFormat(this.localization.locale,{day:"numeric",month:"long",year:"numeric"})}},{key:"handleDocumentClick",value:function handleDocumentClick(e){if(this.open){var target=e.target;this.dialogWrapperNode.contains(target)||this.datePickerButton.contains(target)||this.hide(!1)}}},{key:"setFocus",value:(_setFocus=_asyncToGenerator(regeneratorRuntime.mark((function _callee(){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return _context.abrupt("return",this.datePickerInput.focus());case 1:case"end":return _context.stop()}}),_callee,this)}))),function setFocus(){return _setFocus.apply(this,arguments)})},{key:"show",value:(_show=_asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var _this2=this;return regeneratorRuntime.wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:this.open=!0,this.setFocusedDay(parseISODate(this.value)||new Date),clearTimeout(this.focusTimeoutId),this.focusTimeoutId=setTimeout((function(){return _this2.monthSelectNode.focus()}),300);case 4:case"end":return _context2.stop()}}),_callee2,this)}))),function show(){return _show.apply(this,arguments)})},{key:"hide",value:(_hide=_asyncToGenerator(regeneratorRuntime.mark((function _callee3(){var moveFocusToButton,_this3=this,_args3=arguments;return regeneratorRuntime.wrap((function _callee3$(_context3){for(;;)switch(_context3.prev=_context3.next){case 0:moveFocusToButton=!(_args3.length>0&&void 0!==_args3[0])||_args3[0],this.open=!1,clearTimeout(this.focusTimeoutId),moveFocusToButton&&setTimeout((function(){return _this3.datePickerButton.focus()}),500);case 4:case"end":return _context3.stop()}}),_callee3,this)}))),function hide(){return _hide.apply(this,arguments)})},{key:"addDays",value:function addDays(days){this.setFocusedDay(_addDays(this.focusedDay,days))}},{key:"addMonths",value:function addMonths(months){this.setMonth(this.focusedDay.getMonth()+months)}},{key:"addYears",value:function addYears(years){this.setYear(this.focusedDay.getFullYear()+years)}},{key:"startOfWeek",value:function startOfWeek(){this.setFocusedDay(_startOfWeek(this.focusedDay,this.firstDayOfWeek))}},{key:"endOfWeek",value:function endOfWeek(){this.setFocusedDay(_endOfWeek(this.focusedDay,this.firstDayOfWeek))}},{key:"setMonth",value:function setMonth(month){var min=_setMonth(startOfMonth(this.focusedDay),month),max=endOfMonth(min),date=_setMonth(this.focusedDay,month);this.setFocusedDay(clamp(date,min,max))}},{key:"setYear",value:function setYear(year){var min=_setYear(startOfMonth(this.focusedDay),year),max=endOfMonth(min),date=_setYear(this.focusedDay,year);this.setFocusedDay(clamp(date,min,max))}},{key:"setFocusedDay",value:function setFocusedDay(day){this.focusedDay=clamp(day,parseISODate(this.min),parseISODate(this.max))}},{key:"setValue",value:function setValue(date){this.value=printISODate(date),this.duetChange.emit({component:"duet-date-picker",value:this.value,valueAsDate:date})}},{key:"render",value:function render(){var _this4=this,valueAsDate=parseISODate(this.value),formattedDate=valueAsDate&&this.dateAdapter.format(valueAsDate),selectedYear=(valueAsDate||this.focusedDay).getFullYear(),focusedMonth=this.focusedDay.getMonth(),focusedYear=this.focusedDay.getFullYear(),minDate=parseISODate(this.min),maxDate=parseISODate(this.max),prevMonthDisabled=null!=minDate&&minDate.getMonth()===focusedMonth&&minDate.getFullYear()===focusedYear,nextMonthDisabled=null!=maxDate&&maxDate.getMonth()===focusedMonth&&maxDate.getFullYear()===focusedYear,minYear=minDate?minDate.getFullYear():selectedYear-10,maxYear=maxDate?maxDate.getFullYear():selectedYear+10;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)(DatePickerInput,{dateFormatter:this.dateFormatLong,value:this.value,valueAsDate:valueAsDate,formattedValue:formattedDate,onInput:this.handleInputChange,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.toggleOpen,name:this.name,disabled:this.disabled,role:this.role,required:this.required,identifier:this.identifier,localization:this.localization,buttonRef:function buttonRef(element){return _this4.datePickerButton=element},inputRef:function inputRef(element){return _this4.datePickerInput=element}}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:{"duet-date__dialog":!0,"is-left":"left"===this.direction,"is-active":this.open},role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-labelledby":this.dialogLabelId,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__dialog-content",onKeyDown:this.handleEscKey,ref:function ref(element){return _this4.dialogWrapperNode=element}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__mobile",onFocusin:this.disableActiveFocus},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("label",{class:"duet-date__mobile-heading"},this.localization.calendarHeading),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("button",{class:"duet-date__close",ref:function ref(element){return _this4.firstFocusableElement=element},onKeyDown:this.handleFirstFocusableKeydown,onClick:function onClick(){return _this4.hide()},type:"button"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M0 0h24v24H0V0z",fill:"none"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},this.localization.closeLabel))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite","aria-atomic":"true"},this.localization.monthNames[focusedMonth]," ",this.focusedDay.getFullYear()),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__select"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("select",{id:this.monthSelectId,class:"duet-date__select--month",ref:function ref(element){return _this4.monthSelectNode=element},onChange:this.handleMonthSelect},this.localization.monthNames.map((function(month,i){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("option",{key:month,value:i,selected:i===focusedMonth},month)}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__select-label","aria-hidden":"true"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",null,this.localization.monthNamesShort[focusedMonth]),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"})))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__select"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("select",{id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect},function range(from,to){for(var result=[],i=from;i<=to;i++)result.push(i);return result}(minYear,maxYear).map((function(year){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("option",{key:year,selected:year===focusedYear},year)}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__select-label","aria-hidden":"true"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",null,this.focusedDay.getFullYear()),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"}))))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("div",{class:"duet-date__nav"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:prevMonthDisabled,type:"button"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},this.localization.prevMonthLabel)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:nextMonthDisabled,type:"button"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("span",{class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)(DatePickerMonth,{dateFormatter:this.dateFormatShort,selectedDate:valueAsDate,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:minDate,max:maxDate})))))}},{key:"element",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.f)(this)}}],[{key:"watchers",get:function get(){return{localization:["createDateFormatters"]}}}]),DuetDatePicker}();DuetDatePicker.style='.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0;width:auto}.duet-date{box-sizing:border-box;color:var(--duet-color-text);display:block;font-family:var(--duet-font);margin:0;position:relative;text-align:left;width:100%}.duet-date__input{-webkit-appearance:none;appearance:none;background:var(--duet-color-surface);border:1px solid var(--duet-color-text);border-radius:var(--duet-radius);color:var(--duet-color-text);float:none;font-family:var(--duet-font);font-size:100%;line-height:normal;padding:14px 60px 14px 14px;width:100%}.duet-date__input:focus{border-color:var(--duet-color-primary);box-shadow:0 0 0 1px var(--duet-color-primary);outline:0}.duet-date__input::-webkit-input-placeholder{color:var(--duet-color-placeholder);opacity:1}.duet-date__input:-moz-placeholder{color:var(--duet-color-placeholder);opacity:1}.duet-date__input:-ms-input-placeholder{color:var(--duet-color-placeholder)}.duet-date__input-wrapper{position:relative;width:100%}.duet-date__toggle{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:var(--duet-color-button);border:0;border-radius:0;border-bottom-right-radius:var(--duet-radius);border-top-right-radius:var(--duet-radius);box-shadow:inset 1px 0 0 rgba(0, 0, 0, 0.1);color:var(--duet-color-text);cursor:pointer;display:flex;height:calc(100% - 2px);justify-content:center;padding:0;position:absolute;right:1px;top:1px;user-select:none;width:48px;z-index:2}.duet-date__toggle:focus{box-shadow:0 0 0 2px var(--duet-color-primary);outline:0}.duet-date__toggle-icon{display:flex;flex-basis:100%;justify-content:center;align-items:center}.duet-date__dialog{display:flex;left:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;width:100%;will-change:transform, opacity, visibility;z-index:var(--duet-z-index)}@media (max-width: 35.9375em){.duet-date__dialog{background:var(--duet-color-overlay);bottom:0;position:fixed;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.duet-date__dialog.is-left{left:auto;right:0;width:auto}.duet-date__dialog.is-active{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.duet-date__dialog-content{background:var(--duet-color-surface);border:1px solid rgba(0, 0, 0, 0.1);border-radius:var(--duet-radius);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.1);margin-left:auto;margin-top:8px;max-width:310px;min-width:290px;padding:16px 16px 20px;position:relative;transform:none;width:100%;z-index:var(--duet-z-index)}@media (max-width: 35.9375em){.duet-date__dialog-content{border:0;border-radius:0;border-top-left-radius:var(--duet-radius);border-top-right-radius:var(--duet-radius);bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active .duet-date__dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.duet-date__table{border-collapse:collapse;border-spacing:0;color:var(--duet-color-text);font-size:1rem;font-weight:var(--duet-font-normal);line-height:1.25;text-align:center;width:100%}.duet-date__table-header{font-size:0.75rem;font-weight:var(--duet-font-bold);letter-spacing:1px;line-height:1.25;padding-bottom:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;color:var(--duet-color-text);cursor:pointer;display:inline-block;font-family:var(--duet-font);font-size:0.875rem;font-variant-numeric:tabular-nums;font-weight:var(--duet-font-normal);height:36px;line-height:1.25;padding:0 0 1px;position:relative;text-align:center;vertical-align:middle;width:36px;z-index:1}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--duet-color-primary);position:relative;z-index:200}.duet-date__day:hover::before,.duet-date__day.is-today::before{background:var(--duet-color-primary);border-radius:50%;bottom:0;content:"";left:0;opacity:0.06;position:absolute;right:0;top:0}.duet-date__day[aria-pressed=true],.duet-date__day:focus{background:var(--duet-color-primary);box-shadow:none;color:var(--duet-color-text-active);outline:0}.duet-date__day:active{background:var(--duet-color-primary);box-shadow:0 0 5px var(--duet-color-primary);color:var(--duet-color-text-active);z-index:200}.duet-date__day:focus{box-shadow:0 0 5px var(--duet-color-primary);z-index:200}.duet-date__day.is-disabled{background:transparent;box-shadow:none;color:var(--duet-color-text);cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--duet-color-button);box-shadow:none;color:var(--duet-color-text);cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--duet-color-button);border:0;border-radius:50%;color:var(--duet-color-text);cursor:pointer;display:inline-flex;height:32px;justify-content:center;margin-left:8px;padding:0;transition:background-color 300ms ease;width:32px}@media (max-width: 35.9375em){.duet-date__prev,.duet-date__next{height:40px;width:40px}}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:0 0 0 2px var(--duet-color-primary);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev svg,.duet-date__next svg{margin:0 auto}.duet-date__select{display:inline-flex;margin-top:4px;position:relative}.duet-date__select span{margin-right:4px}.duet-date__select select{cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.duet-date__select select:focus+.duet-date__select-label{box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__select-label{align-items:center;border-radius:var(--duet-radius);color:var(--duet-color-text);display:flex;font-size:1.25rem;font-weight:var(--duet-font-bold);line-height:1.25;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.duet-date__select-label svg{width:16px;height:16px}.duet-date__mobile{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.duet-date__mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-8px;top:-8px;width:auto}}.duet-date__mobile-heading{display:inline-block;font-weight:var(--duet-font-bold);max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.duet-date__mobile-heading{display:none}}.duet-date__close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--duet-color-button);border:0;border-radius:50%;color:var(--duet-color-text);cursor:pointer;display:flex;height:24px;justify-content:center;padding:0;width:24px}@media (min-width: 36em){.duet-date__close{opacity:0}}.duet-date__close:focus{box-shadow:0 0 0 2px var(--duet-color-primary);outline:none}@media (min-width: 36em){.duet-date__close:focus{opacity:1}}.duet-date__close svg{margin:0 auto}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}';var ContentCalendar=function(){function ContentCalendar(hostRef){_classCallCheck(this,ContentCalendar),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ContentCalendar,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M17.5 3.5v-2H16v2H8v-2H6.5v2H2V19a3 3 0 003 3h14a3 3 0 003-3V3.5h-4.5zm-10 14a1 1 0 110-2 1 1 0 010 2zm0-4.5a1 1 0 110-2 1 1 0 010 2zm4.5 4.5a1 1 0 110-2 1 1 0 010 2zm0-4.5a1 1 0 110-2 1 1 0 010 2zm4.5 4.5a1 1 0 110-2 1 1 0 010 2zm0-4.5a1 1 0 110-2 1 1 0 010 2z","fill-rule":"evenodd"})):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.g)("path",{d:"M8 1.5v2h8v-2h1.5v2H22V19a3.01 3.01 0 01-2.824 2.995L19 22H5a3.01 3.01 0 01-2.995-2.824L2 19V3.5h4.5v-2H8zM20.5 8h-17v11c0 .8.576 1.423 1.352 1.493L5 20.5h14c.8 0 1.423-.576 1.493-1.352L20.5 19V8zm-13 7.5a1 1 0 110 2 1 1 0 010-2zm4.5 0a1 1 0 110 2 1 1 0 010-2zm4.5 0a1 1 0 110 2 1 1 0 010-2zm-9-4.5a1 1 0 110 2 1 1 0 010-2zm4.5 0a1 1 0 110 2 1 1 0 010-2zm4.5 0a1 1 0 110 2 1 1 0 010-2z","fill-rule":"evenodd"})))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_17__.f)(this)}}]),ContentCalendar}();ContentCalendar.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}"}}]);
\ No newline at end of file
diff --git a/28.85806c32.iframe.bundle.js.map b/28.85806c32.iframe.bundle.js.map
deleted file mode 100644
index 2d6d71f515..0000000000
--- a/28.85806c32.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"28.85806c32.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/28.85806c32.iframe.bundle.js b/29.0667ce4d.iframe.bundle.js
similarity index 98%
rename from 28.85806c32.iframe.bundle.js
rename to 29.0667ce4d.iframe.bundle.js
index 33266d7fb0..999896e36d 100644
--- a/28.85806c32.iframe.bundle.js
+++ b/29.0667ce4d.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 28.85806c32.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/render-icon-05777d0c.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return renderIcon}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),renderIcon=function renderIcon(value,customContainerClass){if("function"==typeof value)return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("span",{innerHTML:value(),class:customContainerClass});if("string"==typeof value)return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("scale-icon",{name:value});var Tag=value.tag;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(Tag,Object.assign({},value.attributes))}},"../components/dist/esm/scale-app-footer.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_app_footer",(function(){return AppFooter}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_render_icon_05777d0c_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/render-icon-05777d0c.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var AppFooter=function(){function AppFooter(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,AppFooter),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.i)(this,hostRef),this.footerNavigation=[],this.variant="standard",this.copyright="© Deutsche Telekom AG"}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(AppFooter,[{key:"componentWillLoad",value:function componentWillLoad(){this.hasSlotLogo=!!this.hostElement.querySelector('[slot="logo"]'),this.hasSlotNavigation=!!this.hostElement.querySelector('[slot="navigation"]')}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("div",{class:"footer-mask"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("footer",{class:"footer"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("div",{class:"footer-content"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("div",{class:"footer-branding"},this.hasSlotLogo?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("slot",{name:"logo"}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("scale-logo",{transparent:!0,variant:"white",size:24,href:this.logoHref,logoTitle:this.logoTitle,onClick:this.logoClick,logoAriaDescribedBy:this.logoAriaDescribedBy})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("div",{class:"footer-copyright"},this.copyright),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("nav",{"aria-label":"bottom",class:"footer-navigation"},this.hasSlotNavigation?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("slot",{name:"navigation"}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("ul",null,function readData(data){var parsedData;try{parsedData=JSON.parse(data)}catch(error){parsedData=data}return parsedData}(this.footerNavigation).map((function(item){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("li",{class:"footer-navigation__item"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("a",{class:"footer-navigation__item-link",href:item.href||"javascript:void(0);",target:item.target||"_self",onClick:function onClick(event){"function"==typeof item.onClick&&item.onClick(event)}},item.icon&&Object(_render_icon_05777d0c_js__WEBPACK_IMPORTED_MODULE_5__.a)({tag:"scale-icon-"+item.icon,attributes:{class:"footer-navigation__item-link"}}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("span",null,item.name)))}))))))))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_4__.a)("footer-container",this.variant&&"footer--variant-"+this.variant)}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.f)(this)}}]),AppFooter}();AppFooter.style=":host{--background:var(--telekom-color-background-surface-highlight);--color:var(--telekom-color-text-and-icon-white-standard);--spacing-top:var(--telekom-spacing-composition-space-10);--spacing-bottom:var(--telekom-spacing-composition-space-08);--spacing-x:var(--telekom-spacing-composition-space-08);--background-container:var(--telekom-color-background-canvas);--radius:var(--telekom-radius-large);--max-width:inherit;--border-top-minimal:var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-faint);--color-minimal:var(--telekom-color-text-and-icon-additional);--background-minimal:var(--telekom-color-background-surface);--spacing-angular:var(--telekom-spacing-composition-space-08);--spacing-minimal:var(--telekom-spacing-composition-space-08);--background-mask:var(--telekom-color-background-canvas);--radius-mask:0 0 var(--telekom-radius-large) var(--telekom-radius-large);--font-size-copyright:var(--telekom-typography-font-size-caption);--color-link-standard:var(--telekom-color-text-and-icon-white-standard);--color-link-minimal:var(--telekom-color-text-and-icon-additional);--font-size-navigation-standard:var(--telekom-typography-font-size-caption);--font-family-navigation-standard:var(--telekom-typography-font-family-sans);--font-weight-navigation-standard:var(\n    --telekom-typography-font-weight-extra-bold\n  );--font-weight-navigation-minimal:var(\n    --telekom-typography-font-weight-medium\n  );--spacing-navigation-standard:var(--telekom-spacing-composition-space-04);--color-navigation-standard-hover:var(\n    --telekom-color-text-and-icon-white-standard\n  );--color-navigation-minimal-hover:var(\n    --telekom-color-text-and-icon-primary-hovered\n  );--color-navigation-active-focus:var(\n    --telekom-color-text-and-icon-primary-pressed\n  );--box-shadow-navigation-focus:0 0 0\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-color-functional-focus-standard);--border-color-standard-hover:var(\n    --telekom-color-text-and-icon-white-standard\n  )}.footer{width:100%;background:var(--background);color:var(--color);padding:var(--spacing-top) var(--spacing-x) var(--spacing-bottom)\n    var(--spacing-x);position:relative;bottom:0;box-sizing:border-box}.footer-container{background:var(--background)}.footer--variant-angular .footer{padding:var(--spacing-angular)}.footer--variant-minimal .footer{border-top:var(--border-top-minimal);color:var(--color-minimal);background:var(--background-minimal);padding:var(--spacing-minimal)}.footer-mask{position:relative;z-index:1;height:var(--radius);background:var(--background-mask);border-radius:var(--radius-mask)}.footer--variant-angular .footer-mask,.footer--variant-minimal .footer-mask{display:none}.footer-copyright{font-size:var(--font-size-copyright)}.footer-navigation a{color:var(--color-link-standard);text-decoration:none}.footer--variant-minimal .footer-navigation a{color:var(--color-link-minimal)}.footer-navigation ul{margin:0;padding:0;list-style:none;font-size:var(--font-size-navigation-standard);font-family:var(--font-family-navigation-standard);font-weight:var(--font-weight-navigation-standard)}.footer--variant-minimal .footer-navigation ul{font-weight:var(--font-weight-navigation-minimal)}.footer-navigation li a{display:flex;align-items:center;padding:var(--spacing-navigation-standard);margin:calc(-1 * var(--spacing-navigation-standard)) 0}.footer-navigation li span{padding:var(--telekom-spacing-composition-space-03) 0}.footer-navigation li a:hover{color:var(--color-navigation-standard-hover)}.footer--variant-minimal .footer-navigation li a:hover{color:var(--color-navigation-minimal-hover)}.footer--variant-minimal .footer-navigation li a:hover span{border-bottom:1px solid transparent;margin-bottom:-1px}.footer--variant-angular .footer-navigation li a:hover span,.footer--variant-standard .footer-navigation li a:hover span{border-bottom:1px solid var(--border-color-standard-hover);margin-bottom:-1px}.footer-navigation li a:active{color:var(--color-navigation-active-focus, #cb0068)}.footer--variant-minimal .footer-navigation li a:active span{border-bottom:1px solid transparent;margin-bottom:-1px}.footer--variant-angular .footer-navigation li a:active span,.footer--variant-standard .footer-navigation li a:active span{border-bottom:1px solid var(--color-navigation-active-focus);margin-bottom:-1px}.footer-navigation li a:active:focus{color:var(--color-navigation-active-focus);box-shadow:none}.footer-navigation li a:focus{outline:none;box-shadow:var(--box-shadow-navigation-focus);border-radius:var(--radius)}.footer-navigation svg{width:auto;height:var(--telekom-spacing-composition-space-06);margin-right:var(--spacing-navigation-standard)}.footer--variant-minimal .footer-copyright{justify-content:flex-start}.footer--variant-minimal .footer-branding{display:none}.footer--variant-minimal .footer-content{grid-template-areas:'copyright navigation navigation'}@media (max-width: 639px){.footer-branding{margin-bottom:var(--spacing-angular)}.footer-copyright{margin-bottom:var(--telekom-spacing-composition-space-06)}.footer-navigation ul{line-height:var(--telekom-spacing-composition-space-10)}.footer-navigation li a{padding:var(--telekom-spacing-composition-space-03);margin:calc(-1 * var(--spacing-navigation-standard))\n      calc(-1 * var(--telekom-spacing-composition-space-03))}}@media (min-width: 640px){.footer-branding{grid-area:branding;width:100%;display:flex;align-items:center;justify-content:flex-start}.footer-copyright{grid-area:copyright;width:100%;display:flex;align-items:center;justify-content:center}.footer-navigation{grid-area:navigation;width:100%;display:flex;align-items:center;justify-content:flex-end}.footer-navigation ul{display:flex;align-items:center}}@media (min-width: 640px) and (max-width: 1295px){.footer-content{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, 1fr));grid-template-areas:'branding ....... .......'\n      'copyright navigation navigation'}.footer-branding{margin-bottom:var(--spacing-angular)}.footer-copyright{justify-content:flex-start}}@media (min-width: 1296px){.footer-content{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);grid-template-areas:'branding copyright navigation'}}@media (min-width: 1552px){.footer-content{margin:0 auto;max-width:var(--max-width)}}scale-logo:focus-visible{outline:none}"}}]);
-//# sourceMappingURL=28.85806c32.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 29.0667ce4d.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/render-icon-05777d0c.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return renderIcon}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),renderIcon=function renderIcon(value,customContainerClass){if("function"==typeof value)return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("span",{innerHTML:value(),class:customContainerClass});if("string"==typeof value)return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("scale-icon",{name:value});var Tag=value.tag;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(Tag,Object.assign({},value.attributes))}},"../components/dist/esm/scale-app-footer.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_app_footer",(function(){return AppFooter}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_render_icon_05777d0c_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/render-icon-05777d0c.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var AppFooter=function(){function AppFooter(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,AppFooter),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.i)(this,hostRef),this.footerNavigation=[],this.variant="standard",this.copyright="© Deutsche Telekom AG"}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(AppFooter,[{key:"componentWillLoad",value:function componentWillLoad(){this.hasSlotLogo=!!this.hostElement.querySelector('[slot="logo"]'),this.hasSlotNavigation=!!this.hostElement.querySelector('[slot="navigation"]')}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("div",{class:"footer-mask"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("footer",{class:"footer"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("div",{class:"footer-content"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("div",{class:"footer-branding"},this.hasSlotLogo?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("slot",{name:"logo"}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("scale-logo",{transparent:!0,variant:"white",size:24,href:this.logoHref,logoTitle:this.logoTitle,onClick:this.logoClick,logoAriaDescribedBy:this.logoAriaDescribedBy})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("div",{class:"footer-copyright"},this.copyright),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("nav",{"aria-label":"bottom",class:"footer-navigation"},this.hasSlotNavigation?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("slot",{name:"navigation"}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("ul",null,function readData(data){var parsedData;try{parsedData=JSON.parse(data)}catch(error){parsedData=data}return parsedData}(this.footerNavigation).map((function(item){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("li",{class:"footer-navigation__item"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("a",{class:"footer-navigation__item-link",href:item.href||"javascript:void(0);",target:item.target||"_self",onClick:function onClick(event){"function"==typeof item.onClick&&item.onClick(event)}},item.icon&&Object(_render_icon_05777d0c_js__WEBPACK_IMPORTED_MODULE_5__.a)({tag:"scale-icon-"+item.icon,attributes:{class:"footer-navigation__item-link"}}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("span",null,item.name)))}))))))))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_4__.a)("footer-container",this.variant&&"footer--variant-"+this.variant)}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.f)(this)}}]),AppFooter}();AppFooter.style=":host{--background:var(--telekom-color-background-surface-highlight);--color:var(--telekom-color-text-and-icon-white-standard);--spacing-top:var(--telekom-spacing-composition-space-10);--spacing-bottom:var(--telekom-spacing-composition-space-08);--spacing-x:var(--telekom-spacing-composition-space-08);--background-container:var(--telekom-color-background-canvas);--radius:var(--telekom-radius-large);--max-width:inherit;--border-top-minimal:var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-faint);--color-minimal:var(--telekom-color-text-and-icon-additional);--background-minimal:var(--telekom-color-background-surface);--spacing-angular:var(--telekom-spacing-composition-space-08);--spacing-minimal:var(--telekom-spacing-composition-space-08);--background-mask:var(--telekom-color-background-canvas);--radius-mask:0 0 var(--telekom-radius-large) var(--telekom-radius-large);--font-size-copyright:var(--telekom-typography-font-size-caption);--color-link-standard:var(--telekom-color-text-and-icon-white-standard);--color-link-minimal:var(--telekom-color-text-and-icon-additional);--font-size-navigation-standard:var(--telekom-typography-font-size-caption);--font-family-navigation-standard:var(--telekom-typography-font-family-sans);--font-weight-navigation-standard:var(\n    --telekom-typography-font-weight-extra-bold\n  );--font-weight-navigation-minimal:var(\n    --telekom-typography-font-weight-medium\n  );--spacing-navigation-standard:var(--telekom-spacing-composition-space-04);--color-navigation-standard-hover:var(\n    --telekom-color-text-and-icon-white-standard\n  );--color-navigation-minimal-hover:var(\n    --telekom-color-text-and-icon-primary-hovered\n  );--color-navigation-active-focus:var(\n    --telekom-color-text-and-icon-primary-pressed\n  );--box-shadow-navigation-focus:0 0 0\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-color-functional-focus-standard);--border-color-standard-hover:var(\n    --telekom-color-text-and-icon-white-standard\n  )}.footer{width:100%;background:var(--background);color:var(--color);padding:var(--spacing-top) var(--spacing-x) var(--spacing-bottom)\n    var(--spacing-x);position:relative;bottom:0;box-sizing:border-box}.footer-container{background:var(--background)}.footer--variant-angular .footer{padding:var(--spacing-angular)}.footer--variant-minimal .footer{border-top:var(--border-top-minimal);color:var(--color-minimal);background:var(--background-minimal);padding:var(--spacing-minimal)}.footer-mask{position:relative;z-index:1;height:var(--radius);background:var(--background-mask);border-radius:var(--radius-mask)}.footer--variant-angular .footer-mask,.footer--variant-minimal .footer-mask{display:none}.footer-copyright{font-size:var(--font-size-copyright)}.footer-navigation a{color:var(--color-link-standard);text-decoration:none}.footer--variant-minimal .footer-navigation a{color:var(--color-link-minimal)}.footer-navigation ul{margin:0;padding:0;list-style:none;font-size:var(--font-size-navigation-standard);font-family:var(--font-family-navigation-standard);font-weight:var(--font-weight-navigation-standard)}.footer--variant-minimal .footer-navigation ul{font-weight:var(--font-weight-navigation-minimal)}.footer-navigation li a{display:flex;align-items:center;padding:var(--spacing-navigation-standard);margin:calc(-1 * var(--spacing-navigation-standard)) 0}.footer-navigation li span{padding:var(--telekom-spacing-composition-space-03) 0}.footer-navigation li a:hover{color:var(--color-navigation-standard-hover)}.footer--variant-minimal .footer-navigation li a:hover{color:var(--color-navigation-minimal-hover)}.footer--variant-minimal .footer-navigation li a:hover span{border-bottom:1px solid transparent;margin-bottom:-1px}.footer--variant-angular .footer-navigation li a:hover span,.footer--variant-standard .footer-navigation li a:hover span{border-bottom:1px solid var(--border-color-standard-hover);margin-bottom:-1px}.footer-navigation li a:active{color:var(--color-navigation-active-focus, #cb0068)}.footer--variant-minimal .footer-navigation li a:active span{border-bottom:1px solid transparent;margin-bottom:-1px}.footer--variant-angular .footer-navigation li a:active span,.footer--variant-standard .footer-navigation li a:active span{border-bottom:1px solid var(--color-navigation-active-focus);margin-bottom:-1px}.footer-navigation li a:active:focus{color:var(--color-navigation-active-focus);box-shadow:none}.footer-navigation li a:focus{outline:none;box-shadow:var(--box-shadow-navigation-focus);border-radius:var(--radius)}.footer-navigation svg{width:auto;height:var(--telekom-spacing-composition-space-06);margin-right:var(--spacing-navigation-standard)}.footer--variant-minimal .footer-copyright{justify-content:flex-start}.footer--variant-minimal .footer-branding{display:none}.footer--variant-minimal .footer-content{grid-template-areas:'copyright navigation navigation'}@media (max-width: 639px){.footer-branding{margin-bottom:var(--spacing-angular)}.footer-copyright{margin-bottom:var(--telekom-spacing-composition-space-06)}.footer-navigation ul{line-height:var(--telekom-spacing-composition-space-10)}.footer-navigation li a{padding:var(--telekom-spacing-composition-space-03);margin:calc(-1 * var(--spacing-navigation-standard))\n      calc(-1 * var(--telekom-spacing-composition-space-03))}}@media (min-width: 640px){.footer-branding{grid-area:branding;width:100%;display:flex;align-items:center;justify-content:flex-start}.footer-copyright{grid-area:copyright;width:100%;display:flex;align-items:center;justify-content:center}.footer-navigation{grid-area:navigation;width:100%;display:flex;align-items:center;justify-content:flex-end}.footer-navigation ul{display:flex;align-items:center}}@media (min-width: 640px) and (max-width: 1295px){.footer-content{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, 1fr));grid-template-areas:'branding ....... .......'\n      'copyright navigation navigation'}.footer-branding{margin-bottom:var(--spacing-angular)}.footer-copyright{justify-content:flex-start}}@media (min-width: 1296px){.footer-content{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);grid-template-areas:'branding copyright navigation'}}@media (min-width: 1552px){.footer-content{margin:0 auto;max-width:var(--max-width)}}scale-logo:focus-visible{outline:none}"}}]);
+//# sourceMappingURL=29.0667ce4d.iframe.bundle.js.map
\ No newline at end of file
diff --git a/28.85806c32.iframe.bundle.js.LICENSE.txt b/29.0667ce4d.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 28.85806c32.iframe.bundle.js.LICENSE.txt
rename to 29.0667ce4d.iframe.bundle.js.LICENSE.txt
diff --git a/29.0667ce4d.iframe.bundle.js.map b/29.0667ce4d.iframe.bundle.js.map
new file mode 100644
index 0000000000..abc6b76367
--- /dev/null
+++ b/29.0667ce4d.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"29.0667ce4d.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/29.f8831396.iframe.bundle.js.map b/29.f8831396.iframe.bundle.js.map
deleted file mode 100644
index 9721c91bcf..0000000000
--- a/29.f8831396.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"29.f8831396.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/30.dd39afef.iframe.bundle.js.map b/30.dd39afef.iframe.bundle.js.map
deleted file mode 100644
index 3d2b6c2632..0000000000
--- a/30.dd39afef.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"30.dd39afef.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/29.f8831396.iframe.bundle.js b/30.f906ea1f.iframe.bundle.js
similarity index 97%
rename from 29.f8831396.iframe.bundle.js
rename to 30.f906ea1f.iframe.bundle.js
index ad49c43bd4..135824c02b 100644
--- a/29.f8831396.iframe.bundle.js
+++ b/30.f906ea1f.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 29.f8831396.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-alert.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_alert",(function(){return Alert}));__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Alert=function(){function Alert(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Alert),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.i)(this,hostRef),this.size="",this.variant="",this.timeout=!1,this.icon="",this.defaultTimeout=2e3,this.close=function(){_this.opened=!1},this.onCloseAlertWithTimeout=function(){if(!1===_this.timeout)return null;"number"==typeof _this.timeout?setTimeout(_this.close,_this.timeout):setTimeout(_this.close,_this.defaultTimeout)}}var _open;return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Alert,[{key:"componentWillLoad",value:function componentWillLoad(){this.hasSlotClose=!!this.hostElement.querySelector('[slot="close"]')}},{key:"connectedCallback",value:function connectedCallback(){Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_6__.a)({source:this.hostElement,type:"warn"})}},{key:"open",value:(_open=function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(regeneratorRuntime.mark((function _callee(){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:this.opened=!0;case 1:case"end":return _context.stop()}}),_callee,this)}))),function open(){return _open.apply(this,arguments)})},{key:"render",value:function render(){return this.onCloseAlertWithTimeout(),this.opened?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:"alert__body"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:"alert__icon"},this.icon),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:"alert__content"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:"alert__headline"},this.headline),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",null))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("a",{class:"alert__close",onClick:this.close},this.hasSlotClose?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:"alert__close-icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"close"})):"x"))):null}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_5__.a)("alert",this.size&&"alert--size-"+this.size,this.variant&&"alert--variant-"+this.variant)}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.f)(this)}}]),Alert}();Alert.style=".alert{box-sizing:border-box;background:#eee;color:#333;width:100%;padding:1rem;text-align:left;position:relative;display:flex;justify-content:space-between}.alert__body{display:flex}.alert__headline{font-size:var(--type-size-3, 1rem);color:white;margin:0}.alert__icon{display:flex;align-items:center;justify-content:center;background:none;height:24px;width:24px;margin:0 0.5rem 0 0;border-radius:var(--telekom-radius-standard)}.alert__close{height:16px;opacity:0.5;cursor:pointer}.alert__close:hover{opacity:1}.alert--variant-primary{background:blue;color:#fff}.alert--variant-secondary{background:#eee;color:#333}.alert--variant-variant-warning{background:orange;color:#fff}.alert--variant-danger{background:red;color:#fff}.alert--variant-success{background:green;color:#fff}.alert--variant-info{background:lightblue;color:#fff}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
-//# sourceMappingURL=29.f8831396.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 30.f906ea1f.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-alert.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_alert",(function(){return Alert}));__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Alert=function(){function Alert(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Alert),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.i)(this,hostRef),this.size="",this.variant="",this.timeout=!1,this.icon="",this.defaultTimeout=2e3,this.close=function(){_this.opened=!1},this.onCloseAlertWithTimeout=function(){if(!1===_this.timeout)return null;"number"==typeof _this.timeout?setTimeout(_this.close,_this.timeout):setTimeout(_this.close,_this.defaultTimeout)}}var _open;return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Alert,[{key:"componentWillLoad",value:function componentWillLoad(){this.hasSlotClose=!!this.hostElement.querySelector('[slot="close"]')}},{key:"connectedCallback",value:function connectedCallback(){Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_6__.a)({source:this.hostElement,type:"warn"})}},{key:"open",value:(_open=function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(regeneratorRuntime.mark((function _callee(){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:this.opened=!0;case 1:case"end":return _context.stop()}}),_callee,this)}))),function open(){return _open.apply(this,arguments)})},{key:"render",value:function render(){return this.onCloseAlertWithTimeout(),this.opened?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:"alert__body"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:"alert__icon"},this.icon),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:"alert__content"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:"alert__headline"},this.headline),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",null))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("a",{class:"alert__close",onClick:this.close},this.hasSlotClose?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{class:"alert__close-icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"close"})):"x"))):null}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_5__.a)("alert",this.size&&"alert--size-"+this.size,this.variant&&"alert--variant-"+this.variant)}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.f)(this)}}]),Alert}();Alert.style=".alert{box-sizing:border-box;background:#eee;color:#333;width:100%;padding:1rem;text-align:left;position:relative;display:flex;justify-content:space-between}.alert__body{display:flex}.alert__headline{font-size:var(--type-size-3, 1rem);color:white;margin:0}.alert__icon{display:flex;align-items:center;justify-content:center;background:none;height:24px;width:24px;margin:0 0.5rem 0 0;border-radius:var(--telekom-radius-standard)}.alert__close{height:16px;opacity:0.5;cursor:pointer}.alert__close:hover{opacity:1}.alert--variant-primary{background:blue;color:#fff}.alert--variant-secondary{background:#eee;color:#333}.alert--variant-variant-warning{background:orange;color:#fff}.alert--variant-danger{background:red;color:#fff}.alert--variant-success{background:green;color:#fff}.alert--variant-info{background:lightblue;color:#fff}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
+//# sourceMappingURL=30.f906ea1f.iframe.bundle.js.map
\ No newline at end of file
diff --git a/31.457199ae.iframe.bundle.js.LICENSE.txt b/30.f906ea1f.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 31.457199ae.iframe.bundle.js.LICENSE.txt
rename to 30.f906ea1f.iframe.bundle.js.LICENSE.txt
diff --git a/30.f906ea1f.iframe.bundle.js.map b/30.f906ea1f.iframe.bundle.js.map
new file mode 100644
index 0000000000..9c5ad83861
--- /dev/null
+++ b/30.f906ea1f.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"30.f906ea1f.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/31.457199ae.iframe.bundle.js.map b/31.457199ae.iframe.bundle.js.map
deleted file mode 100644
index c769767038..0000000000
--- a/31.457199ae.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"31.457199ae.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/30.dd39afef.iframe.bundle.js b/31.8a31389e.iframe.bundle.js
similarity index 99%
rename from 30.dd39afef.iframe.bundle.js
rename to 31.8a31389e.iframe.bundle.js
index 123dd54a70..220a3f1092 100644
--- a/30.dd39afef.iframe.bundle.js
+++ b/31.8a31389e.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 30.dd39afef.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-button_3.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_button",(function(){return Button})),__webpack_require__.d(__webpack_exports__,"scale_menu_flyout",(function(){return MenuFlyout})),__webpack_require__.d(__webpack_exports__,"scale_menu_flyout_list",(function(){return MenuFlyoutList}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.trim.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.set.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.starts-with.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find-index.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}var buttonIconSizeMap={small:16,large:20},Button=function(){function Button(hostRef){var _this=this;_classCallCheck(this,Button),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.i)(this,hostRef),this.size="large",this.variant="primary",this.disabled=!1,this.iconOnly=!1,this.iconPosition="before",this.target="_self",this.handleClick=function(ev){if(Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.f)(_this.hostElement)){var parentForm=_this.hostElement.closest("form");if(parentForm){ev.preventDefault();var fakeButton=document.createElement("button");_this.type&&(fakeButton.type=_this.type),fakeButton.style.display="none",parentForm.appendChild(fakeButton),fakeButton.click(),fakeButton.remove()}}}}var _setFocus;return _createClass(Button,[{key:"handleHostClick",value:function handleHostClick(event){!0===this.disabled&&event.stopImmediatePropagation()}},{key:"setFocus",value:(_setFocus=_asyncToGenerator(regeneratorRuntime.mark((function _callee(){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:this.focusableElement.focus();case 1:case"end":return _context.stop()}}),_callee,this)}))),function setFocus(){return _setFocus.apply(this,arguments)})},{key:"componentDidLoad",value:function componentDidLoad(){this.setChildrenIconSize()}},{key:"connectedCallback",value:function connectedCallback(){this.setIconPositionProp(),this.appendEnterKeySubmitFallback()}},{key:"disconnectedCallback",value:function disconnectedCallback(){this.cleanUpEnterKeySubmitFallback()}},{key:"appendEnterKeySubmitFallback",value:function appendEnterKeySubmitFallback(){if(Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.f)(this.hostElement)){var parentForm=this.hostElement.closest("form");if(null==parentForm)return;if(null!=parentForm.querySelector('input[type="submit"]'))return;this.fallbackSubmitInputElement=document.createElement("input"),this.fallbackSubmitInputElement.type="submit",this.fallbackSubmitInputElement.hidden=!0,parentForm.appendChild(this.fallbackSubmitInputElement)}}},{key:"cleanUpEnterKeySubmitFallback",value:function cleanUpEnterKeySubmitFallback(){if(null!=this.fallbackSubmitInputElement)try{this.fallbackSubmitInputElement.remove(),this.fallbackSubmitInputElement=null}catch(err){}}},{key:"setIconPositionProp",value:function setIconPositionProp(){var nodes=Array.from(this.hostElement.childNodes).filter((function(node){return!(3===node.nodeType&&""===node.nodeValue.trim())})),lastNode=nodes.length>1?nodes[nodes.length-1]:null;!this.iconOnly&&lastNode&&Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.g)(lastNode)&&(this.iconPosition="after")}},{key:"setChildrenIconSize",value:function setChildrenIconSize(){var _this2=this;null!=this.size&&null!=buttonIconSizeMap[this.size]&&Array.from(this.hostElement.childNodes).filter(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.g).forEach((function(icon){24===icon.size&&(icon.size=buttonIconSizeMap[_this2.size])}))}},{key:"render",value:function render(){var _this3=this,basePart=Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__.a)("base",this.variant&&"variant-"+this.variant,this.iconOnly&&"icon-only",!this.iconOnly&&this.iconPosition,this.disabled&&"disabled");return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("style",null,this.styles),this.href?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("a",{ref:function ref(el){return _this3.focusableElement=el},class:this.getCssClassMap(),href:this.disabled?null:this.href,download:this.download,target:this.target,rel:"_blank"===this.target?"noopener noreferrer":void 0,part:basePart,tabIndex:this.innerTabindex,role:"link","aria-disabled":this.disabled?"true":null,"aria-label":this.innerAriaLabel},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",null)):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("button",{ref:function ref(el){return _this3.focusableElement=el},class:this.getCssClassMap(),onClick:this.handleClick,disabled:this.disabled,type:this.type,part:basePart,tabIndex:this.innerTabindex,name:this.name,value:this.value,"aria-label":this.innerAriaLabel},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",null)))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__.a)("button",this.size&&"button--size-"+this.size,this.variant&&"button--variant-"+this.variant,this.iconOnly&&"button--icon-only",!this.iconOnly&&this.iconPosition&&"button--icon-"+this.iconPosition,this.disabled&&"button--disabled")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.f)(this)}}]),Button}();Button.style=":host{--width:auto;--spacing-x-right:var(--telekom-spacing-composition-space-07);--spacing-x-left:var(--telekom-spacing-composition-space-07);--spacing-x-icon-only:var(--telekom-spacing-composition-space-05);--min-height:var(--telekom-spacing-composition-space-13);--min-width:var(--telekom-spacing-composition-space-13);--radius:var(--telekom-radius-standard);--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);--color-focus:var(--telekom-color-functional-focus-standard);--font-weight:var(--telekom-typography-font-weight-bold);--font-size:var(--telekom-typography-font-size-body);--line-height:var(--telekom-typography-line-spacing-tight);--spacing-icon-x:var(--telekom-spacing-composition-space-04);--vertical-align:middle;--font-size-small:var(--telekom-typography-font-size-caption);--line-height-small:1.125rem;--min-height-small:var(--telekom-spacing-composition-space-10);--spacing-x-right-small:var(--telekom-spacing-composition-space-06);--spacing-x-left-small:var(--telekom-spacing-composition-space-06);--spacing-x-icon-only-small:var(--telekom-spacing-composition-space-00);--spacing-icon-x-small:var(--telekom-spacing-composition-space-03);--radius-primary:var(--radius);--background-primary:var(--telekom-color-primary-standard);--background-primary-hover:var(--telekom-color-primary-hovered);--background-primary-active:var(--telekom-color-primary-pressed);--background-primary-disabled:var(--telekom-color-ui-disabled);--color-primary:var(--telekom-color-text-and-icon-white-standard);--color-primary-disabled:var(--telekom-color-text-and-icon-disabled);--radius-secondary:var(--radius);--border-width-secondary:var(--telekom-spacing-composition-space-01);--background-secondary:transparent;--color-secondary:var(--telekom-color-text-and-icon-standard);--color-secondary-hover:var(--telekom-color-text-and-icon-standard);--color-secondary-active:var(--telekom-color-text-and-icon-standard);--color-secondary-disabled:var(--telekom-color-text-and-icon-disabled);--background-secondary:var(--telekom-color-ui-state-fill-standard);--background-secondary-hover:var(--telekom-color-ui-state-fill-hovered);--background-secondary-active:var(--telekom-color-ui-state-fill-pressed);--background-secondary-disabled:none;--border-secondary:var(--telekom-color-ui-border-standard);--border-secondary-hover:var(--telekom-color-ui-border-hovered);--border-secondary-active:var(--telekom-color-ui-border-pressed);--border-secondary-focus:var(--telekom-color-functional-focus-standard);--border-secondary-white:var(--telekom-color-ui-white);--color-secondary-white:var(--telekom-color-ui-white);--background-secondary-white-hover:var(\n    --telekom-color-ui-state-fill-hovered-inverted\n  );--background-secondary-white-active:var(\n    --telekom-color-ui-state-fill-pressed-inverted\n  );--secondary-white-opacity:0.5;--radius-ghost:var(--radius);--border-width-ghost:var(--telekom-spacing-composition-space-01);--spacing-x-ghost:var(--telekom-spacing-composition-space-04);--color-ghost:var(--telekom-color-text-and-icon-link-standard);--color-ghost-hover:var(--telekom-color-text-and-icon-link-hovered);--color-ghost-active:var(--telekom-color-text-and-icon-link-active);--color-ghost-disabled:var(--telekom-color-text-and-icon-disabled);--background-ghost-hover:var(--telekom-color-ui-state-fill-hovered);--background-ghost-active:var(--telekom-color-ui-state-fill-pressed);display:inline-block}.button{box-sizing:border-box;display:inline-flex;align-items:center;position:relative;border:0;outline:none;cursor:pointer;user-select:none;font-family:inherit;word-spacing:inherit;letter-spacing:inherit;justify-content:center;text-decoration:none;font-weight:var(--font-weight);font-size:var(--font-size);line-height:var(--line-height);min-height:var(--min-height);min-width:var(--min-width);width:var(--width);padding-left:var(--spacing-x-left);padding-right:var(--spacing-x-right);vertical-align:var(--vertical-align);transition:var(--transition)}.button.button--size-small{font-size:var(--font-size-small);line-height:var(--line-height-small);min-height:var(--min-height-small);padding-left:var(--spacing-x-left-small);padding-right:var(--spacing-x-right-small)}.button:not(.button--disabled):focus{outline:var(--telekom-line-weight-highlight) solid var(--color-focus);outline-offset:var(--telekom-spacing-composition-space-01)}.button.button--icon-before:not(.button--icon-only) ::slotted(*){margin-right:var(--spacing-icon-x);margin-left:calc(var(--spacing-icon-x-small) * -1);margin-top:var(--spacing-icon-x);margin-bottom:var(--spacing-icon-x)}.button.button--icon-before:not(.button--icon-only).button--size-small ::slotted(*){margin-right:var(--spacing-icon-x-small);margin-left:calc(var(--spacing-icon-x) * -0.5)}.button.button--icon-after:not(.button--icon-only) ::slotted(*){margin-left:var(--spacing-icon-x);margin-right:calc(var(--spacing-icon-x-small) * -1);margin-top:var(--spacing-icon-x);margin-bottom:var(--spacing-icon-x)}.button.button--icon-after:not(.button--icon-only).button--size-small ::slotted(*){margin-left:var(--spacing-icon-x-small);margin-right:calc(var(--spacing-icon-x) * -0.5)}.button:after{top:0;left:0;width:100%;border:var(--telekom-spacing-composition-space-01) solid transparent;height:100%;content:'';display:block;position:absolute;box-sizing:border-box;pointer-events:none;border-radius:var(--radius)}.button--icon-only{padding-left:var(--spacing-x-icon-only);padding-right:var(--spacing-x-icon-only)}.button--icon-only.button--variant-secondary{padding-left:calc(var(--spacing-x-icon-only) - 1px);padding-right:calc(var(--spacing-x-icon-only) - 1px)}.button--icon-only.button--size-small{padding-left:var(--spacing-x-icon-only-small);padding-right:var(--spacing-x-icon-only-small);min-width:32px}.button--icon-only.button--size-small.button--variant-secondary{padding-left:calc(var(--spacing-x-icon-only-small) - 1px);padding-right:calc(var(--spacing-x-icon-only-small) - 1px)}.button--disabled{cursor:not-allowed}.button--variant-primary{text-align:center;border-radius:var(--radius);background:var(--background-primary);color:var(--color-primary)}.button--variant-primary:not(.button--disabled):hover{background:var(--background-primary-hover)}.button--variant-primary:not(.button--disabled):active{background:var(--background-primary-active)}.button--disabled.button--variant-primary{background:var(--background-primary-disabled);color:var(--color-primary-disabled)}.button--variant-secondary{background:var(--background-secondary);text-align:center;border-radius:var(--radius-secondary);border:var(--border-width-secondary) solid currentColor;color:var(--color-secondary);background-color:var(--background-secondary);border-color:var(--border-secondary)}.button--variant-secondary:not(.button--disabled):hover{color:var(--color-secondary-hover);background-color:var(--background-secondary-hover);border-color:var(--border-secondary-hover)}.button--variant-secondary:not(.button--disabled):active{color:var(--color-secondary-active);background-color:var(--background-secondary-active);border-color:var(--border-secondary-active)}.button--disabled.button--variant-secondary{color:var(--color-secondary-disabled);background-color:var(--background-secondary-disabled)}.button--variant-ghost{background:transparent;text-align:center;border-radius:var(--radius-ghost);border:var(--border-width-ghost) solid transparent;color:var(--color-ghost);padding-left:var(--spacing-x-ghost);padding-right:var(--spacing-x-ghost)}.button--variant-ghost:not(.button--disabled):hover{color:var(--color-ghost-hover);background-color:var(--background-ghost-hover)}.button--variant-ghost:not(.button--disabled):active{color:var(--color-ghost-active);background-color:var(--background-ghost-active)}.button--disabled.button--variant-ghost{color:var(--color-ghost-disabled)}.button--variant-secondary-white{background:var(--background-secondary);text-align:center;border-radius:var(--radius-secondary);border:var(--border-width-secondary) solid currentColor;color:var(--color-secondary-white);background-color:var(--background-secondary);border-color:var(--border-secondary-white)}.button--variant-secondary-white:not(.button--disabled):hover{background-color:var(--background-secondary-white-hover)}.button--variant-secondary-white:not(.button--disabled):active{background-color:var(--background-secondary-white-active)}.button--disabled.button--variant-secondary-white{opacity:var(--secondary-white-opacity)}";var isButtonOrLink=function isButtonOrLink(el){if("BUTTON"===el.tagName.toUpperCase()||"A"===el.tagName.toUpperCase()||"button"===el.getAttribute("role"))return el},MenuFlyout=function(){function MenuFlyout(hostRef){var _this4=this;_classCallCheck(this,MenuFlyout),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.i)(this,hostRef),this.closeOnSelect=!0,this.direction="bottom-right",this.lists=new Set,this.closeAll=function(){_this4.lists.forEach(function(){var _ref=_asyncToGenerator(regeneratorRuntime.mark((function _callee2(list){return regeneratorRuntime.wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:return _context2.next=2,list.close();case 2:list.active=!1;case 3:case"end":return _context2.stop()}}),_callee2)})));return function(_x){return _ref.apply(this,arguments)}}())},this.toggle=function(){var list=_this4.getListElement();list.opened?_this4.closeAll():(null!=_this4.direction&&(list.direction=_this4.direction),list.trigger=function(){return _this4.trigger},list.open())}}var _handleScaleOpen;return _createClass(MenuFlyout,[{key:"handleScaleOpen",value:(_handleScaleOpen=_asyncToGenerator(regeneratorRuntime.mark((function _callee3(_ref2){var detail,rootList,list;return regeneratorRuntime.wrap((function _callee3$(_context3){for(;;)switch(_context3.prev=_context3.next){case 0:if(detail=_ref2.detail,rootList=this.getListElement(),!this.activeList||!this.activeList.active||this.activeList===rootList||this.activeList===detail.list){_context3.next=10;break}list=this.activeList;case 4:if(null==list||list===rootList){_context3.next=10;break}return _context3.next=7,list.close(!0);case 7:list=list.parentElement.closest('[role="menu"]'),_context3.next=4;break;case 10:this.activeList=detail.list;case 11:case"end":return _context3.stop()}}),_callee3,this)}))),function handleScaleOpen(_x2){return _handleScaleOpen.apply(this,arguments)})},{key:"handleScaleSelect",value:function handleScaleSelect(_ref3){var _this5=this;!1!==_ref3.detail.closeOnSelect&&this.closeOnSelect&&window.requestAnimationFrame((function(){_this5.closeAll()}))}},{key:"handleScaleClose",value:function handleScaleClose(_ref4){var detail=_ref4.detail,parent=null!=detail.list?detail.list.parentNode.closest('[role="menu"]'):null;parent&&window.requestAnimationFrame((function(){parent.active=!0,parent.setFocus()}))}},{key:"handleWindowScroll",value:function handleWindowScroll(){this.closeAll()}},{key:"handleOutsideClick",value:function handleOutsideClick(event){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.b)(event,this.hostElement)&&this.closeAll()}},{key:"handleKeydown",value:function handleKeydown(event){if("Tab"===event.key&&!this.hostElement.querySelector("app-navigation-user-menu"))return"SCALE-TELEKOM-NAV-ITEM"===this.trigger.tagName&&this.trigger.firstElementChild.focus(),void this.closeAll()}},{key:"componentDidLoad",value:function componentDidLoad(){var triggerSlot=this.hostElement.querySelector('[slot="trigger"]'),tagName=triggerSlot?triggerSlot.tagName.toUpperCase():"";this.trigger=triggerSlot&&"SCALE-BUTTON"===tagName?triggerSlot.shadowRoot.querySelector("button"):triggerSlot&&"SCALE-NAV-ICON"===tagName?triggerSlot.querySelector("a"):triggerSlot,this.lists=new Set(Array.from(this.hostElement.querySelectorAll('[role="menu"]'))),this.setTriggerAttributes()}},{key:"setTriggerAttributes",value:function setTriggerAttributes(){Array.from(this.hostElement.querySelectorAll('[role="menuitem"]')).filter((function(el){return null!=el.querySelector('[slot="sublist"]')})).concat([isButtonOrLink(this.trigger)]).filter((function(x){return null!=x})).forEach((function(el){el.setAttribute("aria-haspopup","true"),el.setAttribute("aria-expanded","false")}))}},{key:"getListElement",value:function getListElement(){return Array.from(this.hostElement.children).find((function(el){return el.tagName.toUpperCase().startsWith("SCALE-MENU-FLYOUT")}))}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{part:"trigger",onClick:this.toggle},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",{name:"trigger"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",null))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.f)(this)}}]),MenuFlyout}();MenuFlyout.style=":host{--spacing-y-list:0;--spacing-x-list:0}";var ITEM_ROLES=["menuitem","menuitemcheckbox","menuitemradio"],MenuFlyoutList=function(){function MenuFlyoutList(hostRef){var _this6=this;_classCallCheck(this,MenuFlyoutList),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.i)(this,hostRef),this.scaleOpen=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.e)(this,"scale-open",7),this.scaleOpenLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.e)(this,"scaleOpen",7),this.scaleClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.e)(this,"scale-close",7),this.scaleCloseLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.e)(this,"scaleClose",7),this.forceRender=0,this.opened=!1,this.direction="bottom-right",this.active=!1,this.closeOnSelect=!0,this.brandHeaderDropdown=!1,this.canScrollUp=!1,this.canScrollDown=!1,this.flipHorizontal=!1,this.flipVertical=!1,this.needsCheckPlacement=!0,this.handleScroll=function(){_this6.updateScrollIndicators()},this.handleWheel=function(event){_this6.stopWheelPropagation(event)}}var _setFocus2,_close,_open;return _createClass(MenuFlyoutList,[{key:"componentDidRender",value:function componentDidRender(){this.opened&&this.needsCheckPlacement&&(this.setSize(),this.checkPlacement())}},{key:"open",value:(_open=_asyncToGenerator(regeneratorRuntime.mark((function _callee4(){return regeneratorRuntime.wrap((function _callee4$(_context4){for(;;)switch(_context4.prev=_context4.next){case 0:this.opened=!0,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.d)(this,"scaleOpen",{list:this.hostElement});case 2:case"end":return _context4.stop()}}),_callee4,this)}))),function open(){return _open.apply(this,arguments)})},{key:"close",value:(_close=_asyncToGenerator(regeneratorRuntime.mark((function _callee5(){var silent,_args5=arguments;return regeneratorRuntime.wrap((function _callee5$(_context5){for(;;)switch(_context5.prev=_context5.next){case 0:silent=_args5.length>0&&void 0!==_args5[0]&&_args5[0],this.active&&!0!==silent&&Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.d)(this,"scaleClose",{list:this.hostElement}),this.opened=!1;case 3:case"end":return _context5.stop()}}),_callee5,this)}))),function close(){return _close.apply(this,arguments)})},{key:"setFocus",value:(_setFocus2=_asyncToGenerator(regeneratorRuntime.mark((function _callee6(){return regeneratorRuntime.wrap((function _callee6$(_context6){for(;;)switch(_context6.prev=_context6.next){case 0:null!=this.focusedItemIndex?this.focusItem():this.setInitialItemsFocus();case 1:case"end":return _context6.stop()}}),_callee6,this)}))),function setFocus(){return _setFocus2.apply(this,arguments)})},{key:"handleResize",value:function handleResize(){this.close()}},{key:"handleKeydown",value:function handleKeydown(event){if(this.active)if(this.hostElement.querySelector("app-navigation-user-menu")||event.preventDefault(),"ArrowDown"!==event.key)if("ArrowUp"!==event.key)if("ArrowLeft"!==event.key&&"Escape"!==event.key){if(" "===event.key||"Enter"===event.key||"ArrowRight"===event.key){var item=this.items[this.focusedItemIndex];null!=item&&item.triggerEvent(event,this.closeOnSelect)}}else this.close();else this.shiftItemsFocus(-1);else this.shiftItemsFocus()}},{key:"handleClick",value:function handleClick(event){var roleSelector=ITEM_ROLES.map((function(role){return'[role="'+role+'"]'})).join(","),item=event.target.closest(roleSelector);null!=item&&(event.stopImmediatePropagation(),item.triggerEvent(event,this.closeOnSelect))}},{key:"handleScaleSelect",value:function handleScaleSelect(_ref5){var detail=_ref5.detail;if(this.active&&this.opened){var index=this.items.findIndex((function(x){return x===detail.item}));null!=index&&(this.focusedItemIndex=index,this.focusItem())}}},{key:"handleScaleOpen",value:function handleScaleOpen(_ref6){_ref6.detail.list!==this.hostElement&&(this.active=!1)}},{key:"openedChanged",value:function openedChanged(){this.opened||(this.active=!1,this.focusedItemIndex=null,this.needsCheckPlacement=!0,this.flipHorizontal=!1,this.flipVertical=!1,this.hostElement.style.marginLeft="",this.hostElement.style.marginTop="",this.hostElement.style.marginRight="",this.hostElement.style.marginBottom="","SCALE-TELEKOM-NAV-ITEM"===this.trigger().tagName&&(this.trigger().style.color="var(--telekom-color-text-and-icon-standard)")),this.opened&&(this.active=!0,this.setFocus(),this.setWindowSize(),this.setPosition(),this.padForNonOverlayScrollbars(),this.updateScrollIndicators()),this.updateTriggerAttributes()}},{key:"setInitialItemsFocus",value:function setInitialItemsFocus(){this.items=this.getListItems(),this.focusedItemIndex=-1,this.items.length>0&&this.shiftItemsFocus()}},{key:"shiftItemsFocus",value:function shiftItemsFocus(){var direction=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,nextIndex=this.focusedItemIndex+direction;nextIndex===this.items.length?nextIndex=0:nextIndex<0&&(nextIndex=this.items.length-1),this.focusedItemIndex=nextIndex,this.focusItem()}},{key:"focusItem",value:function focusItem(){var _this7=this;window.requestAnimationFrame((function(){try{_this7.items[_this7.focusedItemIndex].focus()}catch(err){}}))}},{key:"updateTriggerAttributes",value:function updateTriggerAttributes(){var trigger=this.trigger();trigger&&"true"===trigger.getAttribute("aria-haspopup")&&trigger.setAttribute("aria-expanded",String(this.opened))}},{key:"setWindowSize",value:function setWindowSize(){this.windowWidth=window.innerWidth,this.windowHeight=window.innerHeight}},{key:"setPosition",value:function setPosition(){var _this$triggerRect=this.triggerRect,top=_this$triggerRect.top,left=_this$triggerRect.left;this.hostElement.style.left=this.brandHeaderDropdown?left-4+"px":left+"px","SCALE-TELEKOM-NAV-ITEM"===this.trigger().tagName?(this.hostElement.style.top=top-12+"px",this.hostElement.style.left=left-24+"px",this.trigger().style.color="var(--telekom-color-text-and-icon-primary-standard)"):this.hostElement.style.top=top+"px"}},{key:"setSize",value:function setSize(){var _this$triggerRect2=this.triggerRect,width=_this$triggerRect2.width,height=_this$triggerRect2.height;this.hostElement.style.height=height+"px",this.hostElement.style.width=width+"px",this.brandHeaderDropdown&&(this.base.style.width="240px")}},{key:"checkPlacement",value:function checkPlacement(){this.needsCheckPlacement=!1;var isOutOfBounds=!1,rect=this.base.getBoundingClientRect();rect.left<10&&(isOutOfBounds=!0,this.direction.includes("left")&&(this.flipHorizontal=!0)),rect.right>this.windowWidth-10&&(isOutOfBounds=!0,this.direction.includes("right")&&(this.flipHorizontal=!0)),rect.top<10&&(isOutOfBounds=!0,this.direction.includes("top")&&(this.flipVertical=!0)),rect.bottom>this.windowHeight-10&&(isOutOfBounds=!0,this.direction.includes("bottom")&&(this.flipVertical=!0)),isOutOfBounds&&this.furtherAdjustPlacement()}},{key:"furtherAdjustPlacement",value:function furtherAdjustPlacement(){var _this8=this;this.base.className=this.getCssClassMap(),window.getComputedStyle(this.base);var rect=this.base.getBoundingClientRect(),left=0,top=0;rect.left<10?left=10-rect.left:rect.right>this.windowWidth-10&&(left=this.windowWidth-10-rect.right),rect.top<10?top=10-rect.top:rect.bottom>this.windowHeight-10&&(top=this.windowHeight-10-rect.bottom),this.hostElement.style.marginLeft=left+"px",this.hostElement.style.marginTop=top+"px",this.hostElement.style.marginRight=-left+"px",this.hostElement.style.marginBottom=-top+"px",setTimeout((function(){return _this8.forceRender++}))}},{key:"padForNonOverlayScrollbars",value:function padForNonOverlayScrollbars(){this.base.style.paddingRight="0px";var scrollbarWidth=this.base.offsetWidth-this.base.clientWidth;this.base.style.paddingRight=scrollbarWidth+"px"}},{key:"updateScrollIndicators",value:function updateScrollIndicators(){this.canScrollDown=!1,this.canScrollUp=!1;var diff=this.list.scrollHeight-this.list.clientHeight;diff&&(this.list.scrollTop>0&&(this.canScrollUp=!0),this.list.scrollTop<diff&&(this.canScrollDown=!0)),this.forceRender++}},{key:"stopWheelPropagation",value:function stopWheelPropagation(event){event.stopPropagation(),this.canScrollDown||this.canScrollUp||event.preventDefault(),event.deltaY>0&&!this.canScrollDown&&event.preventDefault(),event.deltaY<0&&!this.canScrollUp&&event.preventDefault()}},{key:"getListItems",value:function getListItems(){return Array.from(this.hostElement.children).filter((function(el){return ITEM_ROLES.includes(el.getAttribute("role"))}))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__.a)("menu-flyout-list","menu-flyout-list--direction-"+this.direction,this.opened&&"menu-flyout-list--opened",this.canScrollUp&&"menu-flyout-list--can-scroll-up",this.canScrollDown&&"menu-flyout-list--can-scroll-down",this.flipHorizontal&&"menu-flyout-list--flip-horizontal",this.flipVertical&&"menu-flyout-list--flip-vertical",this.brandHeaderDropdown&&"menu-flyout-list--brand-header-dropdown")}},{key:"render",value:function render(){var _this9=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.c,{role:"menu"},this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{class:this.getCssClassMap(),ref:function ref(el){return _this9.base=el},part:"base",style:{maxHeight:"calc("+this.windowHeight+"px - 20px)"},onWheelCapture:this.handleWheel},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{class:"menu-flyout-list__list",ref:function ref(el){return _this9.list=el},onScroll:this.handleScroll},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",null)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{"aria-hidden":"true",class:"menu-flyout-list__scroll-up-indicator"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{"aria-hidden":"true",class:"menu-flyout-list__scroll-down-indicator"})))}},{key:"triggerRect",get:function get(){return this.trigger().getBoundingClientRect()}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.f)(this)}}],[{key:"watchers",get:function get(){return{opened:["openedChanged"]}}}]),MenuFlyoutList}();MenuFlyoutList.style=":host{box-sizing:content-box;position:fixed;z-index:100;pointer-events:none}.menu-flyout-list{display:none;position:absolute;pointer-events:initial;z-index:var(--scl-z-index-20);background:var(--telekom-color-background-surface);border-radius:var(--telekom-radius-standard);box-shadow:var(--telekom-shadow-overlay);overflow-y:hidden;margin-top:var(--spacing-y-list, 0);margin-bottom:var(--spacing-y-list, 0);margin-left:var(--spacing-x-list, 0);margin-right:var(--spacing-x-list, 0)}.menu-flyout-list::after{content:'';display:block;position:absolute;width:calc(100% - 2px);height:calc(100% - 2px);inset:0;border-radius:var(--telekom-radius-standard);border:1px solid transparent;pointer-events:none}.menu-flyout-list--opened{display:flex}.menu-flyout-list__list{padding:20px 0;overflow-y:auto;overflow-y:overlay;overscroll-behavior:contain;width:100%}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-bottom-left,.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-right,.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-left,.menu-flyout-list--direction-bottom-right{top:calc(100% + var(--telekom-spacing-composition-space-03));left:0;right:auto;bottom:auto}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-bottom-right,.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-left,.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-right,.menu-flyout-list--direction-bottom-left{top:calc(100% + var(--telekom-spacing-composition-space-03));right:0;left:auto;bottom:auto}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-top-left,.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-right,.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-left,.menu-flyout-list--direction-top-right{bottom:calc(100% + var(--telekom-spacing-composition-space-03));left:0;right:auto;top:auto}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-top-right,.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-left,.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-right,.menu-flyout-list--direction-top-left{bottom:calc(100% + var(--telekom-spacing-composition-space-03));right:0;left:auto;top:auto}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-left,.menu-flyout-list--direction-right{left:calc(100% - var(--telekom-spacing-composition-space-03));top:-20px;right:auto;bottom:auto}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-right,.menu-flyout-list--direction-left{right:calc(100% - var(--telekom-spacing-composition-space-03));top:-20px;left:auto;bottom:auto}.menu-flyout-list__scroll-up-indicator,.menu-flyout-list__scroll-down-indicator{position:absolute;width:0;border:5px solid transparent;pointer-events:none;opacity:0;left:50%}.menu-flyout-list__scroll-up-indicator{top:var(--telekom-spacing-composition-space-04);border-bottom:5px solid var(--telekom-color-ui-faint);border-top:0}.menu-flyout-list__scroll-down-indicator{bottom:var(--telekom-spacing-composition-space-04);border-top:5px solid var(--telekom-color-ui-faint);border-bottom:0}.menu-flyout-list--can-scroll-up .menu-flyout-list__scroll-up-indicator{opacity:1}.menu-flyout-list--can-scroll-down .menu-flyout-list__scroll-down-indicator{opacity:1}.menu-flyout-list--brand-header-dropdown ::slotted(scale-menu-flyout-item){--_min-width-moz:0;--_min-width:0}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
-//# sourceMappingURL=30.dd39afef.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 31.8a31389e.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-button_3.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_button",(function(){return Button})),__webpack_require__.d(__webpack_exports__,"scale_menu_flyout",(function(){return MenuFlyout})),__webpack_require__.d(__webpack_exports__,"scale_menu_flyout_list",(function(){return MenuFlyoutList}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.trim.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.set.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.starts-with.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find-index.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}var buttonIconSizeMap={small:16,large:20},Button=function(){function Button(hostRef){var _this=this;_classCallCheck(this,Button),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.i)(this,hostRef),this.size="large",this.variant="primary",this.disabled=!1,this.iconOnly=!1,this.iconPosition="before",this.target="_self",this.handleClick=function(ev){if(Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.f)(_this.hostElement)){var parentForm=_this.hostElement.closest("form");if(parentForm){ev.preventDefault();var fakeButton=document.createElement("button");_this.type&&(fakeButton.type=_this.type),fakeButton.style.display="none",parentForm.appendChild(fakeButton),fakeButton.click(),fakeButton.remove()}}}}var _setFocus;return _createClass(Button,[{key:"handleHostClick",value:function handleHostClick(event){!0===this.disabled&&event.stopImmediatePropagation()}},{key:"setFocus",value:(_setFocus=_asyncToGenerator(regeneratorRuntime.mark((function _callee(){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:this.focusableElement.focus();case 1:case"end":return _context.stop()}}),_callee,this)}))),function setFocus(){return _setFocus.apply(this,arguments)})},{key:"componentDidLoad",value:function componentDidLoad(){this.setChildrenIconSize()}},{key:"connectedCallback",value:function connectedCallback(){this.setIconPositionProp(),this.appendEnterKeySubmitFallback()}},{key:"disconnectedCallback",value:function disconnectedCallback(){this.cleanUpEnterKeySubmitFallback()}},{key:"appendEnterKeySubmitFallback",value:function appendEnterKeySubmitFallback(){if(Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.f)(this.hostElement)){var parentForm=this.hostElement.closest("form");if(null==parentForm)return;if(null!=parentForm.querySelector('input[type="submit"]'))return;this.fallbackSubmitInputElement=document.createElement("input"),this.fallbackSubmitInputElement.type="submit",this.fallbackSubmitInputElement.hidden=!0,parentForm.appendChild(this.fallbackSubmitInputElement)}}},{key:"cleanUpEnterKeySubmitFallback",value:function cleanUpEnterKeySubmitFallback(){if(null!=this.fallbackSubmitInputElement)try{this.fallbackSubmitInputElement.remove(),this.fallbackSubmitInputElement=null}catch(err){}}},{key:"setIconPositionProp",value:function setIconPositionProp(){var nodes=Array.from(this.hostElement.childNodes).filter((function(node){return!(3===node.nodeType&&""===node.nodeValue.trim())})),lastNode=nodes.length>1?nodes[nodes.length-1]:null;!this.iconOnly&&lastNode&&Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.g)(lastNode)&&(this.iconPosition="after")}},{key:"setChildrenIconSize",value:function setChildrenIconSize(){var _this2=this;null!=this.size&&null!=buttonIconSizeMap[this.size]&&Array.from(this.hostElement.childNodes).filter(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.g).forEach((function(icon){24===icon.size&&(icon.size=buttonIconSizeMap[_this2.size])}))}},{key:"render",value:function render(){var _this3=this,basePart=Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__.a)("base",this.variant&&"variant-"+this.variant,this.iconOnly&&"icon-only",!this.iconOnly&&this.iconPosition,this.disabled&&"disabled");return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("style",null,this.styles),this.href?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("a",{ref:function ref(el){return _this3.focusableElement=el},class:this.getCssClassMap(),href:this.disabled?null:this.href,download:this.download,target:this.target,rel:"_blank"===this.target?"noopener noreferrer":void 0,part:basePart,tabIndex:this.innerTabindex,role:"link","aria-disabled":this.disabled?"true":null,"aria-label":this.innerAriaLabel},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",null)):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("button",{ref:function ref(el){return _this3.focusableElement=el},class:this.getCssClassMap(),onClick:this.handleClick,disabled:this.disabled,type:this.type,part:basePart,tabIndex:this.innerTabindex,name:this.name,value:this.value,"aria-label":this.innerAriaLabel},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",null)))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__.a)("button",this.size&&"button--size-"+this.size,this.variant&&"button--variant-"+this.variant,this.iconOnly&&"button--icon-only",!this.iconOnly&&this.iconPosition&&"button--icon-"+this.iconPosition,this.disabled&&"button--disabled")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.f)(this)}}]),Button}();Button.style=":host{--width:auto;--spacing-x-right:var(--telekom-spacing-composition-space-07);--spacing-x-left:var(--telekom-spacing-composition-space-07);--spacing-x-icon-only:var(--telekom-spacing-composition-space-05);--min-height:var(--telekom-spacing-composition-space-13);--min-width:var(--telekom-spacing-composition-space-13);--radius:var(--telekom-radius-standard);--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);--color-focus:var(--telekom-color-functional-focus-standard);--font-weight:var(--telekom-typography-font-weight-bold);--font-size:var(--telekom-typography-font-size-body);--line-height:var(--telekom-typography-line-spacing-tight);--spacing-icon-x:var(--telekom-spacing-composition-space-04);--vertical-align:middle;--font-size-small:var(--telekom-typography-font-size-caption);--line-height-small:1.125rem;--min-height-small:var(--telekom-spacing-composition-space-10);--spacing-x-right-small:var(--telekom-spacing-composition-space-06);--spacing-x-left-small:var(--telekom-spacing-composition-space-06);--spacing-x-icon-only-small:var(--telekom-spacing-composition-space-00);--spacing-icon-x-small:var(--telekom-spacing-composition-space-03);--radius-primary:var(--radius);--background-primary:var(--telekom-color-primary-standard);--background-primary-hover:var(--telekom-color-primary-hovered);--background-primary-active:var(--telekom-color-primary-pressed);--background-primary-disabled:var(--telekom-color-ui-disabled);--color-primary:var(--telekom-color-text-and-icon-white-standard);--color-primary-disabled:var(--telekom-color-text-and-icon-disabled);--radius-secondary:var(--radius);--border-width-secondary:var(--telekom-spacing-composition-space-01);--background-secondary:transparent;--color-secondary:var(--telekom-color-text-and-icon-standard);--color-secondary-hover:var(--telekom-color-text-and-icon-standard);--color-secondary-active:var(--telekom-color-text-and-icon-standard);--color-secondary-disabled:var(--telekom-color-text-and-icon-disabled);--background-secondary:var(--telekom-color-ui-state-fill-standard);--background-secondary-hover:var(--telekom-color-ui-state-fill-hovered);--background-secondary-active:var(--telekom-color-ui-state-fill-pressed);--background-secondary-disabled:none;--border-secondary:var(--telekom-color-ui-border-standard);--border-secondary-hover:var(--telekom-color-ui-border-hovered);--border-secondary-active:var(--telekom-color-ui-border-pressed);--border-secondary-focus:var(--telekom-color-functional-focus-standard);--border-secondary-white:var(--telekom-color-ui-white);--color-secondary-white:var(--telekom-color-ui-white);--background-secondary-white-hover:var(\n    --telekom-color-ui-state-fill-hovered-inverted\n  );--background-secondary-white-active:var(\n    --telekom-color-ui-state-fill-pressed-inverted\n  );--secondary-white-opacity:0.5;--radius-ghost:var(--radius);--border-width-ghost:var(--telekom-spacing-composition-space-01);--spacing-x-ghost:var(--telekom-spacing-composition-space-04);--color-ghost:var(--telekom-color-text-and-icon-link-standard);--color-ghost-hover:var(--telekom-color-text-and-icon-link-hovered);--color-ghost-active:var(--telekom-color-text-and-icon-link-active);--color-ghost-disabled:var(--telekom-color-text-and-icon-disabled);--background-ghost-hover:var(--telekom-color-ui-state-fill-hovered);--background-ghost-active:var(--telekom-color-ui-state-fill-pressed);display:inline-block}.button{box-sizing:border-box;display:inline-flex;align-items:center;position:relative;border:0;outline:none;cursor:pointer;user-select:none;font-family:inherit;word-spacing:inherit;letter-spacing:inherit;justify-content:center;text-decoration:none;font-weight:var(--font-weight);font-size:var(--font-size);line-height:var(--line-height);min-height:var(--min-height);min-width:var(--min-width);width:var(--width);padding-left:var(--spacing-x-left);padding-right:var(--spacing-x-right);vertical-align:var(--vertical-align);transition:var(--transition)}.button.button--size-small{font-size:var(--font-size-small);line-height:var(--line-height-small);min-height:var(--min-height-small);padding-left:var(--spacing-x-left-small);padding-right:var(--spacing-x-right-small)}.button:not(.button--disabled):focus{outline:var(--telekom-line-weight-highlight) solid var(--color-focus);outline-offset:var(--telekom-spacing-composition-space-01)}.button.button--icon-before:not(.button--icon-only) ::slotted(*){margin-right:var(--spacing-icon-x);margin-left:calc(var(--spacing-icon-x-small) * -1);margin-top:var(--spacing-icon-x);margin-bottom:var(--spacing-icon-x)}.button.button--icon-before:not(.button--icon-only).button--size-small ::slotted(*){margin-right:var(--spacing-icon-x-small);margin-left:calc(var(--spacing-icon-x) * -0.5)}.button.button--icon-after:not(.button--icon-only) ::slotted(*){margin-left:var(--spacing-icon-x);margin-right:calc(var(--spacing-icon-x-small) * -1);margin-top:var(--spacing-icon-x);margin-bottom:var(--spacing-icon-x)}.button.button--icon-after:not(.button--icon-only).button--size-small ::slotted(*){margin-left:var(--spacing-icon-x-small);margin-right:calc(var(--spacing-icon-x) * -0.5)}.button:after{top:0;left:0;width:100%;border:var(--telekom-spacing-composition-space-01) solid transparent;height:100%;content:'';display:block;position:absolute;box-sizing:border-box;pointer-events:none;border-radius:var(--radius)}.button--icon-only{padding-left:var(--spacing-x-icon-only);padding-right:var(--spacing-x-icon-only)}.button--icon-only.button--variant-secondary{padding-left:calc(var(--spacing-x-icon-only) - 1px);padding-right:calc(var(--spacing-x-icon-only) - 1px)}.button--icon-only.button--size-small{padding-left:var(--spacing-x-icon-only-small);padding-right:var(--spacing-x-icon-only-small);min-width:32px}.button--icon-only.button--size-small.button--variant-secondary{padding-left:calc(var(--spacing-x-icon-only-small) - 1px);padding-right:calc(var(--spacing-x-icon-only-small) - 1px)}.button--disabled{cursor:not-allowed}.button--variant-primary{text-align:center;border-radius:var(--radius);background:var(--background-primary);color:var(--color-primary)}.button--variant-primary:not(.button--disabled):hover{background:var(--background-primary-hover)}.button--variant-primary:not(.button--disabled):active{background:var(--background-primary-active)}.button--disabled.button--variant-primary{background:var(--background-primary-disabled);color:var(--color-primary-disabled)}.button--variant-secondary{background:var(--background-secondary);text-align:center;border-radius:var(--radius-secondary);border:var(--border-width-secondary) solid currentColor;color:var(--color-secondary);background-color:var(--background-secondary);border-color:var(--border-secondary)}.button--variant-secondary:not(.button--disabled):hover{color:var(--color-secondary-hover);background-color:var(--background-secondary-hover);border-color:var(--border-secondary-hover)}.button--variant-secondary:not(.button--disabled):active{color:var(--color-secondary-active);background-color:var(--background-secondary-active);border-color:var(--border-secondary-active)}.button--disabled.button--variant-secondary{color:var(--color-secondary-disabled);background-color:var(--background-secondary-disabled)}.button--variant-ghost{background:transparent;text-align:center;border-radius:var(--radius-ghost);border:var(--border-width-ghost) solid transparent;color:var(--color-ghost);padding-left:var(--spacing-x-ghost);padding-right:var(--spacing-x-ghost)}.button--variant-ghost:not(.button--disabled):hover{color:var(--color-ghost-hover);background-color:var(--background-ghost-hover)}.button--variant-ghost:not(.button--disabled):active{color:var(--color-ghost-active);background-color:var(--background-ghost-active)}.button--disabled.button--variant-ghost{color:var(--color-ghost-disabled)}.button--variant-secondary-white{background:var(--background-secondary);text-align:center;border-radius:var(--radius-secondary);border:var(--border-width-secondary) solid currentColor;color:var(--color-secondary-white);background-color:var(--background-secondary);border-color:var(--border-secondary-white)}.button--variant-secondary-white:not(.button--disabled):hover{background-color:var(--background-secondary-white-hover)}.button--variant-secondary-white:not(.button--disabled):active{background-color:var(--background-secondary-white-active)}.button--disabled.button--variant-secondary-white{opacity:var(--secondary-white-opacity)}";var isButtonOrLink=function isButtonOrLink(el){if("BUTTON"===el.tagName.toUpperCase()||"A"===el.tagName.toUpperCase()||"button"===el.getAttribute("role"))return el},MenuFlyout=function(){function MenuFlyout(hostRef){var _this4=this;_classCallCheck(this,MenuFlyout),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.i)(this,hostRef),this.closeOnSelect=!0,this.direction="bottom-right",this.lists=new Set,this.closeAll=function(){_this4.lists.forEach(function(){var _ref=_asyncToGenerator(regeneratorRuntime.mark((function _callee2(list){return regeneratorRuntime.wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:return _context2.next=2,list.close();case 2:list.active=!1;case 3:case"end":return _context2.stop()}}),_callee2)})));return function(_x){return _ref.apply(this,arguments)}}())},this.toggle=function(){var list=_this4.getListElement();list.opened?_this4.closeAll():(null!=_this4.direction&&(list.direction=_this4.direction),list.trigger=function(){return _this4.trigger},list.open())}}var _handleScaleOpen;return _createClass(MenuFlyout,[{key:"handleScaleOpen",value:(_handleScaleOpen=_asyncToGenerator(regeneratorRuntime.mark((function _callee3(_ref2){var detail,rootList,list;return regeneratorRuntime.wrap((function _callee3$(_context3){for(;;)switch(_context3.prev=_context3.next){case 0:if(detail=_ref2.detail,rootList=this.getListElement(),!this.activeList||!this.activeList.active||this.activeList===rootList||this.activeList===detail.list){_context3.next=10;break}list=this.activeList;case 4:if(null==list||list===rootList){_context3.next=10;break}return _context3.next=7,list.close(!0);case 7:list=list.parentElement.closest('[role="menu"]'),_context3.next=4;break;case 10:this.activeList=detail.list;case 11:case"end":return _context3.stop()}}),_callee3,this)}))),function handleScaleOpen(_x2){return _handleScaleOpen.apply(this,arguments)})},{key:"handleScaleSelect",value:function handleScaleSelect(_ref3){var _this5=this;!1!==_ref3.detail.closeOnSelect&&this.closeOnSelect&&window.requestAnimationFrame((function(){_this5.closeAll()}))}},{key:"handleScaleClose",value:function handleScaleClose(_ref4){var detail=_ref4.detail,parent=null!=detail.list?detail.list.parentNode.closest('[role="menu"]'):null;parent&&window.requestAnimationFrame((function(){parent.active=!0,parent.setFocus()}))}},{key:"handleWindowScroll",value:function handleWindowScroll(){this.closeAll()}},{key:"handleOutsideClick",value:function handleOutsideClick(event){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.b)(event,this.hostElement)&&this.closeAll()}},{key:"handleKeydown",value:function handleKeydown(event){if("Tab"===event.key&&!this.hostElement.querySelector("app-navigation-user-menu"))return"SCALE-TELEKOM-NAV-ITEM"===this.trigger.tagName&&this.trigger.firstElementChild.focus(),void this.closeAll()}},{key:"componentDidLoad",value:function componentDidLoad(){var triggerSlot=this.hostElement.querySelector('[slot="trigger"]'),tagName=triggerSlot?triggerSlot.tagName.toUpperCase():"";this.trigger=triggerSlot&&"SCALE-BUTTON"===tagName?triggerSlot.shadowRoot.querySelector("button"):triggerSlot&&"SCALE-NAV-ICON"===tagName?triggerSlot.querySelector("a"):triggerSlot,this.lists=new Set(Array.from(this.hostElement.querySelectorAll('[role="menu"]'))),this.setTriggerAttributes()}},{key:"setTriggerAttributes",value:function setTriggerAttributes(){Array.from(this.hostElement.querySelectorAll('[role="menuitem"]')).filter((function(el){return null!=el.querySelector('[slot="sublist"]')})).concat([isButtonOrLink(this.trigger)]).filter((function(x){return null!=x})).forEach((function(el){el.setAttribute("aria-haspopup","true"),el.setAttribute("aria-expanded","false")}))}},{key:"getListElement",value:function getListElement(){return Array.from(this.hostElement.children).find((function(el){return el.tagName.toUpperCase().startsWith("SCALE-MENU-FLYOUT")}))}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{part:"trigger",onClick:this.toggle},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",{name:"trigger"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",null))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.f)(this)}}]),MenuFlyout}();MenuFlyout.style=":host{--spacing-y-list:0;--spacing-x-list:0}";var ITEM_ROLES=["menuitem","menuitemcheckbox","menuitemradio"],MenuFlyoutList=function(){function MenuFlyoutList(hostRef){var _this6=this;_classCallCheck(this,MenuFlyoutList),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.i)(this,hostRef),this.scaleOpen=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.e)(this,"scale-open",7),this.scaleOpenLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.e)(this,"scaleOpen",7),this.scaleClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.e)(this,"scale-close",7),this.scaleCloseLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.e)(this,"scaleClose",7),this.forceRender=0,this.opened=!1,this.direction="bottom-right",this.active=!1,this.closeOnSelect=!0,this.brandHeaderDropdown=!1,this.canScrollUp=!1,this.canScrollDown=!1,this.flipHorizontal=!1,this.flipVertical=!1,this.needsCheckPlacement=!0,this.handleScroll=function(){_this6.updateScrollIndicators()},this.handleWheel=function(event){_this6.stopWheelPropagation(event)}}var _setFocus2,_close,_open;return _createClass(MenuFlyoutList,[{key:"componentDidRender",value:function componentDidRender(){this.opened&&this.needsCheckPlacement&&(this.setSize(),this.checkPlacement())}},{key:"open",value:(_open=_asyncToGenerator(regeneratorRuntime.mark((function _callee4(){return regeneratorRuntime.wrap((function _callee4$(_context4){for(;;)switch(_context4.prev=_context4.next){case 0:this.opened=!0,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.d)(this,"scaleOpen",{list:this.hostElement});case 2:case"end":return _context4.stop()}}),_callee4,this)}))),function open(){return _open.apply(this,arguments)})},{key:"close",value:(_close=_asyncToGenerator(regeneratorRuntime.mark((function _callee5(){var silent,_args5=arguments;return regeneratorRuntime.wrap((function _callee5$(_context5){for(;;)switch(_context5.prev=_context5.next){case 0:silent=_args5.length>0&&void 0!==_args5[0]&&_args5[0],this.active&&!0!==silent&&Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_24__.d)(this,"scaleClose",{list:this.hostElement}),this.opened=!1;case 3:case"end":return _context5.stop()}}),_callee5,this)}))),function close(){return _close.apply(this,arguments)})},{key:"setFocus",value:(_setFocus2=_asyncToGenerator(regeneratorRuntime.mark((function _callee6(){return regeneratorRuntime.wrap((function _callee6$(_context6){for(;;)switch(_context6.prev=_context6.next){case 0:null!=this.focusedItemIndex?this.focusItem():this.setInitialItemsFocus();case 1:case"end":return _context6.stop()}}),_callee6,this)}))),function setFocus(){return _setFocus2.apply(this,arguments)})},{key:"handleResize",value:function handleResize(){this.close()}},{key:"handleKeydown",value:function handleKeydown(event){if(this.active)if(this.hostElement.querySelector("app-navigation-user-menu")||event.preventDefault(),"ArrowDown"!==event.key)if("ArrowUp"!==event.key)if("ArrowLeft"!==event.key&&"Escape"!==event.key){if(" "===event.key||"Enter"===event.key||"ArrowRight"===event.key){var item=this.items[this.focusedItemIndex];null!=item&&item.triggerEvent(event,this.closeOnSelect)}}else this.close();else this.shiftItemsFocus(-1);else this.shiftItemsFocus()}},{key:"handleClick",value:function handleClick(event){var roleSelector=ITEM_ROLES.map((function(role){return'[role="'+role+'"]'})).join(","),item=event.target.closest(roleSelector);null!=item&&(event.stopImmediatePropagation(),item.triggerEvent(event,this.closeOnSelect))}},{key:"handleScaleSelect",value:function handleScaleSelect(_ref5){var detail=_ref5.detail;if(this.active&&this.opened){var index=this.items.findIndex((function(x){return x===detail.item}));null!=index&&(this.focusedItemIndex=index,this.focusItem())}}},{key:"handleScaleOpen",value:function handleScaleOpen(_ref6){_ref6.detail.list!==this.hostElement&&(this.active=!1)}},{key:"openedChanged",value:function openedChanged(){this.opened||(this.active=!1,this.focusedItemIndex=null,this.needsCheckPlacement=!0,this.flipHorizontal=!1,this.flipVertical=!1,this.hostElement.style.marginLeft="",this.hostElement.style.marginTop="",this.hostElement.style.marginRight="",this.hostElement.style.marginBottom="","SCALE-TELEKOM-NAV-ITEM"===this.trigger().tagName&&(this.trigger().style.color="var(--telekom-color-text-and-icon-standard)")),this.opened&&(this.active=!0,this.setFocus(),this.setWindowSize(),this.setPosition(),this.padForNonOverlayScrollbars(),this.updateScrollIndicators()),this.updateTriggerAttributes()}},{key:"setInitialItemsFocus",value:function setInitialItemsFocus(){this.items=this.getListItems(),this.focusedItemIndex=-1,this.items.length>0&&this.shiftItemsFocus()}},{key:"shiftItemsFocus",value:function shiftItemsFocus(){var direction=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,nextIndex=this.focusedItemIndex+direction;nextIndex===this.items.length?nextIndex=0:nextIndex<0&&(nextIndex=this.items.length-1),this.focusedItemIndex=nextIndex,this.focusItem()}},{key:"focusItem",value:function focusItem(){var _this7=this;window.requestAnimationFrame((function(){try{_this7.items[_this7.focusedItemIndex].focus()}catch(err){}}))}},{key:"updateTriggerAttributes",value:function updateTriggerAttributes(){var trigger=this.trigger();trigger&&"true"===trigger.getAttribute("aria-haspopup")&&trigger.setAttribute("aria-expanded",String(this.opened))}},{key:"setWindowSize",value:function setWindowSize(){this.windowWidth=window.innerWidth,this.windowHeight=window.innerHeight}},{key:"setPosition",value:function setPosition(){var _this$triggerRect=this.triggerRect,top=_this$triggerRect.top,left=_this$triggerRect.left;this.hostElement.style.left=this.brandHeaderDropdown?left-4+"px":left+"px","SCALE-TELEKOM-NAV-ITEM"===this.trigger().tagName?(this.hostElement.style.top=top-12+"px",this.hostElement.style.left=left-24+"px",this.trigger().style.color="var(--telekom-color-text-and-icon-primary-standard)"):this.hostElement.style.top=top+"px"}},{key:"setSize",value:function setSize(){var _this$triggerRect2=this.triggerRect,width=_this$triggerRect2.width,height=_this$triggerRect2.height;this.hostElement.style.height=height+"px",this.hostElement.style.width=width+"px",this.brandHeaderDropdown&&(this.base.style.width="240px")}},{key:"checkPlacement",value:function checkPlacement(){this.needsCheckPlacement=!1;var isOutOfBounds=!1,rect=this.base.getBoundingClientRect();rect.left<10&&(isOutOfBounds=!0,this.direction.includes("left")&&(this.flipHorizontal=!0)),rect.right>this.windowWidth-10&&(isOutOfBounds=!0,this.direction.includes("right")&&(this.flipHorizontal=!0)),rect.top<10&&(isOutOfBounds=!0,this.direction.includes("top")&&(this.flipVertical=!0)),rect.bottom>this.windowHeight-10&&(isOutOfBounds=!0,this.direction.includes("bottom")&&(this.flipVertical=!0)),isOutOfBounds&&this.furtherAdjustPlacement()}},{key:"furtherAdjustPlacement",value:function furtherAdjustPlacement(){var _this8=this;this.base.className=this.getCssClassMap(),window.getComputedStyle(this.base);var rect=this.base.getBoundingClientRect(),left=0,top=0;rect.left<10?left=10-rect.left:rect.right>this.windowWidth-10&&(left=this.windowWidth-10-rect.right),rect.top<10?top=10-rect.top:rect.bottom>this.windowHeight-10&&(top=this.windowHeight-10-rect.bottom),this.hostElement.style.marginLeft=left+"px",this.hostElement.style.marginTop=top+"px",this.hostElement.style.marginRight=-left+"px",this.hostElement.style.marginBottom=-top+"px",setTimeout((function(){return _this8.forceRender++}))}},{key:"padForNonOverlayScrollbars",value:function padForNonOverlayScrollbars(){this.base.style.paddingRight="0px";var scrollbarWidth=this.base.offsetWidth-this.base.clientWidth;this.base.style.paddingRight=scrollbarWidth+"px"}},{key:"updateScrollIndicators",value:function updateScrollIndicators(){this.canScrollDown=!1,this.canScrollUp=!1;var diff=this.list.scrollHeight-this.list.clientHeight;diff&&(this.list.scrollTop>0&&(this.canScrollUp=!0),this.list.scrollTop<diff&&(this.canScrollDown=!0)),this.forceRender++}},{key:"stopWheelPropagation",value:function stopWheelPropagation(event){event.stopPropagation(),this.canScrollDown||this.canScrollUp||event.preventDefault(),event.deltaY>0&&!this.canScrollDown&&event.preventDefault(),event.deltaY<0&&!this.canScrollUp&&event.preventDefault()}},{key:"getListItems",value:function getListItems(){return Array.from(this.hostElement.children).filter((function(el){return ITEM_ROLES.includes(el.getAttribute("role"))}))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__.a)("menu-flyout-list","menu-flyout-list--direction-"+this.direction,this.opened&&"menu-flyout-list--opened",this.canScrollUp&&"menu-flyout-list--can-scroll-up",this.canScrollDown&&"menu-flyout-list--can-scroll-down",this.flipHorizontal&&"menu-flyout-list--flip-horizontal",this.flipVertical&&"menu-flyout-list--flip-vertical",this.brandHeaderDropdown&&"menu-flyout-list--brand-header-dropdown")}},{key:"render",value:function render(){var _this9=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.c,{role:"menu"},this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{class:this.getCssClassMap(),ref:function ref(el){return _this9.base=el},part:"base",style:{maxHeight:"calc("+this.windowHeight+"px - 20px)"},onWheelCapture:this.handleWheel},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{class:"menu-flyout-list__list",ref:function ref(el){return _this9.list=el},onScroll:this.handleScroll},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",null)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{"aria-hidden":"true",class:"menu-flyout-list__scroll-up-indicator"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{"aria-hidden":"true",class:"menu-flyout-list__scroll-down-indicator"})))}},{key:"triggerRect",get:function get(){return this.trigger().getBoundingClientRect()}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.f)(this)}}],[{key:"watchers",get:function get(){return{opened:["openedChanged"]}}}]),MenuFlyoutList}();MenuFlyoutList.style=":host{box-sizing:content-box;position:fixed;z-index:100;pointer-events:none}.menu-flyout-list{display:none;position:absolute;pointer-events:initial;z-index:var(--scl-z-index-20);background:var(--telekom-color-background-surface);border-radius:var(--telekom-radius-standard);box-shadow:var(--telekom-shadow-overlay);overflow-y:hidden;margin-top:var(--spacing-y-list, 0);margin-bottom:var(--spacing-y-list, 0);margin-left:var(--spacing-x-list, 0);margin-right:var(--spacing-x-list, 0)}.menu-flyout-list::after{content:'';display:block;position:absolute;width:calc(100% - 2px);height:calc(100% - 2px);inset:0;border-radius:var(--telekom-radius-standard);border:1px solid transparent;pointer-events:none}.menu-flyout-list--opened{display:flex}.menu-flyout-list__list{padding:20px 0;overflow-y:auto;overflow-y:overlay;overscroll-behavior:contain;width:100%}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-bottom-left,.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-right,.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-left,.menu-flyout-list--direction-bottom-right{top:calc(100% + var(--telekom-spacing-composition-space-03));left:0;right:auto;bottom:auto}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-bottom-right,.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-left,.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-right,.menu-flyout-list--direction-bottom-left{top:calc(100% + var(--telekom-spacing-composition-space-03));right:0;left:auto;bottom:auto}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-top-left,.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-right,.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-left,.menu-flyout-list--direction-top-right{bottom:calc(100% + var(--telekom-spacing-composition-space-03));left:0;right:auto;top:auto}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-top-right,.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-left,.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-right,.menu-flyout-list--direction-top-left{bottom:calc(100% + var(--telekom-spacing-composition-space-03));right:0;left:auto;top:auto}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-left,.menu-flyout-list--direction-right{left:calc(100% - var(--telekom-spacing-composition-space-03));top:-20px;right:auto;bottom:auto}.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-right,.menu-flyout-list--direction-left{right:calc(100% - var(--telekom-spacing-composition-space-03));top:-20px;left:auto;bottom:auto}.menu-flyout-list__scroll-up-indicator,.menu-flyout-list__scroll-down-indicator{position:absolute;width:0;border:5px solid transparent;pointer-events:none;opacity:0;left:50%}.menu-flyout-list__scroll-up-indicator{top:var(--telekom-spacing-composition-space-04);border-bottom:5px solid var(--telekom-color-ui-faint);border-top:0}.menu-flyout-list__scroll-down-indicator{bottom:var(--telekom-spacing-composition-space-04);border-top:5px solid var(--telekom-color-ui-faint);border-bottom:0}.menu-flyout-list--can-scroll-up .menu-flyout-list__scroll-up-indicator{opacity:1}.menu-flyout-list--can-scroll-down .menu-flyout-list__scroll-down-indicator{opacity:1}.menu-flyout-list--brand-header-dropdown ::slotted(scale-menu-flyout-item){--_min-width-moz:0;--_min-width:0}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
+//# sourceMappingURL=31.8a31389e.iframe.bundle.js.map
\ No newline at end of file
diff --git a/30.dd39afef.iframe.bundle.js.LICENSE.txt b/31.8a31389e.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 30.dd39afef.iframe.bundle.js.LICENSE.txt
rename to 31.8a31389e.iframe.bundle.js.LICENSE.txt
diff --git a/31.8a31389e.iframe.bundle.js.map b/31.8a31389e.iframe.bundle.js.map
new file mode 100644
index 0000000000..84107221f1
--- /dev/null
+++ b/31.8a31389e.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"31.8a31389e.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/31.457199ae.iframe.bundle.js b/32.5f1e238f.iframe.bundle.js
similarity index 98%
rename from 31.457199ae.iframe.bundle.js
rename to 32.5f1e238f.iframe.bundle.js
index be4b2acde7..8e35e41ae6 100644
--- a/31.457199ae.iframe.bundle.js
+++ b/32.5f1e238f.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 31.457199ae.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-carousel.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_carousel",(function(){return Carousel}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Carousel=function(){function Carousel(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Carousel),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.i)(this,hostRef),this.vertical=!1,this.slidesArray=[],this.value=0,this.handleSlideChange=function(direction){var val=_this.value;"prev"===direction&&(_this.value=0===val?-100*(_this.slidesArray.length-1):val+100),"next"===direction&&(val===-100*(_this.slidesArray.length-1)?_this.value=0:_this.value=val-100)},this.setActiveSlide=function(index){_this.value=-100*index},this.setTransformValue=function(){return _this.vertical?"translateY("+_this.value+"%)":"translateX("+_this.value+"%)"},this.setActiveCssClass=function(index){return Math.abs(_this.value)/100===index?"carousel__indicator--active":""}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Carousel,[{key:"connectedCallback",value:function connectedCallback(){Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_9__.a)({source:this.hostElement,type:"warn"})}},{key:"componentWillLoad",value:function componentWillLoad(){if(0===this.slidesArray.length)for(var children=this.hostElement.children,childIndex=0;childIndex<children.length;childIndex++)if(""===children[childIndex].slot)for(var slideIndex=0;slideIndex<children[childIndex].children.length;slideIndex++){var element=children[childIndex].children[slideIndex];this.slidesArray.push(element)}}},{key:"render",value:function render(){var _this2=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{class:"carousel__container"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{class:"carousel__arrow carousel__arrow--left",onClick:function onClick(){return _this2.handleSlideChange("prev")}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("slot",{name:"arrow-left"})),this.slidesArray.map((function(element){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{class:"carousel__slide",style:{transform:_this2.setTransformValue()}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{innerHTML:element.outerHTML}))})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{class:"carousel__arrow carousel__arrow--right",onClick:function onClick(){return _this2.handleSlideChange("next")}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("slot",{name:"arrow-right"}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("ul",{class:"carousel__indicators"},Array.from(Array(this.slidesArray.length).keys()).map((function(index){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("li",{key:index,class:"carousel__indicator "+_this2.setActiveCssClass(index),onClick:function onClick(){return _this2.setActiveSlide(index)}})})))))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_8__.a)("carousel",this.vertical&&"carousel--vertical")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.f)(this)}}]),Carousel}();Carousel.style=".carousel{width:400px;height:300px;position:relative}.carousel__container{width:100%;height:100%;margin:0;display:flex;padding:0;overflow:hidden;position:relative;box-sizing:border-box;align-items:center}.carousel__slide{height:100%;position:relative;min-width:100%;transition:all 0.3s ease-in-out}.carousel__arrow{top:50%;color:#fff;width:24px;border:none;cursor:pointer;height:24px;display:flex;outline:none;z-index:99;position:absolute;transform:translateY(-50%);background:rgba(31, 45, 61, 0.11);align-items:center;border-radius:50%;justify-content:center}.carousel__arrow--left{left:12px}.carousel__arrow--right{right:12px}.carousel__indicators{left:50%;bottom:12px;margin:0;display:inline-flex;padding:0;z-index:2;position:absolute;transform:translateX(-50%);list-style:none}.carousel__indicator{width:30px;border:none;cursor:pointer;height:4px;margin:0 6px;display:block;opacity:0.5;outline:none;padding:0;background:#fff;transition:0.3s}.carousel__indicator--active{opacity:1}.carousel--vertical .carousel__container{flex-direction:column}.carousel--vertical .carousel__arrow{display:none}.carousel--vertical .carousel__indicators{top:50%;left:unset;right:12px;bottom:0;display:flex;transform:translateY(-50%);flex-direction:column}.carousel--vertical .carousel__indicator{width:4px;height:30px;margin:6px 0}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
-//# sourceMappingURL=31.457199ae.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 32.5f1e238f.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-carousel.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_carousel",(function(){return Carousel}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Carousel=function(){function Carousel(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Carousel),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.i)(this,hostRef),this.vertical=!1,this.slidesArray=[],this.value=0,this.handleSlideChange=function(direction){var val=_this.value;"prev"===direction&&(_this.value=0===val?-100*(_this.slidesArray.length-1):val+100),"next"===direction&&(val===-100*(_this.slidesArray.length-1)?_this.value=0:_this.value=val-100)},this.setActiveSlide=function(index){_this.value=-100*index},this.setTransformValue=function(){return _this.vertical?"translateY("+_this.value+"%)":"translateX("+_this.value+"%)"},this.setActiveCssClass=function(index){return Math.abs(_this.value)/100===index?"carousel__indicator--active":""}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Carousel,[{key:"connectedCallback",value:function connectedCallback(){Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_9__.a)({source:this.hostElement,type:"warn"})}},{key:"componentWillLoad",value:function componentWillLoad(){if(0===this.slidesArray.length)for(var children=this.hostElement.children,childIndex=0;childIndex<children.length;childIndex++)if(""===children[childIndex].slot)for(var slideIndex=0;slideIndex<children[childIndex].children.length;slideIndex++){var element=children[childIndex].children[slideIndex];this.slidesArray.push(element)}}},{key:"render",value:function render(){var _this2=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{class:"carousel__container"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{class:"carousel__arrow carousel__arrow--left",onClick:function onClick(){return _this2.handleSlideChange("prev")}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("slot",{name:"arrow-left"})),this.slidesArray.map((function(element){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{class:"carousel__slide",style:{transform:_this2.setTransformValue()}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{innerHTML:element.outerHTML}))})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("div",{class:"carousel__arrow carousel__arrow--right",onClick:function onClick(){return _this2.handleSlideChange("next")}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("slot",{name:"arrow-right"}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("ul",{class:"carousel__indicators"},Array.from(Array(this.slidesArray.length).keys()).map((function(index){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.g)("li",{key:index,class:"carousel__indicator "+_this2.setActiveCssClass(index),onClick:function onClick(){return _this2.setActiveSlide(index)}})})))))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_8__.a)("carousel",this.vertical&&"carousel--vertical")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_7__.f)(this)}}]),Carousel}();Carousel.style=".carousel{width:400px;height:300px;position:relative}.carousel__container{width:100%;height:100%;margin:0;display:flex;padding:0;overflow:hidden;position:relative;box-sizing:border-box;align-items:center}.carousel__slide{height:100%;position:relative;min-width:100%;transition:all 0.3s ease-in-out}.carousel__arrow{top:50%;color:#fff;width:24px;border:none;cursor:pointer;height:24px;display:flex;outline:none;z-index:99;position:absolute;transform:translateY(-50%);background:rgba(31, 45, 61, 0.11);align-items:center;border-radius:50%;justify-content:center}.carousel__arrow--left{left:12px}.carousel__arrow--right{right:12px}.carousel__indicators{left:50%;bottom:12px;margin:0;display:inline-flex;padding:0;z-index:2;position:absolute;transform:translateX(-50%);list-style:none}.carousel__indicator{width:30px;border:none;cursor:pointer;height:4px;margin:0 6px;display:block;opacity:0.5;outline:none;padding:0;background:#fff;transition:0.3s}.carousel__indicator--active{opacity:1}.carousel--vertical .carousel__container{flex-direction:column}.carousel--vertical .carousel__arrow{display:none}.carousel--vertical .carousel__indicators{top:50%;left:unset;right:12px;bottom:0;display:flex;transform:translateY(-50%);flex-direction:column}.carousel--vertical .carousel__indicator{width:4px;height:30px;margin:6px 0}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
+//# sourceMappingURL=32.5f1e238f.iframe.bundle.js.map
\ No newline at end of file
diff --git a/35.82777aa1.iframe.bundle.js.LICENSE.txt b/32.5f1e238f.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 35.82777aa1.iframe.bundle.js.LICENSE.txt
rename to 32.5f1e238f.iframe.bundle.js.LICENSE.txt
diff --git a/32.5f1e238f.iframe.bundle.js.map b/32.5f1e238f.iframe.bundle.js.map
new file mode 100644
index 0000000000..34cb203596
--- /dev/null
+++ b/32.5f1e238f.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"32.5f1e238f.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/32.e5672086.iframe.bundle.js b/32.e5672086.iframe.bundle.js
deleted file mode 100644
index ea5a39b65e..0000000000
--- a/32.e5672086.iframe.bundle.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/*! For license information please see 32.e5672086.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-chip.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_chip",(function(){return Chip}));__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Chip=function(){function Chip(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Chip),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.i)(this,hostRef),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.e)(this,"scaleChange",7),this.scaleClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.e)(this,"scale-close",7),this.scaleCloseLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.e)(this,"scaleClose",7),this.variant="standard",this.type="persistent",this.selected=!1,this.disabled=!1,this.dismissText="dismiss",this.handleClose=function(event){event.preventDefault(),event.stopPropagation(),_this.disabled&&"dynamic"!==_this.type||Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_3__.d)(_this,"scaleClose",event)},this.handleClick=function(event){"dynamic"!==_this.type&&(_this.selected=!_this.selected),event.preventDefault(),event.stopPropagation(),_this.disabled&&"dynamic"!==_this.type||Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_3__.d)(_this,"scaleChange",event)}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Chip,[{key:"componentDidRender",value:function componentDidRender(){var iconSlot=this.hostElement.querySelector('[slot="chip-icon"]');null!==iconSlot&&(iconSlot.children[0].getAttribute("size")===String(24)&&iconSlot.children[0].setAttribute("size",String(16)),this.selected?iconSlot.children[0].setAttribute("selected",String(!0)):iconSlot.children[0].setAttribute("selected",String(!1)))}},{key:"disconnectedCallback",value:function disconnectedCallback(){}},{key:"getIcon",value:function getIcon(){return"dynamic"===this.type&&this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("button",{part:"button-dismissable",disabled:this.disabled,"aria-label":this.dismissText,onClick:this.disabled?null:this.handleClose},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("scale-icon-action-close",{"accessibility-title":"close",size:16,selected:!0})):"persistent"===this.type&&this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("scale-icon-action-checkmark",{"accessibility-title":"success",size:16,selected:!0}):"persistent"===this.type?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("scale-icon-action-checkmark",{"accessibility-title":"success",size:16}):void 0}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("style",null,this.styles),"dynamic"===this.type&&this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("span",{role:this.ariaRoleTitle,tabindex:this.selected?"0":"-1",part:this.getBasePartMap(),class:this.getCssClassMap(),onClick:this.disabled&&"dynamic"!==this.type?null:this.handleClick},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("slot",{name:"chip-icon"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("span",{class:"chip-label"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("slot",null)),this.selected?this.getIcon():null):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("span",{role:this.ariaRoleTitle?this.ariaRoleTitle:"switch","aria-checked":this.ariaCheckedState?this.ariaCheckedState:this.selected,tabindex:this.selected?"0":"-1",part:this.getBasePartMap(),class:this.getCssClassMap(),onClick:this.disabled&&"dynamic"!==this.type?null:this.handleClick},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("slot",{name:"chip-icon"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("span",{class:"chip-label"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("slot",null)),this.selected?this.getIcon():null))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"chip--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__.a)("basePart"===mode?"base":"chip",!!this.selected&&prefix+"selected",!!this.disabled&&prefix+"disabled",this.type&&prefix+"type-"+this.type,this.variant&&prefix+"variant-"+this.variant)}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.f)(this)}}]),Chip}();Chip.style=":host{--height:32px;--font-size:var(--telekom-typography-font-size-body);--line-height:var(--telekom-typography-line-spacing-standard);--font-weight:var(--telekom-typography-font-weight-bold);--color-focus:var(--telekom-color-functional-focus-standard);--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1);--background-standard-selected:var(--telekom-color-ui-extra-strong);--color-standard-selected:var(\n    --telekom-color-text-and-icon-inverted-standard\n  )}.chip{box-sizing:border-box;border:var(--telekom-spacing-composition-space-01) solid transparent;display:inline-flex;outline:none;padding:0 var(--telekom-spacing-composition-space-05);text-align:center;align-items:center;white-space:nowrap;border-radius:1rem;border-color:rgba(255, 255, 255, 0.14);height:var(--height);vertical-align:baseline;justify-content:center;cursor:default;color:var(--telekom-color-text-and-icon-standard);background:var(--telekom-color-text-and-icon-inverted-standard);border:1px solid var(--telekom-color-ui-border-standard)}.chip.chip--selected.chip--type-dynamic{padding-right:var(--telekom-spacing-composition-space-03)}.chip.chip--selected.chip--type-dynamic button{border:none;cursor:pointer;padding:0;height:24px;width:24px;outline:none;background:transparent;border-radius:var(--telekom-radius-circle);display:flex;justify-content:center;align-items:center;background-color:transparent}.chip.chip--selected.chip--type-dynamic.chip--variant-standard button:hover{background:var(--telekom-color-ui-state-fill-hovered-inverted)}.chip.chip--selected.chip--type-dynamic.chip--variant-standard button:active{background:var(--telekom-color-ui-state-fill-pressed-inverted)}.chip.chip--selected.chip--type-dynamic button:focus{justify-content:center;outline:var(--focus-outline)}.chip.chip--selected.chip--type-dynamic.chip--variant-standard scale-icon-action-close{padding:0;color:var(--telekom-color-text-and-icon-inverted-standard)}.chip:not(.chip--disabled):not(.chip--type-dynamic):focus,.chip.chip--type-dynamic:not(.chip--selected):focus{outline:var(--telekom-spacing-composition-space-02) solid var(--color-focus);outline-offset:var(--telekom-spacing-composition-space-01)}.chip:not(.chip--disabled):not(.chip--type-dynamic):hover,.chip.chip--type-dynamic:not(.chip--selected):hover{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-hovered),\n      var(--telekom-color-ui-state-fill-hovered)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip:not(.chip--disabled):not(.chip--type-dynamic):active,.chip.chip--type-dynamic:not(.chip--selected):active{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-pressed),\n      var(--telekom-color-ui-state-fill-pressed)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip--selected{background:var(--background-standard-selected);color:var(--color-standard-selected)}.chip--selected:not(.chip--disabled):not(.chip--type-dynamic):hover{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-hovered-inverted),\n      var(--telekom-color-ui-state-fill-hovered-inverted)\n    ),\n    var(--background-standard-selected)}.chip--selected:not(.chip--disabled):not(.chip--type-dynamic):active{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-pressed-inverted),\n      var(--telekom-color-ui-state-fill-pressed-inverted)\n    ),\n    var(--background-standard-selected)}.chip-label{padding:0 var(--telekom-spacing-composition-space-03) 0\n    var(--telekom-spacing-composition-space-03);font-weight:var(--telekom-typography-font-weight-bold);font-size:1rem;line-height:100%}.chip--selected .chip-label{padding-right:var(--telekom-spacing-composition-space-04)}.chip--type-dynamic.chip--selected .chip-label{padding-right:var(--telekom-spacing-composition-space-03)}.chip slot[name='chip-icon']::slotted(*){padding-right:var(--telekom-spacing-composition-space-03);padding-top:var(--telekom-spacing-composition-space-03)}.chip.chip--disabled:not(.chip--type-dynamic){color:var(--telekom-color-text-and-icon-disabled);border:1px solid var(--telekom-color-ui-border-disabled)}.chip--selected:not(.chip--variant-outlined):not(.chip--type-dynamic).chip--disabled{background:var(--telekom-color-ui-disabled);color:var(--telekom-color-text-and-icon-disabled);border:none}.chip--variant-outlined.chip--selected.chip--disabled:not(.chip--type-dynamic){background-color:var(--telekom-color-text-and-icon-inverted-standard);color:var(--telekom-color-text-and-icon-disabled);border:1px solid var(--telekom-color-ui-border-disabled)}.chip.chip--variant-outline.chip--selected:not(.chip.chip--disabled):not(.chip--type-dynamic):hover{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-hovered),\n      var(--telekom-color-ui-state-fill-hovered)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip.chip--variant-outline.chip--selected:not(.chip.chip--disabled):not(.chip--type-dynamic):active{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-pressed),\n      var(--telekom-color-ui-state-fill-pressed)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip.chip--variant-outline.chip--selected{color:var(--telekom-color-text-and-icon-primary-standard);background:var(--telekom-color-text-and-icon-inverted-standard);border:1px solid var(--telekom-color-text-and-icon-primary-standard)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline scale-icon-action-close{padding:0;color:var(--telekom-color-text-and-icon-primary-standard)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:hover{background:var(--telekom-color-ui-state-fill-hovered)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:hover scale-icon-action-close{color:var(--telekom-color-text-and-icon-primary-hovered)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:active{background:var(telekom-color-ui-state-fill-pressed)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:active scale-icon-action-close{color:var(--telekom-color-text-and-icon-primary-pressed)}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
-//# sourceMappingURL=32.e5672086.iframe.bundle.js.map
\ No newline at end of file
diff --git a/32.e5672086.iframe.bundle.js.map b/32.e5672086.iframe.bundle.js.map
deleted file mode 100644
index cf93895458..0000000000
--- a/32.e5672086.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"32.e5672086.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/33.7cd840dd.iframe.bundle.js.map b/33.7cd840dd.iframe.bundle.js.map
deleted file mode 100644
index 0431017d83..0000000000
--- a/33.7cd840dd.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"33.7cd840dd.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/33.999d48ff.iframe.bundle.js b/33.999d48ff.iframe.bundle.js
new file mode 100644
index 0000000000..df07dd31e2
--- /dev/null
+++ b/33.999d48ff.iframe.bundle.js
@@ -0,0 +1,3 @@
+/*! For license information please see 33.999d48ff.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-chip.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_chip",(function(){return Chip}));__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Chip=function(){function Chip(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Chip),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.i)(this,hostRef),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.e)(this,"scaleChange",7),this.scaleClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.e)(this,"scale-close",7),this.scaleCloseLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.e)(this,"scaleClose",7),this.variant="standard",this.type="persistent",this.selected=!1,this.ariaRoleTitle="switch",this.ariaCheckedState=!1,this.disabled=!1,this.dismissText="dismiss",this.handleClose=function(event){event.preventDefault(),event.stopPropagation(),_this.disabled&&"dynamic"!==_this.type||Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_6__.d)(_this,"scaleClose",event)},this.handleClick=function(event){"dynamic"!==_this.type&&(_this.selected=!_this.selected),event.preventDefault(),event.stopPropagation(),_this.disabled&&"dynamic"!==_this.type||Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_6__.d)(_this,"scaleChange",event)}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Chip,[{key:"componentDidRender",value:function componentDidRender(){var iconSlot=this.hostElement.querySelector('[slot="chip-icon"]');null!==iconSlot&&(iconSlot.children[0].getAttribute("size")===String(24)&&iconSlot.children[0].setAttribute("size",String(16)),this.selected?iconSlot.children[0].setAttribute("selected",String(!0)):iconSlot.children[0].setAttribute("selected",String(!1)))}},{key:"disconnectedCallback",value:function disconnectedCallback(){}},{key:"getIcon",value:function getIcon(){return"dynamic"===this.type&&this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("button",{part:"button-dismissable",disabled:this.disabled,"aria-label":this.dismissText,onClick:this.disabled?null:this.handleClose},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("scale-icon-action-close",{"accessibility-title":"close",size:16,selected:!0})):"persistent"===this.type&&this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("scale-icon-action-checkmark",{"accessibility-title":"success",size:16,selected:!0}):"persistent"===this.type?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("scale-icon-action-checkmark",{"accessibility-title":"success",size:16}):void 0}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("style",null,this.styles),"dynamic"===this.type&&this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("span",{role:this.ariaRoleTitle,tabindex:this.selected?"0":"-1",part:this.getBasePartMap(),class:this.getCssClassMap(),"aria-checked":this.selected.toString(),onClick:this.disabled&&"dynamic"!==this.type?null:this.handleClick},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"chip-icon"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("span",{class:"chip-label"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",null)),this.selected?this.getIcon():null):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("span",{role:this.ariaRoleTitle,"aria-checked":this.selected.toString(),tabindex:this.selected?"0":"-1",part:this.getBasePartMap(),class:this.getCssClassMap(),onClick:this.disabled&&"dynamic"!==this.type?null:this.handleClick},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"chip-icon"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("span",{class:"chip-label"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",null)),this.selected?this.getIcon():null))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"chip--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_5__.a)("basePart"===mode?"base":"chip",!!this.selected&&prefix+"selected",!!this.disabled&&prefix+"disabled",this.type&&prefix+"type-"+this.type,this.variant&&prefix+"variant-"+this.variant)}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.f)(this)}}]),Chip}();Chip.style=":host{--height:32px;--font-size:var(--telekom-typography-font-size-body);--line-height:var(--telekom-typography-line-spacing-standard);--font-weight:var(--telekom-typography-font-weight-bold);--color-focus:var(--telekom-color-functional-focus-standard);--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1);--background-standard-selected:var(--telekom-color-ui-extra-strong);--color-standard-selected:var(\n    --telekom-color-text-and-icon-inverted-standard\n  )}.chip{box-sizing:border-box;border:var(--telekom-spacing-composition-space-01) solid transparent;display:inline-flex;outline:none;padding:0 var(--telekom-spacing-composition-space-05);text-align:center;align-items:center;white-space:nowrap;border-radius:1rem;border-color:rgba(255, 255, 255, 0.14);height:var(--height);vertical-align:baseline;justify-content:center;cursor:default;color:var(--telekom-color-text-and-icon-standard);background:var(--telekom-color-text-and-icon-inverted-standard);border:1px solid var(--telekom-color-ui-border-standard)}.chip.chip--selected.chip--type-dynamic{padding-right:var(--telekom-spacing-composition-space-03)}.chip.chip--selected.chip--type-dynamic button{border:none;cursor:pointer;padding:0;height:24px;width:24px;outline:none;background:transparent;border-radius:var(--telekom-radius-circle);display:flex;justify-content:center;align-items:center;background-color:transparent}.chip.chip--selected.chip--type-dynamic.chip--variant-standard button:hover{background:var(--telekom-color-ui-state-fill-hovered-inverted)}.chip.chip--selected.chip--type-dynamic.chip--variant-standard button:active{background:var(--telekom-color-ui-state-fill-pressed-inverted)}.chip.chip--selected.chip--type-dynamic button:focus{justify-content:center;outline:var(--focus-outline)}.chip.chip--selected.chip--type-dynamic.chip--variant-standard scale-icon-action-close{padding:0;color:var(--telekom-color-text-and-icon-inverted-standard)}.chip:not(.chip--disabled):not(.chip--type-dynamic):focus,.chip.chip--type-dynamic:not(.chip--selected):focus{outline:var(--telekom-spacing-composition-space-02) solid var(--color-focus);outline-offset:var(--telekom-spacing-composition-space-01)}.chip:not(.chip--disabled):not(.chip--type-dynamic):hover,.chip.chip--type-dynamic:not(.chip--selected):hover{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-hovered),\n      var(--telekom-color-ui-state-fill-hovered)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip:not(.chip--disabled):not(.chip--type-dynamic):active,.chip.chip--type-dynamic:not(.chip--selected):active{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-pressed),\n      var(--telekom-color-ui-state-fill-pressed)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip--selected{background:var(--background-standard-selected);color:var(--color-standard-selected)}.chip--selected:not(.chip--disabled):not(.chip--type-dynamic):hover{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-hovered-inverted),\n      var(--telekom-color-ui-state-fill-hovered-inverted)\n    ),\n    var(--background-standard-selected)}.chip--selected:not(.chip--disabled):not(.chip--type-dynamic):active{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-pressed-inverted),\n      var(--telekom-color-ui-state-fill-pressed-inverted)\n    ),\n    var(--background-standard-selected)}.chip-label{padding:0 var(--telekom-spacing-composition-space-03) 0\n    var(--telekom-spacing-composition-space-03);font-weight:var(--telekom-typography-font-weight-bold);font-size:1rem;line-height:100%}.chip--selected .chip-label{padding-right:var(--telekom-spacing-composition-space-04)}.chip--type-dynamic.chip--selected .chip-label{padding-right:var(--telekom-spacing-composition-space-03)}.chip slot[name='chip-icon']::slotted(*){padding-right:var(--telekom-spacing-composition-space-03);padding-top:var(--telekom-spacing-composition-space-03)}.chip.chip--disabled:not(.chip--type-dynamic){color:var(--telekom-color-text-and-icon-disabled);border:1px solid var(--telekom-color-ui-border-disabled)}.chip--selected:not(.chip--variant-outlined):not(.chip--type-dynamic).chip--disabled{background:var(--telekom-color-ui-disabled);color:var(--telekom-color-text-and-icon-disabled);border:none}.chip--variant-outlined.chip--selected.chip--disabled:not(.chip--type-dynamic){background-color:var(--telekom-color-text-and-icon-inverted-standard);color:var(--telekom-color-text-and-icon-disabled);border:1px solid var(--telekom-color-ui-border-disabled)}.chip.chip--variant-outline.chip--selected:not(.chip.chip--disabled):not(.chip--type-dynamic):hover{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-hovered),\n      var(--telekom-color-ui-state-fill-hovered)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip.chip--variant-outline.chip--selected:not(.chip.chip--disabled):not(.chip--type-dynamic):active{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-pressed),\n      var(--telekom-color-ui-state-fill-pressed)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip.chip--variant-outline.chip--selected{color:var(--telekom-color-text-and-icon-primary-standard);background:var(--telekom-color-text-and-icon-inverted-standard);border:1px solid var(--telekom-color-text-and-icon-primary-standard)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline scale-icon-action-close{padding:0;color:var(--telekom-color-text-and-icon-primary-standard)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:hover{background:var(--telekom-color-ui-state-fill-hovered)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:hover scale-icon-action-close{color:var(--telekom-color-text-and-icon-primary-hovered)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:active{background:var(telekom-color-ui-state-fill-pressed)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:active scale-icon-action-close{color:var(--telekom-color-text-and-icon-primary-pressed)}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
+//# sourceMappingURL=33.999d48ff.iframe.bundle.js.map
\ No newline at end of file
diff --git a/32.e5672086.iframe.bundle.js.LICENSE.txt b/33.999d48ff.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 32.e5672086.iframe.bundle.js.LICENSE.txt
rename to 33.999d48ff.iframe.bundle.js.LICENSE.txt
diff --git a/33.999d48ff.iframe.bundle.js.map b/33.999d48ff.iframe.bundle.js.map
new file mode 100644
index 0000000000..9b9d40b82f
--- /dev/null
+++ b/33.999d48ff.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"33.999d48ff.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/33.7cd840dd.iframe.bundle.js b/34.2d48b0e5.iframe.bundle.js
similarity index 98%
rename from 33.7cd840dd.iframe.bundle.js
rename to 34.2d48b0e5.iframe.bundle.js
index bad56bbda1..c9dd69997f 100644
--- a/33.7cd840dd.iframe.bundle.js
+++ b/34.2d48b0e5.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 33.7cd840dd.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-collapsible.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_collapsible",(function(){return Collapsible}));__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var i=0,Collapsible=function(){function Collapsible(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Collapsible),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.i)(this,hostRef),this.scaleExpand=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.e)(this,"scale-expand",7),this.scaleExpandLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.e)(this,"scaleExpand",7),this.headingLevel=2,this.iconLocation="left",this.handleClick=function(){_this.expanded=!_this.expanded,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_3__.d)(_this,"scaleExpand",{expanded:_this.expanded})}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Collapsible,[{key:"componentWillLoad",value:function componentWillLoad(){var j=i++;this.headingId="collapsable-heading-"+j,this.panelId="collapsable-panel-"+j}},{key:"componentDidLoad",value:function componentDidLoad(){this.setHeadingFromLightDOM()}},{key:"setHeadingFromLightDOM",value:function setHeadingFromLightDOM(){var lightHeading=this.hostElement.querySelector(":first-child");if(null!=lightHeading){var isHeading="H"===lightHeading.tagName.charAt(0).toUpperCase(),hasSlotAttr=lightHeading.hasAttribute("slot");isHeading&&!hasSlotAttr&&(this.headingElement.innerHTML=lightHeading.innerHTML,lightHeading.style.display="none")}}},{key:"render",value:function render(){var _this2=this,IconTag=this.expanded?"scale-icon-navigation-collapse-down":"scale-icon-navigation-right";return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("div",{class:this.getCssClassMap(),part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__.a)("base",this.expanded&&"expanded")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("h2",{"aria-level":this.headingLevel,class:"collapsible__heading",part:"heading"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("button",{id:this.headingId,class:"collapsible__button",part:"button",onClick:this.handleClick,"aria-expanded":this.expanded?"true":"false","aria-controls":this.panelId},"left"===this.iconLocation?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(IconTag,{size:24,decorative:!0,class:"collapsible__icon",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__.a)("icon",this.expanded&&"expanded")}):null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("span",{ref:function ref(el){return _this2.headingElement=el},class:"collapsible__button-text",part:"button-text"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("slot",{name:"heading"})),"right"===this.iconLocation?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(IconTag,{size:24,decorative:!0,class:"collapsible__icon collapsible__icon-right",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__.a)("icon",this.expanded&&"expanded")}):null)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("div",{id:this.panelId,role:"region","aria-labelledby":this.headingId,hidden:!this.expanded,class:"collapsible__content",part:"content"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("slot",null))))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__.a)("collapsible",this.expanded&&"collapsible--expanded")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.f)(this)}}]),Collapsible}();Collapsible.style=":host{--spacing-y:var(--telekom-spacing-composition-space-06);--font:var(--telekom-text-style-heading-5);--border-width-button:var(--telekom-spacing-composition-space-02);--radius-button:var(--telekom-radius-small);--spacing-left-button:0;--spacing-left-button-text:var(--telekom-spacing-composition-space-04);--color-button-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-button-active:var(--telekom-color-text-and-icon-primary-pressed);--background-button-hover:none;--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--spacing-right-content:var(--telekom-spacing-composition-space-14);--spacing-left-content:34px;--spacing-top-content:var(--telekom-spacing-composition-space-06);--spacing-bottom-content:var(--telekom-spacing-composition-space-08)}.collapsible{position:relative;margin:var(--spacing-y) 0}.collapsible--expanded:before{top:0;left:0;right:0;width:100%;border:var(--telekom-spacing-composition-space-01) solid transparent;content:'';display:block;position:absolute;pointer-events:none;bottom:calc(-1 * var(--spacing-y))}.collapsible__heading{margin:0}.collapsible__button{color:currentColor;width:100%;display:flex;text-align:left;align-items:center;padding-top:0;border-color:transparent;border-style:solid;padding-right:0;padding-bottom:0;background-color:transparent;font:var(--font);border-width:var(--border-width-button);border-radius:var(--radius-button);padding-left:var(--spacing-left-button);font-family:inherit;word-spacing:inherit;letter-spacing:inherit}.collapsible__button-text{margin-left:var(--spacing-left-button-text)}.collapsible__button:hover{cursor:pointer;color:var(--color-button-hover);background-color:var(--background-button-hover)}.collapsible__button:active{color:var(--color-button-active);background-color:transparent}.collapsible__button:focus{outline:var(--focus-outline)}.collapsible__icon{flex-shrink:0}.collapsible__icon-right{margin-left:auto}.collapsible__button[aria-expanded='true'] .collapsible__icon{}.collapsible__content{padding-right:var(--spacing-right-content);padding-left:var(--spacing-left-content);margin-top:var(--spacing-top-content);margin-bottom:var(--spacing-bottom-content)}::slotted(*:not([slot='heading'])){font:var(--telekom-text-style-body)}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
-//# sourceMappingURL=33.7cd840dd.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 34.2d48b0e5.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-collapsible.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_collapsible",(function(){return Collapsible}));__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var i=0,Collapsible=function(){function Collapsible(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Collapsible),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.i)(this,hostRef),this.scaleExpand=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.e)(this,"scale-expand",7),this.scaleExpandLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.e)(this,"scaleExpand",7),this.headingLevel=2,this.iconLocation="left",this.handleClick=function(){_this.expanded=!_this.expanded,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_3__.d)(_this,"scaleExpand",{expanded:_this.expanded})}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Collapsible,[{key:"componentWillLoad",value:function componentWillLoad(){var j=i++;this.headingId="collapsable-heading-"+j,this.panelId="collapsable-panel-"+j}},{key:"componentDidLoad",value:function componentDidLoad(){this.setHeadingFromLightDOM()}},{key:"setHeadingFromLightDOM",value:function setHeadingFromLightDOM(){var lightHeading=this.hostElement.querySelector(":first-child");if(null!=lightHeading){var isHeading="H"===lightHeading.tagName.charAt(0).toUpperCase(),hasSlotAttr=lightHeading.hasAttribute("slot");isHeading&&!hasSlotAttr&&(this.headingElement.innerHTML=lightHeading.innerHTML,lightHeading.style.display="none")}}},{key:"render",value:function render(){var _this2=this,IconTag=this.expanded?"scale-icon-navigation-collapse-down":"scale-icon-navigation-right";return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("div",{class:this.getCssClassMap(),part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__.a)("base",this.expanded&&"expanded")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("h2",{"aria-level":this.headingLevel,class:"collapsible__heading",part:"heading"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("button",{id:this.headingId,class:"collapsible__button",part:"button",onClick:this.handleClick,"aria-expanded":this.expanded?"true":"false","aria-controls":this.panelId},"left"===this.iconLocation?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(IconTag,{size:24,decorative:!0,class:"collapsible__icon",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__.a)("icon",this.expanded&&"expanded")}):null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("span",{ref:function ref(el){return _this2.headingElement=el},class:"collapsible__button-text",part:"button-text"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("slot",{name:"heading"})),"right"===this.iconLocation?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(IconTag,{size:24,decorative:!0,class:"collapsible__icon collapsible__icon-right",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__.a)("icon",this.expanded&&"expanded")}):null)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("div",{id:this.panelId,role:"region","aria-labelledby":this.headingId,hidden:!this.expanded,class:"collapsible__content",part:"content"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("slot",null))))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__.a)("collapsible",this.expanded&&"collapsible--expanded")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.f)(this)}}]),Collapsible}();Collapsible.style=":host{--spacing-y:var(--telekom-spacing-composition-space-06);--font:var(--telekom-text-style-heading-5);--border-width-button:var(--telekom-spacing-composition-space-02);--radius-button:var(--telekom-radius-small);--spacing-left-button:0;--spacing-left-button-text:var(--telekom-spacing-composition-space-04);--color-button-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-button-active:var(--telekom-color-text-and-icon-primary-pressed);--background-button-hover:none;--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--spacing-right-content:var(--telekom-spacing-composition-space-14);--spacing-left-content:34px;--spacing-top-content:var(--telekom-spacing-composition-space-06);--spacing-bottom-content:var(--telekom-spacing-composition-space-08)}.collapsible{position:relative;margin:var(--spacing-y) 0}.collapsible--expanded:before{top:0;left:0;right:0;width:100%;border:var(--telekom-spacing-composition-space-01) solid transparent;content:'';display:block;position:absolute;pointer-events:none;bottom:calc(-1 * var(--spacing-y))}.collapsible__heading{margin:0}.collapsible__button{color:currentColor;width:100%;display:flex;text-align:left;align-items:center;padding-top:0;border-color:transparent;border-style:solid;padding-right:0;padding-bottom:0;background-color:transparent;font:var(--font);border-width:var(--border-width-button);border-radius:var(--radius-button);padding-left:var(--spacing-left-button);font-family:inherit;word-spacing:inherit;letter-spacing:inherit}.collapsible__button-text{margin-left:var(--spacing-left-button-text)}.collapsible__button:hover{cursor:pointer;color:var(--color-button-hover);background-color:var(--background-button-hover)}.collapsible__button:active{color:var(--color-button-active);background-color:transparent}.collapsible__button:focus{outline:var(--focus-outline)}.collapsible__icon{flex-shrink:0}.collapsible__icon-right{margin-left:auto}.collapsible__button[aria-expanded='true'] .collapsible__icon{}.collapsible__content{padding-right:var(--spacing-right-content);padding-left:var(--spacing-left-content);margin-top:var(--spacing-top-content);margin-bottom:var(--spacing-bottom-content)}::slotted(*:not([slot='heading'])){font:var(--telekom-text-style-body)}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
+//# sourceMappingURL=34.2d48b0e5.iframe.bundle.js.map
\ No newline at end of file
diff --git a/33.7cd840dd.iframe.bundle.js.LICENSE.txt b/34.2d48b0e5.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 33.7cd840dd.iframe.bundle.js.LICENSE.txt
rename to 34.2d48b0e5.iframe.bundle.js.LICENSE.txt
diff --git a/34.2d48b0e5.iframe.bundle.js.map b/34.2d48b0e5.iframe.bundle.js.map
new file mode 100644
index 0000000000..59468430ad
--- /dev/null
+++ b/34.2d48b0e5.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"34.2d48b0e5.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/34.b9ee6464.iframe.bundle.js.map b/34.b9ee6464.iframe.bundle.js.map
deleted file mode 100644
index 48a5477e13..0000000000
--- a/34.b9ee6464.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"34.b9ee6464.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/35.82777aa1.iframe.bundle.js.map b/35.82777aa1.iframe.bundle.js.map
deleted file mode 100644
index 0e219dab5f..0000000000
--- a/35.82777aa1.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"35.82777aa1.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/34.b9ee6464.iframe.bundle.js b/35.d8aef789.iframe.bundle.js
similarity index 99%
rename from 34.b9ee6464.iframe.bundle.js
rename to 35.d8aef789.iframe.bundle.js
index 321df2e61e..dcd12d7b99 100644
--- a/34.b9ee6464.iframe.bundle.js
+++ b/35.d8aef789.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 34.b9ee6464.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{"../../node_modules/core-js/modules/es.date.now.js":function(module,exports,__webpack_require__){__webpack_require__("../../node_modules/core-js/internals/export.js")({target:"Date",stat:!0},{now:function now(){return(new Date).getTime()}})},"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-dropdown-select_13.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_dropdown_select",(function(){return DropdownSelect})),__webpack_require__.d(__webpack_exports__,"scale_dropdown_select_item",(function(){return DropdownSelectItem})),__webpack_require__.d(__webpack_exports__,"scale_icon_action_hide_password",(function(){return ActionHidePassword})),__webpack_require__.d(__webpack_exports__,"scale_icon_action_sort",(function(){return ActionSort})),__webpack_require__.d(__webpack_exports__,"scale_icon_content_sort_indicator_down",(function(){return ContentSortIndicatorDown})),__webpack_require__.d(__webpack_exports__,"scale_icon_content_sort_indicator_up",(function(){return ContentSortIndicatorUp})),__webpack_require__.d(__webpack_exports__,"scale_icon_service_settings",(function(){return ServiceSettings})),__webpack_require__.d(__webpack_exports__,"scale_menu_flyout_item",(function(){return MenuFlyoutItem})),__webpack_require__.d(__webpack_exports__,"scale_pagination",(function(){return Pagination})),__webpack_require__.d(__webpack_exports__,"scale_progress_bar",(function(){return ProgressBar})),__webpack_require__.d(__webpack_exports__,"scale_switch",(function(){return Switch})),__webpack_require__.d(__webpack_exports__,"scale_tag",(function(){return Tag})),__webpack_require__.d(__webpack_exports__,"scale_text_field",(function(){return TextField}));__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.trim.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.every.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find-index.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.fill.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.small.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.now.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js"),_floating_ui_dom_esm_43ac86e1_js__WEBPACK_IMPORTED_MODULE_34__=__webpack_require__("../components/dist/esm/floating-ui.dom.esm-43ac86e1.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}var Actions;!function(Actions){Actions.Close="Close",Actions.CloseSelect="CloseSelect",Actions.First="First",Actions.Last="Last",Actions.Next="Next",Actions.Open="Open",Actions.PageDown="PageDown",Actions.PageUp="PageUp",Actions.Previous="Previous",Actions.Select="Select",Actions.Type="Type"}(Actions||(Actions={}));var readValue=function readValue(element){return function isElementValue(x){return"string"==typeof x.value}(element)?element.value:null},readDisabled=function readDisabled(element){var attr=element.getAttribute("disabled");return null!==attr&&""+attr!="false"||!!function isElementDisabled(x){return"boolean"==typeof x.disable}(element)&&element.disable},readOptions=function readOptions(hostElement){return Array.from(hostElement.children).filter((function(x){return"INPUT"!==x.tagName&&!1===x.hidden})).map((function(x){var _a;return{label:x.textContent.trim(),value:null!==(_a=x.getAttribute("value"))&&void 0!==_a?_a:readValue(x),disabled:readDisabled(x),ItemElement:Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{innerHTML:x.outerHTML})}}))};function matchEnabledOptions(){var options=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],filter=arguments.length>1?arguments[1]:void 0;return options.filter((function(option){return!option.disabled&&0===option.label.toLowerCase().indexOf(filter.toLowerCase())}))}var DropdownSelect=function(){function DropdownSelect(hostRef){var _this=this;_classCallCheck(this,DropdownSelect),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-change",7),this.scaleFocus=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-focus",7),this.scaleBlur=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-blur",7),this.scaleKeydown=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-keydown",7),this.comboboxId="combobox",this.helperText="",this.invalid=!1,this.variant="informational",this.floatingStrategy="absolute",this.hideLabelVisually=!1,this.ariaLabelSelected="selected",this.hcmLabelDisabled="this field is disabled",this.options="",this.open=!1,this.currentIndex=-1,this.queryString="",this.queryTimeout=null,this.hasFocus=!1,this.selectOption=function(index){_this.currentIndex=index,_this.value=readOptions(_this.hostElement)[index].value,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this,"scaleChange",{value:_this.value})},this.handleKeyDown=function(event){var _a,key=event.key,options=readOptions(_this.hostElement),action=function getActionFromKey(event,open){var key=event.key,altKey=event.altKey,ctrlKey=event.ctrlKey,metaKey=event.metaKey;if(!open&&["ArrowDown","ArrowUp","Enter"," "].includes(key))return Actions.Open;if("Home"===key)return Actions.First;if("End"===key)return Actions.Last;if(["Backspace","Clear"].includes(key)||1===key.length&&" "!==key&&!altKey&&!ctrlKey&&!metaKey)return Actions.Type;if(open){if("ArrowUp"===key&&altKey)return Actions.CloseSelect;if("ArrowDown"===key&&!altKey)return Actions.Next;switch(key){case"ArrowUp":return Actions.Previous;case"PageUp":return Actions.PageUp;case"PageDown":return Actions.PageDown;case"Escape":return Actions.Close;case"Enter":case" ":return Actions.CloseSelect}}}(event,_this.open);switch(Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this,"scaleKeydown",event),action){case Actions.Last:case Actions.First:_this.setOpen(!0);case Actions.Next:case Actions.Previous:case Actions.PageUp:case Actions.PageDown:return event.preventDefault(),_this.handleOptionChange(function jumpToIndex(from,action,options){var _a,nearest,findNearestEnabled=function findNearestEnabled(current,step){var nextOption,nextIndex=current;do{if(void 0===(nextOption=options[nextIndex+=step]))break}while(null==nextOption?void 0:nextOption.disabled);return nextOption?nextIndex:current};switch(action){case Actions.First:return(null===(_a=options[0])||void 0===_a?void 0:_a.disabled)?findNearestEnabled(-1,1):0;case Actions.Last:return(nearest=findNearestEnabled(options.length,-1))===options.length?-1:nearest;case Actions.Previous:return(nearest=findNearestEnabled(from,-1===from?1:-1))===options.length?-1:nearest;case Actions.Next:return findNearestEnabled(from,1);case Actions.PageUp:return findNearestEnabled(Math.max(from-10,-1),1);case Actions.PageDown:return(nearest=findNearestEnabled(Math.min(from+10,options.length),-1))===options.length?-1:nearest;default:return from}}(_this.currentIndex,action,options));case Actions.CloseSelect:if(event.preventDefault(),null===(_a=options[_this.currentIndex])||void 0===_a?void 0:_a.disabled)return;-1!==_this.currentIndex&&_this.selectOption(_this.currentIndex);case Actions.Close:return event.preventDefault(),_this.setOpen(!1);case Actions.Type:return _this.buildQueryString(key);case Actions.Open:return event.preventDefault(),_this.setOpen(!0)}},this.handleBlur=function(){_this.setOpen(!1),Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this,"scaleBlur")},this.handleFocus=function(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this,"scaleFocus")},this.handleClick=function(){_this.setOpen(!_this.open);var indexOfValue=readOptions(_this.hostElement).findIndex((function(_ref){return _ref.value===_this.value}));indexOfValue>-1&&setTimeout((function(){_this.bringIntoView(indexOfValue)}))}}return _createClass(DropdownSelect,[{key:"valueChange",value:function valueChange(newValue){this.currentIndex=readOptions(this.hostElement).findIndex((function(_ref2){return _ref2.value===newValue})),this.updateInputHidden(newValue)}},{key:"connectedCallback",value:function connectedCallback(){var _this2=this;Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({source:this.hostElement,tag:"beta"}),this.currentIndex=readOptions(this.hostElement).findIndex((function(_ref3){return _ref3.value===_this2.value}))||-1}},{key:"componentDidRender",value:function componentDidRender(){var _this3=this;this.open&&("fixed"===this.floatingStrategy&&(this.listboxPadEl.style.width=this.comboEl.getBoundingClientRect().width+"px"),Object(_floating_ui_dom_esm_43ac86e1_js__WEBPACK_IMPORTED_MODULE_34__.b)(this.comboEl,this.listboxPadEl,{placement:"bottom",strategy:this.floatingStrategy}).then((function(_ref4){var x=_ref4.x,y=_ref4.y;Object.assign(_this3.listboxPadEl.style,{left:x+"px",top:y+"px"})})))}},{key:"componentDidLoad",value:function componentDidLoad(){this.appendInputHidden()}},{key:"appendInputHidden",value:function appendInputHidden(){var input=document.createElement("input");input.name=this.name,input.id=this.name,input.value=this.value,input.type="hidden",this.hostElement.appendChild(input)}},{key:"updateInputHidden",value:function updateInputHidden(){var value=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.value;this.hostElement.querySelector("input[name="+this.name+"]").value=value}},{key:"handleOptionChange",value:function handleOptionChange(index){this.currentIndex=index,index>-1&&this.bringIntoView(index)}},{key:"bringIntoView",value:function bringIntoView(index){var options=this.listboxEl.querySelectorAll("[role=option]");(function hasOverflow(element){return element&&element.clientHeight<element.scrollHeight})(this.listboxEl)&&function keepInView(activeElement,scrollParent){var offsetHeight=activeElement.offsetHeight,offsetTop=activeElement.offsetTop,parentOffsetHeight=scrollParent.offsetHeight,scrollTop=scrollParent.scrollTop,isAboveParent=offsetTop<scrollTop;return offsetTop+offsetHeight>scrollTop+parentOffsetHeight?scrollParent.scrollTop=offsetTop+offsetHeight-parentOffsetHeight:isAboveParent?scrollParent.scrollTop=offsetTop:void 0}(options[index],this.listboxEl),function isInView(element){var rect=element.getBoundingClientRect(),parentRect_top=0,parentRect_left=0,parentRect_right=window.innerWidth||document.documentElement.clientWidth,parentRect_bottom=window.innerHeight||document.documentElement.clientHeight;return rect.top>=parentRect_top&&rect.left>=parentRect_left&&rect.bottom<=parentRect_bottom&&rect.right<=parentRect_right}(options[index])||options[index].scrollIntoView({behavior:"smooth",block:"nearest"})}},{key:"setOpen",value:function setOpen(open){this.open!==open&&(this.disabled||(this.open=open,this.open||(this.comboEl.scrollIntoView({behavior:"smooth",block:"nearest"}),this.comboEl.focus(),this.currentIndex=-1)))}},{key:"handleOptionClick",value:function handleOptionClick(event,index){event.stopPropagation(),readOptions(this.hostElement)[index].disabled||(this.handleOptionChange(index),this.selectOption(index),this.setOpen(!1))}},{key:"getSearchString",value:function getSearchString(_char2){var _this4=this;return"number"==typeof this.queryTimeout&&window.clearTimeout(this.queryTimeout),this.queryTimeout=window.setTimeout((function(){_this4.queryString=""}),500),this.queryString+=_char2,this.queryString}},{key:"buildQueryString",value:function buildQueryString(_char3){this.setOpen(!0);var queryString=this.getSearchString(_char3),queryIndex=function getIndexByChar(values,filter){var startIndex=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,sortedOptions=[].concat(_toConsumableArray(values.slice(startIndex)),_toConsumableArray(values.slice(0,startIndex))),firstHit=matchEnabledOptions(sortedOptions,filter)[0],allMatchingChars=function allMatchingChars(array){return array.every((function(_char){return _char===array[0]}))};if(firstHit)return values.indexOf(firstHit);if(allMatchingChars(filter.split(""))){var hits=matchEnabledOptions(sortedOptions,filter[0]);return values.indexOf(hits[0])}return-1}(readOptions(this.hostElement),queryString,this.currentIndex+1);queryIndex>=0?this.handleOptionChange(queryIndex):(window.clearTimeout(this.queryTimeout),this.queryString="")}},{key:"render",value:function render(){var _a,_this5=this,element=null!==(_a=readOptions(this.hostElement).find((function(_ref5){return _ref5.value===_this5.value})))&&void 0!==_a?_a:{},ValueElement=element.ItemElement,hasEmptyValueElement=""===element.value,helperTextId="helper-message-"+Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.e)(),ariaDescribedByAttr={"aria-describedBy":helperTextId};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:this.getBasePartMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"combobox-container"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("label",{id:this.comboboxId+"-label",part:"label"},this.label),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",Object.assign({ref:function ref(el){return _this5.comboEl=el},"aria-controls":this.comboboxId+"-listbox","aria-expanded":this.open?"true":"false","aria-haspopup":"listbox","aria-labelledby":this.comboboxId+"-label",id:this.comboboxId,part:"combobox",role:"combobox",tabindex:"0",onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown},this.open?{"aria-activedescendant":(readOptions(this.hostElement)[this.currentIndex]||{}).value}:{},this.helperText?ariaDescribedByAttr:{},this.invalid?{"aria-invalid":"true"}:{}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{part:"combobox-value"},hasEmptyValueElement?"":ValueElement)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"listbox-pad",ref:function ref(el){return _this5.listboxPadEl=el}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"listbox-scroll-container",onMouseDown:function onMouseDown(e){e.preventDefault()}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{ref:function ref(el){return _this5.listboxEl=el},part:"listbox",role:"listbox",id:this.comboboxId+"-listbox","aria-labelledby":this.comboboxId+"-label",tabindex:"-1"},readOptions(this.hostElement).map((function(_ref6,index){var value=_ref6.value,disabled=_ref6.disabled,ItemElement=_ref6.ItemElement;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",Object.assign({role:"option",part:_this5.getOptionPartMap(index,disabled),id:value,onClick:function onClick(event){_this5.handleOptionClick(event,index)}},value===_this5.value?{"aria-selected":"true"}:{},disabled?{"aria-disabled":"true"}:{}),ItemElement,value===_this5.value?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-action-checkmark",{size:16}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"sr-only"},_this5.ariaLabelSelected)):null)}))))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"icon"},this.open?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-collapse-up",{decorative:!0,size:20}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-collapse-down",{decorative:!0,size:20}))),this.helperText&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-helper-text",{helperText:this.helperText,variant:this.invalid?"danger":this.variant,id:helperTextId}),this.disabled&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"hcm-disabled"},this.hcmLabelDisabled)))}},{key:"getBasePartMap",value:function getBasePartMap(){var animated=null!=this.value&&""!==this.value;return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("select",this.open&&"open",this.disabled&&"disabled",this.readonly&&"readonly",this.transparent&&"transparent",this.invalid&&"invalid",this.currentIndex>-1&&"steal-focus",animated&&"animated",this.helperText&&"has-helper-text",this.floatingStrategy&&"strategy-"+this.floatingStrategy,this.hideLabelVisually&&"hide-label")}},{key:"getOptionPartMap",value:function getOptionPartMap(index,disabled){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("option",index===this.currentIndex&&"current",disabled&&"disabled")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}],[{key:"watchers",get:function get(){return{value:["valueChange"]}}}]),DropdownSelect}();DropdownSelect.style=":host{--font-weight:var(--telekom-typography-font-weight-bold);--height:var(--telekom-spacing-composition-space-13);--color:var(--telekom-color-text-and-icon-standard);--color-disabled:var(--telekom-color-text-and-icon-disabled);--background-disabled:none;--background-hover:var(--telekom-color-ui-state-fill-hovered);--border:var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);--border-color-hover:var(--telekom-color-ui-border-hovered);--border-color-focus:var(--telekom-color-ui-border-hovered);--border-color-disabled:var(--telekom-color-ui-border-disabled);--border-invalid:var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-hovered);--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--spacing-x:var(--telekom-spacing-composition-space-05);--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);--radius:var(--telekom-radius-standard);--spacing-x-for-helper-text:var(--telekom-spacing-composition-space-03);--transition-combobox:var(--transition);--background-combobox:var(--telekom-color-ui-state-fill-standard);--spacing-combobox:1.125rem\n    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem\n    calc(0.75rem - var(--telekom-spacing-composition-space-01));--spacing-y-meta:var(--telekom-spacing-composition-space-03);--color-meta:var(--telekom-color-text-and-icon-standard);--height-icon:20px;--color-icon:var(--telekom-color-text-and-icon-standard);--color-icon-hover:var(--telekom-color-text-and-icon-standard);--color-icon-active:var(--telekom-color-text-and-icon-standard);--transition-icon:var(--transition);--color-label:var(--telekom-color-text-and-icon-additional);--z-index-label:var(--scl-z-index-10);--transition-label:var(--transition);--transform-label:translate(var(--spacing-x), 0.875rem);--transform-label-animated:translate(\n    var(--spacing-x),\n    calc(0.25rem + var(--telekom-spacing-composition-space-01))\n  );--background-listbox:var(--telekom-color-background-surface);--box-shadow-listbox:0 2px 4px 0 rgba(0, 0, 0, 0.1),\n    0 4px 16px 0 rgba(0, 0, 0, 0.1);--max-height-listbox:300px;--z-index-listbox:99}[part='combobox-container'] *,[part='combobox-container'] *::before,[part='combobox-container'] *::after{box-sizing:border-box}[part='combobox-container']{display:block;position:relative}[part='combobox']{width:100%;height:var(--height);margin:0;display:flex;align-items:center;outline:none;padding:var(--spacing-combobox);z-index:1;box-sizing:border-box;transition:var(--transition-combobox);font:var(--telekom-text-style-body);border-radius:var(--radius);border:var(--border);box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;appearance:none;-webkit-appearance:none;background-color:var(--background-combobox);color:var(--color)}[part='combobox-value']{overflow:hidden;text-overflow:ellipsis}[part~='select']:not([part~='disabled']) [part='combobox']:hover~[part='icon']{color:var(--color-icon-hover)}[part~='select']:not([part~='disabled']) [part='combobox']:active~[part='icon']{color:var(--color-icon-active)}[part~='select']:not([part~='disabled']):not([part~='invalid']) [part='combobox']:hover{border-color:var(--border-color-hover);background-color:var(--background-hover)}[part~='select']:not([part~='disabled'])[part~='invalid'] [part='combobox']:hover{background-color:var(--background-hover)}[part~='select']:not([part~='disabled']):not([part~='invalid']) [part='combobox']:focus{border-color:var(--border-color-focus)}[part~='select']:not([part~='disabled']):not([part~='steal-focus']) [part='combobox']:focus{outline:var(--focus-outline);outline-offset:1px}[part~='invalid'] [part='combobox']{border:var(--border-invalid)}[part~='transparent'] [part='combobox']{background-color:transparent}[part~='disabled'] [part='combobox']{cursor:not-allowed;border-color:var(--border-color-disabled);color:var(--color-disabled);background:var(--background-disabled)}[part='combobox_value']{width:calc(100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}[part='meta']{display:flex;justify-content:space-between;margin-top:var(--spacing-y-meta);color:var(--color-meta)}[part='icon']{top:50%;right:var(--spacing-x);position:absolute;transform:translateY(-50%);pointer-events:none;height:var(--height-icon);color:var(--color-icon);transition:var(--transition-icon)}[part~='disabled'] [part='icon']{color:var(--color-disabled)}[part='label']{width:calc(100% - 44px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;top:0;left:0;color:var(--color-label);display:inline-block;z-index:var(--z-index-label);position:absolute;transition:var(--transition-label);pointer-events:none;font:var(--telekom-text-style-ui);transform:var(--transform-label)}[part~='animated'] [part='label']{font:var(--telekom-text-style-small-bold);transform:var(--transform-label-animated)}[part~='disabled'] [part='label']{cursor:not-allowed;border-color:var(--border-color-disabled);color:var(--color-disabled);background:var(--background-disabled)}[part~='hide-label'] [part='combobox']{padding-top:0.3125rem}[part~='hide-label'] [part='label']{visibility:hidden}[part='listbox']{position:relative}[part='listbox-scroll-container']{max-height:var(--max-height-listbox);overflow-y:auto}[part='listbox-pad']{background:var(--background-listbox);box-shadow:var(--box-shadow-listbox);border-radius:var(--radius);padding:var(--radius) 0;margin-top:var(--telekom-spacing-composition-space-03);left:0;position:absolute;top:100%;width:100%;z-index:var(--z-index-listbox);display:none}[part~='open'] [part='listbox-pad']{display:block}[part~='strategy-fixed'] [part='listbox-pad']{position:fixed}[part~='transparent'] [part='listbox']{background-color:transparent}[part~='option']{color:var(--color)}[part~='option'][part~='disabled']{color:var(--color-disabled);cursor:not-allowed}[part~='option']:not([part~='disabled']):hover{background-color:var(--background-hover)}[part~='option'][part~='current']{outline:var(--focus-outline);outline-offset:-2px;border-radius:var(--radius)}[part~='option'][aria-selected='true']{padding-right:30px;position:relative}[part~='option'][aria-selected='true'] scale-icon-action-checkmark{position:absolute;right:var(--telekom-spacing-composition-space-05);top:var(--telekom-spacing-composition-space-05)}[part~='option'] scale-dropdown-select-item::part(base){padding:var(--telekom-spacing-composition-space-05)}[part~='has-helper-text'] [part~='combobox-container']{margin-bottom:var(--spacing-x-for-helper-text)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.hcm-disabled{display:none}@media screen and (forced-colors: active), (-ms-high-contrast: active){[part='listbox-pad']{outline:var(--focus-outline);outline-offset:-2px;border-radius:var(--radius)}.hcm-disabled{display:block}}";var DropdownSelectItem=function(){function DropdownSelectItem(hostRef){_classCallCheck(this,DropdownSelectItem),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef)}return _createClass(DropdownSelectItem,[{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"base"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"prefix"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"prefix"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"label"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",null)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"suffix"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"suffix"})))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),DropdownSelectItem}();DropdownSelectItem.style="/*!*option*!*/[part~='base']{display:flex;justify-content:flex-start;align-items:center}[part~='prefix'],[part~='label'],[part~='suffix']{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1}";var ActionHidePassword=function(){function ActionHidePassword(hostRef){_classCallCheck(this,ActionHidePassword),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ActionHidePassword,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M3.815 2.776l.085.074L21.15 20.1c.3.3.3.75 0 1.05a.722.722 0 01-.965.074l-.085-.074L2.85 3.9c-.3-.3-.3-.75 0-1.05a.722.722 0 01.965-.074zM4.2 7.35L5.25 8.4l-.018.017 2.423 2.423A4.67 4.67 0 007.5 12a4.5 4.5 0 004.5 4.5 4.67 4.67 0 00.874-.089l.286-.066 2.285 2.28-.015.005.57.57c-1.2.5-2.5.8-4 .8-4.108 0-6.987-2.283-9.1-4.68l-.364-.425-.35-.423-.334-.421-.476-.62-.726-.981L.3 12l.35-.45.595-.806C1.969 9.776 2.8 8.73 3.774 7.76l.426-.41zM12 4c4.108 0 6.987 2.283 9.1 4.68l.364.425.35.423.334.421.476.62.726.981.35.45-.35.45-.595.806c-.724.968-1.555 2.014-2.529 2.983l-.426.411-1.05-1.05.018-.017-2.423-2.423c.1-.379.152-.768.155-1.16A4.5 4.5 0 0012 7.5a4.67 4.67 0 00-.874.089l-.286.066-2.285-2.28.015-.005L8 4.8c1.2-.5 2.5-.8 4-.8zm-3 8.19l2.8 2.8a3 3 0 01-2.783-2.621L9 12.19zm3.2-3.18a3 3 0 012.783 2.621l.017.179-2.8-2.8z","fill-rule":"evenodd"})):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M2.85 2.85a.722.722 0 01.965-.074l.085.074L21.15 20.1c.3.3.3.75 0 1.05a.722.722 0 01-.965.074l-.085-.074L2.85 3.9c-.3-.3-.3-.75 0-1.05zm1.35 4.5L5.25 8.4c-1.1 1.05-2.1 2.3-3.05 3.6l.578.778.39.506.397.494C5.766 16.458 8.287 18.5 12 18.5c.919 0 1.76-.115 2.527-.345l.323-.105L16 19.2c-1.2.5-2.5.8-4 .8-4.108 0-6.987-2.283-9.1-4.68l-.364-.425-.35-.423-.334-.421-.476-.62-.726-.981L.3 12l.35-.45.595-.806C1.969 9.776 2.8 8.73 3.774 7.76l.426-.41zM12 4c4.108 0 6.987 2.283 9.1 4.68l.364.425.35.423.334.421.476.62.726.981.35.45-.35.45-.595.806c-.724.968-1.555 2.014-2.529 2.983l-.426.411-1.05-1.05c1.1-1.05 2.1-2.3 3.05-3.6l-.578-.778-.39-.506-.397-.494C18.234 7.542 15.713 5.5 12 5.5c-.919 0-1.76.115-2.527.345l-.323.105L8 4.8c1.2-.5 2.5-.8 4-.8zm-4.35 6.85l5.5 5.5c-.35.1-.75.15-1.15.15-2.5 0-4.5-2-4.5-4.5 0-.32.032-.64.096-.934l.054-.216zM12 7.5c2.5 0 4.5 2 4.5 4.5 0 .32-.032.64-.096.934l-.054.216-5.5-5.5c.35-.1.75-.15 1.15-.15z","fill-rule":"evenodd"})))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ActionHidePassword}();ActionHidePassword.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";var ActionSort=function(){function ActionSort(hostRef){_classCallCheck(this,ActionSort),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ActionSort,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M17.25 3.5c.647 0 1.18.492 1.244 1.122l.006.128V14h3.17l-4.42 6.75L12.83 14H16V4.75c0-.69.56-1.25 1.25-1.25zm-10.5-.25L11.17 10H8v9.25a1.25 1.25 0 01-2.494.128L5.5 19.25V10H2.33l4.42-6.75z","fill-rule":"evenodd"})):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M17.25 4c.367 0 .691.294.743.651L18 4.75V14h3.65l-4.4 6.75-4.4-6.75h3.65V4.75c0-.4.35-.75.75-.75zm-10.5-.75l4.4 6.75H7.5v9.25c0 .4-.35.75-.75.75a.772.772 0 01-.743-.651L6 19.25V10H2.35l4.4-6.75z","fill-rule":"evenodd"})))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ActionSort}();ActionSort.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";var ContentSortIndicatorDown=function(){function ContentSortIndicatorDown(hostRef){_classCallCheck(this,ContentSortIndicatorDown),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ContentSortIndicatorDown,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},(this.selected,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M6.584 9.5l5.417 5 5.416-5z","fill-rule":"evenodd"}))))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ContentSortIndicatorDown}();ContentSortIndicatorDown.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";var ContentSortIndicatorUp=function(){function ContentSortIndicatorUp(hostRef){_classCallCheck(this,ContentSortIndicatorUp),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ContentSortIndicatorUp,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},(this.selected,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M12 9.5l-5.417 5h10.834z","fill-rule":"evenodd"}))))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ContentSortIndicatorUp}();ContentSortIndicatorUp.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";var ServiceSettings=function(){function ServiceSettings(hostRef){_classCallCheck(this,ServiceSettings),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ServiceSettings,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M20.235 14.5L23 14v-4l-2.765-.5a1 1 0 01-.64-1.555l1.595-2.31-2.825-2.825-2.31 1.595a1 1 0 01-1.555-.64L14 1h-4l-.5 2.76a1 1 0 01-1.555.645L5.635 2.81 2.81 5.635l1.595 2.31a1 1 0 01-.64 1.555L1 10v4l2.76.5a1 1 0 01.645 1.555l-1.595 2.31 2.825 2.825 2.31-1.595a1 1 0 011.555.64L10 23h4l.5-2.765a1 1 0 011.555-.64l2.31 1.595 2.825-2.825-1.595-2.31a1 1 0 01.64-1.555zM12 15a3 3 0 110-6 3 3 0 010 6z","fill-rule":"evenodd"})):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M14 1l.5 2.75a.992.992 0 001.448.71l.102-.06 2.3-1.6 2.85 2.85-1.6 2.3c-.378.567-.087 1.312.537 1.52l.113.03L23 10v4l-2.75.5a.992.992 0 00-.71 1.448l.06.102 1.6 2.3-2.85 2.85-2.3-1.6c-.567-.378-1.312-.087-1.52.537l-.03.113L14 23h-4l-.5-2.75c-.142-.661-.863-1.01-1.448-.71l-.102.06-2.3 1.6-2.85-2.85 1.6-2.3c.378-.567.087-1.312-.537-1.52l-.113-.03L1 14v-4l2.75-.5a.992.992 0 00.71-1.448L4.4 7.95l-1.6-2.3L5.65 2.8l2.3 1.6c.567.378 1.312.087 1.52-.537l.03-.113L10 1h4zm-1.25 1.5h-1.5l-.3 1.5c-.2 1.2-1.25 2.05-2.45 2.05-.438 0-.875-.115-1.246-.345L5.8 4.7 4.75 5.75l.9 1.3c.464.65.584 1.472.318 2.227L5.9 9.45c-.279.743-.902 1.27-1.67 1.462l-.18.038-1.55.3v1.5l1.55.25c.85.15 1.5.7 1.85 1.5a2.426 2.426 0 01-.149 2.247l-.101.153-.9 1.3 1.05 1.05 1.3-.9c.4-.3.9-.45 1.4-.45 1.145 0 2.154.774 2.418 1.889l.332 1.711h1.5l.3-1.55c.2-1.2 1.25-2.05 2.45-2.05.438 0 .875.115 1.246.345L18.2 19.25l1.05-1.05-.9-1.3c-.5-.7-.55-1.6-.25-2.3.279-.743.902-1.27 1.67-1.462l.18-.038 1.55-.3v-1.5l-1.55-.3c-.85-.15-1.5-.7-1.85-1.5a2.426 2.426 0 01.149-2.247l.101-.153.9-1.3-1.05-1.05-1.3.9c-.4.3-.9.45-1.4.45-1.145 0-2.154-.774-2.418-1.889L12.75 2.5zM12 9a3 3 0 110 6 3 3 0 010-6z","fill-rule":"evenodd"})))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ServiceSettings}();ServiceSettings.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";var MenuFlyoutItem=function(){function MenuFlyoutItem(hostRef){_classCallCheck(this,MenuFlyoutItem),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scaleSelect=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-select",7),this.scaleSelectLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleSelect",7),this.cascade=!1,this.active=!1,this.checked=!1,this.disabled=!1,this.hasSlotSublist=!1}var _triggerEvent;return _createClass(MenuFlyoutItem,[{key:"triggerEvent",value:(_triggerEvent=function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(regeneratorRuntime.mark((function _callee(event){var closeOnSelect,key,sublist,detail,_args=arguments;return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(closeOnSelect=!(_args.length>1&&void 0!==_args[1])||_args[1],key=event.key,!this.disabled){_context.next=4;break}return _context.abrupt("return");case 4:if("ArrowRight"!==key||this.hasSlotSublist){_context.next=6;break}return _context.abrupt("return");case 6:if(!this.hasSlotSublist){_context.next=10;break}return(sublist=this.hostElement.querySelector('[slot="sublist"]')).hasAttribute("opened")?sublist.removeAttribute("opened"):this.openSublist(),_context.abrupt("return");case 10:detail={eventType:event.type,key:key,item:this.hostElement,closeOnSelect:closeOnSelect,originalEvent:event},Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(this,"scaleSelect",detail);case 12:case"end":return _context.stop()}}),_callee,this)}))),function triggerEvent(_x){return _triggerEvent.apply(this,arguments)})},{key:"connectedCallback",value:function connectedCallback(){this.hasSlotSublist=null!=this.hostElement.querySelector('[slot="sublist"]'),this.hasSlotSublist&&(this.cascade=!0)}},{key:"openSublist",value:function openSublist(){var _this6=this,sublist=this.hostElement.querySelector('[slot="sublist"]');null!=sublist&&(sublist.trigger=function(){return _this6.hostElement},sublist.direction="right",sublist.open())}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("menu-flyout-item",this.disabled&&"menu-flyout-item--disabled",null!=this.checkable&&"menu-flyout-item--checkable",this.active&&"menu-flyout-item--active")}},{key:"render",value:function render(){var checked=this.checked?"true":"false";return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,{role:this.checkable?"menuitem"+this.checkable:"menuitem","aria-checked":null!=this.checkable&&checked,"aria-disabled":this.disabled?"true":void 0,tabindex:"-1"},this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:this.getCssClassMap(),part:"base"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{part:"prefix",class:"menu-flyout-item__prefix"},null==this.checkable?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"prefix"}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-action-checkmark",{class:"menu-flyout-item__check",size:16})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{part:"label",class:"menu-flyout-item__label"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",null)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{part:"suffix",class:"menu-flyout-item__suffix"},this.cascade?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-right",{class:"menu-flyout-item__cascade",size:16}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"suffix"}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"sublist"}))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),MenuFlyoutItem}();MenuFlyoutItem.style=":host{--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);display:block;position:relative;outline-color:transparent;padding-left:var(--telekom-spacing-composition-space-02);padding-right:var(--telekom-spacing-composition-space-02);--_min-width:fit-content;--_min-width-moz:-moz-fit-content}*{-webkit-tap-highlight-color:rgba(255, 255, 255, 0)}.menu-flyout-item{position:relative;display:flex;align-items:stretch;text-align:left;font-size:var(--telekom-typography-font-size-body);line-height:2.635em;padding:0\n    calc(\n      var(--telekom-spacing-composition-space-08) -\n        var(--telekom-spacing-composition-space-02)\n    );user-select:none;white-space:nowrap;border-radius:0;cursor:pointer;color:var(--telekom-color-text-and-icon-standard);max-width:calc(\n    100vw - 2 * var(--telekom-spacing-composition-space-08) - 2 * 10px\n  );overflow:hidden;min-width:var(--_min-width-moz);min-width:var(--_min-width)}.menu-flyout-item:focus:not(.menu-flyout-item--disabled),.menu-flyout-item:hover:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-primary-hovered)}:host(:focus) .menu-flyout-item:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-standard)}:host(:focus) .menu-flyout-item:hover:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-primary-hovered)}:host(:focus){outline:none}:host(:focus) .menu-flyout-item{outline:var(--focus-outline);border-radius:var(--telekom-radius-small)}:host(:active) .menu-flyout-item:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-primary-pressed)}:host([aria-expanded='true']) .menu-flyout-item{color:var(--telekom-color-text-and-icon-primary-standard)}.menu-flyout-item--disabled{outline:none;color:var(--telekom-color-text-and-icon-disabled);cursor:not-allowed}:host([active])::before{content:'';display:block;position:absolute;top:0;left:0;height:100%;width:0;background-color:var(--telekom-color-primary-standard);border-left:var(--telekom-spacing-composition-space-02) solid transparent}.menu-flyout-item--active{color:var(--telekom-color-text-and-icon-primary-standard)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.menu-flyout-item--disabled:not(.menu-flyout-item--disabled),.menu-flyout-item--active:not(.menu-flyout-item--disabled){color:white;stroke:white}}.menu-flyout-item__label{flex:1 1 0;overflow:hidden;text-overflow:ellipsis}.menu-flyout-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-flyout-item__check,slot[name='prefix']::slotted(:last-of-type){margin-right:var(--telekom-spacing-composition-space-04)}.menu-flyout-item__check{visibility:hidden}:host([aria-checked='true']) .menu-flyout-item__check{visibility:visible}.menu-flyout-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-flyout-item__cascade,slot[name='suffix']::slotted(:first-of-type){margin-left:var(--telekom-spacing-composition-space-06)}";var name="pagination",Pagination=function(){function Pagination(hostRef){_classCallCheck(this,Pagination),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scalePagination=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-pagination",7),this.scalePaginationLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scalePagination",7),this.hideBorders=!1,this.hideBorder=!1,this.pageSize=10,this.startElement=0,this.totalElements=1,this.small=!1,this.ariaLabelFirstPage="Go to first page",this.ariaLabelNextPage="Go to next page",this.ariaLabelPreviousPage="Go to previous page",this.ariaLabelLastPage="Go to last page",this.maxWidth=100}return _createClass(Pagination,[{key:"componentWillLoad",value:function componentWillLoad(){this.calculateWidth()}},{key:"componentWillUpdate",value:function componentWillUpdate(){}},{key:"componentDidRender",value:function componentDidRender(){!1!==this.hideBorders&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "hideBorders" is deprecated. Please use the "hideBorder" property!',type:"warn",source:this.hostElement}),!1!==this.small&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "small" is deprecated. Please use css overwrite!',type:"warn",source:this.hostElement}),this.size&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "size" is deprecated. Please use css overwrite!',type:"warn",source:this.hostElement})}},{key:"componentDidLoad",value:function componentDidLoad(){}},{key:"componentDidUpdate",value:function componentDidUpdate(){}},{key:"disconnectedCallback",value:function disconnectedCallback(){}},{key:"calculateWidth",value:function calculateWidth(){this.maxWidth=9*(3*this.totalElements.toString().length+3)}},{key:"goFirstPage",value:function goFirstPage(){this.startElement=0,this.emitUpdate("FIRST")}},{key:"goPreviousPage",value:function goPreviousPage(){this.startElement-=Math.min(this.pageSize,this.startElement),this.emitUpdate("PREVIOUS")}},{key:"goNextPage",value:function goNextPage(){this.startElement+=this.pageSize,this.emitUpdate("NEXT")}},{key:"goLastPage",value:function goLastPage(){var p=this.pageSize;this.startElement=Math.ceil((this.totalElements-p)/p)*p,this.emitUpdate("LAST")}},{key:"emitUpdate",value:function emitUpdate(direction){var data={startElement:this.startElement,direction:direction};Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(this,"scalePagination",data)}},{key:"render",value:function render(){var _this7=this,total=this.totalElements,start=this.startElement+1,end=Math.min(this.startElement+this.pageSize,total),isAtStart=1===start,isAtEnd=end===total;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:this.getBasePartMap(),class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"info-responsive",class:name+"__info-responsive"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",null,start,"-",end)," ","/ ",total),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:name+"__button-wrapper"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"info",class:name+"__info",style:{width:this.maxWidth+"px"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",null,start,"-",end)," ","/ ",total),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("button",{class:name+"__first-prompt",part:"first-prompt",disabled:isAtStart,onClick:function onClick(){return _this7.goFirstPage()},"aria-label":this.ariaLabelFirstPage},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-double-left",{size:20,decorative:!0})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("button",{class:name+"__prev-prompt",part:"prev-prompt",disabled:isAtStart,onClick:function onClick(){return _this7.goPreviousPage()},"aria-label":this.ariaLabelPreviousPage},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-left",{size:20,decorative:!0})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("button",{class:name+"__next-prompt",part:"next-prompt",disabled:isAtEnd,onClick:function onClick(){return _this7.goNextPage()},"aria-label":this.ariaLabelNextPage},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-right",{size:20,decorative:!0})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("button",{class:name+"__last-prompt",part:"last-prompt",disabled:isAtEnd,onClick:function onClick(){return _this7.goLastPage()},"aria-label":this.ariaLabelLastPage},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-double-right",{size:20,decorative:!0})))))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":name+"--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)(name,(this.hideBorder||this.hideBorders)&&prefix+"hide-borders")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}],[{key:"watchers",get:function get(){return{totalElements:["calculateWidth"]}}}]),Pagination}();Pagination.style=":host{--color:var(--telekom-color-text-and-icon-standard);--radius:var(--telekom-radius-standard);--font-size:var(--telekom-typography-font-size-small);--border:1px solid var(--telekom-color-ui-faint);--color-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-active:var(--telekom-color-text-and-icon-primary-pressed);--color-button:var(--telekom-color-ui-subtle);--border-button:var(--border);--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--radius-first-prompt:var(--radius) 0 0 var(--radius);--radius-last-prompt:0 var(--radius) var(--radius) 0;--radius-first-prompt-stack:0 0 0 var(--radius);--radius-last-prompt-stack:0 0 var(--radius) 0;--stroke-svg:var(--telekom-color-ui-extra-strong);--stroke-svg-high-contrast:#fff;--width-button:44px;--padding-info:var(--telekom-spacing-composition-space-04);--height-button:44px;--line-height-info:calc(var(--height-button) - 2px)}.pagination{display:flex;overflow:auto;flex-wrap:wrap}.pagination__info,.pagination__info-responsive{color:var(--color);text-align:center;font-size:var(--font-size);font-weight:var(--telekom-typography-font-weight-medium);line-height:var(--line-height-info);padding:0 var(--padding-info);border:var(--border);flex-shrink:0;border-left:0;border-right:0;white-space:nowrap;order:1}.pagination__info-responsive{display:none}.pagination__info span,.pagination__info-responsive span{color:var(--telekom-color-text-and-icon-primary-standard);font-weight:var(--telekom-typography-font-weight-bold)}button{display:flex;flex-shrink:0;justify-content:center;align-items:center;padding:0;margin:0;height:var(--height-button);width:var(--width-button);color:var(--color-button);background:none;border:var(--border-button)}button:focus{outline:var(--focus-outline);outline-offset:-3px}.pagination__first-prompt{border-radius:var(--radius-first-prompt);margin-right:-1px}.pagination__last-prompt{border-radius:var(--radius-last-prompt);margin-left:-1px;order:2}.pagination__next-prompt{order:2}button svg{display:block}button:not(:disabled){cursor:pointer}button:not(:disabled) svg{color:var(--stroke-svg)}button:disabled svg{color:var(--telekom-color-text-and-icon-disabled)}button:not(:disabled):hover{border-color:var(--telekom-color-primary-hovered);z-index:1}button:not(:disabled):hover svg{color:var(--color-hover)}button:not(:disabled):active{border-color:var(--color-active);z-index:1}button:not(:disabled):active svg{color:var(--color-active)}.pagination--hide-borders .pagination__info,.pagination--hide-borders .pagination__info-responsive{border:0}.pagination--hide-borders .pagination__info-responsive{border-bottom:var(--border)}.pagination--hide-borders button{border-radius:0;border-top-width:0;border-bottom-width:0}.pagination--hide-borders .pagination__first-prompt{border-left-color:transparent}.pagination--hide-borders .pagination__last-prompt{border-right-color:transparent}.pagination--hide-borders button:not(:disabled):hover{border-width:1px;border-color:var(--telekom-color-primary-hovered)}.pagination__button-wrapper{display:flex}@media screen and (forced-colors: active), (-ms-high-contrast: active){button:not(:disabled) svg{color:var(--stroke-svg-high-contrast)}}@media screen and (max-width: 639px){:host{width:100%}.pagination{flex-direction:column}.pagination__info-responsive{display:initial;order:0;overflow:auto;border-left:var(--border);border-right:var(--border);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;line-height:var(--line-height-info)}.pagination__info{display:none;line-height:var(--line-height-info)}.pagination__first-prompt{border-radius:var(--radius-first-prompt-stack)}.pagination__last-prompt{border-radius:var(--radius-last-prompt-stack)}.pagination__next-prompt{margin-left:-1px}button{flex:1;height:var(--height-button)}.pagination--hide-borders .pagination__first-prompt{border-left-width:0}.pagination--hide-borders .pagination__last-prompt{border-right-width:0}}";var i$1=0,ProgressBar=function(){function ProgressBar(hostRef){var _this8=this;_classCallCheck(this,ProgressBar),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.busy=!1,this.percentage=0,this.percentageStart=0,this.showStatus=!0,this.transitions=function(width,widthStart){return"\n    @keyframes showProgress {\n      from {\n        width: "+widthStart+"%;\n      }\n      to {\n        width: "+width+"%;\n      }\n    }\n  "},this.progressStyle=function(){var customColor=_this8.customColor?{"--background":_this8.customColor}:{};return Object.assign({"--progress":_this8.disabled?"100%":_this8.percentage+"%"},customColor)}}return _createClass(ProgressBar,[{key:"componentWillLoad",value:function componentWillLoad(){null==this.progressBarId&&(this.progressBarId="progress-bar-"+i$1++),this.disabled&&(this.showStatus=!1)}},{key:"componentWillUpdate",value:function componentWillUpdate(){}},{key:"disconnectedCallback",value:function disconnectedCallback(){}},{key:"componentDidRender",value:function componentDidRender(){void 0!==this.customColor&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "customColor" is deprecated. \n          Please use css variable "--background" to set the progress bar background color;\n          e.g. <scale-progress-bar percentage="20" style="--background: green"></scale-progress-bar>',type:"warn",source:this.hostElement})}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.transitions(this.percentage,this.percentageStart)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:this.getBasePartMap(),class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"progress-bar__top-container"},this.label?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("label",{part:"label",class:"progress-bar__label",htmlFor:this.progressBarId},this.label):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",null," "),!!this.showStatus&&!this.hasError&&this.percentage<=100&&100!==this.percentage&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"status",class:"progress-bar__status","aria-hidden":"true"},this.percentage,"%"),this.hasError?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"progress-bar__icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-alert-error",{size:16})):this.percentage>=100?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"progress-bar__icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-action-success",{size:16})):null),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"wrapper",class:"progress-bar__wrapper"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"outer",class:"progress-bar__outer",role:"progressbar","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":this.percentage,"aria-busy":this.busy,"aria-valuetext":this.percentage+"%","aria-label":this.label,id:this.progressBarId},this.percentage>0&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"inner",class:"progress-bar__inner",style:this.progressStyle()})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"icon"}))),!!this.statusDescription&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"status-description",class:"progress-bar__status-description",role:"alert"},this.statusDescription),!this.mute&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{"aria-live":"polite",class:"progress-bar__aria-live"},this.percentage!==10*Math.round(this.percentage/10)?10*Math.round(this.percentage/10)+"%":null))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"progress-bar--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("progress-bar",this.hasError&&prefix+"has-error",this.disabled&&prefix+"disabled",this.percentage>=100&&prefix+"completed")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ProgressBar}();ProgressBar.style=":host{--track-color:var(--telekom-color-ui-faint);--bar-color:var(--telekom-color-primary-standard);--icon-color-error:var(--telekom-color-text-and-icon-functional-danger);--track-color-error:var(--telekom-color-functional-danger-subtle);--bar-color-error:var(--telekom-color-functional-danger-standard);--icon-color-success:var(--telekom-color-text-and-icon-functional-success);--track-color-success:var(--telekom-color-functional-success-subtle);--bar-color-success:var(--telekom-color-functional-success-standard);--bar-color-disabled:var(--telekom-color-ui-disabled);--color-disabled:var(--telekom-color-text-and-icon-disabled);--progress-bar-outer-size:6px;--progress-bar-inner-size:var(--telekom-spacing-composition-space-03);--font-label:var(--telekom-text-style-ui);--color-label:var(--telekom-color-text-and-icon-standard);--color-status-description:var(--telekom-color-text-and-icon-additional);--font-status-description:var(--telekom-text-style-small-bold)}.progress-bar{width:100%;max-width:30rem}.progress-bar--disabled{cursor:not-allowed}.progress-bar__top-container{display:flex;justify-content:space-between;align-items:center}.progress-bar--disabled .progress-bar__label,.progress-bar--disabled .progress-bar__status{color:var(--color-disabled)}.progress-bar__label{display:block;padding:var(--telekom-spacing-composition-space-05) 0;color:var(--color-label);font:var(--font-label)}.progress-bar__wrapper{width:100%;display:flex;box-sizing:border-box;align-items:center}.progress-bar__outer{width:100%;height:var(--progress-bar-outer-size);margin-left:0;overflow:hidden;position:relative;border-radius:var(--telekom-radius-pill);background:var(--track-color)}.progress-bar__inner{position:absolute;top:0;left:0;width:var(--progress, 0);height:var(--progress-bar-inner-size);display:flex;align-items:center;white-space:nowrap;justify-content:flex-end;border-radius:var(--telekom-radius-pill);border:1px solid transparent;background:var(--bar-color);transition:width var(--telekom-motion-duration-immediate)\n    var(--telekom-motion-easing-standard)}.progress-bar--disabled .progress-bar__inner{background:var(--bar-color-disabled)}.progress-bar__status{padding:var(--telekom-spacing-composition-space-05) 0;font:var(--font-label);font-variant-numeric:tabular-nums}.progress-bar--completed .progress-bar__icon{color:var(--icon-color-success)}.progress-bar--completed .progress-bar__outer{background:var(--track-color-success)}.progress-bar--completed .progress-bar__inner{background:var(--bar-color-success)}.progress-bar--has-error .progress-bar__icon{color:var(--icon-color-error)}.progress-bar--has-error .progress-bar__outer{background:var(--track-color-error)}.progress-bar--has-error .progress-bar__inner{background:var(--bar-color-error)}.progress-bar__status-description{color:var(--color-status-description);font:var(--font-status-description);margin-top:var(--telekom-spacing-composition-space-04)}.progress-bar__aria-live{clip:rect(0 0 0 0);width:1px;border:0;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute}";var i=0,isFocusVisibleSupported=Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.c)(":focus-visible"),Switch=function(){function Switch(hostRef){_classCallCheck(this,Switch),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleChange",7),this.checked=!1,this.disabled=!1,this.size="large"}return _createClass(Switch,[{key:"componentWillLoad",value:function componentWillLoad(){null==this.inputId&&(this.inputId="switch-"+i++)}},{key:"render",value:function render(){var _this9=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("label",{id:this.inputId+"-label",class:"switch__wrapper"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("input",{type:"checkbox",name:this.name,class:"switch__control",checked:this.checked,disabled:this.disabled,"aria-labelledby":this.inputId+"-label",id:this.inputId,onChange:function onChange(event){_this9.checked=event.target.checked,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this9,"scaleChange",{value:_this9.checked})}}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"switch__toggle","aria-hidden":"true"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"switch__thumb"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-action-checkmark",{size:12,decorative:!0,selected:!0})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"switch__io-text"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",null,this.checked?"I":"0"))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"switch__toggle--overlay","aria-hidden":"true"}),this.label&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"switch__label-text"},this.label))))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("switch",this.checked&&"switch--checked",this.disabled&&"switch--disabled",this.size&&"switch--size-"+this.size,isFocusVisibleSupported&&"switch--focus-visible-supported",!isFocusVisibleSupported&&"switch--focus-visible-not-supported")}}]),Switch}();Switch.style="scale-switch{--width:42px;--height:24px;--offset:2px;--radius:1em;--transition-duration:var(--telekom-motion-duration-immediate);--transition-easing:var(--telekom-motion-easing-standard);--shadow-thumb:0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24),\n    0 4px 12px 0 rgba(0, 0, 0, 0.26);--spacing-x-label:var(--telekom-spacing-composition-space-04);--font-label:var(--telekom-text-style-ui);--font-io-text:var(--telekom-text-style-small-bold);--color-label:var(--telekom-color-text-and-icon-standard)}.switch{--_background:var(--telekom-color-ui-faint);--_color-thumb:var(--telekom-color-ui-white, #fff);--_overlay-background:transparent;display:inline-block;position:relative}.switch__control{position:absolute;margin:0;top:0;width:var(--width);height:var(--height);opacity:0}.switch__wrapper{display:flex;align-items:center;cursor:pointer}.switch__toggle{position:relative;width:var(--width);height:var(--height);background:var(--_background);border-radius:var(--radius);transition-property:background;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-easing)}.switch__toggle--overlay{position:absolute;width:var(--width);height:var(--height);border-radius:var(--radius);background:var(--_overlay-background)}[data-platform='android'] .switch__toggle--overlay{display:none}.switch:hover{--_overlay-background:var(--telekom-color-ui-state-fill-hovered)}.switch:active{--_overlay-background:var(--telekom-color-ui-state-fill-pressed)}.switch--checked{--_background:var(--telekom-color-primary-standard)}[data-platform='android'] .switch.switch--checked{--_background:var(--telekom-color-primary-standard);--_color-thumb:var(--telekom-color-ui-white)}[data-platform='android'] .switch{--_color-thumb:var(--telekom-color-ui-strong)}[data-platform='android'] .switch:hover{--_background:var(--telekom-color-ui-faint)}[data-platform='android'] .switch:active{--_background:var(--telekom-color-ui-faint)}[data-platform='android'] .switch:hover{--_color-thumb:var(--telekom-color-ui-extra-strong)}[data-platform='android'] .switch:active{--_color-thumb:var(--telekom-color-ui-extra-strong)}[data-platform='android'] .switch--checked:active,[data-platform='android'] .switch--checked:hover{--_color-thumb:var(--telekom-color-ui-white)}[data-platform='android'] .switch--checked:hover,.switch--checked:hover{--_background:var(--telekom-color-primary-hovered)}[data-platform='android'] .switch--checked:active,.switch--checked:active{--_background:var(--telekom-color-primary-pressed)}[data-platform='android'] .switch--disabled{--_background:var(--telekom-color-ui-faint);--_color-thumb:var(--telekom-color-ui-border-disabled)}[data-platform='android'] .switch--disabled:hover{--_color-thumb:var(--telekom-color-ui-border-disabled);--_background:var(--telekom-color-ui-faint)}[data-platform='android'] .switch--checked.switch--disabled:hover{--_background:var(--telekom-color-ui-border-disabled);--_color-thumb:var(--telekom-color-ui-faint)}.switch--disabled,.switch--disabled:hover,.switch--disabled:active{--_background:var(--telekom-color-ui-disabled);--_color-thumb:var(--telekom-color-ui-faint);--_overlay-background:transparent}.switch--checked .switch--disabled,.switch--checked .switch--disabled:hover,.switch--checked .switch--disabled:active{--_background:var(--telekom-color-ui-faint);--_color-thumb:var(--telekom-color-ui-disabled);box-shadow:var(--telekom-shadow-raised-standard);--_overlay-background:transparent}[data-platform='android'] .switch--disabled.switch--checked{--_background:var(--telekom-color-ui-border-disabled);--_color-thumb:var(--telekom-color-ui-faint)}.switch--disabled .switch__wrapper{cursor:not-allowed}.switch--disabled .switch__thumb{box-shadow:var(--telekom-shadow-raised-standard)}.switch--size-large{--width:56px;--height:32px}.switch--focus-visible-not-supported :focus~.switch__toggle,:focus-visible~.switch__toggle{outline:var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-focus-standard);outline-offset:var(--telekom-spacing-composition-space-01)}.switch__thumb{--_size:calc(var(--height) - var(--offset) * 2);position:relative;z-index:2;box-sizing:border-box;width:var(--_size);height:var(--_size);aspect-ratio:1 / 1;background:var(--_color-thumb);border-radius:50%;box-shadow:var(--shadow-thumb);margin:var(--offset);transition-property:margin, width, height, background, color;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-easing);color:transparent;border:1px solid rgba(0, 0, 0, 0.04);display:inline-block}.switch--checked .switch__thumb{margin-left:1em;margin-inline-start:calc(var(--width) - var(--height) + var(--offset))}.switch__io-text{position:absolute;z-index:1;top:0;left:0;display:flex;justify-content:center;align-items:center;width:50%;height:var(--height);margin-left:calc(50% - var(--offset));font:var(--font-io-text);line-height:var(--telekom-typography-line-spacing-none)}.switch--size-large .switch__io-text{margin-top:1px;font:var(--telekom-text-style-caption-bold)}.switch--checked .switch__io-text{margin-left:var(--offset);color:var(--telekom-color-text-and-icon-white-standard)}.switch--disabled .switch__io-text{color:var(--telekom-color-text-and-icon-disabled)}.switch__label-text{font:var(--font-label);margin-inline-start:var(--spacing-x-label);color:var(--color-label)}[data-platform='android'] scale-switch{--width:56px;--height:32px;--offset:7px}[data-platform='android'] .switch__thumb{width:18px;height:18px}[data-platform='android'] scale-switch:not([disabled]):active .switch__thumb{width:28px;height:28px;--offset:2px}[data-platform='android'] .switch--checked .switch__thumb{width:24px;height:24px;--offset:4px}[data-platform='android'] .switch__thumb{display:flex;justify-content:center;align-items:center;box-shadow:none}scale-switch scale-icon-action-success{display:none !important}[data-platform='android'] .switch--checked scale-icon-action-success{position:absolute;display:inline-block !important;margin-top:2px;margin-left:1px}[data-platform='android'] .switch--checked .switch__thumb{color:var(--_background)}[data-platform='android'] .switch__io-text{display:none}[data-platform='android'] .switch--checked .switch__thumb{color:var(--telekom-color-primary-standard)}[data-platform='android'] .switch--disabled .switch__thumb{color:var(--telekom-color-ui-strong)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.switch__toggle{border:1px solid}scale-icon-action-checkmark{visibility:hidden !important}}";var Tag=function(){function Tag(hostRef){var _this10=this;_classCallCheck(this,Tag),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scaleClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-close",7),this.scaleCloseLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleClose",7),this.type="standard",this.color="standard",this.href="",this.target="_self",this.dismissable=!1,this.disabled=!1,this.dismissText="dismiss",this.handleClose=function(event){event.preventDefault(),event.stopPropagation(),_this10.disabled||Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this10,"scaleClose",event)}}return _createClass(Tag,[{key:"componentWillUpdate",value:function componentWillUpdate(){}},{key:"disconnectedCallback",value:function disconnectedCallback(){}},{key:"render",value:function render(){var Element=this.href&&!this.disabled?"a":"span",linkProps=this.href?{href:this.href,target:this.target}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(Element,Object.assign({part:this.getBasePartMap(),class:this.getCssClassMap()},linkProps),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",null),this.dismissable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("button",{part:"button-dismissable",disabled:this.disabled,"aria-label":this.dismissText,onClick:this.handleClose},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-action-close",{part:"icon-dismissable",size:16}))))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"tag--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("basePart"===mode?"base":"tag",this.size&&prefix+"size-"+this.size,this.type&&prefix+"type-"+this.type,this.color&&prefix+"color-"+this.color,!!this.href&&prefix+"link",!!this.dismissable&&prefix+"dismissable",!!this.disabled&&prefix+"disabled")}}]),Tag}();Tag.style=":host{--background:var(--telekom-color-ui-faint);--color:var(--telekom-color-text-and-icon-standard);--font:var(--telekom-text-style-caption-bold);--radius:2px;--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--icon-color:var(--telekom-color-text-and-icon-additional);--icon-color-hover:var(--color);--background-disabled:var(--telekom-color-ui-faint);--color-disabled:var(--telekom-color-text-and-icon-disabled);--spacing-dismissable:var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-03);--spacing-dismissable-small:var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-03);--height:24px;--height-small:20px;--border-button-dismissable-focus:1px solid transparent;--box-shadow-button-dismissable-focus:var(--box-shadow-focus);--background-button-dismissable-hover:var(\n    --telekom-color-ui-state-fill-hovered\n  );--background-button-standard-strong-dismissible-hover:var(\n    --telekom-color-ui-state-fill-hovered-inverted\n  );--background-button-standard-dismissible-hover:var(\n    --telekom-color-ui-state-fill-hovered\n  );--background-button-dismissable-active:var(\n    --telekom-color-ui-state-fill-pressed\n  );--height-button-dismissable:20px;--width-button-dismissable:20px;--height-button-dismissable-small:16px;--width-button-dismissable-small:16px;--spacing-small:0 var(--telekom-spacing-composition-space-04);--font-size-small:var(--telekom-typography-font-size-small);--line-height-small:var(--telekom-typography-line-spacing-loose)}.tag{display:inline-flex;outline:none;padding:0 8px;text-align:center;transition:all 0.15s ease-in-out;align-items:center;white-space:nowrap;border-radius:var(--telekom-radius-small);vertical-align:baseline;justify-content:center;font:var(--font);line-height:1;background:var(--background);color:var(--color);cursor:default;height:var(--height)}.tag scale-icon-action-close{color:var(--icon-color)}.tag:not(.tag--disabled) scale-icon-action-close:hover{color:var(--icon-color-hover)}.tag::slotted(*){padding:100px}.tag--dismissable{padding:0 0 0 8px}.tag--dismissable button{border:none;cursor:pointer;height:var(--height-button-dismissable);width:var(--width-button-dismissable);margin:0;outline:none;padding:0;background:transparent;margin:var(--spacing-dismissable);border-radius:var(--radius);align-items:center}.tag--dismissable scale-icon-action-close{display:flex !important;align-items:center;justify-content:center}.tag--dismissable button:focus{justify-content:center;outline:var(--focus-outline);outline-offset:1px}.tag--dismissable:not(.tag--disabled) button:hover{background:var(--background-button-dismissable-hover)}.tag--dismissable.tag--color-standard:not(.tag--disabled) button:hover{background:var(--background-button-standard-dismissible-hover)}.tag--dismissable.tag--type-strong.tag--color-standard:not(.tag--disabled) button:hover{background:var(--background-button-standard-strong-dismissible-hover)}.tag--dismissable button:active{background:var(--background-button-dismissable-active)}.tag--dismissable.tag--color-standard button:active{background:var(--background-button-standard-dismissible-hover)}.tag--dismissable.tag--type-strong.tag--color-standard button:active{background:var(--background-button-standard-strong-dismissible-hover)}.tag--size-small{font-size:var(--font-size-small);padding:0 6px;height:var(--height-small)}.tag--size-small.tag--dismissable{padding-right:0px}.tag--size-small.tag--dismissable button{height:var(--height-button-dismissable-small);width:var(--width-button-dismissable-small);margin:var(--spacing-dismissable-small)}.tag--disabled{background-color:var(--telekom-color-ui-faint) !important;color:var(--color-disabled) !important;pointer-events:none}.tag--disabled scale-icon-action-close{color:var(--color-disabled) !important;pointer-events:none}.tag--link{text-decoration:none}.tag--link:focus{outline:var(--focus-outline)}.tag--link{background:var(--background-secondary)}.tag--link:hover{background:var(--background-secondary)}.tag--type-standard.tag--color-cyan{background-color:var(--telekom-color-additional-cyan-subtle);color:var(--telekom-color-text-and-icon-on-subtle-cyan)}.tag--type-standard.tag--color-cyan.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-cyan)}.tag--type-standard.tag--color-yellow{background-color:var(--telekom-color-additional-yellow-subtle);color:var(--telekom-color-text-and-icon-on-subtle-yellow)}.tag--type-standard.tag--color-yellow.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-yellow)}.tag--type-standard.tag--color-green{background-color:var(--telekom-color-functional-success-subtle);color:var(--telekom-color-text-and-icon-on-subtle-success)}.tag--type-standard.tag--color-green.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-success)}.tag--type-standard.tag--color-orange{background-color:var(--telekom-color-functional-warning-subtle);color:var(--telekom-color-text-and-icon-on-subtle-warning)}.tag--type-standard.tag--color-orange.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-warning)}.tag--type-standard.tag--color-red{background-color:var(--telekom-color-functional-danger-subtle);color:var(--telekom-color-text-and-icon-on-subtle-danger)}.tag--type-standard.tag--color-red.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-danger)}.tag--type-standard.tag--color-violet{background-color:var(--telekom-color-additional-violet-subtle);color:var(--telekom-color-text-and-icon-on-subtle-violet)}.tag--type-standard.tag--color-violet.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-violet)}.tag--type-standard.tag--color-brown{background-color:var(--telekom-color-additional-brown-subtle);color:var(--telekom-color-text-and-icon-on-subtle-brown)}.tag--type-standard.tag--color-brown.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-brown)}.tag--type-standard.tag--color-olive{background-color:var(--telekom-color-additional-olive-subtle);color:var(--telekom-color-text-and-icon-on-subtle-olive)}.tag--type-standard.tag--color-olive.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-olive)}.tag--type-standard.tag--color-teal{background-color:var(--telekom-color-additional-teal-subtle);color:var(--telekom-color-text-and-icon-on-subtle-teal)}.tag--type-standard.tag--color-teal.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-teal)}.tag--type-strong.tag--color-standard{background-color:var(--telekom-color-ui-extra-strong);color:var(--telekom-color-text-and-icon-inverted-standard)}.tag--type-strong.tag--color-standard.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-inverted-additional)}.tag--type-strong.tag--color-cyan{background-color:var(--telekom-color-additional-cyan-400);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-cyan.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-yellow{background-color:var(--telekom-color-additional-yellow-400);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-yellow.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-green{background-color:var(--telekom-color-functional-success-standard);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-green.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-orange{background-color:var(--telekom-color-functional-warning-standard);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-orange.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-red{background-color:var(--telekom-color-functional-danger-standard);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-red.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-violet{background-color:var(--telekom-color-additional-violet-300);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-violet.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-brown{background-color:var(--telekom-color-additional-brown-400);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-brown.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-olive{background-color:var(--telekom-color-additional-olive-400);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-olive.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-teal{background-color:var(--telekom-color-additional-teal-400);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-teal.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}";var TextField=function(){function TextField(hostRef){var _this11=this;_classCallCheck(this,TextField),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scaleInput=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-input",7),this.scaleInputLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleInput",7),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleChange",7),this.scaleFocus=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-focus",7),this.scaleFocusLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleFocus",7),this.scaleBlur=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-blur",7),this.scaleBlurLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleBlur",7),this.scaleKeyDown=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-keydown",7),this.scaleKeyDownLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleKeydown",7),this.type="text",this.inputModeType="text",this.name="",this.label="",this.helperText="",this.status="",this.invalid=!1,this.variant="informational",this.placeholder="",this.value="",this.step="1",this.hideLabelVisually=!1,this.experimentalControlled=!1,this.hasFocus=!1,this.internalId=Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.e)(),this.handleInput=function(event){var target=event.target;_this11.experimentalControlled&&(_this11.hostElement.querySelector("input").value=String(_this11.value),_this11.forceUpdate=String(Date.now())),target&&(_this11.value=target.value||"",_this11.emitChange()),Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this11,"scaleInput",event)},this.handleChange=function(event){var target=event.target;target&&(_this11.value=target.value||"",_this11.emitChange())},this.handleFocus=function(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this11,"scaleFocus"),_this11.hasFocus=!0},this.handleBlur=function(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this11,"scaleBlur"),_this11.hasFocus=!1},this.handleKeyDown=function(event){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this11,"scaleKeyDown",event)}}return _createClass(TextField,[{key:"componentWillLoad",value:function componentWillLoad(){null==this.inputId&&(this.inputId="input-text-field-"+this.internalId)}},{key:"componentDidRender",value:function componentDidRender(){var value=null==this.value?"":this.value.toString(),input=this.hostElement.querySelector("input");this.experimentalControlled&&input.value.toString()!==value&&(input.value=value),""!==this.status&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "status" is deprecated. Please use the "invalid" property!',type:"warn",source:this.hostElement}),this.size&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "size" is deprecated. Please use css overwrites for a small version!',type:"warn",source:this.hostElement})}},{key:"emitChange",value:function emitChange(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(this,"scaleChange",{value:null==this.value?this.value:this.value.toString()})}},{key:"render",value:function render(){var ariaInvalidAttr="error"===this.status||this.invalid?{"aria-invalid":"true"}:{},helperTextId="helper-message-"+this.internalId,ariaDescribedByAttr={"aria-describedBy":helperTextId},ariaDetailedById={"aria-details":this.ariaDetailedId};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("label",{class:"text-field__label",htmlFor:this.inputId},this.label),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("input",Object.assign({type:this.type,inputMode:this.inputModeType,class:"text-field__control",value:this.value},this.name?{name:this.name}:{},this.inputAutofocus?{autofocus:"true"}:{},{required:this.required,minLength:this.minLength,maxLength:this.maxLength,min:this.min,max:this.max,id:this.inputId,list:this.list,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown},this.placeholder&&!this.readonly?{placeholder:this.placeholder}:{},{disabled:this.disabled,readonly:this.readonly,autocomplete:this.inputAutocomplete},ariaDetailedById,ariaInvalidAttr,this.helperText?ariaDescribedByAttr:{},["number","date","month","week","time","datetime-local"].includes(this.type)?{step:this.step}:{})),(!!this.helperText||!!this.counter)&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"text-field__meta","aria-live":"polite","aria-relevant":"additions removals"},this.helperText&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-helper-text",{id:helperTextId,helperText:this.helperText,variant:this.invalid?"danger":this.variant}),this.counter&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"text-field__counter"},this.value?String(this.value).length:0," /"," ",this.maxLength))))}},{key:"getCssClassMap",value:function getCssClassMap(){var animated=null!=this.value&&""!==this.value||["date","month","week","time","datetime-local"].includes(this.type);return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("text-field",this.type&&"text-field--type-"+this.type,this.hasFocus&&"text-field--has-focus",this.disabled&&"text-field--disabled",this.transparent&&"text-field--transparent",this.status&&"text-field--status-"+this.status,this.invalid&&"text-field--variant-danger",this.variant&&"text-field--variant-"+this.variant,this.helperText&&"text-field--helper-text",this.readonly&&"text-field--readonly",this.hideLabelVisually&&"text-field--hide-label",animated&&"animated")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),TextField}();TextField.style="scale-text-field{--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);--radius:var(--telekom-radius-standard);--border:var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);--border-error:var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-standard);--border-success:var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-success-standard);--border-warning:var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-warning-standard);--border-color-hover:var(--telekom-color-ui-border-hovered);--border-color-focus:var(--telekom-color-ui-border-hovered);--border-color-disabled:var(--telekom-color-ui-border-disabled);--background-color-hover:var(--telekom-color-ui-state-fill-hovered);--background-color-disabled:none;--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--height:44px;--spacing-x:var(--telekom-spacing-composition-space-05);--color-disabled:var(--telekom-color-text-and-icon-disabled);--background-disabled:none;--border-color-readonly:var(--telekom-color-ui-border-disabled);--background-readonly:var(--telekom-color-ui-disabled);--font-weight-meta:var(--telekom-line-weight-bold);--font-size-meta:var(--telekom-typography-font-size-small);--line-height-meta:var(--telekom-typography-line-spacing-standard);--spacing-y-meta:var(--telekom-spacing-composition-space-03);--color-meta:var(--telekom-color-text-and-icon-standard);--color-meta-error:var(--telekom-color-text-and-icon-functional-danger);--spacing-control:1.125rem\n    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem\n    calc(0.75rem - var(--telekom-spacing-composition-space-01));--transition-control:var(--transition);--background-control:var(--telekom-color-ui-state-fill-standard);--margin-bottom-control:var(--telekom-spacing-composition-space-03);--transition-counter:var(--transition);--color-counter-error:var(--color-meta-error);--font-size-helper-text:var(--telekom-typography-font-size-small);--line-height-helper-text:1.35;--font-weight-helper-text:var(--telekom-typography-font-weight-bold);--color-helper-text:var(\n    --telekom-color-text-and-icon-functional-informational\n  );--color-helper-text-error:var(--color-meta-error);--color-helper-text-success:var(\n    --telekom-color-text-and-icon-functional-success\n  );--color-helper-text-warning:var(\n    --telekom-color-text-and-icon-functional-warning\n  );--color-helper-text-neutral:var(--telekom-color-text-and-icon-additional);--helper-text-icon-size:11px;--transition-placeholder:var(--transition);--color-placeholder:var(--telekom-color-text-and-icon-additional);--color-label:var(--telekom-color-text-and-icon-additional);--color-label-readonly:var(--telekom-color-text-and-icon-standard);--z-index-label:var(--scl-z-index-10);--transition-label:var(--transition)}.text-field{position:relative}.text-field .text-field__control{width:100%;height:var(--height);margin:0;display:flex;outline:none;padding:var(--spacing-control);z-index:1;box-sizing:border-box;transition:var(--transition-control);font:var(--telekom-text-style-body);border-radius:var(--radius);border:var(--border);background-color:var(--background-control);color:var(--color-meta)}.text-field--hide-label .text-field__control{padding:5px var(--telekom-spacing-composition-space-12) 5px\n    calc(var(--spacing-x) - 1px)}.text-field--hide-label .text-field__label{visibility:hidden}.text-field.text-field--helper-text .text-field__control{margin-bottom:var(--margin-bottom-control)}.text-field .text-field__counter{display:flex;transition:var(--transition-counter);margin-left:auto;justify-content:flex-end;font:var(--telekom-text-style-small);color:var(--telekom-color-text-and-icon-standard)}.text-field scale-helper-text{--color-informational:var(--color-helper-text);--color-warning:var(--color-helper-text-warning);--color-danger:var(--color-helper-text-error);--color-success:var(--color-helper-text-success);--color-neutral:var(--color-helper-text-neutral);--font-size:var(--font-size-helper-text);--font-weight:var(--font-weight-helper-text);--line-height:var(--line-height-helper-text);--icon-size-helper-text:var(--helper-text-icon-size);font-weight:var(--telekom-typography-font-weight-bold);display:flex}.text-field .text-field__meta{display:flex;justify-content:space-between;margin-top:var(--spacing-y-meta);color:var(--color-meta)}.text-field:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover{border-color:var(--border-color-hover);background-color:var(--background-color-hover)}.text-field:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus{border-color:var(--border-color-focus);outline:var(--focus-outline);outline-offset:1px}.text-field:not(.text-field--disabled) .text-field__control:focus::placeholder{color:var(--color-placeholder)}.text-field .text-field__control::placeholder,.text-field ::placeholder{color:transparent;transition:var(--transition-placeholder)}.text-field__label{top:0;left:0;color:var(--color-label);display:flex;z-index:var(--z-index-label);position:absolute;transition:var(--transition-label);pointer-events:none;font:var(--telekom-text-style-ui);transform:translate(var(--spacing-x), 0.875rem)}.text-field--has-focus:not(.text-field--readonly) .text-field__label,.animated .text-field__label{font:var(--telekom-text-style-small-bold);transform:translate(\n    var(--spacing-x),\n    calc(0.25rem + var(--telekom-spacing-composition-space-01))\n  )}.text-field--variant-danger .text-field__control{border:var(--border-error)}.text-field--variant-success .text-field__control{border:var(--border-success)}.text-field--variant-warning .text-field__control{border:var(--border-warning)}.text-field--variant-danger:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover,.text-field--variant-danger:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus{border-color:var(--telekom-color-functional-danger-hovered)}.text-field--variant-success:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover,.text-field--variant-success:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus{border-color:var(--telekom-color-functional-success-hovered)}.text-field--variant-warning:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover,.text-field--variant-warning:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus{border-color:var(--telekom-color-functional-warning-hovered)}.text-field--variant-danger .text-field__helper-text{color:var(--color-helper-text-error)}.text-field--variant-danger .text-field__counter{color:var(--color-counter-error)}.text-field--variant-success .text-field__helper-text{color:var(--color-helper-text-success)}.text-field--variant-success .text-field__counter{color:var(--telekom-color-text-and-icon-functional-success)}.text-field--variant-warning .text-field__helper-text{color:var(--color-helper-text-warning)}.text-field--variant-warning .text-field__counter{color:var(--telekom-color-text-and-icon-functional-warning)}.text-field--transparent .text-field__control{background-color:transparent}.text-field--readonly input,.text-field--readonly .text-field__control{color:var(--color-label-readonly);border:none;background:var(--background-readonly)}.text-field--readonly .text-field__control:focus{outline:var(--focus-outline);outline-offset:1px}.text-field--disabled label,.text-field--disabled .text-field__label,.text-field--disabled input,.text-field--disabled .text-field__control,.text-field--disabled .text-field__meta,.text-field--disabled .text-field__counter,.text-field--disabled .text-field__helper-text{cursor:not-allowed;border-color:var(--border-color-disabled);background-color:var(--background-color-disabled);color:var(--color-disabled);background:transparent}.text-field--disabled.animated label.text-field__label{color:var(--color-disabled)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}input[type='number']{-moz-appearance:textfield}input[type='datetime-local']::-webkit-calendar-picker-indicator,input[type='time']::-webkit-calendar-picker-indicator,input[type='date']::-webkit-calendar-picker-indicator,input[type='week']::-webkit-calendar-picker-indicator,input[type='month']::-webkit-calendar-picker-indicator{position:absolute;right:12px}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{color-scheme:dark}@media screen and (forced-colors: active), (-ms-high-contrast: active){.text-field--readonly input,.text-field--readonly .text-field__control{border:1px solid}}"}}]);
-//# sourceMappingURL=34.b9ee6464.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 35.d8aef789.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{"../../node_modules/core-js/modules/es.date.now.js":function(module,exports,__webpack_require__){__webpack_require__("../../node_modules/core-js/internals/export.js")({target:"Date",stat:!0},{now:function now(){return(new Date).getTime()}})},"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-dropdown-select_13.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_dropdown_select",(function(){return DropdownSelect})),__webpack_require__.d(__webpack_exports__,"scale_dropdown_select_item",(function(){return DropdownSelectItem})),__webpack_require__.d(__webpack_exports__,"scale_icon_action_hide_password",(function(){return ActionHidePassword})),__webpack_require__.d(__webpack_exports__,"scale_icon_action_sort",(function(){return ActionSort})),__webpack_require__.d(__webpack_exports__,"scale_icon_content_sort_indicator_down",(function(){return ContentSortIndicatorDown})),__webpack_require__.d(__webpack_exports__,"scale_icon_content_sort_indicator_up",(function(){return ContentSortIndicatorUp})),__webpack_require__.d(__webpack_exports__,"scale_icon_service_settings",(function(){return ServiceSettings})),__webpack_require__.d(__webpack_exports__,"scale_menu_flyout_item",(function(){return MenuFlyoutItem})),__webpack_require__.d(__webpack_exports__,"scale_pagination",(function(){return Pagination})),__webpack_require__.d(__webpack_exports__,"scale_progress_bar",(function(){return ProgressBar})),__webpack_require__.d(__webpack_exports__,"scale_switch",(function(){return Switch})),__webpack_require__.d(__webpack_exports__,"scale_tag",(function(){return Tag})),__webpack_require__.d(__webpack_exports__,"scale_text_field",(function(){return TextField}));__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.trim.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.every.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find-index.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.fill.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.small.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.now.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js"),_floating_ui_dom_esm_43ac86e1_js__WEBPACK_IMPORTED_MODULE_34__=__webpack_require__("../components/dist/esm/floating-ui.dom.esm-43ac86e1.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}var Actions;!function(Actions){Actions.Close="Close",Actions.CloseSelect="CloseSelect",Actions.First="First",Actions.Last="Last",Actions.Next="Next",Actions.Open="Open",Actions.PageDown="PageDown",Actions.PageUp="PageUp",Actions.Previous="Previous",Actions.Select="Select",Actions.Type="Type"}(Actions||(Actions={}));var readValue=function readValue(element){return function isElementValue(x){return"string"==typeof x.value}(element)?element.value:null},readDisabled=function readDisabled(element){var attr=element.getAttribute("disabled");return null!==attr&&""+attr!="false"||!!function isElementDisabled(x){return"boolean"==typeof x.disable}(element)&&element.disable},readOptions=function readOptions(hostElement){return Array.from(hostElement.children).filter((function(x){return"INPUT"!==x.tagName&&!1===x.hidden})).map((function(x){var _a;return{label:x.textContent.trim(),value:null!==(_a=x.getAttribute("value"))&&void 0!==_a?_a:readValue(x),disabled:readDisabled(x),ItemElement:Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{innerHTML:x.outerHTML})}}))};function matchEnabledOptions(){var options=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],filter=arguments.length>1?arguments[1]:void 0;return options.filter((function(option){return!option.disabled&&0===option.label.toLowerCase().indexOf(filter.toLowerCase())}))}var DropdownSelect=function(){function DropdownSelect(hostRef){var _this=this;_classCallCheck(this,DropdownSelect),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-change",7),this.scaleFocus=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-focus",7),this.scaleBlur=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-blur",7),this.scaleKeydown=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-keydown",7),this.comboboxId="combobox",this.helperText="",this.invalid=!1,this.variant="informational",this.floatingStrategy="absolute",this.hideLabelVisually=!1,this.ariaLabelSelected="selected",this.hcmLabelDisabled="this field is disabled",this.options="",this.open=!1,this.currentIndex=-1,this.queryString="",this.queryTimeout=null,this.hasFocus=!1,this.selectOption=function(index){_this.currentIndex=index,_this.value=readOptions(_this.hostElement)[index].value,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this,"scaleChange",{value:_this.value})},this.handleKeyDown=function(event){var _a,key=event.key,options=readOptions(_this.hostElement),action=function getActionFromKey(event,open){var key=event.key,altKey=event.altKey,ctrlKey=event.ctrlKey,metaKey=event.metaKey;if(!open&&["ArrowDown","ArrowUp","Enter"," "].includes(key))return Actions.Open;if("Home"===key)return Actions.First;if("End"===key)return Actions.Last;if(["Backspace","Clear"].includes(key)||1===key.length&&" "!==key&&!altKey&&!ctrlKey&&!metaKey)return Actions.Type;if(open){if("ArrowUp"===key&&altKey)return Actions.CloseSelect;if("ArrowDown"===key&&!altKey)return Actions.Next;switch(key){case"ArrowUp":return Actions.Previous;case"PageUp":return Actions.PageUp;case"PageDown":return Actions.PageDown;case"Escape":return Actions.Close;case"Enter":case" ":return Actions.CloseSelect}}}(event,_this.open);switch(Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this,"scaleKeydown",event),action){case Actions.Last:case Actions.First:_this.setOpen(!0);case Actions.Next:case Actions.Previous:case Actions.PageUp:case Actions.PageDown:return event.preventDefault(),_this.handleOptionChange(function jumpToIndex(from,action,options){var _a,nearest,findNearestEnabled=function findNearestEnabled(current,step){var nextOption,nextIndex=current;do{if(void 0===(nextOption=options[nextIndex+=step]))break}while(null==nextOption?void 0:nextOption.disabled);return nextOption?nextIndex:current};switch(action){case Actions.First:return(null===(_a=options[0])||void 0===_a?void 0:_a.disabled)?findNearestEnabled(-1,1):0;case Actions.Last:return(nearest=findNearestEnabled(options.length,-1))===options.length?-1:nearest;case Actions.Previous:return(nearest=findNearestEnabled(from,-1===from?1:-1))===options.length?-1:nearest;case Actions.Next:return findNearestEnabled(from,1);case Actions.PageUp:return findNearestEnabled(Math.max(from-10,-1),1);case Actions.PageDown:return(nearest=findNearestEnabled(Math.min(from+10,options.length),-1))===options.length?-1:nearest;default:return from}}(_this.currentIndex,action,options));case Actions.CloseSelect:if(event.preventDefault(),null===(_a=options[_this.currentIndex])||void 0===_a?void 0:_a.disabled)return;-1!==_this.currentIndex&&_this.selectOption(_this.currentIndex);case Actions.Close:return event.preventDefault(),_this.setOpen(!1);case Actions.Type:return _this.buildQueryString(key);case Actions.Open:return event.preventDefault(),_this.setOpen(!0)}},this.handleBlur=function(){_this.setOpen(!1),Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this,"scaleBlur")},this.handleFocus=function(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this,"scaleFocus")},this.handleClick=function(){_this.setOpen(!_this.open);var indexOfValue=readOptions(_this.hostElement).findIndex((function(_ref){return _ref.value===_this.value}));indexOfValue>-1&&setTimeout((function(){_this.bringIntoView(indexOfValue)}))}}return _createClass(DropdownSelect,[{key:"valueChange",value:function valueChange(newValue){this.currentIndex=readOptions(this.hostElement).findIndex((function(_ref2){return _ref2.value===newValue})),this.updateInputHidden(newValue)}},{key:"connectedCallback",value:function connectedCallback(){var _this2=this;Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({source:this.hostElement,tag:"beta"}),this.currentIndex=readOptions(this.hostElement).findIndex((function(_ref3){return _ref3.value===_this2.value}))||-1}},{key:"componentDidRender",value:function componentDidRender(){var _this3=this;this.open&&("fixed"===this.floatingStrategy&&(this.listboxPadEl.style.width=this.comboEl.getBoundingClientRect().width+"px"),Object(_floating_ui_dom_esm_43ac86e1_js__WEBPACK_IMPORTED_MODULE_34__.b)(this.comboEl,this.listboxPadEl,{placement:"bottom",strategy:this.floatingStrategy}).then((function(_ref4){var x=_ref4.x,y=_ref4.y;Object.assign(_this3.listboxPadEl.style,{left:x+"px",top:y+"px"})})))}},{key:"componentDidLoad",value:function componentDidLoad(){this.appendInputHidden()}},{key:"appendInputHidden",value:function appendInputHidden(){var input=document.createElement("input");input.name=this.name,input.id=this.name,input.value=this.value,input.type="hidden",this.hostElement.appendChild(input)}},{key:"updateInputHidden",value:function updateInputHidden(){var value=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.value;this.hostElement.querySelector("input[name="+this.name+"]").value=value}},{key:"handleOptionChange",value:function handleOptionChange(index){this.currentIndex=index,index>-1&&this.bringIntoView(index)}},{key:"bringIntoView",value:function bringIntoView(index){var options=this.listboxEl.querySelectorAll("[role=option]");(function hasOverflow(element){return element&&element.clientHeight<element.scrollHeight})(this.listboxEl)&&function keepInView(activeElement,scrollParent){var offsetHeight=activeElement.offsetHeight,offsetTop=activeElement.offsetTop,parentOffsetHeight=scrollParent.offsetHeight,scrollTop=scrollParent.scrollTop,isAboveParent=offsetTop<scrollTop;return offsetTop+offsetHeight>scrollTop+parentOffsetHeight?scrollParent.scrollTop=offsetTop+offsetHeight-parentOffsetHeight:isAboveParent?scrollParent.scrollTop=offsetTop:void 0}(options[index],this.listboxEl),function isInView(element){var rect=element.getBoundingClientRect(),parentRect_top=0,parentRect_left=0,parentRect_right=window.innerWidth||document.documentElement.clientWidth,parentRect_bottom=window.innerHeight||document.documentElement.clientHeight;return rect.top>=parentRect_top&&rect.left>=parentRect_left&&rect.bottom<=parentRect_bottom&&rect.right<=parentRect_right}(options[index])||options[index].scrollIntoView({behavior:"smooth",block:"nearest"})}},{key:"setOpen",value:function setOpen(open){this.open!==open&&(this.disabled||(this.open=open,this.open||(this.comboEl.scrollIntoView({behavior:"smooth",block:"nearest"}),this.comboEl.focus(),this.currentIndex=-1)))}},{key:"handleOptionClick",value:function handleOptionClick(event,index){event.stopPropagation(),readOptions(this.hostElement)[index].disabled||(this.handleOptionChange(index),this.selectOption(index),this.setOpen(!1))}},{key:"getSearchString",value:function getSearchString(_char2){var _this4=this;return"number"==typeof this.queryTimeout&&window.clearTimeout(this.queryTimeout),this.queryTimeout=window.setTimeout((function(){_this4.queryString=""}),500),this.queryString+=_char2,this.queryString}},{key:"buildQueryString",value:function buildQueryString(_char3){this.setOpen(!0);var queryString=this.getSearchString(_char3),queryIndex=function getIndexByChar(values,filter){var startIndex=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,sortedOptions=[].concat(_toConsumableArray(values.slice(startIndex)),_toConsumableArray(values.slice(0,startIndex))),firstHit=matchEnabledOptions(sortedOptions,filter)[0],allMatchingChars=function allMatchingChars(array){return array.every((function(_char){return _char===array[0]}))};if(firstHit)return values.indexOf(firstHit);if(allMatchingChars(filter.split(""))){var hits=matchEnabledOptions(sortedOptions,filter[0]);return values.indexOf(hits[0])}return-1}(readOptions(this.hostElement),queryString,this.currentIndex+1);queryIndex>=0?this.handleOptionChange(queryIndex):(window.clearTimeout(this.queryTimeout),this.queryString="")}},{key:"render",value:function render(){var _a,_this5=this,element=null!==(_a=readOptions(this.hostElement).find((function(_ref5){return _ref5.value===_this5.value})))&&void 0!==_a?_a:{},ValueElement=element.ItemElement,hasEmptyValueElement=""===element.value,helperTextId="helper-message-"+Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.e)(),ariaDescribedByAttr={"aria-describedBy":helperTextId};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:this.getBasePartMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"combobox-container"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("label",{id:this.comboboxId+"-label",part:"label"},this.label),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",Object.assign({ref:function ref(el){return _this5.comboEl=el},"aria-controls":this.comboboxId+"-listbox","aria-expanded":this.open?"true":"false","aria-haspopup":"listbox","aria-labelledby":this.comboboxId+"-label",id:this.comboboxId,part:"combobox",role:"combobox",tabindex:"0",onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown},this.open?{"aria-activedescendant":(readOptions(this.hostElement)[this.currentIndex]||{}).value}:{},this.helperText?ariaDescribedByAttr:{},this.invalid?{"aria-invalid":"true"}:{}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{part:"combobox-value"},hasEmptyValueElement?"":ValueElement)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"listbox-pad",ref:function ref(el){return _this5.listboxPadEl=el}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"listbox-scroll-container",onMouseDown:function onMouseDown(e){e.preventDefault()}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{ref:function ref(el){return _this5.listboxEl=el},part:"listbox",role:"listbox",id:this.comboboxId+"-listbox","aria-labelledby":this.comboboxId+"-label",tabindex:"-1"},readOptions(this.hostElement).map((function(_ref6,index){var value=_ref6.value,disabled=_ref6.disabled,ItemElement=_ref6.ItemElement;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",Object.assign({role:"option",part:_this5.getOptionPartMap(index,disabled),id:value,onClick:function onClick(event){_this5.handleOptionClick(event,index)}},value===_this5.value?{"aria-selected":"true"}:{},disabled?{"aria-disabled":"true"}:{}),ItemElement,value===_this5.value?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-action-checkmark",{size:16}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"sr-only"},_this5.ariaLabelSelected)):null)}))))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"icon"},this.open?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-collapse-up",{decorative:!0,size:20}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-collapse-down",{decorative:!0,size:20}))),this.helperText&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-helper-text",{helperText:this.helperText,variant:this.invalid?"danger":this.variant,id:helperTextId}),this.disabled&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"hcm-disabled"},this.hcmLabelDisabled)))}},{key:"getBasePartMap",value:function getBasePartMap(){var animated=null!=this.value&&""!==this.value;return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("select",this.open&&"open",this.disabled&&"disabled",this.readonly&&"readonly",this.transparent&&"transparent",this.invalid&&"invalid",this.currentIndex>-1&&"steal-focus",animated&&"animated",this.helperText&&"has-helper-text",this.floatingStrategy&&"strategy-"+this.floatingStrategy,this.hideLabelVisually&&"hide-label")}},{key:"getOptionPartMap",value:function getOptionPartMap(index,disabled){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("option",index===this.currentIndex&&"current",disabled&&"disabled")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}],[{key:"watchers",get:function get(){return{value:["valueChange"]}}}]),DropdownSelect}();DropdownSelect.style=":host{--font-weight:var(--telekom-typography-font-weight-bold);--height:var(--telekom-spacing-composition-space-13);--color:var(--telekom-color-text-and-icon-standard);--color-disabled:var(--telekom-color-text-and-icon-disabled);--background-disabled:none;--background-hover:var(--telekom-color-ui-state-fill-hovered);--border:var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);--border-color-hover:var(--telekom-color-ui-border-hovered);--border-color-focus:var(--telekom-color-ui-border-hovered);--border-color-disabled:var(--telekom-color-ui-border-disabled);--border-invalid:var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-hovered);--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--spacing-x:var(--telekom-spacing-composition-space-05);--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);--radius:var(--telekom-radius-standard);--spacing-x-for-helper-text:var(--telekom-spacing-composition-space-03);--transition-combobox:var(--transition);--background-combobox:var(--telekom-color-ui-state-fill-standard);--spacing-combobox:1.125rem\n    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem\n    calc(0.75rem - var(--telekom-spacing-composition-space-01));--spacing-y-meta:var(--telekom-spacing-composition-space-03);--color-meta:var(--telekom-color-text-and-icon-standard);--height-icon:20px;--color-icon:var(--telekom-color-text-and-icon-standard);--color-icon-hover:var(--telekom-color-text-and-icon-standard);--color-icon-active:var(--telekom-color-text-and-icon-standard);--transition-icon:var(--transition);--color-label:var(--telekom-color-text-and-icon-additional);--z-index-label:var(--scl-z-index-10);--transition-label:var(--transition);--transform-label:translate(var(--spacing-x), 0.875rem);--transform-label-animated:translate(\n    var(--spacing-x),\n    calc(0.25rem + var(--telekom-spacing-composition-space-01))\n  );--background-listbox:var(--telekom-color-background-surface);--box-shadow-listbox:0 2px 4px 0 rgba(0, 0, 0, 0.1),\n    0 4px 16px 0 rgba(0, 0, 0, 0.1);--max-height-listbox:300px;--z-index-listbox:99}[part='combobox-container'] *,[part='combobox-container'] *::before,[part='combobox-container'] *::after{box-sizing:border-box}[part='combobox-container']{display:block;position:relative}[part='combobox']{width:100%;height:var(--height);margin:0;display:flex;align-items:center;outline:none;padding:var(--spacing-combobox);z-index:1;box-sizing:border-box;transition:var(--transition-combobox);font:var(--telekom-text-style-body);border-radius:var(--radius);border:var(--border);box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;appearance:none;-webkit-appearance:none;background-color:var(--background-combobox);color:var(--color)}[part='combobox-value']{overflow:hidden;text-overflow:ellipsis}[part~='select']:not([part~='disabled']) [part='combobox']:hover~[part='icon']{color:var(--color-icon-hover)}[part~='select']:not([part~='disabled']) [part='combobox']:active~[part='icon']{color:var(--color-icon-active)}[part~='select']:not([part~='disabled']):not([part~='invalid']) [part='combobox']:hover{border-color:var(--border-color-hover);background-color:var(--background-hover)}[part~='select']:not([part~='disabled'])[part~='invalid'] [part='combobox']:hover{background-color:var(--background-hover)}[part~='select']:not([part~='disabled']):not([part~='invalid']) [part='combobox']:focus{border-color:var(--border-color-focus)}[part~='select']:not([part~='disabled']):not([part~='steal-focus']) [part='combobox']:focus{outline:var(--focus-outline);outline-offset:1px}[part~='invalid'] [part='combobox']{border:var(--border-invalid)}[part~='transparent'] [part='combobox']{background-color:transparent}[part~='disabled'] [part='combobox']{cursor:not-allowed;border-color:var(--border-color-disabled);color:var(--color-disabled);background:var(--background-disabled)}[part='combobox_value']{width:calc(100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}[part='meta']{display:flex;justify-content:space-between;margin-top:var(--spacing-y-meta);color:var(--color-meta)}[part='icon']{top:50%;right:var(--spacing-x);position:absolute;transform:translateY(-50%);pointer-events:none;height:var(--height-icon);color:var(--color-icon);transition:var(--transition-icon)}[part~='disabled'] [part='icon']{color:var(--color-disabled)}[part='label']{width:calc(100% - 44px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;top:0;left:0;color:var(--color-label);display:inline-block;z-index:var(--z-index-label);position:absolute;transition:var(--transition-label);pointer-events:none;font:var(--telekom-text-style-ui);transform:var(--transform-label)}[part~='animated'] [part='label']{font:var(--telekom-text-style-small-bold);transform:var(--transform-label-animated)}[part~='disabled'] [part='label']{cursor:not-allowed;border-color:var(--border-color-disabled);color:var(--color-disabled);background:var(--background-disabled)}[part~='hide-label'] [part='combobox']{padding-top:0.3125rem}[part~='hide-label'] [part='label']{visibility:hidden}[part='listbox']{position:relative}[part='listbox-scroll-container']{max-height:var(--max-height-listbox);overflow-y:auto}[part='listbox-pad']{background:var(--background-listbox);box-shadow:var(--box-shadow-listbox);border-radius:var(--radius);padding:var(--radius) 0;margin-top:var(--telekom-spacing-composition-space-03);left:0;position:absolute;top:100%;width:100%;z-index:var(--z-index-listbox);display:none}[part~='open'] [part='listbox-pad']{display:block}[part~='strategy-fixed'] [part='listbox-pad']{position:fixed}[part~='transparent'] [part='listbox']{background-color:transparent}[part~='option']{color:var(--color)}[part~='option'][part~='disabled']{color:var(--color-disabled);cursor:not-allowed}[part~='option']:not([part~='disabled']):hover{background-color:var(--background-hover)}[part~='option'][part~='current']{outline:var(--focus-outline);outline-offset:-2px;border-radius:var(--radius)}[part~='option'][aria-selected='true']{padding-right:30px;position:relative}[part~='option'][aria-selected='true'] scale-icon-action-checkmark{position:absolute;right:var(--telekom-spacing-composition-space-05);top:var(--telekom-spacing-composition-space-05)}[part~='option'] scale-dropdown-select-item::part(base){padding:var(--telekom-spacing-composition-space-05)}[part~='has-helper-text'] [part~='combobox-container']{margin-bottom:var(--spacing-x-for-helper-text)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.hcm-disabled{display:none}@media screen and (forced-colors: active), (-ms-high-contrast: active){[part='listbox-pad']{outline:var(--focus-outline);outline-offset:-2px;border-radius:var(--radius)}.hcm-disabled{display:block}}";var DropdownSelectItem=function(){function DropdownSelectItem(hostRef){_classCallCheck(this,DropdownSelectItem),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef)}return _createClass(DropdownSelectItem,[{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"base"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"prefix"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"prefix"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"label"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",null)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"suffix"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"suffix"})))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),DropdownSelectItem}();DropdownSelectItem.style="/*!*option*!*/[part~='base']{display:flex;justify-content:flex-start;align-items:center}[part~='prefix'],[part~='label'],[part~='suffix']{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1}";var ActionHidePassword=function(){function ActionHidePassword(hostRef){_classCallCheck(this,ActionHidePassword),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ActionHidePassword,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M3.815 2.776l.085.074L21.15 20.1c.3.3.3.75 0 1.05a.722.722 0 01-.965.074l-.085-.074L2.85 3.9c-.3-.3-.3-.75 0-1.05a.722.722 0 01.965-.074zM4.2 7.35L5.25 8.4l-.018.017 2.423 2.423A4.67 4.67 0 007.5 12a4.5 4.5 0 004.5 4.5 4.67 4.67 0 00.874-.089l.286-.066 2.285 2.28-.015.005.57.57c-1.2.5-2.5.8-4 .8-4.108 0-6.987-2.283-9.1-4.68l-.364-.425-.35-.423-.334-.421-.476-.62-.726-.981L.3 12l.35-.45.595-.806C1.969 9.776 2.8 8.73 3.774 7.76l.426-.41zM12 4c4.108 0 6.987 2.283 9.1 4.68l.364.425.35.423.334.421.476.62.726.981.35.45-.35.45-.595.806c-.724.968-1.555 2.014-2.529 2.983l-.426.411-1.05-1.05.018-.017-2.423-2.423c.1-.379.152-.768.155-1.16A4.5 4.5 0 0012 7.5a4.67 4.67 0 00-.874.089l-.286.066-2.285-2.28.015-.005L8 4.8c1.2-.5 2.5-.8 4-.8zm-3 8.19l2.8 2.8a3 3 0 01-2.783-2.621L9 12.19zm3.2-3.18a3 3 0 012.783 2.621l.017.179-2.8-2.8z","fill-rule":"evenodd"})):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M2.85 2.85a.722.722 0 01.965-.074l.085.074L21.15 20.1c.3.3.3.75 0 1.05a.722.722 0 01-.965.074l-.085-.074L2.85 3.9c-.3-.3-.3-.75 0-1.05zm1.35 4.5L5.25 8.4c-1.1 1.05-2.1 2.3-3.05 3.6l.578.778.39.506.397.494C5.766 16.458 8.287 18.5 12 18.5c.919 0 1.76-.115 2.527-.345l.323-.105L16 19.2c-1.2.5-2.5.8-4 .8-4.108 0-6.987-2.283-9.1-4.68l-.364-.425-.35-.423-.334-.421-.476-.62-.726-.981L.3 12l.35-.45.595-.806C1.969 9.776 2.8 8.73 3.774 7.76l.426-.41zM12 4c4.108 0 6.987 2.283 9.1 4.68l.364.425.35.423.334.421.476.62.726.981.35.45-.35.45-.595.806c-.724.968-1.555 2.014-2.529 2.983l-.426.411-1.05-1.05c1.1-1.05 2.1-2.3 3.05-3.6l-.578-.778-.39-.506-.397-.494C18.234 7.542 15.713 5.5 12 5.5c-.919 0-1.76.115-2.527.345l-.323.105L8 4.8c1.2-.5 2.5-.8 4-.8zm-4.35 6.85l5.5 5.5c-.35.1-.75.15-1.15.15-2.5 0-4.5-2-4.5-4.5 0-.32.032-.64.096-.934l.054-.216zM12 7.5c2.5 0 4.5 2 4.5 4.5 0 .32-.032.64-.096.934l-.054.216-5.5-5.5c.35-.1.75-.15 1.15-.15z","fill-rule":"evenodd"})))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ActionHidePassword}();ActionHidePassword.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";var ActionSort=function(){function ActionSort(hostRef){_classCallCheck(this,ActionSort),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ActionSort,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M17.25 3.5c.647 0 1.18.492 1.244 1.122l.006.128V14h3.17l-4.42 6.75L12.83 14H16V4.75c0-.69.56-1.25 1.25-1.25zm-10.5-.25L11.17 10H8v9.25a1.25 1.25 0 01-2.494.128L5.5 19.25V10H2.33l4.42-6.75z","fill-rule":"evenodd"})):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M17.25 4c.367 0 .691.294.743.651L18 4.75V14h3.65l-4.4 6.75-4.4-6.75h3.65V4.75c0-.4.35-.75.75-.75zm-10.5-.75l4.4 6.75H7.5v9.25c0 .4-.35.75-.75.75a.772.772 0 01-.743-.651L6 19.25V10H2.35l4.4-6.75z","fill-rule":"evenodd"})))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ActionSort}();ActionSort.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";var ContentSortIndicatorDown=function(){function ContentSortIndicatorDown(hostRef){_classCallCheck(this,ContentSortIndicatorDown),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ContentSortIndicatorDown,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},(this.selected,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M6.584 9.5l5.417 5 5.416-5z","fill-rule":"evenodd"}))))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ContentSortIndicatorDown}();ContentSortIndicatorDown.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";var ContentSortIndicatorUp=function(){function ContentSortIndicatorUp(hostRef){_classCallCheck(this,ContentSortIndicatorUp),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ContentSortIndicatorUp,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},(this.selected,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M12 9.5l-5.417 5h10.834z","fill-rule":"evenodd"}))))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ContentSortIndicatorUp}();ContentSortIndicatorUp.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";var ServiceSettings=function(){function ServiceSettings(hostRef){_classCallCheck(this,ServiceSettings),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.size=24,this.fill="currentColor",this.color="currentColor",this.selected=!1,this.decorative=!1,this.focusable=!1}return _createClass(ServiceSettings,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("styles")||(this.hostElement.style.display="inline-flex")}},{key:"render",value:function render(){var ariaHidden=this.decorative?{"aria-hidden":"true"}:{},focusable=this.focusable?{tabindex:0}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("svg",Object.assign({class:"scale-icon",xmlns:"http://www.w3.org/2000/svg",width:this.size,height:this.size,viewBox:"0 0 24 24"},ariaHidden,focusable),this.accessibilityTitle&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("title",null,this.accessibilityTitle),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",{fill:"currentColor"===this.fill?this.color:this.fill},this.selected?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M20.235 14.5L23 14v-4l-2.765-.5a1 1 0 01-.64-1.555l1.595-2.31-2.825-2.825-2.31 1.595a1 1 0 01-1.555-.64L14 1h-4l-.5 2.76a1 1 0 01-1.555.645L5.635 2.81 2.81 5.635l1.595 2.31a1 1 0 01-.64 1.555L1 10v4l2.76.5a1 1 0 01.645 1.555l-1.595 2.31 2.825 2.825 2.31-1.595a1 1 0 011.555.64L10 23h4l.5-2.765a1 1 0 011.555-.64l2.31 1.595 2.825-2.825-1.595-2.31a1 1 0 01.64-1.555zM12 15a3 3 0 110-6 3 3 0 010 6z","fill-rule":"evenodd"})):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("g",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("path",{d:"M14 1l.5 2.75a.992.992 0 001.448.71l.102-.06 2.3-1.6 2.85 2.85-1.6 2.3c-.378.567-.087 1.312.537 1.52l.113.03L23 10v4l-2.75.5a.992.992 0 00-.71 1.448l.06.102 1.6 2.3-2.85 2.85-2.3-1.6c-.567-.378-1.312-.087-1.52.537l-.03.113L14 23h-4l-.5-2.75c-.142-.661-.863-1.01-1.448-.71l-.102.06-2.3 1.6-2.85-2.85 1.6-2.3c.378-.567.087-1.312-.537-1.52l-.113-.03L1 14v-4l2.75-.5a.992.992 0 00.71-1.448L4.4 7.95l-1.6-2.3L5.65 2.8l2.3 1.6c.567.378 1.312.087 1.52-.537l.03-.113L10 1h4zm-1.25 1.5h-1.5l-.3 1.5c-.2 1.2-1.25 2.05-2.45 2.05-.438 0-.875-.115-1.246-.345L5.8 4.7 4.75 5.75l.9 1.3c.464.65.584 1.472.318 2.227L5.9 9.45c-.279.743-.902 1.27-1.67 1.462l-.18.038-1.55.3v1.5l1.55.25c.85.15 1.5.7 1.85 1.5a2.426 2.426 0 01-.149 2.247l-.101.153-.9 1.3 1.05 1.05 1.3-.9c.4-.3.9-.45 1.4-.45 1.145 0 2.154.774 2.418 1.889l.332 1.711h1.5l.3-1.55c.2-1.2 1.25-2.05 2.45-2.05.438 0 .875.115 1.246.345L18.2 19.25l1.05-1.05-.9-1.3c-.5-.7-.55-1.6-.25-2.3.279-.743.902-1.27 1.67-1.462l.18-.038 1.55-.3v-1.5l-1.55-.3c-.85-.15-1.5-.7-1.85-1.5a2.426 2.426 0 01.149-2.247l.101-.153.9-1.3-1.05-1.05-1.3.9c-.4.3-.9.45-1.4.45-1.145 0-2.154-.774-2.418-1.889L12.75 2.5zM12 9a3 3 0 110 6 3 3 0 010-6z","fill-rule":"evenodd"})))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ServiceSettings}();ServiceSettings.style="scale-icon{--display:inline-flex;--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);display:var(--display)}scale-icon path{transition:var(--transition)}@media screen and (forced-colors: active), (-ms-high-contrast: active){scale-icon svg,.scale-icon{color:white;stroke:white}}";var MenuFlyoutItem=function(){function MenuFlyoutItem(hostRef){_classCallCheck(this,MenuFlyoutItem),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scaleSelect=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-select",7),this.scaleSelectLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleSelect",7),this.cascade=!1,this.active=!1,this.checked=!1,this.disabled=!1,this.hasSlotSublist=!1}var _triggerEvent;return _createClass(MenuFlyoutItem,[{key:"triggerEvent",value:(_triggerEvent=function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(regeneratorRuntime.mark((function _callee(event){var closeOnSelect,key,sublist,detail,_args=arguments;return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(closeOnSelect=!(_args.length>1&&void 0!==_args[1])||_args[1],key=event.key,!this.disabled){_context.next=4;break}return _context.abrupt("return");case 4:if("ArrowRight"!==key||this.hasSlotSublist){_context.next=6;break}return _context.abrupt("return");case 6:if(!this.hasSlotSublist){_context.next=10;break}return(sublist=this.hostElement.querySelector('[slot="sublist"]')).hasAttribute("opened")?sublist.removeAttribute("opened"):this.openSublist(),_context.abrupt("return");case 10:detail={eventType:event.type,key:key,item:this.hostElement,closeOnSelect:closeOnSelect,originalEvent:event},Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(this,"scaleSelect",detail);case 12:case"end":return _context.stop()}}),_callee,this)}))),function triggerEvent(_x){return _triggerEvent.apply(this,arguments)})},{key:"connectedCallback",value:function connectedCallback(){this.hasSlotSublist=null!=this.hostElement.querySelector('[slot="sublist"]'),this.hasSlotSublist&&(this.cascade=!0)}},{key:"openSublist",value:function openSublist(){var _this6=this,sublist=this.hostElement.querySelector('[slot="sublist"]');null!=sublist&&(sublist.trigger=function(){return _this6.hostElement},sublist.direction="right",sublist.open())}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("menu-flyout-item",this.disabled&&"menu-flyout-item--disabled",null!=this.checkable&&"menu-flyout-item--checkable",this.active&&"menu-flyout-item--active")}},{key:"render",value:function render(){var checked=this.checked?"true":"false";return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,{role:this.checkable?"menuitem"+this.checkable:"menuitem","aria-checked":null!=this.checkable&&checked,"aria-disabled":this.disabled?"true":void 0,tabindex:"-1"},this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:this.getCssClassMap(),part:"base"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{part:"prefix",class:"menu-flyout-item__prefix"},null==this.checkable?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"prefix"}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-action-checkmark",{class:"menu-flyout-item__check",size:16})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{part:"label",class:"menu-flyout-item__label"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",null)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{part:"suffix",class:"menu-flyout-item__suffix"},this.cascade?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-right",{class:"menu-flyout-item__cascade",size:16}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"suffix"}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"sublist"}))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),MenuFlyoutItem}();MenuFlyoutItem.style=":host{--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);display:block;position:relative;outline-color:transparent;padding-left:var(--telekom-spacing-composition-space-02);padding-right:var(--telekom-spacing-composition-space-02);--_min-width:fit-content;--_min-width-moz:-moz-fit-content}*{-webkit-tap-highlight-color:rgba(255, 255, 255, 0)}.menu-flyout-item{position:relative;display:flex;align-items:stretch;text-align:left;font-size:var(--telekom-typography-font-size-body);line-height:2.635em;padding:0\n    calc(\n      var(--telekom-spacing-composition-space-08) -\n        var(--telekom-spacing-composition-space-02)\n    );user-select:none;white-space:nowrap;border-radius:0;cursor:pointer;color:var(--telekom-color-text-and-icon-standard);max-width:calc(\n    100vw - 2 * var(--telekom-spacing-composition-space-08) - 2 * 10px\n  );overflow:hidden;min-width:var(--_min-width-moz);min-width:var(--_min-width)}.menu-flyout-item:focus:not(.menu-flyout-item--disabled),.menu-flyout-item:hover:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-primary-hovered)}:host(:focus) .menu-flyout-item:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-standard)}:host(:focus) .menu-flyout-item:hover:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-primary-hovered)}:host(:focus){outline:none}:host(:focus) .menu-flyout-item{outline:var(--focus-outline);border-radius:var(--telekom-radius-small)}:host(:active) .menu-flyout-item:not(.menu-flyout-item--disabled){color:var(--telekom-color-text-and-icon-primary-pressed)}:host([aria-expanded='true']) .menu-flyout-item{color:var(--telekom-color-text-and-icon-primary-standard)}.menu-flyout-item--disabled{outline:none;color:var(--telekom-color-text-and-icon-disabled);cursor:not-allowed}:host([active])::before{content:'';display:block;position:absolute;top:0;left:0;height:100%;width:0;background-color:var(--telekom-color-primary-standard);border-left:var(--telekom-spacing-composition-space-02) solid transparent}.menu-flyout-item--active{color:var(--telekom-color-text-and-icon-primary-standard)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.menu-flyout-item--disabled:not(.menu-flyout-item--disabled),.menu-flyout-item--active:not(.menu-flyout-item--disabled){color:white;stroke:white}}.menu-flyout-item__label{flex:1 1 0;overflow:hidden;text-overflow:ellipsis}.menu-flyout-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-flyout-item__check,slot[name='prefix']::slotted(:last-of-type){margin-right:var(--telekom-spacing-composition-space-04)}.menu-flyout-item__check{visibility:hidden}:host([aria-checked='true']) .menu-flyout-item__check{visibility:visible}.menu-flyout-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-flyout-item__cascade,slot[name='suffix']::slotted(:first-of-type){margin-left:var(--telekom-spacing-composition-space-06)}";var name="pagination",Pagination=function(){function Pagination(hostRef){_classCallCheck(this,Pagination),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scalePagination=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-pagination",7),this.scalePaginationLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scalePagination",7),this.hideBorders=!1,this.hideBorder=!1,this.pageSize=10,this.startElement=0,this.totalElements=1,this.small=!1,this.ariaLabelFirstPage="Go to first page",this.ariaLabelNextPage="Go to next page",this.ariaLabelPreviousPage="Go to previous page",this.ariaLabelLastPage="Go to last page",this.maxWidth=100}return _createClass(Pagination,[{key:"componentWillLoad",value:function componentWillLoad(){this.calculateWidth()}},{key:"componentWillUpdate",value:function componentWillUpdate(){}},{key:"componentDidRender",value:function componentDidRender(){!1!==this.hideBorders&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "hideBorders" is deprecated. Please use the "hideBorder" property!',type:"warn",source:this.hostElement}),!1!==this.small&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "small" is deprecated. Please use css overwrite!',type:"warn",source:this.hostElement}),this.size&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "size" is deprecated. Please use css overwrite!',type:"warn",source:this.hostElement})}},{key:"componentDidLoad",value:function componentDidLoad(){}},{key:"componentDidUpdate",value:function componentDidUpdate(){}},{key:"disconnectedCallback",value:function disconnectedCallback(){}},{key:"calculateWidth",value:function calculateWidth(){this.maxWidth=9*(3*this.totalElements.toString().length+3)}},{key:"goFirstPage",value:function goFirstPage(){this.startElement=0,this.emitUpdate("FIRST")}},{key:"goPreviousPage",value:function goPreviousPage(){this.startElement-=Math.min(this.pageSize,this.startElement),this.emitUpdate("PREVIOUS")}},{key:"goNextPage",value:function goNextPage(){this.startElement+=this.pageSize,this.emitUpdate("NEXT")}},{key:"goLastPage",value:function goLastPage(){var p=this.pageSize;this.startElement=Math.ceil((this.totalElements-p)/p)*p,this.emitUpdate("LAST")}},{key:"emitUpdate",value:function emitUpdate(direction){var data={startElement:this.startElement,direction:direction};Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(this,"scalePagination",data)}},{key:"render",value:function render(){var _this7=this,total=this.totalElements,start=this.startElement+1,end=Math.min(this.startElement+this.pageSize,total),isAtStart=1===start,isAtEnd=end===total;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:this.getBasePartMap(),class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"info-responsive",class:name+"__info-responsive"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",null,start,"-",end)," ","/ ",total),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:name+"__button-wrapper"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"info",class:name+"__info",style:{width:this.maxWidth+"px"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",null,start,"-",end)," ","/ ",total),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("button",{class:name+"__first-prompt",part:"first-prompt",disabled:isAtStart,onClick:function onClick(){return _this7.goFirstPage()},"aria-label":this.ariaLabelFirstPage},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-double-left",{size:20,decorative:!0})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("button",{class:name+"__prev-prompt",part:"prev-prompt",disabled:isAtStart,onClick:function onClick(){return _this7.goPreviousPage()},"aria-label":this.ariaLabelPreviousPage},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-left",{size:20,decorative:!0})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("button",{class:name+"__next-prompt",part:"next-prompt",disabled:isAtEnd,onClick:function onClick(){return _this7.goNextPage()},"aria-label":this.ariaLabelNextPage},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-right",{size:20,decorative:!0})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("button",{class:name+"__last-prompt",part:"last-prompt",disabled:isAtEnd,onClick:function onClick(){return _this7.goLastPage()},"aria-label":this.ariaLabelLastPage},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-navigation-double-right",{size:20,decorative:!0})))))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":name+"--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)(name,(this.hideBorder||this.hideBorders)&&prefix+"hide-borders")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}],[{key:"watchers",get:function get(){return{totalElements:["calculateWidth"]}}}]),Pagination}();Pagination.style=":host{--color:var(--telekom-color-text-and-icon-standard);--radius:var(--telekom-radius-standard);--font-size:var(--telekom-typography-font-size-small);--border:1px solid var(--telekom-color-ui-faint);--color-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-active:var(--telekom-color-text-and-icon-primary-pressed);--color-button:var(--telekom-color-ui-subtle);--border-button:var(--border);--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--radius-first-prompt:var(--radius) 0 0 var(--radius);--radius-last-prompt:0 var(--radius) var(--radius) 0;--radius-first-prompt-stack:0 0 0 var(--radius);--radius-last-prompt-stack:0 0 var(--radius) 0;--stroke-svg:var(--telekom-color-ui-extra-strong);--stroke-svg-high-contrast:#fff;--width-button:44px;--padding-info:var(--telekom-spacing-composition-space-04);--height-button:44px;--line-height-info:calc(var(--height-button) - 2px)}.pagination{display:flex;overflow:auto;flex-wrap:wrap}.pagination__info,.pagination__info-responsive{color:var(--color);text-align:center;font-size:var(--font-size);font-weight:var(--telekom-typography-font-weight-medium);line-height:var(--line-height-info);padding:0 var(--padding-info);border:var(--border);flex-shrink:0;border-left:0;border-right:0;white-space:nowrap;order:1}.pagination__info-responsive{display:none}.pagination__info span,.pagination__info-responsive span{color:var(--telekom-color-text-and-icon-primary-standard);font-weight:var(--telekom-typography-font-weight-bold)}button{display:flex;flex-shrink:0;justify-content:center;align-items:center;padding:0;margin:0;height:var(--height-button);width:var(--width-button);color:var(--color-button);background:none;border:var(--border-button)}button:focus{outline:var(--focus-outline);outline-offset:-3px}.pagination__first-prompt{border-radius:var(--radius-first-prompt);margin-right:-1px}.pagination__last-prompt{border-radius:var(--radius-last-prompt);margin-left:-1px;order:2}.pagination__next-prompt{order:2}button svg{display:block}button:not(:disabled){cursor:pointer}button:not(:disabled) svg{color:var(--stroke-svg)}button:disabled svg{color:var(--telekom-color-text-and-icon-disabled)}button:not(:disabled):hover{border-color:var(--telekom-color-primary-hovered);z-index:1}button:not(:disabled):hover svg{color:var(--color-hover)}button:not(:disabled):active{border-color:var(--color-active);z-index:1}button:not(:disabled):active svg{color:var(--color-active)}.pagination--hide-borders .pagination__info,.pagination--hide-borders .pagination__info-responsive{border:0}.pagination--hide-borders .pagination__info-responsive{border-bottom:var(--border)}.pagination--hide-borders button{border-radius:0;border-top-width:0;border-bottom-width:0}.pagination--hide-borders .pagination__first-prompt{border-left-color:transparent}.pagination--hide-borders .pagination__last-prompt{border-right-color:transparent}.pagination--hide-borders button:not(:disabled):hover{border-width:1px;border-color:var(--telekom-color-primary-hovered)}.pagination__button-wrapper{display:flex}@media screen and (forced-colors: active), (-ms-high-contrast: active){button:not(:disabled) svg{color:var(--stroke-svg-high-contrast)}}@media screen and (max-width: 639px){:host{width:100%}.pagination{flex-direction:column}.pagination__info-responsive{display:initial;order:0;overflow:auto;border-left:var(--border);border-right:var(--border);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;line-height:var(--line-height-info)}.pagination__info{display:none;line-height:var(--line-height-info)}.pagination__first-prompt{border-radius:var(--radius-first-prompt-stack)}.pagination__last-prompt{border-radius:var(--radius-last-prompt-stack)}.pagination__next-prompt{margin-left:-1px}button{flex:1;height:var(--height-button)}.pagination--hide-borders .pagination__first-prompt{border-left-width:0}.pagination--hide-borders .pagination__last-prompt{border-right-width:0}}";var i$1=0,ProgressBar=function(){function ProgressBar(hostRef){var _this8=this;_classCallCheck(this,ProgressBar),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.busy=!1,this.percentage=0,this.percentageStart=0,this.showStatus=!0,this.transitions=function(width,widthStart){return"\n    @keyframes showProgress {\n      from {\n        width: "+widthStart+"%;\n      }\n      to {\n        width: "+width+"%;\n      }\n    }\n  "},this.progressStyle=function(){var customColor=_this8.customColor?{"--background":_this8.customColor}:{};return Object.assign({"--progress":_this8.disabled?"100%":_this8.percentage+"%"},customColor)}}return _createClass(ProgressBar,[{key:"componentWillLoad",value:function componentWillLoad(){null==this.progressBarId&&(this.progressBarId="progress-bar-"+i$1++),this.disabled&&(this.showStatus=!1)}},{key:"componentWillUpdate",value:function componentWillUpdate(){}},{key:"disconnectedCallback",value:function disconnectedCallback(){}},{key:"componentDidRender",value:function componentDidRender(){void 0!==this.customColor&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "customColor" is deprecated. \n          Please use css variable "--background" to set the progress bar background color;\n          e.g. <scale-progress-bar percentage="20" style="--background: green"></scale-progress-bar>',type:"warn",source:this.hostElement})}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.transitions(this.percentage,this.percentageStart)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:this.getBasePartMap(),class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"progress-bar__top-container"},this.label?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("label",{part:"label",class:"progress-bar__label",htmlFor:this.progressBarId},this.label):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",null," "),!!this.showStatus&&!this.hasError&&this.percentage<=100&&100!==this.percentage&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"status",class:"progress-bar__status","aria-hidden":"true"},this.percentage,"%"),this.hasError?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"progress-bar__icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-alert-error",{size:16})):this.percentage>=100?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"progress-bar__icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-action-success",{size:16})):null),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"wrapper",class:"progress-bar__wrapper"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"outer",class:"progress-bar__outer",role:"progressbar","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":this.percentage,"aria-busy":this.busy,"aria-valuetext":this.percentage+"%","aria-label":this.label,id:this.progressBarId},this.percentage>0&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"inner",class:"progress-bar__inner",style:this.progressStyle()})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",{name:"icon"}))),!!this.statusDescription&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{part:"status-description",class:"progress-bar__status-description",role:"alert"},this.statusDescription),!this.mute&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{"aria-live":"polite",class:"progress-bar__aria-live"},this.percentage!==10*Math.round(this.percentage/10)?10*Math.round(this.percentage/10)+"%":null))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"progress-bar--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("progress-bar",this.hasError&&prefix+"has-error",this.disabled&&prefix+"disabled",this.percentage>=100&&prefix+"completed")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),ProgressBar}();ProgressBar.style=":host{--track-color:var(--telekom-color-ui-faint);--bar-color:var(--telekom-color-primary-standard);--icon-color-error:var(--telekom-color-text-and-icon-functional-danger);--track-color-error:var(--telekom-color-functional-danger-subtle);--bar-color-error:var(--telekom-color-functional-danger-standard);--icon-color-success:var(--telekom-color-text-and-icon-functional-success);--track-color-success:var(--telekom-color-functional-success-subtle);--bar-color-success:var(--telekom-color-functional-success-standard);--bar-color-disabled:var(--telekom-color-ui-disabled);--color-disabled:var(--telekom-color-text-and-icon-disabled);--progress-bar-outer-size:6px;--progress-bar-inner-size:var(--telekom-spacing-composition-space-03);--font-label:var(--telekom-text-style-ui);--color-label:var(--telekom-color-text-and-icon-standard);--color-status-description:var(--telekom-color-text-and-icon-additional);--font-status-description:var(--telekom-text-style-small-bold)}.progress-bar{width:100%;max-width:30rem}.progress-bar--disabled{cursor:not-allowed}.progress-bar__top-container{display:flex;justify-content:space-between;align-items:center}.progress-bar--disabled .progress-bar__label,.progress-bar--disabled .progress-bar__status{color:var(--color-disabled)}.progress-bar__label{display:block;padding:var(--telekom-spacing-composition-space-05) 0;color:var(--color-label);font:var(--font-label)}.progress-bar__wrapper{width:100%;display:flex;box-sizing:border-box;align-items:center}.progress-bar__outer{width:100%;height:var(--progress-bar-outer-size);margin-left:0;overflow:hidden;position:relative;border-radius:var(--telekom-radius-pill);background:var(--track-color)}.progress-bar__inner{position:absolute;top:0;left:0;width:var(--progress, 0);height:var(--progress-bar-inner-size);display:flex;align-items:center;white-space:nowrap;justify-content:flex-end;border-radius:var(--telekom-radius-pill);border:1px solid transparent;background:var(--bar-color);transition:width var(--telekom-motion-duration-immediate)\n    var(--telekom-motion-easing-standard)}.progress-bar--disabled .progress-bar__inner{background:var(--bar-color-disabled)}.progress-bar__status{padding:var(--telekom-spacing-composition-space-05) 0;font:var(--font-label);font-variant-numeric:tabular-nums}.progress-bar--completed .progress-bar__icon{color:var(--icon-color-success)}.progress-bar--completed .progress-bar__outer{background:var(--track-color-success)}.progress-bar--completed .progress-bar__inner{background:var(--bar-color-success)}.progress-bar--has-error .progress-bar__icon{color:var(--icon-color-error)}.progress-bar--has-error .progress-bar__outer{background:var(--track-color-error)}.progress-bar--has-error .progress-bar__inner{background:var(--bar-color-error)}.progress-bar__status-description{color:var(--color-status-description);font:var(--font-status-description);margin-top:var(--telekom-spacing-composition-space-04)}.progress-bar__aria-live{clip:rect(0 0 0 0);width:1px;border:0;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute}";var i=0,isFocusVisibleSupported=Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.c)(":focus-visible"),Switch=function(){function Switch(hostRef){_classCallCheck(this,Switch),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleChange",7),this.checked=!1,this.disabled=!1,this.size="large"}return _createClass(Switch,[{key:"componentWillLoad",value:function componentWillLoad(){null==this.inputId&&(this.inputId="switch-"+i++)}},{key:"render",value:function render(){var _this9=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("label",{id:this.inputId+"-label",class:"switch__wrapper"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("input",{type:"checkbox",name:this.name,class:"switch__control",checked:this.checked,disabled:this.disabled,"aria-labelledby":this.inputId+"-label",id:this.inputId,onChange:function onChange(event){_this9.checked=event.target.checked,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this9,"scaleChange",{value:_this9.checked})}}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"switch__toggle","aria-hidden":"true"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"switch__thumb"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-action-checkmark",{size:12,decorative:!0,selected:!0})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"switch__io-text"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",null,this.checked?"I":"0"))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"switch__toggle--overlay","aria-hidden":"true"}),this.label&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("span",{class:"switch__label-text"},this.label))))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("switch",this.checked&&"switch--checked",this.disabled&&"switch--disabled",this.size&&"switch--size-"+this.size,isFocusVisibleSupported&&"switch--focus-visible-supported",!isFocusVisibleSupported&&"switch--focus-visible-not-supported")}}]),Switch}();Switch.style="scale-switch{--width:42px;--height:24px;--offset:2px;--radius:1em;--transition-duration:var(--telekom-motion-duration-immediate);--transition-easing:var(--telekom-motion-easing-standard);--shadow-thumb:0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24),\n    0 4px 12px 0 rgba(0, 0, 0, 0.26);--spacing-x-label:var(--telekom-spacing-composition-space-04);--font-label:var(--telekom-text-style-ui);--font-io-text:var(--telekom-text-style-small-bold);--color-label:var(--telekom-color-text-and-icon-standard)}.switch{--_background:var(--telekom-color-ui-faint);--_color-thumb:var(--telekom-color-ui-white, #fff);--_overlay-background:transparent;display:inline-block;position:relative}.switch__control{position:absolute;margin:0;top:0;width:var(--width);height:var(--height);opacity:0}.switch__wrapper{display:flex;align-items:center;cursor:pointer}.switch__toggle{position:relative;width:var(--width);height:var(--height);background:var(--_background);border-radius:var(--radius);transition-property:background;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-easing)}.switch__toggle--overlay{position:absolute;width:var(--width);height:var(--height);border-radius:var(--radius);background:var(--_overlay-background)}[data-platform='android'] .switch__toggle--overlay{display:none}.switch:hover{--_overlay-background:var(--telekom-color-ui-state-fill-hovered)}.switch:active{--_overlay-background:var(--telekom-color-ui-state-fill-pressed)}.switch--checked{--_background:var(--telekom-color-primary-standard)}[data-platform='android'] .switch.switch--checked{--_background:var(--telekom-color-primary-standard);--_color-thumb:var(--telekom-color-ui-white)}[data-platform='android'] .switch{--_color-thumb:var(--telekom-color-ui-strong)}[data-platform='android'] .switch:hover{--_background:var(--telekom-color-ui-faint)}[data-platform='android'] .switch:active{--_background:var(--telekom-color-ui-faint)}[data-platform='android'] .switch:hover{--_color-thumb:var(--telekom-color-ui-extra-strong)}[data-platform='android'] .switch:active{--_color-thumb:var(--telekom-color-ui-extra-strong)}[data-platform='android'] .switch--checked:active,[data-platform='android'] .switch--checked:hover{--_color-thumb:var(--telekom-color-ui-white)}[data-platform='android'] .switch--checked:hover,.switch--checked:hover{--_background:var(--telekom-color-primary-hovered)}[data-platform='android'] .switch--checked:active,.switch--checked:active{--_background:var(--telekom-color-primary-pressed)}[data-platform='android'] .switch--disabled{--_background:var(--telekom-color-ui-faint);--_color-thumb:var(--telekom-color-ui-border-disabled)}[data-platform='android'] .switch--disabled:hover{--_color-thumb:var(--telekom-color-ui-border-disabled);--_background:var(--telekom-color-ui-faint)}[data-platform='android'] .switch--checked.switch--disabled:hover{--_background:var(--telekom-color-ui-border-disabled);--_color-thumb:var(--telekom-color-ui-faint)}.switch--disabled,.switch--disabled:hover,.switch--disabled:active{--_background:var(--telekom-color-ui-disabled);--_color-thumb:var(--telekom-color-ui-faint);--_overlay-background:transparent}.switch--checked .switch--disabled,.switch--checked .switch--disabled:hover,.switch--checked .switch--disabled:active{--_background:var(--telekom-color-ui-faint);--_color-thumb:var(--telekom-color-ui-disabled);box-shadow:var(--telekom-shadow-raised-standard);--_overlay-background:transparent}[data-platform='android'] .switch--disabled.switch--checked{--_background:var(--telekom-color-ui-border-disabled);--_color-thumb:var(--telekom-color-ui-faint)}.switch--disabled .switch__wrapper{cursor:not-allowed}.switch--disabled .switch__thumb{box-shadow:var(--telekom-shadow-raised-standard)}.switch--size-large{--width:56px;--height:32px}.switch--focus-visible-not-supported :focus~.switch__toggle,:focus-visible~.switch__toggle{outline:var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-focus-standard);outline-offset:var(--telekom-spacing-composition-space-01)}.switch__thumb{--_size:calc(var(--height) - var(--offset) * 2);position:relative;z-index:2;box-sizing:border-box;width:var(--_size);height:var(--_size);aspect-ratio:1 / 1;background:var(--_color-thumb);border-radius:50%;box-shadow:var(--shadow-thumb);margin:var(--offset);transition-property:margin, width, height, background, color;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-easing);color:transparent;border:1px solid rgba(0, 0, 0, 0.04);display:inline-block}.switch--checked .switch__thumb{margin-left:1em;margin-inline-start:calc(var(--width) - var(--height) + var(--offset))}.switch__io-text{position:absolute;z-index:1;top:0;left:0;display:flex;justify-content:center;align-items:center;width:50%;height:var(--height);margin-left:calc(50% - var(--offset));font:var(--font-io-text);line-height:var(--telekom-typography-line-spacing-none)}.switch--size-large .switch__io-text{margin-top:1px;font:var(--telekom-text-style-caption-bold)}.switch--checked .switch__io-text{margin-left:var(--offset);color:var(--telekom-color-text-and-icon-white-standard)}.switch--disabled .switch__io-text{color:var(--telekom-color-text-and-icon-disabled)}.switch__label-text{font:var(--font-label);margin-inline-start:var(--spacing-x-label);color:var(--color-label)}[data-platform='android'] scale-switch{--width:56px;--height:32px;--offset:7px}[data-platform='android'] .switch__thumb{width:18px;height:18px}[data-platform='android'] scale-switch:not([disabled]):active .switch__thumb{width:28px;height:28px;--offset:2px}[data-platform='android'] .switch--checked .switch__thumb{width:24px;height:24px;--offset:4px}[data-platform='android'] .switch__thumb{display:flex;justify-content:center;align-items:center;box-shadow:none}scale-switch scale-icon-action-success{display:none !important}[data-platform='android'] .switch--checked scale-icon-action-success{position:absolute;display:inline-block !important;margin-top:2px;margin-left:1px}[data-platform='android'] .switch--checked .switch__thumb{color:var(--_background)}[data-platform='android'] .switch__io-text{display:none}[data-platform='android'] .switch--checked .switch__thumb{color:var(--telekom-color-primary-standard)}[data-platform='android'] .switch--disabled .switch__thumb{color:var(--telekom-color-ui-strong)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.switch__toggle{border:1px solid}scale-icon-action-checkmark{visibility:hidden !important}}";var Tag=function(){function Tag(hostRef){var _this10=this;_classCallCheck(this,Tag),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scaleClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-close",7),this.scaleCloseLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleClose",7),this.type="standard",this.color="standard",this.href="",this.target="_self",this.dismissable=!1,this.disabled=!1,this.dismissText="dismiss",this.handleClose=function(event){event.preventDefault(),event.stopPropagation(),_this10.disabled||Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this10,"scaleClose",event)}}return _createClass(Tag,[{key:"componentWillUpdate",value:function componentWillUpdate(){}},{key:"disconnectedCallback",value:function disconnectedCallback(){}},{key:"render",value:function render(){var Element=this.href&&!this.disabled?"a":"span",linkProps=this.href?{href:this.href,target:this.target}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(Element,Object.assign({part:this.getBasePartMap(),class:this.getCssClassMap()},linkProps),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("slot",null),this.dismissable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("button",{part:"button-dismissable",disabled:this.disabled,"aria-label":this.dismissText,onClick:this.handleClose},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-icon-action-close",{part:"icon-dismissable",size:16}))))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"tag--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("basePart"===mode?"base":"tag",this.size&&prefix+"size-"+this.size,this.type&&prefix+"type-"+this.type,this.color&&prefix+"color-"+this.color,!!this.href&&prefix+"link",!!this.dismissable&&prefix+"dismissable",!!this.disabled&&prefix+"disabled")}}]),Tag}();Tag.style=":host{--background:var(--telekom-color-ui-faint);--color:var(--telekom-color-text-and-icon-standard);--font:var(--telekom-text-style-caption-bold);--radius:2px;--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--icon-color:var(--telekom-color-text-and-icon-additional);--icon-color-hover:var(--color);--background-disabled:var(--telekom-color-ui-faint);--color-disabled:var(--telekom-color-text-and-icon-disabled);--spacing-dismissable:var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-03);--spacing-dismissable-small:var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-03);--height:24px;--height-small:20px;--border-button-dismissable-focus:1px solid transparent;--box-shadow-button-dismissable-focus:var(--box-shadow-focus);--background-button-dismissable-hover:var(\n    --telekom-color-ui-state-fill-hovered\n  );--background-button-standard-strong-dismissible-hover:var(\n    --telekom-color-ui-state-fill-hovered-inverted\n  );--background-button-standard-dismissible-hover:var(\n    --telekom-color-ui-state-fill-hovered\n  );--background-button-dismissable-active:var(\n    --telekom-color-ui-state-fill-pressed\n  );--height-button-dismissable:20px;--width-button-dismissable:20px;--height-button-dismissable-small:16px;--width-button-dismissable-small:16px;--spacing-small:0 var(--telekom-spacing-composition-space-04);--font-size-small:var(--telekom-typography-font-size-small);--line-height-small:var(--telekom-typography-line-spacing-loose)}.tag{display:inline-flex;outline:none;padding:0 8px;text-align:center;transition:all 0.15s ease-in-out;align-items:center;white-space:nowrap;border-radius:var(--telekom-radius-small);vertical-align:baseline;justify-content:center;font:var(--font);line-height:1;background:var(--background);color:var(--color);cursor:default;height:var(--height)}.tag scale-icon-action-close{color:var(--icon-color)}.tag:not(.tag--disabled) scale-icon-action-close:hover{color:var(--icon-color-hover)}.tag::slotted(*){padding:100px}.tag--dismissable{padding:0 0 0 8px}.tag--dismissable button{border:none;cursor:pointer;height:var(--height-button-dismissable);width:var(--width-button-dismissable);margin:0;outline:none;padding:0;background:transparent;margin:var(--spacing-dismissable);border-radius:var(--radius);align-items:center}.tag--dismissable scale-icon-action-close{display:flex !important;align-items:center;justify-content:center}.tag--dismissable button:focus{justify-content:center;outline:var(--focus-outline);outline-offset:1px}.tag--dismissable:not(.tag--disabled) button:hover{background:var(--background-button-dismissable-hover)}.tag--dismissable.tag--color-standard:not(.tag--disabled) button:hover{background:var(--background-button-standard-dismissible-hover)}.tag--dismissable.tag--type-strong.tag--color-standard:not(.tag--disabled) button:hover{background:var(--background-button-standard-strong-dismissible-hover)}.tag--dismissable button:active{background:var(--background-button-dismissable-active)}.tag--dismissable.tag--color-standard button:active{background:var(--background-button-standard-dismissible-hover)}.tag--dismissable.tag--type-strong.tag--color-standard button:active{background:var(--background-button-standard-strong-dismissible-hover)}.tag--size-small{font-size:var(--font-size-small);padding:0 6px;height:var(--height-small)}.tag--size-small.tag--dismissable{padding-right:0px}.tag--size-small.tag--dismissable button{height:var(--height-button-dismissable-small);width:var(--width-button-dismissable-small);margin:var(--spacing-dismissable-small)}.tag--disabled{background-color:var(--telekom-color-ui-faint) !important;color:var(--color-disabled) !important;pointer-events:none}.tag--disabled scale-icon-action-close{color:var(--color-disabled) !important;pointer-events:none}.tag--link{text-decoration:none}.tag--link:focus{outline:var(--focus-outline)}.tag--link{background:var(--background-secondary)}.tag--link:hover{background:var(--background-secondary)}.tag--type-standard.tag--color-cyan{background-color:var(--telekom-color-additional-cyan-subtle);color:var(--telekom-color-text-and-icon-on-subtle-cyan)}.tag--type-standard.tag--color-cyan.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-cyan)}.tag--type-standard.tag--color-yellow{background-color:var(--telekom-color-additional-yellow-subtle);color:var(--telekom-color-text-and-icon-on-subtle-yellow)}.tag--type-standard.tag--color-yellow.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-yellow)}.tag--type-standard.tag--color-green{background-color:var(--telekom-color-functional-success-subtle);color:var(--telekom-color-text-and-icon-on-subtle-success)}.tag--type-standard.tag--color-green.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-success)}.tag--type-standard.tag--color-orange{background-color:var(--telekom-color-functional-warning-subtle);color:var(--telekom-color-text-and-icon-on-subtle-warning)}.tag--type-standard.tag--color-orange.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-warning)}.tag--type-standard.tag--color-red{background-color:var(--telekom-color-functional-danger-subtle);color:var(--telekom-color-text-and-icon-on-subtle-danger)}.tag--type-standard.tag--color-red.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-danger)}.tag--type-standard.tag--color-violet{background-color:var(--telekom-color-additional-violet-subtle);color:var(--telekom-color-text-and-icon-on-subtle-violet)}.tag--type-standard.tag--color-violet.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-violet)}.tag--type-standard.tag--color-brown{background-color:var(--telekom-color-additional-brown-subtle);color:var(--telekom-color-text-and-icon-on-subtle-brown)}.tag--type-standard.tag--color-brown.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-brown)}.tag--type-standard.tag--color-olive{background-color:var(--telekom-color-additional-olive-subtle);color:var(--telekom-color-text-and-icon-on-subtle-olive)}.tag--type-standard.tag--color-olive.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-olive)}.tag--type-standard.tag--color-teal{background-color:var(--telekom-color-additional-teal-subtle);color:var(--telekom-color-text-and-icon-on-subtle-teal)}.tag--type-standard.tag--color-teal.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-on-subtle-teal)}.tag--type-strong.tag--color-standard{background-color:var(--telekom-color-ui-extra-strong);color:var(--telekom-color-text-and-icon-inverted-standard)}.tag--type-strong.tag--color-standard.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-inverted-additional)}.tag--type-strong.tag--color-cyan{background-color:var(--telekom-color-additional-cyan-400);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-cyan.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-yellow{background-color:var(--telekom-color-additional-yellow-400);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-yellow.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-green{background-color:var(--telekom-color-functional-success-standard);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-green.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-orange{background-color:var(--telekom-color-functional-warning-standard);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-orange.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-red{background-color:var(--telekom-color-functional-danger-standard);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-red.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-violet{background-color:var(--telekom-color-additional-violet-300);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-violet.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-brown{background-color:var(--telekom-color-additional-brown-400);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-brown.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-olive{background-color:var(--telekom-color-additional-olive-400);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-olive.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}.tag--type-strong.tag--color-teal{background-color:var(--telekom-color-additional-teal-400);color:var(--telekom-color-text-and-icon-black-standard)}.tag--type-strong.tag--color-teal.tag--dismissable scale-icon-action-close{color:var(--telekom-color-text-and-icon-black-additional)}";var TextField=function(){function TextField(hostRef){var _this11=this;_classCallCheck(this,TextField),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.i)(this,hostRef),this.scaleInput=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-input",7),this.scaleInputLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleInput",7),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleChange",7),this.scaleFocus=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-focus",7),this.scaleFocusLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleFocus",7),this.scaleBlur=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-blur",7),this.scaleBlurLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleBlur",7),this.scaleKeyDown=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scale-keydown",7),this.scaleKeyDownLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.e)(this,"scaleKeydown",7),this.type="text",this.inputModeType="text",this.name="",this.label="",this.helperText="",this.status="",this.invalid=!1,this.variant="informational",this.placeholder="",this.value="",this.step="1",this.hideLabelVisually=!1,this.experimentalControlled=!1,this.hasFocus=!1,this.internalId=Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.e)(),this.handleInput=function(event){var target=event.target;_this11.experimentalControlled&&(_this11.hostElement.querySelector("input").value=String(_this11.value),_this11.forceUpdate=String(Date.now())),target&&(_this11.value=target.value||"",_this11.emitChange()),Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this11,"scaleInput",event)},this.handleChange=function(event){var target=event.target;target&&(_this11.value=target.value||"",_this11.emitChange())},this.handleFocus=function(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this11,"scaleFocus"),_this11.hasFocus=!0},this.handleBlur=function(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this11,"scaleBlur"),_this11.hasFocus=!1},this.handleKeyDown=function(event){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(_this11,"scaleKeyDown",event)}}return _createClass(TextField,[{key:"componentWillLoad",value:function componentWillLoad(){null==this.inputId&&(this.inputId="input-text-field-"+this.internalId)}},{key:"componentDidRender",value:function componentDidRender(){var value=null==this.value?"":this.value.toString(),input=this.hostElement.querySelector("input");this.experimentalControlled&&input.value.toString()!==value&&(input.value=value),""!==this.status&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "status" is deprecated. Please use the "invalid" property!',type:"warn",source:this.hostElement}),this.size&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_33__.a)({tag:"deprecated",message:'Property "size" is deprecated. Please use css overwrites for a small version!',type:"warn",source:this.hostElement})}},{key:"emitChange",value:function emitChange(){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_35__.d)(this,"scaleChange",{value:null==this.value?this.value:this.value.toString()})}},{key:"render",value:function render(){var ariaInvalidAttr="error"===this.status||this.invalid?{"aria-invalid":"true"}:{},helperTextId="helper-message-"+this.internalId,ariaDescribedByAttr={"aria-describedBy":helperTextId},ariaDetailedById={"aria-details":this.ariaDetailedId};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("label",{class:"text-field__label",htmlFor:this.inputId},this.label),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("input",Object.assign({type:this.type,inputMode:this.inputModeType,class:"text-field__control",value:this.value},this.name?{name:this.name}:{},this.inputAutofocus?{autofocus:"true"}:{},{required:this.required,minLength:this.minLength,maxLength:this.maxLength,min:this.min,max:this.max,id:this.inputId,list:this.list,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown},this.placeholder&&!this.readonly?{placeholder:this.placeholder}:{},{disabled:this.disabled,readonly:this.readonly,autocomplete:this.inputAutocomplete},ariaDetailedById,ariaInvalidAttr,this.helperText?ariaDescribedByAttr:{},["number","date","month","week","time","datetime-local"].includes(this.type)?{step:this.step}:{})),(!!this.helperText||!!this.counter)&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"text-field__meta","aria-live":"polite","aria-relevant":"additions removals"},this.helperText&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("scale-helper-text",{id:helperTextId,helperText:this.helperText,variant:this.invalid?"danger":this.variant}),this.counter&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.g)("div",{class:"text-field__counter"},this.value?String(this.value).length:0," /"," ",this.maxLength))))}},{key:"getCssClassMap",value:function getCssClassMap(){var animated=null!=this.value&&""!==this.value||["date","month","week","time","datetime-local"].includes(this.type);return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_32__.a)("text-field",this.type&&"text-field--type-"+this.type,this.hasFocus&&"text-field--has-focus",this.disabled&&"text-field--disabled",this.transparent&&"text-field--transparent",this.status&&"text-field--status-"+this.status,this.invalid&&"text-field--variant-danger",this.variant&&"text-field--variant-"+this.variant,this.helperText&&"text-field--helper-text",this.readonly&&"text-field--readonly",this.hideLabelVisually&&"text-field--hide-label",animated&&"animated")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_31__.f)(this)}}]),TextField}();TextField.style="scale-text-field{--transition:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);--radius:var(--telekom-radius-standard);--border:var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);--border-error:var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-standard);--border-success:var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-success-standard);--border-warning:var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-warning-standard);--border-color-hover:var(--telekom-color-ui-border-hovered);--border-color-focus:var(--telekom-color-ui-border-hovered);--border-color-disabled:var(--telekom-color-ui-border-disabled);--background-color-hover:var(--telekom-color-ui-state-fill-hovered);--background-color-disabled:none;--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--height:44px;--spacing-x:var(--telekom-spacing-composition-space-05);--color-disabled:var(--telekom-color-text-and-icon-disabled);--background-disabled:none;--border-color-readonly:var(--telekom-color-ui-border-disabled);--background-readonly:var(--telekom-color-ui-disabled);--font-weight-meta:var(--telekom-line-weight-bold);--font-size-meta:var(--telekom-typography-font-size-small);--line-height-meta:var(--telekom-typography-line-spacing-standard);--spacing-y-meta:var(--telekom-spacing-composition-space-03);--color-meta:var(--telekom-color-text-and-icon-standard);--color-meta-error:var(--telekom-color-text-and-icon-functional-danger);--spacing-control:1.125rem\n    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem\n    calc(0.75rem - var(--telekom-spacing-composition-space-01));--transition-control:var(--transition);--background-control:var(--telekom-color-ui-state-fill-standard);--margin-bottom-control:var(--telekom-spacing-composition-space-03);--transition-counter:var(--transition);--color-counter-error:var(--color-meta-error);--font-size-helper-text:var(--telekom-typography-font-size-small);--line-height-helper-text:1.35;--font-weight-helper-text:var(--telekom-typography-font-weight-bold);--color-helper-text:var(\n    --telekom-color-text-and-icon-functional-informational\n  );--color-helper-text-error:var(--color-meta-error);--color-helper-text-success:var(\n    --telekom-color-text-and-icon-functional-success\n  );--color-helper-text-warning:var(\n    --telekom-color-text-and-icon-functional-warning\n  );--color-helper-text-neutral:var(--telekom-color-text-and-icon-additional);--helper-text-icon-size:11px;--transition-placeholder:var(--transition);--color-placeholder:var(--telekom-color-text-and-icon-additional);--color-label:var(--telekom-color-text-and-icon-additional);--color-label-readonly:var(--telekom-color-text-and-icon-standard);--z-index-label:var(--scl-z-index-10);--transition-label:var(--transition)}.text-field{position:relative}.text-field .text-field__control{width:100%;height:var(--height);margin:0;display:flex;outline:none;padding:var(--spacing-control);z-index:1;box-sizing:border-box;transition:var(--transition-control);font:var(--telekom-text-style-body);border-radius:var(--radius);border:var(--border);background-color:var(--background-control);color:var(--color-meta)}.text-field--hide-label .text-field__control{padding:5px var(--telekom-spacing-composition-space-12) 5px\n    calc(var(--spacing-x) - 1px)}.text-field--hide-label .text-field__label{visibility:hidden}.text-field.text-field--helper-text .text-field__control{margin-bottom:var(--margin-bottom-control)}.text-field .text-field__counter{display:flex;transition:var(--transition-counter);margin-left:auto;justify-content:flex-end;font:var(--telekom-text-style-small);color:var(--telekom-color-text-and-icon-standard)}.text-field scale-helper-text{--color-informational:var(--color-helper-text);--color-warning:var(--color-helper-text-warning);--color-danger:var(--color-helper-text-error);--color-success:var(--color-helper-text-success);--color-neutral:var(--color-helper-text-neutral);--font-size:var(--font-size-helper-text);--font-weight:var(--font-weight-helper-text);--line-height:var(--line-height-helper-text);--icon-size-helper-text:var(--helper-text-icon-size);font-weight:var(--telekom-typography-font-weight-bold);display:flex}.text-field .text-field__meta{display:flex;justify-content:space-between;margin-top:var(--spacing-y-meta);color:var(--color-meta)}.text-field:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover{border-color:var(--border-color-hover);background-color:var(--background-color-hover)}.text-field:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus{border-color:var(--border-color-focus);outline:var(--focus-outline);outline-offset:1px}.text-field:not(.text-field--disabled) .text-field__control:focus::placeholder{color:var(--color-placeholder)}.text-field .text-field__control::placeholder,.text-field ::placeholder{color:transparent;transition:var(--transition-placeholder)}.text-field__label{top:0;left:0;color:var(--color-label);display:flex;z-index:var(--z-index-label);position:absolute;transition:var(--transition-label);pointer-events:none;font:var(--telekom-text-style-ui);transform:translate(var(--spacing-x), 0.875rem)}.text-field--has-focus:not(.text-field--readonly) .text-field__label,.animated .text-field__label{font:var(--telekom-text-style-small-bold);transform:translate(\n    var(--spacing-x),\n    calc(0.25rem + var(--telekom-spacing-composition-space-01))\n  )}.text-field--variant-danger .text-field__control{border:var(--border-error)}.text-field--variant-success .text-field__control{border:var(--border-success)}.text-field--variant-warning .text-field__control{border:var(--border-warning)}.text-field--variant-danger:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover,.text-field--variant-danger:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus{border-color:var(--telekom-color-functional-danger-hovered)}.text-field--variant-success:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover,.text-field--variant-success:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus{border-color:var(--telekom-color-functional-success-hovered)}.text-field--variant-warning:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover,.text-field--variant-warning:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus{border-color:var(--telekom-color-functional-warning-hovered)}.text-field--variant-danger .text-field__helper-text{color:var(--color-helper-text-error)}.text-field--variant-danger .text-field__counter{color:var(--color-counter-error)}.text-field--variant-success .text-field__helper-text{color:var(--color-helper-text-success)}.text-field--variant-success .text-field__counter{color:var(--telekom-color-text-and-icon-functional-success)}.text-field--variant-warning .text-field__helper-text{color:var(--color-helper-text-warning)}.text-field--variant-warning .text-field__counter{color:var(--telekom-color-text-and-icon-functional-warning)}.text-field--transparent .text-field__control{background-color:transparent}.text-field--readonly input,.text-field--readonly .text-field__control{color:var(--color-label-readonly);border:none;background:var(--background-readonly)}.text-field--readonly .text-field__control:focus{outline:var(--focus-outline);outline-offset:1px}.text-field--disabled label,.text-field--disabled .text-field__label,.text-field--disabled input,.text-field--disabled .text-field__control,.text-field--disabled .text-field__meta,.text-field--disabled .text-field__counter,.text-field--disabled .text-field__helper-text{cursor:not-allowed;border-color:var(--border-color-disabled);background-color:var(--background-color-disabled);color:var(--color-disabled);background:transparent}.text-field--disabled.animated label.text-field__label{color:var(--color-disabled)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}input[type='number']{-moz-appearance:textfield}input[type='datetime-local']::-webkit-calendar-picker-indicator,input[type='time']::-webkit-calendar-picker-indicator,input[type='date']::-webkit-calendar-picker-indicator,input[type='week']::-webkit-calendar-picker-indicator,input[type='month']::-webkit-calendar-picker-indicator{position:absolute;right:12px}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{color-scheme:dark}@media screen and (forced-colors: active), (-ms-high-contrast: active){.text-field--readonly input,.text-field--readonly .text-field__control{border:1px solid}}"}}]);
+//# sourceMappingURL=35.d8aef789.iframe.bundle.js.map
\ No newline at end of file
diff --git a/34.b9ee6464.iframe.bundle.js.LICENSE.txt b/35.d8aef789.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 34.b9ee6464.iframe.bundle.js.LICENSE.txt
rename to 35.d8aef789.iframe.bundle.js.LICENSE.txt
diff --git a/35.d8aef789.iframe.bundle.js.map b/35.d8aef789.iframe.bundle.js.map
new file mode 100644
index 0000000000..6745ceb239
--- /dev/null
+++ b/35.d8aef789.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"35.d8aef789.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/35.82777aa1.iframe.bundle.js b/36.349e1fe7.iframe.bundle.js
similarity index 97%
rename from 35.82777aa1.iframe.bundle.js
rename to 36.349e1fe7.iframe.bundle.js
index 1bd66e3cbe..8f38c9958c 100644
--- a/35.82777aa1.iframe.bundle.js
+++ b/36.349e1fe7.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 35.82777aa1.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-logo_2.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_logo",(function(){return Logo})),__webpack_require__.d(__webpack_exports__,"scale_logo_svg",(function(){return LogoSvg}));__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}var Logo=function(){function Logo(hostRef){_classCallCheck(this,Logo),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.i)(this,hostRef),this.variant="magenta",this.transparent=!1,this.size=38,this.href="javascript:void(0);",this.focusable=!0,this.scrollIntoViewOnFocus=!1,this.logoTitle="Telekom Logo",this.logoAriaHidden=!1}return _createClass(Logo,[{key:"componentDidRender",value:function componentDidRender(){this.accessibilityTitle&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_3__.a)({tag:"deprecated",message:'Property "accessibilityTitle" is deprecated. Please use the "logoTitle" property!',type:"warn",source:this.hostElement}),this.language&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_3__.a)({tag:"deprecated",message:'Property "language" is deprecated. Localized brand claim is not shown anymore.',type:"warn",source:this.hostElement})}},{key:"render",value:function render(){var _this=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.c,{exportparts:"logo-svg"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("style",null,this.size?":host { --logo-size: "+this.size+"px; }":"",this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("a",{href:this.href,part:this.getCssClassMap(),tabindex:!1===this.focusable?"-1":"0",onFocus:function onFocus(){!0===_this.scrollIntoViewOnFocus&&window.scrollTo({top:0})},title:this.logoHideTitle?void 0:this.logoTitle,"aria-describedby":this.logoAriaDescribedBy,"aria-hidden":this.logoAriaHidden},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("scale-logo-svg",{part:"icon",color:this.variant,logoTitle:this.logoTitle,logoHideTitle:this.logoHideTitle})))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__.a)("logo",this.variant&&"variant-"+this.variant,this.transparent&&"transparent")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.f)(this)}}]),Logo}();Logo.style=":host{--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--background-magenta:var(--telekom-color-background-canvas);--background-white:var(--telekom-color-primary-standard)}[part~='logo']{display:inline-flex;height:var(--logo-size);position:relative}[part~='logo']:focus,[part~='logo']:focus-visible{outline:var(--focus-outline);outline-offset:2px;border-radius:2px}[part~='variant-magenta']{background-color:var(--background-magenta)}[part~='variant-white']{background-color:var(--background-white)}[part~='transparent']{background-color:transparent}[part~='icon'] svg{height:var(--logo-size)}[part~='icon']:focus-visible{outline:none}[part~='icon'] svg:focus{outline:none}";var i=0,colors={magenta:"#e20074",white:"#ffffff"},LogoSvg=function(){function LogoSvg(hostRef){var _this2=this;_classCallCheck(this,LogoSvg),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.i)(this,hostRef),this.color="magenta",this.innerRole="img",this.focusable=!0,this.getTitle=function(title,linkAddition){if(!_this2.logoHideTitle)return _this2.logoTitle?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("title",{id:"logo-title-"+i},_this2.logoTitle):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("title",{id:"logo-title-"+i},title+" "+("link"===_this2.innerRole?linkAddition:""))}}return _createClass(LogoSvg,[{key:"componentWillLoad",value:function componentWillLoad(){i++}},{key:"componentDidRender",value:function componentDidRender(){this.accessibilityTitle&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_3__.a)({tag:"deprecated",message:'Property "accessibilityTitle" is deprecated. Please use the "logoTitle" property!',type:"warn",source:this.hostElement})}},{key:"getColor",value:function getColor(){return this.color,colors[this.color]}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 38",part:"logo-svg",fill:this.getColor(),role:"link"===this.innerRole?null:"img","aria-labelledby":"logo-title-"+i},this.getTitle("Telekom Logo","- Go to Start Page"),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("path",{d:"M7.6 25.1H0v-7.6h7.6v7.6ZM0 0v12.9h2.3v-.4c0-6.1 3.4-9.9 9.9-9.9h.4V30c0 3.8-1.5 5.3-5.3 5.3H6.1V38h19.8v-2.7h-1.1c-3.8 0-5.3-1.5-5.3-5.3V2.7h.4c6.5 0 9.9 3.8 9.9 9.9v.4h2.3V0H0Zm24.3 25.1h7.6v-7.6h-7.6v7.6Z"})))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.f)(this)}}]),LogoSvg}()},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
-//# sourceMappingURL=35.82777aa1.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 36.349e1fe7.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-logo_2.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_logo",(function(){return Logo})),__webpack_require__.d(__webpack_exports__,"scale_logo_svg",(function(){return LogoSvg}));__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}var Logo=function(){function Logo(hostRef){_classCallCheck(this,Logo),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.i)(this,hostRef),this.variant="magenta",this.transparent=!1,this.size=38,this.href="javascript:void(0);",this.focusable=!0,this.scrollIntoViewOnFocus=!1,this.logoTitle="Telekom Logo",this.logoAriaHidden=!1}return _createClass(Logo,[{key:"componentDidRender",value:function componentDidRender(){this.accessibilityTitle&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_3__.a)({tag:"deprecated",message:'Property "accessibilityTitle" is deprecated. Please use the "logoTitle" property!',type:"warn",source:this.hostElement}),this.language&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_3__.a)({tag:"deprecated",message:'Property "language" is deprecated. Localized brand claim is not shown anymore.',type:"warn",source:this.hostElement})}},{key:"render",value:function render(){var _this=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.c,{exportparts:"logo-svg"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("style",null,this.size?":host { --logo-size: "+this.size+"px; }":"",this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("a",{href:this.href,part:this.getCssClassMap(),tabindex:!1===this.focusable?"-1":"0",onFocus:function onFocus(){!0===_this.scrollIntoViewOnFocus&&window.scrollTo({top:0})},title:this.logoHideTitle?void 0:this.logoTitle,"aria-describedby":this.logoAriaDescribedBy,"aria-hidden":this.logoAriaHidden},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("scale-logo-svg",{part:"icon",color:this.variant,logoTitle:this.logoTitle,logoHideTitle:this.logoHideTitle})))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_2__.a)("logo",this.variant&&"variant-"+this.variant,this.transparent&&"transparent")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.f)(this)}}]),Logo}();Logo.style=":host{--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--background-magenta:var(--telekom-color-background-canvas);--background-white:var(--telekom-color-primary-standard)}[part~='logo']{display:inline-flex;height:var(--logo-size);position:relative}[part~='logo']:focus,[part~='logo']:focus-visible{outline:var(--focus-outline);outline-offset:2px;border-radius:2px}[part~='variant-magenta']{background-color:var(--background-magenta)}[part~='variant-white']{background-color:var(--background-white)}[part~='transparent']{background-color:transparent}[part~='icon'] svg{height:var(--logo-size)}[part~='icon']:focus-visible{outline:none}[part~='icon'] svg:focus{outline:none}";var i=0,colors={magenta:"#e20074",white:"#ffffff"},LogoSvg=function(){function LogoSvg(hostRef){var _this2=this;_classCallCheck(this,LogoSvg),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.i)(this,hostRef),this.color="magenta",this.innerRole="img",this.focusable=!0,this.getTitle=function(title,linkAddition){if(!_this2.logoHideTitle)return _this2.logoTitle?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("title",{id:"logo-title-"+i},_this2.logoTitle):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("title",{id:"logo-title-"+i},title+" "+("link"===_this2.innerRole?linkAddition:""))}}return _createClass(LogoSvg,[{key:"componentWillLoad",value:function componentWillLoad(){i++}},{key:"componentDidRender",value:function componentDidRender(){this.accessibilityTitle&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_3__.a)({tag:"deprecated",message:'Property "accessibilityTitle" is deprecated. Please use the "logoTitle" property!',type:"warn",source:this.hostElement})}},{key:"getColor",value:function getColor(){return this.color,colors[this.color]}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.c,null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 38",part:"logo-svg",fill:this.getColor(),role:"link"===this.innerRole?null:"img","aria-labelledby":"logo-title-"+i},this.getTitle("Telekom Logo","- Go to Start Page"),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.g)("path",{d:"M7.6 25.1H0v-7.6h7.6v7.6ZM0 0v12.9h2.3v-.4c0-6.1 3.4-9.9 9.9-9.9h.4V30c0 3.8-1.5 5.3-5.3 5.3H6.1V38h19.8v-2.7h-1.1c-3.8 0-5.3-1.5-5.3-5.3V2.7h.4c6.5 0 9.9 3.8 9.9 9.9v.4h2.3V0H0Zm24.3 25.1h7.6v-7.6h-7.6v7.6Z"})))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_1__.f)(this)}}]),LogoSvg}()},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
+//# sourceMappingURL=36.349e1fe7.iframe.bundle.js.map
\ No newline at end of file
diff --git a/36.352c0c88.iframe.bundle.js.LICENSE.txt b/36.349e1fe7.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 36.352c0c88.iframe.bundle.js.LICENSE.txt
rename to 36.349e1fe7.iframe.bundle.js.LICENSE.txt
diff --git a/36.349e1fe7.iframe.bundle.js.map b/36.349e1fe7.iframe.bundle.js.map
new file mode 100644
index 0000000000..9bd282f22b
--- /dev/null
+++ b/36.349e1fe7.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"36.349e1fe7.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/36.352c0c88.iframe.bundle.js.map b/36.352c0c88.iframe.bundle.js.map
deleted file mode 100644
index 10ecdcd8a0..0000000000
--- a/36.352c0c88.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"36.352c0c88.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/37.6a0f30c6.iframe.bundle.js.map b/37.6a0f30c6.iframe.bundle.js.map
deleted file mode 100644
index bb0c918e2a..0000000000
--- a/37.6a0f30c6.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"37.6a0f30c6.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/36.352c0c88.iframe.bundle.js b/37.ffa26d95.iframe.bundle.js
similarity index 99%
rename from 36.352c0c88.iframe.bundle.js
rename to 37.ffa26d95.iframe.bundle.js
index 9143ade183..9ec18e909e 100644
--- a/36.352c0c88.iframe.bundle.js
+++ b/37.ffa26d95.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 36.352c0c88.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-modal.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_modal",(function(){return Modal}));__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.some.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function queryShadowRoot(root,skipNode,isMatch){var maxDepth=arguments.length>3&&void 0!==arguments[3]?arguments[3]:20,depth=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,matches=[];if(depth>=maxDepth)return matches;for(var traverseSlot=function traverseSlot($slot){var assignedNodes=$slot.assignedNodes().filter((function(node){return 1===node.nodeType}));return assignedNodes.length>0?queryShadowRoot(assignedNodes[0].parentElement,skipNode,isMatch,maxDepth,depth+1):[]},children=Array.from(root.children||[]),_i=0,_children=children;_i<_children.length;_i++){var $child=_children[_i];skipNode($child)||(isMatch($child)&&matches.push($child),null!=$child.shadowRoot?matches.push.apply(matches,_toConsumableArray(queryShadowRoot($child.shadowRoot,skipNode,isMatch,maxDepth,depth+1))):"SLOT"===$child.tagName?matches.push.apply(matches,_toConsumableArray(traverseSlot($child))):matches.push.apply(matches,_toConsumableArray(queryShadowRoot($child,skipNode,isMatch,maxDepth,depth+1))))}return matches}function isHidden($elem){return $elem.hasAttribute("hidden")||$elem.hasAttribute("aria-hidden")&&"false"!==$elem.getAttribute("aria-hidden")||"none"===$elem.style.display||"0"===$elem.style.opacity||"hidden"===$elem.style.visibility||"collapse"===$elem.style.visibility}function isFocusable($elem){return"-1"!==$elem.getAttribute("tabindex")&&!isHidden($elem)&&!function isDisabled($elem){return $elem.hasAttribute("disabled")||$elem.hasAttribute("aria-disabled")&&"false"!==$elem.getAttribute("aria-disabled")}($elem)&&($elem.hasAttribute("tabindex")||($elem instanceof HTMLAnchorElement||$elem instanceof HTMLAreaElement)&&$elem.hasAttribute("href")||$elem instanceof HTMLButtonElement||$elem instanceof HTMLInputElement||$elem instanceof HTMLTextAreaElement||$elem instanceof HTMLSelectElement||$elem instanceof HTMLIFrameElement)}function animateTo(element,keyframes,options){var anim=element.animate(keyframes,Object.assign(Object.assign({},options),{fill:"both"}));return anim.addEventListener("finish",(function(){anim.commitStyles(),anim.cancel()})),anim}var keyframeDefaults={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"},KEYFRAMES={fadeIn:[Object.assign(Object.assign({offset:0},keyframeDefaults),{opacity:0}),Object.assign(Object.assign({offset:1},keyframeDefaults),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},keyframeDefaults),{opacity:1}),Object.assign(Object.assign({offset:1},keyframeDefaults),{opacity:0})],fadeInTop:[Object.assign(Object.assign({offset:0},keyframeDefaults),{opacity:0,top:"-3rem"}),Object.assign(Object.assign({offset:1},keyframeDefaults),{opacity:1,top:0})]},supportsResizeObserver="ResizeObserver"in window,Modal=function(){function Modal(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Modal),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.i)(this,hostRef),this.scaleOpen=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scale-open",7),this.scaleOpenLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scaleOpen",7),this.scaleBeforeClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scale-before-close",7),this.scaleBeforeCloseLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scaleBeforeClose",7),this.scaleClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scale-close",7),this.scaleCloseLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scaleClose",7),this.size="default",this.opened=!1,this.duration=200,this.closeButtonLabel="Close",this.closeButtonTitle="Close",this.omitCloseButton=!1,this.alignActions="right",this.allowInjectingStyleToBody=!1,this.isOpen=this.opened||!1,this.hasActionsSlot=!1,this.hasBody=!1,this.hasScroll=!1,this.bodyOverflowValue="",this.focusableElements=[],this.handleKeypress=function(event){_this.isOpen&&"Escape"===event.key&&_this.emitBeforeClose("ESCAPE_KEY")},this.handleTopFocus=function(){_this.attemptFocus(_this.getLastFocusableElement())},this.handleBottomFocus=function(){_this.attemptFocus(_this.getFirstFocusableElement())}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Modal,[{key:"disconnectedCallback",value:function disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}},{key:"componentWillRender",value:function componentWillRender(){var actionSlots=this.hostElement.querySelectorAll('[slot="action"]'),bodySlot=Array.from(this.hostElement.shadowRoot.querySelectorAll("slot")).find((function(x){return!x.name}));this.hasActionsSlot=actionSlots.length>0,null!=bodySlot&&(this.hasBody=bodySlot.assignedElements().length>0)}},{key:"emitBeforeClose",value:function emitBeforeClose(trigger){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__.d)(this,"scaleBeforeClose",{trigger:trigger}).some((function(event){return event.defaultPrevented}))||(this.opened=!1)}},{key:"componentDidLoad",value:function componentDidLoad(){var _this2=this;this.focusableElements=queryShadowRoot(this.hostElement.shadowRoot,(function(el){return isHidden(el)||el.matches("[data-focus-trap-edge]")}),isFocusable),supportsResizeObserver&&(this.resizeObserver=new ResizeObserver((function(){_this2.setHasScroll()})),this.resizeObserver.observe(this.modalBody)),this.setHasScroll()}},{key:"setHasScroll",value:function setHasScroll(){var container=this.modalBody;this.hasScroll=container.scrollHeight>container.clientHeight}},{key:"getFirstFocusableElement",value:function getFirstFocusableElement(){return this.focusableElements[0]}},{key:"getLastFocusableElement",value:function getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}},{key:"attemptFocus",value:function attemptFocus(element){null!=element?element.focus():this.closeButton.focus()}},{key:"openedChanged",value:function openedChanged(newValue){!0===newValue?(this.open(),this.allowInjectingStyleToBody&&(this.bodyOverflowValue=document.body.style.overflow,document.body.style.setProperty("overflow","hidden"))):(this.close(),this.allowInjectingStyleToBody&&document.body.style.setProperty("overflow",this.bodyOverflowValue))}},{key:"open",value:function open(){var _this3=this;this.isOpen=!0;try{animateTo(this.modalWindow,KEYFRAMES.fadeInTop,{duration:this.duration,delay:.5*this.duration}),animateTo(this.modalContainer,KEYFRAMES.fadeIn,{duration:this.duration}).addEventListener("finish",(function(){_this3.attemptFocus(_this3.getFirstFocusableElement()),Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__.d)(_this3,"scaleOpen")})),this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(err){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__.d)(this,"scaleOpen")}}},{key:"close",value:function close(){var _this4=this;try{animateTo(this.modalContainer,KEYFRAMES.fadeOut,{duration:this.duration}).addEventListener("finish",(function(){_this4.isOpen=!1,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__.d)(_this4,"scaleClose")})),this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(err){this.isOpen=!1,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__.d)(this,"scaleClose")}}},{key:"render",value:function render(){var _this5=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{ref:function ref(el){return _this5.modalContainer=el},class:this.getCssClassMap(),part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("base",this.isOpen&&"open")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{class:"modal__backdrop",part:"backdrop",onClick:function onClick(){return _this5.emitBeforeClose("BACKDROP")}}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{"data-focus-trap-edge":!0,onFocus:this.handleTopFocus,tabindex:"0"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{class:"modal__window",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("window",this.size&&"size-"+this.size),ref:function ref(el){return _this5.modalWindow=el},role:"dialog","aria-modal":"true","aria-label":this.heading},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{class:"modal__header",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("header",this.hasScroll&&"has-scroll")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("h2",{class:"modal__heading",part:"heading"},this.heading),!this.omitCloseButton&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("button",{ref:function ref(el){return _this5.closeButton=el},class:"modal__close-button",part:"close-button",onClick:function onClick(){return _this5.emitBeforeClose("CLOSE_BUTTON")},"aria-label":this.closeButtonLabel,title:this.closeButtonTitle},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("slot",{name:"close-icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("scale-icon-action-circle-close",{decorative:!0})))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{ref:function ref(el){return _this5.modalBody=el},class:"modal__body-wrapper",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("body-wrapper",this.hasBody&&"has-body")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{class:"modal__body",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("body",this.hasBody&&"has-body")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("slot",null))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{class:"modal__actions",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("actions","align-"+this.alignActions,this.hasActionsSlot&&"has-actions",this.hasScroll&&"has-scroll")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("slot",{name:"action"}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{"data-focus-trap-edge":!0,onFocus:this.handleBottomFocus,tabindex:"0"})))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("modal",this.isOpen&&"modal--is-open",this.hasActionsSlot&&"modal--has-actions","modal--align-actions-"+this.alignActions,this.hasScroll&&"modal--has-scroll",this.hasBody&&"modal--has-body",this.size&&"modal--size-"+this.size)}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.f)(this)}}],[{key:"watchers",get:function get(){return{opened:["openedChanged"]}}}]),Modal}();Modal.style=":host{--spacing-x:var(--telekom-spacing-composition-space-06);--background-overlay:var(\n    --telekom-color-background-backdrop,\n    rgba(108, 108, 108, 0.7)\n  );--max-height-window:calc(\n    100vh - (2 * var(--telekom-spacing-composition-space-19))\n  );--radius-window:var(--telekom-radius-large);--box-shadow-window:var(--telekom-shadow-top);--background-window:var(--telekom-color-background-surface);--color-window:var(--telekom-color-text-and-icon-standard);--size-window-small:calc(\n    (6 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (5 * var(--telekom-spacing-composition-space-10))\n  );--size-window-default:calc(\n    (8 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (7 * var(--telekom-spacing-composition-space-10))\n  );--size-window-large:calc(\n    (12 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (11 * var(--telekom-spacing-composition-space-10))\n  );--spacing-x-header:var(--telekom-spacing-composition-space-08);--spacing-y-header:var(--telekom-spacing-composition-space-08);--border-bottom-header-has-scroll:var(--telekom-line-weight-standard) solid\n    var(--telekom-color-ui-subtle);--font-family-heading:var(--telekom-typography-font-family-sans);--font-size-heading:var(--telekom-typography-font-size-callout);--font-weight-heading:var(--telekom-typography-font-weight-extra-bold);--spacing-close-button:var(--telekom-spacing-composition-space-04);--radius-close-button:var(--telekom-radius-standard);--transition-close-button:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);--box-shadow-close-button-focus:0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);--color-close-button:var(--telekom-color-text-and-icon-standard);--color-close-button-hover:var(--telekom-color-primary-hovered);--color-close-button-active:var(--telekom-color-primary-pressed);--spacing-x-body-wrapper:var(--telekom-spacing-composition-space-08);--spacing-y-body:var(--telekom-spacing-composition-space-08);--spacing-actions:var(--telekom-spacing-composition-space-06)\n    var(--telekom-spacing-composition-space-08)\n    var(--telekom-spacing-composition-space-08);--spacing-x-actions-slotted:var(--telekom-spacing-composition-space-04);--background-actions-has-scroll:var(\n    --telekom-color-background-surface-subtle\n  )}.modal{top:0;left:0;width:100%;bottom:0;display:none;z-index:100;position:fixed;background:var(--background-overlay);box-sizing:border-box;align-items:center;justify-content:center;padding-left:var(--spacing-x);padding-right:var(--spacing-x)}.modal.modal--is-open{display:flex}.modal__backdrop{top:0;left:0;width:100%;height:100%;z-index:0;position:absolute}.modal__window{width:100%;height:auto;display:flex;z-index:1;position:relative;overflow-y:auto;flex-direction:column;background-color:var(--background-window);color:var(--color-window);max-height:var(--max-height-window);min-height:var(--min-height-window);border-radius:var(--radius-window);box-shadow:var(--box-shadow-window)}.modal__window .modal__body-wrapper{overflow-y:auto;flex-shrink:1;flex-grow:1}.modal--size-small .modal__window{max-width:var(--size-window-small)}.modal--size-default .modal__window{max-width:var(--size-window-default)}.modal--size-large .modal__window{max-width:var(--size-window-large)}@media (max-height: 30em){.modal__window{max-height:calc(100vh - var(--telekom-spacing-composition-space-08))}}.modal__window:after{top:0;left:0;width:100%;border:1px solid transparent;height:100%;content:'';display:block;position:absolute;box-sizing:border-box;pointer-events:none;border-radius:var(--radius-window)}.modal__header{display:flex;align-items:flex-start;flex-shrink:0;justify-content:space-between;margin-left:var(--spacing-x-header);margin-right:var(--spacing-x-header);padding-top:var(--spacing-y-header);padding-bottom:var(--spacing-y-header)}.modal--has-scroll .modal__header{border-bottom:var(--border-bottom-header-has-scroll)}.modal__heading{margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-heading);font-weight:var(--font-weight-heading)}.modal__close-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-close-button);margin-bottom:calc(-2 * var(--spacing-close-button));border:0;border-radius:var(--radius-close-button);outline:none;color:var(--color-close-button);background:transparent;transition:var(--transition-close-button);transform:translate(\n    var(--spacing-close-button),\n    calc(-1 * var(--spacing-close-button))\n  );appearance:none;cursor:pointer;user-select:none}.modal__close-button:focus{box-shadow:var(--box-shadow-close-button-focus)}.modal__close-button:hover{color:var(--color-close-button-hover)}.modal__close-button:active{color:var(--color-close-button-active)}.modal__body-wrapper{padding-left:var(--spacing-x-body-wrapper);padding-right:var(--spacing-x-body-wrapper)}.modal--has-body .modal__body-wrapper{min-height:var(--telekom-spacing-related-lg)}.modal--has-body .modal__body{margin-top:0;margin-bottom:0}.modal--has-body:not(.modal--has-actions) .modal__body{margin-bottom:var(--spacing-y-body)}.modal--has-scroll.modal--has-body .modal__body{margin-top:var(--spacing-y-body);margin-bottom:var(--spacing-y-body)}.modal--has-body .modal__body ::slotted(*){font:var(--telekom-text-style-body)}.modal--has-body .modal__body ::slotted(*:not([slot]):first-child){margin-top:0}.modal--has-body .modal__body ::slotted(*:not([slot]):last-of-type){margin-bottom:0}.modal__actions{display:none;flex-shrink:0;justify-content:flex-end;padding:var(--spacing-actions)}.modal__actions ::slotted(*){margin-left:var(--spacing-x-actions-slotted)}.modal--has-actions .modal__actions{display:flex}.modal--align-actions-left .modal__actions{justify-content:flex-start}.modal--has-scroll .modal__actions{background-color:var(--background-actions-has-scroll)}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
-//# sourceMappingURL=36.352c0c88.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 37.ffa26d95.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-modal.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_modal",(function(){return Modal}));__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.some.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function queryShadowRoot(root,skipNode,isMatch){var maxDepth=arguments.length>3&&void 0!==arguments[3]?arguments[3]:20,depth=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,matches=[];if(depth>=maxDepth)return matches;for(var traverseSlot=function traverseSlot($slot){var assignedNodes=$slot.assignedNodes().filter((function(node){return 1===node.nodeType}));return assignedNodes.length>0?queryShadowRoot(assignedNodes[0].parentElement,skipNode,isMatch,maxDepth,depth+1):[]},children=Array.from(root.children||[]),_i=0,_children=children;_i<_children.length;_i++){var $child=_children[_i];skipNode($child)||(isMatch($child)&&matches.push($child),null!=$child.shadowRoot?matches.push.apply(matches,_toConsumableArray(queryShadowRoot($child.shadowRoot,skipNode,isMatch,maxDepth,depth+1))):"SLOT"===$child.tagName?matches.push.apply(matches,_toConsumableArray(traverseSlot($child))):matches.push.apply(matches,_toConsumableArray(queryShadowRoot($child,skipNode,isMatch,maxDepth,depth+1))))}return matches}function isHidden($elem){return $elem.hasAttribute("hidden")||$elem.hasAttribute("aria-hidden")&&"false"!==$elem.getAttribute("aria-hidden")||"none"===$elem.style.display||"0"===$elem.style.opacity||"hidden"===$elem.style.visibility||"collapse"===$elem.style.visibility}function isFocusable($elem){return"-1"!==$elem.getAttribute("tabindex")&&!isHidden($elem)&&!function isDisabled($elem){return $elem.hasAttribute("disabled")||$elem.hasAttribute("aria-disabled")&&"false"!==$elem.getAttribute("aria-disabled")}($elem)&&($elem.hasAttribute("tabindex")||($elem instanceof HTMLAnchorElement||$elem instanceof HTMLAreaElement)&&$elem.hasAttribute("href")||$elem instanceof HTMLButtonElement||$elem instanceof HTMLInputElement||$elem instanceof HTMLTextAreaElement||$elem instanceof HTMLSelectElement||$elem instanceof HTMLIFrameElement)}function animateTo(element,keyframes,options){var anim=element.animate(keyframes,Object.assign(Object.assign({},options),{fill:"both"}));return anim.addEventListener("finish",(function(){anim.commitStyles(),anim.cancel()})),anim}var keyframeDefaults={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"},KEYFRAMES={fadeIn:[Object.assign(Object.assign({offset:0},keyframeDefaults),{opacity:0}),Object.assign(Object.assign({offset:1},keyframeDefaults),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},keyframeDefaults),{opacity:1}),Object.assign(Object.assign({offset:1},keyframeDefaults),{opacity:0})],fadeInTop:[Object.assign(Object.assign({offset:0},keyframeDefaults),{opacity:0,top:"-3rem"}),Object.assign(Object.assign({offset:1},keyframeDefaults),{opacity:1,top:0})]},supportsResizeObserver="ResizeObserver"in window,Modal=function(){function Modal(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Modal),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.i)(this,hostRef),this.scaleOpen=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scale-open",7),this.scaleOpenLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scaleOpen",7),this.scaleBeforeClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scale-before-close",7),this.scaleBeforeCloseLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scaleBeforeClose",7),this.scaleClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scale-close",7),this.scaleCloseLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.e)(this,"scaleClose",7),this.size="default",this.opened=!1,this.duration=200,this.closeButtonLabel="Close",this.closeButtonTitle="Close",this.omitCloseButton=!1,this.alignActions="right",this.allowInjectingStyleToBody=!1,this.isOpen=this.opened||!1,this.hasActionsSlot=!1,this.hasBody=!1,this.hasScroll=!1,this.bodyOverflowValue="",this.focusableElements=[],this.handleKeypress=function(event){_this.isOpen&&"Escape"===event.key&&_this.emitBeforeClose("ESCAPE_KEY")},this.handleTopFocus=function(){_this.attemptFocus(_this.getLastFocusableElement())},this.handleBottomFocus=function(){_this.attemptFocus(_this.getFirstFocusableElement())}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Modal,[{key:"disconnectedCallback",value:function disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}},{key:"componentWillRender",value:function componentWillRender(){var actionSlots=this.hostElement.querySelectorAll('[slot="action"]'),bodySlot=Array.from(this.hostElement.shadowRoot.querySelectorAll("slot")).find((function(x){return!x.name}));this.hasActionsSlot=actionSlots.length>0,null!=bodySlot&&(this.hasBody=bodySlot.assignedElements().length>0)}},{key:"emitBeforeClose",value:function emitBeforeClose(trigger){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__.d)(this,"scaleBeforeClose",{trigger:trigger}).some((function(event){return event.defaultPrevented}))||(this.opened=!1)}},{key:"componentDidLoad",value:function componentDidLoad(){var _this2=this;this.focusableElements=queryShadowRoot(this.hostElement.shadowRoot,(function(el){return isHidden(el)||el.matches("[data-focus-trap-edge]")}),isFocusable),supportsResizeObserver&&(this.resizeObserver=new ResizeObserver((function(){_this2.setHasScroll()})),this.resizeObserver.observe(this.modalBody)),this.setHasScroll()}},{key:"setHasScroll",value:function setHasScroll(){var container=this.modalBody;this.hasScroll=container.scrollHeight>container.clientHeight}},{key:"getFirstFocusableElement",value:function getFirstFocusableElement(){return this.focusableElements[0]}},{key:"getLastFocusableElement",value:function getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}},{key:"attemptFocus",value:function attemptFocus(element){null!=element?element.focus():this.closeButton.focus()}},{key:"openedChanged",value:function openedChanged(newValue){!0===newValue?(this.open(),this.allowInjectingStyleToBody&&(this.bodyOverflowValue=document.body.style.overflow,document.body.style.setProperty("overflow","hidden"))):(this.close(),this.allowInjectingStyleToBody&&document.body.style.setProperty("overflow",this.bodyOverflowValue))}},{key:"open",value:function open(){var _this3=this;this.isOpen=!0;try{animateTo(this.modalWindow,KEYFRAMES.fadeInTop,{duration:this.duration,delay:.5*this.duration}),animateTo(this.modalContainer,KEYFRAMES.fadeIn,{duration:this.duration}).addEventListener("finish",(function(){_this3.attemptFocus(_this3.getFirstFocusableElement()),Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__.d)(_this3,"scaleOpen")})),this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(err){Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__.d)(this,"scaleOpen")}}},{key:"close",value:function close(){var _this4=this;try{animateTo(this.modalContainer,KEYFRAMES.fadeOut,{duration:this.duration}).addEventListener("finish",(function(){_this4.isOpen=!1,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__.d)(_this4,"scaleClose")})),this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(err){this.isOpen=!1,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_18__.d)(this,"scaleClose")}}},{key:"render",value:function render(){var _this5=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{ref:function ref(el){return _this5.modalContainer=el},class:this.getCssClassMap(),part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("base",this.isOpen&&"open")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{class:"modal__backdrop",part:"backdrop",onClick:function onClick(){return _this5.emitBeforeClose("BACKDROP")}}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{"data-focus-trap-edge":!0,onFocus:this.handleTopFocus,tabindex:"0"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{class:"modal__window",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("window",this.size&&"size-"+this.size),ref:function ref(el){return _this5.modalWindow=el},role:"dialog","aria-modal":"true","aria-label":this.heading},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{class:"modal__header",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("header",this.hasScroll&&"has-scroll")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("h2",{class:"modal__heading",part:"heading"},this.heading),!this.omitCloseButton&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("button",{ref:function ref(el){return _this5.closeButton=el},class:"modal__close-button",part:"close-button",onClick:function onClick(){return _this5.emitBeforeClose("CLOSE_BUTTON")},"aria-label":this.closeButtonLabel,title:this.closeButtonTitle},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("slot",{name:"close-icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("scale-icon-action-circle-close",{decorative:!0})))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{ref:function ref(el){return _this5.modalBody=el},class:"modal__body-wrapper",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("body-wrapper",this.hasBody&&"has-body")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{class:"modal__body",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("body",this.hasBody&&"has-body")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("slot",null))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{class:"modal__actions",part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("actions","align-"+this.alignActions,this.hasActionsSlot&&"has-actions",this.hasScroll&&"has-scroll")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("slot",{name:"action"}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.g)("div",{"data-focus-trap-edge":!0,onFocus:this.handleBottomFocus,tabindex:"0"})))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_17__.a)("modal",this.isOpen&&"modal--is-open",this.hasActionsSlot&&"modal--has-actions","modal--align-actions-"+this.alignActions,this.hasScroll&&"modal--has-scroll",this.hasBody&&"modal--has-body",this.size&&"modal--size-"+this.size)}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_16__.f)(this)}}],[{key:"watchers",get:function get(){return{opened:["openedChanged"]}}}]),Modal}();Modal.style=":host{--spacing-x:var(--telekom-spacing-composition-space-06);--background-overlay:var(\n    --telekom-color-background-backdrop,\n    rgba(108, 108, 108, 0.7)\n  );--max-height-window:calc(\n    100vh - (2 * var(--telekom-spacing-composition-space-19))\n  );--radius-window:var(--telekom-radius-large);--box-shadow-window:var(--telekom-shadow-top);--background-window:var(--telekom-color-background-surface);--color-window:var(--telekom-color-text-and-icon-standard);--size-window-small:calc(\n    (6 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (5 * var(--telekom-spacing-composition-space-10))\n  );--size-window-default:calc(\n    (8 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (7 * var(--telekom-spacing-composition-space-10))\n  );--size-window-large:calc(\n    (12 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (11 * var(--telekom-spacing-composition-space-10))\n  );--spacing-x-header:var(--telekom-spacing-composition-space-08);--spacing-y-header:var(--telekom-spacing-composition-space-08);--border-bottom-header-has-scroll:var(--telekom-line-weight-standard) solid\n    var(--telekom-color-ui-subtle);--font-family-heading:var(--telekom-typography-font-family-sans);--font-size-heading:var(--telekom-typography-font-size-callout);--font-weight-heading:var(--telekom-typography-font-weight-extra-bold);--spacing-close-button:var(--telekom-spacing-composition-space-04);--radius-close-button:var(--telekom-radius-standard);--transition-close-button:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);--box-shadow-close-button-focus:0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);--color-close-button:var(--telekom-color-text-and-icon-standard);--color-close-button-hover:var(--telekom-color-primary-hovered);--color-close-button-active:var(--telekom-color-primary-pressed);--spacing-x-body-wrapper:var(--telekom-spacing-composition-space-08);--spacing-y-body:var(--telekom-spacing-composition-space-08);--spacing-actions:var(--telekom-spacing-composition-space-06)\n    var(--telekom-spacing-composition-space-08)\n    var(--telekom-spacing-composition-space-08);--spacing-x-actions-slotted:var(--telekom-spacing-composition-space-04);--background-actions-has-scroll:var(\n    --telekom-color-background-surface-subtle\n  )}.modal{top:0;left:0;width:100%;bottom:0;display:none;z-index:100;position:fixed;background:var(--background-overlay);box-sizing:border-box;align-items:center;justify-content:center;padding-left:var(--spacing-x);padding-right:var(--spacing-x)}.modal.modal--is-open{display:flex}.modal__backdrop{top:0;left:0;width:100%;height:100%;z-index:0;position:absolute}.modal__window{width:100%;height:auto;display:flex;z-index:1;position:relative;overflow-y:auto;flex-direction:column;background-color:var(--background-window);color:var(--color-window);max-height:var(--max-height-window);min-height:var(--min-height-window);border-radius:var(--radius-window);box-shadow:var(--box-shadow-window)}.modal__window .modal__body-wrapper{overflow-y:auto;flex-shrink:1;flex-grow:1}.modal--size-small .modal__window{max-width:var(--size-window-small)}.modal--size-default .modal__window{max-width:var(--size-window-default)}.modal--size-large .modal__window{max-width:var(--size-window-large)}@media (max-height: 30em){.modal__window{max-height:calc(100vh - var(--telekom-spacing-composition-space-08))}}.modal__window:after{top:0;left:0;width:100%;border:1px solid transparent;height:100%;content:'';display:block;position:absolute;box-sizing:border-box;pointer-events:none;border-radius:var(--radius-window)}.modal__header{display:flex;align-items:flex-start;flex-shrink:0;justify-content:space-between;margin-left:var(--spacing-x-header);margin-right:var(--spacing-x-header);padding-top:var(--spacing-y-header);padding-bottom:var(--spacing-y-header)}.modal--has-scroll .modal__header{border-bottom:var(--border-bottom-header-has-scroll)}.modal__heading{margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-heading);font-weight:var(--font-weight-heading)}.modal__close-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-close-button);margin-bottom:calc(-2 * var(--spacing-close-button));border:0;border-radius:var(--radius-close-button);outline:none;color:var(--color-close-button);background:transparent;transition:var(--transition-close-button);transform:translate(\n    var(--spacing-close-button),\n    calc(-1 * var(--spacing-close-button))\n  );appearance:none;cursor:pointer;user-select:none}.modal__close-button:focus{box-shadow:var(--box-shadow-close-button-focus)}.modal__close-button:hover{color:var(--color-close-button-hover)}.modal__close-button:active{color:var(--color-close-button-active)}.modal__body-wrapper{padding-left:var(--spacing-x-body-wrapper);padding-right:var(--spacing-x-body-wrapper)}.modal--has-body .modal__body-wrapper{min-height:var(--telekom-spacing-related-lg)}.modal--has-body .modal__body{margin-top:0;margin-bottom:0}.modal--has-body:not(.modal--has-actions) .modal__body{margin-bottom:var(--spacing-y-body)}.modal--has-scroll.modal--has-body .modal__body{margin-top:var(--spacing-y-body);margin-bottom:var(--spacing-y-body)}.modal--has-body .modal__body ::slotted(*){font:var(--telekom-text-style-body)}.modal--has-body .modal__body ::slotted(*:not([slot]):first-child){margin-top:0}.modal--has-body .modal__body ::slotted(*:not([slot]):last-of-type){margin-bottom:0}.modal__actions{display:none;flex-shrink:0;justify-content:flex-end;padding:var(--spacing-actions)}.modal__actions ::slotted(*){margin-left:var(--spacing-x-actions-slotted)}.modal--has-actions .modal__actions{display:flex}.modal--align-actions-left .modal__actions{justify-content:flex-start}.modal--has-scroll .modal__actions{background-color:var(--background-actions-has-scroll)}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
+//# sourceMappingURL=37.ffa26d95.iframe.bundle.js.map
\ No newline at end of file
diff --git a/39.98fbd534.iframe.bundle.js.LICENSE.txt b/37.ffa26d95.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 39.98fbd534.iframe.bundle.js.LICENSE.txt
rename to 37.ffa26d95.iframe.bundle.js.LICENSE.txt
diff --git a/37.ffa26d95.iframe.bundle.js.map b/37.ffa26d95.iframe.bundle.js.map
new file mode 100644
index 0000000000..0373e82fc6
--- /dev/null
+++ b/37.ffa26d95.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"37.ffa26d95.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/38.4f21af2e.iframe.bundle.js.map b/38.4f21af2e.iframe.bundle.js.map
deleted file mode 100644
index beae6b53f7..0000000000
--- a/38.4f21af2e.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"38.4f21af2e.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/37.6a0f30c6.iframe.bundle.js b/38.8618c2b2.iframe.bundle.js
similarity index 98%
rename from 37.6a0f30c6.iframe.bundle.js
rename to 38.8618c2b2.iframe.bundle.js
index 883d08af3e..882ff22357 100644
--- a/37.6a0f30c6.iframe.bundle.js
+++ b/38.8618c2b2.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 37.6a0f30c6.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-notification.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_notification",(function(){return Notification}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var iconVariantNameMap={informational:"scale-icon-alert-information",warning:"scale-icon-alert-warning",success:"scale-icon-action-success",danger:"scale-icon-alert-error"},Notification=function(){function Notification(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Notification),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.i)(this,hostRef),this.scaleOpen=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.e)(this,"scale-open",7),this.scaleBeforeClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.e)(this,"scale-before-close",7),this.scaleClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.e)(this,"scale-close",7),this.type="inline",this.variant="informational",this.dismissible=!1,this.innerAriaLive="assertive",this.innerRole="alert",this.closeButtonLabel="Close",this.closeButtonTitle="Close",this.headingLevel=2,this.ariaHeading="Information",this.isOpen=this.opened||!1,this.hasTextSlot=!1,this.lastCloseEventTrigger=null,this.open=function(){_this.isOpen=!0,_this.animationState="in",requestAnimationFrame(_asyncToGenerator(regeneratorRuntime.mark((function _callee(){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return _context.next=2,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_6__.a)(_this.hostElement.shadowRoot);case 2:_this.animationState=void 0,_this.scaleOpen.emit(),void 0!==_this.delay&&setTimeout(_this.timeout,_this.delay);case 5:case"end":return _context.stop()}}),_callee)}))))},this.close=function(){var event=_this.scaleBeforeClose.emit({trigger:_this.lastCloseEventTrigger});_this.lastCloseEventTrigger=null,event.defaultPrevented?_this.opened=!0:(_this.animationState="out",requestAnimationFrame(_asyncToGenerator(regeneratorRuntime.mark((function _callee2(){return regeneratorRuntime.wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:return _context2.next=2,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_6__.a)(_this.hostElement.shadowRoot);case 2:_this.animationState=void 0,_this.isOpen=!1,_this.scaleClose.emit();case 5:case"end":return _context2.stop()}}),_callee2)})))))},this.timeout=function(){_this.lastCloseEventTrigger="TIMEOUT",_this.opened=!1}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Notification,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("opened")&&("polite"!==this.innerAriaLive&&"status"!==this.innerRole||(this.innerRole="status"),this.isOpen=!0),void 0!==this.delay&&setTimeout(this.timeout,this.delay),this.hasTextSlot=null!=this.hostElement.querySelector('[slot="text"]')}},{key:"openedChanged",value:function openedChanged(newValue){!0===newValue?(this.open(),this.lastCloseEventTrigger="ATTRIBUTE"):this.isOpen&&this.close()}},{key:"render",value:function render(){var _this2=this,IconTag=iconVariantNameMap[this.variant];return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_5__.a)("base",this.animationState,"type-"+this.type,"variant-"+this.variant,this.isOpen&&"open"),role:this.innerRole},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{part:"icon","aria-hidden":"true"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)(IconTag,{size:20,selected:"toast"===this.type}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{part:"body"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{part:"heading",role:"heading","aria-level":this.headingLevel,"aria-label":this.ariaHeading+" "+this.heading},this.heading?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("span",null,this.heading):null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"heading"})),this.hasTextSlot&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{part:"text"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"text"}))),this.dismissible&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("scale-button",{part:"close-button",variant:"ghost",onClick:function onClick(){_this2.lastCloseEventTrigger="CLOSE_BUTTON",_this2.opened=!1}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"close-icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("scale-icon-action-circle-close",{"aria-label":this.closeButtonLabel,accessibilityTitle:this.closeButtonTitle,decorative:!0,size:20})))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.f)(this)}}],[{key:"watchers",get:function get(){return{opened:["openedChanged"]}}}]),Notification}();Notification.style=":host{--width:100%;--width-toast:25rem;--radius:var(--telekom-radius-standard);--spacing-y:var(--telekom-spacing-composition-space-06);--spacing-y-inner:var(--telekom-spacing-composition-space-04);--spacing-x-aside:var(--telekom-spacing-composition-space-14);--duration-in:var(--telekom-motion-duration-transition);--duration-out:var(--telekom-motion-duration-transition);--easing-in:var(--telekom-motion-easing-enter);--easing-out:var(--telekom-motion-easing-exit);--translate-x:0;--translate-y:0;--translate-z:0;display:contents}[part~='base']{position:relative;display:none;box-sizing:border-box;border-radius:var(--radius);padding-right:var(--spacing-x-aside);width:var(--width);background:var(--_background-subtle);box-shadow:var(--_shadow);animation-duration:var(--duration)}[part~='base'][part~='open']{display:flex}@keyframes toggle{from{opacity:0;transform:translate3d(\n      var(--translate-x),\n      var(--translate-y),\n      var(--translate-z)\n    )}}[part~='in']{animation-name:toggle;animation-duration:var(--duration-in);animation-timing-function:var(--easing-in)}[part~='out']{animation-name:toggle;animation-direction:reverse;animation-duration:var(--duration-out);animation-timing-function:var(--easing-out)}[part~='variant-informational']{--_background-subtle:var(--telekom-color-functional-informational-subtle);--_background-accent:var(--telekom-color-functional-informational-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-informational)}[part~='variant-warning']{--_background-subtle:var(--telekom-color-functional-warning-subtle);--_background-accent:var(--telekom-color-functional-warning-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-warning)}[part~='variant-success']{--_background-subtle:var(--telekom-color-functional-success-subtle);--_background-accent:var(--telekom-color-functional-success-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-success)}[part~='variant-danger']{--_background-subtle:var(--telekom-color-functional-danger-subtle);--_background-accent:var(--telekom-color-functional-danger-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-danger)}[part~='type-banner']{--_shadow:var(--telekom-shadow-floating-standard)}[part~='type-toast']{--translate-x:var(--telekom-spacing-composition-space-05);--_shadow:var(--telekom-shadow-top);width:var(--width-toast)}[part='icon']{display:flex;flex-shrink:0;justify-content:center;align-items:flex-start;width:var(--spacing-x-aside);padding-top:var(--spacing-y);padding-bottom:var(--spacing-y);border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);color:var(--_color-accent)}[part~='type-toast'] [part='icon']{background:var(--_background-accent);color:var(--telekom-color-text-and-icon-white-standard);align-items:center}[part~='type-toast'][part~='variant-warning'] [part='icon']{color:var(--telekom-color-text-and-icon-black-standard)}[part='body']{margin-top:var(--spacing-y);margin-bottom:var(--spacing-y)}[part~='type-toast'] [part='body']{padding-left:var(--spacing-y)}[part='heading'],[part='heading'] ::slotted(*){font:var(--telekom-text-style-heading-6);line-height:var(--telekom-typography-line-spacing-tight);margin:0}[part='text']{margin-top:var(--spacing-y-inner)}::slotted(*){font:var(--telekom-text-style-body)}::slotted(p){margin:0;margin-top:var(--spacing-y-inner)}[part='close-button']{--color-ghost:var(--telekom-text-and-icon-standard);position:absolute;right:var(--telekom-spacing-composition-space-03);top:var(--telekom-spacing-composition-space-03)}@media screen and (forced-colors: active), (-ms-high-contrast: active){[part~='base']{border:1px solid white}[part='close-button']{--color-ghost:white}}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
-//# sourceMappingURL=37.6a0f30c6.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 38.8618c2b2.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-notification.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_notification",(function(){return Notification}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var iconVariantNameMap={informational:"scale-icon-alert-information",warning:"scale-icon-alert-warning",success:"scale-icon-action-success",danger:"scale-icon-alert-error"},Notification=function(){function Notification(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Notification),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.i)(this,hostRef),this.scaleOpen=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.e)(this,"scale-open",7),this.scaleBeforeClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.e)(this,"scale-before-close",7),this.scaleClose=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.e)(this,"scale-close",7),this.type="inline",this.variant="informational",this.dismissible=!1,this.innerAriaLive="assertive",this.innerRole="alert",this.closeButtonLabel="Close",this.closeButtonTitle="Close",this.headingLevel=2,this.ariaHeading="Information",this.isOpen=this.opened||!1,this.hasTextSlot=!1,this.lastCloseEventTrigger=null,this.open=function(){_this.isOpen=!0,_this.animationState="in",requestAnimationFrame(_asyncToGenerator(regeneratorRuntime.mark((function _callee(){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return _context.next=2,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_6__.a)(_this.hostElement.shadowRoot);case 2:_this.animationState=void 0,_this.scaleOpen.emit(),void 0!==_this.delay&&setTimeout(_this.timeout,_this.delay);case 5:case"end":return _context.stop()}}),_callee)}))))},this.close=function(){var event=_this.scaleBeforeClose.emit({trigger:_this.lastCloseEventTrigger});_this.lastCloseEventTrigger=null,event.defaultPrevented?_this.opened=!0:(_this.animationState="out",requestAnimationFrame(_asyncToGenerator(regeneratorRuntime.mark((function _callee2(){return regeneratorRuntime.wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:return _context2.next=2,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_6__.a)(_this.hostElement.shadowRoot);case 2:_this.animationState=void 0,_this.isOpen=!1,_this.scaleClose.emit();case 5:case"end":return _context2.stop()}}),_callee2)})))))},this.timeout=function(){_this.lastCloseEventTrigger="TIMEOUT",_this.opened=!1}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Notification,[{key:"connectedCallback",value:function connectedCallback(){this.hostElement.hasAttribute("opened")&&("polite"!==this.innerAriaLive&&"status"!==this.innerRole||(this.innerRole="status"),this.isOpen=!0),void 0!==this.delay&&setTimeout(this.timeout,this.delay),this.hasTextSlot=null!=this.hostElement.querySelector('[slot="text"]')}},{key:"openedChanged",value:function openedChanged(newValue){!0===newValue?(this.open(),this.lastCloseEventTrigger="ATTRIBUTE"):this.isOpen&&this.close()}},{key:"render",value:function render(){var _this2=this,IconTag=iconVariantNameMap[this.variant];return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{part:Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_5__.a)("base",this.animationState,"type-"+this.type,"variant-"+this.variant,this.isOpen&&"open"),role:this.innerRole},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{part:"icon","aria-hidden":"true"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)(IconTag,{size:20,selected:"toast"===this.type}))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{part:"body"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{part:"heading",role:"heading","aria-level":this.headingLevel,"aria-label":this.ariaHeading+" "+this.heading},this.heading?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("span",null,this.heading):null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"heading"})),this.hasTextSlot&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("div",{part:"text"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"text"}))),this.dismissible&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("scale-button",{part:"close-button",variant:"ghost",onClick:function onClick(){_this2.lastCloseEventTrigger="CLOSE_BUTTON",_this2.opened=!1}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("slot",{name:"close-icon"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.g)("scale-icon-action-circle-close",{"aria-label":this.closeButtonLabel,accessibilityTitle:this.closeButtonTitle,decorative:!0,size:20})))))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_4__.f)(this)}}],[{key:"watchers",get:function get(){return{opened:["openedChanged"]}}}]),Notification}();Notification.style=":host{--width:100%;--width-toast:25rem;--radius:var(--telekom-radius-standard);--spacing-y:var(--telekom-spacing-composition-space-06);--spacing-y-inner:var(--telekom-spacing-composition-space-04);--spacing-x-aside:var(--telekom-spacing-composition-space-14);--duration-in:var(--telekom-motion-duration-transition);--duration-out:var(--telekom-motion-duration-transition);--easing-in:var(--telekom-motion-easing-enter);--easing-out:var(--telekom-motion-easing-exit);--translate-x:0;--translate-y:0;--translate-z:0;display:contents}[part~='base']{position:relative;display:none;box-sizing:border-box;border-radius:var(--radius);padding-right:var(--spacing-x-aside);width:var(--width);background:var(--_background-subtle);box-shadow:var(--_shadow);animation-duration:var(--duration)}[part~='base'][part~='open']{display:flex}@keyframes toggle{from{opacity:0;transform:translate3d(\n      var(--translate-x),\n      var(--translate-y),\n      var(--translate-z)\n    )}}[part~='in']{animation-name:toggle;animation-duration:var(--duration-in);animation-timing-function:var(--easing-in)}[part~='out']{animation-name:toggle;animation-direction:reverse;animation-duration:var(--duration-out);animation-timing-function:var(--easing-out)}[part~='variant-informational']{--_background-subtle:var(--telekom-color-functional-informational-subtle);--_background-accent:var(--telekom-color-functional-informational-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-informational)}[part~='variant-warning']{--_background-subtle:var(--telekom-color-functional-warning-subtle);--_background-accent:var(--telekom-color-functional-warning-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-warning)}[part~='variant-success']{--_background-subtle:var(--telekom-color-functional-success-subtle);--_background-accent:var(--telekom-color-functional-success-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-success)}[part~='variant-danger']{--_background-subtle:var(--telekom-color-functional-danger-subtle);--_background-accent:var(--telekom-color-functional-danger-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-danger)}[part~='type-banner']{--_shadow:var(--telekom-shadow-floating-standard)}[part~='type-toast']{--translate-x:var(--telekom-spacing-composition-space-05);--_shadow:var(--telekom-shadow-top);width:var(--width-toast)}[part='icon']{display:flex;flex-shrink:0;justify-content:center;align-items:flex-start;width:var(--spacing-x-aside);padding-top:var(--spacing-y);padding-bottom:var(--spacing-y);border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);color:var(--_color-accent)}[part~='type-toast'] [part='icon']{background:var(--_background-accent);color:var(--telekom-color-text-and-icon-white-standard);align-items:center}[part~='type-toast'][part~='variant-warning'] [part='icon']{color:var(--telekom-color-text-and-icon-black-standard)}[part='body']{margin-top:var(--spacing-y);margin-bottom:var(--spacing-y)}[part~='type-toast'] [part='body']{padding-left:var(--spacing-y)}[part='heading'],[part='heading'] ::slotted(*){font:var(--telekom-text-style-heading-6);line-height:var(--telekom-typography-line-spacing-tight);margin:0}[part='text']{margin-top:var(--spacing-y-inner)}::slotted(*){font:var(--telekom-text-style-body)}::slotted(p){margin:0;margin-top:var(--spacing-y-inner)}[part='close-button']{--color-ghost:var(--telekom-text-and-icon-standard);position:absolute;right:var(--telekom-spacing-composition-space-03);top:var(--telekom-spacing-composition-space-03)}@media screen and (forced-colors: active), (-ms-high-contrast: active){[part~='base']{border:1px solid white}[part='close-button']{--color-ghost:white}}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
+//# sourceMappingURL=38.8618c2b2.iframe.bundle.js.map
\ No newline at end of file
diff --git a/37.6a0f30c6.iframe.bundle.js.LICENSE.txt b/38.8618c2b2.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 37.6a0f30c6.iframe.bundle.js.LICENSE.txt
rename to 38.8618c2b2.iframe.bundle.js.LICENSE.txt
diff --git a/38.8618c2b2.iframe.bundle.js.map b/38.8618c2b2.iframe.bundle.js.map
new file mode 100644
index 0000000000..09ef09a001
--- /dev/null
+++ b/38.8618c2b2.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"38.8618c2b2.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/39.98fbd534.iframe.bundle.js.map b/39.98fbd534.iframe.bundle.js.map
deleted file mode 100644
index 5b6109b038..0000000000
--- a/39.98fbd534.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"39.98fbd534.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/38.4f21af2e.iframe.bundle.js b/39.f8ecdf25.iframe.bundle.js
similarity index 98%
rename from 38.4f21af2e.iframe.bundle.js
rename to 39.f8ecdf25.iframe.bundle.js
index e1ec2b93d3..a86104cf56 100644
--- a/38.4f21af2e.iframe.bundle.js
+++ b/39.f8ecdf25.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 38.4f21af2e.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-segmented-button.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_segmented_button",(function(){return SegmentedButton}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find-index.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var SegmentedButton=function(){function SegmentedButton(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,SegmentedButton),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.i)(this,hostRef),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.e)(this,"scaleChange",7),this.position=0,this.slottedSegments=0,this.status=[],this.size="small",this.multiSelect=!1,this.disabled=!1,this.fullWidth=!1,this.invalid=!1,this.helperText="Please select an option",this.ariaLabelTranslation="segment button with $slottedSegments",this.showHelperText=!1,this.getAdjacentSiblings=function(tempState,i){var adjacentSiblings="";return 0!==i&&tempState[i].selected&&tempState[i-1].selected&&(adjacentSiblings="left"),i!==tempState.length-1&&tempState[i].selected&&tempState[i+1].selected&&(adjacentSiblings=adjacentSiblings?adjacentSiblings+" right":"right"),adjacentSiblings}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(SegmentedButton,[{key:"scaleClickHandler",value:function scaleClickHandler(ev){var tempState;tempState=this.multiSelect?this.status.map((function(obj){return ev.detail.id===obj.id?ev.detail:Object.assign({},obj)})):ev.detail.selected?this.status.map((function(obj){return ev.detail.id===obj.id?ev.detail:Object.assign(Object.assign({},obj),{selected:!1})})):this.status.map((function(obj){return ev.detail.id===obj.id?ev.detail:Object.assign({},obj)})),this.setState(tempState)}},{key:"handlePropsChange",value:function handlePropsChange(){this.propagatePropsToChildren()}},{key:"propagatePropsToChildren",value:function propagatePropsToChildren(){var _this=this;this.getAllSegments().forEach((function(segment){segment.setAttribute("size",_this.size),segment.setAttribute("selected-index",_this.selectedIndex.toString()),_this.disabled&&segment.setAttribute("disabled","disabled")}))}},{key:"componentDidLoad",value:function componentDidLoad(){var _this2=this,tempState=[],segments=this.getAllSegments();this.slottedSegments=segments.length;var longestButtonWidth=this.getLongestButtonWidth();segments.forEach((function(segment){_this2.position++,tempState.push({id:segment.getAttribute("segment-id")||segment.segmentId,selected:segment.hasAttribute("selected")||segment.selected}),segment.setAttribute("position",_this2.position.toString()),segment.setAttribute("aria-description-translation","$position $selected")})),this.fullWidth?this.container.style.display="flex":this.container.style.gridTemplateColumns="repeat("+this.hostElement.children.length+", "+Math.ceil(longestButtonWidth)+"px)",this.selectedIndex=this.getSelectedIndex(),this.propagatePropsToChildren(),this.position=0,this.status=tempState,this.setState(tempState)}},{key:"componentWillUpdate",value:function componentWillUpdate(){this.selectedIndex=this.getSelectedIndex(),this.showHelperText=!1,this.invalid&&this.status.filter((function(e){return!0===e.selected})).length<=0&&(this.showHelperText=!0)}},{key:"getSelectedIndex",value:function getSelectedIndex(){return this.multiSelect?-1:this.getAllSegments().findIndex((function(el){return!0===el.selected}))}},{key:"getLongestButtonWidth",value:function getLongestButtonWidth(){var _this3=this,tempWidth=0;return Array.from(this.hostElement.children).forEach((function(child){var selected=child.hasAttribute("selected"),iconOnly=child.hasAttribute("icon-only"),checkmark="small"===_this3.size?14:"medium"===_this3.size?30:38;tempWidth=selected||iconOnly?child.getBoundingClientRect().width>tempWidth?child.getBoundingClientRect().width:tempWidth:child.getBoundingClientRect().width+checkmark>tempWidth?child.getBoundingClientRect().width+checkmark:tempWidth})),tempWidth}},{key:"setState",value:function setState(tempState){var _this4=this;Array.from(this.hostElement.querySelectorAll("scale-segment")).forEach((function(segment,i){segment.setAttribute("adjacent-siblings",_this4.getAdjacentSiblings(tempState,i)),segment.setAttribute("selected",tempState[i].selected?"true":"false")})),this.status=tempState,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_16__.d)(this,"scaleChange",this.status)}},{key:"getAllSegments",value:function getAllSegments(){return Array.from(this.hostElement.querySelectorAll("scale-segment"))}},{key:"getAriaLabelTranslation",value:function getAriaLabelTranslation(){return this.ariaLabelTranslation.replace(/\$slottedSegments/g,""+this.slottedSegments)}},{key:"render",value:function render(){var _this5=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)("style",null,this.styles),this.label&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)("span",{class:"segmented-button--label"}," ",this.label," "),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)("div",{class:this.getCssClassMap(),part:this.getBasePartMap(),"aria-label":this.getAriaLabelTranslation(),role:"group",ref:function ref(el){return _this5.container=el}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)("slot",null)),this.showHelperText&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)("scale-helper-text",{class:"segmented-button--helper-text",helperText:this.helperText,variant:"danger"}))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"segmented-button--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_15__.a)("segmented-button",this.size&&""+prefix+this.size,this.fullWidth&&prefix+"full-width")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.f)(this)}}],[{key:"watchers",get:function get(){return{disabled:["handlePropsChange"],size:["handlePropsChange"],selectedIndex:["handlePropsChange"]}}}]),SegmentedButton}();SegmentedButton.style=":host{--background-color:var(--telekom-color-ui-faint);--radius:var(--telekom-radius-standard);--height:32px;--height-medium:40px;--height-large:44px;display:flex;flex-direction:column}.segmented-button{background-color:var(--background-color);border:0;border-radius:var(--radius);padding:0 var(--telekom-spacing-composition-space-02);width:fit-content;height:var(--height);display:inline-grid}.segmented-button--full-width{width:100%}.segmented-button--medium{height:var(--height-medium);padding:0 var(--telekom-spacing-composition-space-02)}.segmented-button--large{height:var(--height-large);padding:0 var(--telekom-spacing-composition-space-02)}.segmented-button--label{font-size:var(--telekom-typography-font-size-body);font-weight:var(--telekom-typography-font-weight-bold);margin-bottom:var(--telekom-spacing-composition-space-04)}.segmented-button--helper-text{margin-top:var(--telekom-spacing-composition-space-04)}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
-//# sourceMappingURL=38.4f21af2e.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 39.f8ecdf25.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-segmented-button.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_segmented_button",(function(){return SegmentedButton}));__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find-index.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var SegmentedButton=function(){function SegmentedButton(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,SegmentedButton),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.i)(this,hostRef),this.scaleChange=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.e)(this,"scale-change",7),this.scaleChangeLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.e)(this,"scaleChange",7),this.position=0,this.slottedSegments=0,this.status=[],this.size="small",this.multiSelect=!1,this.disabled=!1,this.fullWidth=!1,this.invalid=!1,this.helperText="Please select an option",this.ariaLabelTranslation="segment button with $slottedSegments",this.showHelperText=!1,this.getAdjacentSiblings=function(tempState,i){var adjacentSiblings="";return 0!==i&&tempState[i].selected&&tempState[i-1].selected&&(adjacentSiblings="left"),i!==tempState.length-1&&tempState[i].selected&&tempState[i+1].selected&&(adjacentSiblings=adjacentSiblings?adjacentSiblings+" right":"right"),adjacentSiblings}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(SegmentedButton,[{key:"scaleClickHandler",value:function scaleClickHandler(ev){var tempState;tempState=this.multiSelect?this.status.map((function(obj){return ev.detail.id===obj.id?ev.detail:Object.assign({},obj)})):ev.detail.selected?this.status.map((function(obj){return ev.detail.id===obj.id?ev.detail:Object.assign(Object.assign({},obj),{selected:!1})})):this.status.map((function(obj){return ev.detail.id===obj.id?ev.detail:Object.assign({},obj)})),this.setState(tempState)}},{key:"handlePropsChange",value:function handlePropsChange(){this.propagatePropsToChildren()}},{key:"propagatePropsToChildren",value:function propagatePropsToChildren(){var _this=this;this.getAllSegments().forEach((function(segment){segment.setAttribute("size",_this.size),segment.setAttribute("selected-index",_this.selectedIndex.toString()),_this.disabled&&segment.setAttribute("disabled","disabled")}))}},{key:"componentDidLoad",value:function componentDidLoad(){var _this2=this,tempState=[],segments=this.getAllSegments();this.slottedSegments=segments.length;var longestButtonWidth=this.getLongestButtonWidth();segments.forEach((function(segment){_this2.position++,tempState.push({id:segment.getAttribute("segment-id")||segment.segmentId,selected:segment.hasAttribute("selected")||segment.selected}),segment.setAttribute("position",_this2.position.toString()),segment.setAttribute("aria-description-translation","$position $selected")})),this.fullWidth?this.container.style.display="flex":this.container.style.gridTemplateColumns="repeat("+this.hostElement.children.length+", "+Math.ceil(longestButtonWidth)+"px)",this.selectedIndex=this.getSelectedIndex(),this.propagatePropsToChildren(),this.position=0,this.status=tempState,this.setState(tempState)}},{key:"componentWillUpdate",value:function componentWillUpdate(){this.selectedIndex=this.getSelectedIndex(),this.showHelperText=!1,this.invalid&&this.status.filter((function(e){return!0===e.selected})).length<=0&&(this.showHelperText=!0)}},{key:"getSelectedIndex",value:function getSelectedIndex(){return this.multiSelect?-1:this.getAllSegments().findIndex((function(el){return!0===el.selected}))}},{key:"getLongestButtonWidth",value:function getLongestButtonWidth(){var _this3=this,tempWidth=0;return Array.from(this.hostElement.children).forEach((function(child){var selected=child.hasAttribute("selected"),iconOnly=child.hasAttribute("icon-only"),checkmark="small"===_this3.size?14:"medium"===_this3.size?30:38;tempWidth=selected||iconOnly?child.getBoundingClientRect().width>tempWidth?child.getBoundingClientRect().width:tempWidth:child.getBoundingClientRect().width+checkmark>tempWidth?child.getBoundingClientRect().width+checkmark:tempWidth})),tempWidth}},{key:"setState",value:function setState(tempState){var _this4=this;Array.from(this.hostElement.querySelectorAll("scale-segment")).forEach((function(segment,i){segment.setAttribute("adjacent-siblings",_this4.getAdjacentSiblings(tempState,i)),segment.setAttribute("selected",tempState[i].selected?"true":"false")})),this.status=tempState,Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_16__.d)(this,"scaleChange",this.status)}},{key:"getAllSegments",value:function getAllSegments(){return Array.from(this.hostElement.querySelectorAll("scale-segment"))}},{key:"getAriaLabelTranslation",value:function getAriaLabelTranslation(){return this.ariaLabelTranslation.replace(/\$slottedSegments/g,""+this.slottedSegments)}},{key:"render",value:function render(){var _this5=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)("style",null,this.styles),this.label&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)("span",{class:"segmented-button--label"}," ",this.label," "),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)("div",{class:this.getCssClassMap(),part:this.getBasePartMap(),"aria-label":this.getAriaLabelTranslation(),role:"group",ref:function ref(el){return _this5.container=el}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)("slot",null)),this.showHelperText&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.g)("scale-helper-text",{class:"segmented-button--helper-text",helperText:this.helperText,variant:"danger"}))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"segmented-button--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_15__.a)("segmented-button",this.size&&""+prefix+this.size,this.fullWidth&&prefix+"full-width")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_14__.f)(this)}}],[{key:"watchers",get:function get(){return{disabled:["handlePropsChange"],size:["handlePropsChange"],selectedIndex:["handlePropsChange"]}}}]),SegmentedButton}();SegmentedButton.style=":host{--background-color:var(--telekom-color-ui-faint);--radius:var(--telekom-radius-standard);--height:32px;--height-medium:40px;--height-large:44px;display:flex;flex-direction:column}.segmented-button{background-color:var(--background-color);border:0;border-radius:var(--radius);padding:0 var(--telekom-spacing-composition-space-02);width:fit-content;height:var(--height);display:inline-grid}.segmented-button--full-width{width:100%}.segmented-button--medium{height:var(--height-medium);padding:0 var(--telekom-spacing-composition-space-02)}.segmented-button--large{height:var(--height-large);padding:0 var(--telekom-spacing-composition-space-02)}.segmented-button--label{font-size:var(--telekom-typography-font-size-body);font-weight:var(--telekom-typography-font-weight-bold);margin-bottom:var(--telekom-spacing-composition-space-04)}.segmented-button--helper-text{margin-top:var(--telekom-spacing-composition-space-04)}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
+//# sourceMappingURL=39.f8ecdf25.iframe.bundle.js.map
\ No newline at end of file
diff --git a/38.4f21af2e.iframe.bundle.js.LICENSE.txt b/39.f8ecdf25.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 38.4f21af2e.iframe.bundle.js.LICENSE.txt
rename to 39.f8ecdf25.iframe.bundle.js.LICENSE.txt
diff --git a/39.f8ecdf25.iframe.bundle.js.map b/39.f8ecdf25.iframe.bundle.js.map
new file mode 100644
index 0000000000..7844a615d3
--- /dev/null
+++ b/39.f8ecdf25.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"39.f8ecdf25.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/4.25209701.iframe.bundle.js b/4.25209701.iframe.bundle.js
new file mode 100644
index 0000000000..2eda4e8b21
--- /dev/null
+++ b/4.25209701.iframe.bundle.js
@@ -0,0 +1,3 @@
+/*! For license information please see 4.25209701.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{"../../node_modules/core-js/internals/date-to-primitive.js":function(module,exports,__webpack_require__){"use strict";var anObject=__webpack_require__("../../node_modules/core-js/internals/an-object.js"),toPrimitive=__webpack_require__("../../node_modules/core-js/internals/to-primitive.js");module.exports=function(hint){if("string"!==hint&&"number"!==hint&&"default"!==hint)throw TypeError("Incorrect hint");return toPrimitive(anObject(this),"number"!==hint)}},"../../node_modules/core-js/internals/number-parse-int.js":function(module,exports,__webpack_require__){var global=__webpack_require__("../../node_modules/core-js/internals/global.js"),trim=__webpack_require__("../../node_modules/core-js/internals/string-trim.js").trim,whitespaces=__webpack_require__("../../node_modules/core-js/internals/whitespaces.js"),$parseInt=global.parseInt,hex=/^[+-]?0[Xx]/,FORCED=8!==$parseInt(whitespaces+"08")||22!==$parseInt(whitespaces+"0x16");module.exports=FORCED?function parseInt(string,radix){var S=trim(String(string));return $parseInt(S,radix>>>0||(hex.test(S)?16:10))}:$parseInt},"../../node_modules/core-js/modules/es.array.sort.js":function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),aFunction=__webpack_require__("../../node_modules/core-js/internals/a-function.js"),toObject=__webpack_require__("../../node_modules/core-js/internals/to-object.js"),fails=__webpack_require__("../../node_modules/core-js/internals/fails.js"),arrayMethodIsStrict=__webpack_require__("../../node_modules/core-js/internals/array-method-is-strict.js"),test=[],nativeSort=test.sort,FAILS_ON_UNDEFINED=fails((function(){test.sort(void 0)})),FAILS_ON_NULL=fails((function(){test.sort(null)})),STRICT_METHOD=arrayMethodIsStrict("sort");$({target:"Array",proto:!0,forced:FAILS_ON_UNDEFINED||!FAILS_ON_NULL||!STRICT_METHOD},{sort:function sort(comparefn){return void 0===comparefn?nativeSort.call(toObject(this)):nativeSort.call(toObject(this),aFunction(comparefn))}})},"../../node_modules/core-js/modules/es.date.to-primitive.js":function(module,exports,__webpack_require__){var createNonEnumerableProperty=__webpack_require__("../../node_modules/core-js/internals/create-non-enumerable-property.js"),dateToPrimitive=__webpack_require__("../../node_modules/core-js/internals/date-to-primitive.js"),TO_PRIMITIVE=__webpack_require__("../../node_modules/core-js/internals/well-known-symbol.js")("toPrimitive"),DatePrototype=Date.prototype;TO_PRIMITIVE in DatePrototype||createNonEnumerableProperty(DatePrototype,TO_PRIMITIVE,dateToPrimitive)},"../../node_modules/core-js/modules/es.number.to-precision.js":function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),fails=__webpack_require__("../../node_modules/core-js/internals/fails.js"),thisNumberValue=__webpack_require__("../../node_modules/core-js/internals/this-number-value.js"),nativeToPrecision=1..toPrecision;$({target:"Number",proto:!0,forced:fails((function(){return"1"!==nativeToPrecision.call(1,void 0)}))||!fails((function(){nativeToPrecision.call({})}))},{toPrecision:function toPrecision(precision){return void 0===precision?nativeToPrecision.call(thisNumberValue(this)):nativeToPrecision.call(thisNumberValue(this),precision)}})},"../../node_modules/core-js/modules/es.parse-int.js":function(module,exports,__webpack_require__){var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),parseIntImplementation=__webpack_require__("../../node_modules/core-js/internals/number-parse-int.js");$({global:!0,forced:parseInt!=parseIntImplementation},{parseInt:parseIntImplementation})},"../components/dist/esm/index-264b2c3e.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return _typeof})),__webpack_require__.d(__webpack_exports__,"b",(function(){return addMilliseconds})),__webpack_require__.d(__webpack_exports__,"c",(function(){return toDate})),__webpack_require__.d(__webpack_exports__,"d",(function(){return getTimezoneOffsetInMilliseconds})),__webpack_require__.d(__webpack_exports__,"e",(function(){return assign})),__webpack_require__.d(__webpack_exports__,"f",(function(){return getDefaultOptions})),__webpack_require__.d(__webpack_exports__,"g",(function(){return locale})),__webpack_require__.d(__webpack_exports__,"h",(function(){return requiredArgs})),__webpack_require__.d(__webpack_exports__,"i",(function(){return toInteger}));__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.match.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.parse-int.js");function _typeof(o){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function toInteger(dirtyNumber){if(null===dirtyNumber||!0===dirtyNumber||!1===dirtyNumber)return NaN;var number=Number(dirtyNumber);return isNaN(number)?number:number<0?Math.ceil(number):Math.floor(number)}function requiredArgs(required,args){if(args.length<required)throw new TypeError(required+" argument"+(required>1?"s":"")+" required, but only "+args.length+" present")}function toDate(argument){requiredArgs(1,arguments);var argStr=Object.prototype.toString.call(argument);return argument instanceof Date||"object"===_typeof(argument)&&"[object Date]"===argStr?new Date(argument.getTime()):"number"==typeof argument||"[object Number]"===argStr?new Date(argument):("string"!=typeof argument&&"[object String]"!==argStr||"undefined"==typeof console||(console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"),console.warn((new Error).stack)),new Date(NaN))}function addMilliseconds(dirtyDate,dirtyAmount){requiredArgs(2,arguments);var timestamp=toDate(dirtyDate).getTime(),amount=toInteger(dirtyAmount);return new Date(timestamp+amount)}var defaultOptions={};function getDefaultOptions(){return defaultOptions}function getTimezoneOffsetInMilliseconds(date){var utcDate=new Date(Date.UTC(date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),date.getMilliseconds()));return utcDate.setUTCFullYear(date.getFullYear()),date.getTime()-utcDate.getTime()}var formatDistanceLocale={lessThanXSeconds:{one:"less than a second",other:"less than {{count}} seconds"},xSeconds:{one:"1 second",other:"{{count}} seconds"},halfAMinute:"half a minute",lessThanXMinutes:{one:"less than a minute",other:"less than {{count}} minutes"},xMinutes:{one:"1 minute",other:"{{count}} minutes"},aboutXHours:{one:"about 1 hour",other:"about {{count}} hours"},xHours:{one:"1 hour",other:"{{count}} hours"},xDays:{one:"1 day",other:"{{count}} days"},aboutXWeeks:{one:"about 1 week",other:"about {{count}} weeks"},xWeeks:{one:"1 week",other:"{{count}} weeks"},aboutXMonths:{one:"about 1 month",other:"about {{count}} months"},xMonths:{one:"1 month",other:"{{count}} months"},aboutXYears:{one:"about 1 year",other:"about {{count}} years"},xYears:{one:"1 year",other:"{{count}} years"},overXYears:{one:"over 1 year",other:"over {{count}} years"},almostXYears:{one:"almost 1 year",other:"almost {{count}} years"}};function buildFormatLongFn(args){return function(){var options=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},width=options.width?String(options.width):args.defaultWidth,format=args.formats[width]||args.formats[args.defaultWidth];return format}}var formatLong={date:buildFormatLongFn({formats:{full:"EEEE, MMMM do, y",long:"MMMM do, y",medium:"MMM d, y",short:"MM/dd/yyyy"},defaultWidth:"full"}),time:buildFormatLongFn({formats:{full:"h:mm:ss a zzzz",long:"h:mm:ss a z",medium:"h:mm:ss a",short:"h:mm a"},defaultWidth:"full"}),dateTime:buildFormatLongFn({formats:{full:"{{date}} 'at' {{time}}",long:"{{date}} 'at' {{time}}",medium:"{{date}}, {{time}}",short:"{{date}}, {{time}}"},defaultWidth:"full"})},formatRelativeLocale={lastWeek:"'last' eeee 'at' p",yesterday:"'yesterday at' p",today:"'today at' p",tomorrow:"'tomorrow at' p",nextWeek:"eeee 'at' p",other:"P"};function buildLocalizeFn(args){return function(dirtyIndex,options){var valuesArray;if("formatting"===(null!=options&&options.context?String(options.context):"standalone")&&args.formattingValues){var defaultWidth=args.defaultFormattingWidth||args.defaultWidth,width=null!=options&&options.width?String(options.width):defaultWidth;valuesArray=args.formattingValues[width]||args.formattingValues[defaultWidth]}else{var _defaultWidth=args.defaultWidth,_width=null!=options&&options.width?String(options.width):args.defaultWidth;valuesArray=args.values[_width]||args.values[_defaultWidth]}return valuesArray[args.argumentCallback?args.argumentCallback(dirtyIndex):dirtyIndex]}}var localize={ordinalNumber:function ordinalNumber(dirtyNumber,_options){var number=Number(dirtyNumber),rem100=number%100;if(rem100>20||rem100<10)switch(rem100%10){case 1:return number+"st";case 2:return number+"nd";case 3:return number+"rd"}return number+"th"},era:buildLocalizeFn({values:{narrow:["B","A"],abbreviated:["BC","AD"],wide:["Before Christ","Anno Domini"]},defaultWidth:"wide"}),quarter:buildLocalizeFn({values:{narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1st quarter","2nd quarter","3rd quarter","4th quarter"]},defaultWidth:"wide",argumentCallback:function argumentCallback(quarter){return quarter-1}}),month:buildLocalizeFn({values:{narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],wide:["January","February","March","April","May","June","July","August","September","October","November","December"]},defaultWidth:"wide"}),day:buildLocalizeFn({values:{narrow:["S","M","T","W","T","F","S"],short:["Su","Mo","Tu","We","Th","Fr","Sa"],abbreviated:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],wide:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},defaultWidth:"wide"}),dayPeriod:buildLocalizeFn({values:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"}},defaultWidth:"wide",formattingValues:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"}},defaultFormattingWidth:"wide"})};function buildMatchFn(args){return function(string){var options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},width=options.width,matchPattern=width&&args.matchPatterns[width]||args.matchPatterns[args.defaultMatchWidth],matchResult=string.match(matchPattern);if(!matchResult)return null;var value,matchedString=matchResult[0],parsePatterns=width&&args.parsePatterns[width]||args.parsePatterns[args.defaultParseWidth],key=Array.isArray(parsePatterns)?findIndex(parsePatterns,(function(pattern){return pattern.test(matchedString)})):findKey(parsePatterns,(function(pattern){return pattern.test(matchedString)}));value=args.valueCallback?args.valueCallback(key):key,value=options.valueCallback?options.valueCallback(value):value;var rest=string.slice(matchedString.length);return{value:value,rest:rest}}}function findKey(object,predicate){for(var key in object)if(object.hasOwnProperty(key)&&predicate(object[key]))return key}function findIndex(array,predicate){for(var key=0;key<array.length;key++)if(predicate(array[key]))return key}var match={ordinalNumber:function buildMatchPatternFn(args){return function(string){var options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},matchResult=string.match(args.matchPattern);if(!matchResult)return null;var matchedString=matchResult[0],parseResult=string.match(args.parsePattern);if(!parseResult)return null;var value=args.valueCallback?args.valueCallback(parseResult[0]):parseResult[0];value=options.valueCallback?options.valueCallback(value):value;var rest=string.slice(matchedString.length);return{value:value,rest:rest}}}({matchPattern:/^(\d+)(th|st|nd|rd)?/i,parsePattern:/\d+/i,valueCallback:function valueCallback(value){return parseInt(value,10)}}),era:buildMatchFn({matchPatterns:{narrow:/^(b|a)/i,abbreviated:/^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,wide:/^(before christ|before common era|anno domini|common era)/i},defaultMatchWidth:"wide",parsePatterns:{any:[/^b/i,/^(a|c)/i]},defaultParseWidth:"any"}),quarter:buildMatchFn({matchPatterns:{narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](th|st|nd|rd)? quarter/i},defaultMatchWidth:"wide",parsePatterns:{any:[/1/i,/2/i,/3/i,/4/i]},defaultParseWidth:"any",valueCallback:function valueCallback(index){return index+1}}),month:buildMatchFn({matchPatterns:{narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,wide:/^(january|february|march|april|may|june|july|august|september|october|november|december)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^may/i,/^jun/i,/^jul/i,/^au/i,/^s/i,/^o/i,/^n/i,/^d/i]},defaultParseWidth:"any"}),day:buildMatchFn({matchPatterns:{narrow:/^[smtwf]/i,short:/^(su|mo|tu|we|th|fr|sa)/i,abbreviated:/^(sun|mon|tue|wed|thu|fri|sat)/i,wide:/^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^s/i,/^m/i,/^t/i,/^w/i,/^t/i,/^f/i,/^s/i],any:[/^su/i,/^m/i,/^tu/i,/^w/i,/^th/i,/^f/i,/^sa/i]},defaultParseWidth:"any"}),dayPeriod:buildMatchFn({matchPatterns:{narrow:/^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,any:/^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i},defaultMatchWidth:"any",parsePatterns:{any:{am:/^a/i,pm:/^p/i,midnight:/^mi/i,noon:/^no/i,morning:/morning/i,afternoon:/afternoon/i,evening:/evening/i,night:/night/i}},defaultParseWidth:"any"})},locale={code:"en-US",formatDistance:function formatDistance(token,count,options){var result,tokenValue=formatDistanceLocale[token];return result="string"==typeof tokenValue?tokenValue:1===count?tokenValue.one:tokenValue.other.replace("{{count}}",count.toString()),null!=options&&options.addSuffix?options.comparison&&options.comparison>0?"in "+result:result+" ago":result},formatLong:formatLong,formatRelative:function formatRelative(token,_date,_baseDate,_options){return formatRelativeLocale[token]},localize:localize,match:match,options:{weekStartsOn:0,firstWeekContainsDate:1}};function assign(target,object){if(null==target)throw new TypeError("assign requires that input parameter not be null or undefined");for(var property in object)Object.prototype.hasOwnProperty.call(object,property)&&(target[property]=object[property]);return target}},"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-data-grid.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_data_grid",(function(){return DataGrid}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.parse-float.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.to-precision.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.to-fixed.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.match.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.to-primitive.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-primitive.js"),__webpack_require__("../../node_modules/core-js/modules/es.parse-int.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.constructor.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.sort.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.every.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_46__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_47__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js"),_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__=__webpack_require__("../components/dist/esm/index-264b2c3e.js");function _createForOfIteratorHelper2(o,allowArrayLike){var it;if("undefined"==typeof Symbol||null==o[Symbol.iterator]){if(Array.isArray(o)||(it=function _unsupportedIterableToArray2(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray2(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray2(o,minLen)}(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function F(){};return{s:F,n:function n(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function e(_e3){throw _e3},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function s(){it=o[Symbol.iterator]()},n:function n(){var step=it.next();return normalCompletion=step.done,step},e:function e(_e4){didErr=!0,err=_e4},f:function f(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}function _arrayLikeToArray2(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function __defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var __rest$1=function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]])}return t},__rest=function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]])}return t},CELL_TYPES={checkbox:{defaults:{sortBy:"number"},getLongestContent:function getLongestContent(_ref8){var rows=_ref8.rows,columnIndex=_ref8.columnIndex;return rows[0][columnIndex]},render:function render(_ref9){var field=_ref9.field,content=_ref9.content,component=_ref9.component,rowIndex=_ref9.rowIndex,columnIndex=_ref9.columnIndex,_field$style=field.style,style=void 0===_field$style?"checkbox":_field$style,_field$editable=field.editable,editable=void 0!==_field$editable&&_field$editable,props={checked:content,disabled:!editable,label:field.label};return editable&&(props.onScaleChange=function(ev){var value=ev.detail.value;component.rows[rowIndex][columnIndex]=value,component.triggerEditEvent(value,rowIndex,columnIndex)}),"switch"===style?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-switch",Object.assign({size:"small"},props)):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-checkbox",Object.assign({},props))}},date:{defaults:{sortBy:"date"},render:function render(_ref10){var value=_ref10.content;return _ref10.isAutoWidthCheck&&(value=value.replace(/[0-9]/g,"8")),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("p",{class:"scl-body"},value)}},email:{defaults:{sortBy:"text"},render:function render(_ref11){var content=_ref11.content,emailNoProtocol=content.replace(/^mailto:/i,"");return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-link",{href:content},emailNoProtocol)}},graph:{defaults:{sortBy:"number"},render:function render(_ref12){var field=_ref12.field,content=_ref12.content,_field$style2=field.style,style=void 0===_field$style2?"progress":_field$style2,_field$min=field.min,min=void 0===_field$min?0:_field$min,_field$max=field.max,progress=parseFloat(((content-min)/((void 0===_field$max?100:_field$max)-min)*100).toPrecision(String(content).replace(".","").length));return"bar"===style?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:"tbody__bar-cell"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-progress-bar",{class:"data-grid-progress-bar","aria-hidden":"true",percentage:progress,mute:!0}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("p",{class:"scl-body"},content)):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-progress-bar",{class:"data-grid-progress-bar",percentage:progress,showStatus:!0,mute:!0})}},html:{defaults:{},getLongestContent:function getLongestContent(_ref14){var rows=_ref14.rows,columnIndex=_ref14.columnIndex;return rows[0][columnIndex]},render:function render(_ref15){var content=_ref15.content,component=_ref15.component;return content&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-button",{variant:"secondary",size:"small","icon-only":!0,"inner-aria-label":"Activate to "+(content.isExpanded?"collapse":"expand")+" content",onClick:function onClick(){content.isExpanded=!content.isExpanded,component.forceRender++}},content.isExpanded?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-navigation-collapse-up",{size:14}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-navigation-collapse-down",{size:14}))}},link:{defaults:{sortBy:"text"},render:function render(_ref13){var content=_ref13.content;if("string"==typeof content){var urlNoProtocol=content.replace(/^https?\:\/\//i,"");return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-link",{href:content,target:"_blank"},urlNoProtocol)}var text=content.text,props=__rest$1(content,["text"]);return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-link",Object.assign({},props),text)}},number:{defaults:{textAlign:"right",sortBy:"number"},render:function render(_ref16){var field=_ref16.field,content=_ref16.content,isAutoWidthCheck=_ref16.isAutoWidthCheck,_field$precision=field.precision,precision=void 0===_field$precision?1/0:_field$precision,_field$decimalSymbol=field.decimalSymbol,decimalSymbol=void 0===_field$decimalSymbol?".":_field$decimalSymbol,_field$groupSymbol=field.groupSymbol,groupSymbol=void 0===_field$groupSymbol?"":_field$groupSymbol,_field$prefix=field.prefix,prefix=void 0===_field$prefix?"":_field$prefix,_field$suffix=field.suffix,suffix=void 0===_field$suffix?"":_field$suffix,value=content;if(isAutoWidthCheck&&(value=Number(value.toString().replace(/[0-9]/g,"8"))),value=precision<100?Number(value).toFixed(precision):value.toString(),groupSymbol||"."!==decimalSymbol){var parts=value.split(".");groupSymbol&&(parts[0]=parts[0].replace(/\B(?=(\d{3})+(?!\d))/g,groupSymbol)),value=parts.join(decimalSymbol)}return(prefix||suffix)&&(value=prefix+value+suffix),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("p",{class:"scl-body",style:{textAlign:"right"}},value)}},select:{defaults:{sortBy:"text"},render:function render(_ref17){var field=_ref17.field,content=_ref17.content,component=_ref17.component,rowIndex=_ref17.rowIndex,columnIndex=_ref17.columnIndex,isAutoWidthCheck=_ref17.isAutoWidthCheck,options=field.options,_field$editable2=field.editable,editable=void 0!==_field$editable2&&_field$editable2,label=field.label;if(isAutoWidthCheck)return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("p",{class:"scl-body",style:{paddingRight:"56px"}},content);var props={disabled:!editable,value:content,label:label};return editable&&(props.onScaleChange=function(_ref18){var value=_ref18.detail.value;component.rows[rowIndex][columnIndex]=value,component.triggerEditEvent(value,rowIndex,columnIndex)}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-dropdown-select",Object.assign({floatingStrategy:"fixed"},props),options.map((function(option){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-dropdown-select-item",{value:option},option)})))}},tags:{defaults:{sortBy:"text"},render:function render(_ref19){var content=_ref19.content,tags=[];return tags="string"==typeof content?content.split(",").map((function(el){return{content:el,color:"standard"}})):content,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("ul",{class:"tbody__tag-list"},tags.map((function(tag){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("li",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-tag",{size:"small",type:"strong",color:tag.color},tag.content))})))}},telephone:{defaults:{sortBy:"text"},render:function render(_ref20){var content=_ref20.content,telephoneNoProtocol=content.replace(/^tel:/i,"");return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-link",{href:content},telephoneNoProtocol)}},text:{defaults:{sortBy:"text"},render:function render(_ref21){var field=_ref21.field,content=_ref21.content,component=_ref21.component,rowIndex=_ref21.rowIndex,columnIndex=_ref21.columnIndex,isAutoWidthCheck=_ref21.isAutoWidthCheck,_field$variant=field.variant,variant=void 0===_field$variant?"body":_field$variant,_field$editable3=field.editable,editable=void 0!==_field$editable3&&_field$editable3,iconPrefix=field.iconPrefix,iconSuffix=field.iconSuffix,label=field.label;if(isAutoWidthCheck&&editable)return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("p",{class:"scl-body",style:{paddingRight:"26px"}},content);if(editable){var props={type:"text",value:content,label:label,onScaleChange:function(_ref22){var value=_ref22.detail.value;component.rows[rowIndex][columnIndex]=value,component.triggerEditEvent(value,rowIndex,columnIndex)}};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-text-field",Object.assign({},props))}var value=content;return isAutoWidthCheck&&(value+="w"),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:"tbody__text-cell"},iconPrefix&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("span",{class:"tbody__text-cell-prefix"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-"+iconPrefix)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("p",{class:"scl-"+variant},value),iconSuffix&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("span",{class:"tbody__text-cell-suffix"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-"+iconSuffix)))}},actions:{defaults:{},render:function render(_ref23){var content=_ref23.content;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:"tbody__actions"},content.map((function(action){var label=action.label,props=__rest(action,["label"]);return"object"==typeof label&&"__html"in label?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-button",Object.assign({size:"small",innerHTML:label.__html},props)):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-button",Object.assign({size:"small"},props),label)})))}}},CELL_DEFAULTS={maxWidth:1/0,minWidth:20,resizable:!0,sortable:!1,sortBy:"text",textAlign:"left",visible:!0,width:"auto"};function subMilliseconds(dirtyDate,dirtyAmount){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(2,arguments);var amount=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.i)(dirtyAmount);return Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.b)(dirtyDate,-amount)}function startOfUTCISOWeek(dirtyDate){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(1,arguments);var weekStartsOn=1,date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyDate),day=date.getUTCDay(),diff=(day<weekStartsOn?7:0)+day-weekStartsOn;return date.setUTCDate(date.getUTCDate()-diff),date.setUTCHours(0,0,0,0),date}function getUTCISOWeekYear(dirtyDate){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(1,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyDate),year=date.getUTCFullYear(),fourthOfJanuaryOfNextYear=new Date(0);fourthOfJanuaryOfNextYear.setUTCFullYear(year+1,0,4),fourthOfJanuaryOfNextYear.setUTCHours(0,0,0,0);var startOfNextYear=startOfUTCISOWeek(fourthOfJanuaryOfNextYear),fourthOfJanuaryOfThisYear=new Date(0);fourthOfJanuaryOfThisYear.setUTCFullYear(year,0,4),fourthOfJanuaryOfThisYear.setUTCHours(0,0,0,0);var startOfThisYear=startOfUTCISOWeek(fourthOfJanuaryOfThisYear);return date.getTime()>=startOfNextYear.getTime()?year+1:date.getTime()>=startOfThisYear.getTime()?year:year-1}function startOfUTCISOWeekYear(dirtyDate){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(1,arguments);var year=getUTCISOWeekYear(dirtyDate),fourthOfJanuary=new Date(0);fourthOfJanuary.setUTCFullYear(year,0,4),fourthOfJanuary.setUTCHours(0,0,0,0);var date=startOfUTCISOWeek(fourthOfJanuary);return date}function getUTCISOWeek(dirtyDate){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(1,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyDate),diff=startOfUTCISOWeek(date).getTime()-startOfUTCISOWeekYear(date).getTime();return Math.round(diff/6048e5)+1}function startOfUTCWeek(dirtyDate,options){var _ref,_ref2,_ref3,_options$weekStartsOn,_options$locale,_options$locale$optio,_defaultOptions$local,_defaultOptions$local2;Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(1,arguments);var defaultOptions=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.f)(),weekStartsOn=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.i)(null!==(_ref=null!==(_ref2=null!==(_ref3=null!==(_options$weekStartsOn=null==options?void 0:options.weekStartsOn)&&void 0!==_options$weekStartsOn?_options$weekStartsOn:null==options||null===(_options$locale=options.locale)||void 0===_options$locale||null===(_options$locale$optio=_options$locale.options)||void 0===_options$locale$optio?void 0:_options$locale$optio.weekStartsOn)&&void 0!==_ref3?_ref3:defaultOptions.weekStartsOn)&&void 0!==_ref2?_ref2:null===(_defaultOptions$local=defaultOptions.locale)||void 0===_defaultOptions$local||null===(_defaultOptions$local2=_defaultOptions$local.options)||void 0===_defaultOptions$local2?void 0:_defaultOptions$local2.weekStartsOn)&&void 0!==_ref?_ref:0);if(!(weekStartsOn>=0&&weekStartsOn<=6))throw new RangeError("weekStartsOn must be between 0 and 6 inclusively");var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyDate),day=date.getUTCDay(),diff=(day<weekStartsOn?7:0)+day-weekStartsOn;return date.setUTCDate(date.getUTCDate()-diff),date.setUTCHours(0,0,0,0),date}function getUTCWeekYear(dirtyDate,options){var _ref,_ref2,_ref3,_options$firstWeekCon,_options$locale,_options$locale$optio,_defaultOptions$local,_defaultOptions$local2;Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(1,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyDate),year=date.getUTCFullYear(),defaultOptions=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.f)(),firstWeekContainsDate=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.i)(null!==(_ref=null!==(_ref2=null!==(_ref3=null!==(_options$firstWeekCon=null==options?void 0:options.firstWeekContainsDate)&&void 0!==_options$firstWeekCon?_options$firstWeekCon:null==options||null===(_options$locale=options.locale)||void 0===_options$locale||null===(_options$locale$optio=_options$locale.options)||void 0===_options$locale$optio?void 0:_options$locale$optio.firstWeekContainsDate)&&void 0!==_ref3?_ref3:defaultOptions.firstWeekContainsDate)&&void 0!==_ref2?_ref2:null===(_defaultOptions$local=defaultOptions.locale)||void 0===_defaultOptions$local||null===(_defaultOptions$local2=_defaultOptions$local.options)||void 0===_defaultOptions$local2?void 0:_defaultOptions$local2.firstWeekContainsDate)&&void 0!==_ref?_ref:1);if(!(firstWeekContainsDate>=1&&firstWeekContainsDate<=7))throw new RangeError("firstWeekContainsDate must be between 1 and 7 inclusively");var firstWeekOfNextYear=new Date(0);firstWeekOfNextYear.setUTCFullYear(year+1,0,firstWeekContainsDate),firstWeekOfNextYear.setUTCHours(0,0,0,0);var startOfNextYear=startOfUTCWeek(firstWeekOfNextYear,options),firstWeekOfThisYear=new Date(0);firstWeekOfThisYear.setUTCFullYear(year,0,firstWeekContainsDate),firstWeekOfThisYear.setUTCHours(0,0,0,0);var startOfThisYear=startOfUTCWeek(firstWeekOfThisYear,options);return date.getTime()>=startOfNextYear.getTime()?year+1:date.getTime()>=startOfThisYear.getTime()?year:year-1}function startOfUTCWeekYear(dirtyDate,options){var _ref,_ref2,_ref3,_options$firstWeekCon,_options$locale,_options$locale$optio,_defaultOptions$local,_defaultOptions$local2;Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(1,arguments);var defaultOptions=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.f)(),firstWeekContainsDate=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.i)(null!==(_ref=null!==(_ref2=null!==(_ref3=null!==(_options$firstWeekCon=null==options?void 0:options.firstWeekContainsDate)&&void 0!==_options$firstWeekCon?_options$firstWeekCon:null==options||null===(_options$locale=options.locale)||void 0===_options$locale||null===(_options$locale$optio=_options$locale.options)||void 0===_options$locale$optio?void 0:_options$locale$optio.firstWeekContainsDate)&&void 0!==_ref3?_ref3:defaultOptions.firstWeekContainsDate)&&void 0!==_ref2?_ref2:null===(_defaultOptions$local=defaultOptions.locale)||void 0===_defaultOptions$local||null===(_defaultOptions$local2=_defaultOptions$local.options)||void 0===_defaultOptions$local2?void 0:_defaultOptions$local2.firstWeekContainsDate)&&void 0!==_ref?_ref:1),year=getUTCWeekYear(dirtyDate,options),firstWeek=new Date(0);firstWeek.setUTCFullYear(year,0,firstWeekContainsDate),firstWeek.setUTCHours(0,0,0,0);var date=startOfUTCWeek(firstWeek,options);return date}function getUTCWeek(dirtyDate,options){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(1,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyDate),diff=startOfUTCWeek(date,options).getTime()-startOfUTCWeekYear(date,options).getTime();return Math.round(diff/6048e5)+1}var dateLongFormatter=function dateLongFormatter(pattern,formatLong){switch(pattern){case"P":return formatLong.date({width:"short"});case"PP":return formatLong.date({width:"medium"});case"PPP":return formatLong.date({width:"long"});default:return formatLong.date({width:"full"})}},timeLongFormatter=function timeLongFormatter(pattern,formatLong){switch(pattern){case"p":return formatLong.time({width:"short"});case"pp":return formatLong.time({width:"medium"});case"ppp":return formatLong.time({width:"long"});default:return formatLong.time({width:"full"})}},longFormatters={p:timeLongFormatter,P:function dateTimeLongFormatter(pattern,formatLong){var dateTimeFormat,matchResult=pattern.match(/(P+)(p+)?/)||[],datePattern=matchResult[1],timePattern=matchResult[2];if(!timePattern)return dateLongFormatter(pattern,formatLong);switch(datePattern){case"P":dateTimeFormat=formatLong.dateTime({width:"short"});break;case"PP":dateTimeFormat=formatLong.dateTime({width:"medium"});break;case"PPP":dateTimeFormat=formatLong.dateTime({width:"long"});break;default:dateTimeFormat=formatLong.dateTime({width:"full"})}return dateTimeFormat.replace("{{date}}",dateLongFormatter(datePattern,formatLong)).replace("{{time}}",timeLongFormatter(timePattern,formatLong))}},protectedDayOfYearTokens=["D","DD"],protectedWeekYearTokens=["YY","YYYY"];function isProtectedDayOfYearToken(token){return-1!==protectedDayOfYearTokens.indexOf(token)}function isProtectedWeekYearToken(token){return-1!==protectedWeekYearTokens.indexOf(token)}function throwProtectedError(token,format,input){if("YYYY"===token)throw new RangeError("Use `yyyy` instead of `YYYY` (in `".concat(format,"`) for formatting years to the input `").concat(input,"`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));if("YY"===token)throw new RangeError("Use `yy` instead of `YY` (in `".concat(format,"`) for formatting years to the input `").concat(input,"`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));if("D"===token)throw new RangeError("Use `d` instead of `D` (in `".concat(format,"`) for formatting days of the month to the input `").concat(input,"`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));if("DD"===token)throw new RangeError("Use `dd` instead of `DD` (in `".concat(format,"`) for formatting days of the month to the input `").concat(input,"`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"))}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _createForOfIteratorHelper(o,allowArrayLike){var it="undefined"!=typeof Symbol&&o[Symbol.iterator]||o["@@iterator"];if(!it){if(Array.isArray(o)||(it=function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function F(){};return{s:F,n:function n(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function e(_e){throw _e},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function s(){it=it.call(o)},n:function n(){var step=it.next();return normalCompletion=step.done,step},e:function e(_e2){didErr=!0,err=_e2},f:function f(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),Object.defineProperty(subClass,"prototype",{writable:!1}),superClass&&_setPrototypeOf(subClass,superClass)}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function _possibleConstructorReturn(self,call){if(call&&("object"===Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.a)(call)||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(self)}function _createSuper(Derived){var hasNativeReflectConstruct=function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _toPropertyKey(arg){var key=function _toPrimitive(input,hint){if("object"!==Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.a)(input)||null===input)return input;var prim=input[Symbol.toPrimitive];if(void 0!==prim){var res=prim.call(input,hint||"default");if("object"!==Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.a)(res))return res;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===hint?String:Number)(input)}(arg,"string");return"symbol"===Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.a)(key)?key:String(key)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}function _defineProperty(obj,key,value){return(key=_toPropertyKey(key))in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}var Setter=function(){function Setter(){_classCallCheck(this,Setter),_defineProperty(this,"priority",void 0),_defineProperty(this,"subPriority",0)}return _createClass(Setter,[{key:"validate",value:function validate(_utcDate,_options){return!0}}]),Setter}(),ValueSetter=function(_Setter){_inherits(ValueSetter,_Setter);var _super=_createSuper(ValueSetter);function ValueSetter(value,validateValue,setValue,priority,subPriority){var _this;return _classCallCheck(this,ValueSetter),(_this=_super.call(this)).value=value,_this.validateValue=validateValue,_this.setValue=setValue,_this.priority=priority,subPriority&&(_this.subPriority=subPriority),_this}return _createClass(ValueSetter,[{key:"validate",value:function validate(utcDate,options){return this.validateValue(utcDate,this.value,options)}},{key:"set",value:function set(utcDate,flags,options){return this.setValue(utcDate,flags,this.value,options)}}]),ValueSetter}(Setter),DateToSystemTimezoneSetter=function(_Setter2){_inherits(DateToSystemTimezoneSetter,_Setter2);var _super2=_createSuper(DateToSystemTimezoneSetter);function DateToSystemTimezoneSetter(){var _this2;_classCallCheck(this,DateToSystemTimezoneSetter);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this2=_super2.call.apply(_super2,[this].concat(args))),"priority",10),_defineProperty(_assertThisInitialized(_this2),"subPriority",-1),_this2}return _createClass(DateToSystemTimezoneSetter,[{key:"set",value:function set(date,flags){if(flags.timestampIsSet)return date;var convertedDate=new Date(0);return convertedDate.setFullYear(date.getUTCFullYear(),date.getUTCMonth(),date.getUTCDate()),convertedDate.setHours(date.getUTCHours(),date.getUTCMinutes(),date.getUTCSeconds(),date.getUTCMilliseconds()),convertedDate}}]),DateToSystemTimezoneSetter}(Setter),Parser=function(){function Parser(){_classCallCheck(this,Parser),_defineProperty(this,"incompatibleTokens",void 0),_defineProperty(this,"priority",void 0),_defineProperty(this,"subPriority",void 0)}return _createClass(Parser,[{key:"run",value:function run(dateString,token,match,options){var result=this.parse(dateString,token,match,options);return result?{setter:new ValueSetter(result.value,this.validate,this.set,this.priority,this.subPriority),rest:result.rest}:null}},{key:"validate",value:function validate(_utcDate,_value,_options){return!0}}]),Parser}(),EraParser=function(_Parser){_inherits(EraParser,_Parser);var _super=_createSuper(EraParser);function EraParser(){var _this;_classCallCheck(this,EraParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",140),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["R","u","t","T"]),_this}return _createClass(EraParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"G":case"GG":case"GGG":return match.era(dateString,{width:"abbreviated"})||match.era(dateString,{width:"narrow"});case"GGGGG":return match.era(dateString,{width:"narrow"});default:return match.era(dateString,{width:"wide"})||match.era(dateString,{width:"abbreviated"})||match.era(dateString,{width:"narrow"})}}},{key:"set",value:function set(date,flags,value){return flags.era=value,date.setUTCFullYear(value,0,1),date.setUTCHours(0,0,0,0),date}}]),EraParser}(Parser),numericPatterns_month=/^(1[0-2]|0?\d)/,numericPatterns_date=/^(3[0-1]|[0-2]?\d)/,numericPatterns_dayOfYear=/^(36[0-6]|3[0-5]\d|[0-2]?\d?\d)/,numericPatterns_week=/^(5[0-3]|[0-4]?\d)/,numericPatterns_hour23h=/^(2[0-3]|[0-1]?\d)/,numericPatterns_hour24h=/^(2[0-4]|[0-1]?\d)/,numericPatterns_hour11h=/^(1[0-1]|0?\d)/,numericPatterns_hour12h=/^(1[0-2]|0?\d)/,numericPatterns_minute=/^[0-5]?\d/,numericPatterns_second=/^[0-5]?\d/,numericPatterns_singleDigit=/^\d/,numericPatterns_twoDigits=/^\d{1,2}/,numericPatterns_threeDigits=/^\d{1,3}/,numericPatterns_fourDigits=/^\d{1,4}/,numericPatterns_anyDigitsSigned=/^-?\d+/,numericPatterns_singleDigitSigned=/^-?\d/,numericPatterns_twoDigitsSigned=/^-?\d{1,2}/,numericPatterns_threeDigitsSigned=/^-?\d{1,3}/,numericPatterns_fourDigitsSigned=/^-?\d{1,4}/,timezonePatterns_basicOptionalMinutes=/^([+-])(\d{2})(\d{2})?|Z/,timezonePatterns_basic=/^([+-])(\d{2})(\d{2})|Z/,timezonePatterns_basicOptionalSeconds=/^([+-])(\d{2})(\d{2})((\d{2}))?|Z/,timezonePatterns_extended=/^([+-])(\d{2}):(\d{2})|Z/,timezonePatterns_extendedOptionalSeconds=/^([+-])(\d{2}):(\d{2})(:(\d{2}))?|Z/;function mapValue(parseFnResult,mapFn){return parseFnResult?{value:mapFn(parseFnResult.value),rest:parseFnResult.rest}:parseFnResult}function parseNumericPattern(pattern,dateString){var matchResult=dateString.match(pattern);return matchResult?{value:parseInt(matchResult[0],10),rest:dateString.slice(matchResult[0].length)}:null}function parseTimezonePattern(pattern,dateString){var matchResult=dateString.match(pattern);return matchResult?"Z"===matchResult[0]?{value:0,rest:dateString.slice(1)}:{value:("+"===matchResult[1]?1:-1)*(36e5*(matchResult[2]?parseInt(matchResult[2],10):0)+6e4*(matchResult[3]?parseInt(matchResult[3],10):0)+1e3*(matchResult[5]?parseInt(matchResult[5],10):0)),rest:dateString.slice(matchResult[0].length)}:null}function parseAnyDigitsSigned(dateString){return parseNumericPattern(numericPatterns_anyDigitsSigned,dateString)}function parseNDigits(n,dateString){switch(n){case 1:return parseNumericPattern(numericPatterns_singleDigit,dateString);case 2:return parseNumericPattern(numericPatterns_twoDigits,dateString);case 3:return parseNumericPattern(numericPatterns_threeDigits,dateString);case 4:return parseNumericPattern(numericPatterns_fourDigits,dateString);default:return parseNumericPattern(new RegExp("^\\d{1,"+n+"}"),dateString)}}function parseNDigitsSigned(n,dateString){switch(n){case 1:return parseNumericPattern(numericPatterns_singleDigitSigned,dateString);case 2:return parseNumericPattern(numericPatterns_twoDigitsSigned,dateString);case 3:return parseNumericPattern(numericPatterns_threeDigitsSigned,dateString);case 4:return parseNumericPattern(numericPatterns_fourDigitsSigned,dateString);default:return parseNumericPattern(new RegExp("^-?\\d{1,"+n+"}"),dateString)}}function dayPeriodEnumToHours(dayPeriod){switch(dayPeriod){case"morning":return 4;case"evening":return 17;case"pm":case"noon":case"afternoon":return 12;default:return 0}}function normalizeTwoDigitYear(twoDigitYear,currentYear){var result,isCommonEra=currentYear>0,absCurrentYear=isCommonEra?currentYear:1-currentYear;if(absCurrentYear<=50)result=twoDigitYear||100;else{var rangeEnd=absCurrentYear+50;result=twoDigitYear+100*Math.floor(rangeEnd/100)-(twoDigitYear>=rangeEnd%100?100:0)}return isCommonEra?result:1-result}function isLeapYearIndex(year){return year%400==0||year%4==0&&year%100!=0}var YearParser=function(_Parser){_inherits(YearParser,_Parser);var _super=_createSuper(YearParser);function YearParser(){var _this;_classCallCheck(this,YearParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",130),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","u","w","I","i","e","c","t","T"]),_this}return _createClass(YearParser,[{key:"parse",value:function parse(dateString,token,match){var valueCallback=function valueCallback(year){return{year:year,isTwoDigitYear:"yy"===token}};switch(token){case"y":return mapValue(parseNDigits(4,dateString),valueCallback);case"yo":return mapValue(match.ordinalNumber(dateString,{unit:"year"}),valueCallback);default:return mapValue(parseNDigits(token.length,dateString),valueCallback)}}},{key:"validate",value:function validate(_date,value){return value.isTwoDigitYear||value.year>0}},{key:"set",value:function set(date,flags,value){var currentYear=date.getUTCFullYear();if(value.isTwoDigitYear){var normalizedTwoDigitYear=normalizeTwoDigitYear(value.year,currentYear);return date.setUTCFullYear(normalizedTwoDigitYear,0,1),date.setUTCHours(0,0,0,0),date}var year="era"in flags&&1!==flags.era?1-value.year:value.year;return date.setUTCFullYear(year,0,1),date.setUTCHours(0,0,0,0),date}}]),YearParser}(Parser),LocalWeekYearParser=function(_Parser){_inherits(LocalWeekYearParser,_Parser);var _super=_createSuper(LocalWeekYearParser);function LocalWeekYearParser(){var _this;_classCallCheck(this,LocalWeekYearParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",130),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","R","u","Q","q","M","L","I","d","D","i","t","T"]),_this}return _createClass(LocalWeekYearParser,[{key:"parse",value:function parse(dateString,token,match){var valueCallback=function valueCallback(year){return{year:year,isTwoDigitYear:"YY"===token}};switch(token){case"Y":return mapValue(parseNDigits(4,dateString),valueCallback);case"Yo":return mapValue(match.ordinalNumber(dateString,{unit:"year"}),valueCallback);default:return mapValue(parseNDigits(token.length,dateString),valueCallback)}}},{key:"validate",value:function validate(_date,value){return value.isTwoDigitYear||value.year>0}},{key:"set",value:function set(date,flags,value,options){var currentYear=getUTCWeekYear(date,options);if(value.isTwoDigitYear){var normalizedTwoDigitYear=normalizeTwoDigitYear(value.year,currentYear);return date.setUTCFullYear(normalizedTwoDigitYear,0,options.firstWeekContainsDate),date.setUTCHours(0,0,0,0),startOfUTCWeek(date,options)}var year="era"in flags&&1!==flags.era?1-value.year:value.year;return date.setUTCFullYear(year,0,options.firstWeekContainsDate),date.setUTCHours(0,0,0,0),startOfUTCWeek(date,options)}}]),LocalWeekYearParser}(Parser),ISOWeekYearParser=function(_Parser){_inherits(ISOWeekYearParser,_Parser);var _super=_createSuper(ISOWeekYearParser);function ISOWeekYearParser(){var _this;_classCallCheck(this,ISOWeekYearParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",130),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["G","y","Y","u","Q","q","M","L","w","d","D","e","c","t","T"]),_this}return _createClass(ISOWeekYearParser,[{key:"parse",value:function parse(dateString,token){return parseNDigitsSigned("R"===token?4:token.length,dateString)}},{key:"set",value:function set(_date,_flags,value){var firstWeekOfYear=new Date(0);return firstWeekOfYear.setUTCFullYear(value,0,4),firstWeekOfYear.setUTCHours(0,0,0,0),startOfUTCISOWeek(firstWeekOfYear)}}]),ISOWeekYearParser}(Parser),ExtendedYearParser=function(_Parser){_inherits(ExtendedYearParser,_Parser);var _super=_createSuper(ExtendedYearParser);function ExtendedYearParser(){var _this;_classCallCheck(this,ExtendedYearParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",130),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["G","y","Y","R","w","I","i","e","c","t","T"]),_this}return _createClass(ExtendedYearParser,[{key:"parse",value:function parse(dateString,token){return parseNDigitsSigned("u"===token?4:token.length,dateString)}},{key:"set",value:function set(date,_flags,value){return date.setUTCFullYear(value,0,1),date.setUTCHours(0,0,0,0),date}}]),ExtendedYearParser}(Parser),QuarterParser=function(_Parser){_inherits(QuarterParser,_Parser);var _super=_createSuper(QuarterParser);function QuarterParser(){var _this;_classCallCheck(this,QuarterParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",120),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","q","M","L","w","I","d","D","i","e","c","t","T"]),_this}return _createClass(QuarterParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"Q":case"QQ":return parseNDigits(token.length,dateString);case"Qo":return match.ordinalNumber(dateString,{unit:"quarter"});case"QQQ":return match.quarter(dateString,{width:"abbreviated",context:"formatting"})||match.quarter(dateString,{width:"narrow",context:"formatting"});case"QQQQQ":return match.quarter(dateString,{width:"narrow",context:"formatting"});default:return match.quarter(dateString,{width:"wide",context:"formatting"})||match.quarter(dateString,{width:"abbreviated",context:"formatting"})||match.quarter(dateString,{width:"narrow",context:"formatting"})}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=4}},{key:"set",value:function set(date,_flags,value){return date.setUTCMonth(3*(value-1),1),date.setUTCHours(0,0,0,0),date}}]),QuarterParser}(Parser),StandAloneQuarterParser=function(_Parser){_inherits(StandAloneQuarterParser,_Parser);var _super=_createSuper(StandAloneQuarterParser);function StandAloneQuarterParser(){var _this;_classCallCheck(this,StandAloneQuarterParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",120),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","Q","M","L","w","I","d","D","i","e","c","t","T"]),_this}return _createClass(StandAloneQuarterParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"q":case"qq":return parseNDigits(token.length,dateString);case"qo":return match.ordinalNumber(dateString,{unit:"quarter"});case"qqq":return match.quarter(dateString,{width:"abbreviated",context:"standalone"})||match.quarter(dateString,{width:"narrow",context:"standalone"});case"qqqqq":return match.quarter(dateString,{width:"narrow",context:"standalone"});default:return match.quarter(dateString,{width:"wide",context:"standalone"})||match.quarter(dateString,{width:"abbreviated",context:"standalone"})||match.quarter(dateString,{width:"narrow",context:"standalone"})}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=4}},{key:"set",value:function set(date,_flags,value){return date.setUTCMonth(3*(value-1),1),date.setUTCHours(0,0,0,0),date}}]),StandAloneQuarterParser}(Parser),MonthParser=function(_Parser){_inherits(MonthParser,_Parser);var _super=_createSuper(MonthParser);function MonthParser(){var _this;_classCallCheck(this,MonthParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"incompatibleTokens",["Y","R","q","Q","L","w","I","D","i","e","c","t","T"]),_defineProperty(_assertThisInitialized(_this),"priority",110),_this}return _createClass(MonthParser,[{key:"parse",value:function parse(dateString,token,match){var valueCallback=function valueCallback(value){return value-1};switch(token){case"M":return mapValue(parseNumericPattern(numericPatterns_month,dateString),valueCallback);case"MM":return mapValue(parseNDigits(2,dateString),valueCallback);case"Mo":return mapValue(match.ordinalNumber(dateString,{unit:"month"}),valueCallback);case"MMM":return match.month(dateString,{width:"abbreviated",context:"formatting"})||match.month(dateString,{width:"narrow",context:"formatting"});case"MMMMM":return match.month(dateString,{width:"narrow",context:"formatting"});default:return match.month(dateString,{width:"wide",context:"formatting"})||match.month(dateString,{width:"abbreviated",context:"formatting"})||match.month(dateString,{width:"narrow",context:"formatting"})}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=11}},{key:"set",value:function set(date,_flags,value){return date.setUTCMonth(value,1),date.setUTCHours(0,0,0,0),date}}]),MonthParser}(Parser),StandAloneMonthParser=function(_Parser){_inherits(StandAloneMonthParser,_Parser);var _super=_createSuper(StandAloneMonthParser);function StandAloneMonthParser(){var _this;_classCallCheck(this,StandAloneMonthParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",110),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","q","Q","M","w","I","D","i","e","c","t","T"]),_this}return _createClass(StandAloneMonthParser,[{key:"parse",value:function parse(dateString,token,match){var valueCallback=function valueCallback(value){return value-1};switch(token){case"L":return mapValue(parseNumericPattern(numericPatterns_month,dateString),valueCallback);case"LL":return mapValue(parseNDigits(2,dateString),valueCallback);case"Lo":return mapValue(match.ordinalNumber(dateString,{unit:"month"}),valueCallback);case"LLL":return match.month(dateString,{width:"abbreviated",context:"standalone"})||match.month(dateString,{width:"narrow",context:"standalone"});case"LLLLL":return match.month(dateString,{width:"narrow",context:"standalone"});default:return match.month(dateString,{width:"wide",context:"standalone"})||match.month(dateString,{width:"abbreviated",context:"standalone"})||match.month(dateString,{width:"narrow",context:"standalone"})}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=11}},{key:"set",value:function set(date,_flags,value){return date.setUTCMonth(value,1),date.setUTCHours(0,0,0,0),date}}]),StandAloneMonthParser}(Parser);var LocalWeekParser=function(_Parser){_inherits(LocalWeekParser,_Parser);var _super=_createSuper(LocalWeekParser);function LocalWeekParser(){var _this;_classCallCheck(this,LocalWeekParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",100),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","R","u","q","Q","M","L","I","d","D","i","t","T"]),_this}return _createClass(LocalWeekParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"w":return parseNumericPattern(numericPatterns_week,dateString);case"wo":return match.ordinalNumber(dateString,{unit:"week"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=53}},{key:"set",value:function set(date,_flags,value,options){return startOfUTCWeek(function setUTCWeek(dirtyDate,dirtyWeek,options){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(2,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyDate),week=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.i)(dirtyWeek),diff=getUTCWeek(date,options)-week;return date.setUTCDate(date.getUTCDate()-7*diff),date}(date,value,options),options)}}]),LocalWeekParser}(Parser);var ISOWeekParser=function(_Parser){_inherits(ISOWeekParser,_Parser);var _super=_createSuper(ISOWeekParser);function ISOWeekParser(){var _this;_classCallCheck(this,ISOWeekParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",100),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","Y","u","q","Q","M","L","w","d","D","e","c","t","T"]),_this}return _createClass(ISOWeekParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"I":return parseNumericPattern(numericPatterns_week,dateString);case"Io":return match.ordinalNumber(dateString,{unit:"week"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=53}},{key:"set",value:function set(date,_flags,value){return startOfUTCISOWeek(function setUTCISOWeek(dirtyDate,dirtyISOWeek){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(2,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyDate),isoWeek=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.i)(dirtyISOWeek),diff=getUTCISOWeek(date)-isoWeek;return date.setUTCDate(date.getUTCDate()-7*diff),date}(date,value))}}]),ISOWeekParser}(Parser),DAYS_IN_MONTH=[31,28,31,30,31,30,31,31,30,31,30,31],DAYS_IN_MONTH_LEAP_YEAR=[31,29,31,30,31,30,31,31,30,31,30,31],DateParser=function(_Parser){_inherits(DateParser,_Parser);var _super=_createSuper(DateParser);function DateParser(){var _this;_classCallCheck(this,DateParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"subPriority",1),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","q","Q","w","I","D","i","e","c","t","T"]),_this}return _createClass(DateParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"d":return parseNumericPattern(numericPatterns_date,dateString);case"do":return match.ordinalNumber(dateString,{unit:"date"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(date,value){var isLeapYear=isLeapYearIndex(date.getUTCFullYear()),month=date.getUTCMonth();return isLeapYear?value>=1&&value<=DAYS_IN_MONTH_LEAP_YEAR[month]:value>=1&&value<=DAYS_IN_MONTH[month]}},{key:"set",value:function set(date,_flags,value){return date.setUTCDate(value),date.setUTCHours(0,0,0,0),date}}]),DateParser}(Parser),DayOfYearParser=function(_Parser){_inherits(DayOfYearParser,_Parser);var _super=_createSuper(DayOfYearParser);function DayOfYearParser(){var _this;_classCallCheck(this,DayOfYearParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"subpriority",1),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","q","Q","M","L","w","I","d","E","i","e","c","t","T"]),_this}return _createClass(DayOfYearParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"D":case"DD":return parseNumericPattern(numericPatterns_dayOfYear,dateString);case"Do":return match.ordinalNumber(dateString,{unit:"date"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(date,value){return isLeapYearIndex(date.getUTCFullYear())?value>=1&&value<=366:value>=1&&value<=365}},{key:"set",value:function set(date,_flags,value){return date.setUTCMonth(0,value),date.setUTCHours(0,0,0,0),date}}]),DayOfYearParser}(Parser);function setUTCDay(dirtyDate,dirtyDay,options){var _ref,_ref2,_ref3,_options$weekStartsOn,_options$locale,_options$locale$optio,_defaultOptions$local,_defaultOptions$local2;Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(2,arguments);var defaultOptions=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.f)(),weekStartsOn=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.i)(null!==(_ref=null!==(_ref2=null!==(_ref3=null!==(_options$weekStartsOn=null==options?void 0:options.weekStartsOn)&&void 0!==_options$weekStartsOn?_options$weekStartsOn:null==options||null===(_options$locale=options.locale)||void 0===_options$locale||null===(_options$locale$optio=_options$locale.options)||void 0===_options$locale$optio?void 0:_options$locale$optio.weekStartsOn)&&void 0!==_ref3?_ref3:defaultOptions.weekStartsOn)&&void 0!==_ref2?_ref2:null===(_defaultOptions$local=defaultOptions.locale)||void 0===_defaultOptions$local||null===(_defaultOptions$local2=_defaultOptions$local.options)||void 0===_defaultOptions$local2?void 0:_defaultOptions$local2.weekStartsOn)&&void 0!==_ref?_ref:0);if(!(weekStartsOn>=0&&weekStartsOn<=6))throw new RangeError("weekStartsOn must be between 0 and 6 inclusively");var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyDate),day=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.i)(dirtyDay),currentDay=date.getUTCDay(),remainder=day%7,dayIndex=(remainder+7)%7,diff=(dayIndex<weekStartsOn?7:0)+day-currentDay;return date.setUTCDate(date.getUTCDate()+diff),date}var DayParser=function(_Parser){_inherits(DayParser,_Parser);var _super=_createSuper(DayParser);function DayParser(){var _this;_classCallCheck(this,DayParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["D","i","e","c","t","T"]),_this}return _createClass(DayParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"E":case"EE":case"EEE":return match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"});case"EEEEE":return match.day(dateString,{width:"narrow",context:"formatting"});case"EEEEEE":return match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"});default:return match.day(dateString,{width:"wide",context:"formatting"})||match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"})}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=6}},{key:"set",value:function set(date,_flags,value,options){return(date=setUTCDay(date,value,options)).setUTCHours(0,0,0,0),date}}]),DayParser}(Parser),LocalDayParser=function(_Parser){_inherits(LocalDayParser,_Parser);var _super=_createSuper(LocalDayParser);function LocalDayParser(){var _this;_classCallCheck(this,LocalDayParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","R","u","q","Q","M","L","I","d","D","E","i","c","t","T"]),_this}return _createClass(LocalDayParser,[{key:"parse",value:function parse(dateString,token,match,options){var valueCallback=function valueCallback(value){var wholeWeekDays=7*Math.floor((value-1)/7);return(value+options.weekStartsOn+6)%7+wholeWeekDays};switch(token){case"e":case"ee":return mapValue(parseNDigits(token.length,dateString),valueCallback);case"eo":return mapValue(match.ordinalNumber(dateString,{unit:"day"}),valueCallback);case"eee":return match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"});case"eeeee":return match.day(dateString,{width:"narrow",context:"formatting"});case"eeeeee":return match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"});default:return match.day(dateString,{width:"wide",context:"formatting"})||match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"})}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=6}},{key:"set",value:function set(date,_flags,value,options){return(date=setUTCDay(date,value,options)).setUTCHours(0,0,0,0),date}}]),LocalDayParser}(Parser),StandAloneLocalDayParser=function(_Parser){_inherits(StandAloneLocalDayParser,_Parser);var _super=_createSuper(StandAloneLocalDayParser);function StandAloneLocalDayParser(){var _this;_classCallCheck(this,StandAloneLocalDayParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","R","u","q","Q","M","L","I","d","D","E","i","e","t","T"]),_this}return _createClass(StandAloneLocalDayParser,[{key:"parse",value:function parse(dateString,token,match,options){var valueCallback=function valueCallback(value){var wholeWeekDays=7*Math.floor((value-1)/7);return(value+options.weekStartsOn+6)%7+wholeWeekDays};switch(token){case"c":case"cc":return mapValue(parseNDigits(token.length,dateString),valueCallback);case"co":return mapValue(match.ordinalNumber(dateString,{unit:"day"}),valueCallback);case"ccc":return match.day(dateString,{width:"abbreviated",context:"standalone"})||match.day(dateString,{width:"short",context:"standalone"})||match.day(dateString,{width:"narrow",context:"standalone"});case"ccccc":return match.day(dateString,{width:"narrow",context:"standalone"});case"cccccc":return match.day(dateString,{width:"short",context:"standalone"})||match.day(dateString,{width:"narrow",context:"standalone"});default:return match.day(dateString,{width:"wide",context:"standalone"})||match.day(dateString,{width:"abbreviated",context:"standalone"})||match.day(dateString,{width:"short",context:"standalone"})||match.day(dateString,{width:"narrow",context:"standalone"})}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=6}},{key:"set",value:function set(date,_flags,value,options){return(date=setUTCDay(date,value,options)).setUTCHours(0,0,0,0),date}}]),StandAloneLocalDayParser}(Parser);var ISODayParser=function(_Parser){_inherits(ISODayParser,_Parser);var _super=_createSuper(ISODayParser);function ISODayParser(){var _this;_classCallCheck(this,ISODayParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","Y","u","q","Q","M","L","w","d","D","E","e","c","t","T"]),_this}return _createClass(ISODayParser,[{key:"parse",value:function parse(dateString,token,match){var valueCallback=function valueCallback(value){return 0===value?7:value};switch(token){case"i":case"ii":return parseNDigits(token.length,dateString);case"io":return match.ordinalNumber(dateString,{unit:"day"});case"iii":return mapValue(match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"}),valueCallback);case"iiiii":return mapValue(match.day(dateString,{width:"narrow",context:"formatting"}),valueCallback);case"iiiiii":return mapValue(match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"}),valueCallback);default:return mapValue(match.day(dateString,{width:"wide",context:"formatting"})||match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"}),valueCallback)}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=7}},{key:"set",value:function set(date,_flags,value){return date=function setUTCISODay(dirtyDate,dirtyDay){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(2,arguments);var day=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.i)(dirtyDay);day%7==0&&(day-=7);var weekStartsOn=1,date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyDate),currentDay=date.getUTCDay(),diff=((day%7+7)%7<weekStartsOn?7:0)+day-currentDay;return date.setUTCDate(date.getUTCDate()+diff),date}(date,value),date.setUTCHours(0,0,0,0),date}}]),ISODayParser}(Parser),AMPMParser=function(_Parser){_inherits(AMPMParser,_Parser);var _super=_createSuper(AMPMParser);function AMPMParser(){var _this;_classCallCheck(this,AMPMParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",80),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["b","B","H","k","t","T"]),_this}return _createClass(AMPMParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"a":case"aa":case"aaa":return match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"});case"aaaaa":return match.dayPeriod(dateString,{width:"narrow",context:"formatting"});default:return match.dayPeriod(dateString,{width:"wide",context:"formatting"})||match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"})}}},{key:"set",value:function set(date,_flags,value){return date.setUTCHours(dayPeriodEnumToHours(value),0,0,0),date}}]),AMPMParser}(Parser),AMPMMidnightParser=function(_Parser){_inherits(AMPMMidnightParser,_Parser);var _super=_createSuper(AMPMMidnightParser);function AMPMMidnightParser(){var _this;_classCallCheck(this,AMPMMidnightParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",80),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["a","B","H","k","t","T"]),_this}return _createClass(AMPMMidnightParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"b":case"bb":case"bbb":return match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"});case"bbbbb":return match.dayPeriod(dateString,{width:"narrow",context:"formatting"});default:return match.dayPeriod(dateString,{width:"wide",context:"formatting"})||match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"})}}},{key:"set",value:function set(date,_flags,value){return date.setUTCHours(dayPeriodEnumToHours(value),0,0,0),date}}]),AMPMMidnightParser}(Parser),DayPeriodParser=function(_Parser){_inherits(DayPeriodParser,_Parser);var _super=_createSuper(DayPeriodParser);function DayPeriodParser(){var _this;_classCallCheck(this,DayPeriodParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",80),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["a","b","t","T"]),_this}return _createClass(DayPeriodParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"B":case"BB":case"BBB":return match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"});case"BBBBB":return match.dayPeriod(dateString,{width:"narrow",context:"formatting"});default:return match.dayPeriod(dateString,{width:"wide",context:"formatting"})||match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"})}}},{key:"set",value:function set(date,_flags,value){return date.setUTCHours(dayPeriodEnumToHours(value),0,0,0),date}}]),DayPeriodParser}(Parser),Hour1to12Parser=function(_Parser){_inherits(Hour1to12Parser,_Parser);var _super=_createSuper(Hour1to12Parser);function Hour1to12Parser(){var _this;_classCallCheck(this,Hour1to12Parser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",70),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["H","K","k","t","T"]),_this}return _createClass(Hour1to12Parser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"h":return parseNumericPattern(numericPatterns_hour12h,dateString);case"ho":return match.ordinalNumber(dateString,{unit:"hour"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=12}},{key:"set",value:function set(date,_flags,value){var isPM=date.getUTCHours()>=12;return isPM&&value<12?date.setUTCHours(value+12,0,0,0):isPM||12!==value?date.setUTCHours(value,0,0,0):date.setUTCHours(0,0,0,0),date}}]),Hour1to12Parser}(Parser),Hour0to23Parser=function(_Parser){_inherits(Hour0to23Parser,_Parser);var _super=_createSuper(Hour0to23Parser);function Hour0to23Parser(){var _this;_classCallCheck(this,Hour0to23Parser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",70),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["a","b","h","K","k","t","T"]),_this}return _createClass(Hour0to23Parser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"H":return parseNumericPattern(numericPatterns_hour23h,dateString);case"Ho":return match.ordinalNumber(dateString,{unit:"hour"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=23}},{key:"set",value:function set(date,_flags,value){return date.setUTCHours(value,0,0,0),date}}]),Hour0to23Parser}(Parser),Hour0To11Parser=function(_Parser){_inherits(Hour0To11Parser,_Parser);var _super=_createSuper(Hour0To11Parser);function Hour0To11Parser(){var _this;_classCallCheck(this,Hour0To11Parser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",70),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["h","H","k","t","T"]),_this}return _createClass(Hour0To11Parser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"K":return parseNumericPattern(numericPatterns_hour11h,dateString);case"Ko":return match.ordinalNumber(dateString,{unit:"hour"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=11}},{key:"set",value:function set(date,_flags,value){return date.getUTCHours()>=12&&value<12?date.setUTCHours(value+12,0,0,0):date.setUTCHours(value,0,0,0),date}}]),Hour0To11Parser}(Parser),Hour1To24Parser=function(_Parser){_inherits(Hour1To24Parser,_Parser);var _super=_createSuper(Hour1To24Parser);function Hour1To24Parser(){var _this;_classCallCheck(this,Hour1To24Parser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",70),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["a","b","h","H","K","t","T"]),_this}return _createClass(Hour1To24Parser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"k":return parseNumericPattern(numericPatterns_hour24h,dateString);case"ko":return match.ordinalNumber(dateString,{unit:"hour"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=24}},{key:"set",value:function set(date,_flags,value){var hours=value<=24?value%24:value;return date.setUTCHours(hours,0,0,0),date}}]),Hour1To24Parser}(Parser),MinuteParser=function(_Parser){_inherits(MinuteParser,_Parser);var _super=_createSuper(MinuteParser);function MinuteParser(){var _this;_classCallCheck(this,MinuteParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",60),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["t","T"]),_this}return _createClass(MinuteParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"m":return parseNumericPattern(numericPatterns_minute,dateString);case"mo":return match.ordinalNumber(dateString,{unit:"minute"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=59}},{key:"set",value:function set(date,_flags,value){return date.setUTCMinutes(value,0,0),date}}]),MinuteParser}(Parser),SecondParser=function(_Parser){_inherits(SecondParser,_Parser);var _super=_createSuper(SecondParser);function SecondParser(){var _this;_classCallCheck(this,SecondParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",50),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["t","T"]),_this}return _createClass(SecondParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"s":return parseNumericPattern(numericPatterns_second,dateString);case"so":return match.ordinalNumber(dateString,{unit:"second"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=59}},{key:"set",value:function set(date,_flags,value){return date.setUTCSeconds(value,0),date}}]),SecondParser}(Parser),FractionOfSecondParser=function(_Parser){_inherits(FractionOfSecondParser,_Parser);var _super=_createSuper(FractionOfSecondParser);function FractionOfSecondParser(){var _this;_classCallCheck(this,FractionOfSecondParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",30),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["t","T"]),_this}return _createClass(FractionOfSecondParser,[{key:"parse",value:function parse(dateString,token){return mapValue(parseNDigits(token.length,dateString),(function valueCallback(value){return Math.floor(value*Math.pow(10,3-token.length))}))}},{key:"set",value:function set(date,_flags,value){return date.setUTCMilliseconds(value),date}}]),FractionOfSecondParser}(Parser),ISOTimezoneWithZParser=function(_Parser){_inherits(ISOTimezoneWithZParser,_Parser);var _super=_createSuper(ISOTimezoneWithZParser);function ISOTimezoneWithZParser(){var _this;_classCallCheck(this,ISOTimezoneWithZParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",10),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["t","T","x"]),_this}return _createClass(ISOTimezoneWithZParser,[{key:"parse",value:function parse(dateString,token){switch(token){case"X":return parseTimezonePattern(timezonePatterns_basicOptionalMinutes,dateString);case"XX":return parseTimezonePattern(timezonePatterns_basic,dateString);case"XXXX":return parseTimezonePattern(timezonePatterns_basicOptionalSeconds,dateString);case"XXXXX":return parseTimezonePattern(timezonePatterns_extendedOptionalSeconds,dateString);default:return parseTimezonePattern(timezonePatterns_extended,dateString)}}},{key:"set",value:function set(date,flags,value){return flags.timestampIsSet?date:new Date(date.getTime()-value)}}]),ISOTimezoneWithZParser}(Parser),ISOTimezoneParser=function(_Parser){_inherits(ISOTimezoneParser,_Parser);var _super=_createSuper(ISOTimezoneParser);function ISOTimezoneParser(){var _this;_classCallCheck(this,ISOTimezoneParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",10),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["t","T","X"]),_this}return _createClass(ISOTimezoneParser,[{key:"parse",value:function parse(dateString,token){switch(token){case"x":return parseTimezonePattern(timezonePatterns_basicOptionalMinutes,dateString);case"xx":return parseTimezonePattern(timezonePatterns_basic,dateString);case"xxxx":return parseTimezonePattern(timezonePatterns_basicOptionalSeconds,dateString);case"xxxxx":return parseTimezonePattern(timezonePatterns_extendedOptionalSeconds,dateString);default:return parseTimezonePattern(timezonePatterns_extended,dateString)}}},{key:"set",value:function set(date,flags,value){return flags.timestampIsSet?date:new Date(date.getTime()-value)}}]),ISOTimezoneParser}(Parser),TimestampSecondsParser=function(_Parser){_inherits(TimestampSecondsParser,_Parser);var _super=_createSuper(TimestampSecondsParser);function TimestampSecondsParser(){var _this;_classCallCheck(this,TimestampSecondsParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",40),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens","*"),_this}return _createClass(TimestampSecondsParser,[{key:"parse",value:function parse(dateString){return parseAnyDigitsSigned(dateString)}},{key:"set",value:function set(_date,_flags,value){return[new Date(1e3*value),{timestampIsSet:!0}]}}]),TimestampSecondsParser}(Parser),TimestampMillisecondsParser=function(_Parser){_inherits(TimestampMillisecondsParser,_Parser);var _super=_createSuper(TimestampMillisecondsParser);function TimestampMillisecondsParser(){var _this;_classCallCheck(this,TimestampMillisecondsParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",20),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens","*"),_this}return _createClass(TimestampMillisecondsParser,[{key:"parse",value:function parse(dateString){return parseAnyDigitsSigned(dateString)}},{key:"set",value:function set(_date,_flags,value){return[new Date(value),{timestampIsSet:!0}]}}]),TimestampMillisecondsParser}(Parser),parsers={G:new EraParser,y:new YearParser,Y:new LocalWeekYearParser,R:new ISOWeekYearParser,u:new ExtendedYearParser,Q:new QuarterParser,q:new StandAloneQuarterParser,M:new MonthParser,L:new StandAloneMonthParser,w:new LocalWeekParser,I:new ISOWeekParser,d:new DateParser,D:new DayOfYearParser,E:new DayParser,e:new LocalDayParser,c:new StandAloneLocalDayParser,i:new ISODayParser,a:new AMPMParser,b:new AMPMMidnightParser,B:new DayPeriodParser,h:new Hour1to12Parser,H:new Hour0to23Parser,K:new Hour0To11Parser,k:new Hour1To24Parser,m:new MinuteParser,s:new SecondParser,S:new FractionOfSecondParser,X:new ISOTimezoneWithZParser,x:new ISOTimezoneParser,t:new TimestampSecondsParser,T:new TimestampMillisecondsParser},formattingTokensRegExp=/[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g,longFormattingTokensRegExp=/P+p+|P+|p+|''|'(''|[^'])+('|$)|./g,escapedStringRegExp=/^'([^]*?)'?$/,doubleQuoteRegExp=/''/g,notWhitespaceRegExp=/\S/,unescapedLatinCharacterRegExp=/[a-zA-Z]/;function cleanEscapedString(input){return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp,"'")}var resizeObserver,name="data-grid",DataGrid=function(){function DataGrid(hostRef){var _this3=this;!function _classCallCheck2(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,DataGrid),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.i)(this,hostRef),this.scaleEdit=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.e)(this,"scale-edit",7),this.scaleEditLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.e)(this,"scaleEdit",7),this.scaleSort=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.e)(this,"scale-sort",7),this.scaleSortLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.e)(this,"scaleSort",7),this.forceRender=0,this.paginationStart=0,this.scrollY=0,this.freezeHeader=!1,this.heading="",this.hideBorder=!1,this.hideHeader=!1,this.hideInfo=!1,this.hideMenu=!1,this.numbered=!1,this.pageSize=1/0,this.selectable=!1,this.selection=[],this.shadeAlternate=!0,this.visible=!0,this.sortableColumnTitle="Activate to sort column",this.activeSortingIndex=-1,this.contentWidth=100,this.dataNeedsCheck=!0,this.hasData=!1,this.isMobile=!1,this.isPagination=!1,this.isSortable=!1,this.lastContainerWidth=100,this.mobileTitleIndex=-1,this.needsAutoWidthParse=!1,this.needsColumnResize=!1,this.numberColumnWidth=0,this.selectionColumnWidth=22,this.handleMenuListClick=function(event){var menuItems=["sortBy","toggleVisibility"],currentMenuItemsIndex=menuItems.indexOf(event.target.id);if(currentMenuItemsIndex>-1){var inactiveMenuItem=_this3.hostElement.shadowRoot.querySelector("#"+menuItems[1-currentMenuItemsIndex]+"List");inactiveMenuItem&&inactiveMenuItem.setAttribute("opened","false")}},this.onDividerMove=this.onDividerMove.bind(this),this.onDividerUp=this.onDividerUp.bind(this),this.applyResponsiveClasses=this.applyResponsiveClasses.bind(this),this.updateColumnStretching=this.updateColumnStretching.bind(this)}return function _createClass2(Constructor,protoProps,staticProps){return protoProps&&__defineProperties(Constructor.prototype,protoProps),staticProps&&__defineProperties(Constructor,staticProps),Constructor}(DataGrid,[{key:"componentWillLoad",value:function componentWillLoad(){this.fieldsHandler(),this.rowsHandler()}},{key:"componentWillUpdate",value:function componentWillUpdate(){}},{key:"componentDidRender",value:function componentDidRender(){var _this4=this;this.needsAutoWidthParse&&this.calculateAutoWidths(),setTimeout((function(){_this4.needsColumnResize&&_this4.updateColumnStretching()}))}},{key:"componentDidLoad",value:function componentDidLoad(){this.addResizeObserver()}},{key:"componentDidUpdate",value:function componentDidUpdate(){}},{key:"disconnectedCallback",value:function disconnectedCallback(){this.removeResizeObserver()}},{key:"fieldsHandler",value:function fieldsHandler(){this.parseFields(),this.checkForMobileTitle(),this.checkForSortableFields(),this.dataNeedsCheck=!0}},{key:"rowsHandler",value:function rowsHandler(){this.paginationStart>this.rows.length&&(this.paginationStart=this.rows.length-this.rows.length%this.pageSize),this.parseRows(),this.setInitialRowProps(),this.resetSortingToggle(),this.dataNeedsCheck=!0,this.needsAutoWidthParse=!0,this.needsColumnResize=!0,this.rows.length<=this.paginationStart&&this.paginationStart-this.pageSize>-1&&(this.paginationStart=this.paginationStart-this.pageSize)}},{key:"parseFields",value:function parseFields(){this.fields&&"string"==typeof this.fields&&(this.fields=JSON.parse(this.fields))}},{key:"parseRows",value:function parseRows(){this.rows&&"string"==typeof this.rows&&(this.rows=JSON.parse(this.rows))}},{key:"setInitialRowProps",value:function setInitialRowProps(){this.rows&&this.rows.length&&(this.rows.forEach((function(row,i){row.initialIndex=i,row.selected=!1})),this.isPagination=this.pageSize<=this.rows.length-1)}},{key:"checkHasData",value:function checkHasData(){if(!this.fields)return!1;for(var i=0;i<this.fields.length;i++)if(this.fields[i].type||(this.fields[i].type="text"),!CELL_TYPES[this.fields[i].type])return console.warn('Unrecognised field type: "'+this.fields[i].type+'"'),!1;if(!this.rows||!this.rows.length)return!1;for(var _i=0;_i<this.rows.length;_i++)if(this.rows[_i].length!==this.fields.length)return console.warn("Unable to render "+(this.heading&&'"'+this.heading+'" ')+"table: row data length not equal to supplied fields."),!1;return!0}},{key:"checkForMobileTitle",value:function checkForMobileTitle(){var _this5=this;this.mobileTitleIndex=-1,this.fields&&this.fields.every((function(_ref24,i){return!_ref24.mobileTitle||(_this5.mobileTitleIndex=i,!1)}))}},{key:"checkForSortableFields",value:function checkForSortableFields(){var _this6=this;this.isSortable=!1,this.fields&&this.fields.forEach((function(_ref25){_ref25.sortable&&(_this6.isSortable=!0)}))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_46__.a)(name,!this.isMobile&&name+"--desktop",this.isMobile&&name+"--mobile",this.shadeAlternate&&name+"--shade-alternate",this.freezeHeader&&name+"--freeze-header",this.hideBorder&&name+"--hide-border",this.hideMenu&&name+"--hide-menu")}},{key:"polyfillMousePosition",value:function polyfillMousePosition(e){e.changedTouches&&e.changedTouches.length&&(e.x=e.changedTouches[0].pageX,e.y=e.changedTouches[0].pageY),void 0===e.x&&(e.x=e.clientX,e.y=e.clientY)}},{key:"getDefaultLongestContent",value:function getDefaultLongestContent(_ref26){var longestContent,rows=_ref26.rows,columnIndex=_ref26.columnIndex,maxLength=0;return rows.forEach((function(row){var length=row[columnIndex].toString().length;length>maxLength&&(longestContent=row[columnIndex],maxLength=length)})),longestContent}},{key:"toggleSelectAll",value:function toggleSelectAll(){var _this7=this;this.elToggleSelectAll&&(this.rows.forEach((function(row){return row.selected=_this7.elToggleSelectAll.checked})),this.updateReadableSelection(),this.forceRender++)}},{key:"toggleRowSelect",value:function toggleRowSelect(_ref27,rowIndex){var target=_ref27.target;this.rows[rowIndex].selected=target.checked,this.updateReadableSelection(),this.forceRender++}},{key:"updateReadableSelection",value:function updateReadableSelection(){var _this8=this;this.selection.length=0,this.rows.forEach((function(row){return row.selected&&_this8.selection.push(row)})),this.hostElement.shadowRoot.querySelector(".thead__cell--selection scale-checkbox").checked=!!this.selection.length}},{key:"toggleTableSorting",value:function toggleTableSorting(sortDirection,columnIndex,type){this.activeSortingIndex>-1&&this.activeSortingIndex!==columnIndex&&(this.fields[this.activeSortingIndex].sortDirection="none"),this.activeSortingIndex=columnIndex;var newSortDirection="none"===sortDirection?"ascending":"ascending"===sortDirection?"descending":"none";this.fields[columnIndex].sortDirection=newSortDirection,this.sortTable(newSortDirection,type,columnIndex)}},{key:"sortTable",value:function sortTable(sortDirection,type,columnIndex){var format=this.fields[columnIndex].format;if("none"===sortDirection)this.rows.sort((function(a,b){return a.initialIndex-b.initialIndex}));else if("date"===type&&format)this.rows.sort((function(a,b){var getDateObject=function getDateObject(dateString){var parsed=function parse(dirtyDateString,dirtyFormatString,dirtyReferenceDate,options){var _ref,_options$locale,_ref2,_ref3,_ref4,_options$firstWeekCon,_options$locale2,_options$locale2$opti,_defaultOptions$local,_defaultOptions$local2,_ref5,_ref6,_ref7,_options$weekStartsOn,_options$locale3,_options$locale3$opti,_defaultOptions$local3,_defaultOptions$local4;Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.h)(3,arguments);var dateString=String(dirtyDateString),formatString=String(dirtyFormatString),defaultOptions=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.f)(),locale$1=null!==(_ref=null!==(_options$locale=null==options?void 0:options.locale)&&void 0!==_options$locale?_options$locale:defaultOptions.locale)&&void 0!==_ref?_ref:_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.g;if(!locale$1.match)throw new RangeError("locale must contain match property");var firstWeekContainsDate=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.i)(null!==(_ref2=null!==(_ref3=null!==(_ref4=null!==(_options$firstWeekCon=null==options?void 0:options.firstWeekContainsDate)&&void 0!==_options$firstWeekCon?_options$firstWeekCon:null==options||null===(_options$locale2=options.locale)||void 0===_options$locale2||null===(_options$locale2$opti=_options$locale2.options)||void 0===_options$locale2$opti?void 0:_options$locale2$opti.firstWeekContainsDate)&&void 0!==_ref4?_ref4:defaultOptions.firstWeekContainsDate)&&void 0!==_ref3?_ref3:null===(_defaultOptions$local=defaultOptions.locale)||void 0===_defaultOptions$local||null===(_defaultOptions$local2=_defaultOptions$local.options)||void 0===_defaultOptions$local2?void 0:_defaultOptions$local2.firstWeekContainsDate)&&void 0!==_ref2?_ref2:1);if(!(firstWeekContainsDate>=1&&firstWeekContainsDate<=7))throw new RangeError("firstWeekContainsDate must be between 1 and 7 inclusively");var weekStartsOn=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.i)(null!==(_ref5=null!==(_ref6=null!==(_ref7=null!==(_options$weekStartsOn=null==options?void 0:options.weekStartsOn)&&void 0!==_options$weekStartsOn?_options$weekStartsOn:null==options||null===(_options$locale3=options.locale)||void 0===_options$locale3||null===(_options$locale3$opti=_options$locale3.options)||void 0===_options$locale3$opti?void 0:_options$locale3$opti.weekStartsOn)&&void 0!==_ref7?_ref7:defaultOptions.weekStartsOn)&&void 0!==_ref6?_ref6:null===(_defaultOptions$local3=defaultOptions.locale)||void 0===_defaultOptions$local3||null===(_defaultOptions$local4=_defaultOptions$local3.options)||void 0===_defaultOptions$local4?void 0:_defaultOptions$local4.weekStartsOn)&&void 0!==_ref5?_ref5:0);if(!(weekStartsOn>=0&&weekStartsOn<=6))throw new RangeError("weekStartsOn must be between 0 and 6 inclusively");if(""===formatString)return""===dateString?Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyReferenceDate):new Date(NaN);var _step,subFnOptions={firstWeekContainsDate:firstWeekContainsDate,weekStartsOn:weekStartsOn,locale:locale$1},setters=[new DateToSystemTimezoneSetter],tokens=formatString.match(longFormattingTokensRegExp).map((function(substring){var firstCharacter=substring[0];return firstCharacter in longFormatters?(0,longFormatters[firstCharacter])(substring,locale$1.formatLong):substring})).join("").match(formattingTokensRegExp),usedTokens=[],_iterator=_createForOfIteratorHelper(tokens);try{var _loop=function _loop(){var token=_step.value;null!=options&&options.useAdditionalWeekYearTokens||!isProtectedWeekYearToken(token)||throwProtectedError(token,formatString,dirtyDateString),null!=options&&options.useAdditionalDayOfYearTokens||!isProtectedDayOfYearToken(token)||throwProtectedError(token,formatString,dirtyDateString);var firstCharacter=token[0],parser=parsers[firstCharacter];if(parser){var incompatibleTokens=parser.incompatibleTokens;if(Array.isArray(incompatibleTokens)){var incompatibleToken=usedTokens.find((function(usedToken){return incompatibleTokens.includes(usedToken.token)||usedToken.token===firstCharacter}));if(incompatibleToken)throw new RangeError("The format string mustn't contain `".concat(incompatibleToken.fullToken,"` and `").concat(token,"` at the same time"))}else if("*"===parser.incompatibleTokens&&usedTokens.length>0)throw new RangeError("The format string mustn't contain `".concat(token,"` and any other token at the same time"));usedTokens.push({token:firstCharacter,fullToken:token});var parseResult=parser.run(dateString,token,locale$1.match,subFnOptions);if(!parseResult)return{v:new Date(NaN)};setters.push(parseResult.setter),dateString=parseResult.rest}else{if(firstCharacter.match(unescapedLatinCharacterRegExp))throw new RangeError("Format string contains an unescaped latin alphabet character `"+firstCharacter+"`");if("''"===token?token="'":"'"===firstCharacter&&(token=cleanEscapedString(token)),0!==dateString.indexOf(token))return{v:new Date(NaN)};dateString=dateString.slice(token.length)}};for(_iterator.s();!(_step=_iterator.n()).done;){var _ret=_loop();if("object"===Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.a)(_ret))return _ret.v}}catch(err){_iterator.e(err)}finally{_iterator.f()}if(dateString.length>0&&notWhitespaceRegExp.test(dateString))return new Date(NaN);var uniquePrioritySetters=setters.map((function(setter){return setter.priority})).sort((function(a,b){return b-a})).filter((function(priority,index,array){return array.indexOf(priority)===index})).map((function(priority){return setters.filter((function(setter){return setter.priority===priority})).sort((function(a,b){return b.subPriority-a.subPriority}))})).map((function(setterArray){return setterArray[0]})),date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.c)(dirtyReferenceDate);if(isNaN(date.getTime()))return new Date(NaN);var _step2,utcDate=subMilliseconds(date,Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.d)(date)),flags={},_iterator2=_createForOfIteratorHelper(uniquePrioritySetters);try{for(_iterator2.s();!(_step2=_iterator2.n()).done;){var setter=_step2.value;if(!setter.validate(utcDate,subFnOptions))return new Date(NaN);var result=setter.set(utcDate,flags,subFnOptions);Array.isArray(result)?(utcDate=result[0],Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_48__.e)(flags,result[1])):utcDate=result}}catch(err){_iterator2.e(err)}finally{_iterator2.f()}return utcDate}(dateString,format,new Date);return parsed},dateObjectA=getDateObject(a[columnIndex]),dateObjectB=getDateObject(b[columnIndex]);return"ascending"===sortDirection?dateObjectA.valueOf()-dateObjectB.valueOf():dateObjectB.valueOf()-dateObjectA.valueOf()}));else switch(CELL_TYPES[type]&&CELL_TYPES[type].defaults&&CELL_TYPES[type].defaults.sortBy||CELL_DEFAULTS.sortBy){case"text":case"date":"ascending"===sortDirection?this.rows.sort((function(a,b){var textA=a[columnIndex].toLowerCase(),textB=b[columnIndex].toLowerCase();return textA<textB?-1:textA>textB?1:0})):this.rows.sort((function(a,b){var textA=a[columnIndex].toLowerCase(),textB=b[columnIndex].toLowerCase();return textA>textB?-1:textA<textB?1:0}));break;case"number":"ascending"===sortDirection?this.rows.sort((function(a,b){return Number(a[columnIndex])-Number(b[columnIndex])})):this.rows.sort((function(a,b){return Number(b[columnIndex])-Number(a[columnIndex])}))}this.forceRender++,this.triggerSortEvent(sortDirection,type,columnIndex)}},{key:"resetSortingToggle",value:function resetSortingToggle(){this.activeSortingIndex>-1&&(this.fields[this.activeSortingIndex].sortDirection="none"),this.activeSortingIndex=-1}},{key:"onDividerDown",value:function onDividerDown(e){this.polyfillMousePosition(e),e.preventDefault(),this.activeDivider=e.target,e.target.downX=e.x,this.activeDivider.interactiveWidth=0,window.addEventListener("mousemove",this.onDividerMove),window.addEventListener("touchmove",this.onDividerMove),window.addEventListener("mouseup",this.onDividerUp),window.addEventListener("touchend",this.onDividerUp)}},{key:"onDividerMove",value:function onDividerMove(e){this.polyfillMousePosition(e);var _this$activeDivider$d=this.activeDivider.dataset,width=_this$activeDivider$d.width,min=_this$activeDivider$d.min,max=_this$activeDivider$d.max,diff=e.x-this.activeDivider.downX,newWidth=Math.min(Number(max),Math.max(Number(min),Number(width)+diff)),adjustedDiff=newWidth-Number(width);this.activeDivider.interactiveWidth=newWidth,this.activeDivider.style.transform="translateX("+adjustedDiff+"px)"}},{key:"onDividerUp",value:function onDividerUp(){var index=this.activeDivider.dataset.index;this.activeDivider.interactiveWidth&&(this.fields[Number(index)].width=this.activeDivider.interactiveWidth),this.activeDivider.style.transform="translateX(0px)",window.removeEventListener("mousemove",this.onDividerMove),window.removeEventListener("touchmove",this.onDividerMove),window.removeEventListener("mouseup",this.onDividerUp),window.removeEventListener("touchend",this.onDividerUp),this.needsColumnResize=!0,this.updateColumnStretching(),this.forceRender++}},{key:"toggleVisibilityMenu",value:function toggleVisibilityMenu(e){e.preventDefault();var visibilityToggle=this.hostElement.shadowRoot.querySelector(".visibility-toggle"),menu=visibilityToggle.children[1];"none"===visibilityToggle.style.display?(visibilityToggle.style.display="block",menu.style.transform="translate("+e.clientX+"px, "+e.clientY+"px)"):visibilityToggle.style.display="none"}},{key:"toggleColumnVisibility",value:function toggleColumnVisibility(value,columnIndex){this.fields[columnIndex].visible=value,this.forceRender++,this.needsColumnResize=!0,this.updateColumnStretching()}},{key:"addResizeObserver",value:function addResizeObserver(){resizeObserver||(resizeObserver=new ResizeObserver((function(entries){var _step3,_iterator3=_createForOfIteratorHelper2(entries);try{for(_iterator3.s();!(_step3=_iterator3.n()).done;){var entry=_step3.value;if(null===entry.target.offsetParent)return;entry.target.applyResponsiveClasses(entry),entry.target.updateColumnStretching()}}catch(err){_iterator3.e(err)}finally{_iterator3.f()}}))),this.elMmainContainer=this.hostElement.shadowRoot.querySelector("."+name),this.elMmainContainer.applyResponsiveClasses=this.applyResponsiveClasses,this.elMmainContainer.updateColumnStretching=this.updateColumnStretching,resizeObserver.observe(this.elMmainContainer)}},{key:"removeResizeObserver",value:function removeResizeObserver(){this.elMmainContainer&&resizeObserver.unobserve(this.elMmainContainer)}},{key:"applyResponsiveClasses",value:function applyResponsiveClasses(){var newIsMobile=this.elMmainContainer.offsetWidth<=500;this.isMobile!==newIsMobile&&this.forceRender++,this.isMobile=newIsMobile}},{key:"updateColumnStretching",value:function updateColumnStretching(){var _this9=this;if(!this.needsAutoWidthParse){var container=this.elMmainContainer,containerWidth=container.offsetWidth-2;if((this.lastContainerWidth!==containerWidth||this.needsColumnResize)&&(this.needsColumnResize=!1,this.lastContainerWidth=containerWidth,!(container.offsetWidth<=500))){var total,targetContentWidth=(total=0,total+=8,_this9.numbered&&(total+=_this9.numberColumnWidth+32),_this9.selectable&&(total+=_this9.selectionColumnWidth+32,_this9.numbered&&(total-=16)),_this9.fields.forEach((function(_ref28){var _ref28$visible=_ref28.visible,visible=void 0===_ref28$visible||_ref28$visible,width=_ref28.width;visible&&(total+=width+32)})),total);this.contentWidth=Math.max(targetContentWidth,containerWidth);var diff=containerWidth-targetContentWidth;if(diff<=0)this.fields.forEach((function(field){return field.stretchWidth=0}));else{var totalSetWeight=0,unsetColsCount=0;this.fields.forEach((function(_ref29){var _ref29$visible=_ref29.visible,visible=void 0===_ref29$visible||_ref29$visible,stretchWeight=_ref29.stretchWeight;visible&&("number"==typeof stretchWeight?totalSetWeight+=stretchWeight:unsetColsCount++)}));var remainderWeight=Math.max(0,1-totalSetWeight);totalSetWeight=Math.max(1,totalSetWeight),this.fields.forEach((function(field){var _field$visible=field.visible,visible=void 0===_field$visible||_field$visible,stretchWeight=field.stretchWeight;if(visible){var weight=0;"number"==typeof stretchWeight?weight=stretchWeight/totalSetWeight:remainderWeight>0&&(weight=remainderWeight/unsetColsCount),field.stretchWidth=diff*weight}}))}this.forceRender++}}}},{key:"calculateAutoWidths",value:function calculateAutoWidths(){var _this10=this,isVisible=!1;this.hostElement.shadowRoot.querySelectorAll("."+name+"__auto-width-check td").forEach((function(cell){isVisible||null===cell.offsetParent||(isVisible=!0),isVisible&&(_this10.fields[cell.dataset.columnindex].width=cell.clientWidth)})),isVisible&&setTimeout((function(){_this10.needsAutoWidthParse=!1,_this10.forceRender++}))}},{key:"triggerSortEvent",value:function triggerSortEvent(sortDirection,type,columnIndex){var data={rows:this.rows,type:type,sortDirection:sortDirection,columnIndex:columnIndex};Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_47__.d)(this,"scaleSort",data)}},{key:"triggerEditEvent",value:function triggerEditEvent(value,rowIndex,columnIndex){var data={rows:this.rows,rowIndex:rowIndex,columnIndex:columnIndex,value:value};Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_47__.d)(this,"scaleEdit",data),this.forceRender++}},{key:"onTableScroll",value:function onTableScroll(){if(this.freezeHeader&&!this.hideHeader){var scrollY=this.elScrollContainer.scrollTop;this.elTableHead.style.transform="translateY("+scrollY+"px)"}}},{key:"renderSettingsMenu",value:function renderSettingsMenu(){var _a,_b,_c,_this11=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-menu-flyout",{class:name+"__settings-menu"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-button",{slot:"trigger",variant:"secondary","icon-only":!0,"data-sortable":this.isSortable},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-service-settings",{accessibilityTitle:"Table options"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-menu-flyout-list",null,this.isSortable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-menu-flyout-item",{id:"sortBy",onClick:this.handleMenuListClick},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-action-sort",{slot:"prefix"}),(null===(_a=this.localization)||void 0===_a?void 0:_a.sortBy)||"Sort By",Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-menu-flyout-list",{slot:"sublist",id:"sortByList"},this.fields.map((function(_ref30,columnIndex){var label=_ref30.label,type=_ref30.type,sortable=_ref30.sortable,_ref30$sortDirection=_ref30.sortDirection,sortDirection=void 0===_ref30$sortDirection?"none":_ref30$sortDirection;return sortable?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-menu-flyout-item",{"onScale-select":function onScaleSelect(){return _this11.toggleTableSorting(sortDirection,columnIndex,type)}},"ascending"===sortDirection&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-navigation-collapse-up",{size:16,slot:"prefix"}),"descending"===sortDirection&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-navigation-collapse-down",{size:16,slot:"prefix"}),"none"===sortDirection&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-navigation-collapse-up",{size:16,slot:"prefix",style:{opacity:"0"}}),label||type):""})))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-menu-flyout-item",{id:"toggleVisibility",onClick:this.handleMenuListClick},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-action-hide-password",{slot:"prefix"}),(null===(_b=this.localization)||void 0===_b?void 0:_b.toggle)||"Toggle Visibility",Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-menu-flyout-list",{slot:"sublist","close-on-select":"false",id:"toggleVisibilityList"},this.fields.map((function(_ref31,columnIndex){var label=_ref31.label,type=_ref31.type,_ref31$visible=_ref31.visible,visible=void 0===_ref31$visible?void 0!==CELL_TYPES[type].defaults.visible?CELL_TYPES[type].defaults.visible:CELL_DEFAULTS.visible:_ref31$visible;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-menu-flyout-item",{checkable:"checkbox",checked:!!visible,"onScale-select":function onScaleSelect(){return _this11.toggleColumnVisibility(!visible,columnIndex)}},label||type)})))),this.selectable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-menu-flyout-item",{"onScale-select":function onScaleSelect(){_this11.elToggleSelectAll.checked=!_this11.elToggleSelectAll.checked,_this11.toggleSelectAll()}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon",{slot:"prefix",path:"M20.9328 10.6668C20.5132 10.6668 20.1731 11.0069 20.1731 11.4265V20.3269H1.5194V1.67309H16.5049C16.9245 1.67309 17.2646 1.33292 17.2646 0.913386C17.2646 0.49385 16.9245 0.153687 16.5049 0.153687H0.759699C0.340163 0.153687 0 0.49385 0 0.913386V21.0866C0 21.5062 0.340163 21.8463 0.759699 21.8463H20.9328C21.3523 21.8463 21.6925 21.5062 21.6925 21.0866V11.4265C21.6925 11.0069 21.3524 10.6668 20.9328 10.6668ZM23.7774 0.653387C23.4807 0.356739 22.9997 0.356739 22.703 0.653387L10.3293 13.0272L7.25501 9.9529C6.9583 9.65625 6.47732 9.65625 6.18061 9.9529C5.88396 10.2496 5.88396 10.7306 6.18061 11.0273L9.7921 14.6388C9.94045 14.7871 10.1349 14.8613 10.3293 14.8613C10.5237 14.8613 10.7181 14.7871 10.8665 14.6388L23.7774 1.72778C24.0741 1.43108 24.0741 0.950095 23.7774 0.653387Z"}),(null===(_c=this.localization)||void 0===_c?void 0:_c.select)||"Select / Deselect All"),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("slot",{name:"menu"})))}},{key:"renderTable",value:function renderTable(){var _this12=this;return this.needsAutoWidthParse?this.renderAutoWidthCheck():Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{ref:function ref(el){return _this12.elScrollContainer=el},class:name+"__scroll-container",style:{height:this.height||"auto"},onScroll:function onScroll(){return _this12.onTableScroll()}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("table",{class:name+"__table"},this.renderTableHead(),this.renderTableBody()))}},{key:"renderAutoWidthCheck",value:function renderAutoWidthCheck(){var _this13=this;this.numberColumnWidth=9*this.rows.length.toString().length;var autoCols=[];return this.fields.forEach((function(_ref32,columnIndex){var type=_ref32.type,_ref32$width=_ref32.width;"auto"===(void 0===_ref32$width?CELL_TYPES[type].defaults.width||CELL_DEFAULTS.width:_ref32$width)&&autoCols.push(columnIndex)})),autoCols.length?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("table",{class:name+"__auto-width-check "+name+"__table"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("tr",{class:"tbody__row"},autoCols.map((function(columnIndex){var field=_this13.fields[columnIndex],type=field.type,_field$cell=field.cell,cell=void 0===_field$cell?CELL_TYPES[type]:_field$cell,content=(cell.getLongestContent||_this13.getDefaultLongestContent)({rows:_this13.rows,columnIndex:columnIndex,field:field});return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("td",{class:"tbody__cell",style:{width:"auto"},"data-columnindex":columnIndex},cell.render({field:field,content:content,component:_this13,isAutoWidthCheck:!0}))})))):(this.needsAutoWidthParse=!1,this.renderTable())}},{key:"renderTableHead",value:function renderTableHead(){var _this14=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("thead",{ref:function ref(el){return _this14.elTableHead=el},class:"thead "+(this.hideHeader?"sr-only":"")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("tr",{class:"thead__row"},this.numbered&&this.renderTableHeadNumberedCell(),this.selectable&&this.renderTableHeadSelectableCell(),this.fields.map((function(_ref33,columnIndex){var type=_ref33.type,_ref33$label=_ref33.label,label=void 0===_ref33$label?"":_ref33$label,_ref33$visible=_ref33.visible,visible=void 0===_ref33$visible?void 0!==CELL_TYPES[type].defaults.visible?CELL_TYPES[type].defaults.visible:CELL_DEFAULTS.visible:_ref33$visible,sortable=_ref33.sortable,_ref33$sortDirection=_ref33.sortDirection,sortDirection=void 0===_ref33$sortDirection?"none":_ref33$sortDirection,_ref33$resizable=_ref33.resizable,resizable=void 0===_ref33$resizable?void 0!==CELL_TYPES[type].defaults.resizable?CELL_TYPES[type].defaults.resizable:CELL_DEFAULTS.resizable:_ref33$resizable,_ref33$width=_ref33.width,width=void 0===_ref33$width?CELL_TYPES[type].defaults.width||CELL_DEFAULTS.width:_ref33$width,_ref33$minWidth=_ref33.minWidth,minWidth=void 0===_ref33$minWidth?CELL_TYPES[type].defaults.minWidth||CELL_DEFAULTS.minWidth:_ref33$minWidth,_ref33$maxWidth=_ref33.maxWidth,maxWidth=void 0===_ref33$maxWidth?CELL_TYPES[type].defaults.maxWidth||CELL_DEFAULTS.maxWidth:_ref33$maxWidth,_ref33$textAlign=_ref33.textAlign,textAlign=void 0===_ref33$textAlign?CELL_TYPES[type].defaults.textAlign||CELL_DEFAULTS.textAlign:_ref33$textAlign,_ref33$stretchWidth=_ref33.stretchWidth;if(visible){var props={class:"thead__cell",style:{width:"calc("+width+"px + "+(void 0===_ref33$stretchWidth?0:_ref33$stretchWidth)+"px)","justify-content":textAlign},"data-type":type};return sortable&&(props["aria-sort"]=sortDirection),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("th",Object.assign({title:sortable?_this14.sortableColumnTitle:void 0},props,sortable?{onKeyDown:function onKeyDown(event){["Enter"," "].includes(event.key)&&_this14.toggleTableSorting(sortDirection,columnIndex,type)},onClick:function onClick(e){e.target.matches(".thead__divider")||_this14.toggleTableSorting(sortDirection,columnIndex,type)},tabindex:0,class:props.class+" thead-sortable"}:{}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:"thead__title"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("span",{class:"thead__text"},sortable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-content-sort-indicator-up",{size:16,class:"thead__arrow-top"}),sortable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-icon-content-sort-indicator-down",{size:16,class:"thead__arrow-bottom"}),label)),resizable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:"thead__divider","data-index":columnIndex,"data-width":width,"data-min":minWidth,"data-max":maxWidth,onMouseDown:function onMouseDown(e){return _this14.onDividerDown(e)},onTouchStart:function onTouchStart(e){return _this14.onDividerDown(e)},"aria-hidden":"true"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:"thead__divider-line"})))}}))))}},{key:"renderTableHeadNumberedCell",value:function renderTableHeadNumberedCell(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("th",{class:"thead__cell  thead__cell--numbered",style:{width:this.numberColumnWidth+"px"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("span",{class:"scl-body"},"#"))}},{key:"renderTableHeadSelectableCell",value:function renderTableHeadSelectableCell(){var _this15=this,style={width:this.selectionColumnWidth+"px"};return this.numbered&&(style.paddingLeft="0px"),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("th",{class:"thead__cell thead__cell--selection",style:style,title:"Select"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-checkbox",{ref:function ref(el){return _this15.elToggleSelectAll=el},onScaleChange:function onScaleChange(){return _this15.toggleSelectAll()},hideLabel:!0,"aria-label":"Select"}))}},{key:"renderTableBody",value:function renderTableBody(){var _this16=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("tbody",{class:"tbody"},function(){for(var rows=[],total=_this16.rows.length,start=_this16.paginationStart,end=Math.min(total,_this16.paginationStart+_this16.pageSize),_loop2=function _loop2(rowIndex){var rowData=_this16.rows[rowIndex],rowNestedContent=[],isNestedExpanded=!1;rows.push(Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("tr",{class:"tbody__row"},_this16.renderMobileTitle(rowData),_this16.numbered&&_this16.renderTableBodyNumberedCell(rowIndex),_this16.selectable&&_this16.renderTableBodySelectableCell(rowIndex),rowData.map((function(cellContent,columnIndex){var field=_this16.fields[columnIndex];if(void 0!==field.visible?field.visible:void 0!==CELL_TYPES[field.type].defaults.visible?CELL_TYPES[field.type].defaults.visible:CELL_DEFAULTS.visible){if("html"===field.type){if(!cellContent)return _this16.renderTableCell(field,null,rowIndex,columnIndex);cellContent.isExpanded&&(isNestedExpanded=!0),rowNestedContent.push({content:cellContent})}return _this16.renderTableCell(field,cellContent,rowIndex,columnIndex)}})))),rowNestedContent.length&&rows.push(Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:"tbody__nested",style:{width:_this16.contentWidth+"px",display:isNestedExpanded?"block":"none"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("td",{class:"tbody__nested-cell"},rowNestedContent.map((function(_ref34){var content=_ref34.content;return content&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{ref:function ref(el){if(el){for(var child=el.lastElementChild;child;)el.removeChild(child),child=el.lastElementChild;el.appendChild(content)}}})})))))},rowIndex=start;rowIndex<end;rowIndex++)_loop2(rowIndex);return rows}())}},{key:"renderMobileTitle",value:function renderMobileTitle(rowData){return-1===this.mobileTitleIndex?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("h5",{class:"tbody__mobile-title scl-h5"}," "):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("h5",{class:"tbody__mobile-title scl-h5"},rowData[this.mobileTitleIndex])}},{key:"renderTableBodyNumberedCell",value:function renderTableBodyNumberedCell(rowIndex){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("td",{class:"tbody__cell tbody__cell--numbered",style:{width:this.numberColumnWidth+"px"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("p",{class:"scl-body"},rowIndex+1))}},{key:"renderTableBodySelectableCell",value:function renderTableBodySelectableCell(rowIndex){var _this17=this,style={width:this.selectionColumnWidth+"px"};return this.numbered&&(style.marginLeft="0px",style.paddingLeft="0px"),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("td",{title:this.rows[rowIndex][0],class:"tbody__cell tbody__cell--selection",style:style},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-checkbox",{checked:this.rows[rowIndex].selected,onScaleChange:function onScaleChange(e){return _this17.toggleRowSelect(e,rowIndex)},hideLabel:!0}))}},{key:"renderTableCell",value:function renderTableCell(field,content,rowIndex,columnIndex){var cell=CELL_TYPES[field.type],label=field.label,_field$width=field.width,width=void 0===_field$width?cell.defaults.width||CELL_DEFAULTS.width:_field$width,_field$stretchWidth=field.stretchWidth,stretchWidth=void 0===_field$stretchWidth?0:_field$stretchWidth,mobileTitle=field.mobileTitle;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("td",{class:"tbody__cell"+(mobileTitle?" tbody__cell--used-as-mobile-title":""),style:{width:"calc("+width+"px + "+stretchWidth+"px)"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:"tbody__mobile-label"},label),cell.render({field:field,content:content,component:this,rowIndex:rowIndex,columnIndex:columnIndex}))}},{key:"renderTableInfo",value:function renderTableInfo(){var _this18=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:"info"},this.selectable&&!!this.selection.length&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:"info__selection"},this.selection.length+" row"+(this.selection.length>1?"s":"")+" selected"),this.isPagination&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("scale-pagination",{class:"info__pagination",hideBorder:!this.isMobile,startElement:this.paginationStart,totalElements:this.rows.length,pageSize:this.pageSize,onScalePagination:function onScalePagination(_ref35){var detail=_ref35.detail;return _this18.paginationStart=detail.startElement}}))}},{key:"render",value:function render(){return this.dataNeedsCheck&&(this.hasData=this.checkHasData()),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.c,{style:{display:this.visible?"block":"none"}},this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",{class:name+"__title-block"},this.heading&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("h4",{class:name+"__heading scl-h5"},this.heading),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("div",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.g)("slot",null)),this.hasData&&this.renderSettingsMenu()),this.hasData&&this.renderTable(),this.hasData&&!this.hideInfo&&!this.needsAutoWidthParse&&(this.selectable||this.isPagination)&&this.renderTableInfo()))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_45__.f)(this)}}],[{key:"watchers",get:function get(){return{fields:["fieldsHandler"],rows:["rowsHandler"]}}}]),DataGrid}();DataGrid.style=".scl-body{margin:0;font:var(--telekom-text-style-body)}.scl-label{margin:0;font:var(--telekom-text-style-small)}.scl-h1{margin:0;font:var(--telekom-text-style-heading-1)}.scl-h2{margin:0;font:var(--telekom-text-style-heading-2)}.scl-h3{margin:0;font:var(--telekom-text-style-heading-3)}.scl-h4{margin:0;font:var(--telekom-text-style-heading-4)}.scl-h5{margin:0;font:var(--telekom-text-style-heading-5)}.scl-h6{margin:0;font:var(--telekom-text-style-heading-6)}:host{font-family:var(--telekom-typography-font-family-sans);font-size:var(--telekom-typography-font-size-body);font-weight:var(--telekom-typography-font-weight-regular);line-height:var(--telekom-typography-line-spacing-standard);color:var(--telekom-color-text-and-icon-standard)}.data-grid input,.data-grid select{letter-spacing:inherit;font-weight:inherit;font-family:inherit;line-height:inherit}.data-grid{position:relative;display:block;background:var(--telekom-color-ui-state-fill-standard);border-radius:var(--telekom-radius-large);border:1px solid var(--telekom-color-ui-faint);overflow:hidden}.data-grid--hide-border{border:none}.data-grid__auto-width-check{opacity:0}.data-grid__title-block{display:flex;align-items:center;justify-content:flex-end;padding-right:var(--telekom-spacing-composition-space-06);padding-left:var(--telekom-spacing-composition-space-08)}.data-grid__heading{flex-grow:1}.data-grid__title-block ::slotted(*){margin-left:var(--telekom-spacing-composition-space-04)}.data-grid__settings-menu{margin-left:var(--telekom-spacing-composition-space-04)}.data-grid__scroll-container{overflow:auto;overflow-x:overlay;overflow-y:overlay;ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-gutter:stable}.data-grid__table{border-spacing:0;border-collapse:collapse;overflow:hidden}.data-grid--hide-menu .data-grid__settings-menu{display:none}.data-grid:not(.data-grid--hide-menu) .data-grid__title-block{min-height:72px}.data-grid--hide-menu .data-grid__title-block{padding-right:var(--telekom-spacing-composition-space-06)}.thead{display:block;white-space:nowrap;border-bottom:1px solid var(--telekom-color-ui-faint);position:relative;background:var(--telekom-color-ui-state-fill-standard);z-index:1}.data-grid--freeze-header .thead{z-index:30;background-color:var(--telekom-color-background-canvas)}.thead-sortable{cursor:pointer}.thead-sortable:focus{box-shadow:inset 0 0 0 var(--telekom-spacing-composition-space-02)\n    var(--telekom-color-functional-focus-standard)}.thead__cell{display:inline-flex;align-items:center;height:var(--telekom-spacing-composition-space-10);text-align:left;user-select:none;position:relative;padding:0 var(--telekom-spacing-composition-space-06);color:var(--telekom-color-text-and-icon-additional)}.thead__cell--numbered{text-align:right;justify-content:flex-end}.thead__cell--selection{justify-content:center;text-align:center}.thead__cell--selection xds-checkbox::part(container){justify-content:center}.thead__title{color:var(--telekom-color-text-and-icon-standard)}.thead__text{font-size:var(--telekom-typography-font-size-small);line-height:var(--telekom-typography-line-spacing-standard);position:relative}.thead__arrow-top,.thead__arrow-bottom{position:absolute;display:none !important;top:-2px;left:-16px}.thead__sort-prompt{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;background:none;border:0;opacity:1;cursor:pointer}.thead__divider{position:absolute;right:calc(-1 * var(--telekom-spacing-composition-space-04));bottom:0px;height:100%;padding:19px var(--telekom-spacing-composition-space-04) 0px;box-sizing:border-box;cursor:col-resize;z-index:1}.thead__divider-line{pointer-events:none;height:100%;width:1px;background:var(--telekom-color-ui-faint)}.thead__cell:first-child{padding-left:var(--telekom-spacing-composition-space-08)}.thead__cell:focus{outline:none}.thead__cell[aria-sort='ascending'] .thead__arrow-top{display:inline-flex !important}.thead__cell[aria-sort='descending'] .thead__arrow-bottom{display:inline-flex !important}.thead__cell[aria-sort]:hover{color:var(--telekom-color-text-and-icon-primary-hovered)}.thead__cell[aria-sort='none']:hover .thead__arrow-top,.thead__cell[aria-sort='none']:hover .thead__arrow-bottom{display:none !important}.thead__cell[aria-sort='ascending']:hover .thead__arrow-top{color:var(--telekom-color-text-and-icon-primary-hovered)}.thead__cell[aria-sort='descending']:hover .thead__arrow-bottom{color:var(--telekom-color-text-and-icon-primary-hovered)}.tbody{display:block}.tbody__row{display:block;white-space:nowrap}.tbody__mobile-title{display:none}.tbody__mobile-label{display:none}.tbody__cell{display:inline-block;margin:8px;padding:8px;overflow:hidden;}.tbody__cell--numbered{text-align:right}.tbody__cell--selection{justify-content:center;text-align:center}.tbody__cell--selection scale-checkbox::part(container),.tbody__cell--selection scale-checkbox [part='container']{justify-content:center}.tbody__cell scale-checkbox{width:auto}.tbody__nested{white-space:nowrap;padding:0px;margin:0px}.tbody__nested-cell{display:block;padding:var(--telekom-spacing-composition-space-06);margin:0px}.tbody__cell:first-of-type{margin-left:var(--telekom-spacing-composition-space-06);}.tbody__nested-cell:first-child{margin-left:0px}.data-grid--shade-alternate .tbody__row:nth-of-type(even),.data-grid--shade-alternate .tbody__nested:nth-of-type(even){background:var(--telekom-color-background-surface-subtle)}.data-grid__auto-width-check .tbody__cell{padding:0}.tbody__tag-list{list-style:none;padding:0;margin:0}.tbody__tag-list li{display:inline-block;margin-right:8px}.tbody__tag-list li:last-child{margin-right:0}.data-grid input[type='checkbox']{display:block;height:14px;margin:5px 4px}.tbody__text-cell{display:flex;align-items:center}.tbody__text-cell-prefix{display:inline-flex;align-items:center;margin-right:0.5em}.tbody__text-cell-suffix{display:inline-flex;align-items:center;margin-left:0.5em}.tbody__cell p{overflow:hidden;text-overflow:ellipsis}.tbody__cell scale-link{overflow:hidden;text-overflow:ellipsis}.tbody__bar-cell{display:inline-flex;width:100%}.tbody__cell scale-progress-bar{flex-grow:1}.tbody__actions scale-button{margin-right:var(--telekom-spacing-composition-space-04)}.data-grid-progress-bar::part(progress-bar){min-width:50px;max-width:200px}.data-grid-progress-bar::part(status){padding-top:0}.info{height:44px;position:relative;border-top:var(--telekom-line-weight-standard) solid\n    var(--telekom-color-ui-subtle);display:flex;justify-content:center}.info__selection{position:absolute;bottom:0;line-height:54px;left:var(--telekom-spacing-composition-space-08)}.data-grid--hide-border:not(.data-grid--mobile) .info__pagination{border-bottom:1px solid var(--telekom-color-ui-subtle);border-right:1px solid var(--telekom-color-ui-subtle)}.data-grid--mobile{border:none;background:none}.data-grid--mobile .data-grid__title-block{padding-left:0;padding-right:0}.data-grid--hide-menu.data-grid--mobile .data-grid__title-block{padding-right:0}.data-grid--mobile .data-grid__settings-menu{right:0}.data-grid--mobile .data-grid__scroll-container{height:auto !important}.data-grid--mobile .data-grid__table{display:block;height:auto !important}.data-grid--mobile .thead{display:none}.data-grid--mobile .tbody{display:block}.data-grid--mobile .tbody__row{display:block;position:relative;white-space:initial;margin:0 0 var(--telekom-spacing-composition-space-04);padding:var(--telekom-spacing-composition-space-08);border-radius:var(--telekom-radius-standard);background:var(--telekom-color-background-surface);border:1px solid var(--telekom-color-ui-faint)}.data-grid--mobile .tbody__row:hover{background:var(--telekom-color-background-surface)}.data-grid--mobile .tbody__mobile-title{display:block;margin-bottom:var(--telekom-spacing-composition-space-04)}.data-grid--mobile .tbody__mobile-label{display:block}.data-grid--mobile .tbody__cell{display:flex;align-items:center;width:auto !important;padding:5px 0;margin:0;min-height:var(--telekom-spacing-composition-space-08);line-height:var(--telekom-spacing-composition-space-08);overflow:auto;overflow-x:hidden}.data-grid--mobile .tbody__cell--used-as-mobile-title{display:none}.data-grid--mobile .tbody__mobile-label{display:block;width:100px;flex-shrink:0;color:var(--telekom-color-text-and-icon-additional);font-size:var(--telekom-typography-font-size-small);font-weight:var(--telekom-typography-font-weight-medium)}.data-grid--mobile .tbody__cell:first-child{margin-left:0px}.data-grid--mobile .tbody__cell--selection{position:absolute;top:19px;right:12px}.data-grid--mobile .tbody__cell--numbered{position:absolute;top:19px;right:56px}.data-grid--mobile .tbody__cell scale-text-field,.data-grid--mobile .tbody__cell scale-dropdown{width:100%}.data-grid--mobile .tbody__nested{width:auto !important}.data-grid--mobile .tbody__nested-cell{padding:0;margin-bottom:var(--telekom-spacing-composition-space-04)}.data-grid--mobile.data-grid--shade-alternate .tbody__row:nth-of-type(even){background:var(--telekom-color-background-surface)}.data-grid--mobile .info{height:auto;border-top:none;text-align:center}.data-grid--mobile .info__selection{position:relative;left:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
+//# sourceMappingURL=4.25209701.iframe.bundle.js.map
\ No newline at end of file
diff --git a/4.433b77b8.iframe.bundle.js.LICENSE.txt b/4.25209701.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 4.433b77b8.iframe.bundle.js.LICENSE.txt
rename to 4.25209701.iframe.bundle.js.LICENSE.txt
diff --git a/4.25209701.iframe.bundle.js.map b/4.25209701.iframe.bundle.js.map
new file mode 100644
index 0000000000..292d52b0ea
--- /dev/null
+++ b/4.25209701.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"4.25209701.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/4.433b77b8.iframe.bundle.js b/4.433b77b8.iframe.bundle.js
deleted file mode 100644
index 3a223a7651..0000000000
--- a/4.433b77b8.iframe.bundle.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/*! For license information please see 4.433b77b8.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{"../../node_modules/core-js/internals/date-to-primitive.js":function(module,exports,__webpack_require__){"use strict";var anObject=__webpack_require__("../../node_modules/core-js/internals/an-object.js"),toPrimitive=__webpack_require__("../../node_modules/core-js/internals/to-primitive.js");module.exports=function(hint){if("string"!==hint&&"number"!==hint&&"default"!==hint)throw TypeError("Incorrect hint");return toPrimitive(anObject(this),"number"!==hint)}},"../../node_modules/core-js/internals/number-parse-int.js":function(module,exports,__webpack_require__){var global=__webpack_require__("../../node_modules/core-js/internals/global.js"),trim=__webpack_require__("../../node_modules/core-js/internals/string-trim.js").trim,whitespaces=__webpack_require__("../../node_modules/core-js/internals/whitespaces.js"),$parseInt=global.parseInt,hex=/^[+-]?0[Xx]/,FORCED=8!==$parseInt(whitespaces+"08")||22!==$parseInt(whitespaces+"0x16");module.exports=FORCED?function parseInt(string,radix){var S=trim(String(string));return $parseInt(S,radix>>>0||(hex.test(S)?16:10))}:$parseInt},"../../node_modules/core-js/modules/es.array.sort.js":function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),aFunction=__webpack_require__("../../node_modules/core-js/internals/a-function.js"),toObject=__webpack_require__("../../node_modules/core-js/internals/to-object.js"),fails=__webpack_require__("../../node_modules/core-js/internals/fails.js"),arrayMethodIsStrict=__webpack_require__("../../node_modules/core-js/internals/array-method-is-strict.js"),test=[],nativeSort=test.sort,FAILS_ON_UNDEFINED=fails((function(){test.sort(void 0)})),FAILS_ON_NULL=fails((function(){test.sort(null)})),STRICT_METHOD=arrayMethodIsStrict("sort");$({target:"Array",proto:!0,forced:FAILS_ON_UNDEFINED||!FAILS_ON_NULL||!STRICT_METHOD},{sort:function sort(comparefn){return void 0===comparefn?nativeSort.call(toObject(this)):nativeSort.call(toObject(this),aFunction(comparefn))}})},"../../node_modules/core-js/modules/es.date.to-primitive.js":function(module,exports,__webpack_require__){var createNonEnumerableProperty=__webpack_require__("../../node_modules/core-js/internals/create-non-enumerable-property.js"),dateToPrimitive=__webpack_require__("../../node_modules/core-js/internals/date-to-primitive.js"),TO_PRIMITIVE=__webpack_require__("../../node_modules/core-js/internals/well-known-symbol.js")("toPrimitive"),DatePrototype=Date.prototype;TO_PRIMITIVE in DatePrototype||createNonEnumerableProperty(DatePrototype,TO_PRIMITIVE,dateToPrimitive)},"../../node_modules/core-js/modules/es.number.to-precision.js":function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),fails=__webpack_require__("../../node_modules/core-js/internals/fails.js"),thisNumberValue=__webpack_require__("../../node_modules/core-js/internals/this-number-value.js"),nativeToPrecision=1..toPrecision;$({target:"Number",proto:!0,forced:fails((function(){return"1"!==nativeToPrecision.call(1,void 0)}))||!fails((function(){nativeToPrecision.call({})}))},{toPrecision:function toPrecision(precision){return void 0===precision?nativeToPrecision.call(thisNumberValue(this)):nativeToPrecision.call(thisNumberValue(this),precision)}})},"../../node_modules/core-js/modules/es.parse-int.js":function(module,exports,__webpack_require__){var $=__webpack_require__("../../node_modules/core-js/internals/export.js"),parseIntImplementation=__webpack_require__("../../node_modules/core-js/internals/number-parse-int.js");$({global:!0,forced:parseInt!=parseIntImplementation},{parseInt:parseIntImplementation})},"../components/dist/esm/index-264b2c3e.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return _typeof})),__webpack_require__.d(__webpack_exports__,"b",(function(){return addMilliseconds})),__webpack_require__.d(__webpack_exports__,"c",(function(){return toDate})),__webpack_require__.d(__webpack_exports__,"d",(function(){return getTimezoneOffsetInMilliseconds})),__webpack_require__.d(__webpack_exports__,"e",(function(){return assign})),__webpack_require__.d(__webpack_exports__,"f",(function(){return getDefaultOptions})),__webpack_require__.d(__webpack_exports__,"g",(function(){return locale})),__webpack_require__.d(__webpack_exports__,"h",(function(){return requiredArgs})),__webpack_require__.d(__webpack_exports__,"i",(function(){return toInteger}));__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.match.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.parse-int.js");function _typeof(o){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function toInteger(dirtyNumber){if(null===dirtyNumber||!0===dirtyNumber||!1===dirtyNumber)return NaN;var number=Number(dirtyNumber);return isNaN(number)?number:number<0?Math.ceil(number):Math.floor(number)}function requiredArgs(required,args){if(args.length<required)throw new TypeError(required+" argument"+(required>1?"s":"")+" required, but only "+args.length+" present")}function toDate(argument){requiredArgs(1,arguments);var argStr=Object.prototype.toString.call(argument);return argument instanceof Date||"object"===_typeof(argument)&&"[object Date]"===argStr?new Date(argument.getTime()):"number"==typeof argument||"[object Number]"===argStr?new Date(argument):("string"!=typeof argument&&"[object String]"!==argStr||"undefined"==typeof console||(console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"),console.warn((new Error).stack)),new Date(NaN))}function addMilliseconds(dirtyDate,dirtyAmount){requiredArgs(2,arguments);var timestamp=toDate(dirtyDate).getTime(),amount=toInteger(dirtyAmount);return new Date(timestamp+amount)}var defaultOptions={};function getDefaultOptions(){return defaultOptions}function getTimezoneOffsetInMilliseconds(date){var utcDate=new Date(Date.UTC(date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),date.getMilliseconds()));return utcDate.setUTCFullYear(date.getFullYear()),date.getTime()-utcDate.getTime()}var formatDistanceLocale={lessThanXSeconds:{one:"less than a second",other:"less than {{count}} seconds"},xSeconds:{one:"1 second",other:"{{count}} seconds"},halfAMinute:"half a minute",lessThanXMinutes:{one:"less than a minute",other:"less than {{count}} minutes"},xMinutes:{one:"1 minute",other:"{{count}} minutes"},aboutXHours:{one:"about 1 hour",other:"about {{count}} hours"},xHours:{one:"1 hour",other:"{{count}} hours"},xDays:{one:"1 day",other:"{{count}} days"},aboutXWeeks:{one:"about 1 week",other:"about {{count}} weeks"},xWeeks:{one:"1 week",other:"{{count}} weeks"},aboutXMonths:{one:"about 1 month",other:"about {{count}} months"},xMonths:{one:"1 month",other:"{{count}} months"},aboutXYears:{one:"about 1 year",other:"about {{count}} years"},xYears:{one:"1 year",other:"{{count}} years"},overXYears:{one:"over 1 year",other:"over {{count}} years"},almostXYears:{one:"almost 1 year",other:"almost {{count}} years"}};function buildFormatLongFn(args){return function(){var options=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},width=options.width?String(options.width):args.defaultWidth,format=args.formats[width]||args.formats[args.defaultWidth];return format}}var formatLong={date:buildFormatLongFn({formats:{full:"EEEE, MMMM do, y",long:"MMMM do, y",medium:"MMM d, y",short:"MM/dd/yyyy"},defaultWidth:"full"}),time:buildFormatLongFn({formats:{full:"h:mm:ss a zzzz",long:"h:mm:ss a z",medium:"h:mm:ss a",short:"h:mm a"},defaultWidth:"full"}),dateTime:buildFormatLongFn({formats:{full:"{{date}} 'at' {{time}}",long:"{{date}} 'at' {{time}}",medium:"{{date}}, {{time}}",short:"{{date}}, {{time}}"},defaultWidth:"full"})},formatRelativeLocale={lastWeek:"'last' eeee 'at' p",yesterday:"'yesterday at' p",today:"'today at' p",tomorrow:"'tomorrow at' p",nextWeek:"eeee 'at' p",other:"P"};function buildLocalizeFn(args){return function(dirtyIndex,options){var valuesArray;if("formatting"===(null!=options&&options.context?String(options.context):"standalone")&&args.formattingValues){var defaultWidth=args.defaultFormattingWidth||args.defaultWidth,width=null!=options&&options.width?String(options.width):defaultWidth;valuesArray=args.formattingValues[width]||args.formattingValues[defaultWidth]}else{var _defaultWidth=args.defaultWidth,_width=null!=options&&options.width?String(options.width):args.defaultWidth;valuesArray=args.values[_width]||args.values[_defaultWidth]}return valuesArray[args.argumentCallback?args.argumentCallback(dirtyIndex):dirtyIndex]}}var localize={ordinalNumber:function ordinalNumber(dirtyNumber,_options){var number=Number(dirtyNumber),rem100=number%100;if(rem100>20||rem100<10)switch(rem100%10){case 1:return number+"st";case 2:return number+"nd";case 3:return number+"rd"}return number+"th"},era:buildLocalizeFn({values:{narrow:["B","A"],abbreviated:["BC","AD"],wide:["Before Christ","Anno Domini"]},defaultWidth:"wide"}),quarter:buildLocalizeFn({values:{narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1st quarter","2nd quarter","3rd quarter","4th quarter"]},defaultWidth:"wide",argumentCallback:function argumentCallback(quarter){return quarter-1}}),month:buildLocalizeFn({values:{narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],wide:["January","February","March","April","May","June","July","August","September","October","November","December"]},defaultWidth:"wide"}),day:buildLocalizeFn({values:{narrow:["S","M","T","W","T","F","S"],short:["Su","Mo","Tu","We","Th","Fr","Sa"],abbreviated:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],wide:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},defaultWidth:"wide"}),dayPeriod:buildLocalizeFn({values:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"}},defaultWidth:"wide",formattingValues:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"}},defaultFormattingWidth:"wide"})};function buildMatchFn(args){return function(string){var options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},width=options.width,matchPattern=width&&args.matchPatterns[width]||args.matchPatterns[args.defaultMatchWidth],matchResult=string.match(matchPattern);if(!matchResult)return null;var value,matchedString=matchResult[0],parsePatterns=width&&args.parsePatterns[width]||args.parsePatterns[args.defaultParseWidth],key=Array.isArray(parsePatterns)?findIndex(parsePatterns,(function(pattern){return pattern.test(matchedString)})):findKey(parsePatterns,(function(pattern){return pattern.test(matchedString)}));value=args.valueCallback?args.valueCallback(key):key,value=options.valueCallback?options.valueCallback(value):value;var rest=string.slice(matchedString.length);return{value:value,rest:rest}}}function findKey(object,predicate){for(var key in object)if(object.hasOwnProperty(key)&&predicate(object[key]))return key}function findIndex(array,predicate){for(var key=0;key<array.length;key++)if(predicate(array[key]))return key}var match={ordinalNumber:function buildMatchPatternFn(args){return function(string){var options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},matchResult=string.match(args.matchPattern);if(!matchResult)return null;var matchedString=matchResult[0],parseResult=string.match(args.parsePattern);if(!parseResult)return null;var value=args.valueCallback?args.valueCallback(parseResult[0]):parseResult[0];value=options.valueCallback?options.valueCallback(value):value;var rest=string.slice(matchedString.length);return{value:value,rest:rest}}}({matchPattern:/^(\d+)(th|st|nd|rd)?/i,parsePattern:/\d+/i,valueCallback:function valueCallback(value){return parseInt(value,10)}}),era:buildMatchFn({matchPatterns:{narrow:/^(b|a)/i,abbreviated:/^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,wide:/^(before christ|before common era|anno domini|common era)/i},defaultMatchWidth:"wide",parsePatterns:{any:[/^b/i,/^(a|c)/i]},defaultParseWidth:"any"}),quarter:buildMatchFn({matchPatterns:{narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](th|st|nd|rd)? quarter/i},defaultMatchWidth:"wide",parsePatterns:{any:[/1/i,/2/i,/3/i,/4/i]},defaultParseWidth:"any",valueCallback:function valueCallback(index){return index+1}}),month:buildMatchFn({matchPatterns:{narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,wide:/^(january|february|march|april|may|june|july|august|september|october|november|december)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^may/i,/^jun/i,/^jul/i,/^au/i,/^s/i,/^o/i,/^n/i,/^d/i]},defaultParseWidth:"any"}),day:buildMatchFn({matchPatterns:{narrow:/^[smtwf]/i,short:/^(su|mo|tu|we|th|fr|sa)/i,abbreviated:/^(sun|mon|tue|wed|thu|fri|sat)/i,wide:/^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^s/i,/^m/i,/^t/i,/^w/i,/^t/i,/^f/i,/^s/i],any:[/^su/i,/^m/i,/^tu/i,/^w/i,/^th/i,/^f/i,/^sa/i]},defaultParseWidth:"any"}),dayPeriod:buildMatchFn({matchPatterns:{narrow:/^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,any:/^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i},defaultMatchWidth:"any",parsePatterns:{any:{am:/^a/i,pm:/^p/i,midnight:/^mi/i,noon:/^no/i,morning:/morning/i,afternoon:/afternoon/i,evening:/evening/i,night:/night/i}},defaultParseWidth:"any"})},locale={code:"en-US",formatDistance:function formatDistance(token,count,options){var result,tokenValue=formatDistanceLocale[token];return result="string"==typeof tokenValue?tokenValue:1===count?tokenValue.one:tokenValue.other.replace("{{count}}",count.toString()),null!=options&&options.addSuffix?options.comparison&&options.comparison>0?"in "+result:result+" ago":result},formatLong:formatLong,formatRelative:function formatRelative(token,_date,_baseDate,_options){return formatRelativeLocale[token]},localize:localize,match:match,options:{weekStartsOn:0,firstWeekContainsDate:1}};function assign(target,object){if(null==target)throw new TypeError("assign requires that input parameter not be null or undefined");for(var property in object)Object.prototype.hasOwnProperty.call(object,property)&&(target[property]=object[property]);return target}},"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-data-grid.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_data_grid",(function(){return DataGrid}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.parse-float.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.to-precision.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.to-fixed.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.trim.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.match.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.to-primitive.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-primitive.js"),__webpack_require__("../../node_modules/core-js/modules/es.parse-int.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.constructor.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.sort.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.every.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_47__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_48__=__webpack_require__("../components/dist/esm/utils-c4af5b47.js"),_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__=__webpack_require__("../components/dist/esm/index-264b2c3e.js");function _createForOfIteratorHelper2(o,allowArrayLike){var it;if("undefined"==typeof Symbol||null==o[Symbol.iterator]){if(Array.isArray(o)||(it=function _unsupportedIterableToArray2(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray2(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray2(o,minLen)}(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function F(){};return{s:F,n:function n(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function e(_e3){throw _e3},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function s(){it=o[Symbol.iterator]()},n:function n(){var step=it.next();return normalCompletion=step.done,step},e:function e(_e4){didErr=!0,err=_e4},f:function f(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}function _arrayLikeToArray2(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function __defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var __rest=function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]])}return t},CELL_TYPES={checkbox:{defaults:{sortBy:"number"},getLongestContent:function getLongestContent(_ref8){var rows=_ref8.rows,columnIndex=_ref8.columnIndex;return rows[0][columnIndex]},render:function render(_ref9){var field=_ref9.field,content=_ref9.content,component=_ref9.component,rowIndex=_ref9.rowIndex,columnIndex=_ref9.columnIndex,_field$style=field.style,style=void 0===_field$style?"checkbox":_field$style,_field$editable=field.editable,editable=void 0!==_field$editable&&_field$editable,props={checked:content,disabled:!editable,label:field.label};return editable&&(props.onScaleChange=function(ev){var value=ev.detail.value;component.rows[rowIndex][columnIndex]=value,component.triggerEditEvent(value,rowIndex,columnIndex)}),"switch"===style?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-switch",Object.assign({size:"small"},props)):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-checkbox",Object.assign({},props))}},date:{defaults:{sortBy:"date"},render:function render(_ref10){var value=_ref10.content;return _ref10.isAutoWidthCheck&&(value=value.replace(/[0-9]/g,"8")),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("p",{class:"scl-body"},value)}},email:{defaults:{sortBy:"text"},render:function render(_ref11){var content=_ref11.content,emailNoProtocol=content.replace(/^mailto:/i,"");return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-link",{href:content},emailNoProtocol)}},graph:{defaults:{sortBy:"number"},render:function render(_ref12){var field=_ref12.field,content=_ref12.content,_field$style2=field.style,style=void 0===_field$style2?"progress":_field$style2,_field$min=field.min,min=void 0===_field$min?0:_field$min,_field$max=field.max,progress=parseFloat(((content-min)/((void 0===_field$max?100:_field$max)-min)*100).toPrecision(String(content).replace(".","").length));return"bar"===style?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:"tbody__bar-cell"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-progress-bar",{class:"data-grid-progress-bar","aria-hidden":"true",percentage:progress,mute:!0}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("p",{class:"scl-body"},content)):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-progress-bar",{class:"data-grid-progress-bar",percentage:progress,showStatus:!0,mute:!0})}},html:{defaults:{},getLongestContent:function getLongestContent(_ref14){var rows=_ref14.rows,columnIndex=_ref14.columnIndex;return rows[0][columnIndex]},render:function render(_ref15){var content=_ref15.content,component=_ref15.component;return content&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-button",{variant:"secondary",size:"small","icon-only":!0,"inner-aria-label":"Activate to "+(content.isExpanded?"collapse":"expand")+" content",onClick:function onClick(){content.isExpanded=!content.isExpanded,component.forceRender++}},content.isExpanded?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-navigation-collapse-up",{size:14}):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-navigation-collapse-down",{size:14}))}},link:{defaults:{sortBy:"text"},render:function render(_ref13){var content=_ref13.content,urlNoProtocol=content.replace(/^https?\:\/\//i,"");return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-link",{href:content,target:"_blank"},urlNoProtocol)}},number:{defaults:{textAlign:"right",sortBy:"number"},render:function render(_ref16){var field=_ref16.field,content=_ref16.content,isAutoWidthCheck=_ref16.isAutoWidthCheck,_field$precision=field.precision,precision=void 0===_field$precision?1/0:_field$precision,_field$decimalSymbol=field.decimalSymbol,decimalSymbol=void 0===_field$decimalSymbol?".":_field$decimalSymbol,_field$groupSymbol=field.groupSymbol,groupSymbol=void 0===_field$groupSymbol?"":_field$groupSymbol,_field$prefix=field.prefix,prefix=void 0===_field$prefix?"":_field$prefix,_field$suffix=field.suffix,suffix=void 0===_field$suffix?"":_field$suffix,value=content;if(isAutoWidthCheck&&(value=Number(value.toString().replace(/[0-9]/g,"8"))),value=precision<100?Number(value).toFixed(precision):value.toString(),groupSymbol||"."!==decimalSymbol){var parts=value.split(".");groupSymbol&&(parts[0]=parts[0].replace(/\B(?=(\d{3})+(?!\d))/g,groupSymbol)),value=parts.join(decimalSymbol)}return(prefix||suffix)&&(value=prefix+value+suffix),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("p",{class:"scl-body",style:{textAlign:"right"}},value)}},select:{defaults:{sortBy:"text"},render:function render(_ref17){var field=_ref17.field,content=_ref17.content,component=_ref17.component,rowIndex=_ref17.rowIndex,columnIndex=_ref17.columnIndex,isAutoWidthCheck=_ref17.isAutoWidthCheck,options=field.options,_field$editable2=field.editable,editable=void 0!==_field$editable2&&_field$editable2,label=field.label;if(isAutoWidthCheck)return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("p",{class:"scl-body",style:{paddingRight:"56px"}},content);var props={disabled:!editable,value:content,label:label};return editable&&(props.onScaleChange=function(_ref18){var value=_ref18.detail.value;component.rows[rowIndex][columnIndex]=value,component.triggerEditEvent(value,rowIndex,columnIndex)}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-dropdown-select",Object.assign({floatingStrategy:"fixed"},props),options.map((function(option){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-dropdown-select-item",{value:option},option)})))}},tags:{defaults:{sortBy:"text"},render:function render(_ref19){var tags=_ref19.content.split(",").map((function(s){return s.trim()}));return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("ul",{class:"tbody__tag-list"},tags.map((function(tag){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("li",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-tag",{size:"small",type:"strong"},tag))})))}},telephone:{defaults:{sortBy:"text"},render:function render(_ref20){var content=_ref20.content,telephoneNoProtocol=content.replace(/^tel:/i,"");return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-link",{href:content},telephoneNoProtocol)}},text:{defaults:{sortBy:"text"},render:function render(_ref21){var field=_ref21.field,content=_ref21.content,component=_ref21.component,rowIndex=_ref21.rowIndex,columnIndex=_ref21.columnIndex,isAutoWidthCheck=_ref21.isAutoWidthCheck,_field$variant=field.variant,variant=void 0===_field$variant?"body":_field$variant,_field$editable3=field.editable,editable=void 0!==_field$editable3&&_field$editable3,iconPrefix=field.iconPrefix,iconSuffix=field.iconSuffix,label=field.label;if(isAutoWidthCheck&&editable)return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("p",{class:"scl-body",style:{paddingRight:"26px"}},content);if(editable){var props={type:"text",value:content,label:label,onScaleChange:function(_ref22){var value=_ref22.detail.value;component.rows[rowIndex][columnIndex]=value,component.triggerEditEvent(value,rowIndex,columnIndex)}};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-text-field",Object.assign({},props))}var value=content;return isAutoWidthCheck&&(value+="w"),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:"tbody__text-cell"},iconPrefix&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("span",{class:"tbody__text-cell-prefix"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-"+iconPrefix)),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("p",{class:"scl-"+variant},value),iconSuffix&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("span",{class:"tbody__text-cell-suffix"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-"+iconSuffix)))}},actions:{defaults:{},render:function render(_ref23){var content=_ref23.content;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:"tbody__actions"},content.map((function(action){var label=action.label,props=__rest(action,["label"]);return"object"==typeof label&&"__html"in label?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-button",Object.assign({size:"small",innerHTML:label.__html},props)):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-button",Object.assign({size:"small"},props),label)})))}}},CELL_DEFAULTS={maxWidth:1/0,minWidth:20,resizable:!0,sortable:!1,sortBy:"text",textAlign:"left",visible:!0,width:"auto"};function subMilliseconds(dirtyDate,dirtyAmount){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(2,arguments);var amount=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.i)(dirtyAmount);return Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.b)(dirtyDate,-amount)}function startOfUTCISOWeek(dirtyDate){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(1,arguments);var weekStartsOn=1,date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyDate),day=date.getUTCDay(),diff=(day<weekStartsOn?7:0)+day-weekStartsOn;return date.setUTCDate(date.getUTCDate()-diff),date.setUTCHours(0,0,0,0),date}function getUTCISOWeekYear(dirtyDate){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(1,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyDate),year=date.getUTCFullYear(),fourthOfJanuaryOfNextYear=new Date(0);fourthOfJanuaryOfNextYear.setUTCFullYear(year+1,0,4),fourthOfJanuaryOfNextYear.setUTCHours(0,0,0,0);var startOfNextYear=startOfUTCISOWeek(fourthOfJanuaryOfNextYear),fourthOfJanuaryOfThisYear=new Date(0);fourthOfJanuaryOfThisYear.setUTCFullYear(year,0,4),fourthOfJanuaryOfThisYear.setUTCHours(0,0,0,0);var startOfThisYear=startOfUTCISOWeek(fourthOfJanuaryOfThisYear);return date.getTime()>=startOfNextYear.getTime()?year+1:date.getTime()>=startOfThisYear.getTime()?year:year-1}function startOfUTCISOWeekYear(dirtyDate){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(1,arguments);var year=getUTCISOWeekYear(dirtyDate),fourthOfJanuary=new Date(0);fourthOfJanuary.setUTCFullYear(year,0,4),fourthOfJanuary.setUTCHours(0,0,0,0);var date=startOfUTCISOWeek(fourthOfJanuary);return date}function getUTCISOWeek(dirtyDate){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(1,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyDate),diff=startOfUTCISOWeek(date).getTime()-startOfUTCISOWeekYear(date).getTime();return Math.round(diff/6048e5)+1}function startOfUTCWeek(dirtyDate,options){var _ref,_ref2,_ref3,_options$weekStartsOn,_options$locale,_options$locale$optio,_defaultOptions$local,_defaultOptions$local2;Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(1,arguments);var defaultOptions=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.f)(),weekStartsOn=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.i)(null!==(_ref=null!==(_ref2=null!==(_ref3=null!==(_options$weekStartsOn=null==options?void 0:options.weekStartsOn)&&void 0!==_options$weekStartsOn?_options$weekStartsOn:null==options||null===(_options$locale=options.locale)||void 0===_options$locale||null===(_options$locale$optio=_options$locale.options)||void 0===_options$locale$optio?void 0:_options$locale$optio.weekStartsOn)&&void 0!==_ref3?_ref3:defaultOptions.weekStartsOn)&&void 0!==_ref2?_ref2:null===(_defaultOptions$local=defaultOptions.locale)||void 0===_defaultOptions$local||null===(_defaultOptions$local2=_defaultOptions$local.options)||void 0===_defaultOptions$local2?void 0:_defaultOptions$local2.weekStartsOn)&&void 0!==_ref?_ref:0);if(!(weekStartsOn>=0&&weekStartsOn<=6))throw new RangeError("weekStartsOn must be between 0 and 6 inclusively");var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyDate),day=date.getUTCDay(),diff=(day<weekStartsOn?7:0)+day-weekStartsOn;return date.setUTCDate(date.getUTCDate()-diff),date.setUTCHours(0,0,0,0),date}function getUTCWeekYear(dirtyDate,options){var _ref,_ref2,_ref3,_options$firstWeekCon,_options$locale,_options$locale$optio,_defaultOptions$local,_defaultOptions$local2;Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(1,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyDate),year=date.getUTCFullYear(),defaultOptions=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.f)(),firstWeekContainsDate=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.i)(null!==(_ref=null!==(_ref2=null!==(_ref3=null!==(_options$firstWeekCon=null==options?void 0:options.firstWeekContainsDate)&&void 0!==_options$firstWeekCon?_options$firstWeekCon:null==options||null===(_options$locale=options.locale)||void 0===_options$locale||null===(_options$locale$optio=_options$locale.options)||void 0===_options$locale$optio?void 0:_options$locale$optio.firstWeekContainsDate)&&void 0!==_ref3?_ref3:defaultOptions.firstWeekContainsDate)&&void 0!==_ref2?_ref2:null===(_defaultOptions$local=defaultOptions.locale)||void 0===_defaultOptions$local||null===(_defaultOptions$local2=_defaultOptions$local.options)||void 0===_defaultOptions$local2?void 0:_defaultOptions$local2.firstWeekContainsDate)&&void 0!==_ref?_ref:1);if(!(firstWeekContainsDate>=1&&firstWeekContainsDate<=7))throw new RangeError("firstWeekContainsDate must be between 1 and 7 inclusively");var firstWeekOfNextYear=new Date(0);firstWeekOfNextYear.setUTCFullYear(year+1,0,firstWeekContainsDate),firstWeekOfNextYear.setUTCHours(0,0,0,0);var startOfNextYear=startOfUTCWeek(firstWeekOfNextYear,options),firstWeekOfThisYear=new Date(0);firstWeekOfThisYear.setUTCFullYear(year,0,firstWeekContainsDate),firstWeekOfThisYear.setUTCHours(0,0,0,0);var startOfThisYear=startOfUTCWeek(firstWeekOfThisYear,options);return date.getTime()>=startOfNextYear.getTime()?year+1:date.getTime()>=startOfThisYear.getTime()?year:year-1}function startOfUTCWeekYear(dirtyDate,options){var _ref,_ref2,_ref3,_options$firstWeekCon,_options$locale,_options$locale$optio,_defaultOptions$local,_defaultOptions$local2;Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(1,arguments);var defaultOptions=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.f)(),firstWeekContainsDate=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.i)(null!==(_ref=null!==(_ref2=null!==(_ref3=null!==(_options$firstWeekCon=null==options?void 0:options.firstWeekContainsDate)&&void 0!==_options$firstWeekCon?_options$firstWeekCon:null==options||null===(_options$locale=options.locale)||void 0===_options$locale||null===(_options$locale$optio=_options$locale.options)||void 0===_options$locale$optio?void 0:_options$locale$optio.firstWeekContainsDate)&&void 0!==_ref3?_ref3:defaultOptions.firstWeekContainsDate)&&void 0!==_ref2?_ref2:null===(_defaultOptions$local=defaultOptions.locale)||void 0===_defaultOptions$local||null===(_defaultOptions$local2=_defaultOptions$local.options)||void 0===_defaultOptions$local2?void 0:_defaultOptions$local2.firstWeekContainsDate)&&void 0!==_ref?_ref:1),year=getUTCWeekYear(dirtyDate,options),firstWeek=new Date(0);firstWeek.setUTCFullYear(year,0,firstWeekContainsDate),firstWeek.setUTCHours(0,0,0,0);var date=startOfUTCWeek(firstWeek,options);return date}function getUTCWeek(dirtyDate,options){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(1,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyDate),diff=startOfUTCWeek(date,options).getTime()-startOfUTCWeekYear(date,options).getTime();return Math.round(diff/6048e5)+1}var dateLongFormatter=function dateLongFormatter(pattern,formatLong){switch(pattern){case"P":return formatLong.date({width:"short"});case"PP":return formatLong.date({width:"medium"});case"PPP":return formatLong.date({width:"long"});default:return formatLong.date({width:"full"})}},timeLongFormatter=function timeLongFormatter(pattern,formatLong){switch(pattern){case"p":return formatLong.time({width:"short"});case"pp":return formatLong.time({width:"medium"});case"ppp":return formatLong.time({width:"long"});default:return formatLong.time({width:"full"})}},longFormatters={p:timeLongFormatter,P:function dateTimeLongFormatter(pattern,formatLong){var dateTimeFormat,matchResult=pattern.match(/(P+)(p+)?/)||[],datePattern=matchResult[1],timePattern=matchResult[2];if(!timePattern)return dateLongFormatter(pattern,formatLong);switch(datePattern){case"P":dateTimeFormat=formatLong.dateTime({width:"short"});break;case"PP":dateTimeFormat=formatLong.dateTime({width:"medium"});break;case"PPP":dateTimeFormat=formatLong.dateTime({width:"long"});break;default:dateTimeFormat=formatLong.dateTime({width:"full"})}return dateTimeFormat.replace("{{date}}",dateLongFormatter(datePattern,formatLong)).replace("{{time}}",timeLongFormatter(timePattern,formatLong))}},protectedDayOfYearTokens=["D","DD"],protectedWeekYearTokens=["YY","YYYY"];function isProtectedDayOfYearToken(token){return-1!==protectedDayOfYearTokens.indexOf(token)}function isProtectedWeekYearToken(token){return-1!==protectedWeekYearTokens.indexOf(token)}function throwProtectedError(token,format,input){if("YYYY"===token)throw new RangeError("Use `yyyy` instead of `YYYY` (in `".concat(format,"`) for formatting years to the input `").concat(input,"`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));if("YY"===token)throw new RangeError("Use `yy` instead of `YY` (in `".concat(format,"`) for formatting years to the input `").concat(input,"`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));if("D"===token)throw new RangeError("Use `d` instead of `D` (in `".concat(format,"`) for formatting days of the month to the input `").concat(input,"`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));if("DD"===token)throw new RangeError("Use `dd` instead of `DD` (in `".concat(format,"`) for formatting days of the month to the input `").concat(input,"`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"))}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _createForOfIteratorHelper(o,allowArrayLike){var it="undefined"!=typeof Symbol&&o[Symbol.iterator]||o["@@iterator"];if(!it){if(Array.isArray(o)||(it=function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function F(){};return{s:F,n:function n(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function e(_e){throw _e},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function s(){it=it.call(o)},n:function n(){var step=it.next();return normalCompletion=step.done,step},e:function e(_e2){didErr=!0,err=_e2},f:function f(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),Object.defineProperty(subClass,"prototype",{writable:!1}),superClass&&_setPrototypeOf(subClass,superClass)}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function _possibleConstructorReturn(self,call){if(call&&("object"===Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.a)(call)||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(self)}function _createSuper(Derived){var hasNativeReflectConstruct=function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _toPropertyKey(arg){var key=function _toPrimitive(input,hint){if("object"!==Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.a)(input)||null===input)return input;var prim=input[Symbol.toPrimitive];if(void 0!==prim){var res=prim.call(input,hint||"default");if("object"!==Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.a)(res))return res;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===hint?String:Number)(input)}(arg,"string");return"symbol"===Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.a)(key)?key:String(key)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}function _defineProperty(obj,key,value){return(key=_toPropertyKey(key))in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}var Setter=function(){function Setter(){_classCallCheck(this,Setter),_defineProperty(this,"priority",void 0),_defineProperty(this,"subPriority",0)}return _createClass(Setter,[{key:"validate",value:function validate(_utcDate,_options){return!0}}]),Setter}(),ValueSetter=function(_Setter){_inherits(ValueSetter,_Setter);var _super=_createSuper(ValueSetter);function ValueSetter(value,validateValue,setValue,priority,subPriority){var _this;return _classCallCheck(this,ValueSetter),(_this=_super.call(this)).value=value,_this.validateValue=validateValue,_this.setValue=setValue,_this.priority=priority,subPriority&&(_this.subPriority=subPriority),_this}return _createClass(ValueSetter,[{key:"validate",value:function validate(utcDate,options){return this.validateValue(utcDate,this.value,options)}},{key:"set",value:function set(utcDate,flags,options){return this.setValue(utcDate,flags,this.value,options)}}]),ValueSetter}(Setter),DateToSystemTimezoneSetter=function(_Setter2){_inherits(DateToSystemTimezoneSetter,_Setter2);var _super2=_createSuper(DateToSystemTimezoneSetter);function DateToSystemTimezoneSetter(){var _this2;_classCallCheck(this,DateToSystemTimezoneSetter);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this2=_super2.call.apply(_super2,[this].concat(args))),"priority",10),_defineProperty(_assertThisInitialized(_this2),"subPriority",-1),_this2}return _createClass(DateToSystemTimezoneSetter,[{key:"set",value:function set(date,flags){if(flags.timestampIsSet)return date;var convertedDate=new Date(0);return convertedDate.setFullYear(date.getUTCFullYear(),date.getUTCMonth(),date.getUTCDate()),convertedDate.setHours(date.getUTCHours(),date.getUTCMinutes(),date.getUTCSeconds(),date.getUTCMilliseconds()),convertedDate}}]),DateToSystemTimezoneSetter}(Setter),Parser=function(){function Parser(){_classCallCheck(this,Parser),_defineProperty(this,"incompatibleTokens",void 0),_defineProperty(this,"priority",void 0),_defineProperty(this,"subPriority",void 0)}return _createClass(Parser,[{key:"run",value:function run(dateString,token,match,options){var result=this.parse(dateString,token,match,options);return result?{setter:new ValueSetter(result.value,this.validate,this.set,this.priority,this.subPriority),rest:result.rest}:null}},{key:"validate",value:function validate(_utcDate,_value,_options){return!0}}]),Parser}(),EraParser=function(_Parser){_inherits(EraParser,_Parser);var _super=_createSuper(EraParser);function EraParser(){var _this;_classCallCheck(this,EraParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",140),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["R","u","t","T"]),_this}return _createClass(EraParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"G":case"GG":case"GGG":return match.era(dateString,{width:"abbreviated"})||match.era(dateString,{width:"narrow"});case"GGGGG":return match.era(dateString,{width:"narrow"});default:return match.era(dateString,{width:"wide"})||match.era(dateString,{width:"abbreviated"})||match.era(dateString,{width:"narrow"})}}},{key:"set",value:function set(date,flags,value){return flags.era=value,date.setUTCFullYear(value,0,1),date.setUTCHours(0,0,0,0),date}}]),EraParser}(Parser),numericPatterns_month=/^(1[0-2]|0?\d)/,numericPatterns_date=/^(3[0-1]|[0-2]?\d)/,numericPatterns_dayOfYear=/^(36[0-6]|3[0-5]\d|[0-2]?\d?\d)/,numericPatterns_week=/^(5[0-3]|[0-4]?\d)/,numericPatterns_hour23h=/^(2[0-3]|[0-1]?\d)/,numericPatterns_hour24h=/^(2[0-4]|[0-1]?\d)/,numericPatterns_hour11h=/^(1[0-1]|0?\d)/,numericPatterns_hour12h=/^(1[0-2]|0?\d)/,numericPatterns_minute=/^[0-5]?\d/,numericPatterns_second=/^[0-5]?\d/,numericPatterns_singleDigit=/^\d/,numericPatterns_twoDigits=/^\d{1,2}/,numericPatterns_threeDigits=/^\d{1,3}/,numericPatterns_fourDigits=/^\d{1,4}/,numericPatterns_anyDigitsSigned=/^-?\d+/,numericPatterns_singleDigitSigned=/^-?\d/,numericPatterns_twoDigitsSigned=/^-?\d{1,2}/,numericPatterns_threeDigitsSigned=/^-?\d{1,3}/,numericPatterns_fourDigitsSigned=/^-?\d{1,4}/,timezonePatterns_basicOptionalMinutes=/^([+-])(\d{2})(\d{2})?|Z/,timezonePatterns_basic=/^([+-])(\d{2})(\d{2})|Z/,timezonePatterns_basicOptionalSeconds=/^([+-])(\d{2})(\d{2})((\d{2}))?|Z/,timezonePatterns_extended=/^([+-])(\d{2}):(\d{2})|Z/,timezonePatterns_extendedOptionalSeconds=/^([+-])(\d{2}):(\d{2})(:(\d{2}))?|Z/;function mapValue(parseFnResult,mapFn){return parseFnResult?{value:mapFn(parseFnResult.value),rest:parseFnResult.rest}:parseFnResult}function parseNumericPattern(pattern,dateString){var matchResult=dateString.match(pattern);return matchResult?{value:parseInt(matchResult[0],10),rest:dateString.slice(matchResult[0].length)}:null}function parseTimezonePattern(pattern,dateString){var matchResult=dateString.match(pattern);return matchResult?"Z"===matchResult[0]?{value:0,rest:dateString.slice(1)}:{value:("+"===matchResult[1]?1:-1)*(36e5*(matchResult[2]?parseInt(matchResult[2],10):0)+6e4*(matchResult[3]?parseInt(matchResult[3],10):0)+1e3*(matchResult[5]?parseInt(matchResult[5],10):0)),rest:dateString.slice(matchResult[0].length)}:null}function parseAnyDigitsSigned(dateString){return parseNumericPattern(numericPatterns_anyDigitsSigned,dateString)}function parseNDigits(n,dateString){switch(n){case 1:return parseNumericPattern(numericPatterns_singleDigit,dateString);case 2:return parseNumericPattern(numericPatterns_twoDigits,dateString);case 3:return parseNumericPattern(numericPatterns_threeDigits,dateString);case 4:return parseNumericPattern(numericPatterns_fourDigits,dateString);default:return parseNumericPattern(new RegExp("^\\d{1,"+n+"}"),dateString)}}function parseNDigitsSigned(n,dateString){switch(n){case 1:return parseNumericPattern(numericPatterns_singleDigitSigned,dateString);case 2:return parseNumericPattern(numericPatterns_twoDigitsSigned,dateString);case 3:return parseNumericPattern(numericPatterns_threeDigitsSigned,dateString);case 4:return parseNumericPattern(numericPatterns_fourDigitsSigned,dateString);default:return parseNumericPattern(new RegExp("^-?\\d{1,"+n+"}"),dateString)}}function dayPeriodEnumToHours(dayPeriod){switch(dayPeriod){case"morning":return 4;case"evening":return 17;case"pm":case"noon":case"afternoon":return 12;default:return 0}}function normalizeTwoDigitYear(twoDigitYear,currentYear){var result,isCommonEra=currentYear>0,absCurrentYear=isCommonEra?currentYear:1-currentYear;if(absCurrentYear<=50)result=twoDigitYear||100;else{var rangeEnd=absCurrentYear+50;result=twoDigitYear+100*Math.floor(rangeEnd/100)-(twoDigitYear>=rangeEnd%100?100:0)}return isCommonEra?result:1-result}function isLeapYearIndex(year){return year%400==0||year%4==0&&year%100!=0}var YearParser=function(_Parser){_inherits(YearParser,_Parser);var _super=_createSuper(YearParser);function YearParser(){var _this;_classCallCheck(this,YearParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",130),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","u","w","I","i","e","c","t","T"]),_this}return _createClass(YearParser,[{key:"parse",value:function parse(dateString,token,match){var valueCallback=function valueCallback(year){return{year:year,isTwoDigitYear:"yy"===token}};switch(token){case"y":return mapValue(parseNDigits(4,dateString),valueCallback);case"yo":return mapValue(match.ordinalNumber(dateString,{unit:"year"}),valueCallback);default:return mapValue(parseNDigits(token.length,dateString),valueCallback)}}},{key:"validate",value:function validate(_date,value){return value.isTwoDigitYear||value.year>0}},{key:"set",value:function set(date,flags,value){var currentYear=date.getUTCFullYear();if(value.isTwoDigitYear){var normalizedTwoDigitYear=normalizeTwoDigitYear(value.year,currentYear);return date.setUTCFullYear(normalizedTwoDigitYear,0,1),date.setUTCHours(0,0,0,0),date}var year="era"in flags&&1!==flags.era?1-value.year:value.year;return date.setUTCFullYear(year,0,1),date.setUTCHours(0,0,0,0),date}}]),YearParser}(Parser),LocalWeekYearParser=function(_Parser){_inherits(LocalWeekYearParser,_Parser);var _super=_createSuper(LocalWeekYearParser);function LocalWeekYearParser(){var _this;_classCallCheck(this,LocalWeekYearParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",130),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","R","u","Q","q","M","L","I","d","D","i","t","T"]),_this}return _createClass(LocalWeekYearParser,[{key:"parse",value:function parse(dateString,token,match){var valueCallback=function valueCallback(year){return{year:year,isTwoDigitYear:"YY"===token}};switch(token){case"Y":return mapValue(parseNDigits(4,dateString),valueCallback);case"Yo":return mapValue(match.ordinalNumber(dateString,{unit:"year"}),valueCallback);default:return mapValue(parseNDigits(token.length,dateString),valueCallback)}}},{key:"validate",value:function validate(_date,value){return value.isTwoDigitYear||value.year>0}},{key:"set",value:function set(date,flags,value,options){var currentYear=getUTCWeekYear(date,options);if(value.isTwoDigitYear){var normalizedTwoDigitYear=normalizeTwoDigitYear(value.year,currentYear);return date.setUTCFullYear(normalizedTwoDigitYear,0,options.firstWeekContainsDate),date.setUTCHours(0,0,0,0),startOfUTCWeek(date,options)}var year="era"in flags&&1!==flags.era?1-value.year:value.year;return date.setUTCFullYear(year,0,options.firstWeekContainsDate),date.setUTCHours(0,0,0,0),startOfUTCWeek(date,options)}}]),LocalWeekYearParser}(Parser),ISOWeekYearParser=function(_Parser){_inherits(ISOWeekYearParser,_Parser);var _super=_createSuper(ISOWeekYearParser);function ISOWeekYearParser(){var _this;_classCallCheck(this,ISOWeekYearParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",130),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["G","y","Y","u","Q","q","M","L","w","d","D","e","c","t","T"]),_this}return _createClass(ISOWeekYearParser,[{key:"parse",value:function parse(dateString,token){return parseNDigitsSigned("R"===token?4:token.length,dateString)}},{key:"set",value:function set(_date,_flags,value){var firstWeekOfYear=new Date(0);return firstWeekOfYear.setUTCFullYear(value,0,4),firstWeekOfYear.setUTCHours(0,0,0,0),startOfUTCISOWeek(firstWeekOfYear)}}]),ISOWeekYearParser}(Parser),ExtendedYearParser=function(_Parser){_inherits(ExtendedYearParser,_Parser);var _super=_createSuper(ExtendedYearParser);function ExtendedYearParser(){var _this;_classCallCheck(this,ExtendedYearParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",130),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["G","y","Y","R","w","I","i","e","c","t","T"]),_this}return _createClass(ExtendedYearParser,[{key:"parse",value:function parse(dateString,token){return parseNDigitsSigned("u"===token?4:token.length,dateString)}},{key:"set",value:function set(date,_flags,value){return date.setUTCFullYear(value,0,1),date.setUTCHours(0,0,0,0),date}}]),ExtendedYearParser}(Parser),QuarterParser=function(_Parser){_inherits(QuarterParser,_Parser);var _super=_createSuper(QuarterParser);function QuarterParser(){var _this;_classCallCheck(this,QuarterParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",120),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","q","M","L","w","I","d","D","i","e","c","t","T"]),_this}return _createClass(QuarterParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"Q":case"QQ":return parseNDigits(token.length,dateString);case"Qo":return match.ordinalNumber(dateString,{unit:"quarter"});case"QQQ":return match.quarter(dateString,{width:"abbreviated",context:"formatting"})||match.quarter(dateString,{width:"narrow",context:"formatting"});case"QQQQQ":return match.quarter(dateString,{width:"narrow",context:"formatting"});default:return match.quarter(dateString,{width:"wide",context:"formatting"})||match.quarter(dateString,{width:"abbreviated",context:"formatting"})||match.quarter(dateString,{width:"narrow",context:"formatting"})}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=4}},{key:"set",value:function set(date,_flags,value){return date.setUTCMonth(3*(value-1),1),date.setUTCHours(0,0,0,0),date}}]),QuarterParser}(Parser),StandAloneQuarterParser=function(_Parser){_inherits(StandAloneQuarterParser,_Parser);var _super=_createSuper(StandAloneQuarterParser);function StandAloneQuarterParser(){var _this;_classCallCheck(this,StandAloneQuarterParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",120),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","Q","M","L","w","I","d","D","i","e","c","t","T"]),_this}return _createClass(StandAloneQuarterParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"q":case"qq":return parseNDigits(token.length,dateString);case"qo":return match.ordinalNumber(dateString,{unit:"quarter"});case"qqq":return match.quarter(dateString,{width:"abbreviated",context:"standalone"})||match.quarter(dateString,{width:"narrow",context:"standalone"});case"qqqqq":return match.quarter(dateString,{width:"narrow",context:"standalone"});default:return match.quarter(dateString,{width:"wide",context:"standalone"})||match.quarter(dateString,{width:"abbreviated",context:"standalone"})||match.quarter(dateString,{width:"narrow",context:"standalone"})}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=4}},{key:"set",value:function set(date,_flags,value){return date.setUTCMonth(3*(value-1),1),date.setUTCHours(0,0,0,0),date}}]),StandAloneQuarterParser}(Parser),MonthParser=function(_Parser){_inherits(MonthParser,_Parser);var _super=_createSuper(MonthParser);function MonthParser(){var _this;_classCallCheck(this,MonthParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"incompatibleTokens",["Y","R","q","Q","L","w","I","D","i","e","c","t","T"]),_defineProperty(_assertThisInitialized(_this),"priority",110),_this}return _createClass(MonthParser,[{key:"parse",value:function parse(dateString,token,match){var valueCallback=function valueCallback(value){return value-1};switch(token){case"M":return mapValue(parseNumericPattern(numericPatterns_month,dateString),valueCallback);case"MM":return mapValue(parseNDigits(2,dateString),valueCallback);case"Mo":return mapValue(match.ordinalNumber(dateString,{unit:"month"}),valueCallback);case"MMM":return match.month(dateString,{width:"abbreviated",context:"formatting"})||match.month(dateString,{width:"narrow",context:"formatting"});case"MMMMM":return match.month(dateString,{width:"narrow",context:"formatting"});default:return match.month(dateString,{width:"wide",context:"formatting"})||match.month(dateString,{width:"abbreviated",context:"formatting"})||match.month(dateString,{width:"narrow",context:"formatting"})}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=11}},{key:"set",value:function set(date,_flags,value){return date.setUTCMonth(value,1),date.setUTCHours(0,0,0,0),date}}]),MonthParser}(Parser),StandAloneMonthParser=function(_Parser){_inherits(StandAloneMonthParser,_Parser);var _super=_createSuper(StandAloneMonthParser);function StandAloneMonthParser(){var _this;_classCallCheck(this,StandAloneMonthParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",110),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","q","Q","M","w","I","D","i","e","c","t","T"]),_this}return _createClass(StandAloneMonthParser,[{key:"parse",value:function parse(dateString,token,match){var valueCallback=function valueCallback(value){return value-1};switch(token){case"L":return mapValue(parseNumericPattern(numericPatterns_month,dateString),valueCallback);case"LL":return mapValue(parseNDigits(2,dateString),valueCallback);case"Lo":return mapValue(match.ordinalNumber(dateString,{unit:"month"}),valueCallback);case"LLL":return match.month(dateString,{width:"abbreviated",context:"standalone"})||match.month(dateString,{width:"narrow",context:"standalone"});case"LLLLL":return match.month(dateString,{width:"narrow",context:"standalone"});default:return match.month(dateString,{width:"wide",context:"standalone"})||match.month(dateString,{width:"abbreviated",context:"standalone"})||match.month(dateString,{width:"narrow",context:"standalone"})}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=11}},{key:"set",value:function set(date,_flags,value){return date.setUTCMonth(value,1),date.setUTCHours(0,0,0,0),date}}]),StandAloneMonthParser}(Parser);var LocalWeekParser=function(_Parser){_inherits(LocalWeekParser,_Parser);var _super=_createSuper(LocalWeekParser);function LocalWeekParser(){var _this;_classCallCheck(this,LocalWeekParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",100),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","R","u","q","Q","M","L","I","d","D","i","t","T"]),_this}return _createClass(LocalWeekParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"w":return parseNumericPattern(numericPatterns_week,dateString);case"wo":return match.ordinalNumber(dateString,{unit:"week"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=53}},{key:"set",value:function set(date,_flags,value,options){return startOfUTCWeek(function setUTCWeek(dirtyDate,dirtyWeek,options){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(2,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyDate),week=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.i)(dirtyWeek),diff=getUTCWeek(date,options)-week;return date.setUTCDate(date.getUTCDate()-7*diff),date}(date,value,options),options)}}]),LocalWeekParser}(Parser);var ISOWeekParser=function(_Parser){_inherits(ISOWeekParser,_Parser);var _super=_createSuper(ISOWeekParser);function ISOWeekParser(){var _this;_classCallCheck(this,ISOWeekParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",100),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","Y","u","q","Q","M","L","w","d","D","e","c","t","T"]),_this}return _createClass(ISOWeekParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"I":return parseNumericPattern(numericPatterns_week,dateString);case"Io":return match.ordinalNumber(dateString,{unit:"week"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=53}},{key:"set",value:function set(date,_flags,value){return startOfUTCISOWeek(function setUTCISOWeek(dirtyDate,dirtyISOWeek){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(2,arguments);var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyDate),isoWeek=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.i)(dirtyISOWeek),diff=getUTCISOWeek(date)-isoWeek;return date.setUTCDate(date.getUTCDate()-7*diff),date}(date,value))}}]),ISOWeekParser}(Parser),DAYS_IN_MONTH=[31,28,31,30,31,30,31,31,30,31,30,31],DAYS_IN_MONTH_LEAP_YEAR=[31,29,31,30,31,30,31,31,30,31,30,31],DateParser=function(_Parser){_inherits(DateParser,_Parser);var _super=_createSuper(DateParser);function DateParser(){var _this;_classCallCheck(this,DateParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"subPriority",1),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","q","Q","w","I","D","i","e","c","t","T"]),_this}return _createClass(DateParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"d":return parseNumericPattern(numericPatterns_date,dateString);case"do":return match.ordinalNumber(dateString,{unit:"date"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(date,value){var isLeapYear=isLeapYearIndex(date.getUTCFullYear()),month=date.getUTCMonth();return isLeapYear?value>=1&&value<=DAYS_IN_MONTH_LEAP_YEAR[month]:value>=1&&value<=DAYS_IN_MONTH[month]}},{key:"set",value:function set(date,_flags,value){return date.setUTCDate(value),date.setUTCHours(0,0,0,0),date}}]),DateParser}(Parser),DayOfYearParser=function(_Parser){_inherits(DayOfYearParser,_Parser);var _super=_createSuper(DayOfYearParser);function DayOfYearParser(){var _this;_classCallCheck(this,DayOfYearParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"subpriority",1),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["Y","R","q","Q","M","L","w","I","d","E","i","e","c","t","T"]),_this}return _createClass(DayOfYearParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"D":case"DD":return parseNumericPattern(numericPatterns_dayOfYear,dateString);case"Do":return match.ordinalNumber(dateString,{unit:"date"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(date,value){return isLeapYearIndex(date.getUTCFullYear())?value>=1&&value<=366:value>=1&&value<=365}},{key:"set",value:function set(date,_flags,value){return date.setUTCMonth(0,value),date.setUTCHours(0,0,0,0),date}}]),DayOfYearParser}(Parser);function setUTCDay(dirtyDate,dirtyDay,options){var _ref,_ref2,_ref3,_options$weekStartsOn,_options$locale,_options$locale$optio,_defaultOptions$local,_defaultOptions$local2;Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(2,arguments);var defaultOptions=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.f)(),weekStartsOn=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.i)(null!==(_ref=null!==(_ref2=null!==(_ref3=null!==(_options$weekStartsOn=null==options?void 0:options.weekStartsOn)&&void 0!==_options$weekStartsOn?_options$weekStartsOn:null==options||null===(_options$locale=options.locale)||void 0===_options$locale||null===(_options$locale$optio=_options$locale.options)||void 0===_options$locale$optio?void 0:_options$locale$optio.weekStartsOn)&&void 0!==_ref3?_ref3:defaultOptions.weekStartsOn)&&void 0!==_ref2?_ref2:null===(_defaultOptions$local=defaultOptions.locale)||void 0===_defaultOptions$local||null===(_defaultOptions$local2=_defaultOptions$local.options)||void 0===_defaultOptions$local2?void 0:_defaultOptions$local2.weekStartsOn)&&void 0!==_ref?_ref:0);if(!(weekStartsOn>=0&&weekStartsOn<=6))throw new RangeError("weekStartsOn must be between 0 and 6 inclusively");var date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyDate),day=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.i)(dirtyDay),currentDay=date.getUTCDay(),remainder=day%7,dayIndex=(remainder+7)%7,diff=(dayIndex<weekStartsOn?7:0)+day-currentDay;return date.setUTCDate(date.getUTCDate()+diff),date}var DayParser=function(_Parser){_inherits(DayParser,_Parser);var _super=_createSuper(DayParser);function DayParser(){var _this;_classCallCheck(this,DayParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["D","i","e","c","t","T"]),_this}return _createClass(DayParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"E":case"EE":case"EEE":return match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"});case"EEEEE":return match.day(dateString,{width:"narrow",context:"formatting"});case"EEEEEE":return match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"});default:return match.day(dateString,{width:"wide",context:"formatting"})||match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"})}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=6}},{key:"set",value:function set(date,_flags,value,options){return(date=setUTCDay(date,value,options)).setUTCHours(0,0,0,0),date}}]),DayParser}(Parser),LocalDayParser=function(_Parser){_inherits(LocalDayParser,_Parser);var _super=_createSuper(LocalDayParser);function LocalDayParser(){var _this;_classCallCheck(this,LocalDayParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","R","u","q","Q","M","L","I","d","D","E","i","c","t","T"]),_this}return _createClass(LocalDayParser,[{key:"parse",value:function parse(dateString,token,match,options){var valueCallback=function valueCallback(value){var wholeWeekDays=7*Math.floor((value-1)/7);return(value+options.weekStartsOn+6)%7+wholeWeekDays};switch(token){case"e":case"ee":return mapValue(parseNDigits(token.length,dateString),valueCallback);case"eo":return mapValue(match.ordinalNumber(dateString,{unit:"day"}),valueCallback);case"eee":return match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"});case"eeeee":return match.day(dateString,{width:"narrow",context:"formatting"});case"eeeeee":return match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"});default:return match.day(dateString,{width:"wide",context:"formatting"})||match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"})}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=6}},{key:"set",value:function set(date,_flags,value,options){return(date=setUTCDay(date,value,options)).setUTCHours(0,0,0,0),date}}]),LocalDayParser}(Parser),StandAloneLocalDayParser=function(_Parser){_inherits(StandAloneLocalDayParser,_Parser);var _super=_createSuper(StandAloneLocalDayParser);function StandAloneLocalDayParser(){var _this;_classCallCheck(this,StandAloneLocalDayParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","R","u","q","Q","M","L","I","d","D","E","i","e","t","T"]),_this}return _createClass(StandAloneLocalDayParser,[{key:"parse",value:function parse(dateString,token,match,options){var valueCallback=function valueCallback(value){var wholeWeekDays=7*Math.floor((value-1)/7);return(value+options.weekStartsOn+6)%7+wholeWeekDays};switch(token){case"c":case"cc":return mapValue(parseNDigits(token.length,dateString),valueCallback);case"co":return mapValue(match.ordinalNumber(dateString,{unit:"day"}),valueCallback);case"ccc":return match.day(dateString,{width:"abbreviated",context:"standalone"})||match.day(dateString,{width:"short",context:"standalone"})||match.day(dateString,{width:"narrow",context:"standalone"});case"ccccc":return match.day(dateString,{width:"narrow",context:"standalone"});case"cccccc":return match.day(dateString,{width:"short",context:"standalone"})||match.day(dateString,{width:"narrow",context:"standalone"});default:return match.day(dateString,{width:"wide",context:"standalone"})||match.day(dateString,{width:"abbreviated",context:"standalone"})||match.day(dateString,{width:"short",context:"standalone"})||match.day(dateString,{width:"narrow",context:"standalone"})}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=6}},{key:"set",value:function set(date,_flags,value,options){return(date=setUTCDay(date,value,options)).setUTCHours(0,0,0,0),date}}]),StandAloneLocalDayParser}(Parser);var ISODayParser=function(_Parser){_inherits(ISODayParser,_Parser);var _super=_createSuper(ISODayParser);function ISODayParser(){var _this;_classCallCheck(this,ISODayParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",90),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["y","Y","u","q","Q","M","L","w","d","D","E","e","c","t","T"]),_this}return _createClass(ISODayParser,[{key:"parse",value:function parse(dateString,token,match){var valueCallback=function valueCallback(value){return 0===value?7:value};switch(token){case"i":case"ii":return parseNDigits(token.length,dateString);case"io":return match.ordinalNumber(dateString,{unit:"day"});case"iii":return mapValue(match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"}),valueCallback);case"iiiii":return mapValue(match.day(dateString,{width:"narrow",context:"formatting"}),valueCallback);case"iiiiii":return mapValue(match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"}),valueCallback);default:return mapValue(match.day(dateString,{width:"wide",context:"formatting"})||match.day(dateString,{width:"abbreviated",context:"formatting"})||match.day(dateString,{width:"short",context:"formatting"})||match.day(dateString,{width:"narrow",context:"formatting"}),valueCallback)}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=7}},{key:"set",value:function set(date,_flags,value){return date=function setUTCISODay(dirtyDate,dirtyDay){Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(2,arguments);var day=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.i)(dirtyDay);day%7==0&&(day-=7);var weekStartsOn=1,date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyDate),currentDay=date.getUTCDay(),diff=((day%7+7)%7<weekStartsOn?7:0)+day-currentDay;return date.setUTCDate(date.getUTCDate()+diff),date}(date,value),date.setUTCHours(0,0,0,0),date}}]),ISODayParser}(Parser),AMPMParser=function(_Parser){_inherits(AMPMParser,_Parser);var _super=_createSuper(AMPMParser);function AMPMParser(){var _this;_classCallCheck(this,AMPMParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",80),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["b","B","H","k","t","T"]),_this}return _createClass(AMPMParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"a":case"aa":case"aaa":return match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"});case"aaaaa":return match.dayPeriod(dateString,{width:"narrow",context:"formatting"});default:return match.dayPeriod(dateString,{width:"wide",context:"formatting"})||match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"})}}},{key:"set",value:function set(date,_flags,value){return date.setUTCHours(dayPeriodEnumToHours(value),0,0,0),date}}]),AMPMParser}(Parser),AMPMMidnightParser=function(_Parser){_inherits(AMPMMidnightParser,_Parser);var _super=_createSuper(AMPMMidnightParser);function AMPMMidnightParser(){var _this;_classCallCheck(this,AMPMMidnightParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",80),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["a","B","H","k","t","T"]),_this}return _createClass(AMPMMidnightParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"b":case"bb":case"bbb":return match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"});case"bbbbb":return match.dayPeriod(dateString,{width:"narrow",context:"formatting"});default:return match.dayPeriod(dateString,{width:"wide",context:"formatting"})||match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"})}}},{key:"set",value:function set(date,_flags,value){return date.setUTCHours(dayPeriodEnumToHours(value),0,0,0),date}}]),AMPMMidnightParser}(Parser),DayPeriodParser=function(_Parser){_inherits(DayPeriodParser,_Parser);var _super=_createSuper(DayPeriodParser);function DayPeriodParser(){var _this;_classCallCheck(this,DayPeriodParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",80),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["a","b","t","T"]),_this}return _createClass(DayPeriodParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"B":case"BB":case"BBB":return match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"});case"BBBBB":return match.dayPeriod(dateString,{width:"narrow",context:"formatting"});default:return match.dayPeriod(dateString,{width:"wide",context:"formatting"})||match.dayPeriod(dateString,{width:"abbreviated",context:"formatting"})||match.dayPeriod(dateString,{width:"narrow",context:"formatting"})}}},{key:"set",value:function set(date,_flags,value){return date.setUTCHours(dayPeriodEnumToHours(value),0,0,0),date}}]),DayPeriodParser}(Parser),Hour1to12Parser=function(_Parser){_inherits(Hour1to12Parser,_Parser);var _super=_createSuper(Hour1to12Parser);function Hour1to12Parser(){var _this;_classCallCheck(this,Hour1to12Parser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",70),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["H","K","k","t","T"]),_this}return _createClass(Hour1to12Parser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"h":return parseNumericPattern(numericPatterns_hour12h,dateString);case"ho":return match.ordinalNumber(dateString,{unit:"hour"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=12}},{key:"set",value:function set(date,_flags,value){var isPM=date.getUTCHours()>=12;return isPM&&value<12?date.setUTCHours(value+12,0,0,0):isPM||12!==value?date.setUTCHours(value,0,0,0):date.setUTCHours(0,0,0,0),date}}]),Hour1to12Parser}(Parser),Hour0to23Parser=function(_Parser){_inherits(Hour0to23Parser,_Parser);var _super=_createSuper(Hour0to23Parser);function Hour0to23Parser(){var _this;_classCallCheck(this,Hour0to23Parser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",70),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["a","b","h","K","k","t","T"]),_this}return _createClass(Hour0to23Parser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"H":return parseNumericPattern(numericPatterns_hour23h,dateString);case"Ho":return match.ordinalNumber(dateString,{unit:"hour"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=23}},{key:"set",value:function set(date,_flags,value){return date.setUTCHours(value,0,0,0),date}}]),Hour0to23Parser}(Parser),Hour0To11Parser=function(_Parser){_inherits(Hour0To11Parser,_Parser);var _super=_createSuper(Hour0To11Parser);function Hour0To11Parser(){var _this;_classCallCheck(this,Hour0To11Parser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",70),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["h","H","k","t","T"]),_this}return _createClass(Hour0To11Parser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"K":return parseNumericPattern(numericPatterns_hour11h,dateString);case"Ko":return match.ordinalNumber(dateString,{unit:"hour"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=11}},{key:"set",value:function set(date,_flags,value){return date.getUTCHours()>=12&&value<12?date.setUTCHours(value+12,0,0,0):date.setUTCHours(value,0,0,0),date}}]),Hour0To11Parser}(Parser),Hour1To24Parser=function(_Parser){_inherits(Hour1To24Parser,_Parser);var _super=_createSuper(Hour1To24Parser);function Hour1To24Parser(){var _this;_classCallCheck(this,Hour1To24Parser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",70),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["a","b","h","H","K","t","T"]),_this}return _createClass(Hour1To24Parser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"k":return parseNumericPattern(numericPatterns_hour24h,dateString);case"ko":return match.ordinalNumber(dateString,{unit:"hour"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=1&&value<=24}},{key:"set",value:function set(date,_flags,value){var hours=value<=24?value%24:value;return date.setUTCHours(hours,0,0,0),date}}]),Hour1To24Parser}(Parser),MinuteParser=function(_Parser){_inherits(MinuteParser,_Parser);var _super=_createSuper(MinuteParser);function MinuteParser(){var _this;_classCallCheck(this,MinuteParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",60),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["t","T"]),_this}return _createClass(MinuteParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"m":return parseNumericPattern(numericPatterns_minute,dateString);case"mo":return match.ordinalNumber(dateString,{unit:"minute"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=59}},{key:"set",value:function set(date,_flags,value){return date.setUTCMinutes(value,0,0),date}}]),MinuteParser}(Parser),SecondParser=function(_Parser){_inherits(SecondParser,_Parser);var _super=_createSuper(SecondParser);function SecondParser(){var _this;_classCallCheck(this,SecondParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",50),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["t","T"]),_this}return _createClass(SecondParser,[{key:"parse",value:function parse(dateString,token,match){switch(token){case"s":return parseNumericPattern(numericPatterns_second,dateString);case"so":return match.ordinalNumber(dateString,{unit:"second"});default:return parseNDigits(token.length,dateString)}}},{key:"validate",value:function validate(_date,value){return value>=0&&value<=59}},{key:"set",value:function set(date,_flags,value){return date.setUTCSeconds(value,0),date}}]),SecondParser}(Parser),FractionOfSecondParser=function(_Parser){_inherits(FractionOfSecondParser,_Parser);var _super=_createSuper(FractionOfSecondParser);function FractionOfSecondParser(){var _this;_classCallCheck(this,FractionOfSecondParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",30),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["t","T"]),_this}return _createClass(FractionOfSecondParser,[{key:"parse",value:function parse(dateString,token){return mapValue(parseNDigits(token.length,dateString),(function valueCallback(value){return Math.floor(value*Math.pow(10,3-token.length))}))}},{key:"set",value:function set(date,_flags,value){return date.setUTCMilliseconds(value),date}}]),FractionOfSecondParser}(Parser),ISOTimezoneWithZParser=function(_Parser){_inherits(ISOTimezoneWithZParser,_Parser);var _super=_createSuper(ISOTimezoneWithZParser);function ISOTimezoneWithZParser(){var _this;_classCallCheck(this,ISOTimezoneWithZParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",10),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["t","T","x"]),_this}return _createClass(ISOTimezoneWithZParser,[{key:"parse",value:function parse(dateString,token){switch(token){case"X":return parseTimezonePattern(timezonePatterns_basicOptionalMinutes,dateString);case"XX":return parseTimezonePattern(timezonePatterns_basic,dateString);case"XXXX":return parseTimezonePattern(timezonePatterns_basicOptionalSeconds,dateString);case"XXXXX":return parseTimezonePattern(timezonePatterns_extendedOptionalSeconds,dateString);default:return parseTimezonePattern(timezonePatterns_extended,dateString)}}},{key:"set",value:function set(date,flags,value){return flags.timestampIsSet?date:new Date(date.getTime()-value)}}]),ISOTimezoneWithZParser}(Parser),ISOTimezoneParser=function(_Parser){_inherits(ISOTimezoneParser,_Parser);var _super=_createSuper(ISOTimezoneParser);function ISOTimezoneParser(){var _this;_classCallCheck(this,ISOTimezoneParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",10),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens",["t","T","X"]),_this}return _createClass(ISOTimezoneParser,[{key:"parse",value:function parse(dateString,token){switch(token){case"x":return parseTimezonePattern(timezonePatterns_basicOptionalMinutes,dateString);case"xx":return parseTimezonePattern(timezonePatterns_basic,dateString);case"xxxx":return parseTimezonePattern(timezonePatterns_basicOptionalSeconds,dateString);case"xxxxx":return parseTimezonePattern(timezonePatterns_extendedOptionalSeconds,dateString);default:return parseTimezonePattern(timezonePatterns_extended,dateString)}}},{key:"set",value:function set(date,flags,value){return flags.timestampIsSet?date:new Date(date.getTime()-value)}}]),ISOTimezoneParser}(Parser),TimestampSecondsParser=function(_Parser){_inherits(TimestampSecondsParser,_Parser);var _super=_createSuper(TimestampSecondsParser);function TimestampSecondsParser(){var _this;_classCallCheck(this,TimestampSecondsParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",40),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens","*"),_this}return _createClass(TimestampSecondsParser,[{key:"parse",value:function parse(dateString){return parseAnyDigitsSigned(dateString)}},{key:"set",value:function set(_date,_flags,value){return[new Date(1e3*value),{timestampIsSet:!0}]}}]),TimestampSecondsParser}(Parser),TimestampMillisecondsParser=function(_Parser){_inherits(TimestampMillisecondsParser,_Parser);var _super=_createSuper(TimestampMillisecondsParser);function TimestampMillisecondsParser(){var _this;_classCallCheck(this,TimestampMillisecondsParser);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return _defineProperty(_assertThisInitialized(_this=_super.call.apply(_super,[this].concat(args))),"priority",20),_defineProperty(_assertThisInitialized(_this),"incompatibleTokens","*"),_this}return _createClass(TimestampMillisecondsParser,[{key:"parse",value:function parse(dateString){return parseAnyDigitsSigned(dateString)}},{key:"set",value:function set(_date,_flags,value){return[new Date(value),{timestampIsSet:!0}]}}]),TimestampMillisecondsParser}(Parser),parsers={G:new EraParser,y:new YearParser,Y:new LocalWeekYearParser,R:new ISOWeekYearParser,u:new ExtendedYearParser,Q:new QuarterParser,q:new StandAloneQuarterParser,M:new MonthParser,L:new StandAloneMonthParser,w:new LocalWeekParser,I:new ISOWeekParser,d:new DateParser,D:new DayOfYearParser,E:new DayParser,e:new LocalDayParser,c:new StandAloneLocalDayParser,i:new ISODayParser,a:new AMPMParser,b:new AMPMMidnightParser,B:new DayPeriodParser,h:new Hour1to12Parser,H:new Hour0to23Parser,K:new Hour0To11Parser,k:new Hour1To24Parser,m:new MinuteParser,s:new SecondParser,S:new FractionOfSecondParser,X:new ISOTimezoneWithZParser,x:new ISOTimezoneParser,t:new TimestampSecondsParser,T:new TimestampMillisecondsParser},formattingTokensRegExp=/[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g,longFormattingTokensRegExp=/P+p+|P+|p+|''|'(''|[^'])+('|$)|./g,escapedStringRegExp=/^'([^]*?)'?$/,doubleQuoteRegExp=/''/g,notWhitespaceRegExp=/\S/,unescapedLatinCharacterRegExp=/[a-zA-Z]/;function cleanEscapedString(input){return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp,"'")}var resizeObserver,name="data-grid",DataGrid=function(){function DataGrid(hostRef){var _this3=this;!function _classCallCheck2(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,DataGrid),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.i)(this,hostRef),this.scaleEdit=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.e)(this,"scale-edit",7),this.scaleEditLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.e)(this,"scaleEdit",7),this.scaleSort=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.e)(this,"scale-sort",7),this.scaleSortLegacy=Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.e)(this,"scaleSort",7),this.forceRender=0,this.paginationStart=0,this.scrollY=0,this.freezeHeader=!1,this.heading="",this.hideBorder=!1,this.hideHeader=!1,this.hideInfo=!1,this.hideMenu=!1,this.numbered=!1,this.pageSize=1/0,this.selectable=!1,this.selection=[],this.shadeAlternate=!0,this.visible=!0,this.sortableColumnTitle="Activate to sort column",this.activeSortingIndex=-1,this.contentWidth=100,this.dataNeedsCheck=!0,this.hasData=!1,this.isMobile=!1,this.isPagination=!1,this.isSortable=!1,this.lastContainerWidth=100,this.mobileTitleIndex=-1,this.needsAutoWidthParse=!1,this.needsColumnResize=!1,this.numberColumnWidth=0,this.selectionColumnWidth=22,this.handleMenuListClick=function(event){var menuItems=["sortBy","toggleVisibility"],currentMenuItemsIndex=menuItems.indexOf(event.target.id);if(currentMenuItemsIndex>-1){var inactiveMenuItem=_this3.hostElement.shadowRoot.querySelector("#"+menuItems[1-currentMenuItemsIndex]+"List");inactiveMenuItem&&inactiveMenuItem.setAttribute("opened","false")}},this.onDividerMove=this.onDividerMove.bind(this),this.onDividerUp=this.onDividerUp.bind(this),this.applyResponsiveClasses=this.applyResponsiveClasses.bind(this),this.updateColumnStretching=this.updateColumnStretching.bind(this)}return function _createClass2(Constructor,protoProps,staticProps){return protoProps&&__defineProperties(Constructor.prototype,protoProps),staticProps&&__defineProperties(Constructor,staticProps),Constructor}(DataGrid,[{key:"componentWillLoad",value:function componentWillLoad(){this.fieldsHandler(),this.rowsHandler()}},{key:"componentWillUpdate",value:function componentWillUpdate(){}},{key:"componentDidRender",value:function componentDidRender(){var _this4=this;this.needsAutoWidthParse&&this.calculateAutoWidths(),setTimeout((function(){_this4.needsColumnResize&&_this4.updateColumnStretching()}))}},{key:"componentDidLoad",value:function componentDidLoad(){this.addResizeObserver()}},{key:"componentDidUpdate",value:function componentDidUpdate(){}},{key:"disconnectedCallback",value:function disconnectedCallback(){this.removeResizeObserver()}},{key:"fieldsHandler",value:function fieldsHandler(){this.parseFields(),this.checkForMobileTitle(),this.checkForSortableFields(),this.dataNeedsCheck=!0}},{key:"rowsHandler",value:function rowsHandler(){this.paginationStart>this.rows.length&&(this.paginationStart=this.rows.length-this.rows.length%this.pageSize),this.parseRows(),this.setInitialRowProps(),this.resetSortingToggle(),this.dataNeedsCheck=!0,this.needsAutoWidthParse=!0,this.needsColumnResize=!0,this.rows.length<=this.paginationStart&&this.paginationStart-this.pageSize>-1&&(this.paginationStart=this.paginationStart-this.pageSize)}},{key:"parseFields",value:function parseFields(){this.fields&&"string"==typeof this.fields&&(this.fields=JSON.parse(this.fields))}},{key:"parseRows",value:function parseRows(){this.rows&&"string"==typeof this.rows&&(this.rows=JSON.parse(this.rows))}},{key:"setInitialRowProps",value:function setInitialRowProps(){this.rows&&this.rows.length&&(this.rows.forEach((function(row,i){row.initialIndex=i,row.selected=!1})),this.isPagination=this.pageSize<=this.rows.length-1)}},{key:"checkHasData",value:function checkHasData(){if(!this.fields)return!1;for(var i=0;i<this.fields.length;i++)if(this.fields[i].type||(this.fields[i].type="text"),!CELL_TYPES[this.fields[i].type])return console.warn('Unrecognised field type: "'+this.fields[i].type+'"'),!1;if(!this.rows||!this.rows.length)return!1;for(var _i=0;_i<this.rows.length;_i++)if(this.rows[_i].length!==this.fields.length)return console.warn("Unable to render "+(this.heading&&'"'+this.heading+'" ')+"table: row data length not equal to supplied fields."),!1;return!0}},{key:"checkForMobileTitle",value:function checkForMobileTitle(){var _this5=this;this.mobileTitleIndex=-1,this.fields&&this.fields.every((function(_ref24,i){return!_ref24.mobileTitle||(_this5.mobileTitleIndex=i,!1)}))}},{key:"checkForSortableFields",value:function checkForSortableFields(){var _this6=this;this.isSortable=!1,this.fields&&this.fields.forEach((function(_ref25){_ref25.sortable&&(_this6.isSortable=!0)}))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_47__.a)(name,!this.isMobile&&name+"--desktop",this.isMobile&&name+"--mobile",this.shadeAlternate&&name+"--shade-alternate",this.freezeHeader&&name+"--freeze-header",this.hideBorder&&name+"--hide-border",this.hideMenu&&name+"--hide-menu")}},{key:"polyfillMousePosition",value:function polyfillMousePosition(e){e.changedTouches&&e.changedTouches.length&&(e.x=e.changedTouches[0].pageX,e.y=e.changedTouches[0].pageY),void 0===e.x&&(e.x=e.clientX,e.y=e.clientY)}},{key:"getDefaultLongestContent",value:function getDefaultLongestContent(_ref26){var longestContent,rows=_ref26.rows,columnIndex=_ref26.columnIndex,maxLength=0;return rows.forEach((function(row){var length=row[columnIndex].toString().length;length>maxLength&&(longestContent=row[columnIndex],maxLength=length)})),longestContent}},{key:"toggleSelectAll",value:function toggleSelectAll(){var _this7=this;this.elToggleSelectAll&&(this.rows.forEach((function(row){return row.selected=_this7.elToggleSelectAll.checked})),this.updateReadableSelection(),this.forceRender++)}},{key:"toggleRowSelect",value:function toggleRowSelect(_ref27,rowIndex){var target=_ref27.target;this.rows[rowIndex].selected=target.checked,this.updateReadableSelection(),this.forceRender++}},{key:"updateReadableSelection",value:function updateReadableSelection(){var _this8=this;this.selection.length=0,this.rows.forEach((function(row){return row.selected&&_this8.selection.push(row)})),this.hostElement.shadowRoot.querySelector(".thead__cell--selection scale-checkbox").checked=!!this.selection.length}},{key:"toggleTableSorting",value:function toggleTableSorting(sortDirection,columnIndex,type){this.activeSortingIndex>-1&&this.activeSortingIndex!==columnIndex&&(this.fields[this.activeSortingIndex].sortDirection="none"),this.activeSortingIndex=columnIndex;var newSortDirection="none"===sortDirection?"ascending":"ascending"===sortDirection?"descending":"none";this.fields[columnIndex].sortDirection=newSortDirection,this.sortTable(newSortDirection,type,columnIndex)}},{key:"sortTable",value:function sortTable(sortDirection,type,columnIndex){var format=this.fields[columnIndex].format;if("none"===sortDirection)this.rows.sort((function(a,b){return a.initialIndex-b.initialIndex}));else if("date"===type&&format)this.rows.sort((function(a,b){var getDateObject=function getDateObject(dateString){var parsed=function parse(dirtyDateString,dirtyFormatString,dirtyReferenceDate,options){var _ref,_options$locale,_ref2,_ref3,_ref4,_options$firstWeekCon,_options$locale2,_options$locale2$opti,_defaultOptions$local,_defaultOptions$local2,_ref5,_ref6,_ref7,_options$weekStartsOn,_options$locale3,_options$locale3$opti,_defaultOptions$local3,_defaultOptions$local4;Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.h)(3,arguments);var dateString=String(dirtyDateString),formatString=String(dirtyFormatString),defaultOptions=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.f)(),locale$1=null!==(_ref=null!==(_options$locale=null==options?void 0:options.locale)&&void 0!==_options$locale?_options$locale:defaultOptions.locale)&&void 0!==_ref?_ref:_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.g;if(!locale$1.match)throw new RangeError("locale must contain match property");var firstWeekContainsDate=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.i)(null!==(_ref2=null!==(_ref3=null!==(_ref4=null!==(_options$firstWeekCon=null==options?void 0:options.firstWeekContainsDate)&&void 0!==_options$firstWeekCon?_options$firstWeekCon:null==options||null===(_options$locale2=options.locale)||void 0===_options$locale2||null===(_options$locale2$opti=_options$locale2.options)||void 0===_options$locale2$opti?void 0:_options$locale2$opti.firstWeekContainsDate)&&void 0!==_ref4?_ref4:defaultOptions.firstWeekContainsDate)&&void 0!==_ref3?_ref3:null===(_defaultOptions$local=defaultOptions.locale)||void 0===_defaultOptions$local||null===(_defaultOptions$local2=_defaultOptions$local.options)||void 0===_defaultOptions$local2?void 0:_defaultOptions$local2.firstWeekContainsDate)&&void 0!==_ref2?_ref2:1);if(!(firstWeekContainsDate>=1&&firstWeekContainsDate<=7))throw new RangeError("firstWeekContainsDate must be between 1 and 7 inclusively");var weekStartsOn=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.i)(null!==(_ref5=null!==(_ref6=null!==(_ref7=null!==(_options$weekStartsOn=null==options?void 0:options.weekStartsOn)&&void 0!==_options$weekStartsOn?_options$weekStartsOn:null==options||null===(_options$locale3=options.locale)||void 0===_options$locale3||null===(_options$locale3$opti=_options$locale3.options)||void 0===_options$locale3$opti?void 0:_options$locale3$opti.weekStartsOn)&&void 0!==_ref7?_ref7:defaultOptions.weekStartsOn)&&void 0!==_ref6?_ref6:null===(_defaultOptions$local3=defaultOptions.locale)||void 0===_defaultOptions$local3||null===(_defaultOptions$local4=_defaultOptions$local3.options)||void 0===_defaultOptions$local4?void 0:_defaultOptions$local4.weekStartsOn)&&void 0!==_ref5?_ref5:0);if(!(weekStartsOn>=0&&weekStartsOn<=6))throw new RangeError("weekStartsOn must be between 0 and 6 inclusively");if(""===formatString)return""===dateString?Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyReferenceDate):new Date(NaN);var _step,subFnOptions={firstWeekContainsDate:firstWeekContainsDate,weekStartsOn:weekStartsOn,locale:locale$1},setters=[new DateToSystemTimezoneSetter],tokens=formatString.match(longFormattingTokensRegExp).map((function(substring){var firstCharacter=substring[0];return firstCharacter in longFormatters?(0,longFormatters[firstCharacter])(substring,locale$1.formatLong):substring})).join("").match(formattingTokensRegExp),usedTokens=[],_iterator=_createForOfIteratorHelper(tokens);try{var _loop=function _loop(){var token=_step.value;null!=options&&options.useAdditionalWeekYearTokens||!isProtectedWeekYearToken(token)||throwProtectedError(token,formatString,dirtyDateString),null!=options&&options.useAdditionalDayOfYearTokens||!isProtectedDayOfYearToken(token)||throwProtectedError(token,formatString,dirtyDateString);var firstCharacter=token[0],parser=parsers[firstCharacter];if(parser){var incompatibleTokens=parser.incompatibleTokens;if(Array.isArray(incompatibleTokens)){var incompatibleToken=usedTokens.find((function(usedToken){return incompatibleTokens.includes(usedToken.token)||usedToken.token===firstCharacter}));if(incompatibleToken)throw new RangeError("The format string mustn't contain `".concat(incompatibleToken.fullToken,"` and `").concat(token,"` at the same time"))}else if("*"===parser.incompatibleTokens&&usedTokens.length>0)throw new RangeError("The format string mustn't contain `".concat(token,"` and any other token at the same time"));usedTokens.push({token:firstCharacter,fullToken:token});var parseResult=parser.run(dateString,token,locale$1.match,subFnOptions);if(!parseResult)return{v:new Date(NaN)};setters.push(parseResult.setter),dateString=parseResult.rest}else{if(firstCharacter.match(unescapedLatinCharacterRegExp))throw new RangeError("Format string contains an unescaped latin alphabet character `"+firstCharacter+"`");if("''"===token?token="'":"'"===firstCharacter&&(token=cleanEscapedString(token)),0!==dateString.indexOf(token))return{v:new Date(NaN)};dateString=dateString.slice(token.length)}};for(_iterator.s();!(_step=_iterator.n()).done;){var _ret=_loop();if("object"===Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.a)(_ret))return _ret.v}}catch(err){_iterator.e(err)}finally{_iterator.f()}if(dateString.length>0&&notWhitespaceRegExp.test(dateString))return new Date(NaN);var uniquePrioritySetters=setters.map((function(setter){return setter.priority})).sort((function(a,b){return b-a})).filter((function(priority,index,array){return array.indexOf(priority)===index})).map((function(priority){return setters.filter((function(setter){return setter.priority===priority})).sort((function(a,b){return b.subPriority-a.subPriority}))})).map((function(setterArray){return setterArray[0]})),date=Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.c)(dirtyReferenceDate);if(isNaN(date.getTime()))return new Date(NaN);var _step2,utcDate=subMilliseconds(date,Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.d)(date)),flags={},_iterator2=_createForOfIteratorHelper(uniquePrioritySetters);try{for(_iterator2.s();!(_step2=_iterator2.n()).done;){var setter=_step2.value;if(!setter.validate(utcDate,subFnOptions))return new Date(NaN);var result=setter.set(utcDate,flags,subFnOptions);Array.isArray(result)?(utcDate=result[0],Object(_index_264b2c3e_js__WEBPACK_IMPORTED_MODULE_49__.e)(flags,result[1])):utcDate=result}}catch(err){_iterator2.e(err)}finally{_iterator2.f()}return utcDate}(dateString,format,new Date);return parsed},dateObjectA=getDateObject(a[columnIndex]),dateObjectB=getDateObject(b[columnIndex]);return"ascending"===sortDirection?dateObjectA.valueOf()-dateObjectB.valueOf():dateObjectB.valueOf()-dateObjectA.valueOf()}));else switch(CELL_TYPES[type]&&CELL_TYPES[type].defaults&&CELL_TYPES[type].defaults.sortBy||CELL_DEFAULTS.sortBy){case"text":case"date":"ascending"===sortDirection?this.rows.sort((function(a,b){var textA=a[columnIndex].toLowerCase(),textB=b[columnIndex].toLowerCase();return textA<textB?-1:textA>textB?1:0})):this.rows.sort((function(a,b){var textA=a[columnIndex].toLowerCase(),textB=b[columnIndex].toLowerCase();return textA>textB?-1:textA<textB?1:0}));break;case"number":"ascending"===sortDirection?this.rows.sort((function(a,b){return Number(a[columnIndex])-Number(b[columnIndex])})):this.rows.sort((function(a,b){return Number(b[columnIndex])-Number(a[columnIndex])}))}this.forceRender++,this.triggerSortEvent(sortDirection,type,columnIndex)}},{key:"resetSortingToggle",value:function resetSortingToggle(){this.activeSortingIndex>-1&&(this.fields[this.activeSortingIndex].sortDirection="none"),this.activeSortingIndex=-1}},{key:"onDividerDown",value:function onDividerDown(e){this.polyfillMousePosition(e),e.preventDefault(),this.activeDivider=e.target,e.target.downX=e.x,this.activeDivider.interactiveWidth=0,window.addEventListener("mousemove",this.onDividerMove),window.addEventListener("touchmove",this.onDividerMove),window.addEventListener("mouseup",this.onDividerUp),window.addEventListener("touchend",this.onDividerUp)}},{key:"onDividerMove",value:function onDividerMove(e){this.polyfillMousePosition(e);var _this$activeDivider$d=this.activeDivider.dataset,width=_this$activeDivider$d.width,min=_this$activeDivider$d.min,max=_this$activeDivider$d.max,diff=e.x-this.activeDivider.downX,newWidth=Math.min(Number(max),Math.max(Number(min),Number(width)+diff)),adjustedDiff=newWidth-Number(width);this.activeDivider.interactiveWidth=newWidth,this.activeDivider.style.transform="translateX("+adjustedDiff+"px)"}},{key:"onDividerUp",value:function onDividerUp(){var index=this.activeDivider.dataset.index;this.activeDivider.interactiveWidth&&(this.fields[Number(index)].width=this.activeDivider.interactiveWidth),this.activeDivider.style.transform="translateX(0px)",window.removeEventListener("mousemove",this.onDividerMove),window.removeEventListener("touchmove",this.onDividerMove),window.removeEventListener("mouseup",this.onDividerUp),window.removeEventListener("touchend",this.onDividerUp),this.needsColumnResize=!0,this.updateColumnStretching(),this.forceRender++}},{key:"toggleVisibilityMenu",value:function toggleVisibilityMenu(e){e.preventDefault();var visibilityToggle=this.hostElement.shadowRoot.querySelector(".visibility-toggle"),menu=visibilityToggle.children[1];"none"===visibilityToggle.style.display?(visibilityToggle.style.display="block",menu.style.transform="translate("+e.clientX+"px, "+e.clientY+"px)"):visibilityToggle.style.display="none"}},{key:"toggleColumnVisibility",value:function toggleColumnVisibility(value,columnIndex){this.fields[columnIndex].visible=value,this.forceRender++,this.needsColumnResize=!0,this.updateColumnStretching()}},{key:"addResizeObserver",value:function addResizeObserver(){resizeObserver||(resizeObserver=new ResizeObserver((function(entries){var _step3,_iterator3=_createForOfIteratorHelper2(entries);try{for(_iterator3.s();!(_step3=_iterator3.n()).done;){var entry=_step3.value;if(null===entry.target.offsetParent)return;entry.target.applyResponsiveClasses(entry),entry.target.updateColumnStretching()}}catch(err){_iterator3.e(err)}finally{_iterator3.f()}}))),this.elMmainContainer=this.hostElement.shadowRoot.querySelector("."+name),this.elMmainContainer.applyResponsiveClasses=this.applyResponsiveClasses,this.elMmainContainer.updateColumnStretching=this.updateColumnStretching,resizeObserver.observe(this.elMmainContainer)}},{key:"removeResizeObserver",value:function removeResizeObserver(){this.elMmainContainer&&resizeObserver.unobserve(this.elMmainContainer)}},{key:"applyResponsiveClasses",value:function applyResponsiveClasses(){var newIsMobile=this.elMmainContainer.offsetWidth<=500;this.isMobile!==newIsMobile&&this.forceRender++,this.isMobile=newIsMobile}},{key:"updateColumnStretching",value:function updateColumnStretching(){var _this9=this;if(!this.needsAutoWidthParse){var container=this.elMmainContainer,containerWidth=container.offsetWidth-2;if((this.lastContainerWidth!==containerWidth||this.needsColumnResize)&&(this.needsColumnResize=!1,this.lastContainerWidth=containerWidth,!(container.offsetWidth<=500))){var total,targetContentWidth=(total=0,total+=8,_this9.numbered&&(total+=_this9.numberColumnWidth+32),_this9.selectable&&(total+=_this9.selectionColumnWidth+32,_this9.numbered&&(total-=16)),_this9.fields.forEach((function(_ref28){var _ref28$visible=_ref28.visible,visible=void 0===_ref28$visible||_ref28$visible,width=_ref28.width;visible&&(total+=width+32)})),total);this.contentWidth=Math.max(targetContentWidth,containerWidth);var diff=containerWidth-targetContentWidth;if(diff<=0)this.fields.forEach((function(field){return field.stretchWidth=0}));else{var totalSetWeight=0,unsetColsCount=0;this.fields.forEach((function(_ref29){var _ref29$visible=_ref29.visible,visible=void 0===_ref29$visible||_ref29$visible,stretchWeight=_ref29.stretchWeight;visible&&("number"==typeof stretchWeight?totalSetWeight+=stretchWeight:unsetColsCount++)}));var remainderWeight=Math.max(0,1-totalSetWeight);totalSetWeight=Math.max(1,totalSetWeight),this.fields.forEach((function(field){var _field$visible=field.visible,visible=void 0===_field$visible||_field$visible,stretchWeight=field.stretchWeight;if(visible){var weight=0;"number"==typeof stretchWeight?weight=stretchWeight/totalSetWeight:remainderWeight>0&&(weight=remainderWeight/unsetColsCount),field.stretchWidth=diff*weight}}))}this.forceRender++}}}},{key:"calculateAutoWidths",value:function calculateAutoWidths(){var _this10=this,isVisible=!1;this.hostElement.shadowRoot.querySelectorAll("."+name+"__auto-width-check td").forEach((function(cell){isVisible||null===cell.offsetParent||(isVisible=!0),isVisible&&(_this10.fields[cell.dataset.columnindex].width=cell.clientWidth)})),isVisible&&setTimeout((function(){_this10.needsAutoWidthParse=!1,_this10.forceRender++}))}},{key:"triggerSortEvent",value:function triggerSortEvent(sortDirection,type,columnIndex){var data={rows:this.rows,type:type,sortDirection:sortDirection,columnIndex:columnIndex};Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_48__.d)(this,"scaleSort",data)}},{key:"triggerEditEvent",value:function triggerEditEvent(value,rowIndex,columnIndex){var data={rows:this.rows,rowIndex:rowIndex,columnIndex:columnIndex,value:value};Object(_utils_c4af5b47_js__WEBPACK_IMPORTED_MODULE_48__.d)(this,"scaleEdit",data),this.forceRender++}},{key:"onTableScroll",value:function onTableScroll(){if(this.freezeHeader&&!this.hideHeader){var scrollY=this.elScrollContainer.scrollTop;this.elTableHead.style.transform="translateY("+scrollY+"px)"}}},{key:"renderSettingsMenu",value:function renderSettingsMenu(){var _a,_b,_c,_this11=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-menu-flyout",{class:name+"__settings-menu"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-button",{slot:"trigger",variant:"secondary","icon-only":!0,"data-sortable":this.isSortable},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-service-settings",{accessibilityTitle:"Table options"})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-menu-flyout-list",null,this.isSortable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-menu-flyout-item",{id:"sortBy",onClick:this.handleMenuListClick},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-action-sort",{slot:"prefix"}),(null===(_a=this.localization)||void 0===_a?void 0:_a.sortBy)||"Sort By",Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-menu-flyout-list",{slot:"sublist",id:"sortByList"},this.fields.map((function(_ref30,columnIndex){var label=_ref30.label,type=_ref30.type,sortable=_ref30.sortable,_ref30$sortDirection=_ref30.sortDirection,sortDirection=void 0===_ref30$sortDirection?"none":_ref30$sortDirection;return sortable?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-menu-flyout-item",{"onScale-select":function onScaleSelect(){return _this11.toggleTableSorting(sortDirection,columnIndex,type)}},"ascending"===sortDirection&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-navigation-collapse-up",{size:16,slot:"prefix"}),"descending"===sortDirection&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-navigation-collapse-down",{size:16,slot:"prefix"}),"none"===sortDirection&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-navigation-collapse-up",{size:16,slot:"prefix",style:{opacity:"0"}}),label||type):""})))),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-menu-flyout-item",{id:"toggleVisibility",onClick:this.handleMenuListClick},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-action-hide-password",{slot:"prefix"}),(null===(_b=this.localization)||void 0===_b?void 0:_b.toggle)||"Toggle Visibility",Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-menu-flyout-list",{slot:"sublist","close-on-select":"false",id:"toggleVisibilityList"},this.fields.map((function(_ref31,columnIndex){var label=_ref31.label,type=_ref31.type,_ref31$visible=_ref31.visible,visible=void 0===_ref31$visible?void 0!==CELL_TYPES[type].defaults.visible?CELL_TYPES[type].defaults.visible:CELL_DEFAULTS.visible:_ref31$visible;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-menu-flyout-item",{checkable:"checkbox",checked:!!visible,"onScale-select":function onScaleSelect(){return _this11.toggleColumnVisibility(!visible,columnIndex)}},label||type)})))),this.selectable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-menu-flyout-item",{"onScale-select":function onScaleSelect(){_this11.elToggleSelectAll.checked=!_this11.elToggleSelectAll.checked,_this11.toggleSelectAll()}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon",{slot:"prefix",path:"M20.9328 10.6668C20.5132 10.6668 20.1731 11.0069 20.1731 11.4265V20.3269H1.5194V1.67309H16.5049C16.9245 1.67309 17.2646 1.33292 17.2646 0.913386C17.2646 0.49385 16.9245 0.153687 16.5049 0.153687H0.759699C0.340163 0.153687 0 0.49385 0 0.913386V21.0866C0 21.5062 0.340163 21.8463 0.759699 21.8463H20.9328C21.3523 21.8463 21.6925 21.5062 21.6925 21.0866V11.4265C21.6925 11.0069 21.3524 10.6668 20.9328 10.6668ZM23.7774 0.653387C23.4807 0.356739 22.9997 0.356739 22.703 0.653387L10.3293 13.0272L7.25501 9.9529C6.9583 9.65625 6.47732 9.65625 6.18061 9.9529C5.88396 10.2496 5.88396 10.7306 6.18061 11.0273L9.7921 14.6388C9.94045 14.7871 10.1349 14.8613 10.3293 14.8613C10.5237 14.8613 10.7181 14.7871 10.8665 14.6388L23.7774 1.72778C24.0741 1.43108 24.0741 0.950095 23.7774 0.653387Z"}),(null===(_c=this.localization)||void 0===_c?void 0:_c.select)||"Select / Deselect All"),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("slot",{name:"menu"})))}},{key:"renderTable",value:function renderTable(){var _this12=this;return this.needsAutoWidthParse?this.renderAutoWidthCheck():Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{ref:function ref(el){return _this12.elScrollContainer=el},class:name+"__scroll-container",style:{height:this.height||"auto"},onScroll:function onScroll(){return _this12.onTableScroll()}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("table",{class:name+"__table"},this.renderTableHead(),this.renderTableBody()))}},{key:"renderAutoWidthCheck",value:function renderAutoWidthCheck(){var _this13=this;this.numberColumnWidth=9*this.rows.length.toString().length;var autoCols=[];return this.fields.forEach((function(_ref32,columnIndex){var type=_ref32.type,_ref32$width=_ref32.width;"auto"===(void 0===_ref32$width?CELL_TYPES[type].defaults.width||CELL_DEFAULTS.width:_ref32$width)&&autoCols.push(columnIndex)})),autoCols.length?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("table",{class:name+"__auto-width-check "+name+"__table"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("tr",{class:"tbody__row"},autoCols.map((function(columnIndex){var field=_this13.fields[columnIndex],type=field.type,_field$cell=field.cell,cell=void 0===_field$cell?CELL_TYPES[type]:_field$cell,content=(cell.getLongestContent||_this13.getDefaultLongestContent)({rows:_this13.rows,columnIndex:columnIndex,field:field});return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("td",{class:"tbody__cell",style:{width:"auto"},"data-columnindex":columnIndex},cell.render({field:field,content:content,component:_this13,isAutoWidthCheck:!0}))})))):(this.needsAutoWidthParse=!1,this.renderTable())}},{key:"renderTableHead",value:function renderTableHead(){var _this14=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("thead",{ref:function ref(el){return _this14.elTableHead=el},class:"thead "+(this.hideHeader?"sr-only":"")},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("tr",{class:"thead__row"},this.numbered&&this.renderTableHeadNumberedCell(),this.selectable&&this.renderTableHeadSelectableCell(),this.fields.map((function(_ref33,columnIndex){var type=_ref33.type,_ref33$label=_ref33.label,label=void 0===_ref33$label?"":_ref33$label,_ref33$visible=_ref33.visible,visible=void 0===_ref33$visible?void 0!==CELL_TYPES[type].defaults.visible?CELL_TYPES[type].defaults.visible:CELL_DEFAULTS.visible:_ref33$visible,sortable=_ref33.sortable,_ref33$sortDirection=_ref33.sortDirection,sortDirection=void 0===_ref33$sortDirection?"none":_ref33$sortDirection,_ref33$resizable=_ref33.resizable,resizable=void 0===_ref33$resizable?void 0!==CELL_TYPES[type].defaults.resizable?CELL_TYPES[type].defaults.resizable:CELL_DEFAULTS.resizable:_ref33$resizable,_ref33$width=_ref33.width,width=void 0===_ref33$width?CELL_TYPES[type].defaults.width||CELL_DEFAULTS.width:_ref33$width,_ref33$minWidth=_ref33.minWidth,minWidth=void 0===_ref33$minWidth?CELL_TYPES[type].defaults.minWidth||CELL_DEFAULTS.minWidth:_ref33$minWidth,_ref33$maxWidth=_ref33.maxWidth,maxWidth=void 0===_ref33$maxWidth?CELL_TYPES[type].defaults.maxWidth||CELL_DEFAULTS.maxWidth:_ref33$maxWidth,_ref33$textAlign=_ref33.textAlign,textAlign=void 0===_ref33$textAlign?CELL_TYPES[type].defaults.textAlign||CELL_DEFAULTS.textAlign:_ref33$textAlign,_ref33$stretchWidth=_ref33.stretchWidth;if(visible){var props={class:"thead__cell",style:{width:"calc("+width+"px + "+(void 0===_ref33$stretchWidth?0:_ref33$stretchWidth)+"px)","justify-content":textAlign},"data-type":type};return sortable&&(props["aria-sort"]=sortDirection),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("th",Object.assign({title:sortable?_this14.sortableColumnTitle:void 0},props,sortable?{onKeyDown:function onKeyDown(event){["Enter"," "].includes(event.key)&&_this14.toggleTableSorting(sortDirection,columnIndex,type)},onClick:function onClick(e){e.target.matches(".thead__divider")||_this14.toggleTableSorting(sortDirection,columnIndex,type)},tabindex:0,class:props.class+" thead-sortable"}:{}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:"thead__title"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("span",{class:"thead__text"},sortable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-content-sort-indicator-up",{size:16,class:"thead__arrow-top"}),sortable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-icon-content-sort-indicator-down",{size:16,class:"thead__arrow-bottom"}),label)),resizable&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:"thead__divider","data-index":columnIndex,"data-width":width,"data-min":minWidth,"data-max":maxWidth,onMouseDown:function onMouseDown(e){return _this14.onDividerDown(e)},onTouchStart:function onTouchStart(e){return _this14.onDividerDown(e)},"aria-hidden":"true"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:"thead__divider-line"})))}}))))}},{key:"renderTableHeadNumberedCell",value:function renderTableHeadNumberedCell(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("th",{class:"thead__cell  thead__cell--numbered",style:{width:this.numberColumnWidth+"px"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("span",{class:"scl-body"},"#"))}},{key:"renderTableHeadSelectableCell",value:function renderTableHeadSelectableCell(){var _this15=this,style={width:this.selectionColumnWidth+"px"};return this.numbered&&(style.paddingLeft="0px"),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("th",{class:"thead__cell thead__cell--selection",style:style,title:"Select"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-checkbox",{ref:function ref(el){return _this15.elToggleSelectAll=el},onScaleChange:function onScaleChange(){return _this15.toggleSelectAll()},hideLabel:!0,"aria-label":"Select"}))}},{key:"renderTableBody",value:function renderTableBody(){var _this16=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("tbody",{class:"tbody"},function(){for(var rows=[],total=_this16.rows.length,start=_this16.paginationStart,end=Math.min(total,_this16.paginationStart+_this16.pageSize),_loop2=function _loop2(rowIndex){var rowData=_this16.rows[rowIndex],rowNestedContent=[],isNestedExpanded=!1;rows.push(Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("tr",{class:"tbody__row"},_this16.renderMobileTitle(rowData),_this16.numbered&&_this16.renderTableBodyNumberedCell(rowIndex),_this16.selectable&&_this16.renderTableBodySelectableCell(rowIndex),rowData.map((function(cellContent,columnIndex){var field=_this16.fields[columnIndex];if(void 0!==field.visible?field.visible:void 0!==CELL_TYPES[field.type].defaults.visible?CELL_TYPES[field.type].defaults.visible:CELL_DEFAULTS.visible){if("html"===field.type){if(!cellContent)return _this16.renderTableCell(field,null,rowIndex,columnIndex);cellContent.isExpanded&&(isNestedExpanded=!0),rowNestedContent.push({content:cellContent})}return _this16.renderTableCell(field,cellContent,rowIndex,columnIndex)}})))),rowNestedContent.length&&rows.push(Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:"tbody__nested",style:{width:_this16.contentWidth+"px",display:isNestedExpanded?"block":"none"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("td",{class:"tbody__nested-cell"},rowNestedContent.map((function(_ref34){var content=_ref34.content;return content&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{ref:function ref(el){if(el){for(var child=el.lastElementChild;child;)el.removeChild(child),child=el.lastElementChild;el.appendChild(content)}}})})))))},rowIndex=start;rowIndex<end;rowIndex++)_loop2(rowIndex);return rows}())}},{key:"renderMobileTitle",value:function renderMobileTitle(rowData){return-1===this.mobileTitleIndex?Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("h5",{class:"tbody__mobile-title scl-h5"}," "):Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("h5",{class:"tbody__mobile-title scl-h5"},rowData[this.mobileTitleIndex])}},{key:"renderTableBodyNumberedCell",value:function renderTableBodyNumberedCell(rowIndex){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("td",{class:"tbody__cell tbody__cell--numbered",style:{width:this.numberColumnWidth+"px"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("p",{class:"scl-body"},rowIndex+1))}},{key:"renderTableBodySelectableCell",value:function renderTableBodySelectableCell(rowIndex){var _this17=this,style={width:this.selectionColumnWidth+"px"};return this.numbered&&(style.marginLeft="0px",style.paddingLeft="0px"),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("td",{title:this.rows[rowIndex][0],class:"tbody__cell tbody__cell--selection",style:style},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-checkbox",{checked:this.rows[rowIndex].selected,onScaleChange:function onScaleChange(e){return _this17.toggleRowSelect(e,rowIndex)},hideLabel:!0}))}},{key:"renderTableCell",value:function renderTableCell(field,content,rowIndex,columnIndex){var cell=CELL_TYPES[field.type],label=field.label,_field$width=field.width,width=void 0===_field$width?cell.defaults.width||CELL_DEFAULTS.width:_field$width,_field$stretchWidth=field.stretchWidth,stretchWidth=void 0===_field$stretchWidth?0:_field$stretchWidth,mobileTitle=field.mobileTitle;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("td",{class:"tbody__cell"+(mobileTitle?" tbody__cell--used-as-mobile-title":""),style:{width:"calc("+width+"px + "+stretchWidth+"px)"}},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:"tbody__mobile-label"},label),cell.render({field:field,content:content,component:this,rowIndex:rowIndex,columnIndex:columnIndex}))}},{key:"renderTableInfo",value:function renderTableInfo(){var _this18=this;return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:"info"},this.selectable&&!!this.selection.length&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:"info__selection"},this.selection.length+" row"+(this.selection.length>1?"s":"")+" selected"),this.isPagination&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("scale-pagination",{class:"info__pagination",hideBorder:!this.isMobile,startElement:this.paginationStart,totalElements:this.rows.length,pageSize:this.pageSize,onScalePagination:function onScalePagination(_ref35){var detail=_ref35.detail;return _this18.paginationStart=detail.startElement}}))}},{key:"render",value:function render(){return this.dataNeedsCheck&&(this.hasData=this.checkHasData()),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.c,{style:{display:this.visible?"block":"none"}},this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",{class:name+"__title-block"},this.heading&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("h4",{class:name+"__heading scl-h5"},this.heading),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("div",null,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.g)("slot",null)),this.hasData&&this.renderSettingsMenu()),this.hasData&&this.renderTable(),this.hasData&&!this.hideInfo&&!this.needsAutoWidthParse&&(this.selectable||this.isPagination)&&this.renderTableInfo()))}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_46__.f)(this)}}],[{key:"watchers",get:function get(){return{fields:["fieldsHandler"],rows:["rowsHandler"]}}}]),DataGrid}();DataGrid.style=".scl-body{margin:0;font:var(--telekom-text-style-body)}.scl-label{margin:0;font:var(--telekom-text-style-small)}.scl-h1{margin:0;font:var(--telekom-text-style-heading-1)}.scl-h2{margin:0;font:var(--telekom-text-style-heading-2)}.scl-h3{margin:0;font:var(--telekom-text-style-heading-3)}.scl-h4{margin:0;font:var(--telekom-text-style-heading-4)}.scl-h5{margin:0;font:var(--telekom-text-style-heading-5)}.scl-h6{margin:0;font:var(--telekom-text-style-heading-6)}:host{font-family:var(--telekom-typography-font-family-sans);font-size:var(--telekom-typography-font-size-body);font-weight:var(--telekom-typography-font-weight-regular);line-height:var(--telekom-typography-line-spacing-standard);color:var(--telekom-color-text-and-icon-standard)}.data-grid input,.data-grid select{letter-spacing:inherit;font-weight:inherit;font-family:inherit;line-height:inherit}.data-grid{position:relative;display:block;background:var(--telekom-color-ui-state-fill-standard);border-radius:var(--telekom-radius-large);border:1px solid var(--telekom-color-ui-faint);overflow:hidden}.data-grid--hide-border{border:none}.data-grid__auto-width-check{opacity:0}.data-grid__title-block{display:flex;align-items:center;justify-content:flex-end;padding-right:var(--telekom-spacing-composition-space-06);padding-left:var(--telekom-spacing-composition-space-08)}.data-grid__heading{flex-grow:1}.data-grid__title-block ::slotted(*){margin-left:var(--telekom-spacing-composition-space-04)}.data-grid__settings-menu{margin-left:var(--telekom-spacing-composition-space-04)}.data-grid__scroll-container{overflow:auto;overflow-x:overlay;overflow-y:overlay;ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-gutter:stable}.data-grid__table{border-spacing:0;border-collapse:collapse;overflow:hidden}.data-grid--hide-menu .data-grid__settings-menu{display:none}.data-grid:not(.data-grid--hide-menu) .data-grid__title-block{min-height:72px}.data-grid--hide-menu .data-grid__title-block{padding-right:var(--telekom-spacing-composition-space-06)}.thead{display:block;white-space:nowrap;border-bottom:1px solid var(--telekom-color-ui-faint);position:relative;background:var(--telekom-color-ui-state-fill-standard);z-index:1}.data-grid--freeze-header .thead{z-index:30;background-color:var(--telekom-color-background-canvas)}.thead-sortable{cursor:pointer}.thead-sortable:focus{box-shadow:inset 0 0 0 var(--telekom-spacing-composition-space-02)\n    var(--telekom-color-functional-focus-standard)}.thead__cell{display:inline-flex;align-items:center;height:var(--telekom-spacing-composition-space-10);text-align:left;user-select:none;position:relative;padding:0 var(--telekom-spacing-composition-space-06);color:var(--telekom-color-text-and-icon-additional)}.thead__cell--numbered{text-align:right;justify-content:flex-end}.thead__cell--selection{justify-content:center;text-align:center}.thead__cell--selection xds-checkbox::part(container){justify-content:center}.thead__title{color:var(--telekom-color-text-and-icon-standard)}.thead__text{font-size:var(--telekom-typography-font-size-small);line-height:var(--telekom-typography-line-spacing-standard);position:relative}.thead__arrow-top,.thead__arrow-bottom{position:absolute;display:none !important;top:-2px;left:-16px}.thead__sort-prompt{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;background:none;border:0;opacity:1;cursor:pointer}.thead__divider{position:absolute;right:calc(-1 * var(--telekom-spacing-composition-space-04));bottom:0px;height:100%;padding:19px var(--telekom-spacing-composition-space-04) 0px;box-sizing:border-box;cursor:col-resize;z-index:1}.thead__divider-line{pointer-events:none;height:100%;width:1px;background:var(--telekom-color-ui-faint)}.thead__cell:first-child{padding-left:var(--telekom-spacing-composition-space-08)}.thead__cell:focus{outline:none}.thead__cell[aria-sort='ascending'] .thead__arrow-top{display:inline-flex !important}.thead__cell[aria-sort='descending'] .thead__arrow-bottom{display:inline-flex !important}.thead__cell[aria-sort]:hover{color:var(--telekom-color-text-and-icon-primary-hovered)}.thead__cell[aria-sort='none']:hover .thead__arrow-top,.thead__cell[aria-sort='none']:hover .thead__arrow-bottom{display:none !important}.thead__cell[aria-sort='ascending']:hover .thead__arrow-top{color:var(--telekom-color-text-and-icon-primary-hovered)}.thead__cell[aria-sort='descending']:hover .thead__arrow-bottom{color:var(--telekom-color-text-and-icon-primary-hovered)}.tbody{display:block}.tbody__row{display:block;white-space:nowrap}.tbody__mobile-title{display:none}.tbody__mobile-label{display:none}.tbody__cell{display:inline-block;margin:8px;padding:8px;overflow:hidden;}.tbody__cell--numbered{text-align:right}.tbody__cell--selection{justify-content:center;text-align:center}.tbody__cell--selection scale-checkbox::part(container),.tbody__cell--selection scale-checkbox [part='container']{justify-content:center}.tbody__cell scale-checkbox{width:auto}.tbody__nested{white-space:nowrap;padding:0px;margin:0px}.tbody__nested-cell{display:block;padding:var(--telekom-spacing-composition-space-06);margin:0px}.tbody__cell:first-of-type{margin-left:var(--telekom-spacing-composition-space-06);}.tbody__nested-cell:first-child{margin-left:0px}.data-grid--shade-alternate .tbody__row:nth-of-type(even),.data-grid--shade-alternate .tbody__nested:nth-of-type(even){background:var(--telekom-color-background-surface-subtle)}.data-grid__auto-width-check .tbody__cell{padding:0}.tbody__tag-list{list-style:none;padding:0;margin:0}.tbody__tag-list li{display:inline-block;margin-right:8px}.tbody__tag-list li:last-child{margin-right:0}.data-grid input[type='checkbox']{display:block;height:14px;margin:5px 4px}.tbody__text-cell{display:flex;align-items:center}.tbody__text-cell-prefix{display:inline-flex;align-items:center;margin-right:0.5em}.tbody__text-cell-suffix{display:inline-flex;align-items:center;margin-left:0.5em}.tbody__cell p{overflow:hidden;text-overflow:ellipsis}.tbody__cell scale-link{overflow:hidden;text-overflow:ellipsis}.tbody__bar-cell{display:inline-flex;width:100%}.tbody__cell scale-progress-bar{flex-grow:1}.tbody__actions scale-button{margin-right:var(--telekom-spacing-composition-space-04)}.data-grid-progress-bar::part(progress-bar){min-width:50px;max-width:200px}.data-grid-progress-bar::part(status){padding-top:0}.info{height:44px;position:relative;border-top:var(--telekom-line-weight-standard) solid\n    var(--telekom-color-ui-subtle);display:flex;justify-content:center}.info__selection{position:absolute;bottom:0;line-height:54px;left:var(--telekom-spacing-composition-space-08)}.data-grid--hide-border:not(.data-grid--mobile) .info__pagination{border-bottom:1px solid var(--telekom-color-ui-subtle);border-right:1px solid var(--telekom-color-ui-subtle)}.data-grid--mobile{border:none;background:none}.data-grid--mobile .data-grid__title-block{padding-left:0;padding-right:0}.data-grid--hide-menu.data-grid--mobile .data-grid__title-block{padding-right:0}.data-grid--mobile .data-grid__settings-menu{right:0}.data-grid--mobile .data-grid__scroll-container{height:auto !important}.data-grid--mobile .data-grid__table{display:block;height:auto !important}.data-grid--mobile .thead{display:none}.data-grid--mobile .tbody{display:block}.data-grid--mobile .tbody__row{display:block;position:relative;white-space:initial;margin:0 0 var(--telekom-spacing-composition-space-04);padding:var(--telekom-spacing-composition-space-08);border-radius:var(--telekom-radius-standard);background:var(--telekom-color-background-surface);border:1px solid var(--telekom-color-ui-faint)}.data-grid--mobile .tbody__row:hover{background:var(--telekom-color-background-surface)}.data-grid--mobile .tbody__mobile-title{display:block;margin-bottom:var(--telekom-spacing-composition-space-04)}.data-grid--mobile .tbody__mobile-label{display:block}.data-grid--mobile .tbody__cell{display:flex;align-items:center;width:auto !important;padding:5px 0;margin:0;min-height:var(--telekom-spacing-composition-space-08);line-height:var(--telekom-spacing-composition-space-08);overflow:auto;overflow-x:hidden}.data-grid--mobile .tbody__cell--used-as-mobile-title{display:none}.data-grid--mobile .tbody__mobile-label{display:block;width:100px;flex-shrink:0;color:var(--telekom-color-text-and-icon-additional);font-size:var(--telekom-typography-font-size-small);font-weight:var(--telekom-typography-font-weight-medium)}.data-grid--mobile .tbody__cell:first-child{margin-left:0px}.data-grid--mobile .tbody__cell--selection{position:absolute;top:19px;right:12px}.data-grid--mobile .tbody__cell--numbered{position:absolute;top:19px;right:56px}.data-grid--mobile .tbody__cell scale-text-field,.data-grid--mobile .tbody__cell scale-dropdown{width:100%}.data-grid--mobile .tbody__nested{width:auto !important}.data-grid--mobile .tbody__nested-cell{padding:0;margin-bottom:var(--telekom-spacing-composition-space-04)}.data-grid--mobile.data-grid--shade-alternate .tbody__row:nth-of-type(even){background:var(--telekom-color-background-surface)}.data-grid--mobile .info{height:auto;border-top:none;text-align:center}.data-grid--mobile .info__selection{position:relative;left:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}"},"../components/dist/esm/utils-c4af5b47.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return animationsFinished})),__webpack_require__.d(__webpack_exports__,"b",(function(){return isClickOutside})),__webpack_require__.d(__webpack_exports__,"c",(function(){return isPseudoClassSupported})),__webpack_require__.d(__webpack_exports__,"d",(function(){return emitEvent})),__webpack_require__.d(__webpack_exports__,"e",(function(){return generateUniqueId})),__webpack_require__.d(__webpack_exports__,"f",(function(){return hasShadowDom})),__webpack_require__.d(__webpack_exports__,"g",(function(){return isScaleIcon}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js");var hasShadowDom=function hasShadowDom(el){return!!el.shadowRoot&&!!el.attachShadow},isPseudoClassSupported=function isPseudoClassSupported(pseudoClass){var ss=document.styleSheets[0];if(!ss){var el=document.createElement("style");document.head.appendChild(el),ss=document.styleSheets[0],document.head.removeChild(el)}return function testPseudo(){try{return/^:/.test(pseudoClass)||(pseudoClass=":"+pseudoClass),ss.insertRule("html"+pseudoClass+"{}",0),ss.deleteRule(0),!0}catch(e){return!1}}()};function emitEvent(instance,eventKey,detail){var legacyKey=eventKey+"Legacy",emitted=[];return void 0!==instance[legacyKey]&&emitted.push(instance[legacyKey].emit(detail)),emitted.push(instance[eventKey].emit(detail)),emitted}function isClickOutside(event,host){var target=event.target,hasShadow=null!=target.shadowRoot,composedPath=hasShadow?event.composedPath():[];do{if(target===host)return!1;target=hasShadow?composedPath.shift():target.parentNode}while(target);return!0}var isScaleIcon=function isScaleIcon(el){return null!=el&&1===el.nodeType&&"SCALE-ICON"===el.nodeName.toUpperCase().substring(0,10)},id=0;function generateUniqueId(){return id++}var animationsFinished=function animationsFinished(el){return Promise.all(el.getAnimations({subtree:!0}).map((function(x){return x.finished})))}}}]);
-//# sourceMappingURL=4.433b77b8.iframe.bundle.js.map
\ No newline at end of file
diff --git a/4.433b77b8.iframe.bundle.js.map b/4.433b77b8.iframe.bundle.js.map
deleted file mode 100644
index c28e0ff496..0000000000
--- a/4.433b77b8.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"4.433b77b8.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/40.70e384bd.iframe.bundle.js.map b/40.70e384bd.iframe.bundle.js.map
deleted file mode 100644
index e60e7a95d5..0000000000
--- a/40.70e384bd.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"40.70e384bd.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/39.98fbd534.iframe.bundle.js b/40.df867ae9.iframe.bundle.js
similarity index 98%
rename from 39.98fbd534.iframe.bundle.js
rename to 40.df867ae9.iframe.bundle.js
index 9032c9d16c..117df28ea0 100644
--- a/39.98fbd534.iframe.bundle.js
+++ b/40.df867ae9.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 39.98fbd534.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-sidebar-nav.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_sidebar_nav",(function(){return SidebarNav}));__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var SidebarNav=function(){function SidebarNav(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,SidebarNav),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.i)(this,hostRef),this.collapsible=!1,this.collapsibleMediaQuery="(max-width: 30em)",this.collapsibleLabel="Menu",this.collapsed=!0,this.handleMediaQueryChange=function(event){_this.collapsible=event.matches},this.toggle=function(){_this.collapsed=!_this.collapsed}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(SidebarNav,[{key:"componentDidLoad",value:function componentDidLoad(){this.setNestingLevelOnChildren(),this.setMatchMedia()}},{key:"disconnectedCallback",value:function disconnectedCallback(){null!=this.mq&&this.mq.removeListener(this.handleMediaQueryChange)}},{key:"componentDidRender",value:function componentDidRender(){this.el.hasAttribute("aria-label")&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_8__.a)({tag:"deprecated",message:'Property "ariaLabel" is deprecated. Please use the "ariaLabelSidebarNav" property!',type:"warn",source:this.el})}},{key:"setNestingLevelOnChildren",value:function setNestingLevelOnChildren(){!function setNestingLevel(el){var level=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;Array.from(el.children).forEach((function(child){"SCALE-SIDEBAR-NAV-COLLAPSIBLE"===child.tagName.toUpperCase()&&(setNestingLevel(child,level+1),child.hasAttribute("nesting-level")||child.setAttribute("nesting-level",String(level)),2!==level||child.hasAttribute("condensed")||child.setAttribute("condensed","true")),"SCALE-SIDEBAR-NAV-ITEM"===child.tagName.toUpperCase()&&(child.hasAttribute("nesting-level")||child.setAttribute("nesting-level",String(level)),3!==level||child.hasAttribute("condensed")||child.setAttribute("condensed","true"))}))}(this.el)}},{key:"setMatchMedia",value:function setMatchMedia(){this.collapsibleMediaQuery&&(this.mq=window.matchMedia(this.collapsibleMediaQuery),this.mq.addListener(this.handleMediaQueryChange),this.collapsible=this.mq.matches)}},{key:"render",value:function render(){var label=this.ariaLabelSidebarNav?{"aria-label":this.ariaLabelSidebarNav}:{},hidden=this.collapsible?{hidden:this.collapsed}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("div",{part:this.getBasePartMap(),class:this.getCssClassMap()},!0===this.collapsible&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("button",{part:"toggle-button",class:"sidebar-nav__toggle-button","aria-expanded":this.collapsed?"false":"true",onClick:this.toggle},this.collapsibleLabel,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("scale-icon-navigation-collapse-down",{part:"icon",class:"sidebar-nav__icon",size:20})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("nav",Object.assign({part:"nav"},label,hidden),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("ul",{part:"list",class:"sidebar-nav__list",role:"list"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("slot",null)))))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"sidebar-nav--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_7__.a)("sidebar-nav",this.collapsible&&prefix+"collapsible")}},{key:"el",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.f)(this)}}]),SidebarNav}();SidebarNav.style=":host{--max-width:15rem;--spacing-indent:var(--telekom-spacing-composition-space-08);--spacing-collapsible:var(--telekom-spacing-composition-space-06);--opacity-chevron:0;--left-current-border:0;--color-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-active:var(--telekom-color-text-and-icon-primary-pressed);--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--color-toggle-button:var(--telekom-color-ui-regular);--border-y-toggle-button:1px solid var(--telekom-color-ui-faint);--radius-toggle-button:var(--telekom-radius-small)}.sidebar-nav--collapsible{--max-width:none;--spacing-indent:0;--opacity-chevron:1;--left-current-border:calc(-1 * var(--spacing-collapsible));padding-right:var(--spacing-collapsible);padding-left:var(--spacing-collapsible)}.sidebar-nav__list{list-style:none;max-width:var(--max-width);padding-left:0;margin-top:0;margin-bottom:0}.sidebar-nav__toggle-button{box-sizing:border-box;appearance:none;border:0;background-color:transparent;color:var(--color-toggle-button);width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;text-decoration:none;font-family:inherit;font-size:1rem;padding-top:1rem;padding-right:calc(0.5 * var(--spacing-indent));padding-bottom:1rem;padding-left:var(--spacing-indent);border-radius:var(--radius-toggle-button);border-bottom:var(--border-y-toggle-button);border-top:var(--border-y-toggle-button);cursor:pointer}.sidebar-nav__toggle-button:hover{color:var(--color-hover)}.sidebar-nav__toggle-button:active{color:var(--color-active)}.sidebar-nav__toggle-button:focus{outline:var(--focus-outline)}[aria-expanded='true'] .sidebar-nav__icon{transform:rotate(0.5turn)}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
-//# sourceMappingURL=39.98fbd534.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 40.df867ae9.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-sidebar-nav.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_sidebar_nav",(function(){return SidebarNav}));__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var SidebarNav=function(){function SidebarNav(hostRef){var _this=this;!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,SidebarNav),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.i)(this,hostRef),this.collapsible=!1,this.collapsibleMediaQuery="(max-width: 30em)",this.collapsibleLabel="Menu",this.collapsed=!0,this.handleMediaQueryChange=function(event){_this.collapsible=event.matches},this.toggle=function(){_this.collapsed=!_this.collapsed}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(SidebarNav,[{key:"componentDidLoad",value:function componentDidLoad(){this.setNestingLevelOnChildren(),this.setMatchMedia()}},{key:"disconnectedCallback",value:function disconnectedCallback(){null!=this.mq&&this.mq.removeListener(this.handleMediaQueryChange)}},{key:"componentDidRender",value:function componentDidRender(){this.el.hasAttribute("aria-label")&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_8__.a)({tag:"deprecated",message:'Property "ariaLabel" is deprecated. Please use the "ariaLabelSidebarNav" property!',type:"warn",source:this.el})}},{key:"setNestingLevelOnChildren",value:function setNestingLevelOnChildren(){!function setNestingLevel(el){var level=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;Array.from(el.children).forEach((function(child){"SCALE-SIDEBAR-NAV-COLLAPSIBLE"===child.tagName.toUpperCase()&&(setNestingLevel(child,level+1),child.hasAttribute("nesting-level")||child.setAttribute("nesting-level",String(level)),2!==level||child.hasAttribute("condensed")||child.setAttribute("condensed","true")),"SCALE-SIDEBAR-NAV-ITEM"===child.tagName.toUpperCase()&&(child.hasAttribute("nesting-level")||child.setAttribute("nesting-level",String(level)),3!==level||child.hasAttribute("condensed")||child.setAttribute("condensed","true"))}))}(this.el)}},{key:"setMatchMedia",value:function setMatchMedia(){this.collapsibleMediaQuery&&(this.mq=window.matchMedia(this.collapsibleMediaQuery),this.mq.addListener(this.handleMediaQueryChange),this.collapsible=this.mq.matches)}},{key:"render",value:function render(){var label=this.ariaLabelSidebarNav?{"aria-label":this.ariaLabelSidebarNav}:{},hidden=this.collapsible?{hidden:this.collapsed}:{};return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.c,null,this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("div",{part:this.getBasePartMap(),class:this.getCssClassMap()},!0===this.collapsible&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("button",{part:"toggle-button",class:"sidebar-nav__toggle-button","aria-expanded":this.collapsed?"false":"true",onClick:this.toggle},this.collapsibleLabel,Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("scale-icon-navigation-collapse-down",{part:"icon",class:"sidebar-nav__icon",size:20})),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("nav",Object.assign({part:"nav"},label,hidden),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("ul",{part:"list",class:"sidebar-nav__list",role:"list"},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.g)("slot",null)))))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"sidebar-nav--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_7__.a)("sidebar-nav",this.collapsible&&prefix+"collapsible")}},{key:"el",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_6__.f)(this)}}]),SidebarNav}();SidebarNav.style=":host{--max-width:15rem;--spacing-indent:var(--telekom-spacing-composition-space-08);--spacing-collapsible:var(--telekom-spacing-composition-space-06);--opacity-chevron:0;--left-current-border:0;--color-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-active:var(--telekom-color-text-and-icon-primary-pressed);--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--color-toggle-button:var(--telekom-color-ui-regular);--border-y-toggle-button:1px solid var(--telekom-color-ui-faint);--radius-toggle-button:var(--telekom-radius-small)}.sidebar-nav--collapsible{--max-width:none;--spacing-indent:0;--opacity-chevron:1;--left-current-border:calc(-1 * var(--spacing-collapsible));padding-right:var(--spacing-collapsible);padding-left:var(--spacing-collapsible)}.sidebar-nav__list{list-style:none;max-width:var(--max-width);padding-left:0;margin-top:0;margin-bottom:0}.sidebar-nav__toggle-button{box-sizing:border-box;appearance:none;border:0;background-color:transparent;color:var(--color-toggle-button);width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;text-decoration:none;font-family:inherit;font-size:1rem;padding-top:1rem;padding-right:calc(0.5 * var(--spacing-indent));padding-bottom:1rem;padding-left:var(--spacing-indent);border-radius:var(--radius-toggle-button);border-bottom:var(--border-y-toggle-button);border-top:var(--border-y-toggle-button);cursor:pointer}.sidebar-nav__toggle-button:hover{color:var(--color-hover)}.sidebar-nav__toggle-button:active{color:var(--color-active)}.sidebar-nav__toggle-button:focus{outline:var(--focus-outline)}[aria-expanded='true'] .sidebar-nav__icon{transform:rotate(0.5turn)}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
+//# sourceMappingURL=40.df867ae9.iframe.bundle.js.map
\ No newline at end of file
diff --git a/40.70e384bd.iframe.bundle.js.LICENSE.txt b/40.df867ae9.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 40.70e384bd.iframe.bundle.js.LICENSE.txt
rename to 40.df867ae9.iframe.bundle.js.LICENSE.txt
diff --git a/40.df867ae9.iframe.bundle.js.map b/40.df867ae9.iframe.bundle.js.map
new file mode 100644
index 0000000000..7ee58a9a5a
--- /dev/null
+++ b/40.df867ae9.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"40.df867ae9.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/41.05f31bce.iframe.bundle.js b/41.05f31bce.iframe.bundle.js
deleted file mode 100644
index 53530c86d2..0000000000
--- a/41.05f31bce.iframe.bundle.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/*! For license information please see 41.05f31bce.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-table.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_table",(function(){return Table}));__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var Table=function(){function Table(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Table),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.i)(this,hostRef),this.showSort=!1,this.striped=!1,this.slots={}}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(Table,[{key:"componentWillLoad",value:function componentWillLoad(){this.hostElement.querySelectorAll("th").forEach((function(th){th.insertAdjacentHTML("afterbegin",'\n          <span class="scale-sort-indicator" aria-hidden="true">\n            <scale-icon-content-sort-indicator-up class="scale-sort-indicator-icon up" size="16"></scale-icon-content-sort-indicator-up>\n            <scale-icon-content-sort-indicator-down class="scale-sort-indicator-icon down" size="16"></scale-icon-content-sort-indicator-down>\n          </span>')}))}},{key:"componentDidLoad",value:function componentDidLoad(){var progressbar=this.hostElement.querySelectorAll("scale-progress-bar");progressbar&&progressbar.forEach((function(el){el.showStatus=!1}))}},{key:"componentDidRender",value:function componentDidRender(){this.size&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_5__.a)({tag:"deprecated",message:'Property "size" is deprecated. Please use css overwrites for a small version!',type:"warn",source:this.hostElement})}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.c,{class:this.getCssClassMap()},this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.g)("slot",null))}},{key:"getCssClassMap",value:function getCssClassMap(){return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_4__.a)("table",this.showSort&&"table--sortable",this.striped&&"table--striped")}},{key:"hostElement",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_3__.f)(this)}}]),Table}();Table.style="scale-table{--radius:var(--telekom-radius-standard) var(--telekom-radius-standard) 0 0;--background:var(--telekom-color-ui-state-fill-standard);--color:var(--telekom-color-text-and-icon-standard);--color-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-active:var(--telekom-color-text-and-icon-primary-pressed);--font-size:var(--telekom-typography-font-size-small);--font-weight:var(--telekom-typography-font-weight-bold);--spacing-tbody-td:var(--telekom-spacing-composition-space-06)\n    var(--telekom-spacing-composition-space-04);--border-bottom-tbody-td:var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-faint);--background-tbody:var(--telekom-color-ui-state-fill-standard);--background-tbody-tr-hover:var(--telekom-color-ui-state-fill-hovered);--background-tfoot:var(--telekom-color-ui-state-fill-standard);--border-bottom-tfoot-td:var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-extra-strong);--spacing-th-sortable:0 var(--telekom-spacing-composition-space-04) 0 0;--background-th-sortable-hover:var(--telekom-color-ui-subtle);--background-th-sortable-active:var(--telekom-color-ui-faint);--box-shadow-th-sortable-focus:inset 0 0 0\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-color-functional-focus-standard);--background-tr-striped:var(--telekom-color-ui-subtle);--padding:var(--telekom-spacing-composition-space-00)\n    var(--telekom-spacing-composition-space-04)}.table{display:block;overflow:auto;border-radius:var(--radius);background:var(--background);color:var(--color)}.table table{width:100%;white-space:nowrap;border-spacing:0;border-collapse:collapse}.table th{padding:var(--padding);text-align:left;line-height:32px;color:var(--color);font-size:var(--font-size);background:var(--telekom-color-background-surface-subtle)}.table td{padding:var(--padding)}.table tbody tr td{padding:8px}.table tbody td{border-bottom:var(--border-bottom-tbody-td)}.table thead tr th:last-of-type,.table tbody tr td:last-of-type,.table tfoot tr td:last-of-type{padding-right:12px}.table tfoot{background:var(--background-tfoot)}.table tbody{background:var(--background-tbody)}.table tfoot tr td{padding:8px;font-weight:var(--font-weight);border-bottom:var(--border-bottom-tfoot-td)}.table .scale-sort-indicator-icon{display:none !important}.table tbody tr:hover{background:var(--background-tbody-tr-hover)}.table th:focus{outline:none}.table--size-default tbody tr td{padding:var(--spacing-tbody-td)}.table--sortable th{cursor:pointer;padding:var(--spacing-th-sortable)}.table--sortable th:hover{padding:var(--spacing-th-sortable);background:var(--background-th-sortable-hover)}.table--sortable th:active{background:var(--background-th-sortable-active)}.table--sortable th:focus{box-shadow:var(--box-shadow-th-sortable-focus);border-radius:var(--radius)}.table--sortable th .scale-sort-indicator-icon{display:inline-flex !important}.table--sortable th[aria-disabled]{padding:var(--padding);pointer-events:none}.table--sortable th:not([aria-sort]){padding:var(--padding)}.table--sortable th[aria-sort='none']{padding:var(--padding)}.table--sortable th[aria-sort='ascending'] .scale-sort-indicator .up{color:var(--color)}.table--sortable th:hover .scale-sort-indicator .up{color:var(--color-hover)}.table--sortable th:hover[aria-sort='ascending'] .scale-sort-indicator-icon.up{color:var(--color-hover)}.table--sortable th:active[aria-sort='ascending'] .scale-sort-indicator-icon.up{color:var(--color-active)}.table--sortable th[aria-sort='ascending'] .scale-sort-indicator{color:transparent}.table--sortable th:hover[aria-sort='ascending'] .scale-sort-indicator{color:transparent}.table--sortable th:active[aria-sort='ascending'] .scale-sort-indicator{color:transparent}.table--sortable th[aria-sort='descending'] .scale-sort-indicator-icon.up{color:transparent}.table--sortable th:hover[aria-sort='descending'] .scale-sort-indicator-icon.up{color:transparent}.table--sortable th:active[aria-sort='descending'] .scale-sort-indicator-icon.up{color:transparent}.table--sortable th[aria-sort='descending'] .scale-sort-indicator-icon{color:var(--color)}.table--sortable th:hover[aria-sort='descending'] .scale-sort-indicator-icon{color:var(--color-hover)}.table--sortable th:active[aria-sort='descending'] .scale-sort-indicator-icon{color:var(--color-active)}.table--sortable th .scale-sort-indicator{width:16px;height:16px;margin:0 0 0 4px;display:inline-block;position:relative}.table--sortable th .scale-sort-indicator-icon{top:4px;left:0;width:16px;height:16px;position:absolute}.table--sortable th .scale-sort-indicator{color:transparent}.table--sortable th[aria-sort='none']:hover{padding:0 8px 0 0}.table--sortable th[aria-sort='none'] .scale-sort-indicator{display:none}.table--sortable th:not([aria-sort]):hover{padding:0 8px 0 0}.table--sortable th:not([aria-sort]) .scale-sort-indicator{display:none}.table--sortable th:hover .scale-sort-indicator{display:inline-block}.table--striped table tr:nth-child(even){background:var(--background-tr-striped)}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
-//# sourceMappingURL=41.05f31bce.iframe.bundle.js.map
\ No newline at end of file
diff --git a/41.05f31bce.iframe.bundle.js.map b/41.05f31bce.iframe.bundle.js.map
deleted file mode 100644
index 4b8400ca08..0000000000
--- a/41.05f31bce.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"41.05f31bce.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/40.70e384bd.iframe.bundle.js b/41.2ba0fc83.iframe.bundle.js
similarity index 56%
rename from 40.70e384bd.iframe.bundle.js
rename to 41.2ba0fc83.iframe.bundle.js
index cdb4108c46..ff75fb1c10 100644
--- a/40.70e384bd.iframe.bundle.js
+++ b/41.2ba0fc83.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see 40.70e384bd.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-tab-nav.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_tab_nav",(function(){return TabNav}));__webpack_require__("../../node_modules/core-js/modules/es.string.small.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find-index.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var TabNav=function(){function TabNav(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,TabNav),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.i)(this,hostRef),this.small=!1,this.size="small"}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(TabNav,[{key:"handleSelect",value:function handleSelect(event){var nextTab=event.target;this.getAllEnabledTabs().includes(nextTab)&&!nextTab.disabled&&this.selectTab(nextTab)}},{key:"handleKeydown",value:function handleKeydown(event){var nextTab;if("tab"===event.target.getAttribute("role")&&!event.altKey){switch(event.key){case"ArrowLeft":nextTab=this.getPreviousTab();break;case"ArrowRight":nextTab=this.getNextTab();break;case"Home":nextTab=this.getFirstTab();break;case"End":nextTab=this.getLastTab();break;default:return}event.preventDefault(),this.selectTab(nextTab)}}},{key:"connectedCallback",value:function connectedCallback(){this.el.hasAttribute("role")||this.el.setAttribute("role","tablist")}},{key:"componentDidRender",value:function componentDidRender(){var _this=this;Promise.all([customElements.whenDefined("scale-tab-header"),customElements.whenDefined("scale-tab-panel")]).then((function(){_this.linkPanels(),_this.propagateSizeToTabs()})),!1!==this.small&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_24__.a)({tag:"deprecated",message:'Property "small" is deprecated. Please use css overwrite!',type:"warn",source:this.el})}},{key:"getAllTabs",value:function getAllTabs(){return Array.from(this.el.querySelectorAll("scale-tab-header"))}},{key:"getAllEnabledTabs",value:function getAllEnabledTabs(){return Array.from(this.el.querySelectorAll("scale-tab-header:not([disabled])"))}},{key:"getAllPanels",value:function getAllPanels(){return Array.from(this.el.querySelectorAll("scale-tab-panel"))}},{key:"getPreviousTab",value:function getPreviousTab(){var tabs=this.getAllEnabledTabs(),index=tabs.findIndex((function(tab){return tab.selected}))-1;return tabs[(index+tabs.length)%tabs.length]}},{key:"getNextTab",value:function getNextTab(){var tabs=this.getAllEnabledTabs(),index=tabs.findIndex((function(tab){return tab.selected}))+1;return tabs[index%tabs.length]}},{key:"getFirstTab",value:function getFirstTab(){return this.getAllEnabledTabs()[0]}},{key:"getLastTab",value:function getLastTab(){var tabs=this.getAllEnabledTabs();return tabs[tabs.length-1]}},{key:"linkPanels",value:function linkPanels(){var tabs=this.getAllTabs(),selectedTab=tabs.find((function(x){return x.selected}))||tabs.filter((function(x){return!x.disabled}))[0];tabs.forEach((function(tab){var panel=tab.nextElementSibling;tab.setAttribute("aria-controls",panel.id),panel.setAttribute("aria-labelledby",tab.id)})),this.selectTab(selectedTab)}},{key:"reset",value:function reset(){var tabs=this.getAllEnabledTabs(),panels=this.getAllPanels();tabs.forEach((function(tab){return tab.selected=!1})),panels.forEach((function(panel){return panel.hidden=!0}))}},{key:"findPanelForTab",value:function findPanelForTab(tab){var panelId=tab.getAttribute("aria-controls");return this.el.querySelector("#"+panelId)}},{key:"selectTab",value:function selectTab(nextTab){var nextPanel=this.findPanelForTab(nextTab);this.reset(),nextPanel.hidden=!1,nextTab.selected=!0}},{key:"propagateSizeToTabs",value:function propagateSizeToTabs(){var action="large"===this.size?"setAttribute":"removeAttribute",tabs=this.getAllTabs(),panels=this.getAllPanels();[].concat(_toConsumableArray(tabs),_toConsumableArray(panels)).forEach((function(child){return child[action]("size","large")}))}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.c,{class:"scale-tab-nav"},this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{part:this.getBasePartMap(),class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",{name:"tab"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",{name:"panel"})))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"tab-nav--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__.a)("tab-nav",""+prefix)}},{key:"el",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.f)(this)}}]),TabNav}();TabNav.style=":host{--tab-height:3rem;--tab-spacing-horizontal:var(--telekom-spacing-composition-space-05);--tab-spacing-vertical:var(--telekom-spacing-composition-space-06);--tab-radius:var(--telekom-radius-small);--tab-border-size:var(--telekom-line-weight-standard);--tab-border-size-selected:var(--telekom-line-weight-highlight);--tab-border-size-selected:3px;--tab-border-color:var(--telekom-color-ui-subtle);--tab-height-large:3.25rem;--tab-spacing-horizontal-large:var(--telekom-spacing-composition-space-06);--tab-spacing-vertical-large:0.875rem}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
-//# sourceMappingURL=40.70e384bd.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see 41.2ba0fc83.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{"../components/dist/esm/index-713f92a5.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return classnames}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js");var classnames=function createCommonjsModule(fn,basedir,module){return fn(module={path:basedir,exports:{},require:function require(path,base){return function commonjsRequire(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},module.exports),module.exports}((function(module){!function(){var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):window.classNames=classNames}()}))},"../components/dist/esm/scale-tab-nav.entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"scale_tab_nav",(function(){return TabNav}));__webpack_require__("../../node_modules/core-js/modules/es.string.small.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find-index.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js");var _index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__("../components/dist/esm/index-713f92a5.js"),_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__("../components/dist/esm/status-note-0089e9c9.js");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var TabNav=function(){function TabNav(hostRef){!function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,TabNav),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.i)(this,hostRef),this.small=!1,this.size="small"}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}(TabNav,[{key:"handleSelect",value:function handleSelect(event){var nextTab=event.target;this.getAllEnabledTabs().includes(nextTab)&&!nextTab.disabled&&this.selectTab(nextTab)}},{key:"handleKeydown",value:function handleKeydown(event){var nextTab;if("tab"===event.target.getAttribute("role")&&!event.altKey){switch(event.key){case"ArrowLeft":nextTab=this.getPreviousTab();break;case"ArrowRight":nextTab=this.getNextTab();break;case"Home":nextTab=this.getFirstTab();break;case"End":nextTab=this.getLastTab();break;default:return}event.preventDefault(),this.selectTab(nextTab)}}},{key:"connectedCallback",value:function connectedCallback(){this.el.hasAttribute("role")||this.el.setAttribute("role","tablist")}},{key:"componentDidRender",value:function componentDidRender(){var _this=this;Promise.all([customElements.whenDefined("scale-tab-header"),customElements.whenDefined("scale-tab-panel")]).then((function(){_this.linkPanels(),_this.propagateSizeToTabs()})),!1!==this.small&&Object(_status_note_0089e9c9_js__WEBPACK_IMPORTED_MODULE_24__.a)({tag:"deprecated",message:'Property "small" is deprecated. Please use css overwrite!',type:"warn",source:this.el})}},{key:"getAllTabs",value:function getAllTabs(){return Array.from(this.el.querySelectorAll("scale-tab-header"))}},{key:"getAllEnabledTabs",value:function getAllEnabledTabs(){return Array.from(this.el.querySelectorAll('scale-tab-header:not([disabled]), scale-tab-header[disabled="false"]'))}},{key:"getAllPanels",value:function getAllPanels(){return Array.from(this.el.querySelectorAll("scale-tab-panel"))}},{key:"getPreviousTab",value:function getPreviousTab(){var tabs=this.getAllEnabledTabs(),index=tabs.findIndex((function(tab){return tab.selected}))-1;return tabs[(index+tabs.length)%tabs.length]}},{key:"getNextTab",value:function getNextTab(){var tabs=this.getAllEnabledTabs(),index=tabs.findIndex((function(tab){return tab.selected}))+1;return tabs[index%tabs.length]}},{key:"getFirstTab",value:function getFirstTab(){return this.getAllEnabledTabs()[0]}},{key:"getLastTab",value:function getLastTab(){var tabs=this.getAllEnabledTabs();return tabs[tabs.length-1]}},{key:"linkPanels",value:function linkPanels(){var tabs=this.getAllTabs(),selectedTab=tabs.find((function(x){return x.selected}))||tabs.filter((function(x){return!x.disabled}))[0];tabs.forEach((function(tab){var panel=tab.nextElementSibling;tab.setAttribute("aria-controls",panel.id),panel.setAttribute("aria-labelledby",tab.id)})),this.selectTab(selectedTab)}},{key:"reset",value:function reset(){var tabs=this.getAllEnabledTabs(),panels=this.getAllPanels();tabs.forEach((function(tab){return tab.selected=!1})),panels.forEach((function(panel){return panel.hidden=!0}))}},{key:"findPanelForTab",value:function findPanelForTab(tab){var panelId=tab.getAttribute("aria-controls");return this.el.querySelector("#"+panelId)}},{key:"selectTab",value:function selectTab(nextTab){var nextPanel=this.findPanelForTab(nextTab);this.reset(),nextPanel.hidden=!1,nextTab.selected=!0}},{key:"propagateSizeToTabs",value:function propagateSizeToTabs(){var action="large"===this.size?"setAttribute":"removeAttribute",tabs=this.getAllTabs(),panels=this.getAllPanels();[].concat(_toConsumableArray(tabs),_toConsumableArray(panels)).forEach((function(child){return child[action]("size","large")}))}},{key:"render",value:function render(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.c,{class:"scale-tab-nav"},this.styles&&Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("style",null,this.styles),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("div",{part:this.getBasePartMap(),class:this.getCssClassMap()},Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",{name:"tab"}),Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.g)("slot",{name:"panel"})))}},{key:"getBasePartMap",value:function getBasePartMap(){return this.getCssOrBasePartMap("basePart")}},{key:"getCssClassMap",value:function getCssClassMap(){return this.getCssOrBasePartMap("css")}},{key:"getCssOrBasePartMap",value:function getCssOrBasePartMap(mode){var prefix="basePart"===mode?"":"tab-nav--";return Object(_index_713f92a5_js__WEBPACK_IMPORTED_MODULE_23__.a)("tab-nav",""+prefix)}},{key:"el",get:function get(){return Object(_index_6d95a4bc_js__WEBPACK_IMPORTED_MODULE_22__.f)(this)}}]),TabNav}();TabNav.style=":host{--tab-height:3rem;--tab-spacing-horizontal:var(--telekom-spacing-composition-space-05);--tab-spacing-vertical:var(--telekom-spacing-composition-space-06);--tab-radius:var(--telekom-radius-small);--tab-border-size:var(--telekom-line-weight-standard);--tab-border-size-selected:var(--telekom-line-weight-highlight);--tab-border-size-selected:3px;--tab-border-color:var(--telekom-color-ui-subtle);--tab-height-large:3.25rem;--tab-spacing-horizontal-large:var(--telekom-spacing-composition-space-06);--tab-spacing-vertical-large:0.875rem}"},"../components/dist/esm/status-note-0089e9c9.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return statusNote}));var tagTypes={beta:"β",WIP:"🛠 WIP",deprecated:"😵 Deprecation notice",warning:"Warning"},defaultMessages={beta:"This component is currently in beta status. Some things may be refactored. Watch the change log for now.",WIP:"This component is currently under development and is prone to change. Please wait for its release.\nIt will be available in Storybook once it's finished and documented.",deprecated:"This component is deprecated."};function statusNote(_ref){var _ref$tag=_ref.tag,tag=void 0===_ref$tag?"WIP":_ref$tag,_ref$extraMessage=_ref.extraMessage,extraMessage=void 0===_ref$extraMessage?null:_ref$extraMessage,_ref$message=_ref.message,message=void 0===_ref$message?null:_ref$message,_ref$source=_ref.source,source=void 0===_ref$source?null:_ref$source,_ref$type=_ref.type;(0,console[void 0===_ref$type?"info":_ref$type])("%c scale – "+tagTypes[tag]+" ","background: #E20074; color: #FFF; border-radius: 4px","\n\n"+(message||defaultMessages[tag])+" "+(extraMessage?"\n"+extraMessage:"")+"\n    ",null!==source?"\nsource:":"","object"==typeof source?source:""+source,null!==source?"\n\n":"")}}}]);
+//# sourceMappingURL=41.2ba0fc83.iframe.bundle.js.map
\ No newline at end of file
diff --git a/41.05f31bce.iframe.bundle.js.LICENSE.txt b/41.2ba0fc83.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 41.05f31bce.iframe.bundle.js.LICENSE.txt
rename to 41.2ba0fc83.iframe.bundle.js.LICENSE.txt
diff --git a/41.2ba0fc83.iframe.bundle.js.map b/41.2ba0fc83.iframe.bundle.js.map
new file mode 100644
index 0000000000..e05cbf09ce
--- /dev/null
+++ b/41.2ba0fc83.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"41.2ba0fc83.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/iframe.html b/iframe.html
index 5dd1009b32..0361e5af10 100644
--- a/iframe.html
+++ b/iframe.html
@@ -399,4 +399,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./stories","files":"**/**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"}];</script><script src="runtime~main.bc15a3ff.iframe.bundle.js"></script><script src="vendors~main.fd1b9bdc.iframe.bundle.js"></script><script src="main.c702baf6.iframe.bundle.js"></script></body></html>
\ No newline at end of file
+            window['STORIES'] = [{"titlePrefix":"","directory":"./stories","files":"**/**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"}];</script><script src="runtime~main.fb412144.iframe.bundle.js"></script><script src="vendors~main.fd1b9bdc.iframe.bundle.js"></script><script src="main.cb105c1e.iframe.bundle.js"></script></body></html>
\ No newline at end of file
diff --git a/main.c702baf6.iframe.bundle.js b/main.c702baf6.iframe.bundle.js
deleted file mode 100644
index 583845e429..0000000000
--- a/main.c702baf6.iframe.bundle.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[407],{"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\n.visually-hidden[data-v-4083c6d8] {\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(50%);\n          clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n",""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\nscale-link {\n  font: var(--telekom-text-style-body);\n}\n",""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\np[data-v-1349bb3e] {\n  max-width: 60ch;\n  margin-top: 0;\n}\n",""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\nscale-badge::part(label) {\n  display: none;\n}\n@media screen and (min-width: 1040px) {\nscale-badge::part(label) {\n    display: flex;\n}\n}\n",""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\nscale-badge::part(label) {\n  display: none;\n}\n@media screen and (min-width: 1040px) {\nscale-badge::part(label) {\n    display: flex\n}\n}\n",""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\n.wrapper {\n  margin: -1rem;\n}\nscale-telekom-app-shell {\n  --min-height: 200vh;\n  --background: var(--telekom-color-background-surface-subtle);\n}\n",""]),module.exports=exports},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../components/dist/esm lazy recursive ^\\.\\/.*\\.entry\\.js$ include: \\.entry\\.js$ exclude: \\.system\\.entry\\.js$":function(module,exports,__webpack_require__){var map={"./app-logo.entry.js":["../components/dist/esm/app-logo.entry.js",45],"./app-mega-menu_8.entry.js":["../components/dist/esm/app-mega-menu_8.entry.js",5],"./duet-date-picker_2.entry.js":["../components/dist/esm/duet-date-picker_2.entry.js",27],"./scale-accordion.entry.js":["../components/dist/esm/scale-accordion.entry.js",46],"./scale-alert.entry.js":["../components/dist/esm/scale-alert.entry.js",29],"./scale-app-footer.entry.js":["../components/dist/esm/scale-app-footer.entry.js",28],"./scale-app-header.entry.js":["../components/dist/esm/scale-app-header.entry.js",7],"./scale-app-shell.entry.js":["../components/dist/esm/scale-app-shell.entry.js",62],"./scale-badge_12.entry.js":["../components/dist/esm/scale-badge_12.entry.js",13],"./scale-breadcrumb.entry.js":["../components/dist/esm/scale-breadcrumb.entry.js",47],"./scale-button_3.entry.js":["../components/dist/esm/scale-button_3.entry.js",30],"./scale-callout.entry.js":["../components/dist/esm/scale-callout.entry.js",59],"./scale-card.entry.js":["../components/dist/esm/scale-card.entry.js",48],"./scale-carousel.entry.js":["../components/dist/esm/scale-carousel.entry.js",31],"./scale-chart-stack-card.entry.js":["../components/dist/esm/scale-chart-stack-card.entry.js",14],"./scale-checkbox-group.entry.js":["../components/dist/esm/scale-checkbox-group.entry.js",60],"./scale-checkbox_2.entry.js":["../components/dist/esm/scale-checkbox_2.entry.js",42],"./scale-chip.entry.js":["../components/dist/esm/scale-chip.entry.js",32],"./scale-collapsible.entry.js":["../components/dist/esm/scale-collapsible.entry.js",33],"./scale-data-grid.entry.js":["../components/dist/esm/scale-data-grid.entry.js",4],"./scale-date-picker.entry.js":["../components/dist/esm/scale-date-picker.entry.js",8],"./scale-divider.entry.js":["../components/dist/esm/scale-divider.entry.js",49],"./scale-dropdown-select_13.entry.js":["../components/dist/esm/scale-dropdown-select_13.entry.js",0,34],"./scale-dropdown.entry.js":["../components/dist/esm/scale-dropdown.entry.js",9],"./scale-grid-item.entry.js":["../components/dist/esm/scale-grid-item.entry.js",25],"./scale-grid.entry.js":["../components/dist/esm/scale-grid.entry.js",26],"./scale-helper-text.entry.js":["../components/dist/esm/scale-helper-text.entry.js",63],"./scale-icon-action-add-card.entry.js":["../components/dist/esm/scale-icon-action-add-card.entry.js",64],"./scale-icon-action-add.entry.js":["../components/dist/esm/scale-icon-action-add.entry.js",65],"./scale-icon-action-arrange.entry.js":["../components/dist/esm/scale-icon-action-arrange.entry.js",66],"./scale-icon-action-arrow-down.entry.js":["../components/dist/esm/scale-icon-action-arrow-down.entry.js",67],"./scale-icon-action-arrow-left.entry.js":["../components/dist/esm/scale-icon-action-arrow-left.entry.js",68],"./scale-icon-action-arrow-right.entry.js":["../components/dist/esm/scale-icon-action-arrow-right.entry.js",69],"./scale-icon-action-arrow-up.entry.js":["../components/dist/esm/scale-icon-action-arrow-up.entry.js",70],"./scale-icon-action-auto-login.entry.js":["../components/dist/esm/scale-icon-action-auto-login.entry.js",71],"./scale-icon-action-backspace.entry.js":["../components/dist/esm/scale-icon-action-backspace.entry.js",72],"./scale-icon-action-backward.entry.js":["../components/dist/esm/scale-icon-action-backward.entry.js",73],"./scale-icon-action-changelog.entry.js":["../components/dist/esm/scale-icon-action-changelog.entry.js",74],"./scale-icon-action-checkmark.entry.js":["../components/dist/esm/scale-icon-action-checkmark.entry.js",75],"./scale-icon-action-circle-add.entry.js":["../components/dist/esm/scale-icon-action-circle-add.entry.js",76],"./scale-icon-action-circle-close_2.entry.js":["../components/dist/esm/scale-icon-action-circle-close_2.entry.js",77],"./scale-icon-action-close.entry.js":["../components/dist/esm/scale-icon-action-close.entry.js",78],"./scale-icon-action-compare.entry.js":["../components/dist/esm/scale-icon-action-compare.entry.js",79],"./scale-icon-action-copy-paste.entry.js":["../components/dist/esm/scale-icon-action-copy-paste.entry.js",80],"./scale-icon-action-cut-paste.entry.js":["../components/dist/esm/scale-icon-action-cut-paste.entry.js",81],"./scale-icon-action-disabled-microphone.entry.js":["../components/dist/esm/scale-icon-action-disabled-microphone.entry.js",82],"./scale-icon-action-download-from-cloud.entry.js":["../components/dist/esm/scale-icon-action-download-from-cloud.entry.js",83],"./scale-icon-action-download.entry.js":["../components/dist/esm/scale-icon-action-download.entry.js",84],"./scale-icon-action-drag-and-drop.entry.js":["../components/dist/esm/scale-icon-action-drag-and-drop.entry.js",85],"./scale-icon-action-edit.entry.js":["../components/dist/esm/scale-icon-action-edit.entry.js",86],"./scale-icon-action-export.entry.js":["../components/dist/esm/scale-icon-action-export.entry.js",87],"./scale-icon-action-fast-forward-nb.entry.js":["../components/dist/esm/scale-icon-action-fast-forward-nb.entry.js",88],"./scale-icon-action-fast-forward.entry.js":["../components/dist/esm/scale-icon-action-fast-forward.entry.js",89],"./scale-icon-action-favorite.entry.js":["../components/dist/esm/scale-icon-action-favorite.entry.js",90],"./scale-icon-action-filter-2.entry.js":["../components/dist/esm/scale-icon-action-filter-2.entry.js",91],"./scale-icon-action-filter.entry.js":["../components/dist/esm/scale-icon-action-filter.entry.js",92],"./scale-icon-action-forward.entry.js":["../components/dist/esm/scale-icon-action-forward.entry.js",93],"./scale-icon-action-full-screen.entry.js":["../components/dist/esm/scale-icon-action-full-screen.entry.js",94],"./scale-icon-action-import.entry.js":["../components/dist/esm/scale-icon-action-import.entry.js",95],"./scale-icon-action-install.entry.js":["../components/dist/esm/scale-icon-action-install.entry.js",96],"./scale-icon-action-launch.entry.js":["../components/dist/esm/scale-icon-action-launch.entry.js",97],"./scale-icon-action-light-dark-mode.entry.js":["../components/dist/esm/scale-icon-action-light-dark-mode.entry.js",98],"./scale-icon-action-link.entry.js":["../components/dist/esm/scale-icon-action-link.entry.js",99],"./scale-icon-action-logout.entry.js":["../components/dist/esm/scale-icon-action-logout.entry.js",100],"./scale-icon-action-loop.entry.js":["../components/dist/esm/scale-icon-action-loop.entry.js",101],"./scale-icon-action-microphone.entry.js":["../components/dist/esm/scale-icon-action-microphone.entry.js",102],"./scale-icon-action-minimize-screen.entry.js":["../components/dist/esm/scale-icon-action-minimize-screen.entry.js",103],"./scale-icon-action-minus-circle.entry.js":["../components/dist/esm/scale-icon-action-minus-circle.entry.js",104],"./scale-icon-action-more.entry.js":["../components/dist/esm/scale-icon-action-more.entry.js",105],"./scale-icon-action-move.entry.js":["../components/dist/esm/scale-icon-action-move.entry.js",106],"./scale-icon-action-mute.entry.js":["../components/dist/esm/scale-icon-action-mute.entry.js",107],"./scale-icon-action-notification.entry.js":["../components/dist/esm/scale-icon-action-notification.entry.js",108],"./scale-icon-action-pause-nb.entry.js":["../components/dist/esm/scale-icon-action-pause-nb.entry.js",109],"./scale-icon-action-pause.entry.js":["../components/dist/esm/scale-icon-action-pause.entry.js",110],"./scale-icon-action-pin.entry.js":["../components/dist/esm/scale-icon-action-pin.entry.js",111],"./scale-icon-action-play-nb.entry.js":["../components/dist/esm/scale-icon-action-play-nb.entry.js",112],"./scale-icon-action-play.entry.js":["../components/dist/esm/scale-icon-action-play.entry.js",113],"./scale-icon-action-pop-up-window.entry.js":["../components/dist/esm/scale-icon-action-pop-up-window.entry.js",114],"./scale-icon-action-power.entry.js":["../components/dist/esm/scale-icon-action-power.entry.js",115],"./scale-icon-action-previous-nb.entry.js":["../components/dist/esm/scale-icon-action-previous-nb.entry.js",116],"./scale-icon-action-print.entry.js":["../components/dist/esm/scale-icon-action-print.entry.js",117],"./scale-icon-action-publish.entry.js":["../components/dist/esm/scale-icon-action-publish.entry.js",118],"./scale-icon-action-random.entry.js":["../components/dist/esm/scale-icon-action-random.entry.js",119],"./scale-icon-action-record-nb.entry.js":["../components/dist/esm/scale-icon-action-record-nb.entry.js",120],"./scale-icon-action-refresh.entry.js":["../components/dist/esm/scale-icon-action-refresh.entry.js",121],"./scale-icon-action-remove.entry.js":["../components/dist/esm/scale-icon-action-remove.entry.js",122],"./scale-icon-action-reply-all.entry.js":["../components/dist/esm/scale-icon-action-reply-all.entry.js",123],"./scale-icon-action-reply-forward.entry.js":["../components/dist/esm/scale-icon-action-reply-forward.entry.js",124],"./scale-icon-action-reply.entry.js":["../components/dist/esm/scale-icon-action-reply.entry.js",125],"./scale-icon-action-restart.entry.js":["../components/dist/esm/scale-icon-action-restart.entry.js",126],"./scale-icon-action-search.entry.js":["../components/dist/esm/scale-icon-action-search.entry.js",127],"./scale-icon-action-send.entry.js":["../components/dist/esm/scale-icon-action-send.entry.js",128],"./scale-icon-action-share.entry.js":["../components/dist/esm/scale-icon-action-share.entry.js",129],"./scale-icon-action-shopping-cart.entry.js":["../components/dist/esm/scale-icon-action-shopping-cart.entry.js",130],"./scale-icon-action-show-password.entry.js":["../components/dist/esm/scale-icon-action-show-password.entry.js",131],"./scale-icon-action-sound-on.entry.js":["../components/dist/esm/scale-icon-action-sound-on.entry.js",132],"./scale-icon-action-star.entry.js":["../components/dist/esm/scale-icon-action-star.entry.js",133],"./scale-icon-action-stream-on.entry.js":["../components/dist/esm/scale-icon-action-stream-on.entry.js",134],"./scale-icon-action-success_3.entry.js":["../components/dist/esm/scale-icon-action-success_3.entry.js",135],"./scale-icon-action-thumbs-down.entry.js":["../components/dist/esm/scale-icon-action-thumbs-down.entry.js",136],"./scale-icon-action-thumbs-up.entry.js":["../components/dist/esm/scale-icon-action-thumbs-up.entry.js",137],"./scale-icon-action-tiles-add.entry.js":["../components/dist/esm/scale-icon-action-tiles-add.entry.js",138],"./scale-icon-action-upload-to-cloud.entry.js":["../components/dist/esm/scale-icon-action-upload-to-cloud.entry.js",139],"./scale-icon-action-upload.entry.js":["../components/dist/esm/scale-icon-action-upload.entry.js",140],"./scale-icon-action-volume-down.entry.js":["../components/dist/esm/scale-icon-action-volume-down.entry.js",141],"./scale-icon-action-volume-up.entry.js":["../components/dist/esm/scale-icon-action-volume-up.entry.js",142],"./scale-icon-action-zoom-in.entry.js":["../components/dist/esm/scale-icon-action-zoom-in.entry.js",143],"./scale-icon-action-zoom-out.entry.js":["../components/dist/esm/scale-icon-action-zoom-out.entry.js",144],"./scale-icon-alert-antivirus-protection.entry.js":["../components/dist/esm/scale-icon-alert-antivirus-protection.entry.js",145],"./scale-icon-alert-compliance.entry.js":["../components/dist/esm/scale-icon-alert-compliance.entry.js",146],"./scale-icon-alert-cyber-security.entry.js":["../components/dist/esm/scale-icon-alert-cyber-security.entry.js",147],"./scale-icon-alert-help.entry.js":["../components/dist/esm/scale-icon-alert-help.entry.js",148],"./scale-icon-alert-high-priority-email.entry.js":["../components/dist/esm/scale-icon-alert-high-priority-email.entry.js",149],"./scale-icon-alert-imprint-dataprivacy.entry.js":["../components/dist/esm/scale-icon-alert-imprint-dataprivacy.entry.js",150],"./scale-icon-alert-legal.entry.js":["../components/dist/esm/scale-icon-alert-legal.entry.js",151],"./scale-icon-alert-network-disrupted.entry.js":["../components/dist/esm/scale-icon-alert-network-disrupted.entry.js",152],"./scale-icon-alert-password-breaking.entry.js":["../components/dist/esm/scale-icon-alert-password-breaking.entry.js",153],"./scale-icon-alert-security.entry.js":["../components/dist/esm/scale-icon-alert-security.entry.js",154],"./scale-icon-alert-traffic-disruption.entry.js":["../components/dist/esm/scale-icon-alert-traffic-disruption.entry.js",155],"./scale-icon-alert-unknown.entry.js":["../components/dist/esm/scale-icon-alert-unknown.entry.js",156],"./scale-icon-communication-available.entry.js":["../components/dist/esm/scale-icon-communication-available.entry.js",157],"./scale-icon-communication-blog.entry.js":["../components/dist/esm/scale-icon-communication-blog.entry.js",158],"./scale-icon-communication-call-incoming.entry.js":["../components/dist/esm/scale-icon-communication-call-incoming.entry.js",159],"./scale-icon-communication-call-outgoing.entry.js":["../components/dist/esm/scale-icon-communication-call-outgoing.entry.js",160],"./scale-icon-communication-chat-badge.entry.js":["../components/dist/esm/scale-icon-communication-chat-badge.entry.js",161],"./scale-icon-communication-chat.entry.js":["../components/dist/esm/scale-icon-communication-chat.entry.js",162],"./scale-icon-communication-email.entry.js":["../components/dist/esm/scale-icon-communication-email.entry.js",163],"./scale-icon-communication-end-call.entry.js":["../components/dist/esm/scale-icon-communication-end-call.entry.js",164],"./scale-icon-communication-feedback.entry.js":["../components/dist/esm/scale-icon-communication-feedback.entry.js",165],"./scale-icon-communication-flight-mode.entry.js":["../components/dist/esm/scale-icon-communication-flight-mode.entry.js",166],"./scale-icon-communication-happy-person.entry.js":["../components/dist/esm/scale-icon-communication-happy-person.entry.js",167],"./scale-icon-communication-inbox.entry.js":["../components/dist/esm/scale-icon-communication-inbox.entry.js",168],"./scale-icon-communication-landing-mobile-contact-client.entry.js":["../components/dist/esm/scale-icon-communication-landing-mobile-contact-client.entry.js",169],"./scale-icon-communication-loyalty-earned.entry.js":["../components/dist/esm/scale-icon-communication-loyalty-earned.entry.js",170],"./scale-icon-communication-loyalty-lost.entry.js":["../components/dist/esm/scale-icon-communication-loyalty-lost.entry.js",171],"./scale-icon-communication-mail-opened.entry.js":["../components/dist/esm/scale-icon-communication-mail-opened.entry.js",172],"./scale-icon-communication-message-incoming.entry.js":["../components/dist/esm/scale-icon-communication-message-incoming.entry.js",173],"./scale-icon-communication-message-outgoing.entry.js":["../components/dist/esm/scale-icon-communication-message-outgoing.entry.js",174],"./scale-icon-communication-message.entry.js":["../components/dist/esm/scale-icon-communication-message.entry.js",175],"./scale-icon-communication-mms-incoming.entry.js":["../components/dist/esm/scale-icon-communication-mms-incoming.entry.js",176],"./scale-icon-communication-mms-outgoing.entry.js":["../components/dist/esm/scale-icon-communication-mms-outgoing.entry.js",177],"./scale-icon-communication-mobile-phone-number.entry.js":["../components/dist/esm/scale-icon-communication-mobile-phone-number.entry.js",178],"./scale-icon-communication-network-signal.entry.js":["../components/dist/esm/scale-icon-communication-network-signal.entry.js",179],"./scale-icon-communication-new-email.entry.js":["../components/dist/esm/scale-icon-communication-new-email.entry.js",180],"./scale-icon-communication-outbox.entry.js":["../components/dist/esm/scale-icon-communication-outbox.entry.js",181],"./scale-icon-communication-phone-number.entry.js":["../components/dist/esm/scale-icon-communication-phone-number.entry.js",182],"./scale-icon-communication-recipient.entry.js":["../components/dist/esm/scale-icon-communication-recipient.entry.js",183],"./scale-icon-communication-save-emails-to-drafts.entry.js":["../components/dist/esm/scale-icon-communication-save-emails-to-drafts.entry.js",184],"./scale-icon-communication-sms.entry.js":["../components/dist/esm/scale-icon-communication-sms.entry.js",185],"./scale-icon-communication-spam.entry.js":["../components/dist/esm/scale-icon-communication-spam.entry.js",186],"./scale-icon-communication-voice-message.entry.js":["../components/dist/esm/scale-icon-communication-voice-message.entry.js",187],"./scale-icon-content-2fa-google-auth.entry.js":["../components/dist/esm/scale-icon-content-2fa-google-auth.entry.js",188],"./scale-icon-content-achievement.entry.js":["../components/dist/esm/scale-icon-content-achievement.entry.js",189],"./scale-icon-content-android.entry.js":["../components/dist/esm/scale-icon-content-android.entry.js",190],"./scale-icon-content-apple.entry.js":["../components/dist/esm/scale-icon-content-apple.entry.js",191],"./scale-icon-content-applications.entry.js":["../components/dist/esm/scale-icon-content-applications.entry.js",192],"./scale-icon-content-available-keychain.entry.js":["../components/dist/esm/scale-icon-content-available-keychain.entry.js",193],"./scale-icon-content-bank.entry.js":["../components/dist/esm/scale-icon-content-bank.entry.js",194],"./scale-icon-content-biometric.entry.js":["../components/dist/esm/scale-icon-content-biometric.entry.js",195],"./scale-icon-content-birthday.entry.js":["../components/dist/esm/scale-icon-content-birthday.entry.js",196],"./scale-icon-content-bookmark.entry.js":["../components/dist/esm/scale-icon-content-bookmark.entry.js",197],"./scale-icon-content-clipboard.entry.js":["../components/dist/esm/scale-icon-content-clipboard.entry.js",198],"./scale-icon-content-clock.entry.js":["../components/dist/esm/scale-icon-content-clock.entry.js",199],"./scale-icon-content-cloud-security.entry.js":["../components/dist/esm/scale-icon-content-cloud-security.entry.js",200],"./scale-icon-content-code-scanner.entry.js":["../components/dist/esm/scale-icon-content-code-scanner.entry.js",201],"./scale-icon-content-color-selection.entry.js":["../components/dist/esm/scale-icon-content-color-selection.entry.js",202],"./scale-icon-content-country.entry.js":["../components/dist/esm/scale-icon-content-country.entry.js",203],"./scale-icon-content-credit-card.entry.js":["../components/dist/esm/scale-icon-content-credit-card.entry.js",204],"./scale-icon-content-data-visualisation.entry.js":["../components/dist/esm/scale-icon-content-data-visualisation.entry.js",205],"./scale-icon-content-delivery.entry.js":["../components/dist/esm/scale-icon-content-delivery.entry.js",206],"./scale-icon-content-digital-banking.entry.js":["../components/dist/esm/scale-icon-content-digital-banking.entry.js",207],"./scale-icon-content-digital-media.entry.js":["../components/dist/esm/scale-icon-content-digital-media.entry.js",208],"./scale-icon-content-discount.entry.js":["../components/dist/esm/scale-icon-content-discount.entry.js",209],"./scale-icon-content-e-sim.entry.js":["../components/dist/esm/scale-icon-content-e-sim.entry.js",210],"./scale-icon-content-eu.entry.js":["../components/dist/esm/scale-icon-content-eu.entry.js",211],"./scale-icon-content-face-mask.entry.js":["../components/dist/esm/scale-icon-content-face-mask.entry.js",212],"./scale-icon-content-features.entry.js":["../components/dist/esm/scale-icon-content-features.entry.js",213],"./scale-icon-content-flexible-tariffs.entry.js":["../components/dist/esm/scale-icon-content-flexible-tariffs.entry.js",214],"./scale-icon-content-folder.entry.js":["../components/dist/esm/scale-icon-content-folder.entry.js",215],"./scale-icon-content-food.entry.js":["../components/dist/esm/scale-icon-content-food.entry.js",216],"./scale-icon-content-gender-diverse.entry.js":["../components/dist/esm/scale-icon-content-gender-diverse.entry.js",217],"./scale-icon-content-gender-female.entry.js":["../components/dist/esm/scale-icon-content-gender-female.entry.js",218],"./scale-icon-content-gender-male.entry.js":["../components/dist/esm/scale-icon-content-gender-male.entry.js",219],"./scale-icon-content-half-rating.entry.js":["../components/dist/esm/scale-icon-content-half-rating.entry.js",220],"./scale-icon-content-heart.entry.js":["../components/dist/esm/scale-icon-content-heart.entry.js",221],"./scale-icon-content-height.entry.js":["../components/dist/esm/scale-icon-content-height.entry.js",222],"./scale-icon-content-history.entry.js":["../components/dist/esm/scale-icon-content-history.entry.js",223],"./scale-icon-content-hour-glass.entry.js":["../components/dist/esm/scale-icon-content-hour-glass.entry.js",224],"./scale-icon-content-iban.entry.js":["../components/dist/esm/scale-icon-content-iban.entry.js",225],"./scale-icon-content-id.entry.js":["../components/dist/esm/scale-icon-content-id.entry.js",226],"./scale-icon-content-in-stock.entry.js":["../components/dist/esm/scale-icon-content-in-stock.entry.js",227],"./scale-icon-content-international-sms.entry.js":["../components/dist/esm/scale-icon-content-international-sms.entry.js",228],"./scale-icon-content-international.entry.js":["../components/dist/esm/scale-icon-content-international.entry.js",229],"./scale-icon-content-interview.entry.js":["../components/dist/esm/scale-icon-content-interview.entry.js",230],"./scale-icon-content-key.entry.js":["../components/dist/esm/scale-icon-content-key.entry.js",231],"./scale-icon-content-language.entry.js":["../components/dist/esm/scale-icon-content-language.entry.js",232],"./scale-icon-content-lock.entry.js":["../components/dist/esm/scale-icon-content-lock.entry.js",233],"./scale-icon-content-loyalty.entry.js":["../components/dist/esm/scale-icon-content-loyalty.entry.js",234],"./scale-icon-content-media-folder.entry.js":["../components/dist/esm/scale-icon-content-media-folder.entry.js",235],"./scale-icon-content-money-at.entry.js":["../components/dist/esm/scale-icon-content-money-at.entry.js",236],"./scale-icon-content-music.entry.js":["../components/dist/esm/scale-icon-content-music.entry.js",237],"./scale-icon-content-news.entry.js":["../components/dist/esm/scale-icon-content-news.entry.js",238],"./scale-icon-content-out-of-stock.entry.js":["../components/dist/esm/scale-icon-content-out-of-stock.entry.js",239],"./scale-icon-content-person-walking.entry.js":["../components/dist/esm/scale-icon-content-person-walking.entry.js",240],"./scale-icon-content-prepaid-activate.entry.js":["../components/dist/esm/scale-icon-content-prepaid-activate.entry.js",241],"./scale-icon-content-price-tag.entry.js":["../components/dist/esm/scale-icon-content-price-tag.entry.js",242],"./scale-icon-content-ratings.entry.js":["../components/dist/esm/scale-icon-content-ratings.entry.js",243],"./scale-icon-content-route.entry.js":["../components/dist/esm/scale-icon-content-route.entry.js",244],"./scale-icon-content-rss.entry.js":["../components/dist/esm/scale-icon-content-rss.entry.js",245],"./scale-icon-content-shop.entry.js":["../components/dist/esm/scale-icon-content-shop.entry.js",246],"./scale-icon-content-signal.entry.js":["../components/dist/esm/scale-icon-content-signal.entry.js",247],"./scale-icon-content-sim-card.entry.js":["../components/dist/esm/scale-icon-content-sim-card.entry.js",248],"./scale-icon-content-smile.entry.js":["../components/dist/esm/scale-icon-content-smile.entry.js",249],"./scale-icon-content-sort-indicator-mini-down.entry.js":["../components/dist/esm/scale-icon-content-sort-indicator-mini-down.entry.js",250],"./scale-icon-content-sort-indicator-up-mini.entry.js":["../components/dist/esm/scale-icon-content-sort-indicator-up-mini.entry.js",251],"./scale-icon-content-status-inactive.entry.js":["../components/dist/esm/scale-icon-content-status-inactive.entry.js",252],"./scale-icon-content-status-recurring.entry.js":["../components/dist/esm/scale-icon-content-status-recurring.entry.js",253],"./scale-icon-content-stopwatch.entry.js":["../components/dist/esm/scale-icon-content-stopwatch.entry.js",254],"./scale-icon-content-support-chat.entry.js":["../components/dist/esm/scale-icon-content-support-chat.entry.js",255],"./scale-icon-content-sustainable.entry.js":["../components/dist/esm/scale-icon-content-sustainable.entry.js",256],"./scale-icon-content-tariffs.entry.js":["../components/dist/esm/scale-icon-content-tariffs.entry.js",257],"./scale-icon-content-threats.entry.js":["../components/dist/esm/scale-icon-content-threats.entry.js",258],"./scale-icon-content-todo-list.entry.js":["../components/dist/esm/scale-icon-content-todo-list.entry.js",259],"./scale-icon-content-transport.entry.js":["../components/dist/esm/scale-icon-content-transport.entry.js",260],"./scale-icon-content-unlock.entry.js":["../components/dist/esm/scale-icon-content-unlock.entry.js",261],"./scale-icon-content-voucher.entry.js":["../components/dist/esm/scale-icon-content-voucher.entry.js",262],"./scale-icon-content-waiting.entry.js":["../components/dist/esm/scale-icon-content-waiting.entry.js",263],"./scale-icon-content-wallet.entry.js":["../components/dist/esm/scale-icon-content-wallet.entry.js",264],"./scale-icon-device-add-device.entry.js":["../components/dist/esm/scale-icon-device-add-device.entry.js",265],"./scale-icon-device-camera.entry.js":["../components/dist/esm/scale-icon-device-camera.entry.js",266],"./scale-icon-device-change-camera.entry.js":["../components/dist/esm/scale-icon-device-change-camera.entry.js",267],"./scale-icon-device-computer.entry.js":["../components/dist/esm/scale-icon-device-computer.entry.js",268],"./scale-icon-device-device-controller.entry.js":["../components/dist/esm/scale-icon-device-device-controller.entry.js",269],"./scale-icon-device-device-ethernet.entry.js":["../components/dist/esm/scale-icon-device-device-ethernet.entry.js",270],"./scale-icon-device-device-mesh.entry.js":["../components/dist/esm/scale-icon-device-device-mesh.entry.js",271],"./scale-icon-device-device-phone.entry.js":["../components/dist/esm/scale-icon-device-device-phone.entry.js",272],"./scale-icon-device-device-router.entry.js":["../components/dist/esm/scale-icon-device-device-router.entry.js",273],"./scale-icon-device-device-tv.entry.js":["../components/dist/esm/scale-icon-device-device-tv.entry.js",274],"./scale-icon-device-device-watch.entry.js":["../components/dist/esm/scale-icon-device-device-watch.entry.js",275],"./scale-icon-device-dongle.entry.js":["../components/dist/esm/scale-icon-device-dongle.entry.js",276],"./scale-icon-device-fax.entry.js":["../components/dist/esm/scale-icon-device-fax.entry.js",277],"./scale-icon-device-fixed-line-services.entry.js":["../components/dist/esm/scale-icon-device-fixed-line-services.entry.js",278],"./scale-icon-device-game-controller.entry.js":["../components/dist/esm/scale-icon-device-game-controller.entry.js",279],"./scale-icon-device-media-receiver.entry.js":["../components/dist/esm/scale-icon-device-media-receiver.entry.js",280],"./scale-icon-device-mobile-data.entry.js":["../components/dist/esm/scale-icon-device-mobile-data.entry.js",281],"./scale-icon-device-mobile-devices-combination.entry.js":["../components/dist/esm/scale-icon-device-mobile-devices-combination.entry.js",282],"./scale-icon-device-mobile-equipment.entry.js":["../components/dist/esm/scale-icon-device-mobile-equipment.entry.js",283],"./scale-icon-device-mobile-phone-insurance.entry.js":["../components/dist/esm/scale-icon-device-mobile-phone-insurance.entry.js",284],"./scale-icon-device-mobile-services.entry.js":["../components/dist/esm/scale-icon-device-mobile-services.entry.js",285],"./scale-icon-device-no-camera.entry.js":["../components/dist/esm/scale-icon-device-no-camera.entry.js",286],"./scale-icon-device-phone-with-mobile-plan.entry.js":["../components/dist/esm/scale-icon-device-phone-with-mobile-plan.entry.js",287],"./scale-icon-device-phone-without-mobile-plan.entry.js":["../components/dist/esm/scale-icon-device-phone-without-mobile-plan.entry.js",288],"./scale-icon-device-photo-camera.entry.js":["../components/dist/esm/scale-icon-device-photo-camera.entry.js",289],"./scale-icon-device-remote-controller.entry.js":["../components/dist/esm/scale-icon-device-remote-controller.entry.js",290],"./scale-icon-device-replacement-mobilephone.entry.js":["../components/dist/esm/scale-icon-device-replacement-mobilephone.entry.js",291],"./scale-icon-device-screen-rotate.entry.js":["../components/dist/esm/scale-icon-device-screen-rotate.entry.js",292],"./scale-icon-device-server.entry.js":["../components/dist/esm/scale-icon-device-server.entry.js",293],"./scale-icon-device-smart-speaker.entry.js":["../components/dist/esm/scale-icon-device-smart-speaker.entry.js",294],"./scale-icon-device-tablet.entry.js":["../components/dist/esm/scale-icon-device-tablet.entry.js",295],"./scale-icon-device-tv-and-mobile.entry.js":["../components/dist/esm/scale-icon-device-tv-and-mobile.entry.js",296],"./scale-icon-device-twitching-closed-state.entry.js":["../components/dist/esm/scale-icon-device-twitching-closed-state.entry.js",297],"./scale-icon-device-twitching-open-state.entry.js":["../components/dist/esm/scale-icon-device-twitching-open-state.entry.js",298],"./scale-icon-home-home.entry.js":["../components/dist/esm/scale-icon-home-home.entry.js",299],"./scale-icon-home-internet-at-home.entry.js":["../components/dist/esm/scale-icon-home-internet-at-home.entry.js",300],"./scale-icon-home-iot.entry.js":["../components/dist/esm/scale-icon-home-iot.entry.js",301],"./scale-icon-home-light-bulb.entry.js":["../components/dist/esm/scale-icon-home-light-bulb.entry.js",302],"./scale-icon-home-network-secure.entry.js":["../components/dist/esm/scale-icon-home-network-secure.entry.js",303],"./scale-icon-home-no-wifi.entry.js":["../components/dist/esm/scale-icon-home-no-wifi.entry.js",304],"./scale-icon-home-power-socket.entry.js":["../components/dist/esm/scale-icon-home-power-socket.entry.js",305],"./scale-icon-home-preferred-wifi.entry.js":["../components/dist/esm/scale-icon-home-preferred-wifi.entry.js",306],"./scale-icon-home-reduced-wifi.entry.js":["../components/dist/esm/scale-icon-home-reduced-wifi.entry.js",307],"./scale-icon-home-slow-wifi.entry.js":["../components/dist/esm/scale-icon-home-slow-wifi.entry.js",308],"./scale-icon-home-smarthome.entry.js":["../components/dist/esm/scale-icon-home-smarthome.entry.js",309],"./scale-icon-home-unable-to-connect-to-router.entry.js":["../components/dist/esm/scale-icon-home-unable-to-connect-to-router.entry.js",310],"./scale-icon-home-wifi-connected.entry.js":["../components/dist/esm/scale-icon-home-wifi-connected.entry.js",311],"./scale-icon-home-wifi-connection-error.entry.js":["../components/dist/esm/scale-icon-home-wifi-connection-error.entry.js",312],"./scale-icon-home-wifi-manual-login.entry.js":["../components/dist/esm/scale-icon-home-wifi-manual-login.entry.js",313],"./scale-icon-home-wifi-no-wired-internet.entry.js":["../components/dist/esm/scale-icon-home-wifi-no-wired-internet.entry.js",314],"./scale-icon-home-wifi.entry.js":["../components/dist/esm/scale-icon-home-wifi.entry.js",315],"./scale-icon-navigation-circle-top-up.entry.js":["../components/dist/esm/scale-icon-navigation-circle-top-up.entry.js",316],"./scale-icon-navigation-collapse-down.entry.js":["../components/dist/esm/scale-icon-navigation-collapse-down.entry.js",317],"./scale-icon-navigation-collapse-up.entry.js":["../components/dist/esm/scale-icon-navigation-collapse-up.entry.js",318],"./scale-icon-navigation-double-left_2.entry.js":["../components/dist/esm/scale-icon-navigation-double-left_2.entry.js",319],"./scale-icon-navigation-external-link.entry.js":["../components/dist/esm/scale-icon-navigation-external-link.entry.js",320],"./scale-icon-navigation-internal-link.entry.js":["../components/dist/esm/scale-icon-navigation-internal-link.entry.js",321],"./scale-icon-navigation-left-condensed.entry.js":["../components/dist/esm/scale-icon-navigation-left-condensed.entry.js",322],"./scale-icon-navigation-left.entry.js":["../components/dist/esm/scale-icon-navigation-left.entry.js",323],"./scale-icon-navigation-location.entry.js":["../components/dist/esm/scale-icon-navigation-location.entry.js",324],"./scale-icon-navigation-map.entry.js":["../components/dist/esm/scale-icon-navigation-map.entry.js",325],"./scale-icon-navigation-my-location.entry.js":["../components/dist/esm/scale-icon-navigation-my-location.entry.js",326],"./scale-icon-navigation-right-condensed.entry.js":["../components/dist/esm/scale-icon-navigation-right-condensed.entry.js",327],"./scale-icon-navigation-right.entry.js":["../components/dist/esm/scale-icon-navigation-right.entry.js",328],"./scale-icon-navigation-start.entry.js":["../components/dist/esm/scale-icon-navigation-start.entry.js",329],"./scale-icon-navigation-top-up.entry.js":["../components/dist/esm/scale-icon-navigation-top-up.entry.js",330],"./scale-icon-process-order-status.entry.js":["../components/dist/esm/scale-icon-process-order-status.entry.js",331],"./scale-icon-process-processing.entry.js":["../components/dist/esm/scale-icon-process-processing.entry.js",332],"./scale-icon-process-sepa-transaction.entry.js":["../components/dist/esm/scale-icon-process-sepa-transaction.entry.js",333],"./scale-icon-service-devices-service.entry.js":["../components/dist/esm/scale-icon-service-devices-service.entry.js",334],"./scale-icon-service-maintanance.entry.js":["../components/dist/esm/scale-icon-service-maintanance.entry.js",335],"./scale-icon-service-manual.entry.js":["../components/dist/esm/scale-icon-service-manual.entry.js",336],"./scale-icon-service-one-time-password.entry.js":["../components/dist/esm/scale-icon-service-one-time-password.entry.js",337],"./scale-icon-service-services.entry.js":["../components/dist/esm/scale-icon-service-services.entry.js",338],"./scale-icon-service-support.entry.js":["../components/dist/esm/scale-icon-service-support.entry.js",339],"./scale-icon-service-vpn.entry.js":["../components/dist/esm/scale-icon-service-vpn.entry.js",340],"./scale-icon-t-product-2fa-telekom-app.entry.js":["../components/dist/esm/scale-icon-t-product-2fa-telekom-app.entry.js",341],"./scale-icon-t-product-magenta-cloud.entry.js":["../components/dist/esm/scale-icon-t-product-magenta-cloud.entry.js",342],"./scale-icon-t-product-magenta-tv.entry.js":["../components/dist/esm/scale-icon-t-product-magenta-tv.entry.js",343],"./scale-icon-t-product-magentaone.entry.js":["../components/dist/esm/scale-icon-t-product-magentaone.entry.js",344],"./scale-icon-t-product-measure-internet-speed.entry.js":["../components/dist/esm/scale-icon-t-product-measure-internet-speed.entry.js",345],"./scale-icon-t-product-seamless-connectivity.entry.js":["../components/dist/esm/scale-icon-t-product-seamless-connectivity.entry.js",346],"./scale-icon-t-product-telekom-1t1.entry.js":["../components/dist/esm/scale-icon-t-product-telekom-1t1.entry.js",347],"./scale-icon-t-product-telekom-plan.entry.js":["../components/dist/esm/scale-icon-t-product-telekom-plan.entry.js",348],"./scale-icon-t-product-telekom-shop-b.entry.js":["../components/dist/esm/scale-icon-t-product-telekom-shop-b.entry.js",349],"./scale-icon-t-product-usage.entry.js":["../components/dist/esm/scale-icon-t-product-usage.entry.js",350],"./scale-icon-t-product-voice.entry.js":["../components/dist/esm/scale-icon-t-product-voice.entry.js",351],"./scale-icon-user-file-admin.entry.js":["../components/dist/esm/scale-icon-user-file-admin.entry.js",352],"./scale-icon-user-file-analytics.entry.js":["../components/dist/esm/scale-icon-user-file-analytics.entry.js",353],"./scale-icon-user-file-attachment.entry.js":["../components/dist/esm/scale-icon-user-file-attachment.entry.js",354],"./scale-icon-user-file-audio-file.entry.js":["../components/dist/esm/scale-icon-user-file-audio-file.entry.js",355],"./scale-icon-user-file-billing.entry.js":["../components/dist/esm/scale-icon-user-file-billing.entry.js",356],"./scale-icon-user-file-boy.entry.js":["../components/dist/esm/scale-icon-user-file-boy.entry.js",357],"./scale-icon-user-file-bussines-users.entry.js":["../components/dist/esm/scale-icon-user-file-bussines-users.entry.js",358],"./scale-icon-user-file-communities.entry.js":["../components/dist/esm/scale-icon-user-file-communities.entry.js",359],"./scale-icon-user-file-contacts-from-cloud.entry.js":["../components/dist/esm/scale-icon-user-file-contacts-from-cloud.entry.js",360],"./scale-icon-user-file-contacts.entry.js":["../components/dist/esm/scale-icon-user-file-contacts.entry.js",361],"./scale-icon-user-file-contracts.entry.js":["../components/dist/esm/scale-icon-user-file-contracts.entry.js",362],"./scale-icon-user-file-draft-file.entry.js":["../components/dist/esm/scale-icon-user-file-draft-file.entry.js",363],"./scale-icon-user-file-families.entry.js":["../components/dist/esm/scale-icon-user-file-families.entry.js",364],"./scale-icon-user-file-family.entry.js":["../components/dist/esm/scale-icon-user-file-family.entry.js",365],"./scale-icon-user-file-file-collection.entry.js":["../components/dist/esm/scale-icon-user-file-file-collection.entry.js",366],"./scale-icon-user-file-file.entry.js":["../components/dist/esm/scale-icon-user-file-file.entry.js",367],"./scale-icon-user-file-girl.entry.js":["../components/dist/esm/scale-icon-user-file-girl.entry.js",368],"./scale-icon-user-file-handshake.entry.js":["../components/dist/esm/scale-icon-user-file-handshake.entry.js",369],"./scale-icon-user-file-html-file.entry.js":["../components/dist/esm/scale-icon-user-file-html-file.entry.js",370],"./scale-icon-user-file-id-card.entry.js":["../components/dist/esm/scale-icon-user-file-id-card.entry.js",371],"./scale-icon-user-file-image-file.entry.js":["../components/dist/esm/scale-icon-user-file-image-file.entry.js",372],"./scale-icon-user-file-logout.entry.js":["../components/dist/esm/scale-icon-user-file-logout.entry.js",373],"./scale-icon-user-file-man.entry.js":["../components/dist/esm/scale-icon-user-file-man.entry.js",374],"./scale-icon-user-file-pdf-file.entry.js":["../components/dist/esm/scale-icon-user-file-pdf-file.entry.js",375],"./scale-icon-user-file-switch-users.entry.js":["../components/dist/esm/scale-icon-user-file-switch-users.entry.js",376],"./scale-icon-user-file-videos.entry.js":["../components/dist/esm/scale-icon-user-file-videos.entry.js",377],"./scale-icon-user-file-woman.entry.js":["../components/dist/esm/scale-icon-user-file-woman.entry.js",378],"./scale-icon-weather-cloudy-rain.entry.js":["../components/dist/esm/scale-icon-weather-cloudy-rain.entry.js",379],"./scale-icon-weather-cloudy-sleet.entry.js":["../components/dist/esm/scale-icon-weather-cloudy-sleet.entry.js",380],"./scale-icon-weather-cloudy-snow.entry.js":["../components/dist/esm/scale-icon-weather-cloudy-snow.entry.js",381],"./scale-icon-weather-cloudy-thunder-rain.entry.js":["../components/dist/esm/scale-icon-weather-cloudy-thunder-rain.entry.js",382],"./scale-icon-weather-cloudy-thunder-snow.entry.js":["../components/dist/esm/scale-icon-weather-cloudy-thunder-snow.entry.js",383],"./scale-icon-weather-cloudy.entry.js":["../components/dist/esm/scale-icon-weather-cloudy.entry.js",384],"./scale-icon-weather-heavy-sleet.entry.js":["../components/dist/esm/scale-icon-weather-heavy-sleet.entry.js",385],"./scale-icon-weather-heavy-snow.entry.js":["../components/dist/esm/scale-icon-weather-heavy-snow.entry.js",386],"./scale-icon-weather-moon-clear.entry.js":["../components/dist/esm/scale-icon-weather-moon-clear.entry.js",387],"./scale-icon-weather-moon-cloudy-a.entry.js":["../components/dist/esm/scale-icon-weather-moon-cloudy-a.entry.js",388],"./scale-icon-weather-moon-cloudy-b.entry.js":["../components/dist/esm/scale-icon-weather-moon-cloudy-b.entry.js",389],"./scale-icon-weather-moon-rain.entry.js":["../components/dist/esm/scale-icon-weather-moon-rain.entry.js",390],"./scale-icon-weather-moon-sleet.entry.js":["../components/dist/esm/scale-icon-weather-moon-sleet.entry.js",391],"./scale-icon-weather-moon-snow.entry.js":["../components/dist/esm/scale-icon-weather-moon-snow.entry.js",392],"./scale-icon-weather-moon-thunder-rain.entry.js":["../components/dist/esm/scale-icon-weather-moon-thunder-rain.entry.js",393],"./scale-icon-weather-moon-thunder-snow.entry.js":["../components/dist/esm/scale-icon-weather-moon-thunder-snow.entry.js",394],"./scale-icon-weather-overcast.entry.js":["../components/dist/esm/scale-icon-weather-overcast.entry.js",395],"./scale-icon-weather-rain.entry.js":["../components/dist/esm/scale-icon-weather-rain.entry.js",396],"./scale-icon-weather-sunny.entry.js":["../components/dist/esm/scale-icon-weather-sunny.entry.js",397],"./scale-icon-weather-thunder-rain.entry.js":["../components/dist/esm/scale-icon-weather-thunder-rain.entry.js",398],"./scale-icon-weather-thunder-snow.entry.js":["../components/dist/esm/scale-icon-weather-thunder-snow.entry.js",399],"./scale-icon.entry.js":["../components/dist/esm/scale-icon.entry.js",50],"./scale-input.entry.js":["../components/dist/esm/scale-input.entry.js",10],"./scale-link.entry.js":["../components/dist/esm/scale-link.entry.js",400],"./scale-list-item.entry.js":["../components/dist/esm/scale-list-item.entry.js",51],"./scale-list.entry.js":["../components/dist/esm/scale-list.entry.js",52],"./scale-loading-spinner.entry.js":["../components/dist/esm/scale-loading-spinner.entry.js",53],"./scale-logo_2.entry.js":["../components/dist/esm/scale-logo_2.entry.js",35],"./scale-menu-flyout-divider.entry.js":["../components/dist/esm/scale-menu-flyout-divider.entry.js",54],"./scale-modal.entry.js":["../components/dist/esm/scale-modal.entry.js",36],"./scale-notification-banner.entry.js":["../components/dist/esm/scale-notification-banner.entry.js",15],"./scale-notification-message.entry.js":["../components/dist/esm/scale-notification-message.entry.js",16],"./scale-notification-toast.entry.js":["../components/dist/esm/scale-notification-toast.entry.js",17],"./scale-notification.entry.js":["../components/dist/esm/scale-notification.entry.js",37],"./scale-radio-button-group.entry.js":["../components/dist/esm/scale-radio-button-group.entry.js",18],"./scale-radio-button.entry.js":["../components/dist/esm/scale-radio-button.entry.js",19],"./scale-rating-stars.entry.js":["../components/dist/esm/scale-rating-stars.entry.js",43],"./scale-segment.entry.js":["../components/dist/esm/scale-segment.entry.js",11],"./scale-segmented-button.entry.js":["../components/dist/esm/scale-segmented-button.entry.js",38],"./scale-sidebar-nav-collapsible.entry.js":["../components/dist/esm/scale-sidebar-nav-collapsible.entry.js",55],"./scale-sidebar-nav-item.entry.js":["../components/dist/esm/scale-sidebar-nav-item.entry.js",56],"./scale-sidebar-nav.entry.js":["../components/dist/esm/scale-sidebar-nav.entry.js",39],"./scale-slider.entry.js":["../components/dist/esm/scale-slider.entry.js",20],"./scale-ssr-slot-fix.entry.js":["../components/dist/esm/scale-ssr-slot-fix.entry.js",401],"./scale-tab-header.entry.js":["../components/dist/esm/scale-tab-header.entry.js",21],"./scale-tab-nav.entry.js":["../components/dist/esm/scale-tab-nav.entry.js",40],"./scale-tab-panel.entry.js":["../components/dist/esm/scale-tab-panel.entry.js",61],"./scale-table.entry.js":["../components/dist/esm/scale-table.entry.js",41],"./scale-telekom-app-shell.entry.js":["../components/dist/esm/scale-telekom-app-shell.entry.js",402],"./scale-telekom-footer-data-back-compat.entry.js":["../components/dist/esm/scale-telekom-footer-data-back-compat.entry.js",403],"./scale-telekom-footer-extended-navigation-column.entry.js":["../components/dist/esm/scale-telekom-footer-extended-navigation-column.entry.js",57],"./scale-telekom-footer-extended-navigation.entry.js":["../components/dist/esm/scale-telekom-footer-extended-navigation.entry.js",404],"./scale-telekom-footer_2.entry.js":["../components/dist/esm/scale-telekom-footer_2.entry.js",58],"./scale-telekom-header-data-back-compat.entry.js":["../components/dist/esm/scale-telekom-header-data-back-compat.entry.js",12],"./scale-textarea.entry.js":["../components/dist/esm/scale-textarea.entry.js",22],"./scale-toast.entry.js":["../components/dist/esm/scale-toast.entry.js",6],"./scale-toggle-button.entry.js":["../components/dist/esm/scale-toggle-button.entry.js",23],"./scale-toggle-group.entry.js":["../components/dist/esm/scale-toggle-group.entry.js",24],"./scale-tooltip.entry.js":["../components/dist/esm/scale-tooltip.entry.js",0,405]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((function(){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((function(){return __webpack_require__(id)}))}webpackAsyncContext.keys=function webpackAsyncContextKeys(){return Object.keys(map)},webpackAsyncContext.id="../components/dist/esm lazy recursive ^\\.\\/.*\\.entry\\.js$ include: \\.entry\\.js$ exclude: \\.system\\.entry\\.js$",module.exports=webpackAsyncContext},"../components/dist/esm/index-6d95a4bc.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Fragment})),__webpack_require__.d(__webpack_exports__,"b",(function(){return NAMESPACE})),__webpack_require__.d(__webpack_exports__,"c",(function(){return Host})),__webpack_require__.d(__webpack_exports__,"d",(function(){return bootstrapLazy})),__webpack_require__.d(__webpack_exports__,"e",(function(){return createEvent})),__webpack_require__.d(__webpack_exports__,"f",(function(){return getElement})),__webpack_require__.d(__webpack_exports__,"g",(function(){return h})),__webpack_require__.d(__webpack_exports__,"h",(function(){return promiseResolve})),__webpack_require__.d(__webpack_exports__,"i",(function(){return registerInstance}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.weak-map.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.set.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.trim.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.some.js"),__webpack_require__("../../node_modules/core-js/modules/es.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.parse-float.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.is-nan.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.entries.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.every.js"),__webpack_require__("../../node_modules/core-js/modules/web.url.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&_setPrototypeOf(subClass,superClass)}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){return!call||"object"!=typeof call&&"function"!=typeof call?_assertThisInitialized(self):call}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _wrapNativeSuper(Class){var _cache="function"==typeof Map?new Map:void 0;return _wrapNativeSuper=function _wrapNativeSuper(Class){if(null===Class||!function _isNativeFunction(fn){return-1!==Function.toString.call(fn).indexOf("[native code]")}(Class))return Class;if("function"!=typeof Class)throw new TypeError("Super expression must either be null or a function");if(void 0!==_cache){if(_cache.has(Class))return _cache.get(Class);_cache.set(Class,Wrapper)}function Wrapper(){return _construct(Class,arguments,_getPrototypeOf(this).constructor)}return Wrapper.prototype=Object.create(Class.prototype,{constructor:{value:Wrapper,enumerable:!1,writable:!0,configurable:!0}}),_setPrototypeOf(Wrapper,Class)},_wrapNativeSuper(Class)}function _construct(Parent,args,Class){return _construct=_isNativeReflectConstruct()?Reflect.construct:function _construct(Parent,args,Class){var a=[null];a.push.apply(a,args);var instance=new(Function.bind.apply(Parent,a));return Class&&_setPrototypeOf(instance,Class.prototype),instance},_construct.apply(null,arguments)}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||_unsupportedIterableToArray(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var scopeId,contentRef,hostTagName,NAMESPACE="scale-components",useNativeShadowDom=!1,checkSlotFallbackVisibility=!1,checkSlotRelocate=!1,isSvgMode=!1,queuePending=!1,win="undefined"!=typeof window?window:{},doc=win.document||{head:{}},plt=(win.HTMLElement,{$flags$:0,$resourcesUrl$:"",jmp:function jmp(h){return h()},raf:function raf(h){return requestAnimationFrame(h)},ael:function ael(el,eventName,listener,opts){return el.addEventListener(eventName,listener,opts)},rel:function rel(el,eventName,listener,opts){return el.removeEventListener(eventName,listener,opts)},ce:function ce(eventName,opts){return new CustomEvent(eventName,opts)}}),promiseResolve=function promiseResolve(v){return Promise.resolve(v)},supportsConstructibleStylesheets=function(){try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1}(),addHostEventListeners=function addHostEventListeners(elm,hostRef,listeners,attachParentListeners){listeners&&listeners.map((function(_ref){var _ref2=_slicedToArray(_ref,3),flags=_ref2[0],name=_ref2[1],method=_ref2[2],target=getHostListenerTarget(elm,flags),handler=hostListenerProxy(hostRef,method),opts=hostListenerOpts(flags);plt.ael(target,name,handler,opts),(hostRef.$rmListeners$=hostRef.$rmListeners$||[]).push((function(){return plt.rel(target,name,handler,opts)}))}))},hostListenerProxy=function hostListenerProxy(hostRef,methodName){return function(ev){try{256&hostRef.$flags$?hostRef.$lazyInstance$[methodName](ev):(hostRef.$queuedListeners$=hostRef.$queuedListeners$||[]).push([methodName,ev])}catch(e){consoleError(e)}}},getHostListenerTarget=function getHostListenerTarget(elm,flags){return 4&flags?doc:8&flags?win:elm},hostListenerOpts=function hostListenerOpts(flags){return 0!=(2&flags)},HYDRATED_CSS="{visibility:hidden}.hydrated{visibility:inherit}",XLINK_NS="http://www.w3.org/1999/xlink",rootAppliedStyles=new WeakMap,registerStyle=function registerStyle(scopeId,cssText,allowCS){var style=styles.get(scopeId);supportsConstructibleStylesheets&&allowCS?(style=style||new CSSStyleSheet).replace(cssText):style=cssText,styles.set(scopeId,style)},addStyle=function addStyle(styleContainerNode,cmpMeta,mode,hostElm){var scopeId=getScopeId(cmpMeta),style=styles.get(scopeId);if(styleContainerNode=11===styleContainerNode.nodeType?styleContainerNode:doc,style)if("string"==typeof style){styleContainerNode=styleContainerNode.head||styleContainerNode;var styleElm,appliedStyles=rootAppliedStyles.get(styleContainerNode);appliedStyles||rootAppliedStyles.set(styleContainerNode,appliedStyles=new Set),appliedStyles.has(scopeId)||(styleContainerNode.host&&(styleElm=styleContainerNode.querySelector('[sty-id="'+scopeId+'"]'))?styleElm.innerHTML=style:((styleElm=doc.createElement("style")).innerHTML=style,styleContainerNode.insertBefore(styleElm,styleContainerNode.querySelector("link"))),appliedStyles&&appliedStyles.add(scopeId))}else styleContainerNode.adoptedStyleSheets.includes(style)||(styleContainerNode.adoptedStyleSheets=[].concat(_toConsumableArray(styleContainerNode.adoptedStyleSheets),[style]));return scopeId},attachStyles=function attachStyles(hostRef){var cmpMeta=hostRef.$cmpMeta$,elm=hostRef.$hostElement$,flags=cmpMeta.$flags$,endAttachStyles=(cmpMeta.$tagName$,function(){}),scopeId=addStyle(elm.shadowRoot?elm.shadowRoot:elm.getRootNode(),cmpMeta);10&flags&&(elm["s-sc"]=scopeId,elm.classList.add(scopeId+"-h")),endAttachStyles()},getScopeId=function getScopeId(cmp,mode){return"sc-"+cmp.$tagName$},convertScopedToShadow=function convertScopedToShadow(css){return css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g,"$1{")},EMPTY_OBJ={},isComplexType=function isComplexType(o){return"object"===(o=typeof o)||"function"===o},h=function h(nodeName,vnodeData){for(var child=null,key=null,slotName=null,simple=!1,lastSimple=!1,vNodeChildren=[],walk=function walk(c){for(var i=0;i<c.length;i++)child=c[i],Array.isArray(child)?walk(child):null!=child&&"boolean"!=typeof child&&((simple="function"!=typeof nodeName&&!isComplexType(child))&&(child=String(child)),simple&&lastSimple?vNodeChildren[vNodeChildren.length-1].$text$+=child:vNodeChildren.push(simple?newVNode(null,child):child),lastSimple=simple)},_len=arguments.length,children=new Array(_len>2?_len-2:0),_key=2;_key<_len;_key++)children[_key-2]=arguments[_key];if(walk(children),vnodeData){vnodeData.key&&(key=vnodeData.key),vnodeData.name&&(slotName=vnodeData.name);var classData=vnodeData.className||vnodeData.class;classData&&(vnodeData.class="object"!=typeof classData?classData:Object.keys(classData).filter((function(k){return classData[k]})).join(" "))}if("function"==typeof nodeName)return nodeName(null===vnodeData?{}:vnodeData,vNodeChildren,vdomFnUtils);var vnode=newVNode(nodeName,null);return vnode.$attrs$=vnodeData,vNodeChildren.length>0&&(vnode.$children$=vNodeChildren),vnode.$key$=key,vnode.$name$=slotName,vnode},newVNode=function newVNode(tag,text){var vnode={$flags$:0,$tag$:tag,$text$:text,$elm$:null,$children$:null,$attrs$:null,$key$:null,$name$:null};return vnode},Host={},vdomFnUtils={forEach:function forEach(children,cb){return children.map(convertToPublic).forEach(cb)},map:function map(children,cb){return children.map(convertToPublic).map(cb).map(convertToPrivate)}},convertToPublic=function convertToPublic(node){return{vattrs:node.$attrs$,vchildren:node.$children$,vkey:node.$key$,vname:node.$name$,vtag:node.$tag$,vtext:node.$text$}},convertToPrivate=function convertToPrivate(node){if("function"==typeof node.vtag){var vnodeData=Object.assign({},node.vattrs);return node.vkey&&(vnodeData.key=node.vkey),node.vname&&(vnodeData.name=node.vname),h.apply(void 0,[node.vtag,vnodeData].concat(_toConsumableArray(node.vchildren||[])))}var vnode=newVNode(node.vtag,node.vtext);return vnode.$attrs$=node.vattrs,vnode.$children$=node.vchildren,vnode.$key$=node.vkey,vnode.$name$=node.vname,vnode},setAccessor=function setAccessor(elm,memberName,oldValue,newValue,isSvg,flags){if(oldValue!==newValue){var isProp=isMemberInElement(elm,memberName),ln=memberName.toLowerCase();if("class"===memberName){var classList=elm.classList,oldClasses=parseClassList(oldValue),newClasses=parseClassList(newValue);classList.remove.apply(classList,_toConsumableArray(oldClasses.filter((function(c){return c&&!newClasses.includes(c)})))),classList.add.apply(classList,_toConsumableArray(newClasses.filter((function(c){return c&&!oldClasses.includes(c)}))))}else if("style"===memberName){for(var prop in oldValue)newValue&&null!=newValue[prop]||(prop.includes("-")?elm.style.removeProperty(prop):elm.style[prop]="");for(var _prop in newValue)oldValue&&newValue[_prop]===oldValue[_prop]||(_prop.includes("-")?elm.style.setProperty(_prop,newValue[_prop]):elm.style[_prop]=newValue[_prop])}else if("key"===memberName);else if("ref"===memberName)newValue&&newValue(elm);else if(isProp||"o"!==memberName[0]||"n"!==memberName[1]){var isComplex=isComplexType(newValue);if((isProp||isComplex&&null!==newValue)&&!isSvg)try{if(elm.tagName.includes("-"))elm[memberName]=newValue;else{var n=null==newValue?"":newValue;"list"===memberName?isProp=!1:null!=oldValue&&elm[memberName]==n||(elm[memberName]=n)}}catch(e){}var xlink=!1;ln!==(ln=ln.replace(/^xlink\:?/,""))&&(memberName=ln,xlink=!0),null==newValue||!1===newValue?!1===newValue&&""!==elm.getAttribute(memberName)||(xlink?elm.removeAttributeNS(XLINK_NS,memberName):elm.removeAttribute(memberName)):(!isProp||4&flags||isSvg)&&!isComplex&&(newValue=!0===newValue?"":newValue,xlink?elm.setAttributeNS(XLINK_NS,memberName,newValue):elm.setAttribute(memberName,newValue))}else memberName="-"===memberName[2]?memberName.slice(3):isMemberInElement(win,ln)?ln.slice(2):ln[2]+memberName.slice(3),oldValue&&plt.rel(elm,memberName,oldValue,!1),newValue&&plt.ael(elm,memberName,newValue,!1)}},parseClassListRegex=/\s/,parseClassList=function parseClassList(value){return value?value.split(parseClassListRegex):[]},updateElement=function updateElement(oldVnode,newVnode,isSvgMode,memberName){var elm=11===newVnode.$elm$.nodeType&&newVnode.$elm$.host?newVnode.$elm$.host:newVnode.$elm$,oldVnodeAttrs=oldVnode&&oldVnode.$attrs$||EMPTY_OBJ,newVnodeAttrs=newVnode.$attrs$||EMPTY_OBJ;for(memberName in oldVnodeAttrs)memberName in newVnodeAttrs||setAccessor(elm,memberName,oldVnodeAttrs[memberName],void 0,isSvgMode,newVnode.$flags$);for(memberName in newVnodeAttrs)setAccessor(elm,memberName,oldVnodeAttrs[memberName],newVnodeAttrs[memberName],isSvgMode,newVnode.$flags$)},createElm=function createElm(oldParentVNode,newParentVNode,childIndex,parentElm){var elm,childNode,oldVNode,newVNode=newParentVNode.$children$[childIndex],i=0;if(useNativeShadowDom||(checkSlotRelocate=!0,"slot"===newVNode.$tag$&&(scopeId&&parentElm.classList.add(scopeId+"-s"),newVNode.$flags$|=newVNode.$children$?2:1)),null!==newVNode.$text$)elm=newVNode.$elm$=doc.createTextNode(newVNode.$text$);else if(1&newVNode.$flags$)elm=newVNode.$elm$=doc.createTextNode("");else{if(isSvgMode||(isSvgMode="svg"===newVNode.$tag$),elm=newVNode.$elm$=doc.createElementNS(isSvgMode?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",2&newVNode.$flags$?"slot-fb":newVNode.$tag$),isSvgMode&&"foreignObject"===newVNode.$tag$&&(isSvgMode=!1),updateElement(null,newVNode,isSvgMode),function isDef(v){return null!=v}(scopeId)&&elm["s-si"]!==scopeId&&elm.classList.add(elm["s-si"]=scopeId),newVNode.$children$)for(i=0;i<newVNode.$children$.length;++i)(childNode=createElm(oldParentVNode,newVNode,i,elm))&&elm.appendChild(childNode);"svg"===newVNode.$tag$?isSvgMode=!1:"foreignObject"===elm.tagName&&(isSvgMode=!0)}return elm["s-hn"]=hostTagName,3&newVNode.$flags$&&(elm["s-sr"]=!0,elm["s-cr"]=contentRef,elm["s-sn"]=newVNode.$name$||"",(oldVNode=oldParentVNode&&oldParentVNode.$children$&&oldParentVNode.$children$[childIndex])&&oldVNode.$tag$===newVNode.$tag$&&oldParentVNode.$elm$&&putBackInOriginalLocation(oldParentVNode.$elm$,!1)),elm},putBackInOriginalLocation=function putBackInOriginalLocation(parentElm,recursive){plt.$flags$|=1;for(var oldSlotChildNodes=parentElm.childNodes,i=oldSlotChildNodes.length-1;i>=0;i--){var childNode=oldSlotChildNodes[i];childNode["s-hn"]!==hostTagName&&childNode["s-ol"]&&(parentReferenceNode(childNode).insertBefore(childNode,referenceNode(childNode)),childNode["s-ol"].remove(),childNode["s-ol"]=void 0,checkSlotRelocate=!0),recursive&&putBackInOriginalLocation(childNode,recursive)}plt.$flags$&=-2},addVnodes=function addVnodes(parentElm,before,parentVNode,vnodes,startIdx,endIdx){var childNode,containerElm=parentElm["s-cr"]&&parentElm["s-cr"].parentNode||parentElm;for(containerElm.shadowRoot&&containerElm.tagName===hostTagName&&(containerElm=containerElm.shadowRoot);startIdx<=endIdx;++startIdx)vnodes[startIdx]&&(childNode=createElm(null,parentVNode,startIdx,parentElm))&&(vnodes[startIdx].$elm$=childNode,containerElm.insertBefore(childNode,referenceNode(before)))},removeVnodes=function removeVnodes(vnodes,startIdx,endIdx,vnode,elm){for(;startIdx<=endIdx;++startIdx)(vnode=vnodes[startIdx])&&(elm=vnode.$elm$,callNodeRefs(vnode),checkSlotFallbackVisibility=!0,elm["s-ol"]?elm["s-ol"].remove():putBackInOriginalLocation(elm,!0),elm.remove())},updateChildren=function updateChildren(parentElm,oldCh,newVNode,newCh){for(var node,elmToMove,oldStartIdx=0,newStartIdx=0,idxInOld=0,i=0,oldEndIdx=oldCh.length-1,oldStartVnode=oldCh[0],oldEndVnode=oldCh[oldEndIdx],newEndIdx=newCh.length-1,newStartVnode=newCh[0],newEndVnode=newCh[newEndIdx];oldStartIdx<=oldEndIdx&&newStartIdx<=newEndIdx;)if(null==oldStartVnode)oldStartVnode=oldCh[++oldStartIdx];else if(null==oldEndVnode)oldEndVnode=oldCh[--oldEndIdx];else if(null==newStartVnode)newStartVnode=newCh[++newStartIdx];else if(null==newEndVnode)newEndVnode=newCh[--newEndIdx];else if(isSameVnode(oldStartVnode,newStartVnode))patch(oldStartVnode,newStartVnode),oldStartVnode=oldCh[++oldStartIdx],newStartVnode=newCh[++newStartIdx];else if(isSameVnode(oldEndVnode,newEndVnode))patch(oldEndVnode,newEndVnode),oldEndVnode=oldCh[--oldEndIdx],newEndVnode=newCh[--newEndIdx];else if(isSameVnode(oldStartVnode,newEndVnode))"slot"!==oldStartVnode.$tag$&&"slot"!==newEndVnode.$tag$||putBackInOriginalLocation(oldStartVnode.$elm$.parentNode,!1),patch(oldStartVnode,newEndVnode),parentElm.insertBefore(oldStartVnode.$elm$,oldEndVnode.$elm$.nextSibling),oldStartVnode=oldCh[++oldStartIdx],newEndVnode=newCh[--newEndIdx];else if(isSameVnode(oldEndVnode,newStartVnode))"slot"!==oldStartVnode.$tag$&&"slot"!==newEndVnode.$tag$||putBackInOriginalLocation(oldEndVnode.$elm$.parentNode,!1),patch(oldEndVnode,newStartVnode),parentElm.insertBefore(oldEndVnode.$elm$,oldStartVnode.$elm$),oldEndVnode=oldCh[--oldEndIdx],newStartVnode=newCh[++newStartIdx];else{for(idxInOld=-1,i=oldStartIdx;i<=oldEndIdx;++i)if(oldCh[i]&&null!==oldCh[i].$key$&&oldCh[i].$key$===newStartVnode.$key$){idxInOld=i;break}idxInOld>=0?((elmToMove=oldCh[idxInOld]).$tag$!==newStartVnode.$tag$?node=createElm(oldCh&&oldCh[newStartIdx],newVNode,idxInOld,parentElm):(patch(elmToMove,newStartVnode),oldCh[idxInOld]=void 0,node=elmToMove.$elm$),newStartVnode=newCh[++newStartIdx]):(node=createElm(oldCh&&oldCh[newStartIdx],newVNode,newStartIdx,parentElm),newStartVnode=newCh[++newStartIdx]),node&&parentReferenceNode(oldStartVnode.$elm$).insertBefore(node,referenceNode(oldStartVnode.$elm$))}oldStartIdx>oldEndIdx?addVnodes(parentElm,null==newCh[newEndIdx+1]?null:newCh[newEndIdx+1].$elm$,newVNode,newCh,newStartIdx,newEndIdx):newStartIdx>newEndIdx&&removeVnodes(oldCh,oldStartIdx,oldEndIdx)},isSameVnode=function isSameVnode(vnode1,vnode2){return vnode1.$tag$===vnode2.$tag$&&("slot"===vnode1.$tag$?vnode1.$name$===vnode2.$name$:vnode1.$key$===vnode2.$key$)},referenceNode=function referenceNode(node){return node&&node["s-ol"]||node},parentReferenceNode=function parentReferenceNode(node){return(node["s-ol"]?node["s-ol"]:node).parentNode},patch=function patch(oldVNode,newVNode){var defaultHolder,elm=newVNode.$elm$=oldVNode.$elm$,oldChildren=oldVNode.$children$,newChildren=newVNode.$children$,tag=newVNode.$tag$,text=newVNode.$text$;null===text?(isSvgMode="svg"===tag||"foreignObject"!==tag&&isSvgMode,"slot"===tag||updateElement(oldVNode,newVNode,isSvgMode),null!==oldChildren&&null!==newChildren?updateChildren(elm,oldChildren,newVNode,newChildren):null!==newChildren?(null!==oldVNode.$text$&&(elm.textContent=""),addVnodes(elm,null,newVNode,newChildren,0,newChildren.length-1)):null!==oldChildren&&removeVnodes(oldChildren,0,oldChildren.length-1),isSvgMode&&"svg"===tag&&(isSvgMode=!1)):(defaultHolder=elm["s-cr"])?defaultHolder.parentNode.textContent=text:oldVNode.$text$!==text&&(elm.data=text)},updateFallbackSlotVisibility=function updateFallbackSlotVisibility(elm){var childNode,i,ilen,j,slotNameAttr,nodeType,childNodes=elm.childNodes;for(i=0,ilen=childNodes.length;i<ilen;i++)if(1===(childNode=childNodes[i]).nodeType){if(childNode["s-sr"])for(slotNameAttr=childNode["s-sn"],childNode.hidden=!1,j=0;j<ilen;j++)if(nodeType=childNodes[j].nodeType,childNodes[j]["s-hn"]!==childNode["s-hn"]||""!==slotNameAttr){if(1===nodeType&&slotNameAttr===childNodes[j].getAttribute("slot")){childNode.hidden=!0;break}}else if(1===nodeType||3===nodeType&&""!==childNodes[j].textContent.trim()){childNode.hidden=!0;break}updateFallbackSlotVisibility(childNode)}},relocateNodes=[],relocateSlotContent=function relocateSlotContent(elm){for(var childNode,node,hostContentNodes,slotNameAttr,relocateNodeData,j,i=0,childNodes=elm.childNodes,ilen=childNodes.length;i<ilen;i++){if((childNode=childNodes[i])["s-sr"]&&(node=childNode["s-cr"])&&node.parentNode)for(hostContentNodes=node.parentNode.childNodes,slotNameAttr=childNode["s-sn"],j=hostContentNodes.length-1;j>=0;j--)(node=hostContentNodes[j])["s-cn"]||node["s-nr"]||node["s-hn"]===childNode["s-hn"]||(isNodeLocatedInSlot(node,slotNameAttr)?(relocateNodeData=relocateNodes.find((function(r){return r.$nodeToRelocate$===node})),checkSlotFallbackVisibility=!0,node["s-sn"]=node["s-sn"]||slotNameAttr,relocateNodeData?relocateNodeData.$slotRefNode$=childNode:relocateNodes.push({$slotRefNode$:childNode,$nodeToRelocate$:node}),node["s-sr"]&&relocateNodes.map((function(relocateNode){isNodeLocatedInSlot(relocateNode.$nodeToRelocate$,node["s-sn"])&&(relocateNodeData=relocateNodes.find((function(r){return r.$nodeToRelocate$===node})))&&!relocateNode.$slotRefNode$&&(relocateNode.$slotRefNode$=relocateNodeData.$slotRefNode$)}))):relocateNodes.some((function(r){return r.$nodeToRelocate$===node}))||relocateNodes.push({$nodeToRelocate$:node}));1===childNode.nodeType&&relocateSlotContent(childNode)}},isNodeLocatedInSlot=function isNodeLocatedInSlot(nodeToRelocate,slotNameAttr){return 1===nodeToRelocate.nodeType?null===nodeToRelocate.getAttribute("slot")&&""===slotNameAttr||nodeToRelocate.getAttribute("slot")===slotNameAttr:nodeToRelocate["s-sn"]===slotNameAttr||""===slotNameAttr},callNodeRefs=function callNodeRefs(vNode){vNode.$attrs$&&vNode.$attrs$.ref&&vNode.$attrs$.ref(null),vNode.$children$&&vNode.$children$.map(callNodeRefs)},renderVdom=function renderVdom(hostRef,renderFnResults){var hostElm=hostRef.$hostElement$,cmpMeta=hostRef.$cmpMeta$,oldVNode=hostRef.$vnode$||newVNode(null,null),rootVnode=function isHost(node){return node&&node.$tag$===Host}(renderFnResults)?renderFnResults:h(null,null,renderFnResults);if(hostTagName=hostElm.tagName,cmpMeta.$attrsToReflect$&&(rootVnode.$attrs$=rootVnode.$attrs$||{},cmpMeta.$attrsToReflect$.map((function(_ref3){var _ref4=_slicedToArray(_ref3,2),propName=_ref4[0],attribute=_ref4[1];return rootVnode.$attrs$[attribute]=hostElm[propName]}))),rootVnode.$tag$=null,rootVnode.$flags$|=4,hostRef.$vnode$=rootVnode,rootVnode.$elm$=oldVNode.$elm$=hostElm.shadowRoot||hostElm,scopeId=hostElm["s-sc"],contentRef=hostElm["s-cr"],useNativeShadowDom=0!=(1&cmpMeta.$flags$),checkSlotFallbackVisibility=!1,patch(oldVNode,rootVnode),plt.$flags$|=1,checkSlotRelocate){var relocateData,nodeToRelocate,orgLocationNode,parentNodeRef,insertBeforeNode,refNode;relocateSlotContent(rootVnode.$elm$);for(var i=0;i<relocateNodes.length;i++)(nodeToRelocate=(relocateData=relocateNodes[i]).$nodeToRelocate$)["s-ol"]||((orgLocationNode=doc.createTextNode(""))["s-nr"]=nodeToRelocate,nodeToRelocate.parentNode.insertBefore(nodeToRelocate["s-ol"]=orgLocationNode,nodeToRelocate));for(i=0;i<relocateNodes.length;i++)if(nodeToRelocate=(relocateData=relocateNodes[i]).$nodeToRelocate$,relocateData.$slotRefNode$){for(parentNodeRef=relocateData.$slotRefNode$.parentNode,insertBeforeNode=relocateData.$slotRefNode$.nextSibling,orgLocationNode=nodeToRelocate["s-ol"];orgLocationNode=orgLocationNode.previousSibling;)if((refNode=orgLocationNode["s-nr"])&&refNode["s-sn"]===nodeToRelocate["s-sn"]&&parentNodeRef===refNode.parentNode&&(!(refNode=refNode.nextSibling)||!refNode["s-nr"])){insertBeforeNode=refNode;break}(!insertBeforeNode&&parentNodeRef!==nodeToRelocate.parentNode||nodeToRelocate.nextSibling!==insertBeforeNode)&&nodeToRelocate!==insertBeforeNode&&(!nodeToRelocate["s-hn"]&&nodeToRelocate["s-ol"]&&(nodeToRelocate["s-hn"]=nodeToRelocate["s-ol"].parentNode.nodeName),parentNodeRef.insertBefore(nodeToRelocate,insertBeforeNode))}else 1===nodeToRelocate.nodeType&&(nodeToRelocate.hidden=!0)}checkSlotFallbackVisibility&&updateFallbackSlotVisibility(rootVnode.$elm$),plt.$flags$&=-2,relocateNodes.length=0},getElement=function getElement(ref){return getHostRef(ref).$hostElement$},createEvent=function createEvent(ref,name,flags){var elm=getElement(ref);return{emit:function emit(detail){return emitEvent(elm,name,{bubbles:!!(4&flags),composed:!!(2&flags),cancelable:!!(1&flags),detail:detail})}}},emitEvent=function emitEvent(elm,name,opts){var ev=plt.ce(name,opts);return elm.dispatchEvent(ev),ev},attachToAncestor=function attachToAncestor(hostRef,ancestorComponent){ancestorComponent&&!hostRef.$onRenderResolve$&&ancestorComponent["s-p"]&&ancestorComponent["s-p"].push(new Promise((function(r){return hostRef.$onRenderResolve$=r})))},scheduleUpdate=function scheduleUpdate(hostRef,isInitialLoad){if(hostRef.$flags$|=16,!(4&hostRef.$flags$)){attachToAncestor(hostRef,hostRef.$ancestorComponent$);return writeTask((function dispatch(){return dispatchHooks(hostRef,isInitialLoad)}))}hostRef.$flags$|=512},dispatchHooks=function dispatchHooks(hostRef,isInitialLoad){var promise,endSchedule=(hostRef.$cmpMeta$.$tagName$,function(){}),instance=hostRef.$lazyInstance$;return isInitialLoad?(hostRef.$flags$|=256,hostRef.$queuedListeners$&&(hostRef.$queuedListeners$.map((function(_ref5){var _ref6=_slicedToArray(_ref5,2),methodName=_ref6[0],event=_ref6[1];return safeCall(instance,methodName,event)})),hostRef.$queuedListeners$=null),promise=safeCall(instance,"componentWillLoad")):promise=safeCall(instance,"componentWillUpdate"),promise=then(promise,(function(){return safeCall(instance,"componentWillRender")})),endSchedule(),then(promise,(function(){return updateComponent(hostRef,instance,isInitialLoad)}))},updateComponent=function(){var _ref7=_asyncToGenerator(regeneratorRuntime.mark((function _callee(hostRef,instance,isInitialLoad){var elm,endUpdate,rc,endRender,childrenPromises,postUpdate;return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:elm=hostRef.$hostElement$,hostRef.$cmpMeta$.$tagName$,endUpdate=function(){},rc=elm["s-rc"],isInitialLoad&&attachStyles(hostRef),hostRef.$cmpMeta$.$tagName$,endRender=function(){},callRender(hostRef,instance),rc&&(rc.map((function(cb){return cb()})),elm["s-rc"]=void 0),endRender(),endUpdate(),childrenPromises=elm["s-p"],postUpdate=function postUpdate(){return postUpdateComponent(hostRef)},0===childrenPromises.length?postUpdate():(Promise.all(childrenPromises).then(postUpdate),hostRef.$flags$|=4,childrenPromises.length=0);case 12:case"end":return _context.stop()}}),_callee)})));return function updateComponent(_x,_x2,_x3){return _ref7.apply(this,arguments)}}(),callRender=function callRender(hostRef,instance,elm){try{instance=instance.render(),hostRef.$flags$&=-17,hostRef.$flags$|=2,renderVdom(hostRef,instance)}catch(e){consoleError(e,hostRef.$hostElement$)}return null},postUpdateComponent=function postUpdateComponent(hostRef){hostRef.$cmpMeta$.$tagName$;var elm=hostRef.$hostElement$,endPostUpdate=function(){},instance=hostRef.$lazyInstance$,ancestorComponent=hostRef.$ancestorComponent$;safeCall(instance,"componentDidRender"),64&hostRef.$flags$?(safeCall(instance,"componentDidUpdate"),endPostUpdate()):(hostRef.$flags$|=64,addHydratedFlag(elm),safeCall(instance,"componentDidLoad"),endPostUpdate(),hostRef.$onReadyResolve$(elm),ancestorComponent||appDidLoad()),hostRef.$onInstanceResolve$(elm),hostRef.$onRenderResolve$&&(hostRef.$onRenderResolve$(),hostRef.$onRenderResolve$=void 0),512&hostRef.$flags$&&nextTick((function(){return scheduleUpdate(hostRef,!1)})),hostRef.$flags$&=-517},appDidLoad=function appDidLoad(who){addHydratedFlag(doc.documentElement),nextTick((function(){return emitEvent(win,"appload",{detail:{namespace:NAMESPACE}})}))},safeCall=function safeCall(instance,method,arg){if(instance&&instance[method])try{return instance[method](arg)}catch(e){consoleError(e)}},then=function then(promise,thenFn){return promise&&promise.then?promise.then(thenFn):thenFn()},addHydratedFlag=function addHydratedFlag(elm){return elm.classList.add("hydrated")},clientHydrate=function clientHydrate(parentVNode,childRenderNodes,slotNodes,shadowRootNodes,hostElm,node,hostId){var childNodeType,childIdSplt,childVNode,i;if(1===node.nodeType){for((childNodeType=node.getAttribute("c-id"))&&((childIdSplt=childNodeType.split("."))[0]!==hostId&&"0"!==childIdSplt[0]||(childVNode={$flags$:0,$hostId$:childIdSplt[0],$nodeId$:childIdSplt[1],$depth$:childIdSplt[2],$index$:childIdSplt[3],$tag$:node.tagName.toLowerCase(),$elm$:node,$attrs$:null,$children$:null,$key$:null,$name$:null,$text$:null},childRenderNodes.push(childVNode),node.removeAttribute("c-id"),parentVNode.$children$||(parentVNode.$children$=[]),parentVNode.$children$[childVNode.$index$]=childVNode,parentVNode=childVNode,shadowRootNodes&&"0"===childVNode.$depth$&&(shadowRootNodes[childVNode.$index$]=childVNode.$elm$))),i=node.childNodes.length-1;i>=0;i--)clientHydrate(parentVNode,childRenderNodes,slotNodes,shadowRootNodes,hostElm,node.childNodes[i],hostId);if(node.shadowRoot)for(i=node.shadowRoot.childNodes.length-1;i>=0;i--)clientHydrate(parentVNode,childRenderNodes,slotNodes,shadowRootNodes,hostElm,node.shadowRoot.childNodes[i],hostId)}else if(8===node.nodeType)(childIdSplt=node.nodeValue.split("."))[1]!==hostId&&"0"!==childIdSplt[1]||(childNodeType=childIdSplt[0],childVNode={$flags$:0,$hostId$:childIdSplt[1],$nodeId$:childIdSplt[2],$depth$:childIdSplt[3],$index$:childIdSplt[4],$elm$:node,$attrs$:null,$children$:null,$key$:null,$name$:null,$tag$:null,$text$:null},"t"===childNodeType?(childVNode.$elm$=node.nextSibling,childVNode.$elm$&&3===childVNode.$elm$.nodeType&&(childVNode.$text$=childVNode.$elm$.textContent,childRenderNodes.push(childVNode),node.remove(),parentVNode.$children$||(parentVNode.$children$=[]),parentVNode.$children$[childVNode.$index$]=childVNode,shadowRootNodes&&"0"===childVNode.$depth$&&(shadowRootNodes[childVNode.$index$]=childVNode.$elm$))):childVNode.$hostId$===hostId&&("s"===childNodeType?(childVNode.$tag$="slot",childIdSplt[5]?node["s-sn"]=childVNode.$name$=childIdSplt[5]:node["s-sn"]="",node["s-sr"]=!0,shadowRootNodes&&(childVNode.$elm$=doc.createElement(childVNode.$tag$),childVNode.$name$&&childVNode.$elm$.setAttribute("name",childVNode.$name$),node.parentNode.insertBefore(childVNode.$elm$,node),node.remove(),"0"===childVNode.$depth$&&(shadowRootNodes[childVNode.$index$]=childVNode.$elm$)),slotNodes.push(childVNode),parentVNode.$children$||(parentVNode.$children$=[]),parentVNode.$children$[childVNode.$index$]=childVNode):"r"===childNodeType&&(shadowRootNodes?node.remove():(hostElm["s-cr"]=node,node["s-cn"]=!0))));else if(parentVNode&&"style"===parentVNode.$tag$){var vnode=newVNode(null,node.textContent);vnode.$elm$=node,vnode.$index$="0",parentVNode.$children$=[vnode]}},initializeDocumentHydrate=function initializeDocumentHydrate(node,orgLocNodes){if(1===node.nodeType){for(var i=0;i<node.childNodes.length;i++)initializeDocumentHydrate(node.childNodes[i],orgLocNodes);if(node.shadowRoot)for(i=0;i<node.shadowRoot.childNodes.length;i++)initializeDocumentHydrate(node.shadowRoot.childNodes[i],orgLocNodes)}else if(8===node.nodeType){var childIdSplt=node.nodeValue.split(".");"o"===childIdSplt[0]&&(orgLocNodes.set(childIdSplt[1]+"."+childIdSplt[2],node),node.nodeValue="",node["s-en"]=childIdSplt[3])}},setValue=function setValue(ref,propName,newVal,cmpMeta){var hostRef=getHostRef(ref),elm=hostRef.$hostElement$,oldVal=hostRef.$instanceValues$.get(propName),flags=hostRef.$flags$,instance=hostRef.$lazyInstance$;newVal=function parsePropertyValue(propValue,propType){return null==propValue||isComplexType(propValue)?propValue:4&propType?"false"!==propValue&&(""===propValue||!!propValue):2&propType?parseFloat(propValue):1&propType?String(propValue):propValue}(newVal,cmpMeta.$members$[propName][0]);var areBothNaN=Number.isNaN(oldVal)&&Number.isNaN(newVal);if((!(8&flags)||void 0===oldVal)&&(newVal!==oldVal&&!areBothNaN)&&(hostRef.$instanceValues$.set(propName,newVal),instance)){if(cmpMeta.$watchers$&&128&flags){var watchMethods=cmpMeta.$watchers$[propName];watchMethods&&watchMethods.map((function(watchMethodName){try{instance[watchMethodName](newVal,oldVal,propName)}catch(e){consoleError(e,elm)}}))}2==(18&flags)&&scheduleUpdate(hostRef,!1)}},proxyComponent=function proxyComponent(Cstr,cmpMeta,flags){if(cmpMeta.$members$){Cstr.watchers&&(cmpMeta.$watchers$=Cstr.watchers);var members=Object.entries(cmpMeta.$members$),prototype=Cstr.prototype;if(members.map((function(_ref8){var _ref9=_slicedToArray(_ref8,2),memberName=_ref9[0],memberFlags=_slicedToArray(_ref9[1],1)[0];31&memberFlags||2&flags&&32&memberFlags?Object.defineProperty(prototype,memberName,{get:function get(){return function getValue(ref,propName){return getHostRef(ref).$instanceValues$.get(propName)}(this,memberName)},set:function set(newValue){setValue(this,memberName,newValue,cmpMeta)},configurable:!0,enumerable:!0}):1&flags&&64&memberFlags&&Object.defineProperty(prototype,memberName,{value:function value(){for(var _len2=arguments.length,args=new Array(_len2),_key2=0;_key2<_len2;_key2++)args[_key2]=arguments[_key2];var ref=getHostRef(this);return ref.$onInstancePromise$.then((function(){var _ref$$lazyInstance$;return(_ref$$lazyInstance$=ref.$lazyInstance$)[memberName].apply(_ref$$lazyInstance$,args)}))}})})),1&flags){var attrNameToPropName=new Map;prototype.attributeChangedCallback=function(attrName,_oldValue,newValue){var _this=this;plt.jmp((function(){var propName=attrNameToPropName.get(attrName);if(_this.hasOwnProperty(propName))newValue=_this[propName],delete _this[propName];else if(prototype.hasOwnProperty(propName)&&"number"==typeof _this[propName]&&_this[propName]==newValue)return;_this[propName]=(null!==newValue||"boolean"!=typeof _this[propName])&&newValue}))},Cstr.observedAttributes=members.filter((function(_ref10){var _ref11=_slicedToArray(_ref10,2);_ref11[0];return 15&_ref11[1][0]})).map((function(_ref12){var _ref13=_slicedToArray(_ref12,2),propName=_ref13[0],m=_ref13[1],attrName=m[1]||propName;return attrNameToPropName.set(attrName,propName),512&m[0]&&cmpMeta.$attrsToReflect$.push([propName,attrName]),attrName}))}}return Cstr},initializeComponent=function(){var _ref14=_asyncToGenerator(regeneratorRuntime.mark((function _callee2(elm,hostRef,cmpMeta,hmrVersionId,Cstr){var endLoad,endNewInstance,style,_scopeId,endRegisterStyles,ancestorComponent,schedule;return regeneratorRuntime.wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:if(0!=(32&hostRef.$flags$)){_context2.next=18;break}if(hostRef.$flags$|=32,!(Cstr=loadModule(cmpMeta)).then){_context2.next=9;break}return endLoad=function(){},_context2.next=7,Cstr;case 7:Cstr=_context2.sent,endLoad();case 9:Cstr.isProxied||(cmpMeta.$watchers$=Cstr.watchers,proxyComponent(Cstr,cmpMeta,2),Cstr.isProxied=!0),cmpMeta.$tagName$,endNewInstance=function(){},hostRef.$flags$|=8;try{new Cstr(hostRef)}catch(e){consoleError(e)}hostRef.$flags$&=-9,hostRef.$flags$|=128,endNewInstance(),fireConnectedCallback(hostRef.$lazyInstance$),Cstr.style&&(style=Cstr.style,_scopeId=getScopeId(cmpMeta),styles.has(_scopeId)||(cmpMeta.$tagName$,endRegisterStyles=function(){},registerStyle(_scopeId,style,!!(1&cmpMeta.$flags$)),endRegisterStyles()));case 18:ancestorComponent=hostRef.$ancestorComponent$,schedule=function schedule(){return scheduleUpdate(hostRef,!0)},ancestorComponent&&ancestorComponent["s-rc"]?ancestorComponent["s-rc"].push(schedule):schedule();case 21:case"end":return _context2.stop()}}),_callee2)})));return function initializeComponent(_x4,_x5,_x6,_x7,_x8){return _ref14.apply(this,arguments)}}(),fireConnectedCallback=function fireConnectedCallback(instance){safeCall(instance,"connectedCallback")},_connectedCallback=function connectedCallback(elm){if(0==(1&plt.$flags$)){var hostRef=getHostRef(elm),cmpMeta=hostRef.$cmpMeta$,endConnected=(cmpMeta.$tagName$,function(){});if(1&hostRef.$flags$)addHostEventListeners(elm,hostRef,cmpMeta.$listeners$),fireConnectedCallback(hostRef.$lazyInstance$);else{var hostId;if(hostRef.$flags$|=1,hostId=elm.getAttribute("s-id")){if(1&cmpMeta.$flags$){var _scopeId2=addStyle(elm.shadowRoot,cmpMeta);elm.classList.remove(_scopeId2+"-h",_scopeId2+"-s")}!function initializeClientHydrate(hostElm,tagName,hostId,hostRef){var endHydrate=function(){},shadowRoot=hostElm.shadowRoot,childRenderNodes=[],shadowRootNodes=shadowRoot?[]:null,vnode=hostRef.$vnode$=newVNode(tagName,null);plt.$orgLocNodes$||initializeDocumentHydrate(doc.body,plt.$orgLocNodes$=new Map),hostElm["s-id"]=hostId,hostElm.removeAttribute("s-id"),clientHydrate(vnode,childRenderNodes,[],shadowRootNodes,hostElm,hostElm,hostId),childRenderNodes.map((function(c){var orgLocationId=c.$hostId$+"."+c.$nodeId$,orgLocationNode=plt.$orgLocNodes$.get(orgLocationId),node=c.$elm$;orgLocationNode&&""===orgLocationNode["s-en"]&&orgLocationNode.parentNode.insertBefore(node,orgLocationNode.nextSibling),shadowRoot||(node["s-hn"]=tagName,orgLocationNode&&(node["s-ol"]=orgLocationNode,node["s-ol"]["s-nr"]=node)),plt.$orgLocNodes$.delete(orgLocationId)})),shadowRoot&&shadowRootNodes.map((function(shadowRootNode){shadowRootNode&&shadowRoot.appendChild(shadowRootNode)})),endHydrate()}(elm,cmpMeta.$tagName$,hostId,hostRef)}hostId||12&cmpMeta.$flags$&&setContentReference(elm);for(var ancestorComponent=elm;ancestorComponent=ancestorComponent.parentNode||ancestorComponent.host;)if(1===ancestorComponent.nodeType&&ancestorComponent.hasAttribute("s-id")&&ancestorComponent["s-p"]||ancestorComponent["s-p"]){attachToAncestor(hostRef,hostRef.$ancestorComponent$=ancestorComponent);break}cmpMeta.$members$&&Object.entries(cmpMeta.$members$).map((function(_ref15){var _ref16=_slicedToArray(_ref15,2),memberName=_ref16[0];if(31&_slicedToArray(_ref16[1],1)[0]&&elm.hasOwnProperty(memberName)){var value=elm[memberName];delete elm[memberName],elm[memberName]=value}})),initializeComponent(elm,hostRef,cmpMeta)}endConnected()}},setContentReference=function setContentReference(elm){var contentRefElm=elm["s-cr"]=doc.createComment("");contentRefElm["s-cn"]=!0,elm.insertBefore(contentRefElm,elm.firstChild)},_disconnectedCallback=function disconnectedCallback(elm){if(0==(1&plt.$flags$)){var hostRef=getHostRef(elm),instance=hostRef.$lazyInstance$;hostRef.$rmListeners$&&(hostRef.$rmListeners$.map((function(rmListener){return rmListener()})),hostRef.$rmListeners$=void 0),safeCall(instance,"disconnectedCallback")}},patchCloneNode=function patchCloneNode(HostElementPrototype){var orgCloneNode=HostElementPrototype.cloneNode;HostElementPrototype.cloneNode=function(deep){var srcNode=this,isShadowDom=srcNode.shadowRoot&&true,clonedNode=orgCloneNode.call(srcNode,!!isShadowDom&&deep);return!isShadowDom&&deep&&function(){for(var slotted,nonStencilNode,i=0,stencilPrivates=["s-id","s-cr","s-lr","s-rc","s-sc","s-p","s-cn","s-sr","s-sn","s-hn","s-ol","s-nr","s-si"];i<srcNode.childNodes.length;i++)slotted=srcNode.childNodes[i]["s-nr"],nonStencilNode=stencilPrivates.every((function(privateField){return!srcNode.childNodes[i][privateField]})),slotted&&clonedNode.appendChild(slotted.cloneNode(!0)),nonStencilNode&&clonedNode.appendChild(srcNode.childNodes[i].cloneNode(!0))}(),clonedNode}},bootstrapLazy=function bootstrapLazy(lazyBundles){var appLoadFallback,options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},endBootstrap=function(){},cmpTags=[],exclude=options.exclude||[],customElements=win.customElements,head=doc.head,metaCharset=head.querySelector("meta[charset]"),visibilityStyle=doc.createElement("style"),deferredConnectedCallbacks=[],styles=doc.querySelectorAll("[sty-id]"),isBootstrapping=!0,i=0;for(Object.assign(plt,options),plt.$resourcesUrl$=new URL(options.resourcesUrl||"./",doc.baseURI).href,plt.$flags$|=2;i<styles.length;i++)registerStyle(styles[i].getAttribute("sty-id"),convertScopedToShadow(styles[i].innerHTML),!0);lazyBundles.map((function(lazyBundle){lazyBundle[1].map((function(compactMeta){var cmpMeta={$flags$:compactMeta[0],$tagName$:compactMeta[1],$members$:compactMeta[2],$listeners$:compactMeta[3]};cmpMeta.$members$=compactMeta[2],cmpMeta.$listeners$=compactMeta[3],cmpMeta.$attrsToReflect$=[],cmpMeta.$watchers$={};var tagName=cmpMeta.$tagName$,HostElement=function(_HTMLElement){_inherits(HostElement,_HTMLElement);var _super=_createSuper(HostElement);function HostElement(self){var _this2;return _classCallCheck(this,HostElement),self=_assertThisInitialized(_this2=_super.call(this,self)),registerHost(self,cmpMeta),1&cmpMeta.$flags$&&self.attachShadow({mode:"open"}),_this2}return _createClass(HostElement,[{key:"connectedCallback",value:function connectedCallback(){var _this3=this;appLoadFallback&&(clearTimeout(appLoadFallback),appLoadFallback=null),isBootstrapping?deferredConnectedCallbacks.push(this):plt.jmp((function(){return _connectedCallback(_this3)}))}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this4=this;plt.jmp((function(){return _disconnectedCallback(_this4)}))}},{key:"componentOnReady",value:function componentOnReady(){return getHostRef(this).$onReadyPromise$}}]),HostElement}(_wrapNativeSuper(HTMLElement));patchCloneNode(HostElement.prototype),cmpMeta.$lazyBundleId$=lazyBundle[0],exclude.includes(tagName)||customElements.get(tagName)||(cmpTags.push(tagName),customElements.define(tagName,proxyComponent(HostElement,cmpMeta,1)))}))})),visibilityStyle.innerHTML=cmpTags+HYDRATED_CSS,visibilityStyle.setAttribute("data-styles",""),head.insertBefore(visibilityStyle,metaCharset?metaCharset.nextSibling:head.firstChild),isBootstrapping=!1,deferredConnectedCallbacks.length?deferredConnectedCallbacks.map((function(host){return host.connectedCallback()})):plt.jmp((function(){return appLoadFallback=setTimeout(appDidLoad,30)})),endBootstrap()},Fragment=function Fragment(_,children){return children},hostRefs=new WeakMap,getHostRef=function getHostRef(ref){return hostRefs.get(ref)},registerInstance=function registerInstance(lazyInstance,hostRef){return hostRefs.set(hostRef.$lazyInstance$=lazyInstance,hostRef)},registerHost=function registerHost(elm,cmpMeta){var hostRef={$flags$:0,$hostElement$:elm,$cmpMeta$:cmpMeta,$instanceValues$:new Map};return hostRef.$onInstancePromise$=new Promise((function(r){return hostRef.$onInstanceResolve$=r})),hostRef.$onReadyPromise$=new Promise((function(r){return hostRef.$onReadyResolve$=r})),elm["s-p"]=[],elm["s-rc"]=[],addHostEventListeners(elm,hostRef,cmpMeta.$listeners$),hostRefs.set(elm,hostRef)},isMemberInElement=function isMemberInElement(elm,memberName){return memberName in elm},consoleError=function consoleError(e,el){return(0,console.error)(e,el)},cmpModules=new Map,loadModule=function loadModule(cmpMeta,hostRef,hmrVersionId){var exportName=cmpMeta.$tagName$.replace(/-/g,"_"),bundleId=cmpMeta.$lazyBundleId$,module=cmpModules.get(bundleId);if(module)return module[exportName];if(!hmrVersionId||!BUILD.hotModuleReplacement){var processMod=function processMod(importedModule){return cmpModules.set(bundleId,importedModule),importedModule[exportName]};switch(bundleId){case"app-logo":return __webpack_require__.e(45).then(__webpack_require__.bind(null,"../components/dist/esm/app-logo.entry.js")).then(processMod,consoleError);case"scale-accordion":return __webpack_require__.e(46).then(__webpack_require__.bind(null,"../components/dist/esm/scale-accordion.entry.js")).then(processMod,consoleError);case"scale-alert":return __webpack_require__.e(29).then(__webpack_require__.bind(null,"../components/dist/esm/scale-alert.entry.js")).then(processMod,consoleError);case"scale-app-footer":return __webpack_require__.e(28).then(__webpack_require__.bind(null,"../components/dist/esm/scale-app-footer.entry.js")).then(processMod,consoleError);case"scale-app-shell":return __webpack_require__.e(62).then(__webpack_require__.bind(null,"../components/dist/esm/scale-app-shell.entry.js")).then(processMod,consoleError);case"scale-breadcrumb":return __webpack_require__.e(47).then(__webpack_require__.bind(null,"../components/dist/esm/scale-breadcrumb.entry.js")).then(processMod,consoleError);case"scale-callout":return __webpack_require__.e(59).then(__webpack_require__.bind(null,"../components/dist/esm/scale-callout.entry.js")).then(processMod,consoleError);case"scale-carousel":return __webpack_require__.e(31).then(__webpack_require__.bind(null,"../components/dist/esm/scale-carousel.entry.js")).then(processMod,consoleError);case"scale-chart-stack-card":return __webpack_require__.e(14).then(__webpack_require__.bind(null,"../components/dist/esm/scale-chart-stack-card.entry.js")).then(processMod,consoleError);case"scale-checkbox-group":return __webpack_require__.e(60).then(__webpack_require__.bind(null,"../components/dist/esm/scale-checkbox-group.entry.js")).then(processMod,consoleError);case"scale-chip":return __webpack_require__.e(32).then(__webpack_require__.bind(null,"../components/dist/esm/scale-chip.entry.js")).then(processMod,consoleError);case"scale-collapsible":return __webpack_require__.e(33).then(__webpack_require__.bind(null,"../components/dist/esm/scale-collapsible.entry.js")).then(processMod,consoleError);case"scale-data-grid":return __webpack_require__.e(4).then(__webpack_require__.bind(null,"../components/dist/esm/scale-data-grid.entry.js")).then(processMod,consoleError);case"scale-date-picker":return __webpack_require__.e(8).then(__webpack_require__.bind(null,"../components/dist/esm/scale-date-picker.entry.js")).then(processMod,consoleError);case"scale-divider":return __webpack_require__.e(49).then(__webpack_require__.bind(null,"../components/dist/esm/scale-divider.entry.js")).then(processMod,consoleError);case"scale-dropdown":return __webpack_require__.e(9).then(__webpack_require__.bind(null,"../components/dist/esm/scale-dropdown.entry.js")).then(processMod,consoleError);case"scale-grid":return __webpack_require__.e(26).then(__webpack_require__.bind(null,"../components/dist/esm/scale-grid.entry.js")).then(processMod,consoleError);case"scale-grid-item":return __webpack_require__.e(25).then(__webpack_require__.bind(null,"../components/dist/esm/scale-grid-item.entry.js")).then(processMod,consoleError);case"scale-icon-action-add":return __webpack_require__.e(65).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-add.entry.js")).then(processMod,consoleError);case"scale-icon-action-add-card":return __webpack_require__.e(64).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-add-card.entry.js")).then(processMod,consoleError);case"scale-icon-action-arrange":return __webpack_require__.e(66).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-arrange.entry.js")).then(processMod,consoleError);case"scale-icon-action-arrow-down":return __webpack_require__.e(67).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-arrow-down.entry.js")).then(processMod,consoleError);case"scale-icon-action-arrow-left":return __webpack_require__.e(68).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-arrow-left.entry.js")).then(processMod,consoleError);case"scale-icon-action-arrow-right":return __webpack_require__.e(69).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-arrow-right.entry.js")).then(processMod,consoleError);case"scale-icon-action-arrow-up":return __webpack_require__.e(70).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-arrow-up.entry.js")).then(processMod,consoleError);case"scale-icon-action-auto-login":return __webpack_require__.e(71).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-auto-login.entry.js")).then(processMod,consoleError);case"scale-icon-action-backspace":return __webpack_require__.e(72).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-backspace.entry.js")).then(processMod,consoleError);case"scale-icon-action-backward":return __webpack_require__.e(73).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-backward.entry.js")).then(processMod,consoleError);case"scale-icon-action-changelog":return __webpack_require__.e(74).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-changelog.entry.js")).then(processMod,consoleError);case"scale-icon-action-circle-add":return __webpack_require__.e(76).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-circle-add.entry.js")).then(processMod,consoleError);case"scale-icon-action-compare":return __webpack_require__.e(79).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-compare.entry.js")).then(processMod,consoleError);case"scale-icon-action-copy-paste":return __webpack_require__.e(80).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-copy-paste.entry.js")).then(processMod,consoleError);case"scale-icon-action-cut-paste":return __webpack_require__.e(81).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-cut-paste.entry.js")).then(processMod,consoleError);case"scale-icon-action-disabled-microphone":return __webpack_require__.e(82).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-disabled-microphone.entry.js")).then(processMod,consoleError);case"scale-icon-action-download":return __webpack_require__.e(84).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-download.entry.js")).then(processMod,consoleError);case"scale-icon-action-download-from-cloud":return __webpack_require__.e(83).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-download-from-cloud.entry.js")).then(processMod,consoleError);case"scale-icon-action-drag-and-drop":return __webpack_require__.e(85).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-drag-and-drop.entry.js")).then(processMod,consoleError);case"scale-icon-action-edit":return __webpack_require__.e(86).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-edit.entry.js")).then(processMod,consoleError);case"scale-icon-action-export":return __webpack_require__.e(87).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-export.entry.js")).then(processMod,consoleError);case"scale-icon-action-fast-forward":return __webpack_require__.e(89).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-fast-forward.entry.js")).then(processMod,consoleError);case"scale-icon-action-fast-forward-nb":return __webpack_require__.e(88).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-fast-forward-nb.entry.js")).then(processMod,consoleError);case"scale-icon-action-filter":return __webpack_require__.e(92).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-filter.entry.js")).then(processMod,consoleError);case"scale-icon-action-filter-2":return __webpack_require__.e(91).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-filter-2.entry.js")).then(processMod,consoleError);case"scale-icon-action-forward":return __webpack_require__.e(93).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-forward.entry.js")).then(processMod,consoleError);case"scale-icon-action-full-screen":return __webpack_require__.e(94).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-full-screen.entry.js")).then(processMod,consoleError);case"scale-icon-action-import":return __webpack_require__.e(95).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-import.entry.js")).then(processMod,consoleError);case"scale-icon-action-install":return __webpack_require__.e(96).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-install.entry.js")).then(processMod,consoleError);case"scale-icon-action-launch":return __webpack_require__.e(97).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-launch.entry.js")).then(processMod,consoleError);case"scale-icon-action-light-dark-mode":return __webpack_require__.e(98).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-light-dark-mode.entry.js")).then(processMod,consoleError);case"scale-icon-action-link":return __webpack_require__.e(99).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-link.entry.js")).then(processMod,consoleError);case"scale-icon-action-logout":return __webpack_require__.e(100).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-logout.entry.js")).then(processMod,consoleError);case"scale-icon-action-loop":return __webpack_require__.e(101).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-loop.entry.js")).then(processMod,consoleError);case"scale-icon-action-microphone":return __webpack_require__.e(102).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-microphone.entry.js")).then(processMod,consoleError);case"scale-icon-action-minimize-screen":return __webpack_require__.e(103).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-minimize-screen.entry.js")).then(processMod,consoleError);case"scale-icon-action-minus-circle":return __webpack_require__.e(104).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-minus-circle.entry.js")).then(processMod,consoleError);case"scale-icon-action-more":return __webpack_require__.e(105).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-more.entry.js")).then(processMod,consoleError);case"scale-icon-action-move":return __webpack_require__.e(106).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-move.entry.js")).then(processMod,consoleError);case"scale-icon-action-mute":return __webpack_require__.e(107).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-mute.entry.js")).then(processMod,consoleError);case"scale-icon-action-notification":return __webpack_require__.e(108).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-notification.entry.js")).then(processMod,consoleError);case"scale-icon-action-pause":return __webpack_require__.e(110).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-pause.entry.js")).then(processMod,consoleError);case"scale-icon-action-pause-nb":return __webpack_require__.e(109).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-pause-nb.entry.js")).then(processMod,consoleError);case"scale-icon-action-pin":return __webpack_require__.e(111).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-pin.entry.js")).then(processMod,consoleError);case"scale-icon-action-play":return __webpack_require__.e(113).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-play.entry.js")).then(processMod,consoleError);case"scale-icon-action-play-nb":return __webpack_require__.e(112).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-play-nb.entry.js")).then(processMod,consoleError);case"scale-icon-action-pop-up-window":return __webpack_require__.e(114).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-pop-up-window.entry.js")).then(processMod,consoleError);case"scale-icon-action-power":return __webpack_require__.e(115).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-power.entry.js")).then(processMod,consoleError);case"scale-icon-action-previous-nb":return __webpack_require__.e(116).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-previous-nb.entry.js")).then(processMod,consoleError);case"scale-icon-action-print":return __webpack_require__.e(117).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-print.entry.js")).then(processMod,consoleError);case"scale-icon-action-publish":return __webpack_require__.e(118).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-publish.entry.js")).then(processMod,consoleError);case"scale-icon-action-random":return __webpack_require__.e(119).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-random.entry.js")).then(processMod,consoleError);case"scale-icon-action-record-nb":return __webpack_require__.e(120).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-record-nb.entry.js")).then(processMod,consoleError);case"scale-icon-action-refresh":return __webpack_require__.e(121).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-refresh.entry.js")).then(processMod,consoleError);case"scale-icon-action-remove":return __webpack_require__.e(122).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-remove.entry.js")).then(processMod,consoleError);case"scale-icon-action-reply":return __webpack_require__.e(125).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-reply.entry.js")).then(processMod,consoleError);case"scale-icon-action-reply-all":return __webpack_require__.e(123).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-reply-all.entry.js")).then(processMod,consoleError);case"scale-icon-action-reply-forward":return __webpack_require__.e(124).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-reply-forward.entry.js")).then(processMod,consoleError);case"scale-icon-action-restart":return __webpack_require__.e(126).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-restart.entry.js")).then(processMod,consoleError);case"scale-icon-action-search":return __webpack_require__.e(127).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-search.entry.js")).then(processMod,consoleError);case"scale-icon-action-send":return __webpack_require__.e(128).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-send.entry.js")).then(processMod,consoleError);case"scale-icon-action-share":return __webpack_require__.e(129).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-share.entry.js")).then(processMod,consoleError);case"scale-icon-action-shopping-cart":return __webpack_require__.e(130).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-shopping-cart.entry.js")).then(processMod,consoleError);case"scale-icon-action-show-password":return __webpack_require__.e(131).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-show-password.entry.js")).then(processMod,consoleError);case"scale-icon-action-sound-on":return __webpack_require__.e(132).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-sound-on.entry.js")).then(processMod,consoleError);case"scale-icon-action-star":return __webpack_require__.e(133).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-star.entry.js")).then(processMod,consoleError);case"scale-icon-action-stream-on":return __webpack_require__.e(134).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-stream-on.entry.js")).then(processMod,consoleError);case"scale-icon-action-thumbs-down":return __webpack_require__.e(136).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-thumbs-down.entry.js")).then(processMod,consoleError);case"scale-icon-action-thumbs-up":return __webpack_require__.e(137).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-thumbs-up.entry.js")).then(processMod,consoleError);case"scale-icon-action-tiles-add":return __webpack_require__.e(138).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-tiles-add.entry.js")).then(processMod,consoleError);case"scale-icon-action-upload":return __webpack_require__.e(140).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-upload.entry.js")).then(processMod,consoleError);case"scale-icon-action-upload-to-cloud":return __webpack_require__.e(139).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-upload-to-cloud.entry.js")).then(processMod,consoleError);case"scale-icon-action-volume-down":return __webpack_require__.e(141).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-volume-down.entry.js")).then(processMod,consoleError);case"scale-icon-action-volume-up":return __webpack_require__.e(142).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-volume-up.entry.js")).then(processMod,consoleError);case"scale-icon-action-zoom-in":return __webpack_require__.e(143).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-zoom-in.entry.js")).then(processMod,consoleError);case"scale-icon-action-zoom-out":return __webpack_require__.e(144).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-zoom-out.entry.js")).then(processMod,consoleError);case"scale-icon-alert-antivirus-protection":return __webpack_require__.e(145).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-antivirus-protection.entry.js")).then(processMod,consoleError);case"scale-icon-alert-compliance":return __webpack_require__.e(146).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-compliance.entry.js")).then(processMod,consoleError);case"scale-icon-alert-cyber-security":return __webpack_require__.e(147).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-cyber-security.entry.js")).then(processMod,consoleError);case"scale-icon-alert-help":return __webpack_require__.e(148).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-help.entry.js")).then(processMod,consoleError);case"scale-icon-alert-high-priority-email":return __webpack_require__.e(149).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-high-priority-email.entry.js")).then(processMod,consoleError);case"scale-icon-alert-imprint-dataprivacy":return __webpack_require__.e(150).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-imprint-dataprivacy.entry.js")).then(processMod,consoleError);case"scale-icon-alert-legal":return __webpack_require__.e(151).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-legal.entry.js")).then(processMod,consoleError);case"scale-icon-alert-network-disrupted":return __webpack_require__.e(152).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-network-disrupted.entry.js")).then(processMod,consoleError);case"scale-icon-alert-password-breaking":return __webpack_require__.e(153).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-password-breaking.entry.js")).then(processMod,consoleError);case"scale-icon-alert-security":return __webpack_require__.e(154).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-security.entry.js")).then(processMod,consoleError);case"scale-icon-alert-traffic-disruption":return __webpack_require__.e(155).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-traffic-disruption.entry.js")).then(processMod,consoleError);case"scale-icon-alert-unknown":return __webpack_require__.e(156).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-unknown.entry.js")).then(processMod,consoleError);case"scale-icon-communication-available":return __webpack_require__.e(157).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-available.entry.js")).then(processMod,consoleError);case"scale-icon-communication-blog":return __webpack_require__.e(158).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-blog.entry.js")).then(processMod,consoleError);case"scale-icon-communication-call-incoming":return __webpack_require__.e(159).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-call-incoming.entry.js")).then(processMod,consoleError);case"scale-icon-communication-call-outgoing":return __webpack_require__.e(160).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-call-outgoing.entry.js")).then(processMod,consoleError);case"scale-icon-communication-chat":return __webpack_require__.e(162).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-chat.entry.js")).then(processMod,consoleError);case"scale-icon-communication-chat-badge":return __webpack_require__.e(161).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-chat-badge.entry.js")).then(processMod,consoleError);case"scale-icon-communication-email":return __webpack_require__.e(163).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-email.entry.js")).then(processMod,consoleError);case"scale-icon-communication-end-call":return __webpack_require__.e(164).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-end-call.entry.js")).then(processMod,consoleError);case"scale-icon-communication-feedback":return __webpack_require__.e(165).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-feedback.entry.js")).then(processMod,consoleError);case"scale-icon-communication-flight-mode":return __webpack_require__.e(166).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-flight-mode.entry.js")).then(processMod,consoleError);case"scale-icon-communication-happy-person":return __webpack_require__.e(167).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-happy-person.entry.js")).then(processMod,consoleError);case"scale-icon-communication-inbox":return __webpack_require__.e(168).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-inbox.entry.js")).then(processMod,consoleError);case"scale-icon-communication-landing-mobile-contact-client":return __webpack_require__.e(169).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-landing-mobile-contact-client.entry.js")).then(processMod,consoleError);case"scale-icon-communication-loyalty-earned":return __webpack_require__.e(170).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-loyalty-earned.entry.js")).then(processMod,consoleError);case"scale-icon-communication-loyalty-lost":return __webpack_require__.e(171).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-loyalty-lost.entry.js")).then(processMod,consoleError);case"scale-icon-communication-mail-opened":return __webpack_require__.e(172).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-mail-opened.entry.js")).then(processMod,consoleError);case"scale-icon-communication-message":return __webpack_require__.e(175).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-message.entry.js")).then(processMod,consoleError);case"scale-icon-communication-message-incoming":return __webpack_require__.e(173).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-message-incoming.entry.js")).then(processMod,consoleError);case"scale-icon-communication-message-outgoing":return __webpack_require__.e(174).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-message-outgoing.entry.js")).then(processMod,consoleError);case"scale-icon-communication-mms-incoming":return __webpack_require__.e(176).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-mms-incoming.entry.js")).then(processMod,consoleError);case"scale-icon-communication-mms-outgoing":return __webpack_require__.e(177).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-mms-outgoing.entry.js")).then(processMod,consoleError);case"scale-icon-communication-mobile-phone-number":return __webpack_require__.e(178).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-mobile-phone-number.entry.js")).then(processMod,consoleError);case"scale-icon-communication-network-signal":return __webpack_require__.e(179).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-network-signal.entry.js")).then(processMod,consoleError);case"scale-icon-communication-new-email":return __webpack_require__.e(180).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-new-email.entry.js")).then(processMod,consoleError);case"scale-icon-communication-outbox":return __webpack_require__.e(181).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-outbox.entry.js")).then(processMod,consoleError);case"scale-icon-communication-phone-number":return __webpack_require__.e(182).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-phone-number.entry.js")).then(processMod,consoleError);case"scale-icon-communication-recipient":return __webpack_require__.e(183).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-recipient.entry.js")).then(processMod,consoleError);case"scale-icon-communication-save-emails-to-drafts":return __webpack_require__.e(184).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-save-emails-to-drafts.entry.js")).then(processMod,consoleError);case"scale-icon-communication-sms":return __webpack_require__.e(185).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-sms.entry.js")).then(processMod,consoleError);case"scale-icon-communication-spam":return __webpack_require__.e(186).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-spam.entry.js")).then(processMod,consoleError);case"scale-icon-communication-voice-message":return __webpack_require__.e(187).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-voice-message.entry.js")).then(processMod,consoleError);case"scale-icon-content-2fa-google-auth":return __webpack_require__.e(188).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-2fa-google-auth.entry.js")).then(processMod,consoleError);case"scale-icon-content-achievement":return __webpack_require__.e(189).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-achievement.entry.js")).then(processMod,consoleError);case"scale-icon-content-android":return __webpack_require__.e(190).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-android.entry.js")).then(processMod,consoleError);case"scale-icon-content-apple":return __webpack_require__.e(191).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-apple.entry.js")).then(processMod,consoleError);case"scale-icon-content-applications":return __webpack_require__.e(192).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-applications.entry.js")).then(processMod,consoleError);case"scale-icon-content-available-keychain":return __webpack_require__.e(193).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-available-keychain.entry.js")).then(processMod,consoleError);case"scale-icon-content-bank":return __webpack_require__.e(194).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-bank.entry.js")).then(processMod,consoleError);case"scale-icon-content-biometric":return __webpack_require__.e(195).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-biometric.entry.js")).then(processMod,consoleError);case"scale-icon-content-birthday":return __webpack_require__.e(196).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-birthday.entry.js")).then(processMod,consoleError);case"scale-icon-content-bookmark":return __webpack_require__.e(197).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-bookmark.entry.js")).then(processMod,consoleError);case"scale-icon-content-clipboard":return __webpack_require__.e(198).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-clipboard.entry.js")).then(processMod,consoleError);case"scale-icon-content-clock":return __webpack_require__.e(199).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-clock.entry.js")).then(processMod,consoleError);case"scale-icon-content-cloud-security":return __webpack_require__.e(200).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-cloud-security.entry.js")).then(processMod,consoleError);case"scale-icon-content-code-scanner":return __webpack_require__.e(201).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-code-scanner.entry.js")).then(processMod,consoleError);case"scale-icon-content-color-selection":return __webpack_require__.e(202).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-color-selection.entry.js")).then(processMod,consoleError);case"scale-icon-content-country":return __webpack_require__.e(203).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-country.entry.js")).then(processMod,consoleError);case"scale-icon-content-credit-card":return __webpack_require__.e(204).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-credit-card.entry.js")).then(processMod,consoleError);case"scale-icon-content-data-visualisation":return __webpack_require__.e(205).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-data-visualisation.entry.js")).then(processMod,consoleError);case"scale-icon-content-delivery":return __webpack_require__.e(206).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-delivery.entry.js")).then(processMod,consoleError);case"scale-icon-content-digital-banking":return __webpack_require__.e(207).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-digital-banking.entry.js")).then(processMod,consoleError);case"scale-icon-content-digital-media":return __webpack_require__.e(208).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-digital-media.entry.js")).then(processMod,consoleError);case"scale-icon-content-discount":return __webpack_require__.e(209).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-discount.entry.js")).then(processMod,consoleError);case"scale-icon-content-e-sim":return __webpack_require__.e(210).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-e-sim.entry.js")).then(processMod,consoleError);case"scale-icon-content-eu":return __webpack_require__.e(211).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-eu.entry.js")).then(processMod,consoleError);case"scale-icon-content-face-mask":return __webpack_require__.e(212).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-face-mask.entry.js")).then(processMod,consoleError);case"scale-icon-content-features":return __webpack_require__.e(213).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-features.entry.js")).then(processMod,consoleError);case"scale-icon-content-flexible-tariffs":return __webpack_require__.e(214).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-flexible-tariffs.entry.js")).then(processMod,consoleError);case"scale-icon-content-folder":return __webpack_require__.e(215).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-folder.entry.js")).then(processMod,consoleError);case"scale-icon-content-food":return __webpack_require__.e(216).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-food.entry.js")).then(processMod,consoleError);case"scale-icon-content-gender-diverse":return __webpack_require__.e(217).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-gender-diverse.entry.js")).then(processMod,consoleError);case"scale-icon-content-gender-female":return __webpack_require__.e(218).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-gender-female.entry.js")).then(processMod,consoleError);case"scale-icon-content-gender-male":return __webpack_require__.e(219).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-gender-male.entry.js")).then(processMod,consoleError);case"scale-icon-content-half-rating":return __webpack_require__.e(220).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-half-rating.entry.js")).then(processMod,consoleError);case"scale-icon-content-heart":return __webpack_require__.e(221).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-heart.entry.js")).then(processMod,consoleError);case"scale-icon-content-height":return __webpack_require__.e(222).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-height.entry.js")).then(processMod,consoleError);case"scale-icon-content-history":return __webpack_require__.e(223).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-history.entry.js")).then(processMod,consoleError);case"scale-icon-content-hour-glass":return __webpack_require__.e(224).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-hour-glass.entry.js")).then(processMod,consoleError);case"scale-icon-content-iban":return __webpack_require__.e(225).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-iban.entry.js")).then(processMod,consoleError);case"scale-icon-content-id":return __webpack_require__.e(226).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-id.entry.js")).then(processMod,consoleError);case"scale-icon-content-in-stock":return __webpack_require__.e(227).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-in-stock.entry.js")).then(processMod,consoleError);case"scale-icon-content-international":return __webpack_require__.e(229).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-international.entry.js")).then(processMod,consoleError);case"scale-icon-content-international-sms":return __webpack_require__.e(228).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-international-sms.entry.js")).then(processMod,consoleError);case"scale-icon-content-interview":return __webpack_require__.e(230).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-interview.entry.js")).then(processMod,consoleError);case"scale-icon-content-key":return __webpack_require__.e(231).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-key.entry.js")).then(processMod,consoleError);case"scale-icon-content-language":return __webpack_require__.e(232).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-language.entry.js")).then(processMod,consoleError);case"scale-icon-content-lock":return __webpack_require__.e(233).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-lock.entry.js")).then(processMod,consoleError);case"scale-icon-content-loyalty":return __webpack_require__.e(234).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-loyalty.entry.js")).then(processMod,consoleError);case"scale-icon-content-media-folder":return __webpack_require__.e(235).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-media-folder.entry.js")).then(processMod,consoleError);case"scale-icon-content-money-at":return __webpack_require__.e(236).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-money-at.entry.js")).then(processMod,consoleError);case"scale-icon-content-music":return __webpack_require__.e(237).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-music.entry.js")).then(processMod,consoleError);case"scale-icon-content-news":return __webpack_require__.e(238).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-news.entry.js")).then(processMod,consoleError);case"scale-icon-content-out-of-stock":return __webpack_require__.e(239).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-out-of-stock.entry.js")).then(processMod,consoleError);case"scale-icon-content-person-walking":return __webpack_require__.e(240).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-person-walking.entry.js")).then(processMod,consoleError);case"scale-icon-content-prepaid-activate":return __webpack_require__.e(241).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-prepaid-activate.entry.js")).then(processMod,consoleError);case"scale-icon-content-price-tag":return __webpack_require__.e(242).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-price-tag.entry.js")).then(processMod,consoleError);case"scale-icon-content-ratings":return __webpack_require__.e(243).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-ratings.entry.js")).then(processMod,consoleError);case"scale-icon-content-route":return __webpack_require__.e(244).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-route.entry.js")).then(processMod,consoleError);case"scale-icon-content-rss":return __webpack_require__.e(245).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-rss.entry.js")).then(processMod,consoleError);case"scale-icon-content-shop":return __webpack_require__.e(246).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-shop.entry.js")).then(processMod,consoleError);case"scale-icon-content-signal":return __webpack_require__.e(247).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-signal.entry.js")).then(processMod,consoleError);case"scale-icon-content-sim-card":return __webpack_require__.e(248).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-sim-card.entry.js")).then(processMod,consoleError);case"scale-icon-content-smile":return __webpack_require__.e(249).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-smile.entry.js")).then(processMod,consoleError);case"scale-icon-content-sort-indicator-mini-down":return __webpack_require__.e(250).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-sort-indicator-mini-down.entry.js")).then(processMod,consoleError);case"scale-icon-content-sort-indicator-up-mini":return __webpack_require__.e(251).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-sort-indicator-up-mini.entry.js")).then(processMod,consoleError);case"scale-icon-content-status-inactive":return __webpack_require__.e(252).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-status-inactive.entry.js")).then(processMod,consoleError);case"scale-icon-content-status-recurring":return __webpack_require__.e(253).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-status-recurring.entry.js")).then(processMod,consoleError);case"scale-icon-content-stopwatch":return __webpack_require__.e(254).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-stopwatch.entry.js")).then(processMod,consoleError);case"scale-icon-content-support-chat":return __webpack_require__.e(255).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-support-chat.entry.js")).then(processMod,consoleError);case"scale-icon-content-sustainable":return __webpack_require__.e(256).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-sustainable.entry.js")).then(processMod,consoleError);case"scale-icon-content-tariffs":return __webpack_require__.e(257).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-tariffs.entry.js")).then(processMod,consoleError);case"scale-icon-content-threats":return __webpack_require__.e(258).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-threats.entry.js")).then(processMod,consoleError);case"scale-icon-content-todo-list":return __webpack_require__.e(259).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-todo-list.entry.js")).then(processMod,consoleError);case"scale-icon-content-transport":return __webpack_require__.e(260).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-transport.entry.js")).then(processMod,consoleError);case"scale-icon-content-unlock":return __webpack_require__.e(261).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-unlock.entry.js")).then(processMod,consoleError);case"scale-icon-content-voucher":return __webpack_require__.e(262).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-voucher.entry.js")).then(processMod,consoleError);case"scale-icon-content-waiting":return __webpack_require__.e(263).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-waiting.entry.js")).then(processMod,consoleError);case"scale-icon-content-wallet":return __webpack_require__.e(264).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-wallet.entry.js")).then(processMod,consoleError);case"scale-icon-device-add-device":return __webpack_require__.e(265).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-add-device.entry.js")).then(processMod,consoleError);case"scale-icon-device-camera":return __webpack_require__.e(266).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-camera.entry.js")).then(processMod,consoleError);case"scale-icon-device-change-camera":return __webpack_require__.e(267).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-change-camera.entry.js")).then(processMod,consoleError);case"scale-icon-device-computer":return __webpack_require__.e(268).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-computer.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-controller":return __webpack_require__.e(269).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-controller.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-ethernet":return __webpack_require__.e(270).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-ethernet.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-mesh":return __webpack_require__.e(271).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-mesh.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-phone":return __webpack_require__.e(272).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-phone.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-router":return __webpack_require__.e(273).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-router.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-tv":return __webpack_require__.e(274).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-tv.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-watch":return __webpack_require__.e(275).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-watch.entry.js")).then(processMod,consoleError);case"scale-icon-device-dongle":return __webpack_require__.e(276).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-dongle.entry.js")).then(processMod,consoleError);case"scale-icon-device-fax":return __webpack_require__.e(277).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-fax.entry.js")).then(processMod,consoleError);case"scale-icon-device-fixed-line-services":return __webpack_require__.e(278).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-fixed-line-services.entry.js")).then(processMod,consoleError);case"scale-icon-device-game-controller":return __webpack_require__.e(279).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-game-controller.entry.js")).then(processMod,consoleError);case"scale-icon-device-media-receiver":return __webpack_require__.e(280).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-media-receiver.entry.js")).then(processMod,consoleError);case"scale-icon-device-mobile-data":return __webpack_require__.e(281).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-mobile-data.entry.js")).then(processMod,consoleError);case"scale-icon-device-mobile-devices-combination":return __webpack_require__.e(282).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-mobile-devices-combination.entry.js")).then(processMod,consoleError);case"scale-icon-device-mobile-equipment":return __webpack_require__.e(283).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-mobile-equipment.entry.js")).then(processMod,consoleError);case"scale-icon-device-mobile-phone-insurance":return __webpack_require__.e(284).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-mobile-phone-insurance.entry.js")).then(processMod,consoleError);case"scale-icon-device-mobile-services":return __webpack_require__.e(285).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-mobile-services.entry.js")).then(processMod,consoleError);case"scale-icon-device-no-camera":return __webpack_require__.e(286).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-no-camera.entry.js")).then(processMod,consoleError);case"scale-icon-device-phone-with-mobile-plan":return __webpack_require__.e(287).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-phone-with-mobile-plan.entry.js")).then(processMod,consoleError);case"scale-icon-device-phone-without-mobile-plan":return __webpack_require__.e(288).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-phone-without-mobile-plan.entry.js")).then(processMod,consoleError);case"scale-icon-device-photo-camera":return __webpack_require__.e(289).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-photo-camera.entry.js")).then(processMod,consoleError);case"scale-icon-device-remote-controller":return __webpack_require__.e(290).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-remote-controller.entry.js")).then(processMod,consoleError);case"scale-icon-device-replacement-mobilephone":return __webpack_require__.e(291).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-replacement-mobilephone.entry.js")).then(processMod,consoleError);case"scale-icon-device-screen-rotate":return __webpack_require__.e(292).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-screen-rotate.entry.js")).then(processMod,consoleError);case"scale-icon-device-server":return __webpack_require__.e(293).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-server.entry.js")).then(processMod,consoleError);case"scale-icon-device-smart-speaker":return __webpack_require__.e(294).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-smart-speaker.entry.js")).then(processMod,consoleError);case"scale-icon-device-tablet":return __webpack_require__.e(295).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-tablet.entry.js")).then(processMod,consoleError);case"scale-icon-device-tv-and-mobile":return __webpack_require__.e(296).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-tv-and-mobile.entry.js")).then(processMod,consoleError);case"scale-icon-device-twitching-closed-state":return __webpack_require__.e(297).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-twitching-closed-state.entry.js")).then(processMod,consoleError);case"scale-icon-device-twitching-open-state":return __webpack_require__.e(298).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-twitching-open-state.entry.js")).then(processMod,consoleError);case"scale-icon-home-home":return __webpack_require__.e(299).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-home.entry.js")).then(processMod,consoleError);case"scale-icon-home-internet-at-home":return __webpack_require__.e(300).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-internet-at-home.entry.js")).then(processMod,consoleError);case"scale-icon-home-iot":return __webpack_require__.e(301).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-iot.entry.js")).then(processMod,consoleError);case"scale-icon-home-light-bulb":return __webpack_require__.e(302).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-light-bulb.entry.js")).then(processMod,consoleError);case"scale-icon-home-network-secure":return __webpack_require__.e(303).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-network-secure.entry.js")).then(processMod,consoleError);case"scale-icon-home-no-wifi":return __webpack_require__.e(304).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-no-wifi.entry.js")).then(processMod,consoleError);case"scale-icon-home-power-socket":return __webpack_require__.e(305).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-power-socket.entry.js")).then(processMod,consoleError);case"scale-icon-home-preferred-wifi":return __webpack_require__.e(306).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-preferred-wifi.entry.js")).then(processMod,consoleError);case"scale-icon-home-reduced-wifi":return __webpack_require__.e(307).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-reduced-wifi.entry.js")).then(processMod,consoleError);case"scale-icon-home-slow-wifi":return __webpack_require__.e(308).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-slow-wifi.entry.js")).then(processMod,consoleError);case"scale-icon-home-smarthome":return __webpack_require__.e(309).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-smarthome.entry.js")).then(processMod,consoleError);case"scale-icon-home-unable-to-connect-to-router":return __webpack_require__.e(310).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-unable-to-connect-to-router.entry.js")).then(processMod,consoleError);case"scale-icon-home-wifi":return __webpack_require__.e(315).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-wifi.entry.js")).then(processMod,consoleError);case"scale-icon-home-wifi-connected":return __webpack_require__.e(311).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-wifi-connected.entry.js")).then(processMod,consoleError);case"scale-icon-home-wifi-connection-error":return __webpack_require__.e(312).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-wifi-connection-error.entry.js")).then(processMod,consoleError);case"scale-icon-home-wifi-manual-login":return __webpack_require__.e(313).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-wifi-manual-login.entry.js")).then(processMod,consoleError);case"scale-icon-home-wifi-no-wired-internet":return __webpack_require__.e(314).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-wifi-no-wired-internet.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-circle-top-up":return __webpack_require__.e(316).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-circle-top-up.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-external-link":return __webpack_require__.e(320).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-external-link.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-internal-link":return __webpack_require__.e(321).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-internal-link.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-left-condensed":return __webpack_require__.e(322).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-left-condensed.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-location":return __webpack_require__.e(324).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-location.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-map":return __webpack_require__.e(325).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-map.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-my-location":return __webpack_require__.e(326).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-my-location.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-right-condensed":return __webpack_require__.e(327).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-right-condensed.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-start":return __webpack_require__.e(329).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-start.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-top-up":return __webpack_require__.e(330).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-top-up.entry.js")).then(processMod,consoleError);case"scale-icon-process-order-status":return __webpack_require__.e(331).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-process-order-status.entry.js")).then(processMod,consoleError);case"scale-icon-process-processing":return __webpack_require__.e(332).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-process-processing.entry.js")).then(processMod,consoleError);case"scale-icon-process-sepa-transaction":return __webpack_require__.e(333).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-process-sepa-transaction.entry.js")).then(processMod,consoleError);case"scale-icon-service-devices-service":return __webpack_require__.e(334).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-devices-service.entry.js")).then(processMod,consoleError);case"scale-icon-service-maintanance":return __webpack_require__.e(335).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-maintanance.entry.js")).then(processMod,consoleError);case"scale-icon-service-manual":return __webpack_require__.e(336).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-manual.entry.js")).then(processMod,consoleError);case"scale-icon-service-one-time-password":return __webpack_require__.e(337).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-one-time-password.entry.js")).then(processMod,consoleError);case"scale-icon-service-services":return __webpack_require__.e(338).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-services.entry.js")).then(processMod,consoleError);case"scale-icon-service-support":return __webpack_require__.e(339).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-support.entry.js")).then(processMod,consoleError);case"scale-icon-service-vpn":return __webpack_require__.e(340).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-vpn.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-2fa-telekom-app":return __webpack_require__.e(341).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-2fa-telekom-app.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-magenta-cloud":return __webpack_require__.e(342).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-magenta-cloud.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-magenta-tv":return __webpack_require__.e(343).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-magenta-tv.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-magentaone":return __webpack_require__.e(344).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-magentaone.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-measure-internet-speed":return __webpack_require__.e(345).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-measure-internet-speed.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-seamless-connectivity":return __webpack_require__.e(346).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-seamless-connectivity.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-telekom-1t1":return __webpack_require__.e(347).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-telekom-1t1.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-telekom-plan":return __webpack_require__.e(348).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-telekom-plan.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-telekom-shop-b":return __webpack_require__.e(349).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-telekom-shop-b.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-usage":return __webpack_require__.e(350).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-usage.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-voice":return __webpack_require__.e(351).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-voice.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-admin":return __webpack_require__.e(352).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-admin.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-analytics":return __webpack_require__.e(353).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-analytics.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-attachment":return __webpack_require__.e(354).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-attachment.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-audio-file":return __webpack_require__.e(355).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-audio-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-billing":return __webpack_require__.e(356).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-billing.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-boy":return __webpack_require__.e(357).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-boy.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-bussines-users":return __webpack_require__.e(358).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-bussines-users.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-communities":return __webpack_require__.e(359).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-communities.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-contacts":return __webpack_require__.e(361).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-contacts.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-contacts-from-cloud":return __webpack_require__.e(360).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-contacts-from-cloud.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-contracts":return __webpack_require__.e(362).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-contracts.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-draft-file":return __webpack_require__.e(363).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-draft-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-families":return __webpack_require__.e(364).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-families.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-family":return __webpack_require__.e(365).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-family.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-file":return __webpack_require__.e(367).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-file-collection":return __webpack_require__.e(366).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-file-collection.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-girl":return __webpack_require__.e(368).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-girl.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-handshake":return __webpack_require__.e(369).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-handshake.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-html-file":return __webpack_require__.e(370).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-html-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-id-card":return __webpack_require__.e(371).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-id-card.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-image-file":return __webpack_require__.e(372).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-image-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-logout":return __webpack_require__.e(373).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-logout.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-man":return __webpack_require__.e(374).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-man.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-pdf-file":return __webpack_require__.e(375).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-pdf-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-switch-users":return __webpack_require__.e(376).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-switch-users.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-videos":return __webpack_require__.e(377).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-videos.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-woman":return __webpack_require__.e(378).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-woman.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy":return __webpack_require__.e(384).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy-rain":return __webpack_require__.e(379).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy-sleet":return __webpack_require__.e(380).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy-sleet.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy-snow":return __webpack_require__.e(381).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy-snow.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy-thunder-rain":return __webpack_require__.e(382).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy-thunder-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy-thunder-snow":return __webpack_require__.e(383).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy-thunder-snow.entry.js")).then(processMod,consoleError);case"scale-icon-weather-heavy-sleet":return __webpack_require__.e(385).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-heavy-sleet.entry.js")).then(processMod,consoleError);case"scale-icon-weather-heavy-snow":return __webpack_require__.e(386).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-heavy-snow.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-clear":return __webpack_require__.e(387).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-clear.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-cloudy-a":return __webpack_require__.e(388).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-cloudy-a.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-cloudy-b":return __webpack_require__.e(389).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-cloudy-b.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-rain":return __webpack_require__.e(390).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-sleet":return __webpack_require__.e(391).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-sleet.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-snow":return __webpack_require__.e(392).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-snow.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-thunder-rain":return __webpack_require__.e(393).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-thunder-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-thunder-snow":return __webpack_require__.e(394).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-thunder-snow.entry.js")).then(processMod,consoleError);case"scale-icon-weather-overcast":return __webpack_require__.e(395).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-overcast.entry.js")).then(processMod,consoleError);case"scale-icon-weather-rain":return __webpack_require__.e(396).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-sunny":return __webpack_require__.e(397).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-sunny.entry.js")).then(processMod,consoleError);case"scale-icon-weather-thunder-rain":return __webpack_require__.e(398).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-thunder-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-thunder-snow":return __webpack_require__.e(399).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-thunder-snow.entry.js")).then(processMod,consoleError);case"scale-input":return __webpack_require__.e(10).then(__webpack_require__.bind(null,"../components/dist/esm/scale-input.entry.js")).then(processMod,consoleError);case"scale-list":return __webpack_require__.e(52).then(__webpack_require__.bind(null,"../components/dist/esm/scale-list.entry.js")).then(processMod,consoleError);case"scale-list-item":return __webpack_require__.e(51).then(__webpack_require__.bind(null,"../components/dist/esm/scale-list-item.entry.js")).then(processMod,consoleError);case"scale-loading-spinner":return __webpack_require__.e(53).then(__webpack_require__.bind(null,"../components/dist/esm/scale-loading-spinner.entry.js")).then(processMod,consoleError);case"scale-menu-flyout-divider":return __webpack_require__.e(54).then(__webpack_require__.bind(null,"../components/dist/esm/scale-menu-flyout-divider.entry.js")).then(processMod,consoleError);case"scale-modal":return __webpack_require__.e(36).then(__webpack_require__.bind(null,"../components/dist/esm/scale-modal.entry.js")).then(processMod,consoleError);case"scale-notification":return __webpack_require__.e(37).then(__webpack_require__.bind(null,"../components/dist/esm/scale-notification.entry.js")).then(processMod,consoleError);case"scale-notification-banner":return __webpack_require__.e(15).then(__webpack_require__.bind(null,"../components/dist/esm/scale-notification-banner.entry.js")).then(processMod,consoleError);case"scale-notification-message":return __webpack_require__.e(16).then(__webpack_require__.bind(null,"../components/dist/esm/scale-notification-message.entry.js")).then(processMod,consoleError);case"scale-notification-toast":return __webpack_require__.e(17).then(__webpack_require__.bind(null,"../components/dist/esm/scale-notification-toast.entry.js")).then(processMod,consoleError);case"scale-radio-button":return __webpack_require__.e(19).then(__webpack_require__.bind(null,"../components/dist/esm/scale-radio-button.entry.js")).then(processMod,consoleError);case"scale-radio-button-group":return __webpack_require__.e(18).then(__webpack_require__.bind(null,"../components/dist/esm/scale-radio-button-group.entry.js")).then(processMod,consoleError);case"scale-rating-stars":return __webpack_require__.e(43).then(__webpack_require__.bind(null,"../components/dist/esm/scale-rating-stars.entry.js")).then(processMod,consoleError);case"scale-segment":return __webpack_require__.e(11).then(__webpack_require__.bind(null,"../components/dist/esm/scale-segment.entry.js")).then(processMod,consoleError);case"scale-segmented-button":return __webpack_require__.e(38).then(__webpack_require__.bind(null,"../components/dist/esm/scale-segmented-button.entry.js")).then(processMod,consoleError);case"scale-sidebar-nav":return __webpack_require__.e(39).then(__webpack_require__.bind(null,"../components/dist/esm/scale-sidebar-nav.entry.js")).then(processMod,consoleError);case"scale-sidebar-nav-collapsible":return __webpack_require__.e(55).then(__webpack_require__.bind(null,"../components/dist/esm/scale-sidebar-nav-collapsible.entry.js")).then(processMod,consoleError);case"scale-sidebar-nav-item":return __webpack_require__.e(56).then(__webpack_require__.bind(null,"../components/dist/esm/scale-sidebar-nav-item.entry.js")).then(processMod,consoleError);case"scale-slider":return __webpack_require__.e(20).then(__webpack_require__.bind(null,"../components/dist/esm/scale-slider.entry.js")).then(processMod,consoleError);case"scale-ssr-slot-fix":return __webpack_require__.e(401).then(__webpack_require__.bind(null,"../components/dist/esm/scale-ssr-slot-fix.entry.js")).then(processMod,consoleError);case"scale-tab-header":return __webpack_require__.e(21).then(__webpack_require__.bind(null,"../components/dist/esm/scale-tab-header.entry.js")).then(processMod,consoleError);case"scale-tab-nav":return __webpack_require__.e(40).then(__webpack_require__.bind(null,"../components/dist/esm/scale-tab-nav.entry.js")).then(processMod,consoleError);case"scale-tab-panel":return __webpack_require__.e(61).then(__webpack_require__.bind(null,"../components/dist/esm/scale-tab-panel.entry.js")).then(processMod,consoleError);case"scale-table":return __webpack_require__.e(41).then(__webpack_require__.bind(null,"../components/dist/esm/scale-table.entry.js")).then(processMod,consoleError);case"scale-telekom-app-shell":return __webpack_require__.e(402).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-app-shell.entry.js")).then(processMod,consoleError);case"scale-telekom-footer-data-back-compat":return __webpack_require__.e(403).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-footer-data-back-compat.entry.js")).then(processMod,consoleError);case"scale-telekom-footer-extended-navigation":return __webpack_require__.e(404).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-footer-extended-navigation.entry.js")).then(processMod,consoleError);case"scale-telekom-footer-extended-navigation-column":return __webpack_require__.e(57).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-footer-extended-navigation-column.entry.js")).then(processMod,consoleError);case"scale-telekom-header-data-back-compat":return __webpack_require__.e(12).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-header-data-back-compat.entry.js")).then(processMod,consoleError);case"scale-textarea":return __webpack_require__.e(22).then(__webpack_require__.bind(null,"../components/dist/esm/scale-textarea.entry.js")).then(processMod,consoleError);case"scale-toast":return __webpack_require__.e(6).then(__webpack_require__.bind(null,"../components/dist/esm/scale-toast.entry.js")).then(processMod,consoleError);case"scale-toggle-button":return __webpack_require__.e(23).then(__webpack_require__.bind(null,"../components/dist/esm/scale-toggle-button.entry.js")).then(processMod,consoleError);case"scale-toggle-group":return __webpack_require__.e(24).then(__webpack_require__.bind(null,"../components/dist/esm/scale-toggle-group.entry.js")).then(processMod,consoleError);case"scale-tooltip":return Promise.all([__webpack_require__.e(0),__webpack_require__.e(405)]).then(__webpack_require__.bind(null,"../components/dist/esm/scale-tooltip.entry.js")).then(processMod,consoleError);case"duet-date-picker_2":return __webpack_require__.e(27).then(__webpack_require__.bind(null,"../components/dist/esm/duet-date-picker_2.entry.js")).then(processMod,consoleError);case"scale-app-header":return __webpack_require__.e(7).then(__webpack_require__.bind(null,"../components/dist/esm/scale-app-header.entry.js")).then(processMod,consoleError);case"scale-badge_12":return __webpack_require__.e(13).then(__webpack_require__.bind(null,"../components/dist/esm/scale-badge_12.entry.js")).then(processMod,consoleError);case"scale-card":return __webpack_require__.e(48).then(__webpack_require__.bind(null,"../components/dist/esm/scale-card.entry.js")).then(processMod,consoleError);case"scale-dropdown-select_13":return Promise.all([__webpack_require__.e(0),__webpack_require__.e(34)]).then(__webpack_require__.bind(null,"../components/dist/esm/scale-dropdown-select_13.entry.js")).then(processMod,consoleError);case"scale-icon-action-favorite":return __webpack_require__.e(90).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-favorite.entry.js")).then(processMod,consoleError);case"scale-telekom-footer_2":return __webpack_require__.e(58).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-footer_2.entry.js")).then(processMod,consoleError);case"app-mega-menu_8":return __webpack_require__.e(5).then(__webpack_require__.bind(null,"../components/dist/esm/app-mega-menu_8.entry.js")).then(processMod,consoleError);case"scale-checkbox_2":return __webpack_require__.e(42).then(__webpack_require__.bind(null,"../components/dist/esm/scale-checkbox_2.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-collapse-up":return __webpack_require__.e(318).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-collapse-up.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-double-left_2":return __webpack_require__.e(319).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-double-left_2.entry.js")).then(processMod,consoleError);case"scale-icon-action-circle-close_2":return __webpack_require__.e(77).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-circle-close_2.entry.js")).then(processMod,consoleError);case"scale-link":return __webpack_require__.e(400).then(__webpack_require__.bind(null,"../components/dist/esm/scale-link.entry.js")).then(processMod,consoleError);case"scale-button_3":return __webpack_require__.e(30).then(__webpack_require__.bind(null,"../components/dist/esm/scale-button_3.entry.js")).then(processMod,consoleError);case"scale-icon-action-close":return __webpack_require__.e(78).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-close.entry.js")).then(processMod,consoleError);case"scale-helper-text":return __webpack_require__.e(63).then(__webpack_require__.bind(null,"../components/dist/esm/scale-helper-text.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-collapse-down":return __webpack_require__.e(317).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-collapse-down.entry.js")).then(processMod,consoleError);case"scale-logo_2":return __webpack_require__.e(35).then(__webpack_require__.bind(null,"../components/dist/esm/scale-logo_2.entry.js")).then(processMod,consoleError);case"scale-icon":return __webpack_require__.e(50).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon.entry.js")).then(processMod,consoleError);case"scale-icon-action-checkmark":return __webpack_require__.e(75).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-checkmark.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-left":return __webpack_require__.e(323).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-left.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-right":return __webpack_require__.e(328).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-right.entry.js")).then(processMod,consoleError);case"scale-icon-action-success_3":return __webpack_require__.e(135).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-success_3.entry.js")).then(processMod,consoleError)}}return __webpack_require__("../components/dist/esm lazy recursive ^\\.\\/.*\\.entry\\.js$ include: \\.entry\\.js$ exclude: \\.system\\.entry\\.js$")("./"+bundleId+".entry.js").then((function(importedModule){return cmpModules.set(bundleId,importedModule),importedModule[exportName]}),consoleError)},styles=new Map,queueDomReads=[],queueDomWrites=[],queueTask=function queueTask(queue,write){return function(cb){queue.push(cb),queuePending||(queuePending=!0,write&&4&plt.$flags$?nextTick(flush):plt.raf(flush))}},consume=function consume(queue){for(var i=0;i<queue.length;i++)try{queue[i](performance.now())}catch(e){consoleError(e)}queue.length=0},flush=function flush(){consume(queueDomReads),consume(queueDomWrites),(queuePending=queueDomReads.length>0)&&plt.raf(flush)},nextTick=function nextTick(cb){return promiseResolve().then(cb)},writeTask=queueTask(queueDomWrites,!0)},"../components/dist/scale-components/components/icons/scale-icons.json":function(module){module.exports=JSON.parse('[{"label":"Action","category":"action","items":["add","add-card","arrange","arrow-left","arrow-right","arrow-down","arrow-up","auto-login","backspace","backward","changelog","checkmark","circle-add","circle-close","close","compare","copy-paste","cut-paste","disabled-microphone","download","download-from-cloud","drag-and-drop","edit","export","fast-forward","fast-forward-nb","favorite","filter","filter-2","forward","full-screen","hide-password","import","install","launch","light-dark-mode","link","logout","loop","menu","microphone","minimize-screen","minus","minus-circle","more","move","mute","notification","pause","pause-nb","pin","play","play-nb","pop-up-window","power","previous-nb","print","publish","random","record-nb","refresh","remove","reply","reply-all","reply-forward","restart","search","send","share","shopping-cart","show-password","sort","sound-on","star","stream-on","success","thumbs-down","thumbs-up","tiles-add","upload","upload-to-cloud","volume-down","volume-up","zoom-in","zoom-out"]},{"label":"Alert","category":"alert","items":["antivirus-protection","compliance","cyber-security","error","help","high-priority-email","imprint-dataprivacy","information","legal","network-disrupted","password-breaking","security","traffic-disruption","unknown","warning"]},{"label":"Communication","category":"communication","items":["available","blog","call-incoming","call-outgoing","chat","chat-badge","email","end-call","feedback","flight-mode","happy-person","inbox","landing-mobile-contact-client","loyalty-earned","loyalty-lost","mail-opened","message","message-incoming","message-outgoing","mms-incoming","mms-outgoing","mobile-phone-number","network-signal","new-email","outbox","phone-number","recipient","save-emails-to-drafts","sms","spam","voice-message"]},{"label":"Content","category":"content","items":["2fa-google-auth","achievement","android","apple","applications","available-keychain","bank","biometric","birthday","bookmark","calendar","clipboard","clock","cloud-security","code-scanner","color-selection","country","credit-card","data-visualisation","delivery","digital-banking","digital-media","discount","e-sim","eu","face-mask","features","flexible-tariffs","folder","food","gender-diverse","gender-female","gender-male","half-rating","heart","height","history","hour-glass","iban","id","in-stock","international","international-sms","interview","key","language","lock","loyalty","media-folder","money-at","music","news","out-of-stock","person-walking","prepaid-activate","price-tag","ratings","route","rss","shop","signal","sim-card","smile","sort-indicator-down","sort-indicator-mini-down","sort-indicator-up","sort-indicator-up-mini","status-inactive","status-recurring","stopwatch","support-chat","sustainable","tariffs","threats","todo-list","transport","unlock","voucher","waiting","wallet"]},{"label":"Device","category":"device","items":["add-device","camera","change-camera","computer","device-controller","device-ethernet","device-mesh","device-phone","device-router","device-tv","device-watch","dongle","fax","fixed-line-services","game-controller","media-receiver","mobile-data","mobile-devices-combination","mobile-equipment","mobile-phone-insurance","mobile-services","no-camera","phone-with-mobile-plan","phone-without-mobile-plan","photo-camera","remote-controller","replacement-mobilephone","screen-rotate","server","smart-speaker","tablet","tv-and-mobile","twitching-closed-state","twitching-open-state"]},{"label":"Home","category":"home","items":["home","internet-at-home","iot","light-bulb","network-secure","no-wifi","power-socket","preferred-wifi","reduced-wifi","slow-wifi","smarthome","unable-to-connect-to-router","wifi","wifi-connected","wifi-connection-error","wifi-manual-login","wifi-no-wired-internet"]},{"label":"Navigation","category":"navigation","items":["circle-top-up","collapse-down","collapse-up","double-left","double-right","external-link","internal-link","left","left-condensed","location","map","my-location","right","right-condensed","start","top-up"]},{"label":"Process","category":"process","items":["order-status","processing","sepa-transaction"]},{"label":"Service","category":"service","items":["devices-service","maintanance","manual","one-time-password","services","settings","support","vpn"]},{"label":"T Product","category":"t-product","items":["2fa-telekom-app","magenta-cloud","magenta-tv","magentaone","measure-internet-speed","seamless-connectivity","telekom-1t1","telekom-plan","telekom-shop-b","usage","voice"]},{"label":"User File","category":"user-file","items":["admin","analytics","attachment","audio-file","billing","boy","bussines-users","communities","contacts","contacts-from-cloud","contracts","draft-file","families","family","file","file-collection","girl","handshake","html-file","id-card","image-file","logout","man","pdf-file","switch-users","user","videos","woman"]},{"label":"Weather","category":"weather","items":["cloudy","cloudy-rain","cloudy-sleet","cloudy-snow","cloudy-thunder-rain","cloudy-thunder-snow","heavy-sleet","heavy-snow","moon-clear","moon-cloudy-a","moon-cloudy-b","moon-rain","moon-sleet","moon-snow","moon-thunder-rain","moon-thunder-snow","overcast","rain","sunny","thunder-rain","thunder-snow"]}]')},"./.storybook/preview.js-generated-config-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,"parameters",(function(){return parameters}));__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var ClientApi=__webpack_require__("../../node_modules/@storybook/client-api/dist/esm/ClientApi.js"),esm=__webpack_require__("../../node_modules/@storybook/client-logger/dist/esm/index.js"),vue_esm=__webpack_require__("../../node_modules/vue/dist/vue.esm.js");__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.url.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.entries.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.starts-with.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.ends-with.js"),__webpack_require__("../../node_modules/core-js/modules/es.weak-map.js");var index_6d95a4bc=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),loader_defineCustomElements=function defineCustomElements(win,options){return"undefined"==typeof window?Promise.resolve():function patchEsm(){return Object(index_6d95a4bc.h)()}().then((function(){return Object(index_6d95a4bc.d)(JSON.parse('[["scale-icon",[[0,"scale-icon",{"name":[1],"path":[1],"size":[514],"fill":[1],"stroke":[1],"focusable":[4],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"]}]]],["scale-data-grid",[[1,"scale-data-grid",{"fields":[8],"freezeHeader":[4,"freeze-header"],"heading":[1],"height":[1],"hideBorder":[4,"hide-border"],"hideHeader":[4,"hide-header"],"hideInfo":[4,"hide-info"],"hideMenu":[4,"hide-menu"],"numbered":[4],"pageSize":[2,"page-size"],"rows":[8],"selectable":[4],"selection":[16],"shadeAlternate":[4,"shade-alternate"],"styles":[8],"visible":[4],"sortableColumnTitle":[1,"sortable-column-title"],"localization":[16],"forceRender":[32],"paginationStart":[32],"scrollY":[32]}]]],["scale-telekom-header-data-back-compat",[[0,"scale-telekom-header-data-back-compat",{"appName":[513,"app-name"],"appNameLink":[1,"app-name-link"],"appNameClick":[8,"app-name-click"],"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"],"mainNavigation":[8,"main-navigation"],"iconNavigation":[8,"icon-navigation"],"addonNavigation":[8,"addon-navigation"],"sectorNavigation":[8,"sector-navigation"],"userNavigation":[8,"user-navigation"],"activeRouteId":[1,"active-route-id"]}]]],["scale-app-shell",[[1,"scale-app-shell",{"portalName":[1,"portal-name"],"claimLang":[1,"claim-lang"],"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"],"logoClick":[8,"logo-click"],"logoAriaDescribedBy":[1,"logo-aria-described-by"],"mainNavigation":[8,"main-navigation"],"iconNavigation":[8,"icon-navigation"],"userNavigation":[8,"user-navigation"],"sectorNavigation":[8,"sector-navigation"],"addonNavigation":[8,"addon-navigation"],"activeRouteId":[1,"active-route-id"],"activeSectorId":[1,"active-sector-id"],"userMenuAriaLabel":[1,"user-menu-aria-label"],"sticky":[4],"styles":[1],"scrolled":[32]}]]],["scale-date-picker",[[0,"scale-date-picker",{"name":[1],"popupTitle":[1,"popup-title"],"identifier":[1025],"disabled":[516],"innerRole":[1,"inner-role"],"direction":[1],"required":[4],"value":[1537],"min":[1],"max":[1],"firstDayOfWeek":[8,"first-day-of-week"],"localization":[16],"dateAdapter":[8,"date-adapter"],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"label":[1],"styles":[1],"placeholder":[1],"size":[1],"variant":[1],"hasFocus":[32],"hasValue":[32],"setFocus":[64],"show":[64],"hide":[64]}]]],["scale-notification-banner",[[1,"scale-notification-banner",{"variant":[1],"dismissible":[4],"opened":[516],"autoHide":[4,"auto-hide"],"autoHideDuration":[2,"auto-hide-duration"],"href":[1],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"],"open":[64]}]]],["scale-notification-toast",[[1,"scale-notification-toast",{"variant":[1],"opened":[516],"animated":[4],"alignment":[1],"positionVertical":[2,"position-vertical"],"positionHorizontal":[2,"position-horizontal"],"autoHide":[4,"auto-hide"],"autoHideDuration":[2,"auto-hide-duration"],"fadeDuration":[2,"fade-duration"],"styles":[513],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"],"story":[4],"href":[1],"toastHeightWithOffset":[32],"open":[64]}]]],["scale-checkbox-group",[[4,"scale-checkbox-group",{"name":[1],"label":[1],"ariaLabelCheckboxGroup":[1,"aria-label-checkbox-group"],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"value":[1],"inputId":[1025,"input-id"],"styles":[1],"selectText":[1,"select-text"],"unselectText":[1,"unselect-text"],"checked":[32],"indeterminate":[32],"disabled":[32]},[[0,"scaleChange","handleCheckboxChange"]]]]],["scale-dropdown",[[4,"scale-dropdown",{"name":[1],"label":[1],"helperText":[1,"helper-text"],"status":[1],"size":[1],"invalid":[4],"variant":[1],"disabled":[4],"required":[4],"value":[1032],"inputId":[1,"input-id"],"multiple":[4],"visibleSize":[2,"visible-size"],"transparent":[4],"controlled":[4],"hideLabelVisually":[4,"hide-label-visually"],"styles":[1],"forceUpdate":[32]}]]],["scale-notification-message",[[1,"scale-notification-message",{"variant":[1],"dismissible":[4],"opened":[516],"autoHide":[4,"auto-hide"],"autoHideDuration":[2,"auto-hide-duration"],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"],"open":[64]}]]],["scale-segmented-button",[[1,"scale-segmented-button",{"size":[1],"multiSelect":[4,"multi-select"],"selectedIndex":[2,"selected-index"],"disabled":[516],"fullWidth":[4,"full-width"],"invalid":[4],"helperText":[1,"helper-text"],"label":[1],"styles":[1],"ariaLabelTranslation":[1,"aria-label-translation"],"longestButtonWidth":[1025,"longest-button-width"],"status":[32]},[[0,"scaleClick","scaleClickHandler"]]]]],["scale-telekom-footer-data-back-compat",[[0,"scale-telekom-footer-data-back-compat",{"type":[513],"footerNavigation":[8,"footer-navigation"],"copyright":[1]}]]],["scale-textarea",[[0,"scale-textarea",{"name":[1],"label":[1],"rows":[2],"cols":[2],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"variant":[1],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"placeholder":[1],"disabled":[4],"readonly":[4],"required":[4],"counter":[4],"resize":[1],"value":[1032],"inputId":[1,"input-id"],"transparent":[4],"inputAutofocus":[4,"input-autofocus"],"styles":[1],"hasFocus":[32]}]]],["scale-app-footer",[[1,"scale-app-footer",{"footerNavigation":[8,"footer-navigation"],"variant":[1],"copyright":[1],"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoClick":[8,"logo-click"],"logoAriaDescribedBy":[1,"logo-aria-described-by"],"styles":[1]}]]],["scale-chip",[[1,"scale-chip",{"variant":[1],"type":[1],"selected":[4],"ariaRoleTitle":[1,"aria-role-title"],"ariaCheckedState":[4,"aria-checked-state"],"label":[1],"disabled":[4],"dismissText":[1,"dismiss-text"],"styles":[1]}]]],["scale-notification",[[1,"scale-notification",{"heading":[1],"type":[1],"variant":[1],"opened":[1540],"dismissible":[4],"delay":[2],"innerAriaLive":[1,"inner-aria-live"],"innerRole":[1,"inner-role"],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"],"headingLevel":[2,"heading-level"],"ariaHeading":[1,"aria-heading"],"styles":[1],"isOpen":[32],"animationState":[32],"hasTextSlot":[32]}]]],["scale-radio-button",[[0,"scale-radio-button",{"name":[1],"label":[1],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"disabled":[4],"checked":[516],"value":[1032],"inputId":[1,"input-id"],"styles":[1]}]]],["scale-radio-button-group",[[1,"scale-radio-button-group",{"label":[1],"helperText":[1,"helper-text"],"status":[1],"invalid":[4]}]]],["scale-breadcrumb",[[1,"scale-breadcrumb",{"separator":[1],"styles":[1],"linksArray":[32],"separatorSlot":[32]}]]],["scale-chart-stack-card",[[0,"scale-chart-stack-card",{"data":[1],"heading":[1]}]]],["scale-input",[[4,"scale-input",{"type":[1],"name":[1],"variant":[1],"label":[1],"size":[1],"rows":[2],"cols":[2],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"placeholder":[1],"disabled":[4],"required":[4],"counter":[4],"checked":[516],"resize":[1],"value":[1032],"inputId":[1,"input-id"],"icon":[1],"multiple":[4],"visibleSize":[2,"visible-size"],"transparent":[4],"controlled":[4],"styles":[1],"customResize":[32],"hasFocus":[32],"forceUpdate":[32]}]]],["scale-modal",[[1,"scale-modal",{"heading":[1],"size":[1],"opened":[1540],"duration":[2],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"],"omitCloseButton":[4,"omit-close-button"],"alignActions":[1,"align-actions"],"styles":[1],"allowInjectingStyleToBody":[4,"allow-injecting-style-to-body"],"isOpen":[32],"hasActionsSlot":[32],"hasBody":[32],"hasScroll":[32],"bodyOverflowValue":[32]}]]],["scale-rating-stars",[[1,"scale-rating-stars",{"starSize":[1,"star-size"],"size":[1537],"minRating":[2,"min-rating"],"maxRating":[2,"max-rating"],"max":[1538],"rating":[1538],"readonly":[516],"disabled":[516],"ariaLabelTranslation":[1,"aria-label-translation"],"label":[513],"hideLabel":[516,"hide-label"],"infoText":[1,"info-text"]}]]],["scale-segment",[[1,"scale-segment",{"size":[1],"selected":[1028],"disabled":[4],"segmentId":[1537,"segment-id"],"ariaLabelSegment":[1,"aria-label-segment"],"width":[1],"styles":[1],"adjacentSiblings":[1537,"adjacent-siblings"],"ariaLangSelected":[1,"aria-lang-selected"],"ariaLangDeselected":[1,"aria-lang-deselected"],"ariaDescriptionTranslation":[1,"aria-description-translation"],"position":[2],"hasIcon":[1028,"has-icon"],"textOnly":[1028,"text-only"],"iconOnly":[1028,"icon-only"],"selectedIndex":[1025,"selected-index"],"setFocus":[64]}]]],["scale-sidebar-nav",[[1,"scale-sidebar-nav",{"ariaLabelSidebarNav":[1,"aria-label-sidebar-nav"],"collapsible":[1540],"collapsibleMediaQuery":[1,"collapsible-media-query"],"collapsibleLabel":[1,"collapsible-label"],"styles":[1],"collapsed":[32]}]]],["scale-sidebar-nav-collapsible",[[1,"scale-sidebar-nav-collapsible",{"tag":[1],"label":[1],"href":[1],"expanded":[1540],"active":[4],"bold":[4],"condensed":[4],"nestingLevel":[2,"nesting-level"],"styles":[1]}]]],["scale-telekom-footer-extended-navigation-column",[[1,"scale-telekom-footer-extended-navigation-column",{"heading":[1],"expanded":[516],"headingLevel":[1,"heading-level"]}]]],["app-logo",[[0,"app-logo",{"href":[1],"logoTitle":[1,"logo-title"],"color":[1],"claim":[4],"claimLang":[1,"claim-lang"],"focusable":[4]}]]],["scale-accordion",[[1,"scale-accordion",{"styles":[1],"dependent":[4],"expanded":[4],"headingLevel":[2,"heading-level"],"iconLocation":[1,"icon-location"]},[[0,"scale-expand","collapsibleHandler"]]]]],["scale-alert",[[1,"scale-alert",{"size":[1],"variant":[1],"headline":[513],"opened":[516],"timeout":[8],"icon":[1],"styles":[1],"open":[64]}]]],["scale-callout",[[1,"scale-callout",{"variant":[1],"rotation":[2],"top":[1],"right":[1],"bottom":[1],"left":[1],"styles":[1]}]]],["scale-carousel",[[1,"scale-carousel",{"vertical":[4],"styles":[1],"slidesArray":[32],"value":[32]}]]],["scale-collapsible",[[1,"scale-collapsible",{"expanded":[1540],"headingLevel":[2,"heading-level"],"styles":[1],"iconLocation":[1,"icon-location"]}]]],["scale-divider",[[1,"scale-divider",{"vertical":[4],"styles":[1]}]]],["scale-grid",[[4,"scale-grid",{"columns":[1],"gutterY":[1,"gutter-y"],"gutterX":[1,"gutter-x"],"spacing":[1],"maxWidth":[1,"max-width"]}]]],["scale-grid-item",[[4,"scale-grid-item",{"size":[1],"offset":[1]}]]],["scale-icon-action-add",[[0,"scale-icon-action-add",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-add-card",[[0,"scale-icon-action-add-card",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-arrange",[[0,"scale-icon-action-arrange",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-arrow-down",[[0,"scale-icon-action-arrow-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-arrow-left",[[0,"scale-icon-action-arrow-left",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-arrow-right",[[0,"scale-icon-action-arrow-right",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-arrow-up",[[0,"scale-icon-action-arrow-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-auto-login",[[0,"scale-icon-action-auto-login",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-backspace",[[0,"scale-icon-action-backspace",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-backward",[[0,"scale-icon-action-backward",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-changelog",[[0,"scale-icon-action-changelog",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-circle-add",[[0,"scale-icon-action-circle-add",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-compare",[[0,"scale-icon-action-compare",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-copy-paste",[[0,"scale-icon-action-copy-paste",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-cut-paste",[[0,"scale-icon-action-cut-paste",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-disabled-microphone",[[0,"scale-icon-action-disabled-microphone",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-download",[[0,"scale-icon-action-download",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-download-from-cloud",[[0,"scale-icon-action-download-from-cloud",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-drag-and-drop",[[0,"scale-icon-action-drag-and-drop",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-edit",[[0,"scale-icon-action-edit",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-export",[[0,"scale-icon-action-export",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-fast-forward",[[0,"scale-icon-action-fast-forward",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-fast-forward-nb",[[0,"scale-icon-action-fast-forward-nb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-filter",[[0,"scale-icon-action-filter",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-filter-2",[[0,"scale-icon-action-filter-2",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-forward",[[0,"scale-icon-action-forward",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-full-screen",[[0,"scale-icon-action-full-screen",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-import",[[0,"scale-icon-action-import",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-install",[[0,"scale-icon-action-install",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-launch",[[0,"scale-icon-action-launch",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-light-dark-mode",[[0,"scale-icon-action-light-dark-mode",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-link",[[0,"scale-icon-action-link",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-logout",[[0,"scale-icon-action-logout",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-loop",[[0,"scale-icon-action-loop",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-microphone",[[0,"scale-icon-action-microphone",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-minimize-screen",[[0,"scale-icon-action-minimize-screen",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-minus-circle",[[0,"scale-icon-action-minus-circle",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-more",[[0,"scale-icon-action-more",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-move",[[0,"scale-icon-action-move",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-mute",[[0,"scale-icon-action-mute",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-notification",[[0,"scale-icon-action-notification",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-pause",[[0,"scale-icon-action-pause",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-pause-nb",[[0,"scale-icon-action-pause-nb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-pin",[[0,"scale-icon-action-pin",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-play",[[0,"scale-icon-action-play",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-play-nb",[[0,"scale-icon-action-play-nb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-pop-up-window",[[0,"scale-icon-action-pop-up-window",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-power",[[0,"scale-icon-action-power",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-previous-nb",[[0,"scale-icon-action-previous-nb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-print",[[0,"scale-icon-action-print",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-publish",[[0,"scale-icon-action-publish",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-random",[[0,"scale-icon-action-random",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-record-nb",[[0,"scale-icon-action-record-nb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-refresh",[[0,"scale-icon-action-refresh",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-remove",[[0,"scale-icon-action-remove",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-reply",[[0,"scale-icon-action-reply",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-reply-all",[[0,"scale-icon-action-reply-all",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-reply-forward",[[0,"scale-icon-action-reply-forward",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-restart",[[0,"scale-icon-action-restart",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-search",[[0,"scale-icon-action-search",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-send",[[0,"scale-icon-action-send",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-share",[[0,"scale-icon-action-share",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-shopping-cart",[[0,"scale-icon-action-shopping-cart",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-show-password",[[0,"scale-icon-action-show-password",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-sound-on",[[0,"scale-icon-action-sound-on",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-star",[[0,"scale-icon-action-star",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-stream-on",[[0,"scale-icon-action-stream-on",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-thumbs-down",[[0,"scale-icon-action-thumbs-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-thumbs-up",[[0,"scale-icon-action-thumbs-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-tiles-add",[[0,"scale-icon-action-tiles-add",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-upload",[[0,"scale-icon-action-upload",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-upload-to-cloud",[[0,"scale-icon-action-upload-to-cloud",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-volume-down",[[0,"scale-icon-action-volume-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-volume-up",[[0,"scale-icon-action-volume-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-zoom-in",[[0,"scale-icon-action-zoom-in",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-zoom-out",[[0,"scale-icon-action-zoom-out",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-antivirus-protection",[[0,"scale-icon-alert-antivirus-protection",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-compliance",[[0,"scale-icon-alert-compliance",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-cyber-security",[[0,"scale-icon-alert-cyber-security",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-help",[[0,"scale-icon-alert-help",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-high-priority-email",[[0,"scale-icon-alert-high-priority-email",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-imprint-dataprivacy",[[0,"scale-icon-alert-imprint-dataprivacy",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-legal",[[0,"scale-icon-alert-legal",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-network-disrupted",[[0,"scale-icon-alert-network-disrupted",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-password-breaking",[[0,"scale-icon-alert-password-breaking",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-security",[[0,"scale-icon-alert-security",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-traffic-disruption",[[0,"scale-icon-alert-traffic-disruption",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-unknown",[[0,"scale-icon-alert-unknown",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-available",[[0,"scale-icon-communication-available",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-blog",[[0,"scale-icon-communication-blog",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-call-incoming",[[0,"scale-icon-communication-call-incoming",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-call-outgoing",[[0,"scale-icon-communication-call-outgoing",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-chat",[[0,"scale-icon-communication-chat",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-chat-badge",[[0,"scale-icon-communication-chat-badge",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-email",[[0,"scale-icon-communication-email",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-end-call",[[0,"scale-icon-communication-end-call",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-feedback",[[0,"scale-icon-communication-feedback",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-flight-mode",[[0,"scale-icon-communication-flight-mode",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-happy-person",[[0,"scale-icon-communication-happy-person",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-inbox",[[0,"scale-icon-communication-inbox",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-landing-mobile-contact-client",[[0,"scale-icon-communication-landing-mobile-contact-client",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-loyalty-earned",[[0,"scale-icon-communication-loyalty-earned",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-loyalty-lost",[[0,"scale-icon-communication-loyalty-lost",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-mail-opened",[[0,"scale-icon-communication-mail-opened",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-message",[[0,"scale-icon-communication-message",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-message-incoming",[[0,"scale-icon-communication-message-incoming",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-message-outgoing",[[0,"scale-icon-communication-message-outgoing",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-mms-incoming",[[0,"scale-icon-communication-mms-incoming",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-mms-outgoing",[[0,"scale-icon-communication-mms-outgoing",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-mobile-phone-number",[[0,"scale-icon-communication-mobile-phone-number",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-network-signal",[[0,"scale-icon-communication-network-signal",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-new-email",[[0,"scale-icon-communication-new-email",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-outbox",[[0,"scale-icon-communication-outbox",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-phone-number",[[0,"scale-icon-communication-phone-number",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-recipient",[[0,"scale-icon-communication-recipient",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-save-emails-to-drafts",[[0,"scale-icon-communication-save-emails-to-drafts",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-sms",[[0,"scale-icon-communication-sms",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-spam",[[0,"scale-icon-communication-spam",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-voice-message",[[0,"scale-icon-communication-voice-message",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-2fa-google-auth",[[0,"scale-icon-content-2fa-google-auth",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-achievement",[[0,"scale-icon-content-achievement",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-android",[[0,"scale-icon-content-android",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-apple",[[0,"scale-icon-content-apple",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-applications",[[0,"scale-icon-content-applications",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-available-keychain",[[0,"scale-icon-content-available-keychain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-bank",[[0,"scale-icon-content-bank",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-biometric",[[0,"scale-icon-content-biometric",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-birthday",[[0,"scale-icon-content-birthday",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-bookmark",[[0,"scale-icon-content-bookmark",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-clipboard",[[0,"scale-icon-content-clipboard",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-clock",[[0,"scale-icon-content-clock",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-cloud-security",[[0,"scale-icon-content-cloud-security",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-code-scanner",[[0,"scale-icon-content-code-scanner",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-color-selection",[[0,"scale-icon-content-color-selection",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-country",[[0,"scale-icon-content-country",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-credit-card",[[0,"scale-icon-content-credit-card",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-data-visualisation",[[0,"scale-icon-content-data-visualisation",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-delivery",[[0,"scale-icon-content-delivery",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-digital-banking",[[0,"scale-icon-content-digital-banking",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-digital-media",[[0,"scale-icon-content-digital-media",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-discount",[[0,"scale-icon-content-discount",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-e-sim",[[0,"scale-icon-content-e-sim",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-eu",[[0,"scale-icon-content-eu",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-face-mask",[[0,"scale-icon-content-face-mask",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-features",[[0,"scale-icon-content-features",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-flexible-tariffs",[[0,"scale-icon-content-flexible-tariffs",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-folder",[[0,"scale-icon-content-folder",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-food",[[0,"scale-icon-content-food",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-gender-diverse",[[0,"scale-icon-content-gender-diverse",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-gender-female",[[0,"scale-icon-content-gender-female",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-gender-male",[[0,"scale-icon-content-gender-male",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-half-rating",[[0,"scale-icon-content-half-rating",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-heart",[[0,"scale-icon-content-heart",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-height",[[0,"scale-icon-content-height",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-history",[[0,"scale-icon-content-history",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-hour-glass",[[0,"scale-icon-content-hour-glass",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-iban",[[0,"scale-icon-content-iban",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-id",[[0,"scale-icon-content-id",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-in-stock",[[0,"scale-icon-content-in-stock",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-international",[[0,"scale-icon-content-international",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-international-sms",[[0,"scale-icon-content-international-sms",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-interview",[[0,"scale-icon-content-interview",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-key",[[0,"scale-icon-content-key",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-language",[[0,"scale-icon-content-language",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-lock",[[0,"scale-icon-content-lock",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-loyalty",[[0,"scale-icon-content-loyalty",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-media-folder",[[0,"scale-icon-content-media-folder",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-money-at",[[0,"scale-icon-content-money-at",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-music",[[0,"scale-icon-content-music",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-news",[[0,"scale-icon-content-news",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-out-of-stock",[[0,"scale-icon-content-out-of-stock",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-person-walking",[[0,"scale-icon-content-person-walking",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-prepaid-activate",[[0,"scale-icon-content-prepaid-activate",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-price-tag",[[0,"scale-icon-content-price-tag",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-ratings",[[0,"scale-icon-content-ratings",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-route",[[0,"scale-icon-content-route",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-rss",[[0,"scale-icon-content-rss",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-shop",[[0,"scale-icon-content-shop",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-signal",[[0,"scale-icon-content-signal",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-sim-card",[[0,"scale-icon-content-sim-card",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-smile",[[0,"scale-icon-content-smile",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-sort-indicator-mini-down",[[0,"scale-icon-content-sort-indicator-mini-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-sort-indicator-up-mini",[[0,"scale-icon-content-sort-indicator-up-mini",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-status-inactive",[[0,"scale-icon-content-status-inactive",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-status-recurring",[[0,"scale-icon-content-status-recurring",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-stopwatch",[[0,"scale-icon-content-stopwatch",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-support-chat",[[0,"scale-icon-content-support-chat",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-sustainable",[[0,"scale-icon-content-sustainable",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-tariffs",[[0,"scale-icon-content-tariffs",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-threats",[[0,"scale-icon-content-threats",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-todo-list",[[0,"scale-icon-content-todo-list",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-transport",[[0,"scale-icon-content-transport",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-unlock",[[0,"scale-icon-content-unlock",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-voucher",[[0,"scale-icon-content-voucher",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-waiting",[[0,"scale-icon-content-waiting",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-wallet",[[0,"scale-icon-content-wallet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-add-device",[[0,"scale-icon-device-add-device",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-camera",[[0,"scale-icon-device-camera",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-change-camera",[[0,"scale-icon-device-change-camera",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-computer",[[0,"scale-icon-device-computer",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-controller",[[0,"scale-icon-device-device-controller",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-ethernet",[[0,"scale-icon-device-device-ethernet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-mesh",[[0,"scale-icon-device-device-mesh",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-phone",[[0,"scale-icon-device-device-phone",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-router",[[0,"scale-icon-device-device-router",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-tv",[[0,"scale-icon-device-device-tv",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-watch",[[0,"scale-icon-device-device-watch",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-dongle",[[0,"scale-icon-device-dongle",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-fax",[[0,"scale-icon-device-fax",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-fixed-line-services",[[0,"scale-icon-device-fixed-line-services",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-game-controller",[[0,"scale-icon-device-game-controller",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-media-receiver",[[0,"scale-icon-device-media-receiver",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-mobile-data",[[0,"scale-icon-device-mobile-data",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-mobile-devices-combination",[[0,"scale-icon-device-mobile-devices-combination",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-mobile-equipment",[[0,"scale-icon-device-mobile-equipment",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-mobile-phone-insurance",[[0,"scale-icon-device-mobile-phone-insurance",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-mobile-services",[[0,"scale-icon-device-mobile-services",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-no-camera",[[0,"scale-icon-device-no-camera",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-phone-with-mobile-plan",[[0,"scale-icon-device-phone-with-mobile-plan",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-phone-without-mobile-plan",[[0,"scale-icon-device-phone-without-mobile-plan",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-photo-camera",[[0,"scale-icon-device-photo-camera",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-remote-controller",[[0,"scale-icon-device-remote-controller",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-replacement-mobilephone",[[0,"scale-icon-device-replacement-mobilephone",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-screen-rotate",[[0,"scale-icon-device-screen-rotate",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-server",[[0,"scale-icon-device-server",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-smart-speaker",[[0,"scale-icon-device-smart-speaker",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-tablet",[[0,"scale-icon-device-tablet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-tv-and-mobile",[[0,"scale-icon-device-tv-and-mobile",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-twitching-closed-state",[[0,"scale-icon-device-twitching-closed-state",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-twitching-open-state",[[0,"scale-icon-device-twitching-open-state",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-home",[[0,"scale-icon-home-home",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-internet-at-home",[[0,"scale-icon-home-internet-at-home",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-iot",[[0,"scale-icon-home-iot",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-light-bulb",[[0,"scale-icon-home-light-bulb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-network-secure",[[0,"scale-icon-home-network-secure",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-no-wifi",[[0,"scale-icon-home-no-wifi",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-power-socket",[[0,"scale-icon-home-power-socket",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-preferred-wifi",[[0,"scale-icon-home-preferred-wifi",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-reduced-wifi",[[0,"scale-icon-home-reduced-wifi",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-slow-wifi",[[0,"scale-icon-home-slow-wifi",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-smarthome",[[0,"scale-icon-home-smarthome",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-unable-to-connect-to-router",[[0,"scale-icon-home-unable-to-connect-to-router",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-wifi",[[0,"scale-icon-home-wifi",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-wifi-connected",[[0,"scale-icon-home-wifi-connected",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-wifi-connection-error",[[0,"scale-icon-home-wifi-connection-error",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-wifi-manual-login",[[0,"scale-icon-home-wifi-manual-login",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-wifi-no-wired-internet",[[0,"scale-icon-home-wifi-no-wired-internet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-circle-top-up",[[0,"scale-icon-navigation-circle-top-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-external-link",[[0,"scale-icon-navigation-external-link",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-internal-link",[[0,"scale-icon-navigation-internal-link",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-left-condensed",[[0,"scale-icon-navigation-left-condensed",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-location",[[0,"scale-icon-navigation-location",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-map",[[0,"scale-icon-navigation-map",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-my-location",[[0,"scale-icon-navigation-my-location",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-right-condensed",[[0,"scale-icon-navigation-right-condensed",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-start",[[0,"scale-icon-navigation-start",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-top-up",[[0,"scale-icon-navigation-top-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-process-order-status",[[0,"scale-icon-process-order-status",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-process-processing",[[0,"scale-icon-process-processing",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-process-sepa-transaction",[[0,"scale-icon-process-sepa-transaction",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-devices-service",[[0,"scale-icon-service-devices-service",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-maintanance",[[0,"scale-icon-service-maintanance",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-manual",[[0,"scale-icon-service-manual",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-one-time-password",[[0,"scale-icon-service-one-time-password",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-services",[[0,"scale-icon-service-services",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-support",[[0,"scale-icon-service-support",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-vpn",[[0,"scale-icon-service-vpn",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-2fa-telekom-app",[[0,"scale-icon-t-product-2fa-telekom-app",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-magenta-cloud",[[0,"scale-icon-t-product-magenta-cloud",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-magenta-tv",[[0,"scale-icon-t-product-magenta-tv",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-magentaone",[[0,"scale-icon-t-product-magentaone",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-measure-internet-speed",[[0,"scale-icon-t-product-measure-internet-speed",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-seamless-connectivity",[[0,"scale-icon-t-product-seamless-connectivity",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-telekom-1t1",[[0,"scale-icon-t-product-telekom-1t1",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-telekom-plan",[[0,"scale-icon-t-product-telekom-plan",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-telekom-shop-b",[[0,"scale-icon-t-product-telekom-shop-b",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-usage",[[0,"scale-icon-t-product-usage",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-voice",[[0,"scale-icon-t-product-voice",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-admin",[[0,"scale-icon-user-file-admin",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-analytics",[[0,"scale-icon-user-file-analytics",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-attachment",[[0,"scale-icon-user-file-attachment",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-audio-file",[[0,"scale-icon-user-file-audio-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-billing",[[0,"scale-icon-user-file-billing",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-boy",[[0,"scale-icon-user-file-boy",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-bussines-users",[[0,"scale-icon-user-file-bussines-users",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-communities",[[0,"scale-icon-user-file-communities",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-contacts",[[0,"scale-icon-user-file-contacts",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-contacts-from-cloud",[[0,"scale-icon-user-file-contacts-from-cloud",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-contracts",[[0,"scale-icon-user-file-contracts",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-draft-file",[[0,"scale-icon-user-file-draft-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-families",[[0,"scale-icon-user-file-families",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-family",[[0,"scale-icon-user-file-family",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-file",[[0,"scale-icon-user-file-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-file-collection",[[0,"scale-icon-user-file-file-collection",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-girl",[[0,"scale-icon-user-file-girl",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-handshake",[[0,"scale-icon-user-file-handshake",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-html-file",[[0,"scale-icon-user-file-html-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-id-card",[[0,"scale-icon-user-file-id-card",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-image-file",[[0,"scale-icon-user-file-image-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-logout",[[0,"scale-icon-user-file-logout",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-man",[[0,"scale-icon-user-file-man",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-pdf-file",[[0,"scale-icon-user-file-pdf-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-switch-users",[[0,"scale-icon-user-file-switch-users",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-videos",[[0,"scale-icon-user-file-videos",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-woman",[[0,"scale-icon-user-file-woman",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy",[[0,"scale-icon-weather-cloudy",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy-rain",[[0,"scale-icon-weather-cloudy-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy-sleet",[[0,"scale-icon-weather-cloudy-sleet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy-snow",[[0,"scale-icon-weather-cloudy-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy-thunder-rain",[[0,"scale-icon-weather-cloudy-thunder-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy-thunder-snow",[[0,"scale-icon-weather-cloudy-thunder-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-heavy-sleet",[[0,"scale-icon-weather-heavy-sleet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-heavy-snow",[[0,"scale-icon-weather-heavy-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-clear",[[0,"scale-icon-weather-moon-clear",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-cloudy-a",[[0,"scale-icon-weather-moon-cloudy-a",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-cloudy-b",[[0,"scale-icon-weather-moon-cloudy-b",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-rain",[[0,"scale-icon-weather-moon-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-sleet",[[0,"scale-icon-weather-moon-sleet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-snow",[[0,"scale-icon-weather-moon-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-thunder-rain",[[0,"scale-icon-weather-moon-thunder-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-thunder-snow",[[0,"scale-icon-weather-moon-thunder-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-overcast",[[0,"scale-icon-weather-overcast",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-rain",[[0,"scale-icon-weather-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-sunny",[[0,"scale-icon-weather-sunny",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-thunder-rain",[[0,"scale-icon-weather-thunder-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-thunder-snow",[[0,"scale-icon-weather-thunder-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-list",[[1,"scale-list",{"ordered":[4],"styles":[1]}]]],["scale-list-item",[[1,"scale-list-item",{"ordered":[4],"index":[1026],"marker":[4],"styles":[1],"hasNestedChild":[32],"isNested":[32]}]]],["scale-loading-spinner",[[1,"scale-loading-spinner",{"variant":[1],"alignment":[1],"text":[1],"accessibilityTitle":[1,"accessibility-title"],"size":[1]}]]],["scale-menu-flyout-divider",[[1,"scale-menu-flyout-divider",{"styles":[1]}]]],["scale-sidebar-nav-item",[[1,"scale-sidebar-nav-item",{"condensed":[4],"bold":[4],"active":[1540],"current":[8],"nestingLevel":[2,"nesting-level"],"styles":[1]}]]],["scale-slider",[[1,"scale-slider",{"name":[1],"value":[1538],"range":[4],"valueFrom":[1538,"value-from"],"valueTo":[1538,"value-to"],"min":[2],"max":[2],"step":[2],"showStepMarks":[4,"show-step-marks"],"label":[1],"helperText":[1,"helper-text"],"showValue":[4,"show-value"],"unit":[1],"unitPosition":[1,"unit-position"],"decimals":[2],"platform":[513],"customColor":[1,"custom-color"],"disabled":[4],"trackSmall":[4,"track-small"],"thumbLarge":[4,"thumb-large"],"sliderId":[1025,"slider-id"],"innerAriaValueText":[1,"inner-aria-value-text"],"styles":[1],"position":[32],"positionFrom":[32],"positionTo":[32]}]]],["scale-ssr-slot-fix",[[4,"scale-ssr-slot-fix"]]],["scale-tab-header",[[1,"scale-tab-header",{"disabled":[516],"small":[4],"size":[1],"selected":[4],"styles":[1],"hasFocus":[32]},[[0,"click","handleClick"]]]]],["scale-tab-nav",[[1,"scale-tab-nav",{"small":[4],"size":[1],"styles":[1]},[[0,"scale-select","handleSelect"],[0,"keydown","handleKeydown"]]]]],["scale-tab-panel",[[1,"scale-tab-panel",{"small":[4],"size":[1],"tabbablePanel":[4,"tabbable-panel"],"styles":[1]}]]],["scale-table",[[4,"scale-table",{"showSort":[4,"show-sort"],"size":[1],"striped":[4],"styles":[1]}]]],["scale-telekom-app-shell",[[1,"scale-telekom-app-shell",{"styles":[1]}]]],["scale-telekom-footer-extended-navigation",[[4,"scale-telekom-footer-extended-navigation"]]],["scale-toast",[[1,"scale-toast",{"size":[1],"variant":[1],"opened":[516],"autoHide":[8,"auto-hide"],"animated":[4],"time":[2],"positionTop":[2,"position-top"],"positionRight":[2,"position-right"],"fadeDuration":[2,"fade-duration"],"styles":[513],"progress":[32],"toastHeightWithOffset":[32],"open":[64]}]]],["scale-toggle-button",[[1,"scale-toggle-button",{"size":[1],"background":[1],"colorScheme":[1,"color-scheme"],"variant":[1],"disabled":[4],"selected":[1028],"iconOnly":[4,"icon-only"],"iconPosition":[1537,"icon-position"],"hideBorder":[4,"hide-border"],"radius":[1],"toggleButtonId":[513,"toggle-button-id"],"ariaLabelToggleButton":[1,"aria-label-toggle-button"],"styles":[1],"position":[2],"ariaLangSelected":[1,"aria-lang-selected"],"ariaLangDeselected":[1,"aria-lang-deselected"],"ariaDescriptionTranslation":[1,"aria-description-translation"],"setFocus":[64]}]]],["scale-toggle-group",[[1,"scale-toggle-group",{"size":[1],"background":[1],"fullWidth":[4,"full-width"],"disabled":[4],"hideBorder":[4,"hide-border"],"singleSelect":[4,"single-select"],"ariaLabelTranslation":[1,"aria-label-translation"],"colorScheme":[1,"color-scheme"],"variant":[1],"styles":[1],"status":[32]},[[0,"scaleClick","scaleClickHandler"]]]]],["scale-tooltip",[[1,"scale-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"arrowOffset":[2,"arrow-offset"],"arrowPadding":[2,"arrow-padding"],"opened":[1540],"trigger":[1],"flip":[4],"styles":[1],"mouseOverTooltip":[32],"showTooltip":[64],"hideTooltip":[64]},[[4,"click","handleOutsideClick"]]]]],["scale-app-header",[[4,"scale-app-header",{"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"],"logoClick":[8,"logo-click"],"logoAriaDescribedBy":[1,"logo-aria-described-by"],"claimLang":[1,"claim-lang"],"portalName":[1,"portal-name"],"mainNavigation":[8,"main-navigation"],"iconNavigation":[8,"icon-navigation"],"userNavigation":[8,"user-navigation"],"sectorNavigation":[8,"sector-navigation"],"addonNavigation":[8,"addon-navigation"],"activeRouteId":[1,"active-route-id"],"activeSectorId":[1,"active-sector-id"],"sticky":[4],"userMenuAriaLabel":[1,"user-menu-aria-label"],"isMegaMenuVisible":[4,"is-mega-menu-visible"],"megaMenuVisible":[4,"mega-menu-visible"],"isMobileMenuVisible":[4,"is-mobile-menu-visible"],"mobileMenuVisible":[4,"mobile-menu-visible"],"activeSegment":[32],"mobileMenu":[32],"userMenu":[32],"userMenuMobile":[32],"visibleMegaMenu":[32],"scrolled":[32]},[[9,"scroll","onScroll"],[0,"closeMenu","handleCloseMenu"],[0,"scale-close","handleCloseUserMenu"],[0,"scale-open","handleOpenUserMenu"]]]]],["scale-card",[[1,"scale-card",{"to":[1],"label":[1],"target":[1],"rel":[1],"styles":[1]}]]],["scale-icon-action-favorite",[[0,"scale-icon-action-favorite",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-telekom-footer_2",[[1,"scale-telekom-footer-content",{"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"]}],[4,"scale-telekom-footer",{"type":[513]}]]],["duet-date-picker_2",[[0,"duet-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"value":[513],"min":[1],"max":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"dateAdapter":[16],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]],[0,"scale-icon-content-calendar",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-collapse-up",[[0,"scale-icon-navigation-collapse-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-link",[[1,"scale-link",{"disabled":[4],"omitUnderline":[4,"omit-underline"],"href":[1],"download":[1],"iconPosition":[1,"icon-position"],"hreflang":[1],"ping":[1],"referrerpolicy":[1],"rel":[1],"target":[1],"type":[1],"innerTabindex":[2,"inner-tabindex"],"styles":[1],"setFocus":[64]}]]],["scale-icon-navigation-double-left_2",[[0,"scale-icon-navigation-double-left",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-navigation-double-right",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-checkbox_2",[[4,"scale-checkbox",{"name":[1],"label":[1],"ariaLabelCheckbox":[1,"aria-label-checkbox"],"hideLabel":[4,"hide-label"],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"disabled":[516],"checked":[1540],"indeterminate":[1540],"value":[1],"inputId":[1025,"input-id"],"styles":[1],"required":[4]}],[0,"scale-icon-action-minus",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-close",[[0,"scale-icon-action-close",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-helper-text",[[1,"scale-helper-text",{"helperText":[1,"helper-text"],"styles":[1],"variant":[1]}]]],["scale-icon-navigation-collapse-down",[[0,"scale-icon-navigation-collapse-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-circle-close_2",[[0,"scale-icon-alert-warning",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-action-circle-close",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-checkmark",[[0,"scale-icon-action-checkmark",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-left",[[0,"scale-icon-navigation-left",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-right",[[0,"scale-icon-navigation-right",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-badge_12",[[1,"scale-telekom-header",{"appName":[513,"app-name"],"appNameLink":[1,"app-name-link"],"appNameClick":[8,"app-name-click"],"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"],"type":[1],"metaNavAriaLabel":[1,"meta-nav-aria-label"],"metaNavExternalAriaLabel":[1,"meta-nav-external-aria-label"],"langSwitcherAriaLabel":[1,"lang-switcher-aria-label"],"mainNavAriaLabel":[1,"main-nav-aria-label"],"scrolled":[32],"scrolledBack":[32],"pageYOffset":[32]},[[5,"scroll","onScroll"]]],[1,"scale-telekom-mega-menu-column",{"headingLevel":[2,"heading-level"],"headingHasLink":[32]}],[1,"scale-telekom-mobile-flyout-canvas",{"appName":[1,"app-name"],"appNameLink":[1,"app-name-link"],"appNameClick":[8,"app-name-click"],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"]}],[1,"scale-telekom-mobile-menu",{"backButtonTitle":[1,"back-button-title"],"appName":[1,"app-name"],"appNameLink":[1,"app-name-link"],"appNameClick":[8,"app-name-click"],"currentLevel":[32]},[[0,"scale-set-menu-item-active","handleSetMenuItemActive"],[0,"scale-set-menu-item-open","handleSetMenuItemOpen"]]],[1,"scale-telekom-mobile-menu-item",{"open":[4],"active":[4],"level":[1],"currentLevel":[1,"current-level"]}],[1,"scale-badge",{"count":[2],"label":[1],"labelVisuallyHidden":[4,"label-visually-hidden"],"ariaLabelTranslation":[1,"aria-label-translation"]}],[0,"scale-icon-action-menu",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-user-file-user",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[4,"scale-telekom-mega-menu",{"childrenTooMany":[32]}],[1,"scale-telekom-nav-flyout",{"expanded":[1540],"triggerSelector":[1,"trigger-selector"],"variant":[1],"hover":[4],"isExpanded":[32],"animationState":[32],"show":[64],"hide":[64]},[[8,"keydown","handleWindowKeydown"],[0,"scale-close-nav-flyout","handleScaleCloseNavFlyout"],[4,"click","handleDocumentClick"]]],[4,"scale-telekom-nav-item",{"active":[516],"variant":[513],"role":[513],"hideOnMobile":[516,"hide-on-mobile"],"hideOnDesktop":[516,"hide-on-desktop"]}],[4,"scale-telekom-nav-list",{"role":[513],"alignment":[513],"variant":[513]},[[0,"scale-expanded","handleScaleExpanded"]]]]],["scale-dropdown-select_13",[[1,"scale-dropdown-select",{"comboboxId":[1,"combobox-id"],"label":[1],"name":[1],"helperText":[1,"helper-text"],"disabled":[4],"readonly":[4],"transparent":[4],"invalid":[4],"variant":[1],"value":[1544],"floatingStrategy":[1,"floating-strategy"],"hideLabelVisually":[4,"hide-label-visually"],"ariaLabelSelected":[1,"aria-label-selected"],"hcmLabelDisabled":[1,"hcm-label-disabled"],"options":[32],"open":[32],"currentIndex":[32],"queryString":[32],"queryTimeout":[32],"hasFocus":[32]}],[1,"scale-pagination",{"hideBorders":[4,"hide-borders"],"hideBorder":[4,"hide-border"],"pageSize":[2,"page-size"],"startElement":[2,"start-element"],"totalElements":[2,"total-elements"],"styles":[1],"small":[4],"size":[1],"ariaLabelFirstPage":[1,"aria-label-first-page"],"ariaLabelNextPage":[1,"aria-label-next-page"],"ariaLabelPreviousPage":[1,"aria-label-previous-page"],"ariaLabelLastPage":[1,"aria-label-last-page"]}],[0,"scale-text-field",{"type":[1],"inputModeType":[1,"input-mode-type"],"name":[1],"label":[1],"size":[1],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"variant":[1],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"max":[2],"min":[2],"placeholder":[1],"disabled":[4],"readonly":[4],"required":[4],"counter":[4],"value":[1032],"inputId":[1,"input-id"],"transparent":[4],"step":[1],"list":[1],"inputAutofocus":[4,"input-autofocus"],"inputAutocomplete":[1,"input-autocomplete"],"ariaDetailedId":[1,"aria-detailed-id"],"hideLabelVisually":[4,"hide-label-visually"],"styles":[1],"experimentalControlled":[4,"experimental-controlled"],"hasFocus":[32],"forceUpdate":[32]}],[1,"scale-menu-flyout-item",{"cascade":[4],"active":[516],"checkable":[1],"checked":[1540],"disabled":[516],"value":[513],"styles":[1],"triggerEvent":[64]}],[1,"scale-progress-bar",{"busy":[4],"percentage":[2],"percentageStart":[2,"percentage-start"],"customColor":[1,"custom-color"],"showStatus":[4,"show-status"],"icon":[1],"statusDescription":[1,"status-description"],"hasError":[4,"has-error"],"disabled":[4],"progressBarId":[1,"progress-bar-id"],"label":[1],"mute":[4],"styles":[1]}],[0,"scale-switch",{"checked":[1540],"disabled":[4],"name":[1],"inputId":[1025,"input-id"],"label":[1],"styles":[1],"size":[1]}],[1,"scale-tag",{"size":[1],"type":[1],"color":[1],"href":[1],"target":[1],"dismissable":[4],"disabled":[4],"dismissText":[1,"dismiss-text"],"styles":[1]}],[1,"scale-dropdown-select-item",{"selected":[4],"focused":[4],"value":[520],"disabled":[516]}],[0,"scale-icon-action-hide-password",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-action-sort",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-content-sort-indicator-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-content-sort-indicator-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-service-settings",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-button_3",[[1,"scale-menu-flyout",{"closeOnSelect":[4,"close-on-select"],"direction":[1],"styles":[1]},[[0,"scale-open","handleScaleOpen"],[0,"scale-select","handleScaleSelect"],[0,"scale-close","handleScaleClose"],[9,"scroll","handleWindowScroll"],[4,"click","handleOutsideClick"],[0,"keydown","handleKeydown"]]],[1,"scale-menu-flyout-list",{"opened":[1540],"trigger":[16],"direction":[1025],"active":[1540],"closeOnSelect":[4,"close-on-select"],"brandHeaderDropdown":[4,"brand-header-dropdown"],"styles":[1],"forceRender":[32],"open":[64],"close":[64],"setFocus":[64]},[[9,"resize","handleResize"],[0,"keydown","handleKeydown"],[0,"click","handleClick"],[0,"scale-select","handleScaleSelect"],[0,"scale-open","handleScaleOpen"]]],[1,"scale-button",{"size":[1],"variant":[1],"disabled":[4],"type":[1],"name":[1],"value":[1],"iconOnly":[4,"icon-only"],"iconPosition":[513,"icon-position"],"href":[1],"target":[1],"styles":[1],"download":[1],"innerTabindex":[2,"inner-tabindex"],"innerAriaLabel":[1,"inner-aria-label"],"setFocus":[64]},[[2,"click","handleHostClick"]]]]],["scale-logo_2",[[1,"scale-logo",{"variant":[1],"transparent":[4],"language":[1],"size":[2],"href":[1],"accessibilityTitle":[1,"accessibility-title"],"styles":[1],"focusable":[4],"scrollIntoViewOnFocus":[4,"scroll-into-view-on-focus"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"],"logoAriaDescribedBy":[1,"logo-aria-described-by"],"logoAriaHidden":[4,"logo-aria-hidden"]}],[0,"scale-logo-svg",{"color":[1],"innerRole":[1,"inner-role"],"focusable":[4],"accessibilityTitle":[1,"accessibility-title"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"]}]]],["app-mega-menu_8",[[0,"app-navigation-main-mobile",{"hide":[16],"navigation":[16],"activeRouteId":[1,"active-route-id"],"selected":[32],"parent":[32]}],[4,"scale-nav-icon",{"isActive":[4,"is-active"],"active":[4],"href":[1],"clickLink":[8,"click-link"],"icon":[1],"isMobileMenuOpen":[4,"is-mobile-menu-open"],"mobileMenuOpen":[4,"mobile-menu-open"],"refMobileMenuToggle":[8,"ref-mobile-menu-toggle"],"refMobileUserMenuToggle":[8,"ref-mobile-user-menu-toggle"],"refUserMenuToggle":[8,"ref-user-menu-toggle"],"badge":[4],"badgeLabel":[2,"badge-label"]}],[4,"app-mega-menu",{"navigation":[16],"hide":[16],"activeRouteId":[1,"active-route-id"],"isActive":[4,"is-active"],"active":[4]}],[0,"app-navigation-sector-mobile",{"hide":[16],"navigation":[16],"activeSectorId":[1,"active-sector-id"],"selected":[32]}],[4,"scale-nav-main",{"isActive":[4,"is-active"],"active":[4],"popup":[4],"isMegaMenuVisible":[4,"is-mega-menu-visible"],"megaMenuVisible":[4,"mega-menu-visible"],"href":[1],"name":[1],"target":[1],"innerId":[1,"inner-id"],"clickLink":[8,"click-link"]}],[4,"scale-nav-segment",{"isActive":[4,"is-active"],"active":[4],"href":[1]}],[1,"app-navigation-user-menu",{"hide":[16],"navigation":[8]}],[1,"scale-notification-badge",{"label":[2],"maxCharacters":[2,"max-characters"],"type":[1],"clickHandler":[8,"click-handler"]}]]],["scale-icon-action-success_3",[[0,"scale-icon-action-success",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-alert-information",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-alert-error",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]]]'),options)}))};!function(){if("undefined"!=typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)},HTMLElement.prototype=a.prototype,HTMLElement.prototype.constructor=HTMLElement,Object.setPrototypeOf(HTMLElement,a)}}();var preview=__webpack_require__("../../node_modules/@storybook/addon-viewport/dist/esm/preview.js");vue_esm.a.config.productionTip=!1,vue_esm.a.config.ignoredElements=[/scale-\w*/],function applyPolyfills(){var promises=[];if("undefined"!=typeof window){var win=window;win.customElements&&(!win.Element||win.Element.prototype.closest&&win.Element.prototype.matches&&win.Element.prototype.remove&&win.Element.prototype.getRootNode)||promises.push(__webpack_require__.e(409).then(__webpack_require__.t.bind(null,"../components/dist/esm/polyfills/dom.js",7)));"function"==typeof Object.assign&&Object.entries&&Array.prototype.find&&Array.prototype.includes&&String.prototype.startsWith&&String.prototype.endsWith&&(!win.NodeList||win.NodeList.prototype.forEach)&&win.fetch&&function checkIfURLIsSupported(){try{var u=new URL("b","http://a");return u.pathname="c%20d","http://a/c%20d"===u.href&&u.searchParams}catch(e){return!1}}()&&"undefined"!=typeof WeakMap||promises.push(Promise.all([__webpack_require__.e(2),__webpack_require__.e(408)]).then(__webpack_require__.t.bind(null,"../components/dist/esm/polyfills/core-js.js",7)))}return Promise.all(promises)}().then((function(){loader_defineCustomElements(window)}));var parameters={a11y:{config:{rules:[{id:"list",enabled:!1},{id:"listitem",enabled:!1},{id:"color-contrast",enabled:!1}]}},viewport:{viewports:preview.a},viewMode:"docs",options:{storySort:{order:["Scale Design System","FAQ","New Release",["Release Notes","Sketch Library Update"],"Setup & Info",["Getting Started For Designers","Getting Started For Developers","Scale and Vue","Scale and Angular","Scale and React","Accessibility","Browser Support"],"Guidelines",["Design Tokens","Light and Dark Mode","Customization and Themes","Grid","Spacings","Typography","Colors","Shadows"],"Update History",["Design","Development"],"Components","Beta Components","Deprecated Components","Contact","Legal",["Disclaimer","Legal Notice","Privacy"]]}}};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}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":case"argTypes":return esm.a.warn("Invalid args/argTypes in config, ignoring.",JSON.stringify(value));case"decorators":return value.forEach((function(decorator){return Object(ClientApi.d)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(ClientApi.e)(loader,!1)}));case"parameters":return Object(ClientApi.f)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.b)(enhancer)}));case"argsEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.c)(enhancer)}));case"render":return Object(ClientApi.g)(value);case"globals":case"globalTypes":var v={};return v[key]=value,Object(ClientApi.f)(v,!1);case"__namedExportsOrder":case"decorateStory":case"renderToDOM":return null;default:return console.log(key+" was not supported :( !")}}))},"./generated-stories-entry.js":function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__("./node_modules/@storybook/vue/dist/esm/client/index.js").configure)([__webpack_require__("./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$")],module,!1)}).call(this,__webpack_require__("../../node_modules/webpack/buildin/module.js")(module))},"./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$":function(module,exports,__webpack_require__){var map={"./5_legal/Disclaimer.stories.mdx":"./stories/5_legal/Disclaimer.stories.mdx","./5_legal/LegalNotice.stories.mdx":"./stories/5_legal/LegalNotice.stories.mdx","./5_legal/Privacy.stories.mdx":"./stories/5_legal/Privacy.stories.mdx","./FAQ.stories.mdx":"./stories/FAQ.stories.mdx","./Index.stories.mdx":"./stories/Index.stories.mdx","./components/accordion/Accordion.stories.mdx":"./stories/components/accordion/Accordion.stories.mdx","./components/breadcrumb/Breadcrumb.stories.mdx":"./stories/components/breadcrumb/Breadcrumb.stories.mdx","./components/button/Button.stories.mdx":"./stories/components/button/Button.stories.mdx","./components/callout/Callout.stories.mdx":"./stories/components/callout/Callout.stories.mdx","./components/card/Card.stories.mdx":"./stories/components/card/Card.stories.mdx","./components/checkbox-group/CheckboxGroup.stories.mdx":"./stories/components/checkbox-group/CheckboxGroup.stories.mdx","./components/checkbox/Checkbox.stories.mdx":"./stories/components/checkbox/Checkbox.stories.mdx","./components/chip/Chip.stories.mdx":"./stories/components/chip/Chip.stories.mdx","./components/data-grid/DataGrid.stories.mdx":"./stories/components/data-grid/DataGrid.stories.mdx","./components/date-picker/DatePicker.stories.mdx":"./stories/components/date-picker/DatePicker.stories.mdx","./components/divider/Divider.stories.mdx":"./stories/components/divider/Divider.stories.mdx","./components/dropdown-select/DropdownSelect.stories.mdx":"./stories/components/dropdown-select/DropdownSelect.stories.mdx","./components/dropdown/DropDown.stories.mdx":"./stories/components/dropdown/DropDown.stories.mdx","./components/flyout-menu/MenuFlyout.stories.mdx":"./stories/components/flyout-menu/MenuFlyout.stories.mdx","./components/icon/Icon.stories.mdx":"./stories/components/icon/Icon.stories.mdx","./components/link/Link.stories.mdx":"./stories/components/link/Link.stories.mdx","./components/list/List.stories.mdx":"./stories/components/list/List.stories.mdx","./components/loading-spinner/LoadingSpinner.stories.mdx":"./stories/components/loading-spinner/LoadingSpinner.stories.mdx","./components/logo/Logo.stories.mdx":"./stories/components/logo/Logo.stories.mdx","./components/modal/Modal.stories.mdx":"./stories/components/modal/Modal.stories.mdx","./components/notification-badge/NotificationBadge.stories.mdx":"./stories/components/notification-badge/NotificationBadge.stories.mdx","./components/notification/Notification.stories.mdx":"./stories/components/notification/Notification.stories.mdx","./components/pagination/Pagination.stories.mdx":"./stories/components/pagination/Pagination.stories.mdx","./components/progress-bar/ProgressBar.stories.mdx":"./stories/components/progress-bar/ProgressBar.stories.mdx","./components/radio-button-group/RadioButtonGroup.stories.mdx":"./stories/components/radio-button-group/RadioButtonGroup.stories.mdx","./components/rating-stars/RatingStars.stories.mdx":"./stories/components/rating-stars/RatingStars.stories.mdx","./components/segmented-button/SegmentedButton.stories.mdx":"./stories/components/segmented-button/SegmentedButton.stories.mdx","./components/sidebar-navigation/SidebarNav.stories.mdx":"./stories/components/sidebar-navigation/SidebarNav.stories.mdx","./components/slider/Slider.stories.mdx":"./stories/components/slider/Slider.stories.mdx","./components/switch/switch.stories.mdx":"./stories/components/switch/switch.stories.mdx","./components/tab-navigation/TabNav.stories.mdx":"./stories/components/tab-navigation/TabNav.stories.mdx","./components/table/Table.stories.mdx":"./stories/components/table/Table.stories.mdx","./components/tag/Tag.stories.mdx":"./stories/components/tag/Tag.stories.mdx","./components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx":"./stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx","./components/telekom-footer/TelekomFooter.stories.mdx":"./stories/components/telekom-footer/TelekomFooter.stories.mdx","./components/text-area/TextArea.stories.mdx":"./stories/components/text-area/TextArea.stories.mdx","./components/text-field/TextField.stories.mdx":"./stories/components/text-field/TextField.stories.mdx","./components/tooltip/Tooltip.stories.mdx":"./stories/components/tooltip/Tooltip.stories.mdx","./contact/Contributing.stories.mdx":"./stories/contact/Contributing.stories.mdx","./contact/Feedback.stories.mdx":"./stories/contact/Feedback.stories.mdx","./deprecated/brand-header-navigation/BrandHeader.stories.mdx":"./stories/deprecated/brand-header-navigation/BrandHeader.stories.mdx","./deprecated/footer/Footer.stories.mdx":"./stories/deprecated/footer/Footer.stories.mdx","./deprecated/notification-banner/NotificationBanner.stories.mdx":"./stories/deprecated/notification-banner/NotificationBanner.stories.mdx","./deprecated/notification-message/NotificationMessage.stories.mdx":"./stories/deprecated/notification-message/NotificationMessage.stories.mdx","./deprecated/notification-toast/NotificationToast.stories.mdx":"./stories/deprecated/notification-toast/NotificationToast.stories.mdx","./deprecated/toggle-group/ToggleGroup.stories.mdx":"./stories/deprecated/toggle-group/ToggleGroup.stories.mdx","./guidelines/Colors.stories.mdx":"./stories/guidelines/Colors.stories.mdx","./guidelines/DesignTokens.stories.mdx":"./stories/guidelines/DesignTokens.stories.mdx","./guidelines/Grid.stories.mdx":"./stories/guidelines/Grid.stories.mdx","./guidelines/LightAndDarkMode.stories.mdx":"./stories/guidelines/LightAndDarkMode.stories.mdx","./guidelines/Shadows.stories.mdx":"./stories/guidelines/Shadows.stories.mdx","./guidelines/Spacing.stories.mdx":"./stories/guidelines/Spacing.stories.mdx","./guidelines/Theming.stories.mdx":"./stories/guidelines/Theming.stories.mdx","./guidelines/Typography.stories.mdx":"./stories/guidelines/Typography.stories.mdx","./new_release/SketchLibrary.stories.mdx":"./stories/new_release/SketchLibrary.stories.mdx","./setup_and_info/Accessibility.stories.mdx":"./stories/setup_and_info/Accessibility.stories.mdx","./setup_and_info/Browser_Support.stories.mdx":"./stories/setup_and_info/Browser_Support.stories.mdx","./setup_and_info/GettingStartedForDesigners.stories.mdx":"./stories/setup_and_info/GettingStartedForDesigners.stories.mdx","./setup_and_info/GettingStartedForDevelopers.stories.mdx":"./stories/setup_and_info/GettingStartedForDevelopers.stories.mdx","./setup_and_info/ScaleAndAngular.stories.mdx":"./stories/setup_and_info/ScaleAndAngular.stories.mdx","./setup_and_info/ScaleAndReact.stories.mdx":"./stories/setup_and_info/ScaleAndReact.stories.mdx","./setup_and_info/ScaleAndVue.stories.mdx":"./stories/setup_and_info/ScaleAndVue.stories.mdx","./update_history/Design.stories.mdx":"./stories/update_history/Design.stories.mdx","./update_history/Development.stories.mdx":"./stories/update_history/Development.stories.mdx"};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="./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},"./stories/5_legal/Disclaimer.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("../../node_modules/@storybook/addon-docs/blocks.js"),Disclaimer_en="# Disclaimer\n\nDeutsche Telekom AG does not guarantee that the information provided on this website is complete, correct, or in any case up to date. This also applies to all links which this website refers to directly or indirectly. Deutsche Telekom AG is not responsible for the content of any page accessed via such a link.\n\nDeutsche Telekom AG reserves the right to make changes or additions to the information provided without prior notice. Providing this information by Deutsche Telekom AG does not constitute a contractual offer for information, advice, or similar contractual relationships. Any liability is excluded for the use of the content of the website or the correctness of the content or the accessibility of the website. Therefore, Deutsche Telekom AG shall not be liable for any special, indirect, or consequential damages or any damages whatsoever resulting from loss of use, data, or profits, whether in an action of contract, negligence, or other tortious action, arising out of or in connection with the use or performance of documents or information available from this website.\n\n© 2022 and provider within the meaning of the MDStV:\n\nDeutsche Telekom AG<br>\nFriedrich-Ebert-Allee 140<br>\n53113 Bonn\n",Disclaimer_de="# Haftungsausschluss\n\nDie Deutsche Telekom AG übernimmt keine Garantie dafür, dass die auf dieser Webseite bereitgestellten Informationen vollständig, richtig und in jedem Fall aktuell sind. Dies gilt auch für alle Links, auf die diese Webseite direkt oder indirekt verweist. Die Deutsche Telekom AG ist nicht verantwortlich für den Inhalt von Seiten, die über einen solchen Link erreicht werden.\n\nDie Deutsche Telekom AG behält sich das Recht vor, ohne Ankündigung Änderungen oder Ergänzungen der bereitgestellten Informationen vorzunehmen. Die Bereitstellung dieser Informationen stellt von Seiten der Deutschen Telekom AG kein vertragliches Angebot für Auskünfte, Beratung oder ähnliche Vertragsbeziehungen dar. Jegliche Haftung für die Nutzung und Richtigkeit der Webseiteninhalte sowie die Verfügbarkeit der Webseite ist ausgeschlossen. Die Deutsche Telekom AG haftet deshalb nicht für besondere, indirekte oder Folgeschäden oder jegliche Schäden, die aus Nutzungsausfall, Verlust von Daten oder entgangenem Gewinn resultieren, gleich ob durch eine Vertragshandlung oder durch Fahrlässigkeit oder sonstige unerlaubte Handlung, und die aus oder in Zusammenhang mit der Nutzung von auf dieser Website verfügbaren Dokumenten oder Informationen entstehen.\n\n© 2022 und Anbieter im Sinne des Staatsvertrages über Mediendienste (MDStV):\n\nDeutsche Telekom AG<br>\nFriedrich-Ebert-Allee 140<br>\n53113 Bonn\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.c,{title:"Legal/Disclaimer",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?Disclaimer_en:Disclaimer_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Legal/Disclaimer",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?Disclaimer_en:Disclaimer_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/5_legal/LegalNotice.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("../../node_modules/@storybook/addon-docs/blocks.js"),LegalNotice_en="# Legal Notice\n\nBrand & Design is a service offered by Telekom Customer Experience Management as well as Brand Strategy and Marketing Communications, Deutsche Telekom AG.\n\nDeutsche Telekom AG<br>\nFriedrich-Ebert-Allee 140<br>\n53113 Bonn\nE-Mail: [contact-NOSPAM-brand-design.telekom.com](mailto:contact-NOSPAM-brand-design.telekom.com)<br>\nPhone: +49 228 181-24299\n\n**Commercial Register:**\nBonn District Court (Amtsgericht) HRB 6794,<br>\nRegistered Office, Bonn,<br>\nVAT ID: DE 123475223, WEEE Reg. No. DE50478376\n\n## Authorized Representatives\n\nTimotheus Höttges<br>\nAdel Al-Saleh<br>\nBirgit Bohle<br>\nSrinivasan Gopalan<br>\nDr. Christian P. Illek<br>\nThorsten Langheim<br>\nDominique Leroy<br>\nClaudia Nemat<br>\n\n## Regulatory Authority\n\nFederal Network Agency for Electricity, Gas, Telecommunications, Post and Railway<br>\nTulpenfeld 4<br>\n53113 Bonn\nGermany\n\n## Responsible\n\nOle Heydekamp<br>\nLead Customer Experience Management<br>\n\nAlexander Engelhardt<br>\nVice President Brand Management\n",LegalNotice_de="# Impressum\n\nBrand & Design ist ein Dienst der Bereiche Telekom „Customer Experience Management“ und „Group Brand Strategy and Marketing Communications“ der Deutschen Telekom AG.\n\nDeutsche Telekom AG<br>\nFriedrich-Ebert-Allee 140<br>\n53113 Bonn\n\nE-Mail: [contact-NOSPAM-brand-design.telekom.com](mailto:contact-NOSPAM-brand-design.telekom.com)<br>\nPhone: +49 228 181-24299\n\n**Handelsregister:**\nAmtsgericht Bonn HRB 6794<br>\nSitz der Gesellschaft: Bonn<br>\nUSt-IdNr. DE 123475223<br>\nWEEE-Reg.-Nr. DE50478376\n\n## Vertretungsberechtigt\n\nTimotheus Höttges<br>\nAdel Al-Saleh<br>\nBirgit Bohle<br>\nSrinivasan Gopalan<br>\nDr. Christian P. Illek<br>\nThorsten Langheim<br>\nDominique Leroy<br>\nClaudia Nemat<br>\n\n## Aufsichtsbehörde\n\nBundesnetzagentur für Elektrizität, Gas, Telekommunikation, Post und Eisenbahnen\nTulpenfeld 4<br>\n53113 Bonn\n\n## Verantwortlich\n\nOle Heydekamp<br>\nLeiter Customer Experience Management<br>\n\nAlexander Engelhardt<br>\nLeiter Markenmanagement\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.c,{title:"Legal/Legal Notice",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?LegalNotice_en:LegalNotice_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Legal/Legal Notice",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?LegalNotice_en:LegalNotice_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/5_legal/Privacy.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("../../node_modules/@storybook/addon-docs/blocks.js"),Privacy_en='# Data Privacy Policy\n\nDeutsche Telekom AG attaches great importance to protecting your personal data. We always inform you what personal data we collect, how your data is used, and how you can influence the process.\n\n## 1. What data is recorded, how is it used, and how long is it stored?\n\nWe will only collect technical characteristics: When you visit our websites, the web server temporarily records the domain name or your computer’s IP address, the file requested by the client (file name and URL), the http response code, and the website from which you are visiting us. The recorded data is used solely for data security purposes, particularly to protect against attempted attacks on our web server (Article 6 (1f) GDPR). We do not use it to create individual user profiles nor do we share this information with third parties. It is erased after seven days at the latest. We reserve the right to statistically analyze anonymized data records.\n\n## 2. Controlling data used by social media plug-ins and links to social media platforms\n\nNo social media plug-ins are used, and no links to social media platforms are provided.\n\n## 3. Will my usage habits be evaluated, e.g. for advertising purposes or tracking?\n\nWe want you to enjoy using our websites and take advantage of our products and services. We have an economic interest in ensuring this is the case. We analyze usage habits anonymously and pseudonymously so you can find the products that interest you and so we can make our websites user-friendly. We, or our contract service providers, create usage profiles that comply with the legal requirements. This information cannot be traced back to you directly. The following information is intended to provide you with general information on the various purposes, techniques, storage periods, and processing countries of this data.\n\n### Technology\n\n### Required cookies\n\nThese cookies are required to enable you to navigate through the web pages and use key functions. They support basic functions to ensure access to secure areas of the website. The legal basis for these cookies is Article 6 (1) b GDPR, or for third countries Article 49 (1) b GDPR.\n\n| Firma     | Purpose          | Expires / Max-Age | Location |\n| --------- | ---------------- | ----------------- | -------- |\n| T-Systems | Session ID / WAF | Session cookie    | Germany  |\n\n## 4. Where can I find the information that is important to me?\n\nThis data privacy information provides an overview of the items which apply to Deutsche Telekom AG processing your data in this web portal. Further information, including information on data protection in general and in specific products, is available at https://www.telekom.com/en/corporate-responsibility/data-protection-data-security/data-protection and http://www.telekom.de/datenschutzhinweise.\n\n## 5. Who is responsible for data processing? Who should I contact if I have any queries regarding data privacy at Deutsche Telekom AG?\n\nDeutsche Telekom AG acts as the data controller. If you have any queries, please contact our Customer Service department or the Global Data Privacy Officer, Dr. Claus D. Ulmer, Friedrich-Ebert-Allee 140, 53113 Bonn, Germany, datenschutz@telekom.de.\n\n## 6. What rights do I have?\n\nYou have the right:\n\n<ol type="a">\n  <li>to request <b>information</b> on the categories of personal data concerned, the purposes of the processing, any recipients of the data, and the envisaged storage period (Article 15 GDPR);</li>\n  <li>to request that incorrect or incomplete data be <b>rectified</b> or supplemented (Article 16 GDPR);</li>\n  <li>to <b>withdraw</b> consent at any time with effect for the future (Article 7 (3) GDPR);</li>\n  <li>to <b>object</b> to the processing of data on the grounds of legitimate interests, for reasons relating to your particular situation (Article 21 (1) GDPR);</li>\n  <li>to request the <b>erasure</b> of data in certain cases under Article 17 GDPR – especially if the data is no longer necessary in relation to the purposes for which it was collected or is unlawfully processed, or you withdraw your consent according to (c) above or object according to (d) above;</li>\n  <li>to demand, under certain circumstances, the <b>restriction</b> of data where erasure is not possible or the erasure obligation is disputed (Article 18 GDPR);</li>\n  <li>to <b>data portability</b>, i.e., you can receive the data that you provided to us in a commonly used and machine-readable format such as CSV, and can, where necessary, transfer the data to others (Article 20 GDPR);</li>\n  <li>to <b>file a complaint about the data processing</b> with the responsible <b>supervisory authority</b> (for telecommunications contracts: the German Federal Commissioner for Data Protection and Freedom of Information (Bundesbeauftragter für den Datenschutz und die Informationsfreiheit); for any other matters: State Commissioner for Data Protection and Freedom of Information, North Rhine-Westphalia (Landesbeauftragter für den Datenschutz und die Informationsfreiheit Nordrhein-Westfalen)).</li>\n</ol>\n\n## 7. Who does Deutsche Telekom AG pass my data on to?\n\nWe will only pass your data **owing to legal obligations:** In certain cases, we are legally obliged to transfer certain data to a state authority that requests it.\n\n## 8. Where is my data processed?\n\nYour data will be processed in Germany and other European countries. If, in exceptional cases, your data is processed in countries outside the European Union (in so-called third countries), this will take place:\n\n<ol type="a">\n  <li>if you have expressly consented to this (Article 49 (1) a GDPR). (In most countries outside the EU, the level of data protection does not meet EU standards. This concerns in particular comprehensive monitoring and control rights of state authorities, e.g. in the USA, which disproportionately interfere with the data protection of European citizens,</li>\n  <li>or to the extent necessary for our service provision to you (Article 49 (1) b GDPR),</li>\n  <li>or to the extent required by law (Article 49 (1) c GDPR).</li>\n</ol>\n\nFurthermore, your data will only be processed in third countries if certain measures ensure a suitable level of data protection (e.g., EU Commission\'s adequacy decision or suitable guarantees, Article 44 et seq. GDPR).\n\n**© Deutsche Telekom AG – April 2022**\n',Privacy_de='# Datenschutzhinweise\n\nDer Schutz deiner personenbezogenen Daten hat für die Deutsche Telekom AG einen hohen Stellenwert. Wir informieren dich stets darüber, welche personenbezogenen Daten erfasst werden, wie wir diese verwenden und welche Gestaltungsmöglichkeiten du dabei hast.\n\n## 1. Welche Daten werden erfasst, wie werden sie verwendet und wie lange werden sie gespeichert?\n\nWir erfassen lediglich **technische Merkmale**: Wenn du unsere Webseiten besuchst, erfasst der Webserver vorübergehend den Domain-Namen oder die IP-Adresse deines Computers, die Dateianfrage des Clients (Dateiname und URL), den http-Antwort-Code und die Webseite, von der aus du unsere Seite aufrufst. Die erfassten Daten werden ausschließlich für Zwecke der Datensicherheit, insbesondere zur Abwehr von Angriffsversuchen auf unseren Webserver verwendet (Art. 6 Abs.1f DSGVO). Sie werden weder für die Erstellung von individuellen Nutzerprofilen verwendet noch an Dritte weitergegeben. Die Daten werden nach spätestens sieben Tagen wieder gelöscht. Wir behalten uns das Recht vor, anonymisierte Datensätze statistisch auszuwerten.\n\n## 2. Kontrolle der von Social-Media-Plugins verwendeten Daten und bei Verlinkungen zu Social-Media-Plattformen\n\nWir verwenden keine Social-Media-Plugins und verlinken nicht auf Social-Media-Plattformen.\n\n## 3. Wird mein Nutzungsverhalten ausgewertet, z. B. für Werbung, Tracking oder Betrugsprävention?\n\nWir möchten, dass du unsere Webseiten gerne nutzt und unsere Produkte und Dienste in Anspruch nimmst. Daran haben wir ein wirtschaftliches Interesse. Damit du die Informationen findest, die dich interessieren und wir unsere Webseiten nutzerfreundlich ausgestalten können, analysieren wir anonymisiert und pseudonymisiert das Nutzungsverhalten. Im Rahmen der gesetzlichen Regelungen legen wir, oder von uns im Rahmen einer Auftragsverarbeitung beauftragte Unternehmen, Nutzungsprofile an. Ein unmittelbarer Rückschluss auf deine Person ist dabei nicht möglich. Nachfolgend informieren wir dich allgemein über die verschiedenen Zwecke, Techniken, Speicherdauer sowie die Verarbeitungsländer.\n\n### Techniken\n\n### Erforderliche Cookies\n\nDiese Cookies sind notwendig, damit du durch die Seiten navigieren und wesentliche Funktionen nutzen kannst. Sie ermöglichen Grundfunktionen, um den Zugriff auf gesicherte Bereiche der Webseite zu gewährleisten. Rechtsgrundlage für diese Cookies ist Art. 6 Abs. 1b DSGVO bzw. bei Drittstaaten Art. 49 Abs. 1b DSGVO.\n\n| Firma     | Zweck            | Speicherdauer  | Land der Verarbeitung |\n| --------- | ---------------- | -------------- | --------------------- |\n| T-Systems | Session ID / WAF | Session cookie | Deutschland           |\n\n## 4. Wo finde ich die Informationen, die für mich wichtig sind?\n\nDieser **Datenschutzinhinweis** gibt einen Überblick über die Punkte, die für die Verarbeitung deiner Daten auf diesem Webportal durch die Deutsche Telekom gelten. Weitere Informationen, auch zum Datenschutz im Allgemeinen oder in speziellen Produkten, erhältst du auf https://www.telekom.com/en/corporate-responsibility/data-protection-data-security/data-protection und unter http://www.telekom.de/datenschutzhinweise.\n\n## 5. Wer ist für die Datenverarbeitung verantwortlich? An wen muss ich mich wenden, wenn ich Fragen zum Datenschutz bei der Deutschen Telekom habe?\n\nDatenverantwortliche ist die Deutsche Telekom AG. Bei Fragen kontaktiere bitte unseren Kundenservice oder unseren Datenschutzbeauftragten, Dr. Claus D. Ulmer, Friedrich-Ebert-Allee 140, 53113 Bonn, datenschutz@telekom.de.\n\n## 6. Welche Rechte habe ich?\n\nDu hast das Recht,\n\n<ol type="a">\n    <li><b>Auskunft</b> zu verlangen zu Kategorien der verarbeiteten personenbezogenen Daten, Verarbeitungszwecken, etwaigen Empfängern der Daten und der geplanten Speicherdauer (Art. 15 DSGVO);</li>\n    <li>die <b>Berichtigung</b> bzw. Ergänzung unrichtiger oder unvollständiger Daten zu verlangen (Art. 16 DSGVO);</li>\n    <li>eine erteilte Einwilligung jederzeit mit Wirkung für die Zukunft <b>zu widerrufen</b> (Art. 7 Abs. 3 DSGVO);</li>\n    <li>einer Datenverarbeitung, die aufgrund eines berechtigten Interesses erfolgen soll, aus Gründen <b>zu widersprechen</b>, die sich aus deiner besonderen Situation ergeben (Art. 21 Abs. 1 DSGVO);</li>\n    <li>in bestimmten Fällen im Rahmen des Art. 17 DSGVO die <b>Löschung</b> von Daten zu verlangen – insbesondere soweit die Daten für den vorgesehenen Zweck nicht mehr erforderlich sind bzw. unrechtmäßig verarbeitet werden - oder du deine Einwilligung gemäß oben (c) widerrufen oder einen Widerspruch gemäß oben (d) erklärt hast;</li>\n    <li>unter bestimmten Voraussetzungen die <b>Einschränkung</b> der Verarbeitung zu verlangen, soweit eine Löschung nicht möglich bzw. die Löschpflicht streitig ist (Art. 18 DSGVO);</li>\n    <li>auf <b>Datenübertragbarkeit</b>, d. h. du kannst die Daten, die du uns bereitgestellt hast, in einem gängigen maschinenlesbaren Format wie z. B.  CSV erhalten und, soweit erforderlich, an Dritte übermitteln (Art. 20 DSGVO);</li>\n    <li>sich bei der zuständigen <b>Aufsichtsbehörde</b> über die Datenverarbeitung zu <b>beschweren</b> (für Telekommunikationsverträge: Bundesbeauftragte für den Datenschutz und die Informationsfreiheit; für alle übrigen: Landesbeauftragte für den Datenschutz und die Informationsfreiheit Nordrhein-Westfalen).</li>\n</ol>\n\n## 7. An wen gibt die Deutsche Telekom AG meine Daten weiter?\n\nWir geben deine Daten ausschließlich **aufgrund gesetzlicher Verpflichtung** weiter: In bestimmen Fällen sind wir gesetzlich dazu verpflichtet, bestimmte Daten an die anfragende staatliche Stelle zu übermitteln.\n\n## 8. Wo werden meine Daten verarbeitet?\n\nDeine Daten werden in Deutschland und im europäischen Ausland verarbeitet. Findet eine Verarbeitung deiner Daten in Ausnahmefällen auch in Ländern außerhalb der Europäischen Union (in sog. Drittstaaten) statt, geschieht dies,\n\n<ol type="a">\n    <li>soweit du hierin ausdrücklich eingewilligt hast (Art. 49 Abs. 1a DSGVO). (In den meisten Ländern außerhalb der EU entspricht das Datenschutzniveau nicht den EU-Standards. Dies betrifft insbesondere umfassende Überwachungs- und Kontrollrechte staatliche Behörden – z. B. in den USA, die in den Datenschutz der europäischen Bürgerinnen und Bürger unverhältnismäßig eingreifen.),</li>\n    <li>oder soweit es für unsere Leistungserbringung dir gegenüber erforderlich ist (Art. 49 Abs. 1b DSGVO),</li>\n    <li>oder soweit es gesetzlich vorgesehen ist (Art. 49 Abs. 1c DSGVO).</li>\n</ol>\n\nDarüber hinaus erfolgt eine Verarbeitung deiner Daten in Drittstaaten nur, soweit durch bestimmte Maßnahmen sichergestellt ist, dass hierfür ein angemessenes Datenschutzniveau besteht (z. B. Angemessenheitsbeschluss der EU-Kommission oder sog. geeignete Garantien, Art. 44 ff. DSGVO).\n\n**© Deutsche Telekom AG – April 2022**\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.c,{title:"Legal/Privacy",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?Privacy_en:Privacy_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Legal/Privacy",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?Privacy_en:Privacy_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/FAQ.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),FAQ_en='# FAQ\n\nHere is a list of common questions about Scale, along with practical answers.\n\n## Are Scale components accessible?\n\n**They are!**\n\nAll Scale components meet the Telekom accessibility requirements as well as the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG21/) version 2.1, level AA criteria.\n\n[Learn more about accessibility](./?path=/docs/setup-info-accessibility--page) in Scale and how we test our components.\n\n## Can I integrate Scale into an ongoing project?\n\n**Yes, absolutely!**\n\nFeel free to use Scale components in addition to your own.\nThat\'ll save you some time on more general UI work, which you can reinvest to improve parts of the product you otherwise wouldn’t have time to focus on in such detail.\n\n**How does it work?**\n\nIf you manage dependencies within your project with npm or yarn and use either a bundler (e.g., Webpack) or ESM, the integration is very simple and straightforward.\nFor any other case, please get in touch so we can advise on the best setup.\n\n## How do I get access to Scale?\n\nHere are the best ways to get started:\n\n[General documentation](./?path=/story/scale-design-system--page)\n\n[For designers](./?path=/docs/setup-info-getting-started-for-designers--page)\n\n[For developers](./?path=/docs/setup-info-getting-started-for-developers--page)\n\nAlso have Sketch ready to work with Scale.\n\n## How mature is Scale?\n\nScale is currently an open beta. It is growing and evolving every day. And the contributions of our users are what make it a truly invaluable asset.\n\n[Learn how you can contribute](./?path=/story/contact-contributing-to-scale--page).\n\n## Is Scale open source?\n\n**Yes.**\nOur open-source design system is currently an open beta.\nWe are excited to receive your feedback! And we are delighted if you help us improve Scale with your ideas, experience and skills for developing new components and features.\n\nYou can find the <a href="https://github.com/telekom/scale" target="_blank">Scale Sourcecode on GitHub</a>\n\n## What if I need a new component?\n\nHere are some ideas:\n\n- Get in touch with the team. We might be able to prioritize your requirements. Ask us about beta or WIP options that could be helpful.\n- Create a component locally so it truly fits your specific needs.\n\nIf you need a component with specific requirements that Scale doesn\'t offer:\n\n- Develop the component locally that fits your specific needs. Also, if everyone will benefit, we’d love to [include it in the Scale library](./?path=/story/contact-contributing-to-scale--page).\n- Fork an existing component and improve upon it. If your requirements will benefit everyone, we’d love for you to [contribute to Scale](./?path=/story/contact-contributing-to-scale--page).\n- Contact us with your exact specifications and implementation ideas. We might be able to develop it.\n\n**A friendly design reminder**\nWhen developing components locally, make sure to follow the Telekom brand and design guidelines and use the quality of the Scale components for orientation.\n\n## What do I need to publish software?\n\nYou can include Scale for production just like you would for a local project.\n\n## Can I use Scale for designing email newsletters?\n\nUnfortunately, Scale is not compatible with emails. Please use the [design guidelines and instructions for creating newsletters](https://www.brand-design.telekom.com/en/articles/n/newsletter/) on Brand & Design. There you will also find suitable [newsletter templates](https://www.brand-design.telekom.com/en/asset/email-template-0-newsletter-templates/).\n\n## What is Scale exactly?\n\nScale is the new Telekom Digital Design System—a library of production-ready UI components in code and design. The components are brand-compliant and accessible and help you create intuitive interfaces quickly and easily.\n\nThe component library is centrally accessible and works with all modern frameworks used for building web applications. Scale is integrated into an optimized toolchain that greatly simplifies the frontend development workflow: As a UX designer you can easily integrate the Scale library into Sketch and receive automated updates. As a frontend developer you will find that implementation and updating with the library on NPM are as easy as it gets.\n\nScale is the single source of truth for both designers and developers. Design and code are always in sync and up to date. And since this single source of truth—Storybook—also holds the entire documentation for design and development, communication will improve within teams since everyone speaks the same language.\n\n## What is the Scale accessibility standard?\n\nWe aim at making inclusive products and experiences that serve everyone.\nScale components meet the Telekom accessibility requirements as well as the Web Content Accessibility Guidelines (WCAG) version 2.1, level AA criteria.\n\n[Have a look at our standards](./?path=/docs/setup-info-accessibility--page)\n\n**How to achieve full compliance**\n\nWhile the Scale components and standard theme enable accessible experiences, full compliance with all mandatory accessibility requirements relies on many other factors for your product as a whole.\nAs such, please have your particular product reviewed by an accessibility consultant to find out how to use the Scale components in the best possible way.\n\n**Suggestions welcome!**\n\nOur goal is to make Scale as accessible as possible. If you have any comments or suggestions on how we can make it better for users with disabilities, please raise an issue on our Git Repo or contact our support team.\n\n## Which browsers are supported?\n\n**We love evergreens!**\nAll our components are tested to support the most important (evergreen) browsers.\n\n[Our complete list of browsers](./?path=/docs/setup-info-browser-support--page)\n\n## Who is behind Scale?\n\nA joint team of UX designers and frontend specialists developed Scale with the aim of making frontend development easier, faster, and more effective.\nNow, a team of UX designers and developers maintains and refines Scale, making sure it continues to meet the current and future requirements of the project teams using it.\n\n## Why should I use Scale?\n\nBecause working with Scale has a host of benefits:\n\n**Faster frontend development:** Production-ready components save time in UX design and development, which means faster time to market for products and services.\n\n**Reduced production costs:** Fully designed and developed components avoid double work and reduce rework.\n\n**Happier teams:** Common resources and a shared language boost collaboration. Less routine tasks mean more time to be creative.\n\n**Easy brand-compliance:** Scale components are consistent with the Liquid Design System and therefore with the Telekom experience principles.\n\n**Better consistency:** With Storybook, all components are collected neatly in one place and are therefore always up to date.\n\n**Hassle-free accessibility:** Scale components fulfill the internal Telekom accessibility standards as well as the AA standard of the W3C, so we can build inclusive products that serve everyone.\n\n**Great flexibility:** Visual and functional elements can be adapted to meet specific project requirements, variants make for more versatility and new themes can be implemented with little technological effort.\n\n**Best compatibility:** Based on the Web Component standard, Scale components are interpreted directly by all modern browsers and can be used with the most common frameworks.\n\n**Smart toolchain:** Scale simplifies handoff and quality assurance processes, provides comprehensive documentation and is easy to integrate into your trusted environment.\n\n**Open source:** Scale is developed further with the help of its users. Your feedback, recommendations and ideas will help us improve our component library continuously.\n',FAQ_de='# FAQ\n\nHier findest du eine Liste mit häufig gestellten Fragen und nützlichen Antworten.\n\n## Erfüllen Scale Komponenten alle Anforderungen der Deutschen Telekom an die Barrierefreiheit?\n\n**Ja, das tun sie!**\n\nAlle Komponenten erfüllen sowohl die Anforderungen der Telekom an die Barrierefreiheit sowie die Kriterien der [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG21/) Version 2.1, Stufe AA.\n\n[Erfahre mehr zum Thema Barrierefreiheit](./?path=/story/scale-for-developers-accessibility--page) und wie wir unsere Komponenten daraufhin prüfen.\n\n## Kann ich Scale in ein laufendes Projekt integrieren?\n\n**Ja, unbedingt!**\n\nDu kannst die Scale Komponenten zusätzlich zu deinen eigenen Komponenten verwenden.\nDas spart wertvolle Zeit, die du in die Verbesserung deines Produkts oder Dienstes investieren kannst.\n\n**Und wie geht das?**\n\nWenn du dein Projekt mit npm oder yarn verwaltest oder du einen Bundler (z. B. Webpack) bzw. ESM verwendest, ist die Integration sehr einfach und unkompliziert.\nIn jedem anderen Fall kontaktiere uns bitte, damit wir dich über das beste Setup beraten können.\n\n## Wie erhalte ich Zugang zu Scale?\n\nAls Designer\\*in findest du alles Wichtige für den Start mit Scale hier:\n[Scale für Designer](./?path=/docs/setup-info-getting-started-for-designers--page)\n\nBitte beachte: Du benötigst Sketch, um Scale nutzen zu können.\n\nAls Entwickler\\*in erhältst du alle Informationen zur Nutzung von Scale hier:\n[Scale für Entwickler](./?path=/docs/setup-info-getting-started-for-developers--page)\n\n## Was ist der Entwicklungsstand von Scale?\n\nScale ist derzeit eine Open Beta und entwickelt sich stetig weiter. Vor allem die Beiträge unserer Nutzer\\*innen machen Scale zu einer so wertvollen Ressource.\nWie du mitmachen kannst, [erfährst du hier](./?path=/story/contact-contributing-to-scale--page).\n\n## Ist Scale open-source?\n\n**Ja.**\nUnser open-source Designsystem ist derzeit eine Open Beta. Deshalb freuen wir uns über dein Feedback! Und auch darüber, wenn du mit deiner Erfahrung und mit deinen Fähigkeiten und Ideen für neue Komponenten und Funktionen mithilfst, Scale weiter zu verbessern.\n\nDu findest den <a href="https://github.com/telekom/scale" target="_blank"> Scale Sourcecode auf GitHub.</a>\n\n## Ich benötige eine Komponente, die noch nicht in Scale verfügbar ist. Was kann ich tun?\n\nDann hast du einige Möglichkeiten:\n\n- Kontaktiere uns. Vielleicht können wir deine Anfrage priorisieren und dir die gewünschte Komponente bald bereitstellen. Möglicherweise können wir dir auch Beta- oder WIP-Optionen bereitstellen, die dir weiterhelfen.\n- Oder du erstellst die Komponente einfach selbst, damit sie die konkreten Anforderungen deines Produkts oder Dienstes erfüllt.\n\n**Wenn eine Komponente zwar verfügbar ist, diese aber nicht deinen spezifischen Anforderungen entspricht, kannst du Folgendes tun:**\n\n- Entwickle eine eigene Komponente, die genau diesen Anforderungen entspricht. Du denkst, dass auch andere davon profitieren könnten? Prima, dann würden wir uns sehr freuen, wenn du uns deine [Komponente in der Scale Library zur Verfügung stellen](./?path=/story/contact-contributing-to-scale--page) würdest.\n- Benutze einfach eine bereits bestehende Komponente und verändere sie. Auch in diesem Fall freuen wir uns, wenn du [deine Version mit uns teilst](./?path=/story/contact-contributing-to-scale--page).\n- Oder kontaktiere uns, um deine genauen Spezifikationen sowie Umsetzungsideen mitzuteilen. Wir prüfen dann, ob wir dir die Komponenten ganz nach deinen Wünschen erstellen können.\n\n**Freundliche Erinnerung**\nBitte halte dich bei der Entwicklung von Komponenten immer an die Marken- und Designrichtlinien der Deutschen Telekom. Orientiere dich dabei an der Qualität der Scale Komponenten.\n\n## Was benötige ich, um Produkte und Dienste zu entwickeln?\n\nDu kannst Scale für die Produktion genauso einbinden, wie du es für ein lokales Projekt tun würdest.\n\n## Kann ich Scale für die Gestaltung von E-Mail-Newslettern nutzen?\n\nLeider ist Scale mit E-Mails nicht kompatibel. Nutze einfach die [Gestaltungsvorgaben und Informationen für das Erstellen von Newslettern](https://www.brand-design.telekom.com/artikel/n/newsletter/) auf Brand & Design. Dort findest du auch passende [Newsletter Templates](https://www.brand-design.telekom.com/asset/email-template-0-newsletter-templates/).\n\n## Was ist Scale genau?\n\nScale ist das neue digitale Designsystem der Telekom – eine Bibliothek produktionsfertiger UI-Komponenten, die in Code und Design vorliegen. Sie sind brandkonform und barrierefrei, sodass du mit Leichtigkeit intutive Interfaces erstellen kannst.\n\nDie Komponenten-Bibliothek ist zentral zugänglich und funktioniert mit allen gängigen Frameworks, die zur Erstellung von Webanwendungen verwendet werden. Außerdem ist sie in eine optimierte Toolchain integriert, die die Abläufe in der Frontend-Entwicklung stark vereinfacht: Als UX-Designer*in kannst du die Scale Bibliothek ganz leicht in Sketch integrieren und dich über automatische Updates freuen. Als Frontend-Entwickler*in profitierst du von der einfachen Implementierung und mühelosen Updates mit der Bibliothek auf NPM.\n\nScale ist "Single Source Of Truth" für Designer*innen und Entwickler*innen. Design und Code sind immer auf dem neuesten Stand. Und weil dieser eine Ort – Storybook – auch die gesamte Dokumentation für Design und Entwicklung enthält, verbessert sich die Zusammenarbeit im Team, weil alle dieselbe Sprache sprechen.\n\n## Wie gestalte ich barrierefreie Produkte und Dienste mit Scale?\n\nUnser Ziel ist es, inklusive Produkte und Erlebnisse zu schaffen, die allen Menschen zugänglich sind. Daher erfüllen die Scale Komponenten bereits alle Anforderungen der Telekom für Barrierefreiheit sowie die Kriterien der Web Content Accessibility Guidelines (WCAG) Version 2.1, Stufe AA.\n\nHier findest du [weitere Informationen zum Thema Barrierefreiheit](./?path=/docs/setup-info-accessibility--page)\n\n**Wirklich alle Anforderungen kennen**\n\nDie Scale Komponenten und das Standard Theme erfüllen bereits die Basis der Anforderungen für ein barrierefreies Nutzungserlebnis. Es gibt aber noch eine Reihe anderer wichtiger Faktoren, um die vollständige Barrierefreiheit deines Produkts oder Dienstes zu gewährleisten.\nWende dich dafür an die Berater\\*innen für Barrierefreiheit, um zu erfahren, wie du die Scale Komponenten bestmöglich einsetzt.\n\n**Deine Ideen**\n\nUnser Ziel ist es, Scale so zugänglich wie möglich zu machen. Wenn du Ideen oder Vorschläge hast, wie wir Scale für Menschen mit Einschränkungen oder Behinderungen noch besser machen können, dann erstelle bitte ein Issue im Git Repo oder kontaktiere den Support.\n\n## Welche Browser unterstützt Scale?\n\n**Wir setzen auf Evergreens**\nAlle unsere Komponenten funktionieren mit den gängigsten Internet-Browsern.\n\nHier findest du die [komplette Liste](./?path=/docs/setup-info-browser-support--page)\n\n## Wer steckt hinter Scale?\n\nScale wurde gemeinsam mit UX-Designer\\*innen und Frontend-Spezialist\\*innen entwickelt, um die Frontend-Entwicklung einfacher, schneller und effektiver zu machen.\nEin Team aus UX-Designer\\*innen und Entwickler\\*innen pflegt Scale und entwickelt es weiter, um sicherzustellen, dass es weiterhin die aktuellen und zukünftigen Anforderungen der Projektteams erfüllt.\n\n## Warum sollte ich Scale nutzen?\n\nWeil Scale dir viele Vorteile bietet:\n\n**Schnellere Frontend-Entwicklung:** Produktionsfertige Komponenten sparen Zeit in UX-Design und Entwicklung. Produkte und Services kommen schneller auf den Markt.\n\n**Niedrigere Produktionskosten:** Mit vollständig designten und entwickelten Komponenten wird Doppelarbeit vermieden und Nacharbeit deutlich reduziert.\n\n**Zufriedenere Teams:** Gemeinsame Ressourcen und eine gemeinsame Sprache verbessern die Zusammenarbeit. Durch weniger Routineaufgaben bleibt mehr Zeit für Kreativität.\n\n**Mühelose Markenkonformität:** Scale Komponenten erfüllen alle Anforderungen des Liquid Design Systems und damit die Experience-Richtlinien der Telekom.\n\n**Verbesserte Konsistenz:** Mit Storybook sind alle Komponenten an einem einzigen Zugriffspunkt gesammelt und damit immer aktuell.\n\n**Einfache Barrierefreiheit:** Mit Komponenten, die die internen Telekom Standards sowie die Stufe-AA-Kriterien der W3C erfüllen, entwickeln wir Produkte, die für alle zugänglich sind.\n\n**Große Flexibilität:** Visuelle und funktionale Elemente können projektspezifisch angepasst werden, Varianten sorgen für Abwechslung und neue Themes lassen sich mit wenig Aufwand umsetzen.\n\n**Beste Kompatibilität:** Basierend auf dem Web-Component-Standard werden Scale Komponenten von allen modernen Browsern direkt interpretiert und können mit den gängigsten Frameworks genutzt werden.\n\n**Smarte Toolchain:** Scale vereinfacht Übergabe- und Qualitätssicherungsprozesse, bietet eine umfassende Dokumentation und lässt sich leicht in die gewohnte Arbeitsumgebung integrieren.\n\n**Open-source:** Scale darf sich mit Hilfe seiner Nutzer\\*innen weiterentwickeln. Mit Feedback, Vorschlägen und Ideen verbessert sich unsere Komponenten-Bibliothek stetig weiter.\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"FAQ",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?FAQ_en:FAQ_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"FAQ",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?FAQ_en:FAQ_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/Index.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Index_en="<br/>\n\n### Scale is the Telekom Digital Design System\n\nScale is a part of Brand & Design. All components are brand compliant and help create a coherent brand experience.\n\n### Code and design for consistent products\n\nBased on our brand identity, the Scale design system helps you develop consistent products. This is how you contribute to strengthening the Telekom brand.\n\n### Accessibility out of the box\n\nScale components meet the technical requirements for the accessibility level AA. They are just as suitable for customer-focused products as they are for internal use cases.\n\n### Compatible with the relevant framework and design tools\n\nThe UI libraries are available in Figma and Sketch. You can use the code components as pure web components or in the framework for Vue, React, and Angular.\n\n### For the best user experience\n\nScale saves you time throughout the entire design and development process: for the design of user interfaces, prototyping, design handover, front-end development, and in the approval process with Brand & Design. This leaves more time to create specific features and functionality.\n\n### Flexibility and scalability through design tokens\n\nBy including design tokens, Scale is particularly adaptable. Changes and additions can be implemented quickly. Other themes for third-party brands can also be created quickly.\n\n### For better collaboration\n\nA design system encourages collaboration between teams and stakeholders. It creates a common foundation on which everyone can build together. As a designer or developer, you can help improve Scale. Send us your new or improved components to share with your colleagues in Scale.\n",Index_de="<br/>\n\n### Scale ist das digitale Design System der Telekom\n\nScale ist Teil von Brand & Design. Alle Komponenten sind markenkonform und helfen, ein kohärentes Markenerlebnis zu schaffen.\n\n### Code und Design für konsistente Produkte\n\nDas auf unserer Markenidentität basierende Designsystem hilft dir, konsistente Produkte zu entwickeln. So stärkst du die Marke Telekom.\n\n### Barrierefreiheit „out of the box“\n\nDie Komponenten von Scale erfüllen die technischen Anforderungen für das Level AA der Barrierefreiheit. Sie sind ebenso für kundenbezogene Produkte wie für interne Anwendungen geeignet.\n\n### Kompatibel mit den relevanten Frameworks und Design Tools\n\nDie UI Libraries gibt es im Figma- und Sketchformat. Die Code Komponenten kannst du als reine Web-Komponenten oder in den Frameworks Vue, React und Angular verwenden.\n\n### Für die beste User Experience\n\nMit Scale sparst du Zeit – und zwar im gesamten Design- und Entwicklungsprozess: bei der Gestaltung von User Interfaces, beim Prototyping, der Design-Übergabe, der Frontend-Entwicklung und im Freigabeprozess mit Brand & Design. So bleibt mehr Zeit für spezifische Funktionen und Lösungen.\n\n### Flexibilität und Skalierbarkeit durch Design Tokens\n\nDurch die Verwendung von Design Tokens ist Scale besonders anpassungsfähig. Änderungen und Erweiterungen lassen sich schnell umsetzen. Auch weitere Themes für bspw. Drittmarken sind schnell erstellt.\n\n### Für bessere Kollaboration\n\nEin Designsytsem fördert die Zusammenarbeit zwischen Teams und Stakeholdern. Es schafft eine gemeinsame Grundlage, auf die alle Beteiligten gemeinsam aufbauen können. Als Designer*in oder Entwickler*in kannst du dazu beitragen, Scale zu verbessern. Schicke uns deine neuen oder verbesserten Komponenten, um sie mit deinen Kolleg\\*innen in Scale zu teilen.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Scale Design System",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale,alt="en"===locale?"Welcome to Scale Design System":"Wilkommen beim Scale Design System";return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},Object(esm.b)("img",{src:"assets/welcome.png",alt:alt,style:{width:"100%"}}),locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Index_en:Index_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Scale Design System",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale,alt="en"===locale?"Welcome to Scale Design System":"Wilkommen beim Scale Design System";return Object(esm.b)(dist_esm.e,{context:context},Object(esm.b)("img",{src:"assets/welcome.png",alt:alt,style:{width:"100%"}}),locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Index_en:Index_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/accordion/Accordion.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Accordion_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"dependent",(function(){return dependent})),__webpack_require__.d(__webpack_exports__,"expanded",(function(){return expanded})),__webpack_require__.d(__webpack_exports__,"headingLevel",(function(){return headingLevel}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),accordion_ScaleAccordionvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{styles:{type:String},dependent:{type:Boolean,default:!1},expanded:{type:Boolean,default:!1},headingLevel:{type:Number},iconLocation:{type:String,default:"left"}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(accordion_ScaleAccordionvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-accordion",{attrs:{styles:this.styles,dependent:this.dependent,expanded:this.expanded,"heading-level":this.headingLevel,"icon-location":this.iconLocation}},[this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleAccordion=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleAccordion",description:"",tags:{},props:[{name:"styles",type:{name:"string"}},{name:"dependent",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"expanded",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"headingLevel",type:{name:"number"}},{name:"iconLocation",type:{name:"string"},defaultValue:{func:!1,value:"'left'"}}],slots:[{name:"default"}]};var Accordion_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleAccordion:ScaleAccordion},props:Object.assign({},ScaleAccordion.props),template:'\n    <scale-accordion\n      :styles="styles"\n      :dependent="dependent"\n      :expanded="expanded"\n      :headingLevel="headingLevel"\n    >\n      <scale-collapsible>\n        <span slot="heading">Leo integer malesuada nunc vel risus</span>\n        <p>Freegan kinfolk <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic master cleanse copper mug schlitz palo santo bushwick ethical pop-up chambray portland. Sartorial austin iceland street art, pug asymmetrical marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck everyday carry 3 wolf moon.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Dolor purus non enim</span>\n        <p>Bespoke austin pork belly yuccie pop-up. <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers microdosing etsy hashtag seitan photo booth bitters.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>\n        <p>Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh four loko selfies you probably haven\'t heard of them locavore bushwick. Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf godard skateboard celiac taxidermy tacos offal.</p>\n      </scale-collapsible>\n    </scale-accordion>\n  '}},layoutProps={Template:Accordion_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Accordion",component:ScaleAccordion,argTypes:{dependent:{defaultValue:!1,control:{type:"boolean"}},expanded:{defaultValue:!1,control:{type:"boolean"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Accordion"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",mdxType:"Story"},Accordion_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-accordion>\n  <scale-collapsible>\n    <span slot="heading">Leo integer malesuada nunc vel risus</span>\n    <p>\n      Freegan kinfolk\n      <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock\n      bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic\n      master cleanse copper mug schlitz palo santo bushwick ethical pop-up\n      chambray portland. Sartorial austin iceland street art, pug asymmetrical\n      marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin\n      food truck everyday carry 3 wolf moon.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading">Dolor purus non enim</span>\n    <p>\n      Bespoke austin pork belly yuccie pop-up.\n      <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter\n      scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers\n      microdosing etsy hashtag seitan photo booth bitters.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading"\n      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span\n    >\n    <p>\n      Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe\n      helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh\n      four loko selfies you probably haven\'t heard of them locavore bushwick.\n      Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf\n      godard skateboard celiac taxidermy tacos offal.\n    </p>\n  </scale-collapsible>\n</scale-accordion>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"/* scale-collapsible */\n:host {\n  --spacing-y: var(--telekom-spacing-composition-space-06);\n\n  /* button */\n  --font: var(--telekom-text-style-heading-5);\n  --border-width-button: var(--telekom-spacing-composition-space-02);\n  --radius-button: var(--telekom-radius-small);\n  --spacing-left-button: 0;\n  --spacing-left-button-text: var(--telekom-spacing-composition-space-04);\n  --color-button-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-button-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --background-button-hover: none;\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n\n  /* content */\n  --spacing-right-content: var(--telekom-spacing-composition-space-14);\n  --spacing-left-content: 34px;\n  --spacing-top-content: var(--telekom-spacing-composition-space-06);\n  --spacing-bottom-content: var(--telekom-spacing-composition-space-08);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"dependent"},"Dependent"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dependent",args:{dependent:!0},mdxType:"Story"},Accordion_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-accordion dependent>\n  <scale-collapsible>\n    <span slot="heading">Leo integer malesuada nunc vel risus</span>\n    <p>\n      Freegan kinfolk\n      <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock\n      bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic\n      master cleanse copper mug schlitz palo santo bushwick ethical pop-up\n      chambray portland. Sartorial austin iceland street art, pug asymmetrical\n      marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin\n      food truck everyday carry 3 wolf moon.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading">Dolor purus non enim</span>\n    <p>\n      Bespoke austin pork belly yuccie pop-up.\n      <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter\n      scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers\n      microdosing etsy hashtag seitan photo booth bitters.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading"\n      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span\n    >\n    <p>\n      Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe\n      helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh\n      four loko selfies you probably haven\'t heard of them locavore bushwick.\n      Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf\n      godard skateboard celiac taxidermy tacos offal.\n    </p>\n  </scale-collapsible>\n</scale-accordion>\n')),Object(esm.b)("h2",{id:"expanded"},"Expanded"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Expanded",args:{expanded:!0},mdxType:"Story"},Accordion_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-accordion expanded>\n  <scale-collapsible>\n    <span slot="heading">Leo integer malesuada nunc vel risus</span>\n    <p>\n      Freegan kinfolk\n      <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock\n      bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic\n      master cleanse copper mug schlitz palo santo bushwick ethical pop-up\n      chambray portland. Sartorial austin iceland street art, pug asymmetrical\n      marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin\n      food truck everyday carry 3 wolf moon.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading">Dolor purus non enim</span>\n    <p>\n      Bespoke austin pork belly yuccie pop-up.\n      <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter\n      scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers\n      microdosing etsy hashtag seitan photo booth bitters.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading"\n      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span\n    >\n    <p>\n      Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe\n      helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh\n      four loko selfies you probably haven\'t heard of them locavore bushwick.\n      Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf\n      godard skateboard celiac taxidermy tacos offal.\n    </p>\n  </scale-collapsible>\n</scale-accordion>\n')),Object(esm.b)("h2",{id:"heading-level"},"Heading Level"),Object(esm.b)("p",null,"The default level for the heading (h1, h2, h3…) inside the toggle button is ",Object(esm.b)("inlineCode",{parentName:"p"},"2"),". So setting ",Object(esm.b)("inlineCode",{parentName:"p"},"heading-level")," in ",Object(esm.b)("inlineCode",{parentName:"p"},"<scale-accordion>")," will affect all ",Object(esm.b)("inlineCode",{parentName:"p"},"<scale-collapsible>")," children automatically."),Object(esm.b)("p",null,"Adding ",Object(esm.b)("inlineCode",{parentName:"p"},'aria-level=""')," to the heading slot on each item is not needed, but results in better accessibility in case JavaScript fails to load or execute."),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Heading Level",args:{headingLevel:3},mdxType:"Story"},Accordion_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-accordion heading-level="3">\n  <scale-collapsible>\n    <span slot="heading" aria-level="3"\n      >Leo integer malesuada nunc vel risus</span\n    >\n    <p>\n      Freegan kinfolk\n      <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock\n      bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic\n      master cleanse copper mug schlitz palo santo bushwick ethical pop-up\n      chambray portland. Sartorial austin iceland street art, pug asymmetrical\n      marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin\n      food truck everyday carry 3 wolf moon.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading" aria-level="3">Dolor purus non enim</span>\n    <p>\n      Bespoke austin pork belly yuccie pop-up.\n      <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter\n      scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers\n      microdosing etsy hashtag seitan photo booth bitters.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading" aria-level="3"\n      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span\n    >\n    <p>\n      Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe\n      helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh\n      four loko selfies you probably haven\'t heard of them locavore bushwick.\n      Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf\n      godard skateboard celiac taxidermy tacos offal.\n    </p>\n  </scale-collapsible>\n</scale-accordion>\n')))}MDXContent.isMDXComponent=!0;var standard=Accordion_stories_Template.bind({});standard.storyName="Standard",standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleAccordion\n  },\n  props: { ...ScaleAccordion.props\n  },\n  template: `\n    <scale-accordion\n      :styles="styles"\n      :dependent="dependent"\n      :expanded="expanded"\n      :headingLevel="headingLevel"\n    >\n      <scale-collapsible>\n        <span slot="heading">Leo integer malesuada nunc vel risus</span>\n        <p>Freegan kinfolk <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic master cleanse copper mug schlitz palo santo bushwick ethical pop-up chambray portland. Sartorial austin iceland street art, pug asymmetrical marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck everyday carry 3 wolf moon.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Dolor purus non enim</span>\n        <p>Bespoke austin pork belly yuccie pop-up. <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers microdosing etsy hashtag seitan photo booth bitters.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>\n        <p>Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh four loko selfies you probably haven\'t heard of them locavore bushwick. Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf godard skateboard celiac taxidermy tacos offal.</p>\n      </scale-collapsible>\n    </scale-accordion>\n  `\n})'}};var dependent=Accordion_stories_Template.bind({});dependent.storyName="Dependent",dependent.args={dependent:!0},dependent.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleAccordion\n  },\n  props: { ...ScaleAccordion.props\n  },\n  template: `\n    <scale-accordion\n      :styles="styles"\n      :dependent="dependent"\n      :expanded="expanded"\n      :headingLevel="headingLevel"\n    >\n      <scale-collapsible>\n        <span slot="heading">Leo integer malesuada nunc vel risus</span>\n        <p>Freegan kinfolk <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic master cleanse copper mug schlitz palo santo bushwick ethical pop-up chambray portland. Sartorial austin iceland street art, pug asymmetrical marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck everyday carry 3 wolf moon.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Dolor purus non enim</span>\n        <p>Bespoke austin pork belly yuccie pop-up. <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers microdosing etsy hashtag seitan photo booth bitters.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>\n        <p>Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh four loko selfies you probably haven\'t heard of them locavore bushwick. Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf godard skateboard celiac taxidermy tacos offal.</p>\n      </scale-collapsible>\n    </scale-accordion>\n  `\n})'}};var expanded=Accordion_stories_Template.bind({});expanded.storyName="Expanded",expanded.args={expanded:!0},expanded.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleAccordion\n  },\n  props: { ...ScaleAccordion.props\n  },\n  template: `\n    <scale-accordion\n      :styles="styles"\n      :dependent="dependent"\n      :expanded="expanded"\n      :headingLevel="headingLevel"\n    >\n      <scale-collapsible>\n        <span slot="heading">Leo integer malesuada nunc vel risus</span>\n        <p>Freegan kinfolk <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic master cleanse copper mug schlitz palo santo bushwick ethical pop-up chambray portland. Sartorial austin iceland street art, pug asymmetrical marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck everyday carry 3 wolf moon.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Dolor purus non enim</span>\n        <p>Bespoke austin pork belly yuccie pop-up. <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers microdosing etsy hashtag seitan photo booth bitters.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>\n        <p>Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh four loko selfies you probably haven\'t heard of them locavore bushwick. Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf godard skateboard celiac taxidermy tacos offal.</p>\n      </scale-collapsible>\n    </scale-accordion>\n  `\n})'}};var headingLevel=Accordion_stories_Template.bind({});headingLevel.storyName="Heading Level",headingLevel.args={headingLevel:3},headingLevel.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleAccordion\n  },\n  props: { ...ScaleAccordion.props\n  },\n  template: `\n    <scale-accordion\n      :styles="styles"\n      :dependent="dependent"\n      :expanded="expanded"\n      :headingLevel="headingLevel"\n    >\n      <scale-collapsible>\n        <span slot="heading">Leo integer malesuada nunc vel risus</span>\n        <p>Freegan kinfolk <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic master cleanse copper mug schlitz palo santo bushwick ethical pop-up chambray portland. Sartorial austin iceland street art, pug asymmetrical marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck everyday carry 3 wolf moon.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Dolor purus non enim</span>\n        <p>Bespoke austin pork belly yuccie pop-up. <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers microdosing etsy hashtag seitan photo booth bitters.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>\n        <p>Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh four loko selfies you probably haven\'t heard of them locavore bushwick. Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf godard skateboard celiac taxidermy tacos offal.</p>\n      </scale-collapsible>\n    </scale-accordion>\n  `\n})'}};var componentMeta={title:"Components/Accordion",component:ScaleAccordion,argTypes:{dependent:{defaultValue:!1,control:{type:"boolean"}},expanded:{defaultValue:!1,control:{type:"boolean"}}},includeStories:["standard","dependent","expanded","headingLevel"]},mdxStoryNameToKey={Standard:"standard",Dependent:"dependent",Expanded:"expanded","Heading Level":"headingLevel"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/breadcrumb/Breadcrumb.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Breadcrumb_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),breadcrumb_ScaleBreadcrumbvue_type_script_lang_js_={props:{separator:String,styles:{type:String}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(breadcrumb_ScaleBreadcrumbvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-breadcrumb",{attrs:{separator:this.separator,styles:this.styles}},[this._t("default"),this._v(" "),this._t("separator")],2)}),[],!1,null,null,null).exports;var ScaleBreadcrumb=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleBreadcrumb",description:"",tags:{},props:[{name:"separator",type:{name:"string"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"},{name:"separator"}]};var Breadcrumb_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleBreadcrumb:ScaleBreadcrumb},props:Object.assign({label:String},ScaleBreadcrumb.props),template:'\n    <scale-breadcrumb\n      :separator="separator"\n      :styles="styles"\n    >\n      <a href="#1">Home</a>\n      <a href="#2">Page 1</a>\n      <a href="#2">Page 2</a>\n      <a href="#3">Current Page</a>\n      <template v-if="separator === true" #separator>\n        <span slot="separator">\n          <scale-icon-navigation-right size={12} color="#6B6B6B"></scale-icon-navigation-right>\n        </span>\n      </template>\n    </scale-breadcrumb>\n  '}},layoutProps={Template:Breadcrumb_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Breadcrumb",component:ScaleBreadcrumb,argTypes:{separator:{control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Breadcrumb"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},Breadcrumb_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-breadcrumb separator="---">\n  <a href="#1">First link</a>\n  <a href="#2">Second link</a>\n  <a href="#3">Third link</a>\n</scale-breadcrumb>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --spacing-left: calc(-1 * var(--telekom-spacing-composition-space-04));\n\n  --font-size-list-item: var(--telekom-typography-font-size-caption);\n\n  --color-separator: var(--telekom-color-text-and-icon-additional);\n\n  --spacing-y-item: var(--telekom-spacing-composition-space-03);\n  --spacing-x-item: var(--telekom-spacing-composition-space-04);\n\n  --color-link: var(--telekom-color-text-and-icon-additional);\n  --radius-link: var(--telekom-radius-standard);\n  --color-link-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-link-active: var(--telekom-color-text-and-icon-primary-pressed);\n\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --font-current: var(--telekom-text-style-caption-bold);\n  --color-current: var(--telekom-color-text-and-icon-standard);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."))}MDXContent.isMDXComponent=!0;var standard=Breadcrumb_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleBreadcrumb\n  },\n  props: {\n    label: String,\n    ...ScaleBreadcrumb.props\n  },\n  template: `\n    <scale-breadcrumb\n      :separator="separator"\n      :styles="styles"\n    >\n      <a href="#1">Home</a>\n      <a href="#2">Page 1</a>\n      <a href="#2">Page 2</a>\n      <a href="#3">Current Page</a>\n      <template v-if="separator === true" #separator>\n        <span slot="separator">\n          <scale-icon-navigation-right size={12} color="#6B6B6B"></scale-icon-navigation-right>\n        </span>\n      </template>\n    </scale-breadcrumb>\n  `\n})'}};var componentMeta={title:"Components/Breadcrumb",component:ScaleBreadcrumb,argTypes:{separator:{control:{type:"text"}}},includeStories:["standard"]},mdxStoryNameToKey={Standard:"standard"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/button/Button.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Button_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"secondary",(function(){return secondary})),__webpack_require__.d(__webpack_exports__,"secondaryWhite",(function(){return secondaryWhite})),__webpack_require__.d(__webpack_exports__,"ghostStandard",(function(){return ghostStandard})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"secondaryDisabled",(function(){return secondaryDisabled})),__webpack_require__.d(__webpack_exports__,"ghostDisabled",(function(){return ghostDisabled})),__webpack_require__.d(__webpack_exports__,"withIconBefore",(function(){return withIconBefore})),__webpack_require__.d(__webpack_exports__,"withIconAfter",(function(){return withIconAfter})),__webpack_require__.d(__webpack_exports__,"iconOnly",(function(){return iconOnly})),__webpack_require__.d(__webpack_exports__,"link",(function(){return Button_stories_link})),__webpack_require__.d(__webpack_exports__,"linkDownload",(function(){return linkDownload})),__webpack_require__.d(__webpack_exports__,"externalLink",(function(){return externalLink})),__webpack_require__.d(__webpack_exports__,"smallStandard",(function(){return smallStandard})),__webpack_require__.d(__webpack_exports__,"smallSecondary",(function(){return smallSecondary})),__webpack_require__.d(__webpack_exports__,"smallDisabled",(function(){return smallDisabled})),__webpack_require__.d(__webpack_exports__,"smallSecondaryDisabled",(function(){return smallSecondaryDisabled})),__webpack_require__.d(__webpack_exports__,"smallWithIconBefore",(function(){return smallWithIconBefore})),__webpack_require__.d(__webpack_exports__,"smallWithIconAfter",(function(){return smallWithIconAfter})),__webpack_require__.d(__webpack_exports__,"smallIconOnly",(function(){return smallIconOnly})),__webpack_require__.d(__webpack_exports__,"smallLink",(function(){return smallLink})),__webpack_require__.d(__webpack_exports__,"smallLinkDownload",(function(){return smallLinkDownload}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),handler=Object(addon_actions_dist_esm.action)("click"),button_ScaleButtonvue_type_script_lang_js_={props:{disabled:Boolean,href:String,download:String,type:String,name:String,value:String,target:String,variant:String,size:String,iconOnly:Boolean,innerTabindex:Number,innerAriaLabel:String,styles:String},methods:{handler:handler}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(button_ScaleButtonvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-button",{attrs:{disabled:_vm.disabled,href:_vm.href,download:_vm.download,target:_vm.target,size:_vm.size,type:_vm.type,name:_vm.name,value:_vm.value,variant:_vm.variant,"icon-only":_vm.iconOnly,"inner-tabindex":_vm.innerTabindex,"inner-aria-label":_vm.innerAriaLabel,styles:_vm.styles},on:{click:_vm.handler}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleButton=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleButton",description:"",tags:{},props:[{name:"disabled",type:{name:"boolean"}},{name:"href",type:{name:"string"}},{name:"download",type:{name:"string"}},{name:"type",type:{name:"string"}},{name:"name",type:{name:"string"}},{name:"value",type:{name:"string"}},{name:"target",type:{name:"string"}},{name:"variant",type:{name:"string"}},{name:"size",type:{name:"string"}},{name:"iconOnly",type:{name:"boolean"}},{name:"innerTabindex",type:{name:"number"}},{name:"innerAriaLabel",type:{name:"string"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var Button_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleButton:ScaleButton},props:Object.assign({label:String,icon:String},ScaleButton.props),template:'\n  <div style="'+("secondary-white"===args.variant?"background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);":"")+'">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  '}},layoutProps={Template:Button_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Button",component:ScaleButton,argTypes:{size:{control:{type:"select",options:["large","small"]}},variant:{control:{type:"select",options:["primary","secondary","ghost"]}},type:{control:{type:"select",options:["reset","submit","button"]}},label:{defaultValue:"Label",control:{type:"text"}},disabled:{control:{type:"boolean"}},download:{control:{type:"text"}},innerAriaLabel:{control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Button"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Label"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-button>Label</scale-button>\n")),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: auto;\n  --spacing-x-right: var(--telekom-spacing-composition-space-07);\n  --spacing-x-left: var(--telekom-spacing-composition-space-07);\n  --spacing-x-icon-only: var(--telekom-spacing-composition-space-05);\n  --min-height: var(--telekom-spacing-composition-space-13);\n  --min-width: var(--telekom-spacing-composition-space-13);\n  --radius: var(--telekom-radius-standard);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --color-focus: var(--telekom-color-functional-focus-standard);\n  --font-weight: var(--telekom-typography-font-weight-bold);\n  --font-size: var(--telekom-typography-font-size-body);\n  --line-height: var(--telekom-typography-line-spacing-tight);\n  --spacing-icon-x: var(--telekom-spacing-composition-space-04);\n  --vertical-align: middle;\n\n  /* size: small */\n  --font-size-small: var(--telekom-typography-font-size-caption);\n  --line-height-small: 1.125rem;\n  --min-height-small: var(--telekom-spacing-composition-space-10);\n  --spacing-x-right-small: var(--telekom-spacing-composition-space-06);\n  --spacing-x-left-small: var(--telekom-spacing-composition-space-06);\n  --spacing-x-icon-only-small: var(--telekom-spacing-composition-space-00);\n  --spacing-icon-x-small: var(--telekom-spacing-composition-space-03);\n\n  /* variant: primary */\n  --radius-primary: var(--radius);\n  --background-primary: var(--telekom-color-primary-standard);\n  --background-primary-hover: var(--telekom-color-primary-hovered);\n  --background-primary-active: var(--telekom-color-primary-pressed);\n  --background-primary-disabled: var(--telekom-color-ui-disabled);\n  --color-primary: var(--telekom-color-text-and-icon-white-standard);\n  --color-primary-disabled: var(--telekom-color-text-and-icon-disabled);\n\n  /* variant: secondary */\n  --radius-secondary: var(--radius);\n  --border-width-secondary: var(--telekom-spacing-composition-space-01);\n  --background-secondary: transparent;\n  --color-secondary: var(--telekom-color-text-and-icon-standard);\n  --color-secondary-hover: var(--telekom-color-text-and-icon-standard);\n  --color-secondary-active: var(--telekom-color-text-and-icon-standard);\n  --color-secondary-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-secondary: var(--telekom-color-ui-state-fill-standard);\n  --background-secondary-hover: var(--telekom-color-ui-state-fill-hovered);\n  --background-secondary-active: var(--telekom-color-ui-state-fill-pressed);\n  --background-secondary-disabled: none;\n  --border-secondary: var(--telekom-color-ui-border-standard);\n  --border-secondary-hover: var(--telekom-color-ui-border-hovered);\n  --border-secondary-active: var(--telekom-color-ui-border-pressed);\n  --border-secondary-focus: var(--telekom-color-functional-focus-standard);\n\n  /* variant: secondary white */\n  --border-secondary-white: var(--telekom-color-ui-white);\n  --color-secondary-white: var(--telekom-color-ui-white);\n  --background-secondary-white-hover: var(\n    --telekom-color-ui-state-fill-hovered-inverted\n  );\n  --background-secondary-white-active: var(\n    --telekom-color-ui-state-fill-pressed-inverted\n  );\n  --secondary-white-opacity: 0.5;\n\n  /* variant: ghost */\n  --radius-ghost: var(--radius);\n  --border-width-ghost: var(--telekom-spacing-composition-space-01);\n  --spacing-x-ghost: var(--telekom-spacing-composition-space-04);\n  --color-ghost: var(--telekom-color-text-and-icon-primary-standard);\n  --color-ghost-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-ghost-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --color-ghost-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-ghost-hover: var(--telekom-color-ui-state-fill-hovered);\n  --background-ghost-active: var(--telekom-color-ui-state-fill-pressed);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"secondary"},"Secondary"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Secondary",args:{variant:"secondary"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button variant="secondary">Label</scale-button>\n')),Object(esm.b)("h2",{id:"secondary-white"},"Secondary White"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Secondary White",args:{variant:"secondary-white"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button variant="secondary-white">Label</scale-button>\n')),Object(esm.b)("h2",{id:"ghost-standard"},"Ghost Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Ghost Standard",args:{variant:"ghost"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button variant="secondary-white">Label</scale-button>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{disabled:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-button disabled>Label</scale-button>\n")),Object(esm.b)("h2",{id:"secondary-disabled"},"Secondary Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Secondary Disabled",args:{variant:"secondary",disabled:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button variant="secondary" disabled>Label</scale-button>\n')),Object(esm.b)("h2",{id:"ghost-disabled"},"Ghost Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Ghost Disabled",args:{variant:"ghost",disabled:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button variant="secondary" disabled>Label</scale-button>\n')),Object(esm.b)("h2",{id:"with-icon-before"},"With Icon Before"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Icon Before",args:{icon:"before"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-button>\n  <scale-icon-content-heart></scale-icon-content-heart> Label\n</scale-button>\n")),Object(esm.b)("h2",{id:"with-icon-after"},"With Icon After"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Icon After",args:{icon:"after"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button icon-position="after">\n  Label <scale-icon-navigation-right></scale-icon-navigation-right>\n</scale-button>\n')),Object(esm.b)("h2",{id:"icon-only"},"Icon Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon Only",args:{size:"large",iconOnly:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button icon-only>\n  <scale-icon-content-heart accessibility-title="like" />\n</scale-button>\n')),Object(esm.b)("h2",{id:"link"},"Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Link",args:{href:"https://example.com",target:"_blank"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button href="https://example.com" target="_blank">Label</scale-button>\n')),Object(esm.b)("h2",{id:"link-download"},"Link Download"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Link Download",args:{href:"assets/welcome.png",download:"welcome.png",label:"Download"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button href="assets/welcome.png" download="welcome.png"\n  >Download</scale-button\n>\n')),Object(esm.b)("h2",{id:"external-link"},"External Link"),Object(esm.b)("p",null,"If the button with a link is used to point the user to an external address, then the user should be informed of this.\nWe recommend using an icon (visually) and an additional caption for screen readers.\nIf the icon is an ",Object(esm.b)("inlineCode",{parentName:"p"},"img")," element, its ",Object(esm.b)("inlineCode",{parentName:"p"},"alt")," attribute should be empty."),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"External link",args:{href:"https://example.com",target:"_blank",label:"Label",icon:"external"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button href="https://example.com" target="_blank">\n  External link, opens in new tab\n  <scale-icon-navigation-external-link\n    accesibility-title="External link, opens in new tab"\n  ></scale-icon-navigation-external-link>\n</scale-button>\n')),Object(esm.b)("h2",{id:"small-standard"},"Small Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Standard",args:{size:"small",label:"Label"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small">Label</scale-button>\n')),Object(esm.b)("h2",{id:"small-secondary"},"Small Secondary"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Secondary",args:{size:"small",variant:"secondary"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small" variant="secondary">Label</scale-button>\n')),Object(esm.b)("h2",{id:"small-disabled"},"Small Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Disabled",args:{size:"small",disabled:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small" disabled>Label</scale-button>\n')),Object(esm.b)("h2",{id:"small-secondary-disabled"},"Small Secondary Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Secondary Disabled",args:{size:"small",variant:"secondary",disabled:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small" variant="secondary" disabled>Label</scale-button>\n')),Object(esm.b)("h2",{id:"small-with-icon-before"},"Small With Icon Before"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small With Icon Before",args:{size:"small",icon:"before"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small">\n  <scale-icon-action-search></scale-icon-action-search> Label\n</scale-button>\n')),Object(esm.b)("h2",{id:"small-with-icon-after"},"Small With Icon After"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small With Icon After",args:{size:"small",icon:"after"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small">\n  Label <scale-icon-navigation-right></scale-icon-navigation-right>\n</scale-button>\n')),Object(esm.b)("h2",{id:"small-icon-only"},"Small Icon Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Icon Only",args:{size:"small",iconOnly:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small">\n  <scale-icon-navigation-external-link\n    accessibility-title="External link, opens in new tab"\n  ></scale-icon-navigation-external-link>\n</scale-button>\n')),Object(esm.b)("h2",{id:"small-link"},"Small Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Link",args:{size:"small",href:"https://example.com",target:"_blank"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small" href="https://example.com" target="_blank">\n  Label\n</scale-button>\n')),Object(esm.b)("h2",{id:"small-link-download"},"Small Link Download"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Link Download",args:{size:"small",href:"assets/welcome.png",download:"welcome.png",label:"Download"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small" icon-only>\n  <scale-icon-action-add accessibility-title="add"></scale-icon-action-add>\n</scale-button>\n')))}MDXContent.isMDXComponent=!0;var standard=Button_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Label"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var secondary=Button_stories_Template.bind({});secondary.storyName="Secondary",secondary.args={variant:"secondary"},secondary.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var secondaryWhite=Button_stories_Template.bind({});secondaryWhite.storyName="Secondary White",secondaryWhite.args={variant:"secondary-white"},secondaryWhite.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var ghostStandard=Button_stories_Template.bind({});ghostStandard.storyName="Ghost Standard",ghostStandard.args={variant:"ghost"},ghostStandard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var disabled=Button_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var secondaryDisabled=Button_stories_Template.bind({});secondaryDisabled.storyName="Secondary Disabled",secondaryDisabled.args={variant:"secondary",disabled:!0},secondaryDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var ghostDisabled=Button_stories_Template.bind({});ghostDisabled.storyName="Ghost Disabled",ghostDisabled.args={variant:"ghost",disabled:!0},ghostDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var withIconBefore=Button_stories_Template.bind({});withIconBefore.storyName="With Icon Before",withIconBefore.args={icon:"before"},withIconBefore.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var withIconAfter=Button_stories_Template.bind({});withIconAfter.storyName="With Icon After",withIconAfter.args={icon:"after"},withIconAfter.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var iconOnly=Button_stories_Template.bind({});iconOnly.storyName="Icon Only",iconOnly.args={size:"large",iconOnly:!0},iconOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var Button_stories_link=Button_stories_Template.bind({});Button_stories_link.storyName="Link",Button_stories_link.args={href:"https://example.com",target:"_blank"},Button_stories_link.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var linkDownload=Button_stories_Template.bind({});linkDownload.storyName="Link Download",linkDownload.args={href:"assets/welcome.png",download:"welcome.png",label:"Download"},linkDownload.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var externalLink=Button_stories_Template.bind({});externalLink.storyName="External link",externalLink.args={href:"https://example.com",target:"_blank",label:"Label",icon:"external"},externalLink.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallStandard=Button_stories_Template.bind({});smallStandard.storyName="Small Standard",smallStandard.args={size:"small",label:"Label"},smallStandard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallSecondary=Button_stories_Template.bind({});smallSecondary.storyName="Small Secondary",smallSecondary.args={size:"small",variant:"secondary"},smallSecondary.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallDisabled=Button_stories_Template.bind({});smallDisabled.storyName="Small Disabled",smallDisabled.args={size:"small",disabled:!0},smallDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallSecondaryDisabled=Button_stories_Template.bind({});smallSecondaryDisabled.storyName="Small Secondary Disabled",smallSecondaryDisabled.args={size:"small",variant:"secondary",disabled:!0},smallSecondaryDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallWithIconBefore=Button_stories_Template.bind({});smallWithIconBefore.storyName="Small With Icon Before",smallWithIconBefore.args={size:"small",icon:"before"},smallWithIconBefore.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallWithIconAfter=Button_stories_Template.bind({});smallWithIconAfter.storyName="Small With Icon After",smallWithIconAfter.args={size:"small",icon:"after"},smallWithIconAfter.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallIconOnly=Button_stories_Template.bind({});smallIconOnly.storyName="Small Icon Only",smallIconOnly.args={size:"small",iconOnly:!0},smallIconOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallLink=Button_stories_Template.bind({});smallLink.storyName="Small Link",smallLink.args={size:"small",href:"https://example.com",target:"_blank"},smallLink.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallLinkDownload=Button_stories_Template.bind({});smallLinkDownload.storyName="Small Link Download",smallLinkDownload.args={size:"small",href:"assets/welcome.png",download:"welcome.png",label:"Download"},smallLinkDownload.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var componentMeta={title:"Components/Button",component:ScaleButton,argTypes:{size:{control:{type:"select",options:["large","small"]}},variant:{control:{type:"select",options:["primary","secondary","ghost"]}},type:{control:{type:"select",options:["reset","submit","button"]}},label:{defaultValue:"Label",control:{type:"text"}},disabled:{control:{type:"boolean"}},download:{control:{type:"text"}},innerAriaLabel:{control:{type:"text"}}},includeStories:["standard","secondary","secondaryWhite","ghostStandard","disabled","secondaryDisabled","ghostDisabled","withIconBefore","withIconAfter","iconOnly","link","linkDownload","externalLink","smallStandard","smallSecondary","smallDisabled","smallSecondaryDisabled","smallWithIconBefore","smallWithIconAfter","smallIconOnly","smallLink","smallLinkDownload"]},mdxStoryNameToKey={Standard:"standard",Secondary:"secondary","Secondary White":"secondaryWhite","Ghost Standard":"ghostStandard",Disabled:"disabled","Secondary Disabled":"secondaryDisabled","Ghost Disabled":"ghostDisabled","With Icon Before":"withIconBefore","With Icon After":"withIconAfter","Icon Only":"iconOnly",Link:"link","Link Download":"linkDownload","External link":"externalLink","Small Standard":"smallStandard","Small Secondary":"smallSecondary","Small Disabled":"smallDisabled","Small Secondary Disabled":"smallSecondaryDisabled","Small With Icon Before":"smallWithIconBefore","Small With Icon After":"smallWithIconAfter","Small Icon Only":"smallIconOnly","Small Link":"smallLink","Small Link Download":"smallLinkDownload"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/callout/Callout.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"CANVAS_HEIGHT",(function(){return CANVAS_HEIGHT})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return Callout_stories_standard})),__webpack_require__.d(__webpack_exports__,"primary",(function(){return primary})),__webpack_require__.d(__webpack_exports__,"black",(function(){return black})),__webpack_require__.d(__webpack_exports__,"white",(function(){return white})),__webpack_require__.d(__webpack_exports__,"blue",(function(){return blue})),__webpack_require__.d(__webpack_exports__,"medium",(function(){return medium})),__webpack_require__.d(__webpack_exports__,"largeAndSmall",(function(){return largeAndSmall}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),callout_ScaleCalloutvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{variant:{type:String,default:""},rotation:{type:Number,default:0},top:{type:String},right:{type:String},bottom:{type:String},left:{type:String},styles:{type:String}},render:function render(){return this.$slots.default}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(callout_ScaleCalloutvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleCallout=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleCallout",description:"",tags:{},props:[{name:"variant",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"rotation",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"top",type:{name:"string"}},{name:"right",type:{name:"string"}},{name:"bottom",type:{name:"string"}},{name:"left",type:{name:"string"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var CANVAS_HEIGHT=204,layoutProps={CANVAS_HEIGHT:CANVAS_HEIGHT};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Beta Components/Callout",component:ScaleCallout,argTypes:{variant:{options:["standard","primary","blue","white","black"],defaultValue:"standard",control:{type:"select"}},rotation:{defaultValue:0,control:{type:"number"}},top:{control:{type:"text"}},right:{control:{type:"text"}},bottom:{control:{type:"text"}},left:{control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Callout"),Object(esm.b)("img",{src:"assets/beta.png",alt:"Beta Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{variant:"primary"},mdxType:"Story"},{props:Object.assign({},ScaleCallout.props),template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout\n            :variant="variant"\n            :rotation="rotation"\n            :top="top"\n            :right="right"\n            :bottom="bottom"\n            :left="left"\n          >\n            <span class="scl-callout-text-small">Starting at</span>\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="primary">\n  <span class="scl-callout-text-small">Starting at</span>\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n  <span class="scl-callout-text-small">for 4 weeks</span>\n</scale-callout>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"}," :host {\n  --position: absolute;\n  --background: var(--telekom-color-ui-extra-strong);\n  --color: var(--telekom-color-text-and-icon-inverted-standard);\n  --spacing: var(--telekom-spacing-composition-space-10);\n  --min-width: 6rem;\n  --aspect-ratio: 1 / 1;\n  --rotation: 0deg;\n  --font-small: var(--telekom-text-style-body-bold);\n  --font-medium: var(--telekom-text-style-body-bold);\n  --font-large: var(--telekom-text-style-heading-1);\n}\n")),Object(esm.b)("h2",{id:"variants"},"Variants"),Object(esm.b)("h3",{id:"primary"},"Primary"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Primary",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="primary">\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n</scale-callout>\n')),Object(esm.b)("h3",{id:"black"},"Black"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Black",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="black">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="black">\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n</scale-callout>\n')),Object(esm.b)("h3",{id:"white"},"White"),Object(esm.b)(dist_esm.c,{withSource:"none",style:{background:"#222"},mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"White",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="white">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="white">\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n</scale-callout>\n')),Object(esm.b)("h3",{id:"blue"},"Blue"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Blue",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="blue">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="blue">\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n</scale-callout>\n')),Object(esm.b)("h2",{id:"font-sizes"},"Font Sizes"),Object(esm.b)("h3",{id:"medium"},"Medium"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Medium",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="black">\n            <span>Up to 200 &#8364;</span>\n            <span>Exchange premium +</span>\n            <span>receive old appliance</span>\n            <span>value *</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="black">\n  <span>Up to 200 &#8364;</span>\n  <span>Exchange premium +</span>\n  <span>receive old appliance</span>\n  <span>value *</span>\n</scale-callout>\n')),Object(esm.b)("h3",{id:"large-and-small"},"Large and Small"),Object(esm.b)("p",null,"For convenience, two scoped CSS classes are provided for large and small text: ",Object(esm.b)("inlineCode",{parentName:"p"},"scl-callout-text-large")," and ",Object(esm.b)("inlineCode",{parentName:"p"},"scl-callout-text-small"),". But any size can be set using CSS."),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large and Small",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="primary">\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n  <span class="scl-callout-text-small">for 4 weeks</span>\n</scale-callout>\n')))}MDXContent.isMDXComponent=!0;var Callout_stories_standard=function standard(){return{props:Object.assign({},ScaleCallout.props),template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout\n            :variant="variant"\n            :rotation="rotation"\n            :top="top"\n            :right="right"\n            :bottom="bottom"\n            :left="left"\n          >\n            <span class="scl-callout-text-small">Starting at</span>\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      '}};Callout_stories_standard.storyName="Standard",Callout_stories_standard.args={variant:"primary"},Callout_stories_standard.parameters={storySource:{source:'{\n  props: { ...ScaleCallout.props\n  },\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout\n            :variant="variant"\n            :rotation="rotation"\n            :top="top"\n            :right="right"\n            :bottom="bottom"\n            :left="left"\n          >\n            <span class="scl-callout-text-small">Starting at</span>\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var primary=function primary(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '}};primary.storyName="Primary",primary.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var black=function black(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="black">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '}};black.storyName="Black",black.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="black">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var white=function white(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="white">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '}};white.storyName="White",white.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="white">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var blue=function blue(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="blue">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '}};blue.storyName="Blue",blue.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="blue">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var medium=function medium(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="black">\n            <span>Up to 200 &#8364;</span>\n            <span>Exchange premium +</span>\n            <span>receive old appliance</span>\n            <span>value *</span>\n          </scale-callout>\n        </div>\n      '}};medium.storyName="Medium",medium.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="black">\n            <span>Up to 200 &#8364;</span>\n            <span>Exchange premium +</span>\n            <span>receive old appliance</span>\n            <span>value *</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var largeAndSmall=function largeAndSmall(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      '}};largeAndSmall.storyName="Large and Small",largeAndSmall.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var componentMeta={title:"Beta Components/Callout",component:ScaleCallout,argTypes:{variant:{options:["standard","primary","blue","white","black"],defaultValue:"standard",control:{type:"select"}},rotation:{defaultValue:0,control:{type:"number"}},top:{control:{type:"text"}},right:{control:{type:"text"}},bottom:{control:{type:"text"}},left:{control:{type:"text"}}},includeStories:["standard","primary","black","white","blue","medium","largeAndSmall"]},mdxStoryNameToKey={Standard:"standard",Primary:"primary",Black:"black",White:"white",Blue:"blue",Medium:"medium","Large and Small":"largeAndSmall"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/card/Card.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Card_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"withLink",(function(){return withLink})),__webpack_require__.d(__webpack_exports__,"withImage",(function(){return withImage}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),card_ScaleCardvue_type_script_lang_js_={props:{label:String,to:String,target:{type:String,default:"_self"},rel:{type:String,default:"_self"},styles:{type:String}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(card_ScaleCardvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-card",{attrs:{label:this.label,to:this.to,target:this.target,rel:this.rel,styles:this.styles}},[this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleCard=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleCard",description:"",tags:{},props:[{name:"label",type:{name:"string"}},{name:"to",type:{name:"string"}},{name:"target",type:{name:"string"},defaultValue:{func:!1,value:'"_self"'}},{name:"rel",type:{name:"string"},defaultValue:{func:!1,value:'"_self"'}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var Card_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleCard:ScaleCard},props:Object.assign({slot:String},ScaleCard.props),template:'\n    <div :style="{ maxWidth: slot.startsWith(\'<div\') ? \'300px\'  : \'auto\' }">\n        <scale-card\n              :to="to"\n              :target="target"\n              :label="label"\n              :rel="rel"\n              :styles="styles"\n            >\n                <div v-if="slot.startsWith(\'<div\')">\n                    <div style="margin: -24px;">\n                      <img style="display: block; width:100%;" src="assets/card-image.jpg" alt="placeholder" />\n                      <div style="padding: 24px;"> \n                        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                        <span style="font: var(--telekom-text-style-body);"> Lorem ipsur dolor sit amet </span>\n                      </div>\n                    </div>\n                </div>\n                <div v-if="slot.startsWith(\'<span\')">\n                  <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                  <span> Lorem ipsur dolor sit amet </span>\n                </div>\n                <div v-if="!slot.startsWith(\'<span\') && !slot.startsWith(\'<div\')">\n                  {{ slot }}\n                </div>                \n        </scale-card>\n    </div>\n  '}},layoutProps={Template:Card_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Card",component:ScaleCard,argTypes:{label:{control:{type:"text"}},styles:{control:{type:String}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Card"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{slot:"<span>Lorem ipsur dolor sit amet</span>",label:"Example Card"},mdxType:"Story"},Card_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --background: var(--telekom-color-background-surface);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --radius: var(--telekom-radius-large);\n  --box-shadow: var(--telekom-shadow-raised-standard);\n  --box-shadow-hover: var(--telekom-shadow-raised-hover);\n  --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);\n  --box-shadow-active: var(--telekom-shadow-raised-pressed);\n\n  --spacing-body: var(--telekom-spacing-composition-space-08);\n\n  --spacing-body-slotted: 0;\n  --spacing-body-slotted-interactive: 0;\n\n  --font-body-slotted: var(--telekom-text-style-body);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"with-link"},"With Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Link",args:{slot:"Lorem ipsur dolor sit amet",to:"https://example.com",target:"_blank",rel:"noopener noreferrer"},mdxType:"Story"},Card_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-card\n  to="https://example.com"\n  to="_blank"\n  target="_blank"\n  rel="noopener noreferrer"\n  label="Example Card"\n  >Lorem ipsur dolor sit amet</scale-card\n>\n')),Object(esm.b)("h2",{id:"with-image"},"With Image"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Image",args:{slot:'<div style="margin: -24px;">\n        <img style="display:block; width:100%;" src="assets/card-image" alt="placeholder" />\n        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);"> Title </h4>\n        <div style="padding: 24px;">Lorem ipsur dolor sit amet</div>\n      </div>\n      ',to:"https://example.com",target:"_blank",rel:"noopener noreferrer"},mdxType:"Story"},Card_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div style="max-width: 200px;">\n  <scale-card to="https://example.com" target="_blank">\n    <div style="margin: -24px;">\n      <img\n        style="margin-bottom: -4px; width:100%;"\n        src="assets/card-image"\n        alt="placeholder"\n      />\n      <div style="padding: 24px;"> \n        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n        <span>Lorem ipsur dolor sit amet</span>\n      </div>\n    </div>\n  </scale-card>\n</div>\n')))}MDXContent.isMDXComponent=!0;var standard=Card_stories_Template.bind({});standard.storyName="Standard",standard.args={slot:"<span>Lorem ipsur dolor sit amet</span>",label:"Example Card"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleCard\n  },\n  props: {\n    slot: String,\n    ...ScaleCard.props\n  },\n  template: `\n    <div :style="{ maxWidth: slot.startsWith(\'<div\') ? \'300px\'  : \'auto\' }">\n        <scale-card\n              :to="to"\n              :target="target"\n              :label="label"\n              :rel="rel"\n              :styles="styles"\n            >\n                <div v-if="slot.startsWith(\'<div\')">\n                    <div style="margin: -24px;">\n                      <img style="display: block; width:100%;" src="assets/card-image.jpg" alt="placeholder" />\n                      <div style="padding: 24px;"> \n                        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                        <span style="${\'font: var(--telekom-text-style-body);\'}"> Lorem ipsur dolor sit amet </span>\n                      </div>\n                    </div>\n                </div>\n                <div v-if="slot.startsWith(\'<span\')">\n                  <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                  <span> Lorem ipsur dolor sit amet </span>\n                </div>\n                <div v-if="!slot.startsWith(\'<span\') && !slot.startsWith(\'<div\')">\n                  {{ slot }}\n                </div>                \n        </scale-card>\n    </div>\n  `\n})'}};var withLink=Card_stories_Template.bind({});withLink.storyName="With Link",withLink.args={slot:"Lorem ipsur dolor sit amet",to:"https://example.com",target:"_blank",rel:"noopener noreferrer"},withLink.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleCard\n  },\n  props: {\n    slot: String,\n    ...ScaleCard.props\n  },\n  template: `\n    <div :style="{ maxWidth: slot.startsWith(\'<div\') ? \'300px\'  : \'auto\' }">\n        <scale-card\n              :to="to"\n              :target="target"\n              :label="label"\n              :rel="rel"\n              :styles="styles"\n            >\n                <div v-if="slot.startsWith(\'<div\')">\n                    <div style="margin: -24px;">\n                      <img style="display: block; width:100%;" src="assets/card-image.jpg" alt="placeholder" />\n                      <div style="padding: 24px;"> \n                        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                        <span style="${\'font: var(--telekom-text-style-body);\'}"> Lorem ipsur dolor sit amet </span>\n                      </div>\n                    </div>\n                </div>\n                <div v-if="slot.startsWith(\'<span\')">\n                  <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                  <span> Lorem ipsur dolor sit amet </span>\n                </div>\n                <div v-if="!slot.startsWith(\'<span\') && !slot.startsWith(\'<div\')">\n                  {{ slot }}\n                </div>                \n        </scale-card>\n    </div>\n  `\n})'}};var withImage=Card_stories_Template.bind({});withImage.storyName="With Image",withImage.args={slot:'<div style="margin: -24px;">\n        <img style="display:block; width:100%;" src="assets/card-image" alt="placeholder" />\n        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);"> Title </h4>\n        <div style="padding: 24px;">Lorem ipsur dolor sit amet</div>\n      </div>\n      ',to:"https://example.com",target:"_blank",rel:"noopener noreferrer"},withImage.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleCard\n  },\n  props: {\n    slot: String,\n    ...ScaleCard.props\n  },\n  template: `\n    <div :style="{ maxWidth: slot.startsWith(\'<div\') ? \'300px\'  : \'auto\' }">\n        <scale-card\n              :to="to"\n              :target="target"\n              :label="label"\n              :rel="rel"\n              :styles="styles"\n            >\n                <div v-if="slot.startsWith(\'<div\')">\n                    <div style="margin: -24px;">\n                      <img style="display: block; width:100%;" src="assets/card-image.jpg" alt="placeholder" />\n                      <div style="padding: 24px;"> \n                        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                        <span style="${\'font: var(--telekom-text-style-body);\'}"> Lorem ipsur dolor sit amet </span>\n                      </div>\n                    </div>\n                </div>\n                <div v-if="slot.startsWith(\'<span\')">\n                  <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                  <span> Lorem ipsur dolor sit amet </span>\n                </div>\n                <div v-if="!slot.startsWith(\'<span\') && !slot.startsWith(\'<div\')">\n                  {{ slot }}\n                </div>                \n        </scale-card>\n    </div>\n  `\n})'}};var componentMeta={title:"Components/Card",component:ScaleCard,argTypes:{label:{control:{type:"text"}},styles:{control:{type:String}}},includeStories:["standard","withLink","withImage"]},mdxStoryNameToKey={Standard:"standard","With Link":"withLink","With Image":"withImage"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/checkbox-group/CheckboxGroup.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"checkboxDisabled",(function(){return checkboxDisabled})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"checkboxError",(function(){return checkboxError})),__webpack_require__.d(__webpack_exports__,"groupError",(function(){return groupError}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),checkbox_group_ScaleCheckboxGroupvue_type_script_lang_js_={props:{name:{type:String},label:{type:String,default:""},helperText:{type:String},ariaLabelCheckboxGroup:{type:String},invalid:{type:Boolean},selectText:{type:String,default:"Select all"},unselectText:{type:String,default:"Unselect all"},value:{type:String,default:""},inputId:{type:String},styles:{type:String}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(checkbox_group_ScaleCheckboxGroupvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleCheckboxGroup=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleCheckboxGroup",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"helperText",type:{name:"string"}},{name:"ariaLabelCheckboxGroup",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"selectText",type:{name:"string"},defaultValue:{func:!1,value:"'Select all'"}},{name:"unselectText",type:{name:"string"},defaultValue:{func:!1,value:"'Unselect all'"}},{name:"value",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"inputId",type:{name:"string"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Checkbox Group",component:ScaleCheckboxGroup,argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Checkbox Group"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox  label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 2" name="example" value="2" checked></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  /* checkbox-group container */\n  --spacing-left-container: var(--telekom-spacing-composition-space-10);\n\n  /* checkbox-group checkbox */\n  --spacing-left-checkbox: var(--telekom-spacing-composition-space-04);\n\n  /* slotted item */\n  --spacing-top-slotted-item: var(--telekom-spacing-composition-space-05);\n}\n")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox-group label="Group Label" name="group" value="">\n  <scale-checkbox\n    label="Checkbox Item 1"\n    name="example"\n    value="1"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 2"\n    name="example"\n    value="2"\n    checked\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 3"\n    name="example"\n    value="3"\n  ></scale-checkbox>\n</scale-checkbox-group>\n')),Object(esm.b)("h2",{id:"checkbox-disabled"},"Checkbox Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Checkbox Disabled",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1" checked></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2" checked disabled></scale-checkbox>\n        </scale-checkbox-group>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox-group label="Group Label" name="group" value="">\n  <scale-checkbox\n    label="Checkbox Item 1"\n    name="example"\n    value="1"\n    checked\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 2"\n    name="example"\n    value="2"\n    checked\n    disabled\n  ></scale-checkbox>\n</scale-checkbox-group>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="" helper-text="Some info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox-group\n  label="Group Label"\n  name="group"\n  value=""\n  helper-text="Some info regarding the group"\n>\n  <scale-checkbox\n    label="Checkbox Item 1"\n    name="example"\n    value="1"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 2"\n    name="example"\n    value="2"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 3"\n    name="example"\n    value="3"\n  ></scale-checkbox>\n</scale-checkbox-group>\n')),Object(esm.b)("h2",{id:"checkbox-error"},"Checkbox Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Checkbox Error",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="" invalid helper-text="Some of the options have errors!">\n          <scale-checkbox invalid label="Checkbox Item 1" helper-text="This is an error!" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox checked label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox-group\n  label="Group Label"\n  name="group"\n  value=""\n  helper-text="Some info regarding the group"\n>\n  <scale-checkbox\n    invalid\n    label="Checkbox Item 1"\n    name="example"\n    value="1"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 2"\n    name="example"\n    value="2"\n  ></scale-checkbox>\n  <scale-checkbox\n    invalid\n    checked\n    label="Checkbox Item 3"\n    name="example"\n    value="3"\n  ></scale-checkbox>\n</scale-checkbox-group>\n')),Object(esm.b)("h2",{id:"group-error"},"Group Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Group Error",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox-group invalid label="Group Label" name="group" value="" helper-text="Some error info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox-group\n  label="Group Label"\n  name="group"\n  value=""\n  helper-text="Some info regarding the group"\n  invalid\n>\n  <scale-checkbox\n    label="Checkbox Item 1"\n    name="example"\n    value="1"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 2"\n    name="example"\n    value="2"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 3"\n    name="example"\n    value="3"\n  ></scale-checkbox>\n</scale-checkbox-group>\n')))}MDXContent.isMDXComponent=!0;var standard=function standard(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox  label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 2" name="example" value="2" checked></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}};standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox  label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 2" name="example" value="2" checked></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      `\n})'}};var checkboxDisabled=function checkboxDisabled(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1" checked></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2" checked disabled></scale-checkbox>\n        </scale-checkbox-group>\n      '}};checkboxDisabled.storyName="Checkbox Disabled",checkboxDisabled.args={},checkboxDisabled.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1" checked></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2" checked disabled></scale-checkbox>\n        </scale-checkbox-group>\n      `\n})'}};var helperText=function helperText(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="" helper-text="Some info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}};helperText.storyName="Helper Text",helperText.args={},helperText.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox-group label="Group Label" name="group" value="" helper-text="Some info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      `\n})'}};var checkboxError=function checkboxError(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="" invalid helper-text="Some of the options have errors!">\n          <scale-checkbox invalid label="Checkbox Item 1" helper-text="This is an error!" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox checked label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}};checkboxError.storyName="Checkbox Error",checkboxError.args={},checkboxError.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox-group label="Group Label" name="group" value="" invalid helper-text="Some of the options have errors!">\n          <scale-checkbox invalid label="Checkbox Item 1" helper-text="This is an error!" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox checked label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      `\n})'}};var groupError=function groupError(){return{template:'\n        <scale-checkbox-group invalid label="Group Label" name="group" value="" helper-text="Some error info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}};groupError.storyName="Group Error",groupError.args={},groupError.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox-group invalid label="Group Label" name="group" value="" helper-text="Some error info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      `\n})'}};var componentMeta={title:"Components/Checkbox Group",component:ScaleCheckboxGroup,argTypes:{},includeStories:["standard","checkboxDisabled","helperText","checkboxError","groupError"]},mdxStoryNameToKey={Standard:"standard","Checkbox Disabled":"checkboxDisabled","Helper Text":"helperText","Checkbox Error":"checkboxError","Group Error":"groupError"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/checkbox/Checkbox.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Checkbox_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"standardDisabled",(function(){return standardDisabled})),__webpack_require__.d(__webpack_exports__,"selected",(function(){return selected})),__webpack_require__.d(__webpack_exports__,"selectedDisabled",(function(){return selectedDisabled})),__webpack_require__.d(__webpack_exports__,"indeterminate",(function(){return indeterminate})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"customLabel",(function(){return customLabel}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),checkbox_ScaleCheckboxvue_type_script_lang_js_={props:{name:{type:String},label:{type:String},helperText:{type:String},invalid:{type:Boolean},disabled:{type:Boolean},checked:{type:Boolean},indeterminate:{type:Boolean},value:{type:String},inputId:{type:String},required:{type:Boolean},ariaLabelCheckbox:{type:String}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(checkbox_ScaleCheckboxvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-checkbox",{attrs:{name:_vm.name,label:_vm.label,"helper-text":_vm.helperText,invalid:_vm.invalid,disabled:_vm.disabled,checked:_vm.checked,indeterminate:_vm.indeterminate,value:_vm.value,"input-id":_vm.inputId,required:_vm.required,"aria-label-checkbox":_vm.ariaLabelCheckbox},on:{scaleChange:_vm.scaleChange}})}),[],!1,null,null,null).exports;var ScaleCheckbox=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleCheckbox",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"disabled",type:{name:"boolean"}},{name:"checked",type:{name:"boolean"}},{name:"indeterminate",type:{name:"boolean"}},{name:"value",type:{name:"string"}},{name:"inputId",type:{name:"string"}},{name:"required",type:{name:"boolean"}},{name:"ariaLabelCheckbox",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}]};var Checkbox_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({label:String},ScaleCheckbox.props),template:'\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  ',methods:{action:addon_actions_dist_esm.action}}},layoutProps={Template:Checkbox_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Checkbox",component:ScaleCheckbox,argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Checkbox"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Checkbox"},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-checkbox {\n  --spacing-x: var(--telekom-spacing-composition-space-04);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --color-text: var(--telekom-color-text-and-icon-standard);\n  --color-error: var(--telekom-color-functional-danger-standard);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  /* FIXME unused variable */\n  --color-standard: var(--telekom-color-background-surface);\n  --background-disabled: none;\n  --color-primary: var(--telekom-color-primary-standard);\n  --color-focus: var(--telekom-color-functional-focus-standard);\n  --color-primary-hover: var(--telekom-color-text-and-icon-standard);\n  --color-primary-active: var(--telekom-color-text-and-icon-standard);\n\n  /*control*/\n  --width-control: var(--telekom-spacing-composition-space-07);\n  --height-control: var(--telekom-spacing-composition-space-07);\n  --transition-control: var(--transition);\n  --spacing-control: var(--telekom-spacing-composition-space-02);\n  --spacing-left-control: var(--telekom-spacing-composition-space-03);\n  --radius-control: var(--telekom-radius-small);\n  --border-width-control: var(--telekom-line-weight-standard);\n\n  /*helper-text*/\n  --transition-helper-text: var(--transition);\n  --spacing-left-helper-text: calc(var(--width-control) + var(--spacing-x));\n  --font-size-helper-text: var(--telekom-typography-font-size-small);\n  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);\n  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);\n  --color-helper-text: var(\n    --telekom-color-text-and-icon-functional-informational\n  );\n  /*label*/\n  --font-weight-label: var(--telekom-typography-font-weight-medium);\n  --transition-label: var(--transition);\n\n  /*icon*/\n  --color-icon-checked-disabled: var(--telekom-color-text-and-icon-disabled);\n  --color-icon-checked-active: var(\n    --telekom-color-text-and-icon-white-standard\n  );\n  --width-icon: var(--telekom-spacing-composition-space-06);\n  --height-icon: var(--telekom-spacing-composition-space-06);\n  --stroke-width: var(--stroke-width-checkbox, 0.5px);\n}\n")),Object(esm.b)("h2",{id:"standard-disabled"},"Standard Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard Disabled",args:{label:"Standard Disabled",disabled:!0},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox disabled label="Standard Disabled"></scale-checkbox>\n')),Object(esm.b)("h2",{id:"selected"},"Selected"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Selected",args:{label:"Selected",checked:!0},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox checked label="Selected"></scale-checkbox>\n')),Object(esm.b)("h2",{id:"selected-disabled"},"Selected Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Selected Disabled",args:{label:"Selected Disabled",checked:!0,disabled:!0},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox checked disabled label="Selected Disabled"></scale-checkbox>\n')),Object(esm.b)("h2",{id:"indeterminate"},"Indeterminate"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Indeterminate",args:{label:"Indeterminate",indeterminate:!0},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox indeterminate label="Indeterminate"></scale-checkbox>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{label:"Helper Text",helperText:"Make sure to check this"},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox\n  label="Helper Text"\n  helper-text="Make sure to check this"\n></scale-checkbox>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{label:"Standard with error",invalid:!0,helperText:"This is the error message"},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox\n  label="Standard with error"\n  helper-text="This is the error message"\n  invalid\n></scale-checkbox>\n')),Object(esm.b)("h2",{id:"custom-label"},"Custom Label"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Label",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox>\n          <span style="display: flex; align-items: center">\n            Custom label &nbsp;<scale-icon-alert-imprint-dataprivacy></scale-icon-alert-imprint-dataprivacy>\n          </span>\n        </scale-checkbox>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox>\n  <span style="display: flex; align-items: center">\n    Custom label &nbsp;<scale-icon-alert-imprint-dataprivacy\n    ></scale-icon-alert-imprint-dataprivacy>\n  </span>\n</scale-checkbox>\n')))}MDXContent.isMDXComponent=!0;var standard=Checkbox_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Checkbox"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var standardDisabled=Checkbox_stories_Template.bind({});standardDisabled.storyName="Standard Disabled",standardDisabled.args={label:"Standard Disabled",disabled:!0},standardDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var selected=Checkbox_stories_Template.bind({});selected.storyName="Selected",selected.args={label:"Selected",checked:!0},selected.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var selectedDisabled=Checkbox_stories_Template.bind({});selectedDisabled.storyName="Selected Disabled",selectedDisabled.args={label:"Selected Disabled",checked:!0,disabled:!0},selectedDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var indeterminate=Checkbox_stories_Template.bind({});indeterminate.storyName="Indeterminate",indeterminate.args={label:"Indeterminate",indeterminate:!0},indeterminate.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var helperText=Checkbox_stories_Template.bind({});helperText.storyName="Helper Text",helperText.args={label:"Helper Text",helperText:"Make sure to check this"},helperText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var error=Checkbox_stories_Template.bind({});error.storyName="Error",error.args={label:"Standard with error",invalid:!0,helperText:"This is the error message"},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var customLabel=function customLabel(){return{template:'\n        <scale-checkbox>\n          <span style="display: flex; align-items: center">\n            Custom label &nbsp;<scale-icon-alert-imprint-dataprivacy></scale-icon-alert-imprint-dataprivacy>\n          </span>\n        </scale-checkbox>\n      '}};customLabel.storyName="Custom Label",customLabel.args={},customLabel.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox>\n          <span style="display: flex; align-items: center">\n            Custom label &nbsp;<scale-icon-alert-imprint-dataprivacy></scale-icon-alert-imprint-dataprivacy>\n          </span>\n        </scale-checkbox>\n      `\n})'}};var componentMeta={title:"Components/Checkbox",component:ScaleCheckbox,argTypes:{},includeStories:["standard","standardDisabled","selected","selectedDisabled","indeterminate","helperText","error","customLabel"]},mdxStoryNameToKey={Standard:"standard","Standard Disabled":"standardDisabled",Selected:"selected","Selected Disabled":"selectedDisabled",Indeterminate:"indeterminate","Helper Text":"helperText",Error:"error","Custom Label":"customLabel"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/chip/Chip.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Chip_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateIcon",(function(){return Chip_stories_TemplateIcon})),__webpack_require__.d(__webpack_exports__,"TemplateInteractive",(function(){return Chip_stories_TemplateInteractive})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"persistentStandard",(function(){return persistentStandard})),__webpack_require__.d(__webpack_exports__,"persistentStandardSelected",(function(){return persistentStandardSelected})),__webpack_require__.d(__webpack_exports__,"persistentStandardDisabled",(function(){return persistentStandardDisabled})),__webpack_require__.d(__webpack_exports__,"persistentStandardSelectedDisabled",(function(){return persistentStandardSelectedDisabled})),__webpack_require__.d(__webpack_exports__,"persistentOutline",(function(){return persistentOutline})),__webpack_require__.d(__webpack_exports__,"persistentOutlineSelected",(function(){return persistentOutlineSelected})),__webpack_require__.d(__webpack_exports__,"persistentOutlineDisabled",(function(){return persistentOutlineDisabled})),__webpack_require__.d(__webpack_exports__,"persistentOutlineSelectedDisabled",(function(){return persistentOutlineSelectedDisabled})),__webpack_require__.d(__webpack_exports__,"dynamicSuggestion",(function(){return dynamicSuggestion})),__webpack_require__.d(__webpack_exports__,"dynamicSelectionStandard",(function(){return dynamicSelectionStandard})),__webpack_require__.d(__webpack_exports__,"dynamicSelectionOutline",(function(){return dynamicSelectionOutline})),__webpack_require__.d(__webpack_exports__,"iconText",(function(){return iconText}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),chip_ScaleChipvue_type_script_lang_js_={props:{type:{type:0,default:"persistent"},variant:{type:0,default:"standard"},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},styles:{type:String},ariaRoleTitle:{type:String},ariaCheckedState:{type:Boolean}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},scaleClose:function scaleClose($event){Object(addon_actions_dist_esm.action)("scaleClose"),this.$emit("scaleClose",$event)},"scale-close":function scaleClose($event){Object(addon_actions_dist_esm.action)("scale-close"),this.$emit("scale-close",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(chip_ScaleChipvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-chip",{attrs:{type:_vm.type,variant:_vm.variant,selected:_vm.selected,"aria-checked-state":_vm.ariaCheckedState,"aria-role-title":_vm.ariaRoleTitle,disabled:_vm.disabled,styles:_vm.styles},on:{scaleChange:_vm.scaleChange,scaleClose:_vm.scaleClose}},[_vm._t("chip-icon"),_vm._v(" "),_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleChip=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleChip",description:"",tags:{},props:[{name:"type",type:{name:"'dynamic' | 'persistent'"},defaultValue:{func:!1,value:"'persistent'"}},{name:"variant",type:{name:"'standard' | 'outline'"},defaultValue:{func:!1,value:"'standard'"}},{name:"selected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"styles",type:{name:"string"}},{name:"ariaRoleTitle",type:{name:"string"}},{name:"ariaCheckedState",type:{name:"boolean"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}},{name:"scaleClose",type:{names:["undefined"]}},{name:"scale-close",type:{names:["undefined"]}}],slots:[{name:"chip-icon"},{name:"default"}]};var Chip_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({label:String},ScaleChip.props),template:'\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  ',methods:{action:addon_actions_dist_esm.action}}},Chip_stories_TemplateIcon=function TemplateIcon(args,_ref2){_ref2.argTypes;return{props:Object.assign({label:String},ScaleChip.props),template:'\n    <scale-chip\n      :selected="selected"\n      :type="type"\n      :label="label"\n      :disabled="disabled"\n      :styles="styles"\n      >\n      {{label}}\n      <div slot="chip-icon">\n        <scale-icon-action-favorite accessibility-title="favorite" />\n      </div>\n    </scale-chip>\n  ',methods:{action:addon_actions_dist_esm.action}}},Chip_stories_TemplateInteractive=function TemplateInteractive(args,_ref3){_ref3.argTypes;return{template:'\n  <div>\n    <div style="height: 20px;">Please select one option:</div>\n      <ul aria-label="selection" style="display: flex; list-style: none; padding: 0;">\n        <li v-for="label in labels" :key="label" style="margin-right: 4px;">\n          <scale-chip\n            type="dynamic"\n            v-bind:label=label\n            @scaleChange="removeChip(label)"\n          >\n            {{label}}\n          </scale-chip>\n        </li>\n       \n      </ul>   \n    </div>\n  ',methods:{action:Object(addon_actions_dist_esm.action)("scaleChange"),removeChip:function removeChip(label){var _this=this;this.action(),this.labels=null,this.text=this.label,setTimeout((function(){_this.$el.querySelector("#root > ul > li > scale-chip")&&_this.$el.querySelector("#root > ul > li > scale-chip").shadowRoot.querySelector("span > button").focus()}))}},data:function data(){return{labels:["option 1","option 2","option 3","option 4"]}}}},layoutProps={Template:Chip_stories_Template,TemplateIcon:Chip_stories_TemplateIcon,TemplateInteractive:Chip_stories_TemplateInteractive};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Chip",component:ScaleChip,argTypes:{variant:{control:{type:"select",options:["standard","outline"]}},type:{control:{type:"select",options:["dynamic","persistent"]}},disabled:{description:"only valid for persistent type"}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Chip"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Label"},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --height: 32px;\n\n  --font-size: var(--telekom-typography-font-size-body);\n  --line-height: var(--telekom-typography-line-spacing-standard);\n  --font-weight: var(--telekom-typography-font-weight-bold);\n  --color-focus: var(--telekom-color-functional-focus-standard);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1);\n\n  /*standard selected*/\n  --background-standard-selected: var(--telekom-color-ui-extra-strong);\n  --color-standard-selected: var(\n    --telekom-color-text-and-icon-inverted-standard\n  );\n}\n")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip>{{label}}</scale-chip>\n")),Object(esm.b)("h2",{id:"persistent"},"Persistent"),Object(esm.b)("br",null),Object(esm.b)("h3",{id:"persistent-standard"},"Persistent Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Standard",args:{label:"Label"},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip>Label</scale-chip>\n")),Object(esm.b)("h3",{id:"persistent-standard-selected"},"Persistent Standard Selected"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Standard Selected",args:{label:"Label",selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip selected>Label</scale-chip>\n")),Object(esm.b)("h3",{id:"persistent-standard-disabled"},"Persistent Standard Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Standard Disabled",args:{label:"Label",disabled:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip disabled selected>Label</scale-chip>\n")),Object(esm.b)("h3",{id:"persistent-standard-selected-disabled"},"Persistent Standard Selected Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Standard Selected Disabled",args:{label:"Label",disabled:!0,selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip disabled selected>Label</scale-chip>\n")),Object(esm.b)("h3",{id:"persistent-outline"},"Persistent Outline"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Outline",args:{label:"Label",variant:"outline"},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip variant="outline">Label</scale-chip>\n')),Object(esm.b)("h3",{id:"persistent-outline-selected"},"Persistent Outline Selected"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Outline Selected",args:{label:"Label",variant:"outline",selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip selected>Label</scale-chip>\n")),Object(esm.b)("h3",{id:"persistent-outline-disabled"},"Persistent Outline Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Outline Disabled",args:{variant:"outlined",label:"Label",disabled:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip disabled variant="outline" selected>Label</scale-chip>\n')),Object(esm.b)("h3",{id:"persistent-outline-selected-disabled"},"Persistent Outline Selected Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Outline Selected Disabled",args:{variant:"outlined",label:"Label",disabled:!0,selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip disabled variant="outline" selected>Label</scale-chip>\n')),Object(esm.b)("h2",{id:"dynamic"},"Dynamic"),Object(esm.b)("h3",{id:"dynamic-suggestion"},"Dynamic Suggestion"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dynamic Suggestion",args:{label:"Label",type:"dynamic",variant:"standard"},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip type="dynamic" variant="standard">Label</scale-chip>\n')),Object(esm.b)("h3",{id:"dynamic-selection-standard"},"Dynamic Selection Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dynamic Selection Standard",args:{label:"Label",type:"dynamic",variant:"standard",selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip type="dynamic" variant="standard" selected>Label</scale-chip>\n')),Object(esm.b)("h3",{id:"dynamic-selection-outline"},"Dynamic Selection Outline"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dynamic Selection Outline",args:{label:"Label",type:"dynamic",variant:"outline",selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip type="dynamic" selected variant="outline">Label</scale-chip>\n')),Object(esm.b)("h2",{id:"icon--text"},"Icon + Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon+Text",args:{label:"Label"},mdxType:"Story"},Chip_stories_TemplateIcon.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip\n  >Label\n  <div slot="chip-icon">\n    <scale-icon-action-favorite accessibility-title="favorite" />\n  </div>\n</scale-chip>\n')))}MDXContent.isMDXComponent=!0;var standard=Chip_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Label"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentStandard=Chip_stories_Template.bind({});persistentStandard.storyName="Persistent Standard",persistentStandard.args={label:"Label"},persistentStandard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentStandardSelected=Chip_stories_Template.bind({});persistentStandardSelected.storyName="Persistent Standard Selected",persistentStandardSelected.args={label:"Label",selected:!0},persistentStandardSelected.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentStandardDisabled=Chip_stories_Template.bind({});persistentStandardDisabled.storyName="Persistent Standard Disabled",persistentStandardDisabled.args={label:"Label",disabled:!0},persistentStandardDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentStandardSelectedDisabled=Chip_stories_Template.bind({});persistentStandardSelectedDisabled.storyName="Persistent Standard Selected Disabled",persistentStandardSelectedDisabled.args={label:"Label",disabled:!0,selected:!0},persistentStandardSelectedDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentOutline=Chip_stories_Template.bind({});persistentOutline.storyName="Persistent Outline",persistentOutline.args={label:"Label",variant:"outline"},persistentOutline.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentOutlineSelected=Chip_stories_Template.bind({});persistentOutlineSelected.storyName="Persistent Outline Selected",persistentOutlineSelected.args={label:"Label",variant:"outline",selected:!0},persistentOutlineSelected.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentOutlineDisabled=Chip_stories_Template.bind({});persistentOutlineDisabled.storyName="Persistent Outline Disabled",persistentOutlineDisabled.args={variant:"outlined",label:"Label",disabled:!0},persistentOutlineDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentOutlineSelectedDisabled=Chip_stories_Template.bind({});persistentOutlineSelectedDisabled.storyName="Persistent Outline Selected Disabled",persistentOutlineSelectedDisabled.args={variant:"outlined",label:"Label",disabled:!0,selected:!0},persistentOutlineSelectedDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var dynamicSuggestion=Chip_stories_Template.bind({});dynamicSuggestion.storyName="Dynamic Suggestion",dynamicSuggestion.args={label:"Label",type:"dynamic",variant:"standard"},dynamicSuggestion.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var dynamicSelectionStandard=Chip_stories_Template.bind({});dynamicSelectionStandard.storyName="Dynamic Selection Standard",dynamicSelectionStandard.args={label:"Label",type:"dynamic",variant:"standard",selected:!0},dynamicSelectionStandard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var dynamicSelectionOutline=Chip_stories_Template.bind({});dynamicSelectionOutline.storyName="Dynamic Selection Outline",dynamicSelectionOutline.args={label:"Label",type:"dynamic",variant:"outline",selected:!0},dynamicSelectionOutline.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var iconText=Chip_stories_TemplateIcon.bind({});iconText.storyName="Icon+Text",iconText.args={label:"Label"},iconText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n    <scale-chip\n      :selected="selected"\n      :type="type"\n      :label="label"\n      :disabled="disabled"\n      :styles="styles"\n      >\n      {{label}}\n      <div slot="chip-icon">\n        <scale-icon-action-favorite accessibility-title="favorite" />\n      </div>\n    </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var componentMeta={title:"Components/Chip",component:ScaleChip,argTypes:{variant:{control:{type:"select",options:["standard","outline"]}},type:{control:{type:"select",options:["dynamic","persistent"]}},disabled:{description:"only valid for persistent type"}},includeStories:["standard","persistentStandard","persistentStandardSelected","persistentStandardDisabled","persistentStandardSelectedDisabled","persistentOutline","persistentOutlineSelected","persistentOutlineDisabled","persistentOutlineSelectedDisabled","dynamicSuggestion","dynamicSelectionStandard","dynamicSelectionOutline","iconText"]},mdxStoryNameToKey={Standard:"standard","Persistent Standard":"persistentStandard","Persistent Standard Selected":"persistentStandardSelected","Persistent Standard Disabled":"persistentStandardDisabled","Persistent Standard Selected Disabled":"persistentStandardSelectedDisabled","Persistent Outline":"persistentOutline","Persistent Outline Selected":"persistentOutlineSelected","Persistent Outline Disabled":"persistentOutlineDisabled","Persistent Outline Selected Disabled":"persistentOutlineSelectedDisabled","Dynamic Suggestion":"dynamicSuggestion","Dynamic Selection Standard":"dynamicSelectionStandard","Dynamic Selection Outline":"dynamicSelectionOutline","Icon+Text":"iconText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/data-grid/DataGrid.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return DataGrid_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"actionsCell",(function(){return actionsCell})),__webpack_require__.d(__webpack_exports__,"checkboxCell",(function(){return checkboxCell})),__webpack_require__.d(__webpack_exports__,"emailCell",(function(){return emailCell})),__webpack_require__.d(__webpack_exports__,"dateCell",(function(){return dateCell})),__webpack_require__.d(__webpack_exports__,"graphCell",(function(){return graphCell})),__webpack_require__.d(__webpack_exports__,"htmlCell",(function(){return htmlCell})),__webpack_require__.d(__webpack_exports__,"linkCell",(function(){return linkCell})),__webpack_require__.d(__webpack_exports__,"numberCell",(function(){return numberCell})),__webpack_require__.d(__webpack_exports__,"selectCell",(function(){return selectCell})),__webpack_require__.d(__webpack_exports__,"tagsCell",(function(){return tagsCell})),__webpack_require__.d(__webpack_exports__,"telephoneCell",(function(){return telephoneCell})),__webpack_require__.d(__webpack_exports__,"textCell",(function(){return textCell})),__webpack_require__.d(__webpack_exports__,"freezeHeader",(function(){return freezeHeader})),__webpack_require__.d(__webpack_exports__,"heading",(function(){return heading})),__webpack_require__.d(__webpack_exports__,"hideExtras",(function(){return hideExtras})),__webpack_require__.d(__webpack_exports__,"numbered",(function(){return numbered})),__webpack_require__.d(__webpack_exports__,"pagination",(function(){return pagination})),__webpack_require__.d(__webpack_exports__,"selectionExport",(function(){return selectionExport})),__webpack_require__.d(__webpack_exports__,"columnStretch",(function(){return columnStretch})),__webpack_require__.d(__webpack_exports__,"showMore",(function(){return showMore}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),data_grid_ScaleDataGridvue_type_script_lang_js_={},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(data_grid_ScaleDataGridvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleDataGrid=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleDataGrid",description:"",tags:{}};var DataGrid_stories_Template=function Template(args,_ref){return function _objectDestructuringEmpty(obj){if(null==obj)throw new TypeError("Cannot destructure undefined")}(_ref),{components:{ScaleDataGrid:ScaleDataGrid},props:{unused:{}},template:""}},layoutProps={Template:DataGrid_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Data Grid",component:ScaleDataGrid,argTypes:{fields:{table:{type:{summary:"array"}},description:"(required) Input fields config array",control:{type:null}},rows:{table:{type:{summary:"array"}},description:"(required) Input data array",control:{type:null}},freezeHeader:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Freeze header row from scrolling",control:{type:null}},heading:{table:{type:{summary:"string"},defaultValue:{summary:""}},description:"(optional) Heading string",control:{type:null}},sortableColumnTitle:{table:{type:{summary:"string"},defaultValue:{summary:"Activate to sort column"}},description:"(optional) Title for sortable columns",control:{type:null}},height:{table:{type:{summary:"string"},defaultValue:{summary:"auto"}},description:"(optional) Set static table height, by default will auto-resize",control:{type:null}},hideBorder:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to remove border",control:{type:null}},hideHeader:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide header row",control:{type:null}},hideInfo:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to remove info footer block including pagination and selection status",control:{type:null}},hideMenu:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide settings menu",control:{type:null}},numbered:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to add numbers column",control:{type:null}},pageSize:{table:{type:{summary:"number"},defaultValue:{summary:1/0}},description:"(optional) Set number of rows to display per pagination page",control:{type:null}},selectable:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to add selection column",control:{type:null}},localization:{table:{type:{summary:"object"}},description:"(optional) localization object for sort by, toogle visibility and select/deselect all. The default value is English",control:{type:null}},shadeAlternate:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Shade every second row darker",control:{type:null}},styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},selection:{name:"[readonly] selection",table:{type:{summary:"array"}},description:"Read-only selection array - populated with raw data from selected rows. Note needs selectable set to true",control:{type:null}},eventScaleEditLegacy:{name:"[event] scaleEdit",table:{type:{summary:"event"}},description:"Event triggered every time the editable cells are changed, updating the original rows data",control:{type:null}},eventScaleEdit:{name:"[event] scale-edit",table:{type:{summary:"event"}},description:"Deprecated!: Event triggered every time the editable cells are changed, updating the original rows data",control:{type:null}},eventScaleSortLegacy:{name:"[event] scaleSort",table:{type:{summary:"event"}},description:"Deprecated!: Event triggered every time the data is sorted, changing original rows data",control:{type:null}},eventScaleSort:{name:"[event] scale-sort",table:{type:{summary:"event"}},description:"Event triggered every time the data is sorted, changing original rows data",control:{type:null}},slotMenu:{name:"[slot] menu",table:{type:{summary:"scale-menu-flyout-item"}},description:"Used for adding extra menu items within the settings menu. Note hideMenu must be false",control:{type:null}},slotDefault:{name:"[slot] default",table:{type:{summary:"scale-button"}},description:"Used for adding elements into the top section between the heading and the settings menu",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Data Grid"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h3",{id:"properties"},"Properties"),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",mdxType:"Story"},"<content>\n    <scale-data-grid heading=\"Default\" id=\"default-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#default-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'date',\n                label: 'Time',\n                stretchWeight: 1,\n            },\n        ];\n        dataGrid.rows = [\n            [1, 'John', '12:30'],\n            [2, 'Mary', '2:12'],\n            [3, 'Patek', '16:01'],\n            [4, 'Heidi', '3:15'],\n            [5, 'Muhammad', '21:45'],\n        ];\n        dataGrid.localization = {\n          sortBy: 'Sort By',\n          toggle: 'Toogle Visibility',\n          select: 'Select / Deselect All'\n        }\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"fields-structure"},"Fields Structure"),Object(esm.b)("p",null,"The ",Object(esm.b)("inlineCode",{parentName:"p"},"fields")," property is an array of field options. Each set of options defines the parameters for that field/column."),Object(esm.b)("p",null,"The field columns will display in the same order as this array."),Object(esm.b)("p",null,"The number of objects in the ",Object(esm.b)("inlineCode",{parentName:"p"},"fields")," array determines the number of items that must be in each row supplied to the ",Object(esm.b)("inlineCode",{parentName:"p"},"rows")," property."),Object(esm.b)("p",null,"The only required field option is ",Object(esm.b)("inlineCode",{parentName:"p"},"type"),". All common options are listed further down the page, as well as individual cell type options."),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"const fields = [ { type: 'number', label: 'ID', }, { type: 'text', label:\n'Name', }, { type: 'date', label: 'Time', }, ];\n")),Object(esm.b)("h2",{id:"rows-structure"},"Rows Structure"),Object(esm.b)("p",null,"The ",Object(esm.b)("inlineCode",{parentName:"p"},"rows")," property is an array of row data. Each row is a flat array that must match the length of the ",Object(esm.b)("inlineCode",{parentName:"p"},"fields")," property array."),Object(esm.b)("p",null,"Each item in the row contains the cell value for the associated field type, and must therefore match the expected format of the field options."),Object(esm.b)("p",null,"Eg. the first item in the fields example above is a ",Object(esm.b)("inlineCode",{parentName:"p"},"text")," field type, therefore the first item in each row must be a ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),". Each type's expected format is documented further down the page."),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"const rows = [ [1, 'John', '12:30'], [2, 'Mary', '2:12'], [3, 'Patek', '16:01'],\n[4, 'Heidi', '3:15'], [5, 'Muhammad', '21:45'], ];\n")),Object(esm.b)("h2",{id:"field-cell-types"},"Field Cell Types"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"actions")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"checkbox")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"email")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"date")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"graph")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"html")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"link")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"number")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"select")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"tags")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"telephone")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"text"))),Object(esm.b)("h2",{id:"field-options"},"Field Options"),Object(esm.b)("h5",{id:"common-options-and-their-defaults"},"Common options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"type: string")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"label?: string")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"maxWidth?: number = Infinity")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"minWidth?: number = 20")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"mobileTitle?: boolean = false")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"resizable?: boolean = true")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"sortable?: boolean = false")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"sortBy?: 'number' | 'text' = 'text'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"textAlign?: 'left' | 'center' | 'right' = 'left'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"stretchWeight?: 'number'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"visible?: boolean = true")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"width?: number"))),Object(esm.b)("h2",{id:"cell-type-options"},"Cell Type Options"),Object(esm.b)("h2",{id:"actions-cell"},"Actions Cell"),Object(esm.b)("p",null,"Expected format: an array of objects, e.g. ",Object(esm.b)("inlineCode",{parentName:"p"},"[{ label: 'Edit', onClick: () => { /* ... */ }]")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"label: string = '' | object = { __html: '' }")),Object(esm.b)("li",{parentName:"ul"},"any ",Object(esm.b)("inlineCode",{parentName:"li"},"scale-button")," attributes")),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Actions Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"actions-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#actions-example');\n        dataGrid.fields = [\n            {\n                type: 'actions',\n                label: 'Actions (secondary)',\n            },\n        ];\n        dataGrid.rows = [\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ],\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ]\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"checkbox-cell"},"Checkbox Cell"),Object(esm.b)("p",null,"Expected format: ",Object(esm.b)("inlineCode",{parentName:"p"},"boolean"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"true")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-1"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"style?: 'checkbox' | 'switch' = 'checkbox'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"editable?: boolean = false"))),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Checkbox Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"checkbox-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#checkbox-example');\n        dataGrid.fields = [\n            {\n                type: 'checkbox',\n                label: 'Checkbox',\n                style: 'checkbox',\n            },\n            {\n                type: 'checkbox',\n                label: 'Switch',\n                style: 'switch',\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Checkbox',\n                style: 'checkbox',\n                editable: true,\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Switch',\n                style: 'switch',\n                editable: true,\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            [true, false, true, true],\n            [true, true, true, false],\n            [false, true, false, false],\n            [false, false, false, true]\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"email-cell"},"Email Cell"),Object(esm.b)("p",null,"Expected format: a email ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg: ",Object(esm.b)("inlineCode",{parentName:"p"},"'mailto:example@domain.org'")),Object(esm.b)("p",null,"Email label is partially beautified by automatically removing the protocol (",Object(esm.b)("inlineCode",{parentName:"p"},"mailto:"),")"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Email Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"email-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#email-example');\n        dataGrid.fields = [\n            {\n                type: 'email',\n                label: 'Email',\n            }\n        ];\n        dataGrid.rows = [\n            ['mailto:testuser_1@domain.org'],\n            ['mailto:testuser_2@domain.org',]\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"date-cell"},"Date Cell"),Object(esm.b)("p",null,"Expected format: date/time ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"'10:23:00'")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-2"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"format?: string = 'MM.dd.yyyy'"))),Object(esm.b)("p",null,"to properly sort by date, the date string value is parsed according to this format. For more info and additional formatting options, e.g. ",Object(esm.b)("inlineCode",{parentName:"p"},"'dd/MM/yyyy'")," check the ",Object(esm.b)("a",{parentName:"p",href:"https://date-fns.org/v2.30.0/docs/parse",target:"_blank",rel:"nofollow noopener noreferrer"},"date-fn docs"),"."),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Date Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"date-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#date-example');\n        dataGrid.fields = [\n            {\n                type: 'date',\n                label: 'Time',\n            },\n            {\n                type: 'date',\n                label: 'Date',\n            },\n        ];\n        dataGrid.rows = [\n            ['00:00:20', 'Mon Aug 05'],\n            ['17:24', '12/10/2020'],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"graph-cell"},"Graph Cell"),Object(esm.b)("p",null,"Expected format: ",Object(esm.b)("inlineCode",{parentName:"p"},"number"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"10230.32")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-3"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"style?: 'progress' | 'bar' = 'progress'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"min?: number = 0")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"max?: number = 100"))),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Graph Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"graph-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#graph-example');\n        dataGrid.fields = [\n            {\n                type: 'graph',\n                label: 'Progress',\n            },\n            {\n                type: 'graph',\n                label: 'Bar',\n                style: 'bar',\n                max: 20000,\n            },\n        ];\n        dataGrid.rows = [\n            [87, 1020],\n            [100, 15034],\n            [12, 19209],\n            [34, 89],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"html-cell"},"HTML Cell"),Object(esm.b)("p",null,"Expected format: ",Object(esm.b)("inlineCode",{parentName:"p"},"HTMLElement")),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"HTML Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"html-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#html-example');\n        dataGrid.fields = [\n            {\n                type: 'html',\n                label: 'HTML',\n            },\n        ];\n        dataGrid.rows = [\n            [document.createElement('scale-icon-service-support')],\n            [document.createElement('scale-icon-service-settings')],\n            [document.createElement('scale-icon-service-services')],\n            [document.createElement('scale-icon-service-devices-service')],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"link-cell"},"Link Cell"),Object(esm.b)("p",null,"Expected format: a url ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg: ",Object(esm.b)("inlineCode",{parentName:"p"},"'https://sample.com'")),Object(esm.b)("p",null,"Link label is partially beautified by automatically removing the protocol (",Object(esm.b)("inlineCode",{parentName:"p"},"http://")," / ",Object(esm.b)("inlineCode",{parentName:"p"},"https://"),")"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Link Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"link-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#link-example');\n        dataGrid.fields = [\n            {\n                type: 'link',\n                label: 'Https link',\n            },\n            {\n                type: 'link',\n                label: 'Http link',\n            },\n        ];\n        dataGrid.rows = [\n            ['https://www.google.com', 'http://www.google.com'],\n            ['https://example.com', 'http://example.com'],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"number-cell"},"Number Cell"),Object(esm.b)("p",null,"Expected format: ",Object(esm.b)("inlineCode",{parentName:"p"},"number")," or ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"120.0")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-4"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"decimalSymbol?: string = '.'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"groupSymbol?: string = ''")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"precision?: number Infinity")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"prefix?: string")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"suffix?: string"))),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Number Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"number-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#number-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'Default',\n            },\n            {\n                type: 'number',\n                label: 'Precision',\n                precision: 2,\n            },\n            {\n                type: 'number',\n                label: 'Currency',\n                precision: 2,\n                decimalSymbol: ',',\n                groupSymbol: '.',\n                prefix: '$',\n                suffix: ' USD',\n            },\n        ];\n        dataGrid.rows = [\n            [11, 11, 11],\n            [126.3, 126.3, 126.3],\n            [0.032, 0.032, 0.032],\n            [123045, 123045, 123045],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"select-cell"},"Select Cell"),Object(esm.b)("p",null,"Expected format: string"),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-5"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"options: string[]")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"editable?: boolean = false"))),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Select Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"select-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#select-example');\n        dataGrid.fields = [\n            {\n                type: 'select',\n                label: 'Select',\n                options: ['Apple', 'Orange', 'Banana'],\n            },\n            {\n                type: 'select',\n                label: 'Options',\n                options: ['Apple', 'Orange', 'Banana'],\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple', 'Orange'],\n            ['Orange', 'Apple'],\n            ['Banana', 'Banana'],\n            ['Apple', 'Orange']\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"tags-cell"},"Tags Cell"),Object(esm.b)("p",null,"Expected format: comma delimited ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"'one, two, three'")),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Tags Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"tags-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#tags-example');\n        dataGrid.fields = [\n            {\n                type: 'tags',\n                label: 'Fruits',\n            },\n            {\n                type: 'tags',\n                label: 'Vegetables',\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple, Banana', 'Tomato, Cucumber'],\n            ['Strawberry', 'Aubergine, Carrot, Celery'],\n            ['Orange, Lemon, Watermelon', 'Pizza'],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"telephone-cell"},"Telephone Cell"),Object(esm.b)("p",null,"Expected format: a telephone ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg: ",Object(esm.b)("inlineCode",{parentName:"p"},"'tel: +0011122223333'")),Object(esm.b)("p",null,"telephone label is partially beautified by automatically removing the protocol (",Object(esm.b)("inlineCode",{parentName:"p"},"tel:"),")"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Telephone Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"telephone-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#telephone-example');\n        dataGrid.fields = [\n            {\n                type: 'telephone',\n                label: 'Telephone Number',\n            }\n        ];\n        dataGrid.rows = [\n            ['tel:+0011122223333'],\n            ['tel:+0011122223333',]\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"text-cell"},"Text Cell"),Object(esm.b)("p",null,"Expected format: unformatted ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"'this is a string'")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-6"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"variant?: 'body' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'body'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"iconPrefix?: scale-icon-string (eg 'action-download')")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"iconSuffix?: scale-icon-string (eg 'action-download')")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"editable?: boolean = false"))),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Text Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"text-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#text-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Title h5 + Prefix',\n                variant: 'h5',\n                iconPrefix: 'action-logout',\n            },\n            {\n                type: 'text',\n                label: 'Body + Suffix',\n                iconSuffix: 'action-mute',\n            },\n            {\n                type: 'text',\n                label: 'Sortable',\n                sortable: true,\n            },\n            {\n                type: 'text',\n                label: 'Editable',\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Row lorem title', 'Lorem ipsum dolor sit amet', 'Row lorem title', 'Lorem ipsum dolor sit amet'],\n            ['Dolor sit amet', 'Quasi architecto beatae vitae', 'Dolor sit amet', 'Quasi architecto beatae vitae'],\n            ['Sed quia non', 'Ut enim ad minima veniam', 'Sed quia non', 'Ut enim ad minima veniam'],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"component-properties"},"Component Properties"),Object(esm.b)("h2",{id:"freeze-header-and-height"},"Freeze Header And Height"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Freeze Header",mdxType:"Story"},"<content>\n    <scale-data-grid\n        id=\"freeze-header-example\"\n        hide-menu\n        height=\"300px\"\n        freeze-header\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#freeze-header-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n            ['Lucas Finley', false],\n            ['Adrian Grimes', true],\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"heading"},"Heading"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Heading",mdxType:"Story"},"<content>\n    <scale-data-grid\n        id=\"heading-example\"\n        heading=\"Data Grid Heading\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#heading-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"hide-extras"},"Hide Extras"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Hide Extras",mdxType:"Story"},"<content>\n    <scale-data-grid\n        id=\"hide-extras-example\"\n        hide-border\n        hide-header\n        hide-info\n        hide-menu\n        shade-alternate=\"false\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#hide-extras-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"numbered"},"Numbered"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Numbered",mdxType:"Story"},"<content>\n    <scale-data-grid\n        id=\"numbered-example\"\n        numbered\n        hide-menu\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#numbered-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"pagination"},"Pagination"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Pagination",mdxType:"Story"},"<content>\n    <scale-data-grid\n        id=\"pagination-example\"\n        heading=\"Pagination Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#pagination-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"selection-export"},"Selection Export"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Selection Export",mdxType:"Story"},"<content>\n    <div aria-live=\"polite\" id=\"aria-live\" style=\"margin-top:8px; text-align:center;\"></div>\n    <scale-data-grid\n        id=\"selection-export-example\"\n        heading=\"Selection Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    >\n        <scale-button id=\"export-btn\">\n            Export Selection!\n        </scale-button>\n    </scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#selection-export-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n        ];\n        document.getElementById(\"export-btn\").addEventListener('click', () => {\n            document.querySelector('#aria-live').innerText=document.querySelector('#selection-export-example').selection.length + ' rows selected for export'\n        });\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"column-stretch"},"Column Stretch"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Column Stretch",mdxType:"Story"},"<content>\n    <scale-data-grid heading=\"Column Stretch\" id=\"column-stretch-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#column-stretch-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                stretchWeight: 1,\n            },\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'date',\n                label: 'Time',\n            },\n        ];\n        dataGrid.rows = [\n            ['John', 1, '12:30'],\n            ['Mary', 2, '2:12'],\n            ['Patek', 3, '16:01'],\n            ['Heidi', 4, '3:15'],\n            ['Muhammad', 5, '21:45'],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"show-more"},"Show More"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Show More",mdxType:"Story"},"<content style=\"display: block;\">\n    <scale-data-grid\n        id=\"show-more-example\"\n        heading=\"Show More\"\n        numbered\n        hide-info\n    ></scale-data-grid>\n    <scale-button\n        id=\"show-more-example-button\"\n        size=\"small\"\n        style=\"display: block; width: 128px; margin: 20px auto;\"\n        variant=\"secondary\"\n    >Show More<scale-icon-navigation-collapse-down size=\"16\"></scale-icon-navigation-collapse-down></scale-button>\n      <div aria-live=\"polite\" id=\"aria-live\" style=\"position: absolute; left: -10000px; overflow: hidden;\"></div>\n    <script type=\"application/javascript\">\n    {\n        const data = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n        ];\n        const dataGrid = document.querySelector('#show-more-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        let showCount = 5;\n        dataGrid.rows = data.slice(0, showCount);\n        const showMorePrompt = document.querySelector('#show-more-example-button');\n        showMorePrompt.addEventListener('click', () => {\n            showCount = Math.min(showCount + 5, data.length);\n            dataGrid.rows = data.slice(0, showCount);\n            document.querySelector('#aria-live').innerText=\"5 more rows added, total \" + String(dataGrid.rows.length)\n        });\n    }\n    <\/script>\n</content>")))}MDXContent.isMDXComponent=!0;var standard=function standard(){return"<content>\n    <scale-data-grid heading=\"Default\" id=\"default-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#default-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'date',\n                label: 'Time',\n                stretchWeight: 1,\n            },\n        ];\n        dataGrid.rows = [\n            [1, 'John', '12:30'],\n            [2, 'Mary', '2:12'],\n            [3, 'Patek', '16:01'],\n            [4, 'Heidi', '3:15'],\n            [5, 'Muhammad', '21:45'],\n        ];\n        dataGrid.localization = {\n          sortBy: 'Sort By',\n          toggle: 'Toogle Visibility',\n          select: 'Select / Deselect All'\n        }\n    }\n    <\/script>\n</content>"};standard.storyName="Standard",standard.parameters={storySource:{source:"`<content>\n    <scale-data-grid heading=\"Default\" id=\"default-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#default-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'date',\n                label: 'Time',\n                stretchWeight: 1,\n            },\n        ];\n        dataGrid.rows = [\n            [1, 'John', '12:30'],\n            [2, 'Mary', '2:12'],\n            [3, 'Patek', '16:01'],\n            [4, 'Heidi', '3:15'],\n            [5, 'Muhammad', '21:45'],\n        ];\n        dataGrid.localization = {\n          sortBy: 'Sort By',\n          toggle: 'Toogle Visibility',\n          select: 'Select / Deselect All'\n        }\n    }\n    <\/script>\n</content>`"}};var actionsCell=function actionsCell(){return"<content>\n    <scale-data-grid id=\"actions-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#actions-example');\n        dataGrid.fields = [\n            {\n                type: 'actions',\n                label: 'Actions (secondary)',\n            },\n        ];\n        dataGrid.rows = [\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ],\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ]\n        ];\n    }\n    <\/script>\n</content>"};actionsCell.storyName="Actions Cell",actionsCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"actions-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#actions-example');\n        dataGrid.fields = [\n            {\n                type: 'actions',\n                label: 'Actions (secondary)',\n            },\n        ];\n        dataGrid.rows = [\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ],\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ]\n        ];\n    }\n    <\/script>\n</content>`"}};var checkboxCell=function checkboxCell(){return"<content>\n    <scale-data-grid id=\"checkbox-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#checkbox-example');\n        dataGrid.fields = [\n            {\n                type: 'checkbox',\n                label: 'Checkbox',\n                style: 'checkbox',\n            },\n            {\n                type: 'checkbox',\n                label: 'Switch',\n                style: 'switch',\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Checkbox',\n                style: 'checkbox',\n                editable: true,\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Switch',\n                style: 'switch',\n                editable: true,\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            [true, false, true, true],\n            [true, true, true, false],\n            [false, true, false, false],\n            [false, false, false, true]\n        ];\n    }\n    <\/script>\n</content>"};checkboxCell.storyName="Checkbox Cell",checkboxCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"checkbox-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#checkbox-example');\n        dataGrid.fields = [\n            {\n                type: 'checkbox',\n                label: 'Checkbox',\n                style: 'checkbox',\n            },\n            {\n                type: 'checkbox',\n                label: 'Switch',\n                style: 'switch',\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Checkbox',\n                style: 'checkbox',\n                editable: true,\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Switch',\n                style: 'switch',\n                editable: true,\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            [true, false, true, true],\n            [true, true, true, false],\n            [false, true, false, false],\n            [false, false, false, true]\n        ];\n    }\n    <\/script>\n</content>`"}};var emailCell=function emailCell(){return"<content>\n    <scale-data-grid id=\"email-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#email-example');\n        dataGrid.fields = [\n            {\n                type: 'email',\n                label: 'Email',\n            }\n        ];\n        dataGrid.rows = [\n            ['mailto:testuser_1@domain.org'],\n            ['mailto:testuser_2@domain.org',]\n        ];\n    }\n    <\/script>\n</content>"};emailCell.storyName="Email Cell",emailCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"email-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#email-example');\n        dataGrid.fields = [\n            {\n                type: 'email',\n                label: 'Email',\n            }\n        ];\n        dataGrid.rows = [\n            ['mailto:testuser_1@domain.org'],\n            ['mailto:testuser_2@domain.org',]\n        ];\n    }\n    <\/script>\n</content>`"}};var dateCell=function dateCell(){return"<content>\n    <scale-data-grid id=\"date-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#date-example');\n        dataGrid.fields = [\n            {\n                type: 'date',\n                label: 'Time',\n            },\n            {\n                type: 'date',\n                label: 'Date',\n            },\n        ];\n        dataGrid.rows = [\n            ['00:00:20', 'Mon Aug 05'],\n            ['17:24', '12/10/2020'],\n        ];\n    }\n    <\/script>\n</content>"};dateCell.storyName="Date Cell",dateCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"date-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#date-example');\n        dataGrid.fields = [\n            {\n                type: 'date',\n                label: 'Time',\n            },\n            {\n                type: 'date',\n                label: 'Date',\n            },\n        ];\n        dataGrid.rows = [\n            ['00:00:20', 'Mon Aug 05'],\n            ['17:24', '12/10/2020'],\n        ];\n    }\n    <\/script>\n</content>`"}};var graphCell=function graphCell(){return"<content>\n    <scale-data-grid id=\"graph-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#graph-example');\n        dataGrid.fields = [\n            {\n                type: 'graph',\n                label: 'Progress',\n            },\n            {\n                type: 'graph',\n                label: 'Bar',\n                style: 'bar',\n                max: 20000,\n            },\n        ];\n        dataGrid.rows = [\n            [87, 1020],\n            [100, 15034],\n            [12, 19209],\n            [34, 89],\n        ];\n    }\n    <\/script>\n</content>"};graphCell.storyName="Graph Cell",graphCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"graph-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#graph-example');\n        dataGrid.fields = [\n            {\n                type: 'graph',\n                label: 'Progress',\n            },\n            {\n                type: 'graph',\n                label: 'Bar',\n                style: 'bar',\n                max: 20000,\n            },\n        ];\n        dataGrid.rows = [\n            [87, 1020],\n            [100, 15034],\n            [12, 19209],\n            [34, 89],\n        ];\n    }\n    <\/script>\n</content>`"}};var htmlCell=function htmlCell(){return"<content>\n    <scale-data-grid id=\"html-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#html-example');\n        dataGrid.fields = [\n            {\n                type: 'html',\n                label: 'HTML',\n            },\n        ];\n        dataGrid.rows = [\n            [document.createElement('scale-icon-service-support')],\n            [document.createElement('scale-icon-service-settings')],\n            [document.createElement('scale-icon-service-services')],\n            [document.createElement('scale-icon-service-devices-service')],\n        ];\n    }\n    <\/script>\n</content>"};htmlCell.storyName="HTML Cell",htmlCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"html-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#html-example');\n        dataGrid.fields = [\n            {\n                type: 'html',\n                label: 'HTML',\n            },\n        ];\n        dataGrid.rows = [\n            [document.createElement('scale-icon-service-support')],\n            [document.createElement('scale-icon-service-settings')],\n            [document.createElement('scale-icon-service-services')],\n            [document.createElement('scale-icon-service-devices-service')],\n        ];\n    }\n    <\/script>\n</content>`"}};var linkCell=function linkCell(){return"<content>\n    <scale-data-grid id=\"link-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#link-example');\n        dataGrid.fields = [\n            {\n                type: 'link',\n                label: 'Https link',\n            },\n            {\n                type: 'link',\n                label: 'Http link',\n            },\n        ];\n        dataGrid.rows = [\n            ['https://www.google.com', 'http://www.google.com'],\n            ['https://example.com', 'http://example.com'],\n        ];\n    }\n    <\/script>\n</content>"};linkCell.storyName="Link Cell",linkCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"link-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#link-example');\n        dataGrid.fields = [\n            {\n                type: 'link',\n                label: 'Https link',\n            },\n            {\n                type: 'link',\n                label: 'Http link',\n            },\n        ];\n        dataGrid.rows = [\n            ['https://www.google.com', 'http://www.google.com'],\n            ['https://example.com', 'http://example.com'],\n        ];\n    }\n    <\/script>\n</content>`"}};var numberCell=function numberCell(){return"<content>\n    <scale-data-grid id=\"number-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#number-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'Default',\n            },\n            {\n                type: 'number',\n                label: 'Precision',\n                precision: 2,\n            },\n            {\n                type: 'number',\n                label: 'Currency',\n                precision: 2,\n                decimalSymbol: ',',\n                groupSymbol: '.',\n                prefix: '$',\n                suffix: ' USD',\n            },\n        ];\n        dataGrid.rows = [\n            [11, 11, 11],\n            [126.3, 126.3, 126.3],\n            [0.032, 0.032, 0.032],\n            [123045, 123045, 123045],\n        ];\n    }\n    <\/script>\n</content>"};numberCell.storyName="Number Cell",numberCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"number-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#number-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'Default',\n            },\n            {\n                type: 'number',\n                label: 'Precision',\n                precision: 2,\n            },\n            {\n                type: 'number',\n                label: 'Currency',\n                precision: 2,\n                decimalSymbol: ',',\n                groupSymbol: '.',\n                prefix: '$',\n                suffix: ' USD',\n            },\n        ];\n        dataGrid.rows = [\n            [11, 11, 11],\n            [126.3, 126.3, 126.3],\n            [0.032, 0.032, 0.032],\n            [123045, 123045, 123045],\n        ];\n    }\n    <\/script>\n</content>`"}};var selectCell=function selectCell(){return"<content>\n    <scale-data-grid id=\"select-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#select-example');\n        dataGrid.fields = [\n            {\n                type: 'select',\n                label: 'Select',\n                options: ['Apple', 'Orange', 'Banana'],\n            },\n            {\n                type: 'select',\n                label: 'Options',\n                options: ['Apple', 'Orange', 'Banana'],\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple', 'Orange'],\n            ['Orange', 'Apple'],\n            ['Banana', 'Banana'],\n            ['Apple', 'Orange']\n        ];\n    }\n    <\/script>\n</content>"};selectCell.storyName="Select Cell",selectCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"select-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#select-example');\n        dataGrid.fields = [\n            {\n                type: 'select',\n                label: 'Select',\n                options: ['Apple', 'Orange', 'Banana'],\n            },\n            {\n                type: 'select',\n                label: 'Options',\n                options: ['Apple', 'Orange', 'Banana'],\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple', 'Orange'],\n            ['Orange', 'Apple'],\n            ['Banana', 'Banana'],\n            ['Apple', 'Orange']\n        ];\n    }\n    <\/script>\n</content>`"}};var tagsCell=function tagsCell(){return"<content>\n    <scale-data-grid id=\"tags-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#tags-example');\n        dataGrid.fields = [\n            {\n                type: 'tags',\n                label: 'Fruits',\n            },\n            {\n                type: 'tags',\n                label: 'Vegetables',\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple, Banana', 'Tomato, Cucumber'],\n            ['Strawberry', 'Aubergine, Carrot, Celery'],\n            ['Orange, Lemon, Watermelon', 'Pizza'],\n        ];\n    }\n    <\/script>\n</content>"};tagsCell.storyName="Tags Cell",tagsCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"tags-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#tags-example');\n        dataGrid.fields = [\n            {\n                type: 'tags',\n                label: 'Fruits',\n            },\n            {\n                type: 'tags',\n                label: 'Vegetables',\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple, Banana', 'Tomato, Cucumber'],\n            ['Strawberry', 'Aubergine, Carrot, Celery'],\n            ['Orange, Lemon, Watermelon', 'Pizza'],\n        ];\n    }\n    <\/script>\n</content>`"}};var telephoneCell=function telephoneCell(){return"<content>\n    <scale-data-grid id=\"telephone-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#telephone-example');\n        dataGrid.fields = [\n            {\n                type: 'telephone',\n                label: 'Telephone Number',\n            }\n        ];\n        dataGrid.rows = [\n            ['tel:+0011122223333'],\n            ['tel:+0011122223333',]\n        ];\n    }\n    <\/script>\n</content>"};telephoneCell.storyName="Telephone Cell",telephoneCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"telephone-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#telephone-example');\n        dataGrid.fields = [\n            {\n                type: 'telephone',\n                label: 'Telephone Number',\n            }\n        ];\n        dataGrid.rows = [\n            ['tel:+0011122223333'],\n            ['tel:+0011122223333',]\n        ];\n    }\n    <\/script>\n</content>`"}};var textCell=function textCell(){return"<content>\n    <scale-data-grid id=\"text-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#text-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Title h5 + Prefix',\n                variant: 'h5',\n                iconPrefix: 'action-logout',\n            },\n            {\n                type: 'text',\n                label: 'Body + Suffix',\n                iconSuffix: 'action-mute',\n            },\n            {\n                type: 'text',\n                label: 'Sortable',\n                sortable: true,\n            },\n            {\n                type: 'text',\n                label: 'Editable',\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Row lorem title', 'Lorem ipsum dolor sit amet', 'Row lorem title', 'Lorem ipsum dolor sit amet'],\n            ['Dolor sit amet', 'Quasi architecto beatae vitae', 'Dolor sit amet', 'Quasi architecto beatae vitae'],\n            ['Sed quia non', 'Ut enim ad minima veniam', 'Sed quia non', 'Ut enim ad minima veniam'],\n        ];\n    }\n    <\/script>\n</content>"};textCell.storyName="Text Cell",textCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"text-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#text-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Title h5 + Prefix',\n                variant: 'h5',\n                iconPrefix: 'action-logout',\n            },\n            {\n                type: 'text',\n                label: 'Body + Suffix',\n                iconSuffix: 'action-mute',\n            },\n            {\n                type: 'text',\n                label: 'Sortable',\n                sortable: true,\n            },\n            {\n                type: 'text',\n                label: 'Editable',\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Row lorem title', 'Lorem ipsum dolor sit amet', 'Row lorem title', 'Lorem ipsum dolor sit amet'],\n            ['Dolor sit amet', 'Quasi architecto beatae vitae', 'Dolor sit amet', 'Quasi architecto beatae vitae'],\n            ['Sed quia non', 'Ut enim ad minima veniam', 'Sed quia non', 'Ut enim ad minima veniam'],\n        ];\n    }\n    <\/script>\n</content>`"}};var freezeHeader=function freezeHeader(){return"<content>\n    <scale-data-grid\n        id=\"freeze-header-example\"\n        hide-menu\n        height=\"300px\"\n        freeze-header\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#freeze-header-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n            ['Lucas Finley', false],\n            ['Adrian Grimes', true],\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>"};freezeHeader.storyName="Freeze Header",freezeHeader.parameters={storySource:{source:"`<content>\n    <scale-data-grid\n        id=\"freeze-header-example\"\n        hide-menu\n        height=\"300px\"\n        freeze-header\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#freeze-header-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n            ['Lucas Finley', false],\n            ['Adrian Grimes', true],\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>`"}};var heading=function heading(){return"<content>\n    <scale-data-grid\n        id=\"heading-example\"\n        heading=\"Data Grid Heading\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#heading-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>"};heading.storyName="Heading",heading.parameters={storySource:{source:"`<content>\n    <scale-data-grid\n        id=\"heading-example\"\n        heading=\"Data Grid Heading\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#heading-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>`"}};var hideExtras=function hideExtras(){return"<content>\n    <scale-data-grid\n        id=\"hide-extras-example\"\n        hide-border\n        hide-header\n        hide-info\n        hide-menu\n        shade-alternate=\"false\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#hide-extras-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>"};hideExtras.storyName="Hide Extras",hideExtras.parameters={storySource:{source:"`<content>\n    <scale-data-grid\n        id=\"hide-extras-example\"\n        hide-border\n        hide-header\n        hide-info\n        hide-menu\n        shade-alternate=\"false\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#hide-extras-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>`"}};var numbered=function numbered(){return"<content>\n    <scale-data-grid\n        id=\"numbered-example\"\n        numbered\n        hide-menu\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#numbered-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>"};numbered.storyName="Numbered",numbered.parameters={storySource:{source:"`<content>\n    <scale-data-grid\n        id=\"numbered-example\"\n        numbered\n        hide-menu\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#numbered-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>`"}};var pagination=function pagination(){return"<content>\n    <scale-data-grid\n        id=\"pagination-example\"\n        heading=\"Pagination Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#pagination-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>"};pagination.storyName="Pagination",pagination.parameters={storySource:{source:"`<content>\n    <scale-data-grid\n        id=\"pagination-example\"\n        heading=\"Pagination Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#pagination-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>`"}};var selectionExport=function selectionExport(){return"<content>\n    <div aria-live=\"polite\" id=\"aria-live\" style=\"margin-top:8px; text-align:center;\"></div>\n    <scale-data-grid\n        id=\"selection-export-example\"\n        heading=\"Selection Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    >\n        <scale-button id=\"export-btn\">\n            Export Selection!\n        </scale-button>\n    </scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#selection-export-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n        ];\n        document.getElementById(\"export-btn\").addEventListener('click', () => {\n            document.querySelector('#aria-live').innerText=document.querySelector('#selection-export-example').selection.length + ' rows selected for export'\n        });\n    }\n    <\/script>\n</content>"};selectionExport.storyName="Selection Export",selectionExport.parameters={storySource:{source:"`<content>\n    <div aria-live=\"polite\" id=\"aria-live\" style=\"margin-top:8px; text-align:center;\"></div>\n    <scale-data-grid\n        id=\"selection-export-example\"\n        heading=\"Selection Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    >\n        <scale-button id=\"export-btn\">\n            Export Selection!\n        </scale-button>\n    </scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#selection-export-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n        ];\n        document.getElementById(\"export-btn\").addEventListener('click', () => {\n            document.querySelector('#aria-live').innerText=document.querySelector('#selection-export-example').selection.length + ' rows selected for export'\n        });\n    }\n    <\/script>\n</content>`"}};var columnStretch=function columnStretch(){return"<content>\n    <scale-data-grid heading=\"Column Stretch\" id=\"column-stretch-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#column-stretch-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                stretchWeight: 1,\n            },\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'date',\n                label: 'Time',\n            },\n        ];\n        dataGrid.rows = [\n            ['John', 1, '12:30'],\n            ['Mary', 2, '2:12'],\n            ['Patek', 3, '16:01'],\n            ['Heidi', 4, '3:15'],\n            ['Muhammad', 5, '21:45'],\n        ];\n    }\n    <\/script>\n</content>"};columnStretch.storyName="Column Stretch",columnStretch.parameters={storySource:{source:"`<content>\n    <scale-data-grid heading=\"Column Stretch\" id=\"column-stretch-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#column-stretch-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                stretchWeight: 1,\n            },\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'date',\n                label: 'Time',\n            },\n        ];\n        dataGrid.rows = [\n            ['John', 1, '12:30'],\n            ['Mary', 2, '2:12'],\n            ['Patek', 3, '16:01'],\n            ['Heidi', 4, '3:15'],\n            ['Muhammad', 5, '21:45'],\n        ];\n    }\n    <\/script>\n</content>`"}};var showMore=function showMore(){return"<content style=\"display: block;\">\n    <scale-data-grid\n        id=\"show-more-example\"\n        heading=\"Show More\"\n        numbered\n        hide-info\n    ></scale-data-grid>\n    <scale-button\n        id=\"show-more-example-button\"\n        size=\"small\"\n        style=\"display: block; width: 128px; margin: 20px auto;\"\n        variant=\"secondary\"\n    >Show More<scale-icon-navigation-collapse-down size=\"16\"></scale-icon-navigation-collapse-down></scale-button>\n      <div aria-live=\"polite\" id=\"aria-live\" style=\"position: absolute; left: -10000px; overflow: hidden;\"></div>\n    <script type=\"application/javascript\">\n    {\n        const data = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n        ];\n        const dataGrid = document.querySelector('#show-more-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        let showCount = 5;\n        dataGrid.rows = data.slice(0, showCount);\n        const showMorePrompt = document.querySelector('#show-more-example-button');\n        showMorePrompt.addEventListener('click', () => {\n            showCount = Math.min(showCount + 5, data.length);\n            dataGrid.rows = data.slice(0, showCount);\n            document.querySelector('#aria-live').innerText=\"5 more rows added, total \" + String(dataGrid.rows.length)\n        });\n    }\n    <\/script>\n</content>"};showMore.storyName="Show More",showMore.parameters={storySource:{source:"`<content style=\"display: block;\">\n    <scale-data-grid\n        id=\"show-more-example\"\n        heading=\"Show More\"\n        numbered\n        hide-info\n    ></scale-data-grid>\n    <scale-button\n        id=\"show-more-example-button\"\n        size=\"small\"\n        style=\"display: block; width: 128px; margin: 20px auto;\"\n        variant=\"secondary\"\n    >Show More<scale-icon-navigation-collapse-down size=\"16\"></scale-icon-navigation-collapse-down></scale-button>\n      <div aria-live=\"polite\" id=\"aria-live\" style=\"position: absolute; left: -10000px; overflow: hidden;\"></div>\n    <script type=\"application/javascript\">\n    {\n        const data = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n        ];\n        const dataGrid = document.querySelector('#show-more-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        let showCount = 5;\n        dataGrid.rows = data.slice(0, showCount);\n        const showMorePrompt = document.querySelector('#show-more-example-button');\n        showMorePrompt.addEventListener('click', () => {\n            showCount = Math.min(showCount + 5, data.length);\n            dataGrid.rows = data.slice(0, showCount);\n            document.querySelector('#aria-live').innerText=\"5 more rows added, total \" + String(dataGrid.rows.length)\n        });\n    }\n    <\/script>\n</content>`"}};var componentMeta={title:"Components/Data Grid",component:ScaleDataGrid,argTypes:{fields:{table:{type:{summary:"array"}},description:"(required) Input fields config array",control:{type:null}},rows:{table:{type:{summary:"array"}},description:"(required) Input data array",control:{type:null}},freezeHeader:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Freeze header row from scrolling",control:{type:null}},heading:{table:{type:{summary:"string"},defaultValue:{summary:""}},description:"(optional) Heading string",control:{type:null}},sortableColumnTitle:{table:{type:{summary:"string"},defaultValue:{summary:"Activate to sort column"}},description:"(optional) Title for sortable columns",control:{type:null}},height:{table:{type:{summary:"string"},defaultValue:{summary:"auto"}},description:"(optional) Set static table height, by default will auto-resize",control:{type:null}},hideBorder:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to remove border",control:{type:null}},hideHeader:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide header row",control:{type:null}},hideInfo:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to remove info footer block including pagination and selection status",control:{type:null}},hideMenu:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide settings menu",control:{type:null}},numbered:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to add numbers column",control:{type:null}},pageSize:{table:{type:{summary:"number"},defaultValue:{summary:1/0}},description:"(optional) Set number of rows to display per pagination page",control:{type:null}},selectable:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to add selection column",control:{type:null}},localization:{table:{type:{summary:"object"}},description:"(optional) localization object for sort by, toogle visibility and select/deselect all. The default value is English",control:{type:null}},shadeAlternate:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Shade every second row darker",control:{type:null}},styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},selection:{name:"[readonly] selection",table:{type:{summary:"array"}},description:"Read-only selection array - populated with raw data from selected rows. Note needs selectable set to true",control:{type:null}},eventScaleEditLegacy:{name:"[event] scaleEdit",table:{type:{summary:"event"}},description:"Event triggered every time the editable cells are changed, updating the original rows data",control:{type:null}},eventScaleEdit:{name:"[event] scale-edit",table:{type:{summary:"event"}},description:"Deprecated!: Event triggered every time the editable cells are changed, updating the original rows data",control:{type:null}},eventScaleSortLegacy:{name:"[event] scaleSort",table:{type:{summary:"event"}},description:"Deprecated!: Event triggered every time the data is sorted, changing original rows data",control:{type:null}},eventScaleSort:{name:"[event] scale-sort",table:{type:{summary:"event"}},description:"Event triggered every time the data is sorted, changing original rows data",control:{type:null}},slotMenu:{name:"[slot] menu",table:{type:{summary:"scale-menu-flyout-item"}},description:"Used for adding extra menu items within the settings menu. Note hideMenu must be false",control:{type:null}},slotDefault:{name:"[slot] default",table:{type:{summary:"scale-button"}},description:"Used for adding elements into the top section between the heading and the settings menu",control:{type:null}}},includeStories:["standard","actionsCell","checkboxCell","emailCell","dateCell","graphCell","htmlCell","linkCell","numberCell","selectCell","tagsCell","telephoneCell","textCell","freezeHeader","heading","hideExtras","numbered","pagination","selectionExport","columnStretch","showMore"]},mdxStoryNameToKey={Standard:"standard","Actions Cell":"actionsCell","Checkbox Cell":"checkboxCell","Email Cell":"emailCell","Date Cell":"dateCell","Graph Cell":"graphCell","HTML Cell":"htmlCell","Link Cell":"linkCell","Number Cell":"numberCell","Select Cell":"selectCell","Tags Cell":"tagsCell","Telephone Cell":"telephoneCell","Text Cell":"textCell","Freeze Header":"freezeHeader",Heading:"heading","Hide Extras":"hideExtras",Numbered:"numbered",Pagination:"pagination","Selection Export":"selectionExport","Column Stretch":"columnStretch","Show More":"showMore"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/date-picker/DatePicker.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return DatePicker_stories_Template})),__webpack_require__.d(__webpack_exports__,"RangeTemplate",(function(){return DatePicker_stories_RangeTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"withError",(function(){return withError})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"localization",(function(){return localization})),__webpack_require__.d(__webpack_exports__,"dateRangePicker",(function(){return dateRangePicker}));__webpack_require__("../../node_modules/core-js/modules/es.string.match.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),date_picker_ScaleDatePickervue_type_script_lang_js_={props:{name:{type:String},identifier:{type:String},role:{type:String},direction:{type:String},required:{type:Boolean},min:{type:String},max:{type:String},firstDayOfWeek:{type:String},localization:{type:Object},dateAdapter:{type:Object},value:{type:String},label:{type:String},helperText:{type:String},invalid:{type:Boolean},disabled:{type:Boolean},popupTitle:{type:String},styles:{type:String},placeholder:{type:String},size:{type:String}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},scaleFocus:function scaleFocus($event){Object(addon_actions_dist_esm.action)("scaleFocus"),this.$emit("scaleFocus",$event)},"scale-focus":function scaleFocus($event){Object(addon_actions_dist_esm.action)("scale-focus"),this.$emit("scale-focus",$event)},scaleBlur:function scaleBlur($event){Object(addon_actions_dist_esm.action)("scaleBlur"),this.$emit("scaleBlur",$event)},"scale-blur":function scaleBlur($event){Object(addon_actions_dist_esm.action)("scale-blur"),this.$emit("scale-blur",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(date_picker_ScaleDatePickervue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-date-picker",{attrs:{name:_vm.name,identifier:_vm.identifier,role:_vm.role,direction:_vm.direction,required:_vm.required,min:_vm.min,max:_vm.max,"first-day-of-week":_vm.firstDayOfWeek,localization:_vm.localization,"date-adapter":_vm.dateAdapter,value:_vm.value,disabled:_vm.disabled,size:_vm.size,label:_vm.label,"helper-text":_vm.helperText,invalid:_vm.invalid,"popup-title":_vm.popupTitle,placeholder:_vm.placeholder,styles:_vm.styles},on:{scaleChange:_vm.scaleChange,scaleFocus:_vm.scaleFocus,scaleBlur:_vm.scaleBlur}})}),[],!1,null,null,null).exports;var ScaleDatePicker=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleDatePicker",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"identifier",type:{name:"string"}},{name:"role",type:{name:"string"}},{name:"direction",type:{name:"string"}},{name:"required",type:{name:"boolean"}},{name:"min",type:{name:"string"}},{name:"max",type:{name:"string"}},{name:"firstDayOfWeek",type:{name:"string"}},{name:"localization",type:{name:"object"}},{name:"dateAdapter",type:{name:"object"}},{name:"value",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"disabled",type:{name:"boolean"}},{name:"popupTitle",type:{name:"string"}},{name:"styles",type:{name:"string"}},{name:"placeholder",type:{name:"string"}},{name:"size",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}},{name:"scaleFocus",type:{names:["undefined"]}},{name:"scale-focus",type:{names:["undefined"]}},{name:"scaleBlur",type:{names:["undefined"]}},{name:"scale-blur",type:{names:["undefined"]}}]};var DatePicker_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleDatePicker:ScaleDatePicker},props:ScaleDatePicker.props,template:'\n    <div style="height: 500px;">\n        <scale-date-picker\n            ref="picker"\n            :name="name"\n            :identifier="identifier"\n            :role="role"\n            :direction="direction"\n            :required="required"\n            :min="min"\n            :max="max"\n            :first-day-of-week="firstDayOfWeek"\n            :localization="localization"\n            :date-adapter="dateAdapter"\n            :value="value"\n            :disabled="disabled"\n            :label="label"\n            :helper-text="helperText"\n            :invalid="invalid"\n            :placeholder="placeholder"\n            @scaleChange="scaleChange"\n            @scale-change="scale-change"\n            @scaleFocus="scaleFocus"\n            @scale-focus="scale-focus"\n            @scaleBlur="scaleBlur"\n            @scale-blur="scale-blur"\n            ></scale-date-picker>\n    </div>\n  ',mounted:function mounted(){var DATE_FORMAT=/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;"de"===args.localization&&(this.$refs.picker.$el.dateAdapter={parse:function parse(){var value=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",createDate=arguments.length>1?arguments[1]:void 0,matches=value.match(DATE_FORMAT);if(matches)return createDate(matches[3],matches[2],matches[1])},format:function format(date){return date.getDate()+"."+(date.getMonth()+1)+"."+date.getFullYear()}},this.$refs.picker.$el.localization={buttonLabel:"Datum wählen",placeholder:"TT.MM.JJJJ",selectedDateMessage:"Gewähltes Datum",prevMonthLabel:"Vorheriger Monat",nextMonthLabel:"Nächster Monat",monthSelectLabel:"Monat",yearSelectLabel:"Jahr",closeLabel:"Fenster schließen",keyboardInstruction:"Sie können mit den Pfeiltasten vor und zurück navigieren",calendarHeading:"Datum wählen",dayNames:["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],monthNames:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],monthNamesShort:["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"],today:"heute",locale:"de-DE"})},methods:{scaleChange:function scaleChange(){Object(addon_actions_dist_esm.action)("scaleChange")()},scaleFocus:function scaleFocus(){Object(addon_actions_dist_esm.action)("scaleFocus")()},scaleBlur:function scaleBlur(){Object(addon_actions_dist_esm.action)("scaleBlur")()}}}},DatePicker_stories_RangeTemplate=function RangeTemplate(args,_ref2){_ref2.argTypes;return{components:{ScaleDatePicker:ScaleDatePicker},template:'\n    <div style="height: 500px;">\n        <scale-date-picker\n            ref="start"\n            identifier="start"\n            label="Start"\n            style="margin-right: 8px;"\n            :value="$data.start"\n            :max="$data.end"\n            @scaleChange="scaleChangeStart"\n        ></scale-date-picker>\n        <scale-date-picker\n            ref="end"\n            identifier="end"\n            label="End"\n            :value="$data.end"\n            :min="$data.start"\n            @scaleChange="scaleChangeEnd"\n        ></scale-date-picker>\n    </div>\n  ',methods:{scaleChangeStart:function scaleChangeStart(e){},scaleChangeEnd:function scaleChangeEnd(e){}},data:function data(){return{start:"",end:""}}}},layoutProps={Template:DatePicker_stories_Template,RangeTemplate:DatePicker_stories_RangeTemplate};function MDXContent(_ref3){var components=_ref3.components,props=_objectWithoutProperties(_ref3,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Date Picker",component:ScaleDatePicker,argTypes:{size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Date Picker"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{value:"2020-12-31",label:"Standard",placeholder:"Select date"},mdxType:"Story"},DatePicker_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",icon:"SVG-PATH",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-date-picker\n  label="Standard"\n  value="2020-12-31"\n  placeholder="Select date"\n  @scaleChange="handleChange"\n  @scaleFocus="handleFocus"\n  @scaleBlur="handleBlur"\n></scale-date-picker>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"duet-date-picker {\n  --duet-color-primary: var(--telekom-color-primary-standard);\n  --duet-color-text: var(--telekom-color-text-and-icon-standard);\n  --duet-color-overlay: var(--telekom-color-background-surface);\n  --duet-font: var(--telekom-typography-font-family-sans);\n  --duet-font-normal: var(--telekom-typography-font-weight-regular);\n  --duet-font-bold: var(--telekom-typography-font-weight-medium);\n  --duet-color-placeholder: var(--telekom-color-ui-regular);\n  --duet-radius: var(--telekom-radius-standard);\n  --duet-radius-toggle-focus: 6px;\n  --duet-color-text-active: var(--telekom-color-text-and-icon-white-standard);\n  --duet-color-button: var(--telekom-color-background-surface);\n  --duet-color-surface: var(--telekom-color-background-surface);\n  --duet-z-index: 600;\n  --duet-z-index-toggle: 2;\n\n  --spacing-x: var(--telekom-spacing-composition-space-05);\n\n  --spacing-heading: 0 0 var(--telekom-spacing-composition-space-06) 0;\n  --font-size-heading: var(--telekom-typography-font-size-body);\n  --radius-day: var(--telekom-radius-standard);\n  --font-size-day: var(--telekom-typography-font-size-body);\n  --font-size-table-header: var(--telekom-typography-font-size-caption);\n  --font-weight-table-header: var(--telekom-typography-font-weight-extra-bold);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n\n  --z-index-label: 10;\n}\n")),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{value:"2020-12-31",label:"Helper Text",helperText:"Make sure to fill this"},mdxType:"Story"},DatePicker_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-date-picker\n  helperText="Make sure to fill this"\n  label="Helper Text"\n  value="2020-12-31"\n></scale-date-picker>\n')),Object(esm.b)("h2",{id:"with-error"},"With Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Error",args:{label:"With Error",invalid:!0,helperText:"something is wrong",placeholder:"select date"},mdxType:"Story"},DatePicker_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-date-picker\n  label="With Error"\n  helper-text="something is wrong"\n  invalid\n  value="2020-12-31"\n  placeholder: \'select date\'\n></scale-date-picker>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",disabled:!0},mdxType:"Story"},DatePicker_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-date-picker label="Disabled" disabled></scale-date-picker>\n')),Object(esm.b)("h2",{id:"localization"},"Localization"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Localization",args:{label:"Localization",localization:"de"},mdxType:"Story"},DatePicker_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-date-picker label=\"Localization\"></scale-date-picker>\n\n<script>\n  const picker = document.querySelector('scale-date-picker');\n  picker.localization = {\n    buttonLabel: 'Datum wählen',\n    placeholder: 'TT.MM.JJJJ',\n    selectedDateMessage: 'Gewähltes Datum',\n    prevMonthLabel: 'Vorheriger Monat',\n    nextMonthLabel: 'Nächster Monat',\n    monthSelectLabel: 'Monat',\n    yearSelectLabel: 'Jahr',\n    closeLabel: 'Fenster schließen',\n    keyboardInstruction:\n      'Sie können mit den Pfeiltasten vor und zurück navigieren',\n    calendarHeading: 'Datum wählen',\n    dayNames: [\n      'Sonntag',\n      'Montag',\n      'Dienstag',\n      'Mittwoch',\n      'Donnerstag',\n      'Freitag',\n      'Samstag',\n    ],\n    monthNames: [\n      'Januar',\n      'Februar',\n      'März',\n      'April',\n      'Mai',\n      'Juni',\n      'Juli',\n      'August',\n      'September',\n      'Oktober',\n      'November',\n      'Dezember',\n    ],\n    monthNamesShort: [\n      'Jan',\n      'Feb',\n      'Mär',\n      'Apr',\n      'Mai',\n      'Jun',\n      'Jul',\n      'Aug',\n      'Sep',\n      'Okt',\n      'Nov',\n      'Dez',\n    ],\n    today: 'heute',\n    locale: 'de-DE',\n  };\n\n  const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n  picker.dateAdapter = {\n    parse(value = '', createDate) {\n      const matches = value.match(DATE_FORMAT);\n      if (matches) {\n        return createDate(matches[3], matches[2], matches[1]);\n      }\n    },\n    format(date) {\n      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n    },\n  };\n<\/script>\n")),Object(esm.b)("h2",{id:"date-range-picker"},"Date Range Picker"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Date Range Picker",mdxType:"Story"},DatePicker_stories_RangeTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-js"},'const RangeTemplate = (args, { argTypes }) => ({\n  components: { ScaleDatePicker },\n  template: `\n    <div style="height: 500px; display: inline-flex;">\n        <scale-date-picker\n            ref="start"\n            identifier="start"\n            label="Start"\n            style="margin-right: 8px;"\n            :value="$data.start"\n            :max="$data.end"\n            @scaleChange="scaleChangeStart"\n        ></scale-date-picker>\n        <scale-date-picker\n            ref="end"\n            identifier="end"\n            label="End"\n            :value="$data.end"\n            :min="$data.start"\n            @scaleChange="scaleChangeEnd"\n        ></scale-date-picker>\n    </div>\n  `,\n  //  optional: open enddate picker automatically after a custom timeout\n  //     methods: {\n  //     scaleChangeStart: function(e) {\n  //         this.$data.start = e.detail.value;\n  //         setTimeout(() => {\n  //             if(!this.$data.end) {\n  //                 this.$refs.end.$el.show()\n  //             }\n  //         }, 1000)\n  //     },\n  //     scaleChangeEnd: function(e) {\n  //         this.$data.end = e.detail.value;\n  //     },\n  //   },\n  //   data() {\n  //     return {\n  //         start: \'\',\n  //         end: \'\'\n  //     }\n  //   },\n});\n')),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-date-picker label=\"Start\" identifier=\"startDate\"></scale-date-picker>\n\n<scale-date-picker label=\"End\" identifier=\"endDate\"></scale-date-picker>\n\n<script>\n  const startPicker = document.getElementById('startDate');\n  const endPicker = document.getElementById('startDate');\n  let startDate, endDate;\n\n  // When the start date picker is changed, set end date's min to equal date\n  startPicker.addEventListener('duetChange', function (e) {\n    startDate = e.detail.valueAsDate;\n    endPicker.min = e.detail.value;\n\n    if (!endDate) {\n      endPicker.show();\n    }\n  });\n\n  // When the end date picker is changed, set start date's max to equal date\n  endPicker.addEventListener('duetChange', function (e) {\n    endDate = e.detail.valueAsDate;\n    startPicker.max = e.detail.value;\n  });\n<\/script>\n")))}MDXContent.isMDXComponent=!0;var standard=DatePicker_stories_Template.bind({});standard.storyName="Standard",standard.args={value:"2020-12-31",label:"Standard",placeholder:"Select date"},standard.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  props: ScaleDatePicker.props,\n  template: `\n    <div style=\"height: 500px;\">\n        <scale-date-picker\n            ref=\"picker\"\n            :name=\"name\"\n            :identifier=\"identifier\"\n            :role=\"role\"\n            :direction=\"direction\"\n            :required=\"required\"\n            :min=\"min\"\n            :max=\"max\"\n            :first-day-of-week=\"firstDayOfWeek\"\n            :localization=\"localization\"\n            :date-adapter=\"dateAdapter\"\n            :value=\"value\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :helper-text=\"helperText\"\n            :invalid=\"invalid\"\n            :placeholder=\"placeholder\"\n            @scaleChange=\"scaleChange\"\n            @scale-change=\"scale-change\"\n            @scaleFocus=\"scaleFocus\"\n            @scale-focus=\"scale-focus\"\n            @scaleBlur=\"scaleBlur\"\n            @scale-blur=\"scale-blur\"\n            ></scale-date-picker>\n    </div>\n  `,\n\n  mounted() {\n    const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n\n    if (args.localization === 'de') {\n      this.$refs.picker.$el.dateAdapter = {\n        parse(value = '', createDate) {\n          const matches = value.match(DATE_FORMAT);\n\n          if (matches) {\n            return createDate(matches[3], matches[2], matches[1]);\n          }\n        },\n\n        format(date) {\n          return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n        }\n\n      };\n      this.$refs.picker.$el.localization = {\n        buttonLabel: 'Datum wählen',\n        placeholder: 'TT.MM.JJJJ',\n        selectedDateMessage: 'Gewähltes Datum',\n        prevMonthLabel: 'Vorheriger Monat',\n        nextMonthLabel: 'Nächster Monat',\n        monthSelectLabel: 'Monat',\n        yearSelectLabel: 'Jahr',\n        closeLabel: 'Fenster schließen',\n        keyboardInstruction: 'Sie können mit den Pfeiltasten vor und zurück navigieren',\n        calendarHeading: 'Datum wählen',\n        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],\n        monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],\n        monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],\n        today: 'heute',\n        locale: 'de-DE'\n      };\n    }\n  },\n\n  methods: {\n    scaleChange: function () {\n      action('scaleChange')();\n    },\n    scaleFocus: function () {\n      action('scaleFocus')();\n    },\n    scaleBlur: function () {\n      action('scaleBlur')();\n    }\n  }\n})"}};var helperText=DatePicker_stories_Template.bind({});helperText.storyName="Helper Text",helperText.args={value:"2020-12-31",label:"Helper Text",helperText:"Make sure to fill this"},helperText.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  props: ScaleDatePicker.props,\n  template: `\n    <div style=\"height: 500px;\">\n        <scale-date-picker\n            ref=\"picker\"\n            :name=\"name\"\n            :identifier=\"identifier\"\n            :role=\"role\"\n            :direction=\"direction\"\n            :required=\"required\"\n            :min=\"min\"\n            :max=\"max\"\n            :first-day-of-week=\"firstDayOfWeek\"\n            :localization=\"localization\"\n            :date-adapter=\"dateAdapter\"\n            :value=\"value\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :helper-text=\"helperText\"\n            :invalid=\"invalid\"\n            :placeholder=\"placeholder\"\n            @scaleChange=\"scaleChange\"\n            @scale-change=\"scale-change\"\n            @scaleFocus=\"scaleFocus\"\n            @scale-focus=\"scale-focus\"\n            @scaleBlur=\"scaleBlur\"\n            @scale-blur=\"scale-blur\"\n            ></scale-date-picker>\n    </div>\n  `,\n\n  mounted() {\n    const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n\n    if (args.localization === 'de') {\n      this.$refs.picker.$el.dateAdapter = {\n        parse(value = '', createDate) {\n          const matches = value.match(DATE_FORMAT);\n\n          if (matches) {\n            return createDate(matches[3], matches[2], matches[1]);\n          }\n        },\n\n        format(date) {\n          return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n        }\n\n      };\n      this.$refs.picker.$el.localization = {\n        buttonLabel: 'Datum wählen',\n        placeholder: 'TT.MM.JJJJ',\n        selectedDateMessage: 'Gewähltes Datum',\n        prevMonthLabel: 'Vorheriger Monat',\n        nextMonthLabel: 'Nächster Monat',\n        monthSelectLabel: 'Monat',\n        yearSelectLabel: 'Jahr',\n        closeLabel: 'Fenster schließen',\n        keyboardInstruction: 'Sie können mit den Pfeiltasten vor und zurück navigieren',\n        calendarHeading: 'Datum wählen',\n        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],\n        monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],\n        monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],\n        today: 'heute',\n        locale: 'de-DE'\n      };\n    }\n  },\n\n  methods: {\n    scaleChange: function () {\n      action('scaleChange')();\n    },\n    scaleFocus: function () {\n      action('scaleFocus')();\n    },\n    scaleBlur: function () {\n      action('scaleBlur')();\n    }\n  }\n})"}};var withError=DatePicker_stories_Template.bind({});withError.storyName="With Error",withError.args={label:"With Error",invalid:!0,helperText:"something is wrong",placeholder:"select date"},withError.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  props: ScaleDatePicker.props,\n  template: `\n    <div style=\"height: 500px;\">\n        <scale-date-picker\n            ref=\"picker\"\n            :name=\"name\"\n            :identifier=\"identifier\"\n            :role=\"role\"\n            :direction=\"direction\"\n            :required=\"required\"\n            :min=\"min\"\n            :max=\"max\"\n            :first-day-of-week=\"firstDayOfWeek\"\n            :localization=\"localization\"\n            :date-adapter=\"dateAdapter\"\n            :value=\"value\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :helper-text=\"helperText\"\n            :invalid=\"invalid\"\n            :placeholder=\"placeholder\"\n            @scaleChange=\"scaleChange\"\n            @scale-change=\"scale-change\"\n            @scaleFocus=\"scaleFocus\"\n            @scale-focus=\"scale-focus\"\n            @scaleBlur=\"scaleBlur\"\n            @scale-blur=\"scale-blur\"\n            ></scale-date-picker>\n    </div>\n  `,\n\n  mounted() {\n    const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n\n    if (args.localization === 'de') {\n      this.$refs.picker.$el.dateAdapter = {\n        parse(value = '', createDate) {\n          const matches = value.match(DATE_FORMAT);\n\n          if (matches) {\n            return createDate(matches[3], matches[2], matches[1]);\n          }\n        },\n\n        format(date) {\n          return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n        }\n\n      };\n      this.$refs.picker.$el.localization = {\n        buttonLabel: 'Datum wählen',\n        placeholder: 'TT.MM.JJJJ',\n        selectedDateMessage: 'Gewähltes Datum',\n        prevMonthLabel: 'Vorheriger Monat',\n        nextMonthLabel: 'Nächster Monat',\n        monthSelectLabel: 'Monat',\n        yearSelectLabel: 'Jahr',\n        closeLabel: 'Fenster schließen',\n        keyboardInstruction: 'Sie können mit den Pfeiltasten vor und zurück navigieren',\n        calendarHeading: 'Datum wählen',\n        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],\n        monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],\n        monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],\n        today: 'heute',\n        locale: 'de-DE'\n      };\n    }\n  },\n\n  methods: {\n    scaleChange: function () {\n      action('scaleChange')();\n    },\n    scaleFocus: function () {\n      action('scaleFocus')();\n    },\n    scaleBlur: function () {\n      action('scaleBlur')();\n    }\n  }\n})"}};var disabled=DatePicker_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",disabled:!0},disabled.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  props: ScaleDatePicker.props,\n  template: `\n    <div style=\"height: 500px;\">\n        <scale-date-picker\n            ref=\"picker\"\n            :name=\"name\"\n            :identifier=\"identifier\"\n            :role=\"role\"\n            :direction=\"direction\"\n            :required=\"required\"\n            :min=\"min\"\n            :max=\"max\"\n            :first-day-of-week=\"firstDayOfWeek\"\n            :localization=\"localization\"\n            :date-adapter=\"dateAdapter\"\n            :value=\"value\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :helper-text=\"helperText\"\n            :invalid=\"invalid\"\n            :placeholder=\"placeholder\"\n            @scaleChange=\"scaleChange\"\n            @scale-change=\"scale-change\"\n            @scaleFocus=\"scaleFocus\"\n            @scale-focus=\"scale-focus\"\n            @scaleBlur=\"scaleBlur\"\n            @scale-blur=\"scale-blur\"\n            ></scale-date-picker>\n    </div>\n  `,\n\n  mounted() {\n    const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n\n    if (args.localization === 'de') {\n      this.$refs.picker.$el.dateAdapter = {\n        parse(value = '', createDate) {\n          const matches = value.match(DATE_FORMAT);\n\n          if (matches) {\n            return createDate(matches[3], matches[2], matches[1]);\n          }\n        },\n\n        format(date) {\n          return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n        }\n\n      };\n      this.$refs.picker.$el.localization = {\n        buttonLabel: 'Datum wählen',\n        placeholder: 'TT.MM.JJJJ',\n        selectedDateMessage: 'Gewähltes Datum',\n        prevMonthLabel: 'Vorheriger Monat',\n        nextMonthLabel: 'Nächster Monat',\n        monthSelectLabel: 'Monat',\n        yearSelectLabel: 'Jahr',\n        closeLabel: 'Fenster schließen',\n        keyboardInstruction: 'Sie können mit den Pfeiltasten vor und zurück navigieren',\n        calendarHeading: 'Datum wählen',\n        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],\n        monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],\n        monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],\n        today: 'heute',\n        locale: 'de-DE'\n      };\n    }\n  },\n\n  methods: {\n    scaleChange: function () {\n      action('scaleChange')();\n    },\n    scaleFocus: function () {\n      action('scaleFocus')();\n    },\n    scaleBlur: function () {\n      action('scaleBlur')();\n    }\n  }\n})"}};var localization=DatePicker_stories_Template.bind({});localization.storyName="Localization",localization.args={label:"Localization",localization:"de"},localization.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  props: ScaleDatePicker.props,\n  template: `\n    <div style=\"height: 500px;\">\n        <scale-date-picker\n            ref=\"picker\"\n            :name=\"name\"\n            :identifier=\"identifier\"\n            :role=\"role\"\n            :direction=\"direction\"\n            :required=\"required\"\n            :min=\"min\"\n            :max=\"max\"\n            :first-day-of-week=\"firstDayOfWeek\"\n            :localization=\"localization\"\n            :date-adapter=\"dateAdapter\"\n            :value=\"value\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :helper-text=\"helperText\"\n            :invalid=\"invalid\"\n            :placeholder=\"placeholder\"\n            @scaleChange=\"scaleChange\"\n            @scale-change=\"scale-change\"\n            @scaleFocus=\"scaleFocus\"\n            @scale-focus=\"scale-focus\"\n            @scaleBlur=\"scaleBlur\"\n            @scale-blur=\"scale-blur\"\n            ></scale-date-picker>\n    </div>\n  `,\n\n  mounted() {\n    const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n\n    if (args.localization === 'de') {\n      this.$refs.picker.$el.dateAdapter = {\n        parse(value = '', createDate) {\n          const matches = value.match(DATE_FORMAT);\n\n          if (matches) {\n            return createDate(matches[3], matches[2], matches[1]);\n          }\n        },\n\n        format(date) {\n          return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n        }\n\n      };\n      this.$refs.picker.$el.localization = {\n        buttonLabel: 'Datum wählen',\n        placeholder: 'TT.MM.JJJJ',\n        selectedDateMessage: 'Gewähltes Datum',\n        prevMonthLabel: 'Vorheriger Monat',\n        nextMonthLabel: 'Nächster Monat',\n        monthSelectLabel: 'Monat',\n        yearSelectLabel: 'Jahr',\n        closeLabel: 'Fenster schließen',\n        keyboardInstruction: 'Sie können mit den Pfeiltasten vor und zurück navigieren',\n        calendarHeading: 'Datum wählen',\n        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],\n        monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],\n        monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],\n        today: 'heute',\n        locale: 'de-DE'\n      };\n    }\n  },\n\n  methods: {\n    scaleChange: function () {\n      action('scaleChange')();\n    },\n    scaleFocus: function () {\n      action('scaleFocus')();\n    },\n    scaleBlur: function () {\n      action('scaleBlur')();\n    }\n  }\n})"}};var dateRangePicker=DatePicker_stories_RangeTemplate.bind({});dateRangePicker.storyName="Date Range Picker",dateRangePicker.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  template: `\n    <div style="height: 500px;">\n        <scale-date-picker\n            ref="start"\n            identifier="start"\n            label="Start"\n            style="margin-right: 8px;"\n            :value="$data.start"\n            :max="$data.end"\n            @scaleChange="scaleChangeStart"\n        ></scale-date-picker>\n        <scale-date-picker\n            ref="end"\n            identifier="end"\n            label="End"\n            :value="$data.end"\n            :min="$data.start"\n            @scaleChange="scaleChangeEnd"\n        ></scale-date-picker>\n    </div>\n  `,\n  methods: {\n    scaleChangeStart: function (e) {\n      /* some custom functionality e.g.\n        this.$data.start = e.detail.value;\n        setTimeout(() => {\n            if(!this.$data.end) {\n                this.$refs.end.$el.show()\n            }\n        }, 1000) */\n    },\n    scaleChangeEnd: function (e) {\n      /* some custom functionality e.g.\n        this.$data.end = e.detail.value;\n        */\n    }\n  },\n\n  data() {\n    return {\n      start: \'\',\n      end: \'\'\n    };\n  }\n\n})'}};var componentMeta={title:"Components/Date Picker",component:ScaleDatePicker,argTypes:{size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},includeStories:["standard","helperText","withError","disabled","localization","dateRangePicker"]},mdxStoryNameToKey={Standard:"standard","Helper Text":"helperText","With Error":"withError",Disabled:"disabled",Localization:"localization","Date Range Picker":"dateRangePicker"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/divider/Divider.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ICON",(function(){return ICON})),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Divider_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"vertical",(function(){return vertical}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),divider_ScaleDividervue_type_script_lang_js_={props:{vertical:Boolean,styles:String}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(divider_ScaleDividervue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-divider",{attrs:{vertical:this.vertical,styles:this.styles}})}),[],!1,null,null,null).exports;var ScaleDivider=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleDivider",description:"",tags:{},props:[{name:"vertical",type:{name:"boolean"}},{name:"styles",type:{name:"string"}}]};var ICON="M16.471,8.321 L12.613594,0.502886112 L8.755,8.321 L0.126435258,9.57533801 L6.37,15.66 L4.89610548,24.2548735 L12.613,20.197 L20.3310826,24.2548735 L18.856,15.66 L25.1007528,9.57533801 L16.471,8.321 Z M9.41891527,9.23556376 L12.613,2.761 L15.8082728,9.23556376 L22.951,10.273 L17.7826928,15.3122039 L19.003,22.427 L12.613594,19.067774 L6.223,22.427 L7.44449521,15.3122039 L2.275,10.273 L9.41891527,9.23556376 Z",Divider_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleDivider:ScaleDivider},props:ScaleDivider.props,template:'\n    <scale-divider\n      :vertical="vertical"\n      :styles="styles"\n    >\n    </scale-divider>\n  '}},layoutProps={ICON:ICON,Template:Divider_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Divider",component:ScaleDivider,argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Divider"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},Divider_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 100%;\n  --height: 100%;\n  --spacing: var(--telekom-spacing-composition-space-05);\n  --color: var(--telekom-color-ui-faint);\n  --border-width: var(--telekom-spacing-composition-space-01);\n  --min-height-vertical: var(--telekom-spacing-composition-space-08);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"vertical"},"Vertical"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Vertical",args:{vertical:!0,styles:"\n        .divider--vertical {\n          height: 150px !important\n        }"},mdxType:"Story"},Divider_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-divider vertical></scale-divider>\n")))}MDXContent.isMDXComponent=!0;var standard=Divider_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDivider\n  },\n  props: ScaleDivider.props,\n  template: `\n    <scale-divider\n      :vertical="vertical"\n      :styles="styles"\n    >\n    </scale-divider>\n  `\n})'}};var vertical=Divider_stories_Template.bind({});vertical.storyName="Vertical",vertical.args={vertical:!0,styles:"\n        .divider--vertical {\n          height: 150px !important\n        }"},vertical.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDivider\n  },\n  props: ScaleDivider.props,\n  template: `\n    <scale-divider\n      :vertical="vertical"\n      :styles="styles"\n    >\n    </scale-divider>\n  `\n})'}};var componentMeta={title:"Components/Divider",component:ScaleDivider,argTypes:{},includeStories:["standard","vertical"]},mdxStoryNameToKey={Standard:"standard",Vertical:"vertical"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/dropdown-select/DropdownSelect.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return DropdownSelect_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"disabledItems",(function(){return disabledItems})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),dropdown_select_ScaleDropdownSelectvue_type_script_lang_js_={name:"Dropdown Select",props:{label:{type:String},helperText:{type:String},invalid:{type:Boolean},disabled:{type:Boolean},size:{type:String},value:{type:String},variant:{type:String},comboboxId:{type:String},hideLabelVisually:{type:Boolean,default:!1},floatingStrategy:{type:String}},methods:{"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},"scale-focus":function scaleFocus($event){Object(addon_actions_dist_esm.action)("scale-focus"),this.$emit("scale-focus",$event)},"scale-blur":function scaleBlur($event){Object(addon_actions_dist_esm.action)("scale-blur"),this.$emit("scale-blur",$event)},"scale-keydown":function scaleKeydown($event){Object(addon_actions_dist_esm.action)("scale-keydown"),this.$emit("scale-keydown",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(dropdown_select_ScaleDropdownSelectvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-dropdown-select",{attrs:{label:_vm.label,"helper-text":_vm.helperText,variant:_vm.variant,invalid:_vm.invalid,disabled:_vm.disabled,size:_vm.size,value:_vm.value,"combobox-id":_vm.comboboxId,"hide-label-visually":_vm.hideLabelVisually,"floating-strategy":_vm.floatingStrategy},on:{scaleChange:function($event){},scaleFocus:function($event){},scaleBlur:function($event){},scaleKeyDown:function($event){}}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleDropdownSelect=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={displayName:"Dropdown Select",exportName:"default",description:"",tags:{},props:[{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"disabled",type:{name:"boolean"}},{name:"size",type:{name:"string"}},{name:"value",type:{name:"string"}},{name:"variant",type:{name:"string"}},{name:"comboboxId",type:{name:"string"}},{name:"hideLabelVisually",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"floatingStrategy",type:{name:"string"}}],events:[{name:"scale-change",type:{names:["undefined"]}},{name:"scale-focus",type:{names:["undefined"]}},{name:"scale-blur",type:{names:["undefined"]}},{name:"scale-keydown",type:{names:["undefined"]}}],slots:[{name:"default"}]};var dropdown_select_ScaleDropdownSelectItemvue_type_script_lang_js_={name:"Dropdown Select Item",props:{value:{type:String},disabled:{type:Boolean},selected:{type:Boolean},focused:{type:Boolean}}};const ScaleDropdownSelectItem_vuedocgen_export_0=Object(componentNormalizer.a)(dropdown_select_ScaleDropdownSelectItemvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-dropdown-select-item",{attrs:{value:_vm.value,disabled:_vm.disabled,selected:_vm.selected,focused:_vm.focused}},[_vm._t("prefix"),_vm._v(" "),_vm._t("default"),_vm._v(" "),_vm._t("suffix")],2)}),[],!1,null,null,null).exports;var ScaleDropdownSelectItem=ScaleDropdownSelectItem_vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}ScaleDropdownSelectItem_vuedocgen_export_0.__docgenInfo={displayName:"Dropdown Select Item",exportName:"default",description:"",tags:{},props:[{name:"value",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"selected",type:{name:"boolean"}},{name:"focused",type:{name:"boolean"}}],slots:[{name:"prefix"},{name:"default"},{name:"suffix"}]};var DropdownSelect_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleDropdownSelect:ScaleDropdownSelect},props:Object.assign({itemProps:{default:{}}},ScaleDropdownSelect.props),data:function data(){return{items:[{value:"caspar",label:"Caspar"},{value:"cedric",label:"Cedric"},{value:"cem",label:"Cem"}]}},template:'\n    <div style="min-height: 350px;">\n    <scale-dropdown-select\n        :label="label"\n        :helper-text="helperText"\n        :invalid="invalid"\n        :variant="variant"\n        :disabled="disabled"\n        :size="size"\n        :value="value"\n        :combobox-id="comboboxId"\n        :hide-label-visually="hideLabelVisually"\n        :floating-strategy="floatingStrategy"\n        @scaleChange="[\'scale-change\']"\n        @scaleFocus="[\'scale-focus\']"\n        @scaleBlur="[\'scale-blur\']"\n        @scaleKeyDown="[\'scale-keydown\']"\n    >\n      <scale-dropdown-select-item\n        v-for="(item, index) in items"\n        :key="index"\n        :value="item.value"\n        :disabled="itemProps[index]?.disabled"\n      >{{ item.label }}</scale-dropdown-select-item>\n</scale-dropdown-select>\n</div>\n  ',methods:{"scale-change":Object(addon_actions_dist_esm.action)("scale-change"),"scale-focus":Object(addon_actions_dist_esm.action)("scale-focus"),"scale-blur":Object(addon_actions_dist_esm.action)("scale-blur"),"scale-keydown":Object(addon_actions_dist_esm.action)("scale-keydown")}}},layoutProps={Template:DropdownSelect_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Dropdown Select",component:ScaleDropdownSelect,subcomponents:{"Dropdown Select Item":ScaleDropdownSelectItem},argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Dropdown Select"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Select",value:"caspar"},mdxType:"Story"},DropdownSelect_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown-select label="select">\n  <scale-dropdown-select-item value="caspar">Caspar</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cedric">Cedric</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cem">Cem</scale-dropdown-select-item>\n</scale-dropdown-select>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --font-weight: var(--telekom-typography-font-weight-bold);\n  --height: var(--telekom-spacing-composition-space-13);\n  --color: var(--telekom-color-text-and-icon-standard);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-disabled: none;\n  --background-hover: var(--telekom-color-ui-state-fill-hovered);\n  --border: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);\n  --border-color-hover: var(--telekom-color-ui-border-hovered);\n  --border-color-focus: var(--telekom-color-ui-border-hovered);\n  --border-color-disabled: var(--telekom-color-ui-border-disabled);\n  --border-invalid: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-hovered);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --spacing-x: var(--telekom-spacing-composition-space-05);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --radius: var(--telekom-radius-standard);\n  --spacing-x-for-helper-text: var(--telekom-spacing-composition-space-03);\n\n  /*combobox*/\n  --transition-combobox: var(--transition);\n  --background-combobox: var(--telekom-color-ui-state-fill-standard);\n  /*\n    18px 32px 4px 12px\n    (subtracting 1px from border)\n  */\n  --spacing-combobox: 1.125rem\n    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem\n    calc(0.75rem - var(--telekom-spacing-composition-space-01));\n\n  /*meta*/\n  --spacing-y-meta: var(--telekom-spacing-composition-space-03);\n  --color-meta: var(--telekom-color-text-and-icon-standard);\n\n  /*icon*/\n  --height-icon: 20px;\n  --color-icon: var(--telekom-color-text-and-icon-standard);\n  --color-icon-hover: var(--telekom-color-text-and-icon-standard);\n  --color-icon-active: var(--telekom-color-text-and-icon-standard);\n  --transition-icon: var(--transition);\n\n  /*label*/\n  --color-label: var(--telekom-color-text-and-icon-additional);\n  --z-index-label: var(--scl-z-index-10);\n  --transition-label: var(--transition);\n  --transform-label: translate(var(--spacing-x), 0.875rem);\n  --transform-label-animated: translate(\n    var(--spacing-x),\n    calc(0.25rem + var(--telekom-spacing-composition-space-01))\n  );\n\n  /*listbox*/\n  --background-listbox: var(--telekom-color-background-surface);\n  --box-shadow-listbox: 0 2px 4px 0 rgba(0, 0, 0, 0.1),\n    0 4px 16px 0 rgba(0, 0, 0, 0.1);\n  --max-height-listbox: 300px;\n  --z-index-listbox: 99;\n}\n\n")),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)("h3",{id:"whole-dropdown-select-disabled"},"Whole Dropdown Select disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",disabled:!0},mdxType:"Story"},DropdownSelect_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown-select label="Disabled" disabled>\n  <scale-dropdown-select-item value="caspar">Caspar</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cedric">Cedric</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cem">Cem</scale-dropdown-select-item>\n</scale-dropdown-select>\n')),Object(esm.b)("h3",{id:"individual-items-disabled"},"Individual items disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled items",args:{label:"Individual items disabled",itemProps:{0:{disabled:!0},1:{disabled:!0}}},mdxType:"Story"},DropdownSelect_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown-select label="Disabled items">\n  <scale-dropdown-select-item value="caspar" disabled>Caspar</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cedric" disabled>Cedric</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cem">Cem</scale-dropdown-select-item>\n</scale-dropdown-select>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{label:"Error",invalid:!0,helperText:"Something went wrong..."},mdxType:"Story"},DropdownSelect_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown-select\n  label="Error"\n  invalid\n  helper-text="Something went wrong..."\n>\n  <scale-dropdown-select-item value="caspar">Caspar</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cedric">Cedric</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cem">Cem</scale-dropdown-select-item>\n</scale-dropdown-select>\n')))}MDXContent.isMDXComponent=!0;var standard=DropdownSelect_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Select",value:"caspar"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropdownSelect\n  },\n  props: {\n    itemProps: {\n      default: {}\n    },\n    ...ScaleDropdownSelect.props\n  },\n\n  data() {\n    return {\n      items: [{\n        value: \'caspar\',\n        label: \'Caspar\'\n      }, {\n        value: \'cedric\',\n        label: \'Cedric\'\n      }, {\n        value: \'cem\',\n        label: \'Cem\'\n      }]\n    };\n  },\n\n  template: `\n    <div style="min-height: 350px;">\n    <scale-dropdown-select\n        :label="label"\n        :helper-text="helperText"\n        :invalid="invalid"\n        :variant="variant"\n        :disabled="disabled"\n        :size="size"\n        :value="value"\n        :combobox-id="comboboxId"\n        :hide-label-visually="hideLabelVisually"\n        :floating-strategy="floatingStrategy"\n        @scaleChange="[\'scale-change\']"\n        @scaleFocus="[\'scale-focus\']"\n        @scaleBlur="[\'scale-blur\']"\n        @scaleKeyDown="[\'scale-keydown\']"\n    >\n      <scale-dropdown-select-item\n        v-for="(item, index) in items"\n        :key="index"\n        :value="item.value"\n        :disabled="itemProps[index]?.disabled"\n      >{{ item.label }}</scale-dropdown-select-item>\n</scale-dropdown-select>\n</div>\n  `,\n  methods: {\n    \'scale-change\': action(\'scale-change\'),\n    \'scale-focus\': action(\'scale-focus\'),\n    \'scale-blur\': action(\'scale-blur\'),\n    \'scale-keydown\': action(\'scale-keydown\')\n  }\n})'}};var disabled=DropdownSelect_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropdownSelect\n  },\n  props: {\n    itemProps: {\n      default: {}\n    },\n    ...ScaleDropdownSelect.props\n  },\n\n  data() {\n    return {\n      items: [{\n        value: \'caspar\',\n        label: \'Caspar\'\n      }, {\n        value: \'cedric\',\n        label: \'Cedric\'\n      }, {\n        value: \'cem\',\n        label: \'Cem\'\n      }]\n    };\n  },\n\n  template: `\n    <div style="min-height: 350px;">\n    <scale-dropdown-select\n        :label="label"\n        :helper-text="helperText"\n        :invalid="invalid"\n        :variant="variant"\n        :disabled="disabled"\n        :size="size"\n        :value="value"\n        :combobox-id="comboboxId"\n        :hide-label-visually="hideLabelVisually"\n        :floating-strategy="floatingStrategy"\n        @scaleChange="[\'scale-change\']"\n        @scaleFocus="[\'scale-focus\']"\n        @scaleBlur="[\'scale-blur\']"\n        @scaleKeyDown="[\'scale-keydown\']"\n    >\n      <scale-dropdown-select-item\n        v-for="(item, index) in items"\n        :key="index"\n        :value="item.value"\n        :disabled="itemProps[index]?.disabled"\n      >{{ item.label }}</scale-dropdown-select-item>\n</scale-dropdown-select>\n</div>\n  `,\n  methods: {\n    \'scale-change\': action(\'scale-change\'),\n    \'scale-focus\': action(\'scale-focus\'),\n    \'scale-blur\': action(\'scale-blur\'),\n    \'scale-keydown\': action(\'scale-keydown\')\n  }\n})'}};var disabledItems=DropdownSelect_stories_Template.bind({});disabledItems.storyName="Disabled items",disabledItems.args={label:"Individual items disabled",itemProps:{0:{disabled:!0},1:{disabled:!0}}},disabledItems.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropdownSelect\n  },\n  props: {\n    itemProps: {\n      default: {}\n    },\n    ...ScaleDropdownSelect.props\n  },\n\n  data() {\n    return {\n      items: [{\n        value: \'caspar\',\n        label: \'Caspar\'\n      }, {\n        value: \'cedric\',\n        label: \'Cedric\'\n      }, {\n        value: \'cem\',\n        label: \'Cem\'\n      }]\n    };\n  },\n\n  template: `\n    <div style="min-height: 350px;">\n    <scale-dropdown-select\n        :label="label"\n        :helper-text="helperText"\n        :invalid="invalid"\n        :variant="variant"\n        :disabled="disabled"\n        :size="size"\n        :value="value"\n        :combobox-id="comboboxId"\n        :hide-label-visually="hideLabelVisually"\n        :floating-strategy="floatingStrategy"\n        @scaleChange="[\'scale-change\']"\n        @scaleFocus="[\'scale-focus\']"\n        @scaleBlur="[\'scale-blur\']"\n        @scaleKeyDown="[\'scale-keydown\']"\n    >\n      <scale-dropdown-select-item\n        v-for="(item, index) in items"\n        :key="index"\n        :value="item.value"\n        :disabled="itemProps[index]?.disabled"\n      >{{ item.label }}</scale-dropdown-select-item>\n</scale-dropdown-select>\n</div>\n  `,\n  methods: {\n    \'scale-change\': action(\'scale-change\'),\n    \'scale-focus\': action(\'scale-focus\'),\n    \'scale-blur\': action(\'scale-blur\'),\n    \'scale-keydown\': action(\'scale-keydown\')\n  }\n})'}};var error=DropdownSelect_stories_Template.bind({});error.storyName="Error",error.args={label:"Error",invalid:!0,helperText:"Something went wrong..."},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropdownSelect\n  },\n  props: {\n    itemProps: {\n      default: {}\n    },\n    ...ScaleDropdownSelect.props\n  },\n\n  data() {\n    return {\n      items: [{\n        value: \'caspar\',\n        label: \'Caspar\'\n      }, {\n        value: \'cedric\',\n        label: \'Cedric\'\n      }, {\n        value: \'cem\',\n        label: \'Cem\'\n      }]\n    };\n  },\n\n  template: `\n    <div style="min-height: 350px;">\n    <scale-dropdown-select\n        :label="label"\n        :helper-text="helperText"\n        :invalid="invalid"\n        :variant="variant"\n        :disabled="disabled"\n        :size="size"\n        :value="value"\n        :combobox-id="comboboxId"\n        :hide-label-visually="hideLabelVisually"\n        :floating-strategy="floatingStrategy"\n        @scaleChange="[\'scale-change\']"\n        @scaleFocus="[\'scale-focus\']"\n        @scaleBlur="[\'scale-blur\']"\n        @scaleKeyDown="[\'scale-keydown\']"\n    >\n      <scale-dropdown-select-item\n        v-for="(item, index) in items"\n        :key="index"\n        :value="item.value"\n        :disabled="itemProps[index]?.disabled"\n      >{{ item.label }}</scale-dropdown-select-item>\n</scale-dropdown-select>\n</div>\n  `,\n  methods: {\n    \'scale-change\': action(\'scale-change\'),\n    \'scale-focus\': action(\'scale-focus\'),\n    \'scale-blur\': action(\'scale-blur\'),\n    \'scale-keydown\': action(\'scale-keydown\')\n  }\n})'}};var componentMeta={title:"Components/Dropdown Select",component:ScaleDropdownSelect,subcomponents:{"Dropdown Select Item":ScaleDropdownSelectItem},argTypes:{},includeStories:["standard","disabled","disabledItems","error"]},mdxStoryNameToKey={Standard:"standard",Disabled:"disabled","Disabled items":"disabledItems",Error:"error"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/dropdown/DropDown.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return DropDown_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"warning",(function(){return warning})),__webpack_require__.d(__webpack_exports__,"withCustomIcon",(function(){return withCustomIcon}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),dropdown_ScaleDropDownvue_type_script_lang_js_={props:{name:{type:String},label:{type:String},helperText:{type:String},invalid:{type:Boolean},variant:{type:String},disabled:{type:Boolean},required:{type:Boolean},value:{type:String},inputId:{type:String},visibleSize:{type:Number},controlled:{type:Boolean},styles:{type:String},size:{type:String}},methods:{scaleInput:function scaleInput($event){Object(addon_actions_dist_esm.action)("scaleInput"),this.$emit("scaleInput",$event)},"scale-input":function scaleInput($event){Object(addon_actions_dist_esm.action)("scale-input"),this.$emit("scale-input",$event)},scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},scaleFocus:function scaleFocus($event){Object(addon_actions_dist_esm.action)("scaleFocus"),this.$emit("scaleFocus",$event)},"scale-focus":function scaleFocus($event){Object(addon_actions_dist_esm.action)("scale-focus"),this.$emit("scale-focus",$event)},scaleBlur:function scaleBlur($event){Object(addon_actions_dist_esm.action)("scaleBlur"),this.$emit("scaleBlur",$event)},"scale-blur":function scaleBlur($event){Object(addon_actions_dist_esm.action)("scale-blur"),this.$emit("scale-blur",$event)},scaleKeyDown:function scaleKeyDown($event){Object(addon_actions_dist_esm.action)("scaleKeyDown"),this.$emit("scaleKeyDown",$event)},"scale-keydown":function scaleKeydown($event){Object(addon_actions_dist_esm.action)("scale-keydown"),this.$emit("scale-keydown",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(dropdown_ScaleDropDownvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-dropdown",{attrs:{name:_vm.name,label:_vm.label,"helper-text":_vm.helperText,invalid:_vm.invalid,variant:_vm.variant,disabled:_vm.disabled,required:_vm.required,value:_vm.value,size:_vm.size,"input-id":_vm.inputId,"visible-size":_vm.visibleSize,controlled:_vm.controlled},on:{scaleInput:_vm.scaleInput,scaleChange:_vm.scaleChange,scaleFocus:_vm.scaleFocus,scaleBlur:_vm.scaleBlur,scaleKeyDown:_vm.scaleKeyDown}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleDropDown=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleDropDown",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"variant",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"required",type:{name:"boolean"}},{name:"value",type:{name:"string"}},{name:"inputId",type:{name:"string"}},{name:"visibleSize",type:{name:"number"}},{name:"controlled",type:{name:"boolean"}},{name:"styles",type:{name:"string"}},{name:"size",type:{name:"string"}}],events:[{name:"scaleInput",type:{names:["undefined"]}},{name:"scale-input",type:{names:["undefined"]}},{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}},{name:"scaleFocus",type:{names:["undefined"]}},{name:"scale-focus",type:{names:["undefined"]}},{name:"scaleBlur",type:{names:["undefined"]}},{name:"scale-blur",type:{names:["undefined"]}},{name:"scaleKeyDown",type:{names:["undefined"]}},{name:"scale-keydown",type:{names:["undefined"]}}],slots:[{name:"default"}]};var DropDown_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleDropDown:ScaleDropDown},props:ScaleDropDown.props,template:'\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  ',methods:{scaleChange:Object(addon_actions_dist_esm.action)("scaleChange"),scaleFocus:Object(addon_actions_dist_esm.action)("scaleFocus"),scaleBlur:Object(addon_actions_dist_esm.action)("scaleBlur"),scaleKeyDown:Object(addon_actions_dist_esm.action)("scaleKeyDown")}}},layoutProps={Template:DropDown_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Dropdown",component:ScaleDropDown,argTypes:{size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Dropdown"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Select"},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown label="select">\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n</scale-dropdown>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --font-weight: var(--telekom-typography-font-weight-bold);\n  --height: var(--telekom-spacing-composition-space-13);\n  --spacing-x: var(--telekom-spacing-composition-space-05);\n  --spacing-dropdown: 18px var(--telekom-spacing-composition-space-12) 5px\n    calc(var(--spacing-x) - 1px);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --radius: var(--telekom-radius-standard);\n  --border: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);\n  --border-danger: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-standard);\n  --border-success: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-success-standard);\n  --border-warning: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-warning-standard);\n  --border-color-hover: var(--telekom-color-ui-border-hovered);\n  --border-color-focus: var(--telekom-color-ui-border-hovered);\n  --border-color-disabled: var(--telekom-color-ui-border-disabled);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-disabled: none;\n  --color: var(--telekom-color-text-and-icon-standard);\n  --background-color: var(--telekom-color-ui-state-fill-standard);\n  --margin-bottom-helper-text: var(--telekom-spacing-composition-space-03);\n\n  /*input*/\n  --transition-input: var(--transition);\n  --font-size-input: var(--telekom-typography-font-size-body);\n\n  /*meta*/\n  --spacing-y-meta: var(--telekom-spacing-composition-space-03);\n  --color-meta: var(--telekom-color-text-and-icon-standard);\n\n  /*icon*/\n  --height-icon: var(--telekom-spacing-composition-space-07);\n  --color-icon: var(--telekom-color-text-and-icon-standard);\n  --color-icon-hover: var(--telekom-color-text-and-icon-standard);\n  --color-icon-active: var(--telekom-color-text-and-icon-standard);\n  --transition-icon: var(--transition);\n\n  /*label*/\n  --color-label: var(--telekom-color-text-and-icon-additional);\n  --z-index-label: var(--scl-z-index-10);\n  --transition-label: var(--transition);\n  --font-size-label: var(--telekom-typography-font-size-body);\n  --font-weight-label: var(--telekom-typography-font-weight-medium);\n  --font-size-label-focus: var(--telekom-typography-font-size-small);\n  --font-weight-label-focus: var(--telekom-typography-font-weight-bold);\n}\n")),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)("p",null,"Known issues: The dropdown is ready for use. The component in disabled state is displayed incorrectly with white background in Firefox 85.0.2 (64-bit) in HCM (high contrast mode).\nThe display error is on the browser side."),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",disabled:!0},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown label="Disabled" disabled>\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n</scale-dropdown>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{label:"Error",invalid:!0,helperText:"Something went wrong..."},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown label="Error" invalid helper-text="Something went wrong...">\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n</scale-dropdown>\n')),Object(esm.b)("h2",{id:"success"},"Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Success",args:{label:"Success",variant:"success",helperText:"Something went successful..."},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown\n  label="Success"\n  variant="success"\n  helper-text="Something went successful..."\n>\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n</scale-dropdown>\n')),Object(esm.b)("h2",{id:"warning"},"Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Warning",args:{label:"Warning",variant:"warning",helperText:"Something with warning..."},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown\n  label="Warning"\n  variant="warning"\n  helper-text="Something with warning..."\n>\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n</scale-dropdown>\n')),Object(esm.b)("h2",{id:"with-custom-icon"},"With Custom Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Custom Icon",args:{label:"With Custom Icon"},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown label="With Custom Icon">\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n  <scale-icon-content-calendar size="20" slot="icon"></scale-icon-content-calendar>\n</scale-dropdown>\n')))}MDXContent.isMDXComponent=!0;var standard=DropDown_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Select"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var disabled=DropDown_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var error=DropDown_stories_Template.bind({});error.storyName="Error",error.args={label:"Error",invalid:!0,helperText:"Something went wrong..."},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var success=DropDown_stories_Template.bind({});success.storyName="Success",success.args={label:"Success",variant:"success",helperText:"Something went successful..."},success.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var warning=DropDown_stories_Template.bind({});warning.storyName="Warning",warning.args={label:"Warning",variant:"warning",helperText:"Something with warning..."},warning.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var withCustomIcon=DropDown_stories_Template.bind({});withCustomIcon.storyName="With Custom Icon",withCustomIcon.args={label:"With Custom Icon"},withCustomIcon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var componentMeta={title:"Deprecated Components/Dropdown",component:ScaleDropDown,argTypes:{size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},includeStories:["standard","disabled","error","success","warning","withCustomIcon"]},mdxStoryNameToKey={Standard:"standard",Disabled:"disabled",Error:"error",Success:"success",Warning:"warning","With Custom Icon":"withCustomIcon"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/flyout-menu/MenuFlyout.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"standard",(function(){return MenuFlyout_stories_standard})),__webpack_require__.d(__webpack_exports__,"cascadingMenu",(function(){return MenuFlyout_stories_cascadingMenu})),__webpack_require__.d(__webpack_exports__,"checkedToggle",(function(){return MenuFlyout_stories_checkedToggle}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),flyout_menu_ScaleMenuFlyoutvue_type_script_lang_js_={props:{closeOnSelect:{type:Boolean,default:!0},direction:{type:String,default:"bottom-right"},styles:{type:String}},methods:{emit:function emit(){this.$emit("scale-open"),this.$emit("scale-close"),this.$emit("scale-select")}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(flyout_menu_ScaleMenuFlyoutvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("trigger"),this._v(" "),this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleMenuFlyout=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleMenuFlyout",description:"",tags:{},props:[{name:"closeOnSelect",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"direction",type:{name:"string"},defaultValue:{func:!1,value:"'bottom-right'"}},{name:"styles",type:{name:"string"}}],events:[{name:"scale-open"},{name:"scale-close"},{name:"scale-select"}],slots:[{name:"trigger"},{name:"default"}]};var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Flyout Menu",component:ScaleMenuFlyout,argTypes:{direction:{control:{type:"select",options:["bottom-right","bottom-left","top-right","top-left","right","left"]},description:"Set preference for where the menu appears, space permitting"},closeOnSelect:{control:{type:"boolean"},description:"Determines whether the dropdown should close when a menu item is selected"}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Flyout Menu"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",mdxType:"Story"},{props:Object.assign({},ScaleMenuFlyout.props),methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select")},template:'\n        <div style="display:flex; height:200px;">\n          <scale-menu-flyout\n            :direction="direction"\n            :close-on-select="String(closeOnSelect)"\n            @scale-open="handleOpen"\n            @scale-close="handleClose"\n            @scale-select="handleSelect"\n          >\n            <scale-button slot="trigger" variant="secondary" icon-only>\n              <scale-icon-service-settings accessibility-title="Open menu"></scale-icon-service-settings>\n            </scale-button>\n            <scale-menu-flyout-list>\n              <scale-menu-flyout-item>Menu Item 1</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 2</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 3</scale-menu-flyout-item>\n            </scale-menu-flyout-list>\n          </scale-menu-flyout>\n        </div>\n      '})),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout>\n  <scale-button slot="trigger" variant="secondary" icon-only>\n    <scale-icon-service-settings\n      accessibility-title="Open menu"\n    ></scale-icon-service-settings>\n  </scale-button>\n  <scale-menu-flyout-list>\n    <scale-menu-flyout-item>Menu Item 1</scale-menu-flyout-item>\n    <scale-menu-flyout-item>Menu Item 2</scale-menu-flyout-item>\n    <scale-menu-flyout-item>Menu Item 3</scale-menu-flyout-item>\n  </scale-menu-flyout-list>\n</scale-menu-flyout>\n')),Object(esm.b)("h2",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --spacing-y-list: 0;\n  --spacing-x-list: 0;\n}\n\n:host(menu-flyout-item) {\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);  \n}\n\n/* menu-flyout-divider */\n:host(scale-menu-flyout-divider) {\n  --color: var(--telekom-color-ui-faint);\n}\n")),Object(esm.b)("h2",{id:"breaking-changes-from-300-beta22"},"Breaking Changes from ",Object(esm.b)("inlineCode",{parentName:"h2"},"3.0.0-beta.22")),Object(esm.b)("h3",{id:"cascading-has-changed"},"Cascading has changed"),Object(esm.b)("p",null,"Before (you'd nest an entire ",Object(esm.b)("inlineCode",{parentName:"p"},"scale-menu-flyout")," in place of an item):"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout>\n  <scale-button slot="trigger" variant="secondary"> Menu </scale-button>\n  <scale-menu-flyout-list>\n    <scale-menu-flyout-item>Item 1</scale-menu-flyout-item>\n    <scale-menu-flyout-item>Item 2</scale-menu-flyout-item>\n    <scale-menu-flyout>\n      <scale-menu-flyout-item slot="trigger" cascade\n        >More Options</scale-menu-flyout-item\n      >\n      <scale-menu-flyout-list>\n        <scale-menu-flyout-item>Option 1</scale-menu-flyout-item>\n        <scale-menu-flyout-item>Option 2</scale-menu-flyout-item>\n        <scale-menu-flyout-item>Option 3</scale-menu-flyout-item>\n      </scale-menu-flyout-list>\n    </scale-menu-flyout>\n  </scale-menu-flyout-list>\n</scale-menu-flyout>\n')),Object(esm.b)("p",null,"After (you place a ",Object(esm.b)("inlineCode",{parentName:"p"},"scale-menu-flyout-list")," with ",Object(esm.b)("inlineCode",{parentName:"p"},'slot="sublist"')," inside of a ",Object(esm.b)("inlineCode",{parentName:"p"},"scale-menu-flyout-item"),"):"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout>\n  <scale-button slot="trigger" variant="secondary"> Menu </scale-button>\n  <scale-menu-flyout-list>\n    <scale-menu-flyout-item>Item 1</scale-menu-flyout-item>\n    <scale-menu-flyout-item>Item 2</scale-menu-flyout-item>\n    <scale-menu-flyout-item\n      >More Options\n      <scale-menu-flyout-list slot="sublist">\n        <scale-menu-flyout-item>Option 1</scale-menu-flyout-item>\n        <scale-menu-flyout-item>Option 2</scale-menu-flyout-item>\n        <scale-menu-flyout-item>Option 3</scale-menu-flyout-item>\n      </scale-menu-flyout-list>\n    </scale-menu-flyout-item>\n  </scale-menu-flyout-list>\n</scale-menu-flyout>\n')),Object(esm.b)("h3",{id:"checked-toogles-require-a-new-checkable-attribute"},"Checked toogles require a new ",Object(esm.b)("inlineCode",{parentName:"h3"},"checkable")," attribute"),Object(esm.b)("p",null,"With a value of either ",Object(esm.b)("inlineCode",{parentName:"p"},"checkbox")," or ",Object(esm.b)("inlineCode",{parentName:"p"},"radio"),". And then use ",Object(esm.b)("inlineCode",{parentName:"p"},"checked")," has a truly boolean attribute to mark these items has checked."),Object(esm.b)("p",null,"Before:"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout-list>\n  <scale-menu-flyout-item checked="false"\n    >Toggle option 1</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checked="true"\n    >Toggle option 2</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checked="false"\n    >Toggle option 3</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checked="false"\n    >Toggle option 4</scale-menu-flyout-item\n  >\n</scale-menu-flyout-list>\n')),Object(esm.b)("p",null,"After:"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout-list>\n  <scale-menu-flyout-item checkable="checkbox"\n    >Toggle option 1</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checkable="checkbox" checked\n    >Toggle option 2</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checkable="checkbox"\n    >Toggle option 3</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checkable="checkbox"\n    >Toggle option 4</scale-menu-flyout-item\n  >\n</scale-menu-flyout-list>\n')),Object(esm.b)("h3",{id:"avoid-listening-for-click-events-in-items"},"Avoid listening for ",Object(esm.b)("inlineCode",{parentName:"h3"},"click")," events in items"),Object(esm.b)("p",null,"Use ",Object(esm.b)("inlineCode",{parentName:"p"},"scale-select")," which will be triggered by both mouse and keyboard input."),Object(esm.b)("h2",{id:"cascading-menu"},"Cascading Menu"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Cascading Menu",mdxType:"Story"},{methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select")},template:'\n      <div style="display:flex; height:400px;">\n        <scale-menu-flyout @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary" icon-only>\n            <scale-icon-action-filter accessibility-title="Open menu"></scale-icon-action-filter>\n          </scale-button>\n          <scale-menu-flyout-list>\n            <scale-menu-flyout-item>Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-item>Really Quite Long Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>Item With Suffix 1<span slot="suffix">⌘X</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item>Item With Suffix 2<span slot="suffix">⌘Y</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item disabled>Item With Suffix 3<span slot="suffix">⌘Z</span></scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>\n              Other Options\n              <scale-menu-flyout-list slot="sublist">\n                <scale-menu-flyout-item><scale-icon-action-cut-paste slot="prefix"></scale-icon-action-cut-paste>Item With Prefix 1</scale-menu-flyout-item>\n                <scale-menu-flyout-item>\n                  <scale-icon-action-loop slot="prefix"></scale-icon-action-loop>Item With Prefix 2\n                  <scale-menu-flyout-list slot="sublist">\n                    <scale-menu-flyout-item>Third Level Item 1</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 2</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 3</scale-menu-flyout-item>\n                  </scale-menu-flyout-list>\n                </scale-menu-flyout-item>\n                <scale-menu-flyout-item><scale-icon-action-more slot="prefix"></scale-icon-action-more>Item With Prefix 3</scale-menu-flyout-item>\n              </scale-menu-flyout-list>\n            </scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      </div>  \n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout>\n  <scale-button slot="trigger" variant="secondary" icon-only>\n    <scale-icon-action-filter\n      accessibility-title="Open menu"\n    ></scale-icon-action-filter>\n  </scale-button>\n  <scale-menu-flyout-list>\n    <scale-menu-flyout-item>Item Title</scale-menu-flyout-item>\n    <scale-menu-flyout-item\n      >Really Quite Long Item Title</scale-menu-flyout-item\n    >\n    <scale-menu-flyout-divider></scale-menu-flyout-divider>\n    <scale-menu-flyout-item\n      >Item With Suffix 1<span slot="suffix">⌘F</span></scale-menu-flyout-item\n    >\n    <scale-menu-flyout-item\n      >Item With Suffix 2<span slot="suffix">⌘H</span></scale-menu-flyout-item\n    >\n    <scale-menu-flyout-divider></scale-menu-flyout-divider>\n    <scale-menu-flyout-item>\n      Other Options\n      <scale-menu-flyout-list slot="sublist">\n        <scale-menu-flyout-item>\n          <scale-icon-action-cut-paste\n            slot="prefix"\n          ></scale-icon-action-cut-paste\n          >Item With Prefix 1\n        </scale-menu-flyout-item>\n        <scale-menu-flyout-item>\n          <scale-icon-action-loop slot="prefix"></scale-icon-action-loop>Item\n          With Prefix 2\n          <scale-menu-flyout-list slot="sublist">\n            <scale-menu-flyout-item>Third Level Item 1</scale-menu-flyout-item>\n            <scale-menu-flyout-item>Third Level Item 2</scale-menu-flyout-item>\n            <scale-menu-flyout-item>Third Level Item 3</scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout-item>\n        <scale-menu-flyout-item>\n          <scale-icon-action-more slot="prefix"></scale-icon-action-more>Item\n          With Prefix 3\n        </scale-menu-flyout-item>\n      </scale-menu-flyout-list>\n    </scale-menu-flyout-item>\n  </scale-menu-flyout-list>\n</scale-menu-flyout>\n')),Object(esm.b)("h3",{id:"accessibility-notice"},"Accessibility Notice"),Object(esm.b)("p",null,"There are two known issues with the JAWS2019 screen reader and Google Chrome, that may represent slight limitations. When nested submenus are present, (1) the focus will be placed on the second item of the menu, and (2) in submenus with submenus, the first item in the menu won't be read the first time it receives focus."),Object(esm.b)("h2",{id:"checked-toggle"},"Checked Toggle"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Checked Toggle",mdxType:"Story"},{methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select"),toggleChecked:function toggleChecked(event){event.target.checked=!event.target.checked}},template:'\n        <scale-menu-flyout close-on-select="false" @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary">\n            Options <scale-icon-navigation-collapse-down aria-hidden="true"></scale-icon-navigation-collapse-down>\n          </scale-button>\n          <scale-menu-flyout-list @scale-select="toggleChecked">\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 1</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox" checked>Toggle option 2</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 3</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 4</scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout close-on-select="false">\n  <scale-button slot="trigger" variant="secondary">\n    Options\n    <scale-icon-navigation-collapse-down\n      aria-hidden="true"\n    ></scale-icon-navigation-collapse-down>\n  </scale-button>\n  <scale-menu-flyout-list>\n    <scale-menu-flyout-item checkable="checkbox"\n      >Toggle option 1</scale-menu-flyout-item\n    >\n    <scale-menu-flyout-item checkable="checkbox" checked\n      >Toggle option 2</scale-menu-flyout-item\n    >\n    <scale-menu-flyout-item checkable="checkbox"\n      >Toggle option 3</scale-menu-flyout-item\n    >\n    <scale-menu-flyout-item checkable="checkbox"\n      >Toggle option 4</scale-menu-flyout-item\n    >\n  </scale-menu-flyout-list>\n</scale-menu-flyout>\n\n<script>\n  const list = document.querySelector(\'scale-menu-flyout-list\');\n\n  list.addEventListener(\'scale-select\', function (event) {\n    const item = event.target;\n    item.checked = !item.checked;\n  });\n<\/script>\n')))}MDXContent.isMDXComponent=!0;var MenuFlyout_stories_standard=function standard(){return{props:Object.assign({},ScaleMenuFlyout.props),methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select")},template:'\n        <div style="display:flex; height:200px;">\n          <scale-menu-flyout\n            :direction="direction"\n            :close-on-select="String(closeOnSelect)"\n            @scale-open="handleOpen"\n            @scale-close="handleClose"\n            @scale-select="handleSelect"\n          >\n            <scale-button slot="trigger" variant="secondary" icon-only>\n              <scale-icon-service-settings accessibility-title="Open menu"></scale-icon-service-settings>\n            </scale-button>\n            <scale-menu-flyout-list>\n              <scale-menu-flyout-item>Menu Item 1</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 2</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 3</scale-menu-flyout-item>\n            </scale-menu-flyout-list>\n          </scale-menu-flyout>\n        </div>\n      '}};MenuFlyout_stories_standard.storyName="Standard",MenuFlyout_stories_standard.parameters={storySource:{source:'{\n  props: { ...ScaleMenuFlyout.props\n  },\n  methods: {\n    handleOpen: action(\'scale-open\'),\n    handleClose: action(\'scale-close\'),\n    handleSelect: action(\'scale-select\')\n  },\n  template: `\n        <div style="display:flex; height:200px;">\n          <scale-menu-flyout\n            :direction="direction"\n            :close-on-select="String(closeOnSelect)"\n            @scale-open="handleOpen"\n            @scale-close="handleClose"\n            @scale-select="handleSelect"\n          >\n            <scale-button slot="trigger" variant="secondary" icon-only>\n              <scale-icon-service-settings accessibility-title="Open menu"></scale-icon-service-settings>\n            </scale-button>\n            <scale-menu-flyout-list>\n              <scale-menu-flyout-item>Menu Item 1</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 2</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 3</scale-menu-flyout-item>\n            </scale-menu-flyout-list>\n          </scale-menu-flyout>\n        </div>\n      `\n}'}};var MenuFlyout_stories_cascadingMenu=function cascadingMenu(){return{methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select")},template:'\n      <div style="display:flex; height:400px;">\n        <scale-menu-flyout @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary" icon-only>\n            <scale-icon-action-filter accessibility-title="Open menu"></scale-icon-action-filter>\n          </scale-button>\n          <scale-menu-flyout-list>\n            <scale-menu-flyout-item>Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-item>Really Quite Long Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>Item With Suffix 1<span slot="suffix">⌘X</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item>Item With Suffix 2<span slot="suffix">⌘Y</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item disabled>Item With Suffix 3<span slot="suffix">⌘Z</span></scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>\n              Other Options\n              <scale-menu-flyout-list slot="sublist">\n                <scale-menu-flyout-item><scale-icon-action-cut-paste slot="prefix"></scale-icon-action-cut-paste>Item With Prefix 1</scale-menu-flyout-item>\n                <scale-menu-flyout-item>\n                  <scale-icon-action-loop slot="prefix"></scale-icon-action-loop>Item With Prefix 2\n                  <scale-menu-flyout-list slot="sublist">\n                    <scale-menu-flyout-item>Third Level Item 1</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 2</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 3</scale-menu-flyout-item>\n                  </scale-menu-flyout-list>\n                </scale-menu-flyout-item>\n                <scale-menu-flyout-item><scale-icon-action-more slot="prefix"></scale-icon-action-more>Item With Prefix 3</scale-menu-flyout-item>\n              </scale-menu-flyout-list>\n            </scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      </div>  \n      '}};MenuFlyout_stories_cascadingMenu.storyName="Cascading Menu",MenuFlyout_stories_cascadingMenu.parameters={storySource:{source:'{\n  methods: {\n    handleOpen: action(\'scale-open\'),\n    handleClose: action(\'scale-close\'),\n    handleSelect: action(\'scale-select\')\n  },\n  template: `\n      <div style="display:flex; height:400px;">\n        <scale-menu-flyout @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary" icon-only>\n            <scale-icon-action-filter accessibility-title="Open menu"></scale-icon-action-filter>\n          </scale-button>\n          <scale-menu-flyout-list>\n            <scale-menu-flyout-item>Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-item>Really Quite Long Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>Item With Suffix 1<span slot="suffix">⌘X</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item>Item With Suffix 2<span slot="suffix">⌘Y</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item disabled>Item With Suffix 3<span slot="suffix">⌘Z</span></scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>\n              Other Options\n              <scale-menu-flyout-list slot="sublist">\n                <scale-menu-flyout-item><scale-icon-action-cut-paste slot="prefix"></scale-icon-action-cut-paste>Item With Prefix 1</scale-menu-flyout-item>\n                <scale-menu-flyout-item>\n                  <scale-icon-action-loop slot="prefix"></scale-icon-action-loop>Item With Prefix 2\n                  <scale-menu-flyout-list slot="sublist">\n                    <scale-menu-flyout-item>Third Level Item 1</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 2</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 3</scale-menu-flyout-item>\n                  </scale-menu-flyout-list>\n                </scale-menu-flyout-item>\n                <scale-menu-flyout-item><scale-icon-action-more slot="prefix"></scale-icon-action-more>Item With Prefix 3</scale-menu-flyout-item>\n              </scale-menu-flyout-list>\n            </scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      </div>  \n      `\n}'}};var MenuFlyout_stories_checkedToggle=function checkedToggle(){return{methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select"),toggleChecked:function toggleChecked(event){event.target.checked=!event.target.checked}},template:'\n        <scale-menu-flyout close-on-select="false" @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary">\n            Options <scale-icon-navigation-collapse-down aria-hidden="true"></scale-icon-navigation-collapse-down>\n          </scale-button>\n          <scale-menu-flyout-list @scale-select="toggleChecked">\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 1</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox" checked>Toggle option 2</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 3</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 4</scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      '}};MenuFlyout_stories_checkedToggle.storyName="Checked Toggle",MenuFlyout_stories_checkedToggle.parameters={storySource:{source:'{\n  methods: {\n    handleOpen: action(\'scale-open\'),\n    handleClose: action(\'scale-close\'),\n    handleSelect: action(\'scale-select\'),\n    toggleChecked: function (event) {\n      event.target.checked = !event.target.checked;\n    }\n  },\n  template: `\n        <scale-menu-flyout close-on-select="false" @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary">\n            Options <scale-icon-navigation-collapse-down aria-hidden="true"></scale-icon-navigation-collapse-down>\n          </scale-button>\n          <scale-menu-flyout-list @scale-select="toggleChecked">\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 1</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox" checked>Toggle option 2</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 3</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 4</scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      `\n}'}};var componentMeta={title:"Components/Flyout Menu",component:ScaleMenuFlyout,argTypes:{direction:{control:{type:"select",options:["bottom-right","bottom-left","top-right","top-left","right","left"]},description:"Set preference for where the menu appears, space permitting"},closeOnSelect:{control:{type:"boolean"},description:"Determines whether the dropdown should close when a menu item is selected"}},includeStories:["standard","cascadingMenu","checkedToggle"]},mdxStoryNameToKey={Standard:"standard","Cascading Menu":"cascadingMenu","Checked Toggle":"checkedToggle"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/icon/Icon.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"PATH",(function(){return PATH})),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Icon_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"withPathAttribute",(function(){return withPathAttribute})),__webpack_require__.d(__webpack_exports__,"withNameAttribute",(function(){return withNameAttribute})),__webpack_require__.d(__webpack_exports__,"iconLibrary",(function(){return Icon_stories_iconLibrary}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),icon_ScaleIconvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{name:String,path:String,size:{type:Number,default:24},fill:{type:String,default:"var(--icon-color, currentColor)"},stroke:{type:String,default:"transparent"},focusable:{type:Boolean,default:!1},decorative:{type:Boolean,default:!1},accessibilityTitle:{type:String},styles:{type:String}}}),componentNormalizer=(__webpack_require__("./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&"),__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"));const __vuedocgen_export_0=Object(componentNormalizer.a)(icon_ScaleIconvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",[_c("div",{staticClass:"visually-hidden"},[_c("svg",[_c("defs",[_c("g",{attrs:{id:"icon-profile"}},[_c("path",{attrs:{d:"M8.9 16.5l3.1 3.1 3.1-3.1h2.25c2.35 0 4.3 1.65 4.7 3.95l.15 1.05H1.8l.15-1.05c.4-2.3 2.35-3.95 4.7-3.95H8.9zM12 2c3.5 0 6 2.5 6 6 0 1.25-.35 2.55-.95 3.65-1 1.9-2.8 3.35-5.05 3.35s-4.05-1.45-5.05-3.35C6.35 10.55 6 9.25 6 8c0-3.5 2.5-6 6-6zm0 1.5C9.4 3.5 7.5 5.4 7.5 8c0 .85.2 1.75.55 2.55.7 1.65 2.15 2.95 3.95 2.95 1.8 0 3.25-1.3 3.95-2.95.35-.8.55-1.7.55-2.55 0-2.6-1.9-4.5-4.5-4.5z","fill-rule":"nonzero"}})]),_vm._v(" "),_c("g",{attrs:{id:"icon-search"}},[_c("path",{attrs:{d:"M10 2a8 8 0 016.472 12.703l4.912 4.913.06.065a1.25 1.25 0 01-1.726 1.794l-.102-.091-4.913-4.912A8 8 0 1110 2zm0 1.5A6.508 6.508 0 003.5 10c0 3.584 2.916 6.5 6.5 6.5s6.5-2.916 6.5-6.5-2.916-6.5-6.5-6.5z","fill-rule":"nonzero"}})]),_vm._v(" "),_c("g",{attrs:{id:"icon-shopping-bag"}},[_c("path",{attrs:{d:"M11.84 1.5a4.5 4.5 0 014.495 4.288l.004.212v.749l4.45.001.883 12.794a3 3 0 01-2.993 3.206H5a3 3 0 01-2.992-3.206L2.89 6.75h4.45V6l.002-.133A4.5 4.5 0 0111.84 1.5zm7.549 6.75h-15.1l-.785 11.397A1.5 1.5 0 005 21.25h13.68l.088-.003a1.5 1.5 0 001.407-1.6L19.39 8.25zM8.089 9.5a1 1 0 11.002 1.999A1 1 0 018.089 9.5zm7.5 0a1 1 0 11.002 1.999 1 1 0 01-.002-1.999zM11.84 3a3 3 0 00-2.994 2.824L8.839 6v.75l6-.001V6l-.002-.112A3 3 0 0011.84 3z","fill-rule":"nonzero"}})]),_vm._v(" "),_c("g",{attrs:{id:"icon-menu"}},[_c("path",{attrs:{d:"M20.5,16.5 L20.5,18.5 L3.5,18.5 L3.5,16.5 L20.5,16.5 Z M20.5,11 L20.5,13 L3.5,13 L3.5,11 L20.5,11 Z M20.5,5.5 L20.5,7.5 L3.5,7.5 L3.5,5.5 L20.5,5.5 Z","fill-rule":"nonzero"}})])])])]),_vm._v(" "),_c("scale-icon",{attrs:{name:_vm.name,path:_vm.path,size:_vm.size,fill:_vm.fill,stroke:_vm.stroke,focusable:_vm.focusable,decorative:_vm.decorative,"accessibility-title":_vm.accessibilityTitle,styles:_vm.styles}})],1)}),[],!1,null,"4083c6d8",null).exports;var ScaleIcon=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleIcon",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"path",type:{name:"string"}},{name:"size",type:{name:"number"},defaultValue:{func:!1,value:"24"}},{name:"fill",type:{name:"string"},defaultValue:{func:!1,value:"'var(--icon-color, currentColor)'"}},{name:"stroke",type:{name:"string"},defaultValue:{func:!1,value:"'transparent'"}},{name:"focusable",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"decorative",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"accessibilityTitle",type:{name:"string"}},{name:"styles",type:{name:"string"}}]};var icon_ScaleIconLibraryExamplevue_type_script_lang_js_={props:{fill:{type:String,default:"currentColor"},color:{type:String,default:"currentColor"},size:{type:Number,default:24},selected:{type:Boolean,default:!1},decorative:{type:Boolean,default:!1},accessibilityTitle:{type:String}}};const ScaleIconLibraryExample_vuedocgen_export_0=Object(componentNormalizer.a)(icon_ScaleIconLibraryExamplevue_type_script_lang_js_,(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("div",[_c("scale-icon-action-favorite",{attrs:{fill:this.fill,size:this.size,selected:this.selected,decorative:this.decorative,"accessibility-title":this.accessibilityTitle}})],1)}),[],!1,null,null,null).exports;var ScaleIconLibraryExample=ScaleIconLibraryExample_vuedocgen_export_0;ScaleIconLibraryExample_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleIconLibraryExample",description:"",tags:{},props:[{name:"fill",type:{name:"string"},defaultValue:{func:!1,value:"'currentColor'"}},{name:"color",type:{name:"string"},defaultValue:{func:!1,value:"'currentColor'"}},{name:"size",type:{name:"number"},defaultValue:{func:!1,value:"24"}},{name:"selected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"decorative",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"accessibilityTitle",type:{name:"string"}}]};var scale_icons=__webpack_require__("../components/dist/scale-components/components/icons/scale-icons.json");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var PATH="M12 1c5.8 0 10.5 4.7 10.45 10.55 0 5.8-4.7 10.5-10.5 10.5-1.05 0-2.1-.15-3.05-.45l-1.45 1.45c-.35.35-.75.5-1.2.5-.9 0-1.75-.7-1.75-1.75v-2.95c-1.85-1.9-3-4.5-3-7.35C1.5 5.7 6.2 1 12 1zm0 19.5c4.95 0 9-4.05 9-9s-4.05-9-9-9-9 4.05-9 9c0 2.35.9 4.6 2.6 6.3l.45.45v3.55c0 .25.25.25.25.25.05 0 .1-.05.15-.1l2.1-2.1.85.25c.85.25 1.7.4 2.6.4zM16.25 9c.45 0 .75.35.75.75s-.35.75-.75.75h-8.7c-.4 0-.75-.35-.75-.75S7.15 9 7.55 9h8.7zm0 3.5c.45 0 .75.35.75.75s-.35.75-.75.75h-8.7c-.4 0-.75-.35-.75-.75s.35-.75.75-.75h8.7z",Icon_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleIcon:ScaleIcon},props:Object.assign({label:String},ScaleIcon.props),template:'\n    <scale-icon\n      :name="name"\n      :path="path"\n      :size="size"\n      :fill="fill"\n      :stroke="stroke"\n      :focusable="String(focusable)"\n      :decorative="decorative"\n      :accessibility-title="accessibilityTitle"\n      :styles="styles"\n    />\n  '}},layoutProps={PATH:PATH,Template:Icon_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Icon",component:ScaleIcon,subcomponents:{"Icon Library":ScaleIconLibraryExample},argTypes:{size:{control:{type:"range",min:12,max:128,step:1}},name:{control:{type:"radio",options:["profile","search","shopping-bag","menu"]}},path:{control:{type:"select",options:["",PATH]}},fill:{control:{type:"color"}},stroke:{control:{type:"text"}},styles:{control:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Icon"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{name:"profile",accessibilityTitle:"profile"},mdxType:"Story"},Icon_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-icon {\n  --display: inline-flex;\n  --transition: all var(--telekom-motion-duration-transition) var(\n      --telekom-motion-easing-standard\n    );\n}\n")),Object(esm.b)("h2",{id:"with-path-attribute"},"With Path Attribute"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Path Attribute",args:{path:PATH,accessibilityTitle:"feedback message"},mdxType:"Story"},Icon_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-icon path="M12...75h8.7z"></scale-icon>\n')),Object(esm.b)("h2",{id:"with-name-attribute"},"With Name Attribute"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Name Attribute",args:{name:"shopping-bag",accessibilityTitle:"shopping bag"},mdxType:"Story"},Icon_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-icon name="shopping-bag" /></scale-icon>\n')),Object(esm.b)("p",null,"When using the ",Object(esm.b)("inlineCode",{parentName:"p"},"name")," attribute, the component assumes there is an object with a matching id defined elsewhere in the document:"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<svg>\n  <defs>\n    <g id="icon-shopping-bag">\n      <path\n        d="M11.84 1.5a4.5 4.5 0 014.495 4.288l.004.212v.749l4.45.001.883 12.794a3 3 0 01-2.993 3.206H5a3 3 0 01-2.992-3.206L2.89 6.75h4.45V6l.002-.133A4.5 4.5 0 0111.84 1.5zm7.549 6.75h-15.1l-.785 11.397A1.5 1.5 0 005 21.25h13.68l.088-.003a1.5 1.5 0 001.407-1.6L19.39 8.25zM8.089 9.5a1 1 0 11.002 1.999A1 1 0 018.089 9.5zm7.5 0a1 1 0 11.002 1.999 1 1 0 01-.002-1.999zM11.84 3a3 3 0 00-2.994 2.824L8.839 6v.75l6-.001V6l-.002-.112A3 3 0 0011.84 3z"\n        fill-rule="nonzero"\n      />\n    </g>\n  </defs>\n</svg>\n')),Object(esm.b)("h2",{id:"icon-library"},"Icon Library"),Object(esm.b)("h2",{id:"example"},"Example"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon Library",args:{fill:"#E20074",selected:!0,size:24,accessibilityTitle:"favorite",decorative:!1},mdxType:"Story"},(function(){return ScaleIconLibraryExample}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-icon-action-favorite\n  fill="#E20074"\n  size="24"\n  selected\n  accessibility-title="favorite"\n></scale-icon-action-favorite>\n')),Object(esm.b)("h3",{id:"full-list-grouped-by-category"},"Full list, grouped by category"),Object(esm.b)("div",{style:{marginTop:16}},scale_icons.map((function(category){return Object(esm.b)("div",{key:category.category},Object(esm.b)("h4",null,category.label),Object(esm.b)("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(240px, 1fr))",gap:16,marginTop:32}},category.items.map((function(item){var markup=function markup(){return{__html:"<scale-icon-"+category.category+"-"+item+' accessibility-title="'+item+'"/>'}};return Object(esm.b)("div",{key:item},Object(esm.b)("span",null,Object(esm.b)("span",{style:{color:"#7C7C7C"}},category.category,"-"),item),Object(esm.b)(dist_esm.c,{mdxSource:markup().__html,mdxType:"Canvas"},Object(esm.b)("span",{dangerouslySetInnerHTML:markup()})))}))))}))),Object(esm.b)("h3",{id:"full-list-of-selected-grouped-by-category"},"Full list of selected, grouped by category"),Object(esm.b)("div",{style:{marginTop:16}},scale_icons.map((function(category){return Object(esm.b)("div",{key:category.category},Object(esm.b)("h4",null,category.label),Object(esm.b)("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(240px, 1fr))",gap:16,marginTop:32}},category.items.map((function(item){var markup=function markup(){return{__html:"<scale-icon-"+category.category+"-"+item+' accessibility-title="'+item+'" selected/>'}};return Object(esm.b)("div",{key:item},Object(esm.b)("span",null,Object(esm.b)("span",{style:{color:"#7C7C7C"}},category.category,"-"),item),Object(esm.b)(dist_esm.c,{mdxSource:markup().__html,mdxType:"Canvas"},Object(esm.b)("span",{dangerouslySetInnerHTML:markup()})))}))))}))))}MDXContent.isMDXComponent=!0;var standard=Icon_stories_Template.bind({});standard.storyName="Standard",standard.args={name:"profile",accessibilityTitle:"profile"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleIcon\n  },\n  props: {\n    label: String,\n    ...ScaleIcon.props\n  },\n  template: `\n    <scale-icon\n      :name="name"\n      :path="path"\n      :size="size"\n      :fill="fill"\n      :stroke="stroke"\n      :focusable="String(focusable)"\n      :decorative="decorative"\n      :accessibility-title="accessibilityTitle"\n      :styles="styles"\n    />\n  `\n})'}};var withPathAttribute=Icon_stories_Template.bind({});withPathAttribute.storyName="With Path Attribute",withPathAttribute.args={path:PATH,accessibilityTitle:"feedback message"},withPathAttribute.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleIcon\n  },\n  props: {\n    label: String,\n    ...ScaleIcon.props\n  },\n  template: `\n    <scale-icon\n      :name="name"\n      :path="path"\n      :size="size"\n      :fill="fill"\n      :stroke="stroke"\n      :focusable="String(focusable)"\n      :decorative="decorative"\n      :accessibility-title="accessibilityTitle"\n      :styles="styles"\n    />\n  `\n})'}};var withNameAttribute=Icon_stories_Template.bind({});withNameAttribute.storyName="With Name Attribute",withNameAttribute.args={name:"shopping-bag",accessibilityTitle:"shopping bag"},withNameAttribute.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleIcon\n  },\n  props: {\n    label: String,\n    ...ScaleIcon.props\n  },\n  template: `\n    <scale-icon\n      :name="name"\n      :path="path"\n      :size="size"\n      :fill="fill"\n      :stroke="stroke"\n      :focusable="String(focusable)"\n      :decorative="decorative"\n      :accessibility-title="accessibilityTitle"\n      :styles="styles"\n    />\n  `\n})'}};var Icon_stories_iconLibrary=function iconLibrary(){return ScaleIconLibraryExample};Icon_stories_iconLibrary.storyName="Icon Library",Icon_stories_iconLibrary.args={fill:"#E20074",selected:!0,size:24,accessibilityTitle:"favorite",decorative:!1},Icon_stories_iconLibrary.parameters={storySource:{source:"() => ScaleIconLibraryExample"}};var componentMeta={title:"Components/Icon",component:ScaleIcon,subcomponents:{"Icon Library":ScaleIconLibraryExample},argTypes:{size:{control:{type:"range",min:12,max:128,step:1}},name:{control:{type:"radio",options:["profile","search","shopping-bag","menu"]}},path:{control:{type:"select",options:["",PATH]}},fill:{control:{type:"color"}},stroke:{control:{type:"text"}},styles:{control:{disable:!0}}},includeStories:["standard","withPathAttribute","withNameAttribute","iconLibrary"]},mdxStoryNameToKey={Standard:"standard","With Path Attribute":"withPathAttribute","With Name Attribute":"withNameAttribute","Icon Library":"iconLibrary"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleIcon_vue_vue_type_style_index_0_id_4083c6d8_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleIcon_vue_vue_type_style_index_0_id_4083c6d8_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/link/Link.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Link_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"withIcon",(function(){return withIcon})),__webpack_require__.d(__webpack_exports__,"noUnderline",(function(){return noUnderline}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),link_ScaleLinkvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{href:String,styles:String,iconPosition:{type:String,default:"after"},omitUnderline:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},download:{type:Boolean,default:!1},hreflang:{type:String,default:null},ping:{type:String,default:null},referrerpolicy:{type:String,default:null},rel:{type:String,default:null},target:{type:String,default:null},type:{type:String,default:null},innerTabindex:Number},render:function render(){return this.$slots.default}}),componentNormalizer=(__webpack_require__("./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&"),__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"));const __vuedocgen_export_0=Object(componentNormalizer.a)(link_ScaleLinkvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleLink=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleLink",description:"",tags:{},props:[{name:"href",type:{name:"string"}},{name:"styles",type:{name:"string"}},{name:"iconPosition",type:{name:"string"},defaultValue:{func:!1,value:"'after'"}},{name:"omitUnderline",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"download",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"hreflang",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"ping",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"referrerpolicy",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"rel",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"target",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"type",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"innerTabindex",type:{name:"number"}}],slots:[{name:"default"}]};var Link_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({label:String,withIcon:{type:Boolean,default:!1}},ScaleLink.props),template:'\n    <scale-link\n      :href="href"\n      :disabled="disabled"\n      :styles="styles"\n      :omit-underline="omitUnderline"\n      :icon-position="iconPosition"\n      :download="download"\n      :hreflang="hreflang"\n      :referrerpolicy="referrerpolicy"\n      :rel="rel"\n      :target="target"\n      :type="type"\n      :inner-tabindex="innerTabindex"\n    >\n      {{ label }}\n      <scale-icon-navigation-external-link\n        v-if="withIcon"\n        size="16"\n        slot="icon"\n        accessibility-title="open link in new tab"\n      ></scale-icon-navigation-external-link>\n    </scale-link>\n    '}},layoutProps={Template:Link_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Link",component:ScaleLink,argTypes:{label:{control:{type:"text"}},omitUnderline:{type:"boolean"},withIcon:{control:{type:"boolean"}},iconPosition:{options:["after","before"],control:{type:"radio"}},download:{type:"boolean"},href:{control:{type:"text"}},hreflang:{type:"string"},ping:{type:"string"},referrerpolicy:{type:"string"},rel:{type:"string"},target:{type:"string"},type:{type:"string"},styles:{control:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Link"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"A link",href:"#top",disabled:!1,omitUnderline:!1,withIcon:!1,iconPosition:"after",download:!1,hreflang:null,ping:null,referrerpolicy:null,rel:null,target:null,type:null},mdxType:"Story"},Link_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --font-weight: ;\n  --spacing-x-icon: var(--telekom-spacing-composition-space-03);\n  --line-offset: 0.0625em;\n\n  /* initial */\n  --color: var(--telekom-color-text-and-icon-link-standard);\n  --color-line-initial: var(--telekom-color-functional-interaction-subtle);\n  --line-thickness-initial: var(--telekom-line-weight-standard);\n  /* visited */\n  --color-visited: var(--telekom-color-text-and-icon-link-visited);\n  --color-line-visited: currentColor;\n  --line-thickness-visited: var(--line-thickness-initial);\n  /* hover */\n  --color-hover: var(--telekom-color-text-and-icon-link-hovered);\n  --color-line-hover: currentColor;\n  --line-thickness-hover: var(--telekom-line-weight-highlight);\n  /* focus */\n  --color-focus-outline: var(--telekom-color-functional-focus-standard);\n  --color-focus: var(--telekom-color-text-and-icon-link-standard);\n  --color-line-focus: transparent;\n  --line-thickness-focus: 0;\n  /* active */\n  --color-active: var(--telekom-color-text-and-icon-link-active);\n  --color-line-active: currentColor;\n  --line-thickness-active: var(--telekom-line-weight-highlight);\n  /* disabled */\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --color-line-disabled: transparent;\n  --line-thickness-disabled: var(--line-thickness-initial);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"A link, disabled",disabled:!0},mdxType:"Story"},Link_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-link disabled href="#top">A link, disabled</scale-link>\n')),Object(esm.b)("h2",{id:"with-icon"},"With Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Icon",args:{label:"A link, with an icon",href:"#top",withIcon:!0,target:"_blank"},mdxType:"Story"},Link_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-link target="_blank" href="#top">\n  A link, with an icon\n  <scale-icon-navigation-external-link\n    size="16"\n    accessibility-title="open link in new tab"\n    slot="icon"\n  ></scale-icon-navigation-external-link>\n</scale-link>\n')),Object(esm.b)("h2",{id:"no-underline"},"No underline"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"No underline",args:{label:"A link, without an underline",omitUnderline:!0,innerTabindex:0},mdxType:"Story"},Link_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-link omit-underline> A link, without underline </scale-link>\n")))}MDXContent.isMDXComponent=!0;var standard=Link_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"A link",href:"#top",disabled:!1,omitUnderline:!1,withIcon:!1,iconPosition:"after",download:!1,hreflang:null,ping:null,referrerpolicy:null,rel:null,target:null,type:null},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    withIcon: {\n      type: Boolean,\n      default: false\n    },\n    ...ScaleLink.props\n  },\n  template: `\n    <scale-link\n      :href="href"\n      :disabled="disabled"\n      :styles="styles"\n      :omit-underline="omitUnderline"\n      :icon-position="iconPosition"\n      :download="download"\n      :hreflang="hreflang"\n      :referrerpolicy="referrerpolicy"\n      :rel="rel"\n      :target="target"\n      :type="type"\n      :inner-tabindex="innerTabindex"\n    >\n      {{ label }}\n      <scale-icon-navigation-external-link\n        v-if="withIcon"\n        size="16"\n        slot="icon"\n        accessibility-title="open link in new tab"\n      ></scale-icon-navigation-external-link>\n    </scale-link>\n    `\n})'}};var disabled=Link_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"A link, disabled",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    withIcon: {\n      type: Boolean,\n      default: false\n    },\n    ...ScaleLink.props\n  },\n  template: `\n    <scale-link\n      :href="href"\n      :disabled="disabled"\n      :styles="styles"\n      :omit-underline="omitUnderline"\n      :icon-position="iconPosition"\n      :download="download"\n      :hreflang="hreflang"\n      :referrerpolicy="referrerpolicy"\n      :rel="rel"\n      :target="target"\n      :type="type"\n      :inner-tabindex="innerTabindex"\n    >\n      {{ label }}\n      <scale-icon-navigation-external-link\n        v-if="withIcon"\n        size="16"\n        slot="icon"\n        accessibility-title="open link in new tab"\n      ></scale-icon-navigation-external-link>\n    </scale-link>\n    `\n})'}};var withIcon=Link_stories_Template.bind({});withIcon.storyName="With Icon",withIcon.args={label:"A link, with an icon",href:"#top",withIcon:!0,target:"_blank"},withIcon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    withIcon: {\n      type: Boolean,\n      default: false\n    },\n    ...ScaleLink.props\n  },\n  template: `\n    <scale-link\n      :href="href"\n      :disabled="disabled"\n      :styles="styles"\n      :omit-underline="omitUnderline"\n      :icon-position="iconPosition"\n      :download="download"\n      :hreflang="hreflang"\n      :referrerpolicy="referrerpolicy"\n      :rel="rel"\n      :target="target"\n      :type="type"\n      :inner-tabindex="innerTabindex"\n    >\n      {{ label }}\n      <scale-icon-navigation-external-link\n        v-if="withIcon"\n        size="16"\n        slot="icon"\n        accessibility-title="open link in new tab"\n      ></scale-icon-navigation-external-link>\n    </scale-link>\n    `\n})'}};var noUnderline=Link_stories_Template.bind({});noUnderline.storyName="No underline",noUnderline.args={label:"A link, without an underline",omitUnderline:!0,innerTabindex:0},noUnderline.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    withIcon: {\n      type: Boolean,\n      default: false\n    },\n    ...ScaleLink.props\n  },\n  template: `\n    <scale-link\n      :href="href"\n      :disabled="disabled"\n      :styles="styles"\n      :omit-underline="omitUnderline"\n      :icon-position="iconPosition"\n      :download="download"\n      :hreflang="hreflang"\n      :referrerpolicy="referrerpolicy"\n      :rel="rel"\n      :target="target"\n      :type="type"\n      :inner-tabindex="innerTabindex"\n    >\n      {{ label }}\n      <scale-icon-navigation-external-link\n        v-if="withIcon"\n        size="16"\n        slot="icon"\n        accessibility-title="open link in new tab"\n      ></scale-icon-navigation-external-link>\n    </scale-link>\n    `\n})'}};var componentMeta={title:"Components/Link",component:ScaleLink,argTypes:{label:{control:{type:"text"}},omitUnderline:{type:"boolean"},withIcon:{control:{type:"boolean"}},iconPosition:{options:["after","before"],control:{type:"radio"}},download:{type:"boolean"},href:{control:{type:"text"}},hreflang:{type:"string"},ping:{type:"string"},referrerpolicy:{type:"string"},rel:{type:"string"},target:{type:"string"},type:{type:"string"},styles:{control:{disable:!0}}},includeStories:["standard","disabled","withIcon","noUnderline"]},mdxStoryNameToKey={Standard:"standard",Disabled:"disabled","With Icon":"withIcon","No underline":"noUnderline"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleLink_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleLink_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/list/List.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return List_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateCustomIcon",(function(){return List_stories_TemplateCustomIcon})),__webpack_require__.d(__webpack_exports__,"ordered",(function(){return ordered})),__webpack_require__.d(__webpack_exports__,"unordered",(function(){return unordered})),__webpack_require__.d(__webpack_exports__,"unorderedWithCustomIcon",(function(){return unorderedWithCustomIcon}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),list_ScaleListvue_type_script_lang_js_={props:{ordered:{type:Boolean},styles:{type:String}},render:function render(){return this.$slots.default}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(list_ScaleListvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleList=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleList",description:"",tags:{},props:[{name:"ordered",type:{name:"boolean"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var list_ScaleListItemvue_type_script_lang_js_={props:{ordered:{type:Boolean,default:!1},marker:{type:Boolean,default:!0},styles:{type:String}}};const ScaleListItem_vuedocgen_export_0=Object(componentNormalizer.a)(list_ScaleListItemvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleListItem=ScaleListItem_vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}ScaleListItem_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleListItem",description:"",tags:{},props:[{name:"ordered",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"marker",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"styles",type:{name:"string"}}]};var List_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({},ScaleList.props),template:'\n    <scale-list :ordered="ordered">\n      <scale-list-item>Lorem ipsum dolor</scale-list-item>\n      <scale-list-item>Sit amet\n        <scale-list :ordered="ordered">\n          <scale-list-item>Elementum nibh</scale-list-item>\n          <scale-list-item>Penatibus et magnis\n            <scale-list :ordered="ordered">\n              <scale-list-item>Nulla facilisi</scale-list-item>\n              <scale-list-item>Aliquam etiam</scale-list-item>\n            </scale-list>\n          </scale-list-item>\n        </scale-list>\n      </scale-list-item>\n      <scale-list-item>Consetetur sadipscing</scale-list-item>\n    </scale-list>\n  '}},List_stories_TemplateCustomIcon=function TemplateCustomIcon(args){return{props:Object.assign({},ScaleList.props),template:'\n    <scale-list :ordered="ordered">\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Lorem ipsum dolor</scale-list-item>\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Sit amet</scale-list-item>\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Consetetur sadipscing</scale-list-item>\n    </scale-list>\n  '}},layoutProps={Template:List_stories_Template,TemplateCustomIcon:List_stories_TemplateCustomIcon};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/List",component:ScaleList,subcomponents:{ScaleListItem:ScaleListItem},argTypes:{ordered:{control:{type:"boolean"}},styles:{control:{type:"string",disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"List"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"ordered"},"Ordered"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Ordered",args:{ordered:!0},mdxType:"Story"},List_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Ordered",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-list ordered>\n  <scale-list-item>Lorem ipsum dolor</scale-list-item>\n  <scale-list-item\n    >Sit amet\n    <scale-list ordered>\n      <scale-list-item>Elementum nibh</scale-list-item>\n      <scale-list-item\n        >Penatibus et magnis\n        <scale-list ordered>\n          <scale-list-item>Nulla facilisi</scale-list-item>\n          <scale-list-item>Aliquam etiam</scale-list-item>\n        </scale-list>\n      </scale-list-item>\n    </scale-list>\n  </scale-list-item>\n  <scale-list-item>Consetetur sadipscing</scale-list-item>\n</scale-list>\n")),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --spacing-left: 0;\n  --spacing-left-nested: var(--telekom-spacing-composition-space-04);\n}\n\n/* scale-list-item */\n:host(scale-list-item) {\n  --display: block;\n  --font-size: var(--telekom-typography-font-size-body);\n  --line-height: var(--telekom-typography-line-spacing-standard);\n  --spacing-left: calc(0.5ch + var(--telekom-spacing-composition-space-07));\n  --spacing-left-nested: calc(\n    0.5ch + var(--telekom-spacing-composition-space-06)\n  );\n\n  --font-marker-ordered: var(--telekom-text-style-body);\n  --font-marker-ordered-nested: var(--telekom-text-style-small-bold);\n  --line-height-marker-ordered-nested: var(\n    --telekom-typography-line-spacing-standard\n  );\n  --spacing-top-marker-ordered-nested: calc(\n    var(--telekom-spacing-composition-space-06) -\n      var(--telekom-spacing-composition-space-05)\n  );\n\n  --spacing-right-no-marker: var(--telekom-spacing-composition-space-04);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"unordered"},"Unordered"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Unordered",args:{ordered:!1},mdxType:"Story"},List_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-list>\n  <scale-list-item>Lorem ipsum dolor</scale-list-item>\n  <scale-list-item\n    >Sit amet\n    <scale-list>\n      <scale-list-item>Elementum nibh</scale-list-item>\n      <scale-list-item\n        >Penatibus et magnis\n        <scale-list>\n          <scale-list-item>Nulla facilisi</scale-list-item>\n          <scale-list-item>Aliquam etiam</scale-list-item>\n        </scale-list>\n      </scale-list-item>\n    </scale-list>\n  </scale-list-item>\n  <scale-list-item>Consetetur sadipscing</scale-list-item>\n</scale-list>\n")),Object(esm.b)("h2",{id:"unordered-with-custom-icon"},"Unordered With Custom Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Unordered With Custom Icon",args:{ordered:!1},mdxType:"Story"},List_stories_TemplateCustomIcon.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-list>\n  <scale-list-item marker="false">\n    <scale-icon-navigation-right\n      size="16"\n      decorative\n    ></scale-icon-navigation-right>\n    Lorem ipsum dolor\n  </scale-list-item>\n  <scale-list-item marker="false">\n    <scale-icon-navigation-right\n      size="16"\n      decorative\n    ></scale-icon-navigation-right>\n    Sit amet\n  </scale-list-item>\n  <scale-list-item marker="false">\n    <scale-icon-navigation-right\n      size="16"\n      decorative\n    ></scale-icon-navigation-right>\n    Consetetur sadipscing\n  </scale-list-item>\n</scale-list>\n')))}MDXContent.isMDXComponent=!0;var ordered=List_stories_Template.bind({});ordered.storyName="Ordered",ordered.args={ordered:!0},ordered.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleList.props\n  },\n  template: `\n    <scale-list :ordered="ordered">\n      <scale-list-item>Lorem ipsum dolor</scale-list-item>\n      <scale-list-item>Sit amet\n        <scale-list :ordered="ordered">\n          <scale-list-item>Elementum nibh</scale-list-item>\n          <scale-list-item>Penatibus et magnis\n            <scale-list :ordered="ordered">\n              <scale-list-item>Nulla facilisi</scale-list-item>\n              <scale-list-item>Aliquam etiam</scale-list-item>\n            </scale-list>\n          </scale-list-item>\n        </scale-list>\n      </scale-list-item>\n      <scale-list-item>Consetetur sadipscing</scale-list-item>\n    </scale-list>\n  `\n})'}};var unordered=List_stories_Template.bind({});unordered.storyName="Unordered",unordered.args={ordered:!1},unordered.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleList.props\n  },\n  template: `\n    <scale-list :ordered="ordered">\n      <scale-list-item>Lorem ipsum dolor</scale-list-item>\n      <scale-list-item>Sit amet\n        <scale-list :ordered="ordered">\n          <scale-list-item>Elementum nibh</scale-list-item>\n          <scale-list-item>Penatibus et magnis\n            <scale-list :ordered="ordered">\n              <scale-list-item>Nulla facilisi</scale-list-item>\n              <scale-list-item>Aliquam etiam</scale-list-item>\n            </scale-list>\n          </scale-list-item>\n        </scale-list>\n      </scale-list-item>\n      <scale-list-item>Consetetur sadipscing</scale-list-item>\n    </scale-list>\n  `\n})'}};var unorderedWithCustomIcon=List_stories_TemplateCustomIcon.bind({});unorderedWithCustomIcon.storyName="Unordered With Custom Icon",unorderedWithCustomIcon.args={ordered:!1},unorderedWithCustomIcon.parameters={storySource:{source:'args => ({\n  props: { ...ScaleList.props\n  },\n  template: `\n    <scale-list :ordered="ordered">\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Lorem ipsum dolor</scale-list-item>\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Sit amet</scale-list-item>\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Consetetur sadipscing</scale-list-item>\n    </scale-list>\n  `\n})'}};var componentMeta={title:"Components/List",component:ScaleList,subcomponents:{ScaleListItem:ScaleListItem},argTypes:{ordered:{control:{type:"boolean"}},styles:{control:{type:"string",disable:!0}}},includeStories:["ordered","unordered","unorderedWithCustomIcon"]},mdxStoryNameToKey={Ordered:"ordered",Unordered:"unordered","Unordered With Custom Icon":"unorderedWithCustomIcon"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/loading-spinner/LoadingSpinner.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return LoadingSpinner_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"smallPrimaryHorizontal",(function(){return smallPrimaryHorizontal})),__webpack_require__.d(__webpack_exports__,"smallPrimaryVertical",(function(){return smallPrimaryVertical})),__webpack_require__.d(__webpack_exports__,"largePrimaryHorizontal",(function(){return largePrimaryHorizontal})),__webpack_require__.d(__webpack_exports__,"largePrimaryVertical",(function(){return largePrimaryVertical})),__webpack_require__.d(__webpack_exports__,"smallWhite",(function(){return smallWhite})),__webpack_require__.d(__webpack_exports__,"smallWhiteHorizontal",(function(){return smallWhiteHorizontal})),__webpack_require__.d(__webpack_exports__,"smallWhiteVertical",(function(){return smallWhiteVertical})),__webpack_require__.d(__webpack_exports__,"largeWhite",(function(){return largeWhite})),__webpack_require__.d(__webpack_exports__,"largeWhiteHorizontal",(function(){return largeWhiteHorizontal})),__webpack_require__.d(__webpack_exports__,"largeWhiteVertical",(function(){return largeWhiteVertical}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),loading_spinner_ScaleLoadingSpinnervue_type_script_lang_js_=(__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),{props:{variant:{type:0,default:"primary"},alignment:{type:0,default:"horizontal"},text:{type:String},accessibilityTitle:{type:String},size:{type:0,default:"small"}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(loading_spinner_ScaleLoadingSpinnervue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-loading-spinner",{attrs:{variant:this.variant,alignment:this.alignment,"accessibility-title":this.accessibilityTitle,text:this.text,size:this.size}})}),[],!1,null,null,null).exports;var ScaleLoadingSpinner=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleLoadingSpinner",description:"",tags:{},props:[{name:"variant",type:{name:"'white' | 'primary'"},defaultValue:{func:!1,value:"'primary'"}},{name:"alignment",type:{name:"'horizontal' | 'vertical'"},defaultValue:{func:!1,value:"'horizontal'"}},{name:"text",type:{name:"string"}},{name:"accessibilityTitle",type:{name:"string"}},{name:"size",type:{name:"'small' | 'large'"},defaultValue:{func:!1,value:"'small'"}}]};var LoadingSpinner_stories_Template=function Template(){return{components:{ScaleLoadingSpinner:ScaleLoadingSpinner},props:Object.assign({label:String},ScaleLoadingSpinner.props),template:"\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    "}},layoutProps={Template:LoadingSpinner_stories_Template};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Loading-Spinner",component:ScaleLoadingSpinner,argTypes:{variant:{control:{type:"select",options:["primary","white"]}},size:{control:{type:"select",options:["small","large","button"]}},alignment:{control:{type:"select",options:["vertical","horizontal"]}},accessibilityTitle:{control:{type:"text"}},text:{control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Loading-Spinner"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h2",{id:"small-size--horizontal-text-primary"},"Small Size & Horizontal Text (Primary)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Primary (horizontal)",args:{text:"Loading ..."},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner text="Loading ..."></scale-loading-spinner>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --size-outer-small: 24px;\n  --size-outer-large: 48px;\n  --size-inner-small: 24px;\n  --size-inner-large: 48px;\n\n  --line-height-size-small: 24px;\n  --line-height-size-large: 48px;\n\n  --font: var(--telekom-text-style-ui-bold);\n\n  --color-circle-primary: var(--telekom-color-primary-standard);\n  --color-circle-primary-inner: var(--telekom-color-ui-subtle);\n  --color-text-primary: var(--telekom-color-text-and-icon-additional);\n  --color-circle-white: var(--telekom-color-ui-base);\n  --color-circle-white-inner: var(--telekom-color-ui-regular);\n  --color-text-white: var(--telekom-color-text-and-icon-white-standard);\n\n  --spacing-vertical: var(--telekom-spacing-composition-space-05);\n  --spacing-horizontal: var(--telekom-spacing-composition-space-06);\n}\n")),Object(esm.b)("h2",{id:"small-size--vertical-text-primary"},"Small Size & Vertical Text (Primary)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Primary (vertical)",args:{text:"Loading ...",alignment:"vertical"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  text="Loading ..."\n  alignment="vertical"\n></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"large-size--horizontal-text-primary"},"Large Size & Horizontal Text (Primary)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large Primary (horizontal)",args:{size:"large",text:"Loading ..."},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner size="large" text="Loading ..."></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"large-size--vertical-text-primary"},"Large Size & Vertical Text (Primary)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large Primary (vertical)",args:{size:"large",text:"Loading ...",alignment:"vertical"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  size="large"\n  text="Loading ..."\n  alignment="vertical"\n></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"small-size-white"},"Small Size (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small White",args:{size:"small",variant:"white"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner size="small" variant="white"></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"small-size--horizontal-text-white"},"Small Size & Horizontal Text (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small White (horizontal)",args:{size:"small",text:"Loading ...",variant:"white"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  size="small"\n  text="Loading ..."\n  variant="white"\n></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"small-size--vertical-text-white"},"Small Size & Vertical Text (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small White (vertical)",args:{size:"small",text:"Loading ...",variant:"white",alignment:"vertical"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  size="small"\n  text="Loading ..."\n  variant="white"\n  alignment="vertical"\n></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"large-size-white"},"Large Size (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large White",args:{size:"large",variant:"white"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner size="large" variant="white"></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"large-size--horizontal-text-white"},"Large Size & Horizontal Text (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large White (horizontal)",args:{size:"large",text:"Loading ...",variant:"white"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  size="large"\n  text="Loading ..."\n  variant="white"\n></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"large-size--vertical-text-white"},"Large Size & Vertical Text (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large White (vertical)",args:{size:"large",variant:"white",alignment:"vertical",text:"Loading ..."},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  size="large"\n  variant="white"\n  alignment="vertical"\n  text="Loading ..."\n></scale-loading-spinner>\n')))}MDXContent.isMDXComponent=!0;var standard=LoadingSpinner_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var smallPrimaryHorizontal=LoadingSpinner_stories_Template.bind({});smallPrimaryHorizontal.storyName="Small Primary (horizontal)",smallPrimaryHorizontal.args={text:"Loading ..."},smallPrimaryHorizontal.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var smallPrimaryVertical=LoadingSpinner_stories_Template.bind({});smallPrimaryVertical.storyName="Small Primary (vertical)",smallPrimaryVertical.args={text:"Loading ...",alignment:"vertical"},smallPrimaryVertical.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var largePrimaryHorizontal=LoadingSpinner_stories_Template.bind({});largePrimaryHorizontal.storyName="Large Primary (horizontal)",largePrimaryHorizontal.args={size:"large",text:"Loading ..."},largePrimaryHorizontal.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var largePrimaryVertical=LoadingSpinner_stories_Template.bind({});largePrimaryVertical.storyName="Large Primary (vertical)",largePrimaryVertical.args={size:"large",text:"Loading ...",alignment:"vertical"},largePrimaryVertical.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var smallWhite=LoadingSpinner_stories_Template.bind({});smallWhite.storyName="Small White",smallWhite.args={size:"small",variant:"white"},smallWhite.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var smallWhiteHorizontal=LoadingSpinner_stories_Template.bind({});smallWhiteHorizontal.storyName="Small White (horizontal)",smallWhiteHorizontal.args={size:"small",text:"Loading ...",variant:"white"},smallWhiteHorizontal.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var smallWhiteVertical=LoadingSpinner_stories_Template.bind({});smallWhiteVertical.storyName="Small White (vertical)",smallWhiteVertical.args={size:"small",text:"Loading ...",variant:"white",alignment:"vertical"},smallWhiteVertical.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var largeWhite=LoadingSpinner_stories_Template.bind({});largeWhite.storyName="Large White",largeWhite.args={size:"large",variant:"white"},largeWhite.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var largeWhiteHorizontal=LoadingSpinner_stories_Template.bind({});largeWhiteHorizontal.storyName="Large White (horizontal)",largeWhiteHorizontal.args={size:"large",text:"Loading ...",variant:"white"},largeWhiteHorizontal.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var largeWhiteVertical=LoadingSpinner_stories_Template.bind({});largeWhiteVertical.storyName="Large White (vertical)",largeWhiteVertical.args={size:"large",variant:"white",alignment:"vertical",text:"Loading ..."},largeWhiteVertical.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var componentMeta={title:"Components/Loading-Spinner",component:ScaleLoadingSpinner,argTypes:{variant:{control:{type:"select",options:["primary","white"]}},size:{control:{type:"select",options:["small","large","button"]}},alignment:{control:{type:"select",options:["vertical","horizontal"]}},accessibilityTitle:{control:{type:"text"}},text:{control:{type:"text"}}},includeStories:["standard","smallPrimaryHorizontal","smallPrimaryVertical","largePrimaryHorizontal","largePrimaryVertical","smallWhite","smallWhiteHorizontal","smallWhiteVertical","largeWhite","largeWhiteHorizontal","largeWhiteVertical"]},mdxStoryNameToKey={Standard:"standard","Small Primary (horizontal)":"smallPrimaryHorizontal","Small Primary (vertical)":"smallPrimaryVertical","Large Primary (horizontal)":"largePrimaryHorizontal","Large Primary (vertical)":"largePrimaryVertical","Small White":"smallWhite","Small White (horizontal)":"smallWhiteHorizontal","Small White (vertical)":"smallWhiteVertical","Large White":"largeWhite","Large White (horizontal)":"largeWhiteHorizontal","Large White (vertical)":"largeWhiteVertical"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/logo/Logo.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Logo_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"white",(function(){return white})),__webpack_require__.d(__webpack_exports__,"sizing",(function(){return sizing})),__webpack_require__.d(__webpack_exports__,"link",(function(){return Logo_stories_link}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),logo_ScaleLogovue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{variant:{type:0,default:"magenta"},transparent:{type:Boolean,default:!1},focusable:{type:Boolean,default:!1},scrollIntoViewOnFocus:{type:Boolean,default:!1},language:{type:0,default:"de"},size:{type:Number,default:38},href:{type:String},styles:{type:String},logoAriaDescribedBy:{type:String},logoTitle:{type:String},logoHideTitle:{type:Boolean}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(logo_ScaleLogovue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-logo",{attrs:{variant:_vm.variant,transparent:_vm.transparent,language:_vm.language,size:_vm.size,styles:_vm.styles,href:_vm.href,"logo-title":_vm.logoTitle,"logo-hide-title":_vm.logoHideTitle,"logo-aria-described-by":_vm.logoAriaDescribedBy,"accessibility-title":_vm.accessibilityTitle,focusable:_vm.focusable,"scroll-into-view-on-focus":_vm.scrollIntoViewOnFocus}})}),[],!1,null,null,null).exports;var ScaleLogo=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleLogo",description:"",tags:{},props:[{name:"variant",type:{name:"'magenta' | 'white'"},defaultValue:{func:!1,value:"'magenta'"}},{name:"transparent",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"focusable",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"scrollIntoViewOnFocus",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"language",type:{name:"'de' |\n'en' |\n'cz' |\n'hr' |\n'hu' |\n'me' |\n'mk_kyr' |\n'mk_lat' |\n'ro' |\n'sk' |\n''"},defaultValue:{func:!1,value:"'de'"}},{name:"size",type:{name:"number"},defaultValue:{func:!1,value:"38"}},{name:"href",type:{name:"string"}},{name:"styles",type:{name:"string"}},{name:"logoAriaDescribedBy",type:{name:"string"}},{name:"logoTitle",type:{name:"string"}},{name:"logoHideTitle",type:{name:"boolean"}}]};var addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Logo_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleLogo:ScaleLogo},props:Object.assign({label:String},ScaleLogo.props),template:'\n    <div :style="variant === \'white\' ? \'background: #e20074; padding: 12px;\' : \'\'">\n        <scale-logo\n            :variant="variant"\n            :transparent="transparent"\n            :language="language"\n            :size="size"\n            :href="href"\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :styles="styles"\n            @click-handler="clickHandler"\n        >\n        </scale-logo>\n    </div>\n    ',methods:{clickHandler:Object(addon_actions_dist_esm.action)("clickHandler")}}},layoutProps={Template:Logo_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Logo",component:ScaleLogo,argTypes:{variant:{control:{type:"select",options:["magenta","white"]}},language:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_kyr","mk_lat","ro","sk",""]},description:"DEPRECATED - localized brand claim is not shown anymore."}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Logo"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},Logo_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h2",{id:"white"},"White"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"White",args:{variant:"white"},mdxType:"Story"},Logo_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-logo variant="white"></scale-logo>\n')),Object(esm.b)("h2",{id:"sizing"},"Sizing"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Sizing",args:{size:100},mdxType:"Story"},Logo_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-logo size="100"></scale-logo>\n')),Object(esm.b)("h2",{id:"link"},"Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Link",args:{language:"de",href:"https://www.telekom.de/start",logoTitle:"Telekom Logo – Erleben, was verbindet – Zur Startseite"},mdxType:"Story"},Logo_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-logo\n  language="de"\n  href="https://www.telekom.de/start"\n  logo-title="Telekom Logo – Erleben, was verbindet – Zur Startseite"\n></scale-logo>\n')))}MDXContent.isMDXComponent=!0;var standard=Logo_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleLogo\n  },\n  props: {\n    label: String,\n    ...ScaleLogo.props\n  },\n  template: `\n    <div :style="variant === \'white\' ? \'background: #e20074; padding: 12px;\' : \'\'">\n        <scale-logo\n            :variant="variant"\n            :transparent="transparent"\n            :language="language"\n            :size="size"\n            :href="href"\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :styles="styles"\n            @click-handler="clickHandler"\n        >\n        </scale-logo>\n    </div>\n    `,\n  methods: {\n    clickHandler: action(\'clickHandler\')\n  }\n})'}};var white=Logo_stories_Template.bind({});white.storyName="White",white.args={variant:"white"},white.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleLogo\n  },\n  props: {\n    label: String,\n    ...ScaleLogo.props\n  },\n  template: `\n    <div :style="variant === \'white\' ? \'background: #e20074; padding: 12px;\' : \'\'">\n        <scale-logo\n            :variant="variant"\n            :transparent="transparent"\n            :language="language"\n            :size="size"\n            :href="href"\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :styles="styles"\n            @click-handler="clickHandler"\n        >\n        </scale-logo>\n    </div>\n    `,\n  methods: {\n    clickHandler: action(\'clickHandler\')\n  }\n})'}};var sizing=Logo_stories_Template.bind({});sizing.storyName="Sizing",sizing.args={size:100},sizing.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleLogo\n  },\n  props: {\n    label: String,\n    ...ScaleLogo.props\n  },\n  template: `\n    <div :style="variant === \'white\' ? \'background: #e20074; padding: 12px;\' : \'\'">\n        <scale-logo\n            :variant="variant"\n            :transparent="transparent"\n            :language="language"\n            :size="size"\n            :href="href"\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :styles="styles"\n            @click-handler="clickHandler"\n        >\n        </scale-logo>\n    </div>\n    `,\n  methods: {\n    clickHandler: action(\'clickHandler\')\n  }\n})'}};var Logo_stories_link=Logo_stories_Template.bind({});Logo_stories_link.storyName="Link",Logo_stories_link.args={language:"de",href:"https://www.telekom.de/start",logoTitle:"Telekom Logo – Erleben, was verbindet – Zur Startseite"},Logo_stories_link.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleLogo\n  },\n  props: {\n    label: String,\n    ...ScaleLogo.props\n  },\n  template: `\n    <div :style="variant === \'white\' ? \'background: #e20074; padding: 12px;\' : \'\'">\n        <scale-logo\n            :variant="variant"\n            :transparent="transparent"\n            :language="language"\n            :size="size"\n            :href="href"\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :styles="styles"\n            @click-handler="clickHandler"\n        >\n        </scale-logo>\n    </div>\n    `,\n  methods: {\n    clickHandler: action(\'clickHandler\')\n  }\n})'}};var componentMeta={title:"Components/Logo",component:ScaleLogo,argTypes:{variant:{control:{type:"select",options:["magenta","white"]}},language:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_kyr","mk_lat","ro","sk",""]},description:"DEPRECATED - localized brand claim is not shown anymore."}},includeStories:["standard","white","sizing","link"]},mdxStoryNameToKey={Standard:"standard",White:"white",Sizing:"sizing",Link:"link"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/modal/Modal.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Modal_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"standardSmall",(function(){return standardSmall})),__webpack_require__.d(__webpack_exports__,"standardLarge",(function(){return standardLarge})),__webpack_require__.d(__webpack_exports__,"noActions",(function(){return noActions})),__webpack_require__.d(__webpack_exports__,"withNoBody",(function(){return withNoBody})),__webpack_require__.d(__webpack_exports__,"scrollingWithActions",(function(){return scrollingWithActions}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),modal_ScaleModalvue_type_script_lang_js_=(Object(addon_actions_dist_esm.action)("scaleClose"),{props:{heading:{type:String,default:"Today is your lucky day"},size:String,variant:String,opened:Boolean,duration:{type:Number,default:200},closeButtonLabel:String,closeButtonTitle:String,omitCloseButton:{type:Boolean,default:!1},alignActions:{type:String,default:"right"},allowInjectingStyleToBody:Boolean,styles:{type:String}},methods:{scaleOpen:function scaleOpen($event){Object(addon_actions_dist_esm.action)("scaleOpen"),this.$emit("scaleOpen",$event)},"scale-open":function scaleOpen($event){Object(addon_actions_dist_esm.action)("scale-open"),this.$emit("scale-open",$event)},scaleBeforeClose:function scaleBeforeClose($event){Object(addon_actions_dist_esm.action)("scaleBeforeClose"),this.$emit("scaleBeforeClose",$event)},"scale-before-close":function scaleBeforeClose($event){Object(addon_actions_dist_esm.action)("scale-before-close"),this.$emit("scale-before-close",$event)},scaleClose:function scaleClose($event){Object(addon_actions_dist_esm.action)("scaleClose"),this.$emit("scaleClose",$event)},"scale-close":function scaleClose($event){Object(addon_actions_dist_esm.action)("scale-close"),this.$emit("scale-close",$event)}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(modal_ScaleModalvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-modal",{attrs:{heading:_vm.heading,size:_vm.size,variant:_vm.size,opened:_vm.opened,duration:_vm.duration,"close-button-label":_vm.closeButtonLabel,"close-button-title":_vm.closeButtonTitle,"omit-close-button":_vm.omitCloseButton,"align-actions":_vm.alignActions,styles:_vm.styles,"allow-injecting-style-to-body":_vm.allowInjectingStyleToBody},on:{scaleClose:_vm.scaleClose,scaleOpen:_vm.scaleOpen,scaleBeforeClose:_vm.scaleBeforeClose}},[_vm._t("close"),_vm._v(" "),_vm._t("default"),_vm._v(" "),_vm._t("actions")],2)}),[],!1,null,null,null).exports;var ScaleModal=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleModal",description:"",tags:{},props:[{name:"heading",type:{name:"string"},defaultValue:{func:!1,value:"'Today is your lucky day'"}},{name:"size",type:{name:"string"}},{name:"variant",type:{name:"string"}},{name:"opened",type:{name:"boolean"}},{name:"duration",type:{name:"number"},defaultValue:{func:!1,value:"200"}},{name:"closeButtonLabel",type:{name:"string"}},{name:"closeButtonTitle",type:{name:"string"}},{name:"omitCloseButton",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"alignActions",type:{name:"string"},defaultValue:{func:!1,value:"'right'"}},{name:"allowInjectingStyleToBody",type:{name:"boolean"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleOpen",type:{names:["undefined"]}},{name:"scale-open",type:{names:["undefined"]}},{name:"scaleBeforeClose",type:{names:["undefined"]}},{name:"scale-before-close",type:{names:["undefined"]}},{name:"scaleClose",type:{names:["undefined"]}},{name:"scale-close",type:{names:["undefined"]}}],slots:[{name:"close"},{name:"default"},{name:"actions"}]};var Modal_stories_Template=function Template(args,context){return{components:{ScaleModal:ScaleModal},props:Object.assign({showActions:Boolean,shortBody:Boolean,longBody:Boolean},ScaleModal.props),data:function data(){return{isOpen:args.opened}},methods:{scaleClose:function scaleClose(){this.isOpen=!1}},template:'\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  '}},layoutProps={Template:Modal_stories_Template};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Modal",component:ScaleModal,argTypes:{size:{control:{type:"select",options:["small","default","large"]}},alignActions:{control:{type:"select",options:["right","left"]}},opened:{control:{disable:!0}},showActions:{table:{disable:!0}},shortBody:{table:{disable:!0}},longBody:{table:{disable:!0}},scaleBeforeClose:{description:"@deprecated in v3 in favor of kebab-case event names."},"scale-before-close":{description:"It fires on every close attempt. Those events can be one of the event.detail.trigger, such as CLOSE_BUTTON, ESCAPE_KEY or BACKDROP, depending on the action that triggered the event. Calling `event.preventDefault()` will prevent the modal from closing."}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Modal"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{opened:!1,showActions:!0,shortBody:!0},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" id="modal">\n  <p>Hello. Welcome. What a pleasure it is to have you.</p>\n  <scale-button slot="action" variant="secondary" onclick="closeModal()">\n    Cancel\n  </scale-button>\n  <scale-button slot="action"> Primary Action </scale-button>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --spacing-x: var(--telekom-spacing-composition-space-06);\n  --background-overlay: var(\n    --telekom-color-background-backdrop,\n    rgba(108, 108, 108, 0.7)\n  );\n\n  --max-height-window: calc(\n    100vh - (2 * var(--telekom-spacing-composition-space-19))\n  );\n  --min-height-window: ; /* undefined by design */\n  --radius-window: var(--telekom-radius-large);\n  --box-shadow-window: var(--telekom-shadow-top);\n  --background-window: var(--telekom-color-background-surface);\n  --color-window: var(--telekom-color-text-and-icon-standard);\n\n  /*\n    we're rudimentarily creating a grid here\n    in the following modal--size-*,\n    with 6, 8 and 12 columns\n\n    -spacing-56 !== --telekom-spacing-unrelated-sm\n  */\n  --size-window-small: calc(\n    (6 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (5 * var(--telekom-spacing-composition-space-10))\n  );\n  --size-window-default: calc(\n    (8 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (7 * var(--telekom-spacing-composition-space-10))\n  );\n  --size-window-large: calc(\n    (12 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (11 * var(--telekom-spacing-composition-space-10))\n  );\n\n  --spacing-x-header: var(--telekom-spacing-composition-space-08);\n  --spacing-y-header: var(--telekom-spacing-composition-space-08);\n\n  --border-bottom-header-has-scroll: var(--telekom-line-weight-standard) solid\n    var(--telekom-color-ui-subtle);\n\n  --font-family-heading: var(--telekom-typography-font-family-sans);\n  --font-size-heading: var(--telekom-typography-font-size-callout);\n  --font-weight-heading: var(--telekom-typography-font-weight-extra-bold);\n\n  --spacing-close-button: var(--telekom-spacing-composition-space-04);\n  --radius-close-button: var(--telekom-radius-standard);\n  --transition-close-button: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --box-shadow-close-button-focus: 0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);\n  --color-close-button: var(--telekom-color-text-and-icon-standard);\n  --color-close-button-hover: var(--telekom-color-primary-hovered);\n  --color-close-button-active: var(--telekom-color-primary-pressed);\n\n  --spacing-x-body-wrapper: var(--telekom-spacing-composition-space-08);\n  --spacing-y-body: var(--telekom-spacing-composition-space-08);\n\n  --spacing-actions: var(--telekom-spacing-composition-space-06)\n    var(--telekom-spacing-composition-space-08)\n    var(--telekom-spacing-composition-space-08);\n\n  --spacing-x-actions-slotted: var(--telekom-spacing-composition-space-04);\n  --background-actions-has-scroll: var(\n    --telekom-color-background-surface-subtle\n  );  \n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"standard-small"},"Standard Small"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard Small",args:{opened:!1,size:"small",showActions:!0,shortBody:!0},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" size="small" id="modal">\n  <p>Hello. Welcome. What a pleasure it is to have you.</p>\n  <scale-button slot="action" variant="secondary" onclick="closeModal()">\n    Cancel\n  </scale-button>\n  <scale-button slot="action"> Primary Action </scale-button>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"standard-large"},"Standard Large"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard Large",args:{opened:!1,size:"large",showActions:!0,shortBody:!0},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" size="large" id="modal">\n  <p>Hello. Welcome. What a pleasure it is to have you.</p>\n  <scale-button slot="action" variant="secondary" onclick="closeModal()">\n    Cancel\n  </scale-button>\n  <scale-button slot="action"> Primary Action </scale-button>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"with-no-actions"},"With No Actions"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"No Actions",args:{opened:!1,size:"small",showActions:!1,shortBody:!0},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" size="small" id="modal">\n  <p>Hello. Welcome. What a pleasure it is to have you.</p>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"with-no-body"},"With No Body"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With No Body",args:{opened:!1,size:"small",showActions:!0,shortBody:!1},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" size="small" id="modal">\n  <scale-button slot="action" variant="secondary" onclick="closeModal()">\n    Cancel\n  </scale-button>\n  <scale-button slot="action"> Primary Action </scale-button>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"scrolling-with-actions"},"Scrolling With Actions"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Scrolling With Actions",args:{opened:!1,showActions:!0,longBody:!0},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" id="modal">\n  <p>Hello. Welcome. What a pleasure it is to have you.</p>\n  <p>...</p>\n  <p>...</p>\n  <p>...</p>\n  <p>...</p>\n  <scale-button slot="action" variant="secondary" onclick="closeModal()">\n    Cancel\n  </scale-button>\n  <scale-button slot="action"> Primary Action </scale-button>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')))}MDXContent.isMDXComponent=!0;var standard=Modal_stories_Template.bind({});standard.storyName="Standard",standard.args={opened:!1,showActions:!0,shortBody:!0},standard.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var standardSmall=Modal_stories_Template.bind({});standardSmall.storyName="Standard Small",standardSmall.args={opened:!1,size:"small",showActions:!0,shortBody:!0},standardSmall.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var standardLarge=Modal_stories_Template.bind({});standardLarge.storyName="Standard Large",standardLarge.args={opened:!1,size:"large",showActions:!0,shortBody:!0},standardLarge.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var noActions=Modal_stories_Template.bind({});noActions.storyName="No Actions",noActions.args={opened:!1,size:"small",showActions:!1,shortBody:!0},noActions.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var withNoBody=Modal_stories_Template.bind({});withNoBody.storyName="With No Body",withNoBody.args={opened:!1,size:"small",showActions:!0,shortBody:!1},withNoBody.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var scrollingWithActions=Modal_stories_Template.bind({});scrollingWithActions.storyName="Scrolling With Actions",scrollingWithActions.args={opened:!1,showActions:!0,longBody:!0},scrollingWithActions.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var componentMeta={title:"Components/Modal",component:ScaleModal,argTypes:{size:{control:{type:"select",options:["small","default","large"]}},alignActions:{control:{type:"select",options:["right","left"]}},opened:{control:{disable:!0}},showActions:{table:{disable:!0}},shortBody:{table:{disable:!0}},longBody:{table:{disable:!0}},scaleBeforeClose:{description:"@deprecated in v3 in favor of kebab-case event names."},"scale-before-close":{description:"It fires on every close attempt. Those events can be one of the event.detail.trigger, such as CLOSE_BUTTON, ESCAPE_KEY or BACKDROP, depending on the action that triggered the event. Calling `event.preventDefault()` will prevent the modal from closing."}},includeStories:["standard","standardSmall","standardLarge","noActions","withNoBody","scrollingWithActions"]},mdxStoryNameToKey={Standard:"standard","Standard Small":"standardSmall","Standard Large":"standardLarge","No Actions":"noActions","With No Body":"withNoBody","Scrolling With Actions":"scrollingWithActions"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/notification-badge/NotificationBadge.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"IconTemplate",(function(){return NotificationBadge_stories_IconTemplate})),__webpack_require__.d(__webpack_exports__,"TextTemplate",(function(){return NotificationBadge_stories_TextTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"icon",(function(){return icon})),__webpack_require__.d(__webpack_exports__,"text",(function(){return NotificationBadge_stories_text})),__webpack_require__.d(__webpack_exports__,"labelIcon",(function(){return labelIcon})),__webpack_require__.d(__webpack_exports__,"labelText",(function(){return labelText}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),notification_badge_ScaleNotificationBadgevue_type_script_lang_js_={props:{label:{type:String},type:{type:0,default:"icon"}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(notification_badge_ScaleNotificationBadgevue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-notification-badge",{attrs:{label:this.label,type:this.type}},[this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleNotificationBadge=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleNotificationBadge",description:"",tags:{},props:[{name:"label",type:{name:"string"}},{name:"type",type:{name:"'icon' | 'text'"},defaultValue:{func:!1,value:"'icon'"}}],slots:[{name:"default"}]};var addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var NotificationBadge_stories_IconTemplate=function IconTemplate(args,_ref){_ref.argTypes;return{props:Object.assign({label:String},ScaleNotificationBadge.props),template:'\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><scale-icon-user-file-user></scale-icon-user-file-user></scale-notification-badge>\n  ',methods:{action:addon_actions_dist_esm.action}}},NotificationBadge_stories_TextTemplate=function TextTemplate(args,_ref2){_ref2.argTypes;return{props:Object.assign({label:String},ScaleNotificationBadge.props),template:'\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><b>Service</b></scale-notification-badge>\n  ',methods:{action:addon_actions_dist_esm.action}}},layoutProps={IconTemplate:NotificationBadge_stories_IconTemplate,TextTemplate:NotificationBadge_stories_TextTemplate};function MDXContent(_ref3){var components=_ref3.components,props=_objectWithoutProperties(_ref3,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Beta Components/Notification Badge",component:ScaleNotificationBadge,argTypes:{userNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"},iconNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Notification Badge"),Object(esm.b)("img",{src:"assets/beta.png",alt:"Beta Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},NotificationBadge_stories_IconTemplate.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-notification-badge>\n  <scale-icon-user-file-user> </scale-icon-user-file-user>\n</scale-notification-badge>\n")),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  /*after-badge-slot*/\n  --padding-type-text-after-badge-slot: 0 0 0 12px;\n  --padding-type-icon-after-badge-slot: 0 0 0 7px;\n\n  /*notification-badge circle*/\n  --background-color-circle: var(--telekom-color-primary-standard);\n  --color-circle: var(--telekom-color-text-and-icon-inverted-standard);\n  --font-size-circle: var(--telekom-typography-font-size-badge);\n  --font-weight-circle: bold;\n  --border-radius-circle: var(--telekom-radius-circle);\n\n  /*border*/\n  --color-notification-badge-border-focus: var(\n    --telekom-color-functional-focus-standard\n  );\n  --color-notification-badge-border-hover: var(\n    --telekom-color-text-and-icon-primary-hovered\n  );\n  --line-width-notification-badge-border-focus: 2px;\n  --padding-notification-badge-border: 8px 5px 0 5px;\n  --margin-notification-badge-border: -8px -5px 0 -5px;\n}\n")),Object(esm.b)("h2",{id:"badge-without-label"},"Badge without Label"),Object(esm.b)("h3",{id:"icon"},"Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon",args:{type:"icon"},mdxType:"Story"},NotificationBadge_stories_IconTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-badge type="icon">\n  <scale-icon-user-file-user></scale-icon-user-file-user>\n</scale-notification-badge>\n')),Object(esm.b)("h3",{id:"text"},"Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Text",args:{type:"text"},mdxType:"Story"},NotificationBadge_stories_TextTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-badge type="text">\n  <b>Service</b>\n</scale-notification-badge>\n')),Object(esm.b)("h2",{id:"badge-with-label"},"Badge with Label"),Object(esm.b)("h3",{id:"icon-1"},"Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Label icon",args:{type:"icon",label:"1000000"},mdxType:"Story"},NotificationBadge_stories_IconTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-badge label="1000000" type="icon">\n  <scale-icon-user-file-user></scale-icon-user-file-user>\n</scale-notification-badge>\n')),Object(esm.b)("h3",{id:"text-1"},"Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Label text",args:{type:"text",label:"1000"},mdxType:"Story"},NotificationBadge_stories_TextTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-badge label="10000" type="text">\n  <b>Service</b>\n</scale-notification-badge>\n')))}MDXContent.isMDXComponent=!0;var standard=NotificationBadge_stories_IconTemplate.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleNotificationBadge.props\n  },\n  template: `\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><scale-icon-user-file-user></scale-icon-user-file-user></scale-notification-badge>\n  `,\n  methods: {\n    action\n  }\n})'}};var icon=NotificationBadge_stories_IconTemplate.bind({});icon.storyName="Icon",icon.args={type:"icon"},icon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleNotificationBadge.props\n  },\n  template: `\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><scale-icon-user-file-user></scale-icon-user-file-user></scale-notification-badge>\n  `,\n  methods: {\n    action\n  }\n})'}};var NotificationBadge_stories_text=NotificationBadge_stories_TextTemplate.bind({});NotificationBadge_stories_text.storyName="Text",NotificationBadge_stories_text.args={type:"text"},NotificationBadge_stories_text.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleNotificationBadge.props\n  },\n  template: `\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><b>Service</b></scale-notification-badge>\n  `,\n  methods: {\n    action\n  }\n})'}};var labelIcon=NotificationBadge_stories_IconTemplate.bind({});labelIcon.storyName="Label icon",labelIcon.args={type:"icon",label:"1000000"},labelIcon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleNotificationBadge.props\n  },\n  template: `\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><scale-icon-user-file-user></scale-icon-user-file-user></scale-notification-badge>\n  `,\n  methods: {\n    action\n  }\n})'}};var labelText=NotificationBadge_stories_TextTemplate.bind({});labelText.storyName="Label text",labelText.args={type:"text",label:"1000"},labelText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleNotificationBadge.props\n  },\n  template: `\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><b>Service</b></scale-notification-badge>\n  `,\n  methods: {\n    action\n  }\n})'}};var componentMeta={title:"Beta Components/Notification Badge",component:ScaleNotificationBadge,argTypes:{userNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"},iconNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"}},includeStories:["standard","icon","text","labelIcon","labelText"]},mdxStoryNameToKey={Standard:"standard",Icon:"icon",Text:"text","Label icon":"labelIcon","Label text":"labelText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/notification/Notification.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Notification_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return inline})),__webpack_require__.d(__webpack_exports__,"banner",(function(){return banner})),__webpack_require__.d(__webpack_exports__,"toast",(function(){return toast})),__webpack_require__.d(__webpack_exports__,"toastStack",(function(){return Notification_stories_toastStack})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"informational",(function(){return informational})),__webpack_require__.d(__webpack_exports__,"danger",(function(){return danger})),__webpack_require__.d(__webpack_exports__,"warning",(function(){return warning}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),notification_ScaleNotificationvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{heading:{type:String},type:{type:0,default:"inline"},variant:{type:0,default:"informational"},opened:{type:Boolean},dismissible:{type:Boolean},delay:{type:Number},innerAriaLive:{type:String},innerRole:{type:String,default:"alert"},closeButtonLabel:{type:String},closeButtonTitle:{type:String},styles:{type:String},ariaHeading:{type:String}},render:function render(){return this.$slots.default}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(notification_ScaleNotificationvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("text")],2)}),[],!1,null,null,null).exports;var ScaleNotification=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleNotification",description:"",tags:{},props:[{name:"heading",type:{name:"string"}},{name:"type",type:{name:"'inline' | 'banner' | 'toast'"},defaultValue:{func:!1,value:"'inline'"}},{name:"variant",type:{name:"'danger' | 'warning' | 'success' | 'informational'"},defaultValue:{func:!1,value:"'informational'"}},{name:"opened",type:{name:"boolean"}},{name:"dismissible",type:{name:"boolean"}},{name:"delay",type:{name:"number"}},{name:"innerAriaLive",type:{name:"string"}},{name:"innerRole",type:{name:"string"},defaultValue:{func:!1,value:"'alert'"}},{name:"closeButtonLabel",type:{name:"string"}},{name:"closeButtonTitle",type:{name:"string"}},{name:"styles",type:{name:"string"}},{name:"ariaHeading",type:{name:"string"}}],slots:[{name:"text"},{name:"default"}]};var Notification_stories_Template=function Template(args,context){return{props:Object.assign({text:String},ScaleNotification.props),template:'\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  ',methods:{emitOpen:Object(addon_actions_dist_esm.action)("scale-open"),emitBeforeClose:Object(addon_actions_dist_esm.action)("scale-before-close"),emitClose:Object(addon_actions_dist_esm.action)("scale-close")}}},layoutProps={Template:Notification_stories_Template};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Notification",component:ScaleNotification,argTypes:{heading:{control:{type:"text"}},type:{options:["inline","banner","toast"],control:{type:"select"}},variant:{options:["informational","warning","success","danger"],control:{type:"select"}},opened:{defaultValue:!0,control:{type:"boolean"}},dismissible:{defaultValue:!0,control:{type:"boolean"}},delay:{control:{type:"number"}},innerAriaLive:{control:{type:"text"},description:"Deprecated! innerAriaLive has been replaced by innerRole"},headingLevel:{control:{type:"number"}},ariaHeading:{defaultValue:"Information:",control:{type:"text"}},closeButtonLabel:{control:{type:"text"}},closeButtonTitle:{control:{type:"text"}},"scale-open":{description:"Fires after the notification has been opened",table:{category:"Events"}},"scale-before-close":{description:"Fires on every close attempt. Calling `event.preventDefault()` will prevent the modal from closing",table:{category:"Events"}},"scale-close":{description:"Fires after the notification has been closed",table:{category:"Events"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Notification"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{heading:"Info notification with icon, title, copytext and close",text:"Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore."},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Success notification with icon, title, copytext and close"\n  dismissible\n  opened\n>\n  <span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>\n</scale-notification>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 100%;\n  --width-toast: 25rem;\n  --radius: var(--telekom-radius-standard);\n  --spacing-y: var(--telekom-spacing-composition-space-06);\n  --spacing-y-inner: var(--telekom-spacing-composition-space-04);\n  --spacing-x-aside: var(--telekom-spacing-composition-space-14);\n\n  --duration-in: var(--telekom-motion-duration-transition);\n  --duration-out: var(--telekom-motion-duration-transition);\n  --easing-in: var(--telekom-motion-easing-enter);\n  --easing-out: var(--telekom-motion-easing-exit);\n  --translate-x: 0;\n  --translate-y: 0;\n  --translate-z: 0;\n}\n")),Object(esm.b)("h2",{id:"types"},"Types"),Object(esm.b)("h3",{id:"inline-default"},"Inline (default)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Inline",args:{heading:"Info notification with icon, title and close"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Info notification with icon, title and close"\n  opened\n></scale-notification>\n')),Object(esm.b)("h3",{id:"banner"},"Banner"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Banner",args:{heading:"Success notification with icon, title and close",type:"banner",variant:"success",ariaHeading:"Success:"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Success notification with icon, title and close"\n  type="banner"\n  variant="success"\n></scale-notification>\n')),Object(esm.b)("h3",{id:"toast"},"Toast"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Toast",args:{heading:"Warning toast headline",type:"toast",variant:"warning",text:"Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.",ariaHeading:"Warning:"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Warning toast headline"\n  type="toast"\n  variant="warning"\n  dismissible\n  opened\n>\n  <span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>\n</scale-notification>\n')),Object(esm.b)("h4",{id:"toast-stack"},"Toast Stack"),Object(esm.b)("p",null,'In order to "toast" a notification, append it to a div with the ',Object(esm.b)("inlineCode",{parentName:"p"},".scl-toast-stack")," class. Listen to the ",Object(esm.b)("inlineCode",{parentName:"p"},"scale-close")," event if you'd like to remove them from the DOM after being dismissed."),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Toast Stack",mdxType:"Story"},{data:function data(){return{count:1,delay:0,variants:["informational","warning","success","danger"],currentVariant:0}},computed:{variant:function variant(){var s=this.variants[this.currentVariant];return s.charAt(0).toUpperCase()+s.slice(1)}},template:'\n        <div>\n          <div ref="stack" class="scl-toast-stack"></div>\n          <div style="display: flex; gap: var(--telekom-spacing-unit-x12); align-items: center">\n            <scale-button variant="secondary" @click="create">Show</scale-button>\n            <scale-slider\n              @scale-change="$event => this.delay = $event.target.value"\n              label="Delay"\n              min="0"\n              max="10"\n              show-step-marks\n              unit="s"\n              helper-text="0 means no timeout."\n            ></scale-slider>\n          </div>\n        </div>\n      ',methods:{create:function create(){var _this=this,toast=Object.assign(document.createElement("scale-notification"),{heading:this.variant+" toast headline #"+this.count++,type:"toast",variant:this.variants[this.currentVariant],delay:0===this.delay?void 0:1e3*this.delay,dismissible:!0,opened:!1,innerHTML:'<span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>'});toast.addEventListener("scale-open",(function handleOpen(){_this.emitOpen(),toast.removeEventListener("scale-open",handleOpen)})),toast.addEventListener("scale-before-close",(function handleBeforeClose(event){_this.emitBeforeClose(),toast.removeEventListener("scale-before-close",handleBeforeClose)})),toast.addEventListener("scale-close",(function handleClose(){_this.emitClose(),toast.removeEventListener("scale-close",handleClose),toast.remove()})),this.$refs.stack.prepend(toast),toast.opened=!0,this.currentVariant=(this.currentVariant+1)%this.variants.length},emitOpen:Object(addon_actions_dist_esm.action)("scale-open"),emitClose:Object(addon_actions_dist_esm.action)("scale-close"),emitBeforeClose:Object(addon_actions_dist_esm.action)("scale-before-close")}})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div class="scl-toast-stack">\n  <scale-notification\n    heading="Informational toast headline"\n    type="toast"\n    dismissible\n    delay="10000"\n    opened\n  >\n    <span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>\n  </scale-notification>\n</div>\n')),Object(esm.b)("h2",{id:"variants"},"Variants"),Object(esm.b)("h3",{id:"success"},"Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Success",args:{heading:"Success notification with icon and title",variant:"success",dismissible:!1,ariaHeading:"Success:"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Success notification with icon and title"\n  variant="success"\n  opened\n></scale-notification>\n')),Object(esm.b)("h3",{id:"informational-default"},"Informational (default)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Informational",args:{heading:"Informational notification with icon and title",variant:"informational",dismissible:!1},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Informational notification with icon and title"\n  variant="informational"\n  opened\n></scale-notification>\n')),Object(esm.b)("h3",{id:"danger"},"Danger"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Danger",args:{heading:"Danger notification with icon and title",variant:"danger",dismissible:!1,ariaHeading:"Danger:"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Danger notification with icon and title"\n  variant="danger"\n  opened\n></scale-notification>\n')),Object(esm.b)("h3",{id:"warning"},"Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Warning",args:{heading:"Warning notification with icon and title",variant:"warning",dismissible:!1,ariaHeading:"Warning:"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Warning notification with icon and title"\n  variant="warning"\n  opened\n></scale-notification>\n')))}MDXContent.isMDXComponent=!0;var standard=Notification_stories_Template.bind({});standard.storyName="Standard",standard.args={heading:"Info notification with icon, title, copytext and close",text:"Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore."},standard.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var inline=Notification_stories_Template.bind({});inline.storyName="Inline",inline.args={heading:"Info notification with icon, title and close"},inline.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var banner=Notification_stories_Template.bind({});banner.storyName="Banner",banner.args={heading:"Success notification with icon, title and close",type:"banner",variant:"success",ariaHeading:"Success:"},banner.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var toast=Notification_stories_Template.bind({});toast.storyName="Toast",toast.args={heading:"Warning toast headline",type:"toast",variant:"warning",text:"Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.",ariaHeading:"Warning:"},toast.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var Notification_stories_toastStack=function toastStack(){return{data:function data(){return{count:1,delay:0,variants:["informational","warning","success","danger"],currentVariant:0}},computed:{variant:function variant(){var s=this.variants[this.currentVariant];return s.charAt(0).toUpperCase()+s.slice(1)}},template:'\n        <div>\n          <div ref="stack" class="scl-toast-stack"></div>\n          <div style="display: flex; gap: var(--telekom-spacing-unit-x12); align-items: center">\n            <scale-button variant="secondary" @click="create">Show</scale-button>\n            <scale-slider\n              @scale-change="$event => this.delay = $event.target.value"\n              label="Delay"\n              min="0"\n              max="10"\n              show-step-marks\n              unit="s"\n              helper-text="0 means no timeout."\n            ></scale-slider>\n          </div>\n        </div>\n      ',methods:{create:function create(){var _this2=this,toast=Object.assign(document.createElement("scale-notification"),{heading:this.variant+" toast headline #"+this.count++,type:"toast",variant:this.variants[this.currentVariant],delay:0===this.delay?void 0:1e3*this.delay,dismissible:!0,opened:!1,innerHTML:'<span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>'});toast.addEventListener("scale-open",(function handleOpen(){_this2.emitOpen(),toast.removeEventListener("scale-open",handleOpen)})),toast.addEventListener("scale-before-close",(function handleBeforeClose(event){_this2.emitBeforeClose(),toast.removeEventListener("scale-before-close",handleBeforeClose)})),toast.addEventListener("scale-close",(function handleClose(){_this2.emitClose(),toast.removeEventListener("scale-close",handleClose),toast.remove()})),this.$refs.stack.prepend(toast),toast.opened=!0,this.currentVariant=(this.currentVariant+1)%this.variants.length},emitOpen:Object(addon_actions_dist_esm.action)("scale-open"),emitClose:Object(addon_actions_dist_esm.action)("scale-close"),emitBeforeClose:Object(addon_actions_dist_esm.action)("scale-before-close")}}};Notification_stories_toastStack.storyName="Toast Stack",Notification_stories_toastStack.parameters={storySource:{source:"{\n  data() {\n    return {\n      count: 1,\n      delay: 0,\n      variants: ['informational', 'warning', 'success', 'danger'],\n      currentVariant: 0\n    };\n  },\n\n  computed: {\n    variant() {\n      const s = this.variants[this.currentVariant];\n      return s.charAt(0).toUpperCase() + s.slice(1);\n    }\n\n  },\n  template: `\n        <div>\n          <div ref=\"stack\" class=\"scl-toast-stack\"></div>\n          <div style=\"display: flex; gap: var(--telekom-spacing-unit-x12); align-items: center\">\n            <scale-button variant=\"secondary\" @click=\"create\">Show</scale-button>\n            <scale-slider\n              @scale-change=\"$event => this.delay = $event.target.value\"\n              label=\"Delay\"\n              min=\"0\"\n              max=\"10\"\n              show-step-marks\n              unit=\"s\"\n              helper-text=\"0 means no timeout.\"\n            ></scale-slider>\n          </div>\n        </div>\n      `,\n  methods: {\n    create() {\n      const toast = Object.assign(document.createElement('scale-notification'), {\n        heading: `${this.variant} toast headline #${this.count++}`,\n        type: 'toast',\n        variant: this.variants[this.currentVariant],\n        delay: this.delay === 0 ? undefined : this.delay * 1000,\n        dismissible: true,\n        opened: false,\n        innerHTML: '<span slot=\"text\">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>'\n      });\n\n      const handleOpen = () => {\n        this.emitOpen();\n        toast.removeEventListener('scale-open', handleOpen);\n      };\n\n      const handleBeforeClose = event => {\n        this.emitBeforeClose();\n        toast.removeEventListener('scale-before-close', handleBeforeClose);\n      };\n\n      const handleClose = () => {\n        this.emitClose();\n        toast.removeEventListener('scale-close', handleClose);\n        toast.remove();\n      };\n\n      toast.addEventListener('scale-open', handleOpen);\n      toast.addEventListener('scale-before-close', handleBeforeClose);\n      toast.addEventListener('scale-close', handleClose);\n      this.$refs.stack.prepend(toast);\n      toast.opened = true;\n      this.currentVariant = (this.currentVariant + 1) % this.variants.length;\n    },\n\n    emitOpen: action('scale-open'),\n    emitClose: action('scale-close'),\n    emitBeforeClose: action('scale-before-close')\n  }\n}"}};var success=Notification_stories_Template.bind({});success.storyName="Success",success.args={heading:"Success notification with icon and title",variant:"success",dismissible:!1,ariaHeading:"Success:"},success.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var informational=Notification_stories_Template.bind({});informational.storyName="Informational",informational.args={heading:"Informational notification with icon and title",variant:"informational",dismissible:!1},informational.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var danger=Notification_stories_Template.bind({});danger.storyName="Danger",danger.args={heading:"Danger notification with icon and title",variant:"danger",dismissible:!1,ariaHeading:"Danger:"},danger.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var warning=Notification_stories_Template.bind({});warning.storyName="Warning",warning.args={heading:"Warning notification with icon and title",variant:"warning",dismissible:!1,ariaHeading:"Warning:"},warning.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var componentMeta={title:"Components/Notification",component:ScaleNotification,argTypes:{heading:{control:{type:"text"}},type:{options:["inline","banner","toast"],control:{type:"select"}},variant:{options:["informational","warning","success","danger"],control:{type:"select"}},opened:{defaultValue:!0,control:{type:"boolean"}},dismissible:{defaultValue:!0,control:{type:"boolean"}},delay:{control:{type:"number"}},innerAriaLive:{control:{type:"text"},description:"Deprecated! innerAriaLive has been replaced by innerRole"},headingLevel:{control:{type:"number"}},ariaHeading:{defaultValue:"Information:",control:{type:"text"}},closeButtonLabel:{control:{type:"text"}},closeButtonTitle:{control:{type:"text"}},"scale-open":{description:"Fires after the notification has been opened",table:{category:"Events"}},"scale-before-close":{description:"Fires on every close attempt. Calling `event.preventDefault()` will prevent the modal from closing",table:{category:"Events"}},"scale-close":{description:"Fires after the notification has been closed",table:{category:"Events"}}},includeStories:["standard","inline","banner","toast","toastStack","success","informational","danger","warning"]},mdxStoryNameToKey={Standard:"standard",Inline:"inline",Banner:"banner",Toast:"toast","Toast Stack":"toastStack",Success:"success",Informational:"informational",Danger:"danger",Warning:"warning"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/pagination/Pagination.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Pagination_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateEmbedded",(function(){return Pagination_stories_TemplateEmbedded})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"hiddenBorders",(function(){return hiddenBorders})),__webpack_require__.d(__webpack_exports__,"translatedAriaLabels",(function(){return translatedAriaLabels}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),pagination_ScalePaginationvue_type_script_lang_js_={props:{hideBorders:{type:Boolean,default:!1},hideBorder:{type:Boolean,default:!1},pageSize:{type:Number,default:10},startElement:{type:Number,default:0},totalElements:{type:Number,default:1},styles:{type:String},small:{type:Boolean,default:!1},size:{type:String,default:"large"},ariaLabelFirstPage:{type:String,default:"Go to first page"},ariaLabelLastPage:{type:String,default:"Go to last page"},ariaLabelPreviousPage:{type:String,default:"Go to previous page"},ariaLabelNextPage:{type:String,default:"Go to next page"}},methods:{scalePagination:function scalePagination($event){Object(addon_actions_dist_esm.action)("scalePagination"),this.$emit("scalePagination",$event)},"scale-pagination":function scalePagination($event){Object(addon_actions_dist_esm.action)("scale-pagination"),this.$emit("scale-pagination",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(pagination_ScalePaginationvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-pagination",{attrs:{"hide-borders":_vm.hideBorders,"hide-border":_vm.hideBorder,"page-size":_vm.pageSize,small:_vm.small,size:_vm.size,"start-element":_vm.startElement,"total-elements":_vm.totalElements,"aria-label-first-page":_vm.ariaLabelFirstPage,"aria-label-last-page":_vm.ariaLabelLastPage,"aria-label-previous-page":_vm.ariaLabelPreviousPage,"aria-label-next-page":_vm.ariaLabelNextPage,styles:_vm.styles},on:{scalePagination:_vm.scalePagination}})}),[],!1,null,null,null).exports;var ScalePagination=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScalePagination",description:"",tags:{},props:[{name:"hideBorders",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"hideBorder",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"pageSize",type:{name:"number"},defaultValue:{func:!1,value:"10"}},{name:"startElement",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"totalElements",type:{name:"number"},defaultValue:{func:!1,value:"1"}},{name:"styles",type:{name:"string"}},{name:"small",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'large'"}},{name:"ariaLabelFirstPage",type:{name:"string"},defaultValue:{func:!1,value:"'Go to first page'"}},{name:"ariaLabelLastPage",type:{name:"string"},defaultValue:{func:!1,value:"'Go to last page'"}},{name:"ariaLabelPreviousPage",type:{name:"string"},defaultValue:{func:!1,value:"'Go to previous page'"}},{name:"ariaLabelNextPage",type:{name:"string"},defaultValue:{func:!1,value:"'Go to next page'"}}],events:[{name:"scalePagination",type:{names:["undefined"]}},{name:"scale-pagination",type:{names:["undefined"]}}]};var Pagination_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScalePagination:ScalePagination},props:Object.assign({},ScalePagination.props),template:'\n    <scale-pagination\n    :hide-borders="hideBorders"\n    :hide-border="hideBorder"\n    :page-size="pageSize"\n    :start-element="startElement"\n    :total-elements="totalElements"\n    :aria-label-first-page="ariaLabelFirstPage"\n    :aria-label-last-page="ariaLabelLastPage"\n    :aria-label-previous-page="ariaLabelPreviousPage"\n    :aria-label-next-page="ariaLabelNextPage"\n    :styles="styles"\n  >\n  </scale-pagination>\n        '}},Pagination_stories_TemplateEmbedded=function TemplateEmbedded(args,_ref2){_ref2.argTypes;return{components:{ScalePagination:ScalePagination},props:Object.assign({},ScalePagination.props),template:'\n  <div style="border: 1px solid #000; display: flex; align-items: center;  overflow: auto;">\n    <scale-pagination\n        :hide-borders="hideBorders"\n        :hide-border="hideBorder"\n        :page-size="pageSize"\n        :start-element="startElement"\n        :total-elements="totalElements"\n        :styles="styles"\n    >\n    </scale-pagination>\n  </div>'}},layoutProps={Template:Pagination_stories_Template,TemplateEmbedded:Pagination_stories_TemplateEmbedded};function MDXContent(_ref3){var components=_ref3.components,props=_objectWithoutProperties(_ref3,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Pagination",component:ScalePagination,argTypes:{hideBorders:{table:{type:{summary:"Boolean"},defaultValue:{summary:!1}},description:"(optional) Deprecated; hideBorder should replace hideBorders",control:{type:"boolean"}},hideBorder:{table:{type:{summary:"Boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide top and bottom borders",control:{type:"boolean"}},pageSize:{table:{type:{summary:"number"},defaultValue:{summary:10}},description:"(optional) Set number of rows/elements to show per page",control:{type:null}},startElement:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Index of first element to display",control:{type:null}},totalElements:{table:{type:{summary:"number"},defaultValue:{summary:1}},description:"(optional) Total number of rows/elements used to calculate page displays",control:{type:null}},styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},small:{table:{type:{summary:"boolean"}},description:"(optional) DEPRECATED - css overwrite should replace small",control:{type:null}},size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED -  css overwrite should replace size",control:{type:null}},ariaLabelFirstPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to first page'",control:{type:null}},ariaLabelNextPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to next page'",control:{type:null}},ariaLabelPreviousPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to previous page'",control:{type:null}},ariaLabelLastPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to last page'",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Pagination"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{pageSize:10,startElement:100,totalElements:200},mdxType:"Story"},Pagination_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-pagination\n  page-size="10"\n  start-element="100"\n  total-elements="200"\n></scale-pagination>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --color: var(--telekom-color-text-and-icon-standard);\n  --radius: var(--telekom-radius-standard);\n  --font-size: var(--telekom-typography-font-size-small);\n  --border: 1px solid var(--telekom-color-ui-faint);\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --color-button: var(--telekom-color-ui-subtle);\n  --border-button: var(--border);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --radius-first-prompt: var(--radius) 0 0 var(--radius);\n  --radius-last-prompt: 0 var(--radius) var(--radius) 0;\n  --radius-first-prompt-stack: 0 0 0 var(--radius);\n  --radius-last-prompt-stack: 0 0 var(--radius) 0;\n  --stroke-svg: var(--telekom-color-ui-extra-strong);\n  --stroke-svg-high-contrast: #fff;\n  --width-button: 44px;\n  --padding-info: var(--telekom-spacing-composition-space-04);\n  --height-button: 44px;\n  --line-height-info: calc(var(--height-button) - 2px);\n}\n")),Object(esm.b)("h2",{id:"hidden-borders"},"Hidden Borders"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Hidden Borders",args:{pageSize:5,startElement:100,totalElements:200,hideBorder:!0},mdxType:"Story"},Pagination_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-pagination\n  page-size="5"\n  start-element="100"\n  total-elements="200"\n  hide-border\n></scale-pagination>\n')),Object(esm.b)("h2",{id:"translated-aria-labels"},"Translated Aria Labels"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Translated Aria Labels",args:{pageSize:10,startElement:100,totalElements:200,ariaLabelFirstPage:"Zur ersten Seite",ariaLabelLastPage:"Zur letzten Seite",ariaLabelPreviousPage:"Zur vorigen Seite",ariaLabelNextPage:"Zur nächsten Seite"},mdxType:"Story"},Pagination_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-pagination\n  page-size="10"\n  start-element="100"\n  total-elements="200"\n  aria-label-first-page="Zur ersten Seite"\n  aria-label-last-page="Zur nächsten Seite"\n  aria-label-previous-page="Zur vorigen Seite"\n  aria-label-next-page="Zur letzten Seite"\n></scale-pagination>\n')))}MDXContent.isMDXComponent=!0;var standard=Pagination_stories_Template.bind({});standard.storyName="Standard",standard.args={pageSize:10,startElement:100,totalElements:200},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScalePagination\n  },\n  props: { ...ScalePagination.props\n  },\n  template: `\n    <scale-pagination\n    :hide-borders="hideBorders"\n    :hide-border="hideBorder"\n    :page-size="pageSize"\n    :start-element="startElement"\n    :total-elements="totalElements"\n    :aria-label-first-page="ariaLabelFirstPage"\n    :aria-label-last-page="ariaLabelLastPage"\n    :aria-label-previous-page="ariaLabelPreviousPage"\n    :aria-label-next-page="ariaLabelNextPage"\n    :styles="styles"\n  >\n  </scale-pagination>\n        `\n})'}};var hiddenBorders=Pagination_stories_Template.bind({});hiddenBorders.storyName="Hidden Borders",hiddenBorders.args={pageSize:5,startElement:100,totalElements:200,hideBorder:!0},hiddenBorders.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScalePagination\n  },\n  props: { ...ScalePagination.props\n  },\n  template: `\n    <scale-pagination\n    :hide-borders="hideBorders"\n    :hide-border="hideBorder"\n    :page-size="pageSize"\n    :start-element="startElement"\n    :total-elements="totalElements"\n    :aria-label-first-page="ariaLabelFirstPage"\n    :aria-label-last-page="ariaLabelLastPage"\n    :aria-label-previous-page="ariaLabelPreviousPage"\n    :aria-label-next-page="ariaLabelNextPage"\n    :styles="styles"\n  >\n  </scale-pagination>\n        `\n})'}};var translatedAriaLabels=Pagination_stories_Template.bind({});translatedAriaLabels.storyName="Translated Aria Labels",translatedAriaLabels.args={pageSize:10,startElement:100,totalElements:200,ariaLabelFirstPage:"Zur ersten Seite",ariaLabelLastPage:"Zur letzten Seite",ariaLabelPreviousPage:"Zur vorigen Seite",ariaLabelNextPage:"Zur nächsten Seite"},translatedAriaLabels.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScalePagination\n  },\n  props: { ...ScalePagination.props\n  },\n  template: `\n    <scale-pagination\n    :hide-borders="hideBorders"\n    :hide-border="hideBorder"\n    :page-size="pageSize"\n    :start-element="startElement"\n    :total-elements="totalElements"\n    :aria-label-first-page="ariaLabelFirstPage"\n    :aria-label-last-page="ariaLabelLastPage"\n    :aria-label-previous-page="ariaLabelPreviousPage"\n    :aria-label-next-page="ariaLabelNextPage"\n    :styles="styles"\n  >\n  </scale-pagination>\n        `\n})'}};var componentMeta={title:"Components/Pagination",component:ScalePagination,argTypes:{hideBorders:{table:{type:{summary:"Boolean"},defaultValue:{summary:!1}},description:"(optional) Deprecated; hideBorder should replace hideBorders",control:{type:"boolean"}},hideBorder:{table:{type:{summary:"Boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide top and bottom borders",control:{type:"boolean"}},pageSize:{table:{type:{summary:"number"},defaultValue:{summary:10}},description:"(optional) Set number of rows/elements to show per page",control:{type:null}},startElement:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Index of first element to display",control:{type:null}},totalElements:{table:{type:{summary:"number"},defaultValue:{summary:1}},description:"(optional) Total number of rows/elements used to calculate page displays",control:{type:null}},styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},small:{table:{type:{summary:"boolean"}},description:"(optional) DEPRECATED - css overwrite should replace small",control:{type:null}},size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED -  css overwrite should replace size",control:{type:null}},ariaLabelFirstPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to first page'",control:{type:null}},ariaLabelNextPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to next page'",control:{type:null}},ariaLabelPreviousPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to previous page'",control:{type:null}},ariaLabelLastPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to last page'",control:{type:null}}},includeStories:["standard","hiddenBorders","translatedAriaLabels"]},mdxStoryNameToKey={Standard:"standard","Hidden Borders":"hiddenBorders","Translated Aria Labels":"translatedAriaLabels"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/progress-bar/ProgressBar.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return ProgressBar_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateInteractive",(function(){return ProgressBar_stories_TemplateInteractive})),__webpack_require__.d(__webpack_exports__,"TemplateCustomColor",(function(){return ProgressBar_stories_TemplateCustomColor})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"description",(function(){return description})),__webpack_require__.d(__webpack_exports__,"completed",(function(){return completed})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"interactive",(function(){return interactive}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),progress_bar_ScaleProgressBarvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{customColor:String,disabled:{type:Boolean,default:!1},label:String,hasError:Boolean,statusDescription:String,styles:String,showStatus:Boolean,percentage:Number,percentageStart:{type:Number,default:0}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(progress_bar_ScaleProgressBarvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-progress-bar",{attrs:{"custom-color":_vm.customColor,disabled:_vm.disabled,label:_vm.label,"has-error":_vm.hasError,"status-description":_vm.statusDescription,"show-status":_vm.showStatus,percentage:_vm.percentage,percentageStart:_vm.percentageStart,styles:_vm.styles}})}),[],!1,null,null,null).exports;var ScaleProgressBar=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleProgressBar",description:"",tags:{},props:[{name:"customColor",type:{name:"string"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"label",type:{name:"string"}},{name:"hasError",type:{name:"boolean"}},{name:"statusDescription",type:{name:"string"}},{name:"styles",type:{name:"string"}},{name:"showStatus",type:{name:"boolean"}},{name:"percentage",type:{name:"number"}},{name:"percentageStart",type:{name:"number"},defaultValue:{func:!1,value:"0"}}]};var ProgressBar_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleProgressBar:ScaleProgressBar},props:Object.assign({},ScaleProgressBar.props),template:'\n      <scale-progress-bar\n        :custom-color="customColor"\n        :disabled="disabled"\n        :label="label"\n        :has-error="hasError"\n        :status-description="statusDescription"\n        :show-status="showStatus"\n        :percentageStart="percentageStart"\n        :percentage="percentage"\n        :styles="styles"\n      >\n      </scale-progress-bar>\n  '}},ProgressBar_stories_TemplateInteractive=function TemplateInteractive(args,_ref2){_ref2.argTypes;return{components:{ScaleProgressBar:ScaleProgressBar},template:'\n      <div>\n          <scale-progress-bar\n            label="Download progress example"\n            :custom-color="$data[$data.state].customColor"\n            :has-error="$data[$data.state].hasError"\n            :status-description="$data[$data.state].statusDescription"\n            :show-status="$data[$data.state].showStatus"\n            :percentage="$data.percentage"\n          >\n          </scale-progress-bar>\n          <br/>\n          <scale-button variant="secondary" size="small" @click="startSuccess">Start Success</scale-button>\n          <scale-button variant="secondary" size="small" @click="startFailure">Start Failure</scale-button>\n          <scale-button variant="secondary" size="small" @click="reset">Reset</scale-button>\n      </div>\n  ',methods:{startSuccess:function startSuccess(){this.reset(),this.start("success")},startFailure:function startFailure(){this.reset(),this.start("failure")},start:function start(outcome){var _this=this,max="success"===outcome?100:42;this.interval=setInterval((function(){if(_this.$data.percentage===max)return clearInterval(_this.interval),_this.$data.state=outcome,void(_this.interval=null);_this.$data.percentage+=1}),40)},reset:function reset(){clearInterval(this.interval),this.interval=null,this.$data.state="initial",this.$data.percentage=0}},data:function data(){return{interval:null,success:{statusDescription:"Upload complete"},failure:{hasError:!0,statusDescription:"Upload failed"},initial:{showStatus:!0},percentage:0,state:"initial",busy:!1}}}},ProgressBar_stories_TemplateCustomColor=function TemplateCustomColor(args,_ref3){_ref3.argTypes;return{components:{ScaleProgressBar:ScaleProgressBar},props:Object.assign({},ScaleProgressBar.props),template:'\n      <scale-progress-bar style="--color-success: purple"\n        :disabled="disabled"\n        :label="label"\n        :has-error="hasError"\n        :status-description="statusDescription"\n        :show-status="showStatus"\n        :percentage="percentage"\n        :styles="styles"\n      >\n      </scale-progress-bar>\n  '}},layoutProps={Template:ProgressBar_stories_Template,TemplateCustomColor:ProgressBar_stories_TemplateCustomColor};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Progress Bar",component:ScaleProgressBar,parameters:{controls:{sort:"alpha"}},argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Progress Bar"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{percentage:20,label:"Standard"},mdxType:"Story"},ProgressBar_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --track-color: var(--telekom-color-ui-faint);\n  --bar-color: var(--telekom-color-primary-standard);\n\n  --icon-color-error: var(--telekom-color-text-and-icon-functional-danger);\n  --track-color-error: var(--telekom-color-functional-danger-subtle);\n  --bar-color-error: var(--telekom-color-functional-danger-standard);\n\n  --icon-color-success: var(--telekom-color-text-and-icon-functional-success);\n  --track-color-success: var(--telekom-color-functional-success-subtle);\n  --bar-color-success: var(--telekom-color-functional-success-standard);\n\n  --bar-color-disabled: var(--telekom-color-ui-disabled);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n\n  --progress-bar-outer-size: 6px;\n  --progress-bar-inner-size: var(--telekom-spacing-composition-space-03);\n  --font-label: var(--telekom-text-style-ui);\n  --color-label: var(--telekom-color-text-and-icon-standard);\n\n  --color-status-description: var(--telekom-color-text-and-icon-additional);\n  --font-status-description: var(--telekom-text-style-small-bold);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"description"},"Description"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Description",args:{percentage:40,label:"Description",statusDescription:"Progress status description text",showStatus:!0},mdxType:"Story"},ProgressBar_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-progress-bar\n  percentage="40"\n  label="Description"\n  status-description="Progress status description text"\n  show-status="true"\n></scale-progress-bar>\n')),Object(esm.b)("h2",{id:"completed"},"Completed"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Completed",args:{percentage:100,showStatus:!1,statusDescription:"Upload complete",label:"Completed"},mdxType:"Story"},ProgressBar_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-progress-bar\n  percentage="100"\n  label="Completed"\n  status-description="Upload complete"\n  show-status="true"\n>\n</scale-progress-bar>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{percentage:40,hasError:!0,showStatus:!0,statusDescription:"Upload failed",label:"Error"},mdxType:"Story"},ProgressBar_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-progress-bar\n  percentage="40"\n  label="Error"\n  status-description="Upload failed"\n  show-status="true"\n  has-error\n>\n</scale-progress-bar>\n')),Object(esm.b)("h2",{id:"interactive"},"Interactive"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Interactive",args:{percentage:0,label:"Interactive"},mdxType:"Story"},ProgressBar_stories_TemplateInteractive.bind({}))))}MDXContent.isMDXComponent=!0;var standard=ProgressBar_stories_Template.bind({});standard.storyName="Standard",standard.args={percentage:20,label:"Standard"},standard.parameters={storySource:{source:"Template.bind({})"}};var description=ProgressBar_stories_Template.bind({});description.storyName="Description",description.args={percentage:40,label:"Description",statusDescription:"Progress status description text",showStatus:!0},description.parameters={storySource:{source:"Template.bind({})"}};var completed=ProgressBar_stories_Template.bind({});completed.storyName="Completed",completed.args={percentage:100,showStatus:!1,statusDescription:"Upload complete",label:"Completed"},completed.parameters={storySource:{source:"Template.bind({})"}};var error=ProgressBar_stories_Template.bind({});error.storyName="Error",error.args={percentage:40,hasError:!0,showStatus:!0,statusDescription:"Upload failed",label:"Error"},error.parameters={storySource:{source:"Template.bind({})"}};var interactive=ProgressBar_stories_TemplateInteractive.bind({});interactive.storyName="Interactive",interactive.args={percentage:0,label:"Interactive"},interactive.parameters={storySource:{source:"TemplateInteractive.bind({})"}};var componentMeta={title:"Components/Progress Bar",parameters:{controls:{sort:"alpha"}},component:ScaleProgressBar,argTypes:{},includeStories:["standard","description","completed","error","interactive"]},mdxStoryNameToKey={Standard:"standard",Description:"description",Completed:"completed",Error:"error",Interactive:"interactive"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/radio-button-group/RadioButtonGroup.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return RadioButtonGroup_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),radio_button_group_ScaleRadioButtonGroupvue_type_script_lang_js_={name:"Radio Button Group",props:{helperText:{type:String},label:{type:String},invalid:{type:Boolean}},render:function render(){return this.$slots.default}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(radio_button_group_ScaleRadioButtonGroupvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleRadioButtonGroup=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={displayName:"Radio Button Group",exportName:"default",description:"",tags:{},props:[{name:"helperText",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}}],slots:[{name:"default"}]};var radio_button_group_ScaleRadioButtonvue_type_script_lang_js_={name:"Radio Button",props:{invalid:{type:Boolean},name:{type:String},label:{type:String},helperText:{type:String},disabled:{type:Boolean},checked:{type:Boolean},value:{type:String},inputId:{type:String},styles:{type:String}},methods:{fireEvents:function fireEvents(){this.$emit("scale-change")}},render:function render(){return this.$slots.default}};const ScaleRadioButton_vuedocgen_export_0=Object(componentNormalizer.a)(radio_button_group_ScaleRadioButtonvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleRadioButton=ScaleRadioButton_vuedocgen_export_0;ScaleRadioButton_vuedocgen_export_0.__docgenInfo={displayName:"Radio Button",exportName:"default",description:"",tags:{},props:[{name:"invalid",type:{name:"boolean"}},{name:"name",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"checked",type:{name:"boolean"}},{name:"value",type:{name:"string"}},{name:"inputId",type:{name:"string"}},{name:"styles",type:{name:"string"}}],events:[{name:"scale-change"}],slots:[{name:"default"}]};var addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var RadioButtonGroup_stories_Template=function Template(args,context){return{props:Object.assign({groupName:{default:"example"},itemProps:{default:{}}},ScaleRadioButtonGroup.props),data:function data(){return{items:Array.from({length:3},(function(_,i){return{id:"choice-"+i,label:"Radio Label",value:i}}))}},methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")},template:'\n    <scale-radio-button-group\n      :label="label"\n      :invalid="invalid"\n      :helper-text="helperText"\n      @scale-change="emitChange"\n    >\n      <scale-radio-button\n        v-for="(item, index) in items"\n        :key="item.id"\n        :input-id="item.id"\n        :name="groupName"\n        :value="item.value"\n        :label="item.label"\n        :checked="itemProps[index]?.checked"\n        :invalid="itemProps[index]?.invalid"\n        :helper-text="itemProps[index]?.helperText"\n        :disabled="itemProps[index]?.disabled"\n      ></scale-radio-button>\n    </scale-radio-button-group>\n  '}},layoutProps={Template:RadioButtonGroup_stories_Template};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Radio Button Group",component:ScaleRadioButtonGroup,subcomponents:{"Radio Button":ScaleRadioButton},argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Radio Button Group"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",parameters:{controls:{exclude:["groupName"]}},args:{label:"Group Label",groupName:"standard"},mdxType:"Story"},RadioButtonGroup_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  /*label*/\n  --font-weight-label: var(--telekom-typography-font-weight-medium);\n  --font-size-label: var(--telekom-typography-font-size-body);\n\n  /*helper-text*/\n  --font-size-helper-text: var(--telekom-typography-font-size-small);\n  --color-helper-text: var(\n    --telekom-color-text-and-icon-functional-informational\n  );\n  --padding-bottom-helper-text: var(--telekom-spacing-composition-space-04);\n  --margin-top-helper-text: var(--telekom-spacing-composition-space-03);\n  --font-size-helper-text: var(--telekom-typography-font-size-small);\n  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);\n\n  /*helper-text--status-error*/\n  --font-size-error-helper-text: var(--telekom-typography-font-size-small);\n  --color-error-helper-text: var(\n    --telekom-color-text-and-icon-functional-danger\n  );\n  --padding-bottom-error-helper-text: var(\n    --telekom-spacing-composition-space-04\n  );\n  --margin-top-error-helper-text: var(--telekom-spacing-composition-space-03);\n  --font-weight-error-helper-text: var(--telekom-typography-font-weight-medium);\n  --color-error-helper-text-hcm: var(\n    --telekom-color-text-and-icon-white-standard\n  );\n  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);\n\n  /*title*/\n  --font-size-title: var(--font-size-label);\n  --font-weight-title: var(--telekom-typography-font-weight-medium);\n  --padding-bottom-title: var(--telekom-spacing-composition-space-03);\n  --margin-left-title: var(--telekom-spacing-composition-space-02);\n\n  /*slotted items*/\n  --margin-top-slotted-item: var(--telekom-spacing-composition-space-05);\n}\n\nscale-radio-button {\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-disabled: var(--telekom-color-ui-disabled);\n  --color-error: var(--telekom-color-text-and-icon-functional-danger);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --color-primary: var(--telekom-color-text-and-icon-primary-standard);\n  --color-primary-hover: var(--telekom-color-text-and-icon-standard);\n  --color-primary-active: var(--telekom-color-text-and-icon-standard);\n  --color-focus: var(--telekom-color-functional-focus-standard);\n  --color-text: var(--telekom-color-text-and-icon-standard);\n\n  /*helper-text*/\n  --transition-helper-text: var(--transition);\n  --font-size-helper-text: var(--telekom-typography-font-size-small);\n  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);\n  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);\n  --color-helper-text: var(\n    --telekom-color-text-and-icon-functional-informational\n  );\n  --spacing-left-helper-text: calc(\n    var(--width-control) + var(--telekom-spacing-composition-space-04)\n  );\n  --spacing-top-helper-text: var(--telekom-spacing-composition-space-03);\n  --color-helper-text-error: var(\n    --telekom-color-text-and-icon-functional-danger\n  );\n  /*label*/\n  --transition-label: var(--transition);\n  --font-weight-label: var(--telekom-typography-font-weight-medium);\n  --color-label: var(--color-text);\n  --spacing-label: var(--telekom-spacing-composition-space-04);\n\n  /*control*/\n  --width-control: var(--telekom-spacing-composition-space-07);\n  --height-control: var(--telekom-spacing-composition-space-07);\n  --transition-control: var(--transition);\n  --background-color-control: var(--telekom-color-ui-base);\n  --border-control: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);\n  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);\n  --border-control-checked: calc(\n      0.25 * var(--telekom-spacing-composition-space-05)\n    )\n    solid var(--telekom-color-background-canvas);\n  --border-control-checked-disabled: calc(\n      0.5 * var(--telekom-spacing-composition-space-05)\n    )\n    solid var(--telekom-color-ui-border-disabled);\n  --background-control-checked-disabled: none;\n  --border-control-active: var(--telekom-spacing-composition-space-04) solid\n    var(--telekom-color-primary-pressed);\n  --border-control-disabled: 0 0 0 var(--telekom-spacing-composition-space-01)\n    var(--telekom-color-ui-border-disabled);\n  --border-control-error: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-standard);\n  --box-shadow-control-focus: 0 0 0 var(--telekom-spacing-composition-space-03)\n    var(--color-focus);\n}\n")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-radio-button-group label="Group Label">\n  <scale-radio-button\n    label="Radio Label"\n    name="standard"\n    input-id="choice-0"\n    value="0"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="standard"\n    input-id="choice-1"\n    value="1"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="standard"\n    input-id="choice-2"\n    value="2"\n  ></scale-radio-button>\n</scale-radio-button-group>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{label:"Group Label",groupName:"helper-text",helperText:"Make sure to fill this"},mdxType:"Story"},RadioButtonGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-radio-button-group label="Group Label" helper-text="Make sure to fill this">\n  <scale-radio-button\n    label="Radio Label"\n    name="helper-text"\n    input-id="choice-0"\n    value="0"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="helper-text"\n    input-id="choice-1"\n    value="1"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="helper-text"\n    input-id="choice-2"\n    value="2"\n  ></scale-radio-button>\n</scale-radio-button-group>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{label:"Group Label",groupName:"error",invalid:!0,helperText:"Something is wrong",itemProps:{0:{invalid:!0,checked:!0,helperText:"Error message"}}},mdxType:"Story"},RadioButtonGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-radio-button-group label="Group Label" invalid helper-text="Something is wrong">\n  <scale-radio-button\n    label="Radio Label"\n    name="error"\n    input-id="choice-0"\n    value="0"\n    invalid\n    checked\n    helper-text="Error message"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="error"\n    input-id="choice-1"\n    value="1"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="error"\n    input-id="choice-2"\n    value="2"\n  ></scale-radio-button>\n</scale-radio-button-group>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Group Label",groupName:"disabled",itemProps:{0:{disabled:!0}}},mdxType:"Story"},RadioButtonGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-radio-button-group label="Group Label">\n  <scale-radio-button\n    label="Radio Label"\n    name="disabled"\n    input-id="choice-0"\n    value="0"\n    disabled\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="disabled"\n    input-id="choice-1"\n    value="1"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="disabled"\n    input-id="choice-2"\n    value="2"\n  ></scale-radio-button>\n</scale-radio-button-group>\n')))}MDXContent.isMDXComponent=!0;var standard=RadioButtonGroup_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Group Label",groupName:"standard"},standard.parameters=Object.assign({storySource:{source:'(args, context) => ({\n  props: {\n    groupName: {\n      default: \'example\'\n    },\n    itemProps: {\n      default: {}\n    },\n    ...ScaleRadioButtonGroup.props\n  },\n\n  data() {\n    return {\n      items: Array.from({\n        length: 3\n      }, (_, i) => ({\n        id: `choice-${i}`,\n        label: \'Radio Label\',\n        value: i\n      }))\n    };\n  },\n\n  methods: {\n    emitChange: action(\'scale-change\')\n  },\n  template: `\n    <scale-radio-button-group\n      :label="label"\n      :invalid="invalid"\n      :helper-text="helperText"\n      @scale-change="emitChange"\n    >\n      <scale-radio-button\n        v-for="(item, index) in items"\n        :key="item.id"\n        :input-id="item.id"\n        :name="groupName"\n        :value="item.value"\n        :label="item.label"\n        :checked="itemProps[index]?.checked"\n        :invalid="itemProps[index]?.invalid"\n        :helper-text="itemProps[index]?.helperText"\n        :disabled="itemProps[index]?.disabled"\n      ></scale-radio-button>\n    </scale-radio-button-group>\n  `\n})'}},{controls:{exclude:["groupName"]}});var helperText=RadioButtonGroup_stories_Template.bind({});helperText.storyName="Helper Text",helperText.args={label:"Group Label",groupName:"helper-text",helperText:"Make sure to fill this"},helperText.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    groupName: {\n      default: \'example\'\n    },\n    itemProps: {\n      default: {}\n    },\n    ...ScaleRadioButtonGroup.props\n  },\n\n  data() {\n    return {\n      items: Array.from({\n        length: 3\n      }, (_, i) => ({\n        id: `choice-${i}`,\n        label: \'Radio Label\',\n        value: i\n      }))\n    };\n  },\n\n  methods: {\n    emitChange: action(\'scale-change\')\n  },\n  template: `\n    <scale-radio-button-group\n      :label="label"\n      :invalid="invalid"\n      :helper-text="helperText"\n      @scale-change="emitChange"\n    >\n      <scale-radio-button\n        v-for="(item, index) in items"\n        :key="item.id"\n        :input-id="item.id"\n        :name="groupName"\n        :value="item.value"\n        :label="item.label"\n        :checked="itemProps[index]?.checked"\n        :invalid="itemProps[index]?.invalid"\n        :helper-text="itemProps[index]?.helperText"\n        :disabled="itemProps[index]?.disabled"\n      ></scale-radio-button>\n    </scale-radio-button-group>\n  `\n})'}};var error=RadioButtonGroup_stories_Template.bind({});error.storyName="Error",error.args={label:"Group Label",groupName:"error",invalid:!0,helperText:"Something is wrong",itemProps:{0:{invalid:!0,checked:!0,helperText:"Error message"}}},error.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    groupName: {\n      default: \'example\'\n    },\n    itemProps: {\n      default: {}\n    },\n    ...ScaleRadioButtonGroup.props\n  },\n\n  data() {\n    return {\n      items: Array.from({\n        length: 3\n      }, (_, i) => ({\n        id: `choice-${i}`,\n        label: \'Radio Label\',\n        value: i\n      }))\n    };\n  },\n\n  methods: {\n    emitChange: action(\'scale-change\')\n  },\n  template: `\n    <scale-radio-button-group\n      :label="label"\n      :invalid="invalid"\n      :helper-text="helperText"\n      @scale-change="emitChange"\n    >\n      <scale-radio-button\n        v-for="(item, index) in items"\n        :key="item.id"\n        :input-id="item.id"\n        :name="groupName"\n        :value="item.value"\n        :label="item.label"\n        :checked="itemProps[index]?.checked"\n        :invalid="itemProps[index]?.invalid"\n        :helper-text="itemProps[index]?.helperText"\n        :disabled="itemProps[index]?.disabled"\n      ></scale-radio-button>\n    </scale-radio-button-group>\n  `\n})'}};var disabled=RadioButtonGroup_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Group Label",groupName:"disabled",itemProps:{0:{disabled:!0}}},disabled.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    groupName: {\n      default: \'example\'\n    },\n    itemProps: {\n      default: {}\n    },\n    ...ScaleRadioButtonGroup.props\n  },\n\n  data() {\n    return {\n      items: Array.from({\n        length: 3\n      }, (_, i) => ({\n        id: `choice-${i}`,\n        label: \'Radio Label\',\n        value: i\n      }))\n    };\n  },\n\n  methods: {\n    emitChange: action(\'scale-change\')\n  },\n  template: `\n    <scale-radio-button-group\n      :label="label"\n      :invalid="invalid"\n      :helper-text="helperText"\n      @scale-change="emitChange"\n    >\n      <scale-radio-button\n        v-for="(item, index) in items"\n        :key="item.id"\n        :input-id="item.id"\n        :name="groupName"\n        :value="item.value"\n        :label="item.label"\n        :checked="itemProps[index]?.checked"\n        :invalid="itemProps[index]?.invalid"\n        :helper-text="itemProps[index]?.helperText"\n        :disabled="itemProps[index]?.disabled"\n      ></scale-radio-button>\n    </scale-radio-button-group>\n  `\n})'}};var componentMeta={title:"Components/Radio Button Group",component:ScaleRadioButtonGroup,subcomponents:{"Radio Button":ScaleRadioButton},argTypes:{},includeStories:["standard","helperText","error","disabled"]},mdxStoryNameToKey={Standard:"standard","Helper Text":"helperText",Error:"error",Disabled:"disabled"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/rating-stars/RatingStars.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return RatingStars_stories_Template})),__webpack_require__.d(__webpack_exports__,"infoTextAndCustomLabel",(function(){return infoTextAndCustomLabel})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"small",(function(){return small})),__webpack_require__.d(__webpack_exports__,"ariaLabelTranslation",(function(){return ariaLabelTranslation})),__webpack_require__.d(__webpack_exports__,"hiddenLabel",(function(){return hiddenLabel})),__webpack_require__.d(__webpack_exports__,"readonly",(function(){return readonly}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),rating_stars_ScaleRatingStarsvue_type_script_lang_js_={props:{maxRating:{type:Number,default:5},max:{type:Number,default:5},minRating:{type:Number,default:0},rating:{type:Number,default:3},starSize:{type:String,default:"large"},size:{type:String,default:"large"},disabled:{type:Boolean,default:!1},ariaLabelTranslation:{type:String},label:{type:String,default:"Rating"},infoText:{type:String},hideLabel:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(rating_stars_ScaleRatingStarsvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-rating-stars",{attrs:{"max-rating":_vm.maxRating,max:_vm.max,"min-rating":_vm.minRating,rating:_vm.rating,"star-size":_vm.starSize,size:_vm.size,disabled:_vm.disabled,"aria-label-translation":_vm.ariaLabelTranslation,label:_vm.label,readonly:_vm.readonly,"info-text":_vm.infoText,"hide-label":_vm.hideLabel},on:{scaleChange:_vm.scaleChange}})}),[],!1,null,null,null).exports;var ScaleRatingStars=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleRatingStars",description:"",tags:{},props:[{name:"maxRating",type:{name:"number"},defaultValue:{func:!1,value:"5"}},{name:"max",type:{name:"number"},defaultValue:{func:!1,value:"5"}},{name:"minRating",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"rating",type:{name:"number"},defaultValue:{func:!1,value:"3"}},{name:"starSize",type:{name:"string"},defaultValue:{func:!1,value:"'large'"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'large'"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"ariaLabelTranslation",type:{name:"string"}},{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"'Rating'"}},{name:"infoText",type:{name:"string"}},{name:"hideLabel",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"readonly",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}]};var RatingStars_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleRatingStars:ScaleRatingStars},props:Object.assign({label:String},ScaleRatingStars.props),template:'\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    '}},layoutProps={Template:RatingStars_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Rating Stars",component:ScaleRatingStars,argTypes:{starSize:{table:{type:{summary:"string"},defaultValue:{summary:"large"}},description:"(optional) Deprecated; size should be used instead of starSize",control:{type:"select",options:["large","small"]}},size:{table:{type:{summary:"string"},defaultValue:{summary:"large"}},description:"(optional) size of the stars. Overwritten by deprecated starSize",control:{type:"select",options:["large","small"]}},minRating:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Deprecated; minimum rating value. Will be dropped on next release",control:{type:"number"}},maxRating:{table:{type:{summary:"number"},defaultValue:{summary:5}},description:"(optional) Deprecated; max should be used instead of maxRating",control:{type:"number"}},max:{table:{type:{summary:"number"},defaultValue:{summary:5}},description:"(optional) The upper limit of the rating. Overwritten by deprecated maxRating",control:{type:"number"}},rating:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Represents the current value of the rating",control:{type:"number"}},readonly:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) makes the rating non-interactive (but still accessible)",control:{type:"boolean"}},disabled:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) disables input",control:{type:"boolean"}},ariaLabelTranslation:{table:{type:{summary:"string"},defaultValue:{summary:"$rating out of $max stars"}},description:"(optional) a11y text for getting meaningful value.",control:{type:"text"}},label:{table:{type:{summary:"string"},defaultValue:{summary:"rating label"}},description:"(optional) rating label",control:{type:"text"}},infoText:{table:{type:{summary:"string"}},description:"(optional) info text",control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Rating Stars"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard-with-info-text-and-custom-label"},"Standard with Info Text and custom Label"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Info Text and custom Label",args:{rating:3,label:"Custom Rating Label"},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Info Text and custom Label",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"  :host {\n    --stars-color: var(--telekom-color-text-and-icon-primary-standard);\n    --stars-hover-color: var(--telekom-color-text-and-icon-primary-hovered);\n    --stars-active-color: var(--telekom-color-text-and-icon-primary-pressed);\n    --stars-inactive-color: transparent;\n    --stars-placeholder-color: var(--telekom-color-ui-border-standard);\n    --stars-placeholder-hover-color: var(--telekom-color-ui-border-hovered);\n    --stars-disabled-color: var(--telekom-color-text-and-icon-disabled);\n    --stars-spacing: var(--telekom-spacing-composition-space-02);\n    --stars-transition: color var(--telekom-motion-duration-immediate);\n    --stars-size: 24px;\n    --label-font: var(--telekom-text-style-ui);\n    --infotext-font: var(--telekom-text-style-body);\n    --infotext-font-small: var(--telekom-text-style-body);\n    --infotext-color: var(--telekom-color-text-and-icon-additional);\n    --focus-outline: var(--telekom-line-weight-highlight) solid\n      var(--telekom-color-functional-focus-standard);\n  }\n")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-rating-stars\n  rating="3"\n  label="Custom Rating Label"\n></scale-rating-stars>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{disabled:!0,rating:2},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-rating-stars rating="2" disabled></scale-rating-stars>\n')),Object(esm.b)("h2",{id:"small"},"Small"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small",args:{rating:4,size:"small"},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'\x3c!--\n  deprecated:\n  <scale-rating-stars rating="4" star-size="small" info-text="Info Text"></scale-rating-stars>\n--\x3e\n<scale-rating-stars\n  rating="4"\n  size="small"\n></scale-rating-stars>\n')),Object(esm.b)("h2",{id:"aria-label-translation"},"Aria Label Translation"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Aria Label Translation",args:{rating:1,ariaLabelTranslation:"$rating out of $maxRating stars"},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-rating-stars\n  rating="1"\n  aria-label-translation="$rating out of $max stars"\n></scale-rating-stars>\n\x3c!--  e.g. German\n  <scale-rating-stars\n  rating="1"\n  aria-label-translation="$rating von $max Sternen"\n></scale-rating-stars>\n  --\x3e\n')),Object(esm.b)("h2",{id:"hidden-label"},"Hidden Label"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Hidden Label",args:{rating:4,hideLabel:!0},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-rating-stars rating="4" hideLabel></scale-rating-stars>\n')),Object(esm.b)("h2",{id:"readonly"},"Readonly"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Readonly",args:{rating:3,readonly:!0},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-rating-stars rating="3" readonly></scale-rating-stars>\n')))}MDXContent.isMDXComponent=!0;var infoTextAndCustomLabel=RatingStars_stories_Template.bind({});infoTextAndCustomLabel.storyName="Info Text and custom Label",infoTextAndCustomLabel.args={rating:3,label:"Custom Rating Label"},infoTextAndCustomLabel.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var disabled=RatingStars_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={disabled:!0,rating:2},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var small=RatingStars_stories_Template.bind({});small.storyName="Small",small.args={rating:4,size:"small"},small.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var ariaLabelTranslation=RatingStars_stories_Template.bind({});ariaLabelTranslation.storyName="Aria Label Translation",ariaLabelTranslation.args={rating:1,ariaLabelTranslation:"$rating out of $maxRating stars"},ariaLabelTranslation.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var hiddenLabel=RatingStars_stories_Template.bind({});hiddenLabel.storyName="Hidden Label",hiddenLabel.args={rating:4,hideLabel:!0},hiddenLabel.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var readonly=RatingStars_stories_Template.bind({});readonly.storyName="Readonly",readonly.args={rating:3,readonly:!0},readonly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var componentMeta={title:"Components/Rating Stars",component:ScaleRatingStars,argTypes:{starSize:{table:{type:{summary:"string"},defaultValue:{summary:"large"}},description:"(optional) Deprecated; size should be used instead of starSize",control:{type:"select",options:["large","small"]}},size:{table:{type:{summary:"string"},defaultValue:{summary:"large"}},description:"(optional) size of the stars. Overwritten by deprecated starSize",control:{type:"select",options:["large","small"]}},minRating:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Deprecated; minimum rating value. Will be dropped on next release",control:{type:"number"}},maxRating:{table:{type:{summary:"number"},defaultValue:{summary:5}},description:"(optional) Deprecated; max should be used instead of maxRating",control:{type:"number"}},max:{table:{type:{summary:"number"},defaultValue:{summary:5}},description:"(optional) The upper limit of the rating. Overwritten by deprecated maxRating",control:{type:"number"}},rating:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Represents the current value of the rating",control:{type:"number"}},readonly:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) makes the rating non-interactive (but still accessible)",control:{type:"boolean"}},disabled:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) disables input",control:{type:"boolean"}},ariaLabelTranslation:{table:{type:{summary:"string"},defaultValue:{summary:"$rating out of $max stars"}},description:"(optional) a11y text for getting meaningful value.",control:{type:"text"}},label:{table:{type:{summary:"string"},defaultValue:{summary:"rating label"}},description:"(optional) rating label",control:{type:"text"}},infoText:{table:{type:{summary:"string"}},description:"(optional) info text",control:{type:"text"}}},includeStories:["infoTextAndCustomLabel","disabled","small","ariaLabelTranslation","hiddenLabel","readonly"]},mdxStoryNameToKey={"Info Text and custom Label":"infoTextAndCustomLabel",Disabled:"disabled",Small:"small","Aria Label Translation":"ariaLabelTranslation","Hidden Label":"hiddenLabel",Readonly:"readonly"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/segmented-button/SegmentedButton.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return SegmentedButton_stories_Template})),__webpack_require__.d(__webpack_exports__,"MultiSelectTemplate",(function(){return SegmentedButton_stories_MultiSelectTemplate})),__webpack_require__.d(__webpack_exports__,"IconOnlyTemplate",(function(){return SegmentedButton_stories_IconOnlyTemplate})),__webpack_require__.d(__webpack_exports__,"IconTextTemplate",(function(){return SegmentedButton_stories_IconTextTemplate})),__webpack_require__.d(__webpack_exports__,"DisabledTemplate",(function(){return SegmentedButton_stories_DisabledTemplate})),__webpack_require__.d(__webpack_exports__,"DisabledSegmentTemplate",(function(){return SegmentedButton_stories_DisabledSegmentTemplate})),__webpack_require__.d(__webpack_exports__,"InvalidTemplate",(function(){return SegmentedButton_stories_InvalidTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"multiSelect",(function(){return multiSelect})),__webpack_require__.d(__webpack_exports__,"disabledSegment",(function(){return disabledSegment})),__webpack_require__.d(__webpack_exports__,"disabledButton",(function(){return disabledButton})),__webpack_require__.d(__webpack_exports__,"iconOnly",(function(){return iconOnly})),__webpack_require__.d(__webpack_exports__,"iconAndText",(function(){return iconAndText})),__webpack_require__.d(__webpack_exports__,"invalid",(function(){return invalid}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),segmented_button_ScaleSegmentedButtonvue_type_script_lang_js_={props:{size:{type:String,default:"small"},disabled:{type:Boolean,default:!1},multiSelect:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},label:{type:String},helperText:{type:String},fullWidth:{type:Boolean,default:!1},styles:{type:String}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(segmented_button_ScaleSegmentedButtonvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-segmented-button",{attrs:{size:_vm.size,disabled:_vm.disabled,"multi-select":_vm.multiSelect,invalid:_vm.invalid,label:_vm.label,"helper-text":_vm.helperText,"full-width":_vm.fullWidth,styles:_vm.styles},on:{scaleChange:_vm.scaleChange}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleSegmentedButton=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleSegmentedButton",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'small'"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"multiSelect",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"invalid",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"fullWidth",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}],slots:[{name:"default"}]};var SegmentedButton_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n      :full-width="fullWidth"\n      :label="label"\n    >\n      <scale-segment selected>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_MultiSelectTemplate=function MultiSelectTemplate(args,_ref2){_ref2.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected>Apple</scale-segment>\n      <scale-segment selected>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_IconOnlyTemplate=function IconOnlyTemplate(args,_ref3){_ref3.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected><scale-icon-weather-cloudy slot="segment-icon"></scale-icon-weather-cloudy></scale-segment>\n      <scale-segment><scale-icon-weather-rain slot="segment-icon"></scale-icon-weather-rain></scale-segment>\n      <scale-segment><scale-icon-weather-sunny slot="segment-icon"></scale-icon-weather-sunny></scale-segment>\n      <scale-segment><scale-icon-weather-heavy-snow slot="segment-icon"></scale-icon-weather-heavy-snow></scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_IconTextTemplate=function IconTextTemplate(args,_ref4){_ref4.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Apple</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>One+</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Samsung</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_DisabledTemplate=function DisabledTemplate(args,_ref5){_ref5.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String,disabled:"true"},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :disabled="disabled"\n      :size="size"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n    >\n      <scale-segment>Apple</scale-segment>\n      <scale-segment selected>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_DisabledSegmentTemplate=function DisabledSegmentTemplate(args,_ref6){_ref6.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String,disabled:!0},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n    >\n      <scale-segment disabled>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_InvalidTemplate=function InvalidTemplate(args,_ref7){_ref7.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String,invalid:Boolean},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :invalid="invalid"\n      :helper-text="helperText"\n      :label="label"\n    >\n      <scale-segment>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},layoutProps={Template:SegmentedButton_stories_Template,MultiSelectTemplate:SegmentedButton_stories_MultiSelectTemplate,IconOnlyTemplate:SegmentedButton_stories_IconOnlyTemplate,IconTextTemplate:SegmentedButton_stories_IconTextTemplate,DisabledTemplate:SegmentedButton_stories_DisabledTemplate,DisabledSegmentTemplate:SegmentedButton_stories_DisabledSegmentTemplate,InvalidTemplate:SegmentedButton_stories_InvalidTemplate};function MDXContent(_ref8){var components=_ref8.components,props=_objectWithoutProperties(_ref8,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Beta Components/Segmented Button",component:ScaleSegmentedButton,argTypes:{size:{control:{type:"select",options:["small","medium","large"]}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Segmented Button"),Object(esm.b)("img",{src:"assets/beta.png",alt:"Beta Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Group Label"},mdxType:"Story"},SegmentedButton_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-segmented-button>\n  <scale-segment selected>Apple</scale-segment>\n  <scale-segment>One+</scale-segment>\n  <scale-segment>Samsung</scale-segment>\n  <scale-segment>Huawei</scale-segment>\n</scale-segmented-button>\n")),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --background-color: var(--telekom-color-ui-faint);\n  --radius: var(--telekom-radius-standard);\n  --height: 32px;\n\n  /* medium styles */\n  --height-medium: 40px;\n\n  /* large styles */\n  --height-large: 44px;\n}\n\n:host(scale-segmented) {\n  /* not selected */\n  --background-color-selected: var(--telekom-color-ui-base);\n  --button-radius: 6px;\n  --padding-top-bottom: var(--telekom-spacing-composition-space-03);\n  --height: 28px;\n  --font: var(--telekom-text-style-caption-bold);\n  --label-disabled: var(--telekom-color-text-and-icon-disabled);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --color: var(--telekom-color-text-and-icon-standard);\n\n  --color-selected: var(--telekom-color-text-and-icon-primary-standard);\n\n  /* medium styles */\n  --font-medium: var(--telekom-text-style-ui-bold);\n  --height-medium: 36px;\n\n  /* large styles */\n  --font-large: var(--telekom-text-style-ui-bold);\n  --height-large: 40px;\n\n  /* hover styles */\n  --background-color-hover: var(--telekom-color-ui-state-fill-hovered);\n\n  /* active styles */\n  --background-color-active: var(--telekom-color-ui-state-fill-pressed);\n}\n")),Object(esm.b)("h2",{id:"multi-select"},"Multi Select"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"MultiSelect",args:{multiSelect:!0,label:"Group Label"},mdxType:"Story"},SegmentedButton_stories_MultiSelectTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-segmented-button multi-select>\n  <scale-segment selected>Apple</scale-segment>\n  <scale-segment selected>One+</scale-segment>\n  <scale-segment>Samsung</scale-segment>\n  <scale-segment>Huawei</scale-segment>\n</scale-segmented-button>\n")),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)("h3",{id:"disabled-segment"},"Disabled Segment"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled Segment",args:{label:"Label"},mdxType:"Story"},SegmentedButton_stories_DisabledSegmentTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-segmented-button>\n  <scale-segment disabled>Apple</scale-segment>\n  <scale-segment>One+</scale-segment>\n  <scale-segment>Samsung</scale-segment>\n  <scale-segment>Huawei</scale-segment>\n</scale-segmented-button>\n")),Object(esm.b)("h3",{id:"disabled-button"},"Disabled Button"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled Button",args:{label:"Label",disabled:!0},mdxType:"Story"},SegmentedButton_stories_DisabledTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-segmented-button disabled>\n  <scale-segment>Apple</scale-segment>\n  <scale-segment selected>One+</scale-segment>\n  <scale-segment>Samsung</scale-segment>\n  <scale-segment>Huawei</scale-segment>\n</scale-segmented-button>\n")),Object(esm.b)("h2",{id:"icon-only"},"Icon only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon only",args:{label:"Group Label"},mdxType:"Story"},SegmentedButton_stories_IconOnlyTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-segmented-button>\n  <scale-segment selected>\n    <scale-icon-weather-cloudy slot="segment-icon"> </scale-icon-weather-cloudy>\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-weather-rain slot="segment-icon"> </scale-icon-weather-rain>\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-weather-sunny slot="segment-icon"> </scale-icon-weather-sunny>\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-weahter-heavy-snow slot="segment-icon">\n    </scale-icon-weahter-heavy-snow>\n  </scale-segment>\n</scale-segmented-button>\n')),Object(esm.b)("h2",{id:"icon-and-text"},"Icon and Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon and Text",args:{label:"Group Label"},mdxType:"Story"},SegmentedButton_stories_IconTextTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-segmented-button>\n  <scale-segment selected>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Apple\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    One+\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Samsung\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Huawei\n  </scale-segment>\n</scale-segmented-button>\n')),Object(esm.b)("h2",{id:"invalid"},"Invalid"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"invalid",args:{invalid:!0},mdxType:"Story"},SegmentedButton_stories_InvalidTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-segmented-button invalid>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Apple\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    One+\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Samsung\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Huawei\n  </scale-segment>\n</scale-segmented-button>\n')))}MDXContent.isMDXComponent=!0;var standard=SegmentedButton_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Group Label"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n      :full-width="fullWidth"\n      :label="label"\n    >\n      <scale-segment selected>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var multiSelect=SegmentedButton_stories_MultiSelectTemplate.bind({});multiSelect.storyName="MultiSelect",multiSelect.args={multiSelect:!0,label:"Group Label"},multiSelect.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected>Apple</scale-segment>\n      <scale-segment selected>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var disabledSegment=SegmentedButton_stories_DisabledSegmentTemplate.bind({});disabledSegment.storyName="Disabled Segment",disabledSegment.args={label:"Label"},disabledSegment.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    disabled: true,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n    >\n      <scale-segment disabled>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var disabledButton=SegmentedButton_stories_DisabledTemplate.bind({});disabledButton.storyName="Disabled Button",disabledButton.args={label:"Label",disabled:!0},disabledButton.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    disabled: \'true\',\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :disabled="disabled"\n      :size="size"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n    >\n      <scale-segment>Apple</scale-segment>\n      <scale-segment selected>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var iconOnly=SegmentedButton_stories_IconOnlyTemplate.bind({});iconOnly.storyName="Icon only",iconOnly.args={label:"Group Label"},iconOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected><scale-icon-weather-cloudy slot="segment-icon"></scale-icon-weather-cloudy></scale-segment>\n      <scale-segment><scale-icon-weather-rain slot="segment-icon"></scale-icon-weather-rain></scale-segment>\n      <scale-segment><scale-icon-weather-sunny slot="segment-icon"></scale-icon-weather-sunny></scale-segment>\n      <scale-segment><scale-icon-weather-heavy-snow slot="segment-icon"></scale-icon-weather-heavy-snow></scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var iconAndText=SegmentedButton_stories_IconTextTemplate.bind({});iconAndText.storyName="Icon and Text",iconAndText.args={label:"Group Label"},iconAndText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Apple</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>One+</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Samsung</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var invalid=SegmentedButton_stories_InvalidTemplate.bind({});invalid.storyName="invalid",invalid.args={invalid:!0},invalid.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    invalid: Boolean,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :invalid="invalid"\n      :helper-text="helperText"\n      :label="label"\n    >\n      <scale-segment>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var componentMeta={title:"Beta Components/Segmented Button",component:ScaleSegmentedButton,argTypes:{size:{control:{type:"select",options:["small","medium","large"]}}},includeStories:["standard","multiSelect","disabledSegment","disabledButton","iconOnly","iconAndText","invalid"]},mdxStoryNameToKey={Standard:"standard",MultiSelect:"multiSelect","Disabled Segment":"disabledSegment","Disabled Button":"disabledButton","Icon only":"iconOnly","Icon and Text":"iconAndText",invalid:"invalid"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/sidebar-navigation/SidebarNav.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return SidebarNav_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"activeOnLevel1",(function(){return activeOnLevel1})),__webpack_require__.d(__webpack_exports__,"activeOnLevel2",(function(){return activeOnLevel2})),__webpack_require__.d(__webpack_exports__,"activeOnLevel3",(function(){return activeOnLevel3})),__webpack_require__.d(__webpack_exports__,"customMediaQuery",(function(){return customMediaQuery}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),sidebar_navigation_SidebarNavvue_type_script_lang_js_={name:"scale-sidebar-nav",props:{ariaLabel:{type:String},collapsible:{type:Boolean,default:!1},collapsibleMediaQuery:{type:String},collapsibleLabel:{type:String,default:"Menu"},styles:{type:String}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(sidebar_navigation_SidebarNavvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var SidebarNav=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={displayName:"scale-sidebar-nav",exportName:"default",description:"",tags:{},props:[{name:"ariaLabel",type:{name:"string"}},{name:"collapsible",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"collapsibleMediaQuery",type:{name:"string"}},{name:"collapsibleLabel",type:{name:"string"},defaultValue:{func:!1,value:"'Menu'"}},{name:"styles",type:{name:"string"}}]};__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js");var sidebar_navigation_SidebarNavCollapsiblevue_type_script_lang_js_={name:"SidebarNavCollapsible",props:{tag:{type:String,default:"li"},label:{type:String},href:{type:String,default:"#"},expanded:{type:Boolean,default:!1},active:{type:Boolean,default:!1},bold:{type:Boolean,default:!1},condensed:{type:Boolean,default:!1},nestingLevel:{type:Number},styles:{type:String}}};const SidebarNavCollapsible_vuedocgen_export_0=Object(componentNormalizer.a)(sidebar_navigation_SidebarNavCollapsiblevue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var SidebarNavCollapsible=SidebarNavCollapsible_vuedocgen_export_0;SidebarNavCollapsible_vuedocgen_export_0.__docgenInfo={displayName:"SidebarNavCollapsible",exportName:"default",description:"",tags:{},props:[{name:"tag",type:{name:"string"},defaultValue:{func:!1,value:"'li'"}},{name:"label",type:{name:"string"}},{name:"href",type:{name:"string"},defaultValue:{func:!1,value:"'#'"}},{name:"expanded",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"active",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"bold",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"condensed",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"nestingLevel",type:{name:"number"}},{name:"styles",type:{name:"string"}}]};var sidebar_navigation_SidebarNavItemvue_type_script_lang_js_={name:"SidebarNavItem",props:{condensed:{type:Boolean,default:!1},bold:{type:Boolean,default:!1},active:{type:Boolean,default:!1},current:{type:[String,null],default:null},nestingLevel:{type:Number},styles:{type:String}}};const SidebarNavItem_vuedocgen_export_0=Object(componentNormalizer.a)(sidebar_navigation_SidebarNavItemvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var SidebarNavItem=SidebarNavItem_vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}SidebarNavItem_vuedocgen_export_0.__docgenInfo={displayName:"SidebarNavItem",exportName:"default",description:"",tags:{},props:[{name:"condensed",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"bold",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"active",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"current",type:{name:"string|null"},defaultValue:{func:!1,value:"null"}},{name:"nestingLevel",type:{name:"number"}},{name:"styles",type:{name:"string"}}]};var SidebarNav_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({width:{type:String}},SidebarNav.props),computed:{wrapperStyles:function wrapperStyles(){return{maxWidth:this.width}}},template:'\n    <div :style="wrapperStyles">\n      <scale-sidebar-nav\n        :arial-label="ariaLabel"\n        :collapsible="collapsible"\n        :collapsible-label="collapsibleLabel"\n        :collapsible-media-query="collapsibleMediaQuery"\n        :styles="styles"\n      >\n        <scale-sidebar-nav-item>\n          <a href="#">Overview</a>\n        </scale-sidebar-nav-item>\n        <scale-sidebar-nav-collapsible label="Reference" expanded>\n          <scale-sidebar-nav-collapsible label="Function A" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Endpoint 1</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 2</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 3</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-collapsible label="Function B">\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 4</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 5</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 6</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-collapsible label="Etcetera">\n          <scale-sidebar-nav-item>\n            <a href="#">Some foo</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">More bar</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Links baz</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-item>\n          <a href="#">Console</a>\n        </scale-sidebar-nav-item>\n      </scale-sidebar-nav>\n    </div>\n  '}},layoutProps={Template:SidebarNav_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Sidebar Navigation",component:SidebarNav,subcomponents:{"scale-sidebar-nav-collapsible":SidebarNavCollapsible,"scale-sidebar-nav-item":SidebarNavItem},argTypes:{styles:{control:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Sidebar Navigation"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{collapsibleLabel:"Explore this topic"},mdxType:"Story"},SidebarNav_stories_Template.bind())),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-sidebar-nav collapsible-label="Explore this topic">\n  <scale-sidebar-nav-item>\n    <a href="#">Overview</a>\n  </scale-sidebar-nav-item>\n  <scale-sidebar-nav-collapsible label="Reference" expanded>\n    <scale-sidebar-nav-collapsible label="Function A" expanded>\n      <scale-sidebar-nav-item current active>\n        <a href="#">Endpoint 1</a>\n      </scale-sidebar-nav-item>\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 2</a>\n      </scale-sidebar-nav-item>\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 3</a>\n      </scale-sidebar-nav-item>\n    </scale-sidebar-nav-collapsible>\n    <scale-sidebar-nav-collapsible label="Function B">\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 4</a>\n      </scale-sidebar-nav-item>\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 5</a>\n      </scale-sidebar-nav-item>\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 6</a>\n      </scale-sidebar-nav-item>\n    </scale-sidebar-nav-collapsible>\n  </scale-sidebar-nav-collapsible>\n  <scale-sidebar-nav-collapsible label="Etcetera">\n    <scale-sidebar-nav-item>\n      <a href="#">Some foo</a>\n    </scale-sidebar-nav-item>\n    <scale-sidebar-nav-item>\n      <a href="#">More bar</a>\n    </scale-sidebar-nav-item>\n    <scale-sidebar-nav-item>\n      <a href="#">Links baz</a>\n    </scale-sidebar-nav-item>\n  </scale-sidebar-nav-collapsible>\n  <scale-sidebar-nav-item>\n    <a href="#">Console</a>\n  </scale-sidebar-nav-item>\n</scale-sidebar-nav>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"/* sidebar-nav */\n:host {\n  --max-width: 15rem;\n  --spacing-indent: var(--telekom-spacing-composition-space-08);\n  --spacing-collapsible: var(--telekom-spacing-composition-space-06);\n  --opacity-chevron: 0;\n  --left-current-border: 0;\n\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --color-toggle-button: var(--telekom-color-ui-regular);\n  --border-y-toggle-button: 1px solid var(--telekom-color-ui-faint);\n  --radius-toggle-button: var(--telekom-radius-small);\n}\n\n/* sidebar-nav-collapsible */\n:host {\n  --opacity-chevron: 1;\n  --border-bottom-color: var(--telekom-color-ui-faint);\n  --border-left-color-third-nesting: var(--telekom-color-ui-strong);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-primary: var(--telekom-color-text-and-icon-primary-standard);\n  --background-color-before-active: var(--color-primary);\n  --font-weight-bold: var(--telekom-typography-font-weight-bold);\n  --box-shadow-focus: inset 0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);\n}\n\n/* sidebar-nav-item */\n:host {\n  --border-bottom-color: var(--telekom-color-ui-faint);\n  --border-left-color-third-nesting: var(--telekom-color-ui-strong);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-primary: var(--telekom-color-text-and-icon-primary-standard);\n  --background-color-before-active: var(--color-primary);\n  --font-bold: var(--telekom-text-style-ui-bold);\n  --box-shadow-focus: inset 0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"active-on-level-1"},"Active on Level 1"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Active on Level 1",mdxType:"Story"},{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item current active>\n            <a href="#">Resources</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-sidebar-nav>\n  <scale-sidebar-nav-item>\n    <a href="#">Overview</a>\n  </scale-sidebar-nav-item>\n  <scale-sidebar-nav-item current active>\n    <a href="#">Resources</a>\n  </scale-sidebar-nav-item>\n  <scale-sidebar-nav-item>\n    <a href="#">Console</a>\n  </scale-sidebar-nav-item>\n</scale-sidebar-nav>\n')),Object(esm.b)("h2",{id:"active-on-level-2"},"Active on Level 2"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Active on Level 2",mdxType:"Story"},{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Day</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Night</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-sidebar-nav>\n  <scale-sidebar-nav-item>\n    <a href="#">Overview</a>\n  </scale-sidebar-nav-item>\n  <scale-sidebar-nav-collapsible label="Reference" expanded>\n    <scale-sidebar-nav-item current active>\n      <a href="#">Day</a>\n    </scale-sidebar-nav-item>\n    <scale-sidebar-nav-item>\n      <a href="#">Night</a>\n    </scale-sidebar-nav-item>\n  </scale-sidebar-nav-collapsible>\n  <scale-sidebar-nav-item>\n    <a href="#">Console</a>\n  </scale-sidebar-nav-item>\n</scale-sidebar-nav>\n')),Object(esm.b)("h2",{id:"active-on-level-3"},"Active on Level 3"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Active on Level 3",mdxType:"Story"},{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-collapsible label="Function A" expanded>\n              <scale-sidebar-nav-item current active>\n                <a href="#">Endpoint 1</a>\n              </scale-sidebar-nav-item>\n              <scale-sidebar-nav-item>\n                <a href="#">Endpoint 2</a>\n              </scale-sidebar-nav-item>\n            </scale-sidebar-nav-collapsible>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-sidebar-nav>\n  <scale-sidebar-nav-collapsible label="Reference" expanded>\n    <scale-sidebar-nav-collapsible label="Function A" expanded>\n      <scale-sidebar-nav-item current active>\n        <a href="#">Endpoint 1</a>\n      </scale-sidebar-nav-item>\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 2</a>\n      </scale-sidebar-nav-item>\n    </scale-sidebar-nav-collapsible>\n  </scale-sidebar-nav-collapsible>\n</scale-sidebar-nav>\n')),Object(esm.b)("h2",{id:"custom-media-query"},"Custom Media Query"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Media Query",args:{collapsibleLabel:"Menu",collapsibleMediaQuery:"(max-width: 44em)"},mdxType:"Story"},SidebarNav_stories_Template.bind())),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-sidebar-nav\n  collapsible-label="Menu"\n  collapsible-media-query="(max-width: 44em)"\n>\n  <scale-sidebar-nav-item>\n    <a href="#">Overview</a>\n  </scale-sidebar-nav-item>\n  \x3c!-- ... --\x3e\n  <scale-sidebar-nav-item>\n    <a href="#">Console</a>\n  </scale-sidebar-nav-item>\n</scale-sidebar-nav>\n')))}MDXContent.isMDXComponent=!0;var standard=SidebarNav_stories_Template.bind();standard.storyName="Standard",standard.args={collapsibleLabel:"Explore this topic"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    width: {\n      type: String\n    },\n    ...ScaleSidebarNav.props\n  },\n  computed: {\n    wrapperStyles() {\n      return {\n        maxWidth: this.width\n      };\n    }\n\n  },\n  template: `\n    <div :style="wrapperStyles">\n      <scale-sidebar-nav\n        :arial-label="ariaLabel"\n        :collapsible="collapsible"\n        :collapsible-label="collapsibleLabel"\n        :collapsible-media-query="collapsibleMediaQuery"\n        :styles="styles"\n      >\n        <scale-sidebar-nav-item>\n          <a href="#">Overview</a>\n        </scale-sidebar-nav-item>\n        <scale-sidebar-nav-collapsible label="Reference" expanded>\n          <scale-sidebar-nav-collapsible label="Function A" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Endpoint 1</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 2</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 3</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-collapsible label="Function B">\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 4</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 5</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 6</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-collapsible label="Etcetera">\n          <scale-sidebar-nav-item>\n            <a href="#">Some foo</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">More bar</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Links baz</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-item>\n          <a href="#">Console</a>\n        </scale-sidebar-nav-item>\n      </scale-sidebar-nav>\n    </div>\n  `\n})'}};var activeOnLevel1=function activeOnLevel1(){return{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item current active>\n            <a href="#">Resources</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      '}};activeOnLevel1.storyName="Active on Level 1",activeOnLevel1.parameters={storySource:{source:'{\n  template: `\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item current active>\n            <a href="#">Resources</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      `\n}'}};var activeOnLevel2=function activeOnLevel2(){return{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Day</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Night</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      '}};activeOnLevel2.storyName="Active on Level 2",activeOnLevel2.parameters={storySource:{source:'{\n  template: `\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Day</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Night</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      `\n}'}};var activeOnLevel3=function activeOnLevel3(){return{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-collapsible label="Function A" expanded>\n              <scale-sidebar-nav-item current active>\n                <a href="#">Endpoint 1</a>\n              </scale-sidebar-nav-item>\n              <scale-sidebar-nav-item>\n                <a href="#">Endpoint 2</a>\n              </scale-sidebar-nav-item>\n            </scale-sidebar-nav-collapsible>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav>\n      '}};activeOnLevel3.storyName="Active on Level 3",activeOnLevel3.parameters={storySource:{source:'{\n  template: `\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-collapsible label="Function A" expanded>\n              <scale-sidebar-nav-item current active>\n                <a href="#">Endpoint 1</a>\n              </scale-sidebar-nav-item>\n              <scale-sidebar-nav-item>\n                <a href="#">Endpoint 2</a>\n              </scale-sidebar-nav-item>\n            </scale-sidebar-nav-collapsible>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav>\n      `\n}'}};var customMediaQuery=SidebarNav_stories_Template.bind();customMediaQuery.storyName="Custom Media Query",customMediaQuery.args={collapsibleLabel:"Menu",collapsibleMediaQuery:"(max-width: 44em)"},customMediaQuery.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    width: {\n      type: String\n    },\n    ...ScaleSidebarNav.props\n  },\n  computed: {\n    wrapperStyles() {\n      return {\n        maxWidth: this.width\n      };\n    }\n\n  },\n  template: `\n    <div :style="wrapperStyles">\n      <scale-sidebar-nav\n        :arial-label="ariaLabel"\n        :collapsible="collapsible"\n        :collapsible-label="collapsibleLabel"\n        :collapsible-media-query="collapsibleMediaQuery"\n        :styles="styles"\n      >\n        <scale-sidebar-nav-item>\n          <a href="#">Overview</a>\n        </scale-sidebar-nav-item>\n        <scale-sidebar-nav-collapsible label="Reference" expanded>\n          <scale-sidebar-nav-collapsible label="Function A" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Endpoint 1</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 2</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 3</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-collapsible label="Function B">\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 4</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 5</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 6</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-collapsible label="Etcetera">\n          <scale-sidebar-nav-item>\n            <a href="#">Some foo</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">More bar</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Links baz</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-item>\n          <a href="#">Console</a>\n        </scale-sidebar-nav-item>\n      </scale-sidebar-nav>\n    </div>\n  `\n})'}};var componentMeta={title:"Components/Sidebar Navigation",component:SidebarNav,subcomponents:{"scale-sidebar-nav-collapsible":SidebarNavCollapsible,"scale-sidebar-nav-item":SidebarNavItem},argTypes:{styles:{control:{disable:!0}}},includeStories:["standard","activeOnLevel1","activeOnLevel2","activeOnLevel3","customMediaQuery"]},mdxStoryNameToKey={Standard:"standard","Active on Level 1":"activeOnLevel1","Active on Level 2":"activeOnLevel2","Active on Level 3":"activeOnLevel3","Custom Media Query":"customMediaQuery"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/slider/Slider.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Slider_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"range",(function(){return range})),__webpack_require__.d(__webpack_exports__,"stepMarks",(function(){return stepMarks})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"platformIOs",(function(){return platformIOs})),__webpack_require__.d(__webpack_exports__,"platformAndroid",(function(){return platformAndroid}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),slider_ScaleSlidervue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{label:{type:String},value:{type:Number,default:0},range:{type:Boolean,default:!1},valueFrom:{type:Number,default:0},valueTo:{type:Number,default:0},min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},showStepMarks:{type:Boolean,default:!1},unit:{type:String,default:""},unitPosition:{type:0,default:"after"},decimals:{type:Number,default:0},disabled:{type:Boolean,default:!1},showValue:{type:Boolean,default:!0},name:{type:String},sliderId:{type:String},helperText:String,platform:{type:0},styles:{type:String}},render:function render(){return this.$slots.default}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(slider_ScaleSlidervue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleSlider=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleSlider",description:"",tags:{},props:[{name:"label",type:{name:"string"}},{name:"value",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"range",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"valueFrom",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"valueTo",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"min",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"max",type:{name:"number"},defaultValue:{func:!1,value:"100"}},{name:"step",type:{name:"number"},defaultValue:{func:!1,value:"1"}},{name:"showStepMarks",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"unit",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"unitPosition",type:{name:"'before' | 'after'"},defaultValue:{func:!1,value:"'after'"}},{name:"decimals",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"showValue",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"name",type:{name:"string"}},{name:"sliderId",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"platform",type:{name:"'ios' | 'android'"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Slider_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({},ScaleSlider.props),template:'\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  ',methods:{handleScaleChange:Object(addon_actions_dist_esm.action)("scale-change"),handleScaleInput:Object(addon_actions_dist_esm.action)("scale-input")}}},layoutProps={Template:Slider_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Slider",component:ScaleSlider,argTypes:{platform:{control:{type:"text"}},styles:{control:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Slider"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Standard",value:42},mdxType:"Story"},Slider_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 368px;\n  --height-track: 6px;\n  --background-track: var(--telekom-color-ui-faint);\n  --radius-track: var(--telekom-radius-pill);\n  --spacing-track: var(--telekom-spacing-composition-space-07) 0\n    var(--telekom-spacing-composition-space-06);\n  --spacing-x-inner-track: 10px;\n  --background-bar: var(--telekom-color-primary-standard);\n  --radius-thumb: var(--telekom-radius-circle);\n  --size-thumb: 24px;\n  --border-color-thumb: rgba(0, 0, 0, 0.05);\n  --background-thumb: var(--telekom-color-ui-white);\n  --shadow-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24),\n    0 4px 12px 0 rgba(0, 0, 0, 0.26);\n  --color-focus: var(--telekom-color-functional-focus-standard);\n  --spacing-x-step-marks: 8px;\n  --color-step-mark: var(--telekom-color-text-and-icon-additional);\n  --radius-step-mark: var(--telekom-radius-circle);\n  --size-step-mark: 4px;\n  --font-label: var(--telekom-text-style-ui);\n  --font-helper-text: var(--telekom-text-style-small-bold);\n  --color-helper-text: var(--telekom-color-text-and-icon-additional);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"range"},"Range"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Range",args:{label:"Temperature",range:!0,valueFrom:180,valueTo:330,max:500,unit:"ºC"},mdxType:"Story"},Slider_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-slider\n  label="Temperature"\n  range\n  valueFrom="100"\n  valueTo="300"\n  max="500"\n  unit="ºC">\n</scale-slider>\n')),Object(esm.b)("h2",{id:"step-marks"},"Step Marks"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Step Marks",args:{label:"Step Marks",step:25,showStepMarks:!0,value:50,max:200},mdxType:"Story"},Slider_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-slider\n  label="Step Marks"\n  step="25"\n  show-step-marks\n  value="50"\n  max="200">\n</scale-slider>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{label:"Alpha",value:.66,step:.01,decimals:2,max:1,helperText:"Between 0 and 1"},mdxType:"Story"},Slider_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-slider\n  label="Alpha"\n  value="0.66"\n  step="0.01"\n  max="1"\n  helper-text="Between 0 and 1">\n</scale-slider>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",value:13,disabled:!0},mdxType:"Story"},Slider_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-slider\n  label="Disabled"\n  value="13"\n  disabled>\n</scale-slider>\n')),Object(esm.b)("h2",{id:"platform-ios"},"Platform iOS"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Platform iOS",mdxType:"Story"},{template:'\n        <scale-slider label="iOS" value="25" platform="ios"></scale-slider>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-slider label="Apple" value="25" platform="ios"></scale-slider>\n')),Object(esm.b)("h2",{id:"platform-android"},"Platform Android"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Platform Android",mdxType:"Story"},{template:'\n        <scale-slider label="Android" value="75" platform="android"></scale-slider>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'\x3c!-- attribute data-platform="android" in parent element works in Chrome --\x3e\n<body data-platform="android">\n  <scale-slider label="Android" value="75"></scale-slider>\n</body>\n')))}MDXContent.isMDXComponent=!0;var standard=Slider_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Standard",value:42},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleSlider.props\n  },\n  template: `\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  `,\n  methods: {\n    handleScaleChange: action(\'scale-change\'),\n    handleScaleInput: action(\'scale-input\')\n  }\n})'}};var range=Slider_stories_Template.bind({});range.storyName="Range",range.args={label:"Temperature",range:!0,valueFrom:180,valueTo:330,max:500,unit:"ºC"},range.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleSlider.props\n  },\n  template: `\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  `,\n  methods: {\n    handleScaleChange: action(\'scale-change\'),\n    handleScaleInput: action(\'scale-input\')\n  }\n})'}};var stepMarks=Slider_stories_Template.bind({});stepMarks.storyName="Step Marks",stepMarks.args={label:"Step Marks",step:25,showStepMarks:!0,value:50,max:200},stepMarks.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleSlider.props\n  },\n  template: `\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  `,\n  methods: {\n    handleScaleChange: action(\'scale-change\'),\n    handleScaleInput: action(\'scale-input\')\n  }\n})'}};var helperText=Slider_stories_Template.bind({});helperText.storyName="Helper Text",helperText.args={label:"Alpha",value:.66,step:.01,decimals:2,max:1,helperText:"Between 0 and 1"},helperText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleSlider.props\n  },\n  template: `\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  `,\n  methods: {\n    handleScaleChange: action(\'scale-change\'),\n    handleScaleInput: action(\'scale-input\')\n  }\n})'}};var disabled=Slider_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",value:13,disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleSlider.props\n  },\n  template: `\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  `,\n  methods: {\n    handleScaleChange: action(\'scale-change\'),\n    handleScaleInput: action(\'scale-input\')\n  }\n})'}};var platformIOs=function platformIOs(){return{template:'\n        <scale-slider label="iOS" value="25" platform="ios"></scale-slider>\n      '}};platformIOs.storyName="Platform iOS",platformIOs.parameters={storySource:{source:'{\n  template: `\n        <scale-slider label="iOS" value="25" platform="ios"></scale-slider>\n      `\n}'}};var platformAndroid=function platformAndroid(){return{template:'\n        <scale-slider label="Android" value="75" platform="android"></scale-slider>\n      '}};platformAndroid.storyName="Platform Android",platformAndroid.parameters={storySource:{source:'{\n  template: `\n        <scale-slider label="Android" value="75" platform="android"></scale-slider>\n      `\n}'}};var componentMeta={title:"Components/Slider",component:ScaleSlider,argTypes:{platform:{control:{type:"text"}},styles:{control:{disable:!0}}},includeStories:["standard","range","stepMarks","helperText","disabled","platformIOs","platformAndroid"]},mdxStoryNameToKey={Standard:"standard",Range:"range","Step Marks":"stepMarks","Helper Text":"helperText",Disabled:"disabled","Platform iOS":"platformIOs","Platform Android":"platformAndroid"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/switch/switch.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return switch_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"small",(function(){return small})),__webpack_require__.d(__webpack_exports__,"standardDisabled",(function(){return standardDisabled})),__webpack_require__.d(__webpack_exports__,"selected",(function(){return selected})),__webpack_require__.d(__webpack_exports__,"selectedDisabled",(function(){return selectedDisabled})),__webpack_require__.d(__webpack_exports__,"android",(function(){return switch_stories_android})),__webpack_require__.d(__webpack_exports__,"androidDisabled",(function(){return switch_stories_androidDisabled})),__webpack_require__.d(__webpack_exports__,"androidSelected",(function(){return switch_stories_androidSelected})),__webpack_require__.d(__webpack_exports__,"androidSelectedDisabled",(function(){return switch_stories_androidSelectedDisabled}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),switch_ScaleSwitchvue_type_script_lang_js_={props:{disabled:{type:Boolean,default:!1},inputId:{type:String},checked:{type:Boolean,default:!1},label:String,size:String,name:String},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(switch_ScaleSwitchvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-switch",{staticStyle:{"--color-on":"blue"},attrs:{name:this.name,label:this.label,disabled:this.disabled,"input-id":this.inputId,checked:this.checked,size:this.size},on:{scaleChange:this.scaleChange}})}),[],!1,null,null,null).exports;var ScaleSwitch=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleSwitch",description:"",tags:{},props:[{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"inputId",type:{name:"string"}},{name:"checked",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"label",type:{name:"string"}},{name:"size",type:{name:"string"}},{name:"name",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}]};var switch_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleSwitch:ScaleSwitch},props:ScaleSwitch.props,template:'\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  ',methods:{scaleChange:Object(addon_actions_dist_esm.action)("scaleChange")}}},layoutProps={Template:switch_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Switch",component:ScaleSwitch,mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Switch"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Standard"},mdxType:"Story"},switch_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 42px;\n  --height: 24px;\n  --offset: 2px;\n  --radius: 1em;\n  --transition-duration: var(--telekom-motion-duration-immediate);\n  --transition-easing: var(--telekom-motion-easing-standard);\n  --shadow-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24),\n    0 4px 12px 0 rgba(0, 0, 0, 0.26);\n  --spacing-x-label: var(--telekom-spacing-composition-space-04);\n  --font-label: var(--telekom-text-style-ui);\n  --font-io-text: var(--telekom-text-style-small-bold);\n  --color-label: var(--telekom-color-text-and-icon-standard);\n}\n")),Object(esm.b)("h2",{id:"small"},"Small"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small",args:{label:"Small",size:"small"},mdxType:"Story"},switch_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-switch size="small" label="Standard disabled"></scale-switch>\n')),Object(esm.b)("h2",{id:"standard-disabled"},"Standard disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard disabled",args:{disabled:!0,label:"Standard disabled"},mdxType:"Story"},switch_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-switch disabled label="Standard disabled"></scale-switch>\n')),Object(esm.b)("h2",{id:"selected"},"Selected"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Selected",args:{checked:!0,label:"Selected"},mdxType:"Story"},switch_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-switch checked label="Selected"></scale-switch>\n')),Object(esm.b)("h2",{id:"selected-disabled"},"Selected disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Selected disabled",args:{disabled:!0,checked:!0,label:"Selected disabled"},mdxType:"Story"},switch_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-switch disabled checked label="Selected disabled"></scale-switch>\n')),Object(esm.b)("h2",{id:"android"},"Android"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Android",mdxType:"Story"},{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div data-platform="android">\n  <scale-switch label="Platform Android"></scale-switch>\n</div>\n')),Object(esm.b)("h2",{id:"android-disabled"},"Android Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Android Disabled",mdxType:"Story"},{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div data-platform="android">\n  <scale-switch disabled label="Platform Android"></scale-switch>\n</div>\n')),Object(esm.b)("h2",{id:"android-selected"},"Android Selected"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Android Selected",mdxType:"Story"},{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div data-platform="android">\n  <scale-switch checked label="Platform Android"></scale-switch>\n</div>\n')),Object(esm.b)("h2",{id:"android-selected-disabled"},"Android Selected Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Android Selected Disabled",mdxType:"Story"},{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div data-platform="android">\n  <scale-switch disabled checked label="Platform Android"></scale-switch>\n</div>\n')))}MDXContent.isMDXComponent=!0;var standard=switch_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Standard"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSwitch\n  },\n  props: ScaleSwitch.props,\n  template: `\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\')\n  }\n})'}};var small=switch_stories_Template.bind({});small.storyName="Small",small.args={label:"Small",size:"small"},small.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSwitch\n  },\n  props: ScaleSwitch.props,\n  template: `\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\')\n  }\n})'}};var standardDisabled=switch_stories_Template.bind({});standardDisabled.storyName="Standard disabled",standardDisabled.args={disabled:!0,label:"Standard disabled"},standardDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSwitch\n  },\n  props: ScaleSwitch.props,\n  template: `\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\')\n  }\n})'}};var selected=switch_stories_Template.bind({});selected.storyName="Selected",selected.args={checked:!0,label:"Selected"},selected.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSwitch\n  },\n  props: ScaleSwitch.props,\n  template: `\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\')\n  }\n})'}};var selectedDisabled=switch_stories_Template.bind({});selectedDisabled.storyName="Selected disabled",selectedDisabled.args={disabled:!0,checked:!0,label:"Selected disabled"},selectedDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSwitch\n  },\n  props: ScaleSwitch.props,\n  template: `\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\')\n  }\n})'}};var switch_stories_android=function android(){return{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}}};switch_stories_android.storyName="Android",switch_stories_android.parameters={storySource:{source:'{\n  template: `\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      `,\n  methods: {\n    emitChange: action(\'scale-change\')\n  }\n}'}};var switch_stories_androidDisabled=function androidDisabled(){return{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}}};switch_stories_androidDisabled.storyName="Android Disabled",switch_stories_androidDisabled.parameters={storySource:{source:'{\n  template: `\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      `,\n  methods: {\n    emitChange: action(\'scale-change\')\n  }\n}'}};var switch_stories_androidSelected=function androidSelected(){return{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}}};switch_stories_androidSelected.storyName="Android Selected",switch_stories_androidSelected.parameters={storySource:{source:'{\n  template: `\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      `,\n  methods: {\n    emitChange: action(\'scale-change\')\n  }\n}'}};var switch_stories_androidSelectedDisabled=function androidSelectedDisabled(){return{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}}};switch_stories_androidSelectedDisabled.storyName="Android Selected Disabled",switch_stories_androidSelectedDisabled.parameters={storySource:{source:'{\n  template: `\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      `,\n  methods: {\n    emitChange: action(\'scale-change\')\n  }\n}'}};var componentMeta={title:"Components/Switch",component:ScaleSwitch,includeStories:["standard","small","standardDisabled","selected","selectedDisabled","android","androidDisabled","androidSelected","androidSelectedDisabled"]},mdxStoryNameToKey={Standard:"standard",Small:"small","Standard disabled":"standardDisabled",Selected:"selected","Selected disabled":"selectedDisabled",Android:"android","Android Disabled":"androidDisabled","Android Selected":"androidSelected","Android Selected Disabled":"androidSelectedDisabled"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleTabNav_vue_vue_type_style_index_0_id_1349bb3e_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleTabNav_vue_vue_type_style_index_0_id_1349bb3e_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/tab-navigation/TabNav.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return TabNav_stories_Template})),__webpack_require__.d(__webpack_exports__,"textIcon",(function(){return textIcon})),__webpack_require__.d(__webpack_exports__,"textOnly",(function(){return textOnly})),__webpack_require__.d(__webpack_exports__,"disabledTabs",(function(){return disabledTabs})),__webpack_require__.d(__webpack_exports__,"largeTextIcon",(function(){return largeTextIcon})),__webpack_require__.d(__webpack_exports__,"largeTextOnly",(function(){return largeTextOnly}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),tab_navigation_ScaleTabNavvue_type_script_lang_js_={props:{styles:{type:String},disabled:{type:Boolean,default:!1},withIcon:{type:Boolean,default:!0},size:{type:String,default:"small"}}},componentNormalizer=(__webpack_require__("./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&"),__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"));const __vuedocgen_export_0=Object(componentNormalizer.a)(tab_navigation_ScaleTabNavvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-tab-nav",{attrs:{size:_vm.size}},[_c("scale-tab-header",{attrs:{slot:"tab",disabled:!!_vm.disabled},slot:"tab"},[_vm.withIcon?_c("scale-icon-home-home"):_vm._e(),_vm._v(" General\n  ")],1),_vm._v(" "),_c("scale-tab-panel",{attrs:{slot:"panel"},slot:"panel"},[_c("p",{staticClass:"scl-font-variant-body"},[_vm._v("\n      Freegan kinfolk farm-to-table humblebrag cred, hammock bespoke small\n      batch pabst. 90's tumblr whatever direct trade, organic master cleanse\n      copper mug schlitz palo santo bushwick ethical pop-up chambray portland.\n      Sartorial austin iceland street art, pug asymmetrical marfa mustache\n      mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck\n      everyday carry 3 wolf moon.\n    ")])]),_vm._v(" "),_c("scale-tab-header",{attrs:{slot:"tab"},slot:"tab"},[_vm.withIcon?_c("scale-icon-user-file-analytics"):_vm._e(),_vm._v(" Usage\n  ")],1),_vm._v(" "),_c("scale-tab-panel",{attrs:{slot:"panel"},slot:"panel"},[_c("p",{staticClass:"scl-font-variant-body"},[_vm._v("\n      Bespoke austin pork belly yuccie pop-up. Before they sold out YOLO\n      kickstarter scenester meggings echo park aesthetic. Thundercats\n      post-ironic wayfarers microdosing etsy hashtag seitan photo booth\n      bitters.\n    ")])]),_vm._v(" "),_c("scale-tab-header",{attrs:{slot:"tab"},slot:"tab"},[_vm.withIcon?_c("scale-icon-content-heart"):_vm._e(),_vm._v(" Style\n  ")],1),_vm._v(" "),_c("scale-tab-panel",{attrs:{slot:"panel"},slot:"panel"},[_c("p",{staticClass:"scl-font-variant-body"},[_vm._v("\n      Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe\n      helvetica brunch godard cray viral prism. Street art tattooed bitters,\n      ugh four loko selfies you probably haven't heard of them locavore\n      bushwick. Tattooed 90's kinfolk, banh mi umami banjo palo santo cliche.\n      Cray wolf godard skateboard celiac taxidermy tacos offal.\n    ")])]),_vm._v(" "),_c("scale-tab-header",{attrs:{slot:"tab"},slot:"tab"},[_vm.withIcon?_c("scale-icon-action-random"):_vm._e(),_vm._v(" Code\n  ")],1),_vm._v(" "),_c("scale-tab-panel",{attrs:{slot:"panel"},slot:"panel"},[_c("p",{staticClass:"scl-font-variant-body"},[_vm._v("\n      Asymmetrical tattooed chia, banh mi blog microdosing edison bulb\n      meditation readymade drinking vinegar brunch irony. Whatever humblebrag\n      3 wolf moon kinfolk selvage. Listicle mumblecore forage paleo.\n      Asymmetrical hella crucifix ethical.\n    ")])])],1)}),[],!1,null,"1349bb3e",null).exports;var ScaleTabNav=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTabNav",description:"",tags:{},props:[{name:"styles",type:{name:"string"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"withIcon",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'small'"}}]};var tab_navigation_TabPanelvue_type_script_lang_js_={name:"Tab Panel",props:{styles:{type:String},tabbable:{type:Boolean,default:"true",argTypes:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}}}}};const TabPanel_vuedocgen_export_0=Object(componentNormalizer.a)(tab_navigation_TabPanelvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var TabPanel=TabPanel_vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}TabPanel_vuedocgen_export_0.__docgenInfo={displayName:"Tab Panel",exportName:"default",description:"",tags:{},props:[{name:"styles",type:{name:"string"}},{name:"tabbable",type:{name:"boolean"},defaultValue:{func:!1,value:"'true'"}}]};var TabNav_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleTabNav:ScaleTabNav},props:ScaleTabNav.props,template:'\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  '}},layoutProps={Template:TabNav_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Tab Navigation",component:ScaleTabNav,subcomponents:{"Scale Tab Panel":TabPanel},argTypes:{styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},size:{table:{type:{summary:"string"}},description:"(optional) size",control:{type:"select",options:["large","small"]}},small:{table:{type:{summary:"Boolean"}},description:"(optional) DEPRECATED - size should replace small",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Tab Navigation"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"text--icon"},"Text & Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Text & Icon",args:{size:"small"},mdxType:"Story"},TabNav_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Text & Icon",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tab-nav>\n  <scale-tab-header slot="tab">\n    <scale-icon-home-home></scale-icon-home-home> General\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Freegan kinfolk farm-to-table humblebrag cred…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-user-file-analytics></scale-icon-user-file-analytics> Usage\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Bespoke austin pork belly yuccie pop-up. Before they sold out…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-content-heart></scale-icon-content-heart> Style\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Biodiesel chia af hoodie tumeric bespoke letterpress…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-action-random></scale-icon-action-random> Code\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Asymmetrical tattooed chia, banh mi blog microdosing…\n  </scale-tab-panel>\n</scale-tab-nav>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --tab-height: 3rem;\n  --tab-spacing-horizontal: var(--telekom-spacing-composition-space-05);\n  --tab-spacing-vertical: var(--telekom-spacing-composition-space-06);\n  --tab-radius: var(--telekom-radius-small);\n  --tab-border-size: var(--telekom-line-weight-standard);\n  --tab-border-size-selected: var(--telekom-line-weight-highlight);\n  --tab-border-size-selected: 3px;\n\n  --tab-border-color: var(--telekom-color-ui-subtle);\n\n  --tab-height-large: 3.25rem;\n\n  --tab-spacing-horizontal-large: var(--telekom-spacing-composition-space-06);\n  --tab-spacing-vertical-large: 0.875rem;\n}\n\n/* tab-header */\n:host {\n  --font: var(--telekom-text-style-ui-bold);\n  --color: var(--telekom-color-text-and-icon-standard);\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --color-selected: var(--telekom-color-text-and-icon-primary-standard);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --spacing-right-slotted: var(--telekom-spacing-composition-space-04);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --radius: var(--telekom-radius-standard);\n  --font-size-large: var(--telekom-typography-font-size-callout);\n}\n\n/* tab-panel */\n:host {\n  --spacing-top: var(--telekom-spacing-composition-space-08);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"text-only"},"Text Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Text Only",args:{withIcon:!1,size:"small"},mdxType:"Story"},TabNav_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tab-nav>\n  <scale-tab-header slot="tab">General</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Freegan kinfolk farm-to-table humblebrag cred…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Usage</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Bespoke austin pork belly yuccie pop-up. Before they sold out…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Style</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Biodiesel chia af hoodie tumeric bespoke letterpress…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Code</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Asymmetrical tattooed chia, banh mi blog microdosing…\n  </scale-tab-panel>\n</scale-tab-nav>\n')),Object(esm.b)("h2",{id:"disabled-tabs"},"Disabled Tabs"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled Tabs",args:{disabled:!0,withIcon:!1,size:"small"},mdxType:"Story"},TabNav_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tab-nav>\n  <scale-tab-header disabled slot="tab">General</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Freegan kinfolk farm-to-table humblebrag cred…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Usage</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Bespoke austin pork belly yuccie pop-up. Before they sold out…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Style</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Biodiesel chia af hoodie tumeric bespoke letterpress…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Code</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Asymmetrical tattooed chia, banh mi blog microdosing…\n  </scale-tab-panel>\n</scale-tab-nav>\n')),Object(esm.b)("h2",{id:"large-text--icon"},"Large, Text & Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large, Text & Icon",args:{size:"large"},mdxType:"Story"},TabNav_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tab-nav size="large">\n  <scale-tab-header slot="tab">\n    <scale-icon-home-home></scale-icon-home-home> General\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Freegan kinfolk farm-to-table humblebrag cred…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-user-file-analytics></scale-icon-user-file-analytics> Usage\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Bespoke austin pork belly yuccie pop-up. Before they sold out…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-content-heart></scale-icon-content-heart> Style\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Biodiesel chia af hoodie tumeric bespoke letterpress…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-action-random></scale-icon-action-random> Code\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Asymmetrical tattooed chia, banh mi blog microdosing…\n  </scale-tab-panel>\n</scale-tab-nav>\n')),Object(esm.b)("h2",{id:"large-text-only"},"Large, Text Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large, Text Only",args:{size:"large",withIcon:!1},mdxType:"Story"},TabNav_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tab-nav size="large">\n  <scale-tab-header slot="tab">General</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Freegan kinfolk farm-to-table humblebrag cred…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Usage</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Bespoke austin pork belly yuccie pop-up. Before they sold out…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Style</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Biodiesel chia af hoodie tumeric bespoke letterpress…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Code</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Asymmetrical tattooed chia, banh mi blog microdosing…\n  </scale-tab-panel>\n</scale-tab-nav>\n')))}MDXContent.isMDXComponent=!0;var textIcon=TabNav_stories_Template.bind({});textIcon.storyName="Text & Icon",textIcon.args={size:"small"},textIcon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTabNav\n  },\n  props: ScaleTabNav.props,\n  template: `\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  `\n})'}};var textOnly=TabNav_stories_Template.bind({});textOnly.storyName="Text Only",textOnly.args={withIcon:!1,size:"small"},textOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTabNav\n  },\n  props: ScaleTabNav.props,\n  template: `\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  `\n})'}};var disabledTabs=TabNav_stories_Template.bind({});disabledTabs.storyName="Disabled Tabs",disabledTabs.args={disabled:!0,withIcon:!1,size:"small"},disabledTabs.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTabNav\n  },\n  props: ScaleTabNav.props,\n  template: `\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  `\n})'}};var largeTextIcon=TabNav_stories_Template.bind({});largeTextIcon.storyName="Large, Text & Icon",largeTextIcon.args={size:"large"},largeTextIcon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTabNav\n  },\n  props: ScaleTabNav.props,\n  template: `\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  `\n})'}};var largeTextOnly=TabNav_stories_Template.bind({});largeTextOnly.storyName="Large, Text Only",largeTextOnly.args={size:"large",withIcon:!1},largeTextOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTabNav\n  },\n  props: ScaleTabNav.props,\n  template: `\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  `\n})'}};var componentMeta={title:"Components/Tab Navigation",component:ScaleTabNav,subcomponents:{"Scale Tab Panel":TabPanel},argTypes:{styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},size:{table:{type:{summary:"string"}},description:"(optional) size",control:{type:"select",options:["large","small"]}},small:{table:{type:{summary:"Boolean"}},description:"(optional) DEPRECATED - size should replace small",control:{type:null}}},includeStories:["textIcon","textOnly","disabledTabs","largeTextIcon","largeTextOnly"]},mdxStoryNameToKey={"Text & Icon":"textIcon","Text Only":"textOnly","Disabled Tabs":"disabledTabs","Large, Text & Icon":"largeTextIcon","Large, Text Only":"largeTextOnly"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/table/Table.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ICON",(function(){return ICON})),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Table_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"withSortingIcons",(function(){return withSortingIcons})),__webpack_require__.d(__webpack_exports__,"withStripedRows",(function(){return withStripedRows}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find-index.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),table_ScaleTablevue_type_script_lang_js_={props:{showSort:Boolean,size:String,striped:Boolean}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(table_ScaleTablevue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-table",{attrs:{"show-sort":this.showSort,size:this.size,striped:!!this.striped}},[this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleTable=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTable",description:"",tags:{},props:[{name:"showSort",type:{name:"boolean"}},{name:"size",type:{name:"string"}},{name:"striped",type:{name:"boolean"}}],slots:[{name:"default"}]};var ICON="M16.471,8.321 L12.613594,0.502886112 L8.755,8.321 L0.126435258,9.57533801 L6.37,15.66 L4.89610548,24.2548735 L12.613,20.197 L20.3310826,24.2548735 L18.856,15.66 L25.1007528,9.57533801 L16.471,8.321 Z M9.41891527,9.23556376 L12.613,2.761 L15.8082728,9.23556376 L22.951,10.273 L17.7826928,15.3122039 L19.003,22.427 L12.613594,19.067774 L6.223,22.427 L7.44449521,15.3122039 L2.275,10.273 L9.41891527,9.23556376 Z",Table_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleTable:ScaleTable},props:Object.assign({label:String},ScaleTable.props),template:'\n    <scale-table\n      :show-sort="showSort"\n      :striped="striped ? true : false"\n    >\n      <table id="sortable-table">\n        <caption class="sr-only">All sortable columns are focusable</caption>\n        <thead>\n          <tr>\n            <th scope="col" width="13%" title="sortable" :tabindex="showSort ? 0 : -1" aria-sort="descending" @click="showSort && sortTable(\'title\')" @keyup="showSort && handleKeyUp($event, \'title\')" class="title">Title</th>\n            <th scope="col" width="28%" aria-disabled="true" class="tags">Tags</th>\n            <th scope="col" width="23%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'stats\')" @keyup="showSort && handleKeyUp($event, \'stats\')" class="stats">Stats</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'time\')" @keyup="showSort && handleKeyUp($event, \'time\')" class="time" style="text-align: right;">Time</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'euros\')" @keyup="showSort && handleKeyUp($event, \'euros\')" class="euros" style="text-align: right;">\n              Euros\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Jane</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" style="margin-right: 8px;" type="strong"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">9.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="90"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:20</td>\n            <td style="text-align: right; font-weight: 200;">100.245,10</td>\n          </tr>\n          <tr>\n            <td>Jack</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">3.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="30"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:30</td>\n            <td style="text-align: right; font-weight: 200;">100.345,10</td>\n          </tr>\n          <tr>\n            <td>John</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">6.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="60"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:40</td>\n            <td style="text-align: right; font-weight: 200;">100.445,10</td>\n          </tr>\n        </tbody>\n        <tfoot>\n          <tr>\n            <td>Total</td>\n            <td />\n            <td />\n            <td style="text-align: right;">00:00:20</td>\n            <td style="text-align: right;">100.245,10</td>\n          </tr>\n        </tfoot>\n      </table>\n    </scale-table>\n  ',methods:{handleKeyUp:function handleKeyUp(e,th){["Space","Enter"].includes(e.code)&&this.sortTable(th)},sortTable:function sortTable(className){var table,rows,switching,i,x,y,shouldSwitch,ths=document.getElementsByClassName(className),th=Array.from(ths).filter((function(x){return"0"===x.getAttribute("tabindex")}))[0],nextSort=function getNextSort(sort){return"ascending"===sort?"descending":"ascending"}(th.getAttribute("aria-sort")),tableHeaders=Array.from(document.getElementsByTagName("TH")),columnIndex=tableHeaders.findIndex((function(x){return x===th}));tableHeaders.forEach((function(tableHeader){tableHeader.setAttribute("aria-sort","none")})),th.setAttribute("aria-sort",nextSort),table=document.getElementById("sortable-table"),switching=!0;try{for(;switching;){for(switching=!1,rows=table.rows,i=1;i<rows.length-1&&(shouldSwitch=!1,x=rows[i].getElementsByTagName("TD")[columnIndex],y=rows[i+1].getElementsByTagName("TD")[columnIndex],["ascending","descending"].includes(nextSort)&&"TFOOT"!==x.parentElement.parentElement.tagName&&"TFOOT"!==y.parentElement.parentElement.tagName);i++)if(("descending"===nextSort?y:x).innerHTML.toLowerCase()>("descending"===nextSort?x:y).innerHTML.toLowerCase()){shouldSwitch=!0;break}shouldSwitch&&(rows[i].parentNode.insertBefore(rows[i+1],rows[i]),switching=!0)}}catch(error){}}}}},layoutProps={ICON:ICON,Template:Table_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Table",component:ScaleTable,argTypes:{size:{table:{type:"select"},description:"(optional) DEPRECATED - size should replace small",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Table"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},Table_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-table {\n  --radius: var(--telekom-radius-standard) var(--telekom-radius-standard) 0 0;\n  --background: var(--telekom-color-ui-state-fill-standard);\n  --color: var(--telekom-color-text-and-icon-standard);\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --font-size: var(--telekom-typography-font-size-small);\n  --font-weight: var(--telekom-typography-font-weight-bold);\n\n  --spacing-tbody-td: var(--telekom-spacing-composition-space-06)\n    var(--telekom-spacing-composition-space-04);\n  --border-bottom-tbody-td: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-faint);\n  --background-tbody: var(--telekom-color-ui-state-fill-standard);\n  --background-tbody-tr-hover: var(--telekom-color-ui-state-fill-hovered);\n  --background-tfoot: var(--telekom-color-ui-state-fill-standard);\n  --border-bottom-tfoot-td: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-extra-strong);\n\n  --spacing-th-sortable: 0 var(--telekom-spacing-composition-space-04) 0 0;\n  --background-th-sortable-hover: var(--telekom-color-ui-subtle);\n  --background-th-sortable-active: var(--telekom-color-ui-faint);\n  --box-shadow-th-sortable-focus: inset 0 0 0\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-color-functional-focus-standard);\n  --background-tr-striped: var(--telekom-color-ui-subtle);\n  --padding: var(--telekom-spacing-composition-space-00)\n    var(--telekom-spacing-composition-space-04);\n}\n")),Object(esm.b)("h2",{id:"with-sorting-icons"},"With Sorting Icons"),Object(esm.b)("p",null,"Please switch to the Canvas view for a working example"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Sorting Icons",args:{showSort:!0},mdxType:"Story"},Table_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-table show-sort>\n  <table>\n    <caption>\n      Table title\n    </caption>\n    <thead>\n      <tr>\n        \x3c!-- aria-sort can be descending or ascending --\x3e\n        <th\n          tabindex="0"\n          aria-sort="descending"\n          onkeyup="handleKeyUp(event, \'title\')"\n          onclick="sortTable(\'title\')"\n          id="title"\n        >\n          Title\n        </th>\n        \x3c!-- aria-disabled="true" disables sorting --\x3e\n        <th aria-disabled="true">Tags</th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'stats\')"\n          onclick="sortTable(\'stats\')"\n          id="stats"\n        >\n          Stats\n        </th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'time\')"\n          onclick="sortTable(\'time\')"\n          id="time"\n        >\n          Time\n        </th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'euros\')"\n          onclick="sortTable(\'euros\')"\n          id="euros"\n        >\n          Euros\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      ...\n    </tbody>\n    <tfoot>\n      <tr>\n        <td>Total</td>\n        <td></td>\n        <td></td>\n        <td>00:00:20</td>\n        <td>100.245,10</td>\n      </tr>\n    </tfoot>\n  </table>\n</scale-table>\n\n<script>\n  function handleKeyUp(event, id) {\n    /* ... */\n  }\n  function sortTable(id) {\n    /* ... */\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"with-striped-rows"},"With Striped Rows"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Striped Rows",args:{striped:!0},mdxType:"Story"},Table_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-table striped>\n  <table>\n    <caption>\n      Table title\n    </caption>\n    <thead>\n      <tr>\n        \x3c!-- aria-sort can be descending or ascending --\x3e\n        <th\n          tabindex="0"\n          aria-sort="descending"\n          onkeyup="handleKeyUp(event, \'title\')"\n          onclick="sortTable(\'title\')"\n          id="title"\n        >\n          Title\n        </th>\n        \x3c!-- aria-disabled="true" disables sorting --\x3e\n        <th aria-disabled="true">Tags</th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'stats\')"\n          onclick="sortTable(\'stats\')"\n          id="stats"\n        >\n          Stats\n        </th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'time\')"\n          onclick="sortTable(\'time\')"\n          id="time"\n        >\n          Time\n        </th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'euros\')"\n          onclick="sortTable(\'euros\')"\n          id="euros"\n        >\n          Euros\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      ...\n    </tbody>\n    <tfoot>\n      <tr>\n        <td>Total</td>\n        <td></td>\n        <td></td>\n        <td>00:00:20</td>\n        <td>100.245,10</td>\n      </tr>\n    </tfoot>\n  </table>\n</scale-table>\n')))}MDXContent.isMDXComponent=!0;var standard=Table_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTable\n  },\n  props: {\n    label: String,\n    ...ScaleTable.props\n  },\n  template: `\n    <scale-table\n      :show-sort="showSort"\n      :striped="striped ? true : false"\n    >\n      <table id="sortable-table">\n        <caption class="sr-only">All sortable columns are focusable</caption>\n        <thead>\n          <tr>\n            <th scope="col" width="13%" title="sortable" :tabindex="showSort ? 0 : -1" aria-sort="descending" @click="showSort && sortTable(\'title\')" @keyup="showSort && handleKeyUp($event, \'title\')" class="title">Title</th>\n            <th scope="col" width="28%" aria-disabled="true" class="tags">Tags</th>\n            <th scope="col" width="23%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'stats\')" @keyup="showSort && handleKeyUp($event, \'stats\')" class="stats">Stats</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'time\')" @keyup="showSort && handleKeyUp($event, \'time\')" class="time" style="text-align: right;">Time</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'euros\')" @keyup="showSort && handleKeyUp($event, \'euros\')" class="euros" style="text-align: right;">\n              Euros\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Jane</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" style="margin-right: 8px;" type="strong"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">9.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="90"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:20</td>\n            <td style="text-align: right; font-weight: 200;">100.245,10</td>\n          </tr>\n          <tr>\n            <td>Jack</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">3.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="30"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:30</td>\n            <td style="text-align: right; font-weight: 200;">100.345,10</td>\n          </tr>\n          <tr>\n            <td>John</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">6.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="60"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:40</td>\n            <td style="text-align: right; font-weight: 200;">100.445,10</td>\n          </tr>\n        </tbody>\n        <tfoot>\n          <tr>\n            <td>Total</td>\n            <td />\n            <td />\n            <td style="text-align: right;">00:00:20</td>\n            <td style="text-align: right;">100.245,10</td>\n          </tr>\n        </tfoot>\n      </table>\n    </scale-table>\n  `,\n  methods: {\n    handleKeyUp: function (e, th) {\n      if ([\'Space\', \'Enter\'].includes(e.code)) {\n        this.sortTable(th);\n      }\n    },\n    sortTable: function (className) {\n      const getNextSort = sort => {\n        if (sort === \'ascending\') {\n          return \'descending\';\n        }\n\n        return \'ascending\';\n      };\n\n      const ths = document.getElementsByClassName(className);\n      const th = Array.from(ths).filter(x => x.getAttribute(\'tabindex\') === \'0\')[0];\n      const currentSort = th.getAttribute(\'aria-sort\');\n      const nextSort = getNextSort(currentSort);\n      const tableHeaders = Array.from(document.getElementsByTagName(\'TH\'));\n      const columnIndex = tableHeaders.findIndex(x => x === th);\n      tableHeaders.forEach(tableHeader => {\n        tableHeader.setAttribute(\'aria-sort\', \'none\');\n      });\n      th.setAttribute(\'aria-sort\', nextSort);\n      var table, rows, switching, i, x, y, shouldSwitch;\n      table = document.getElementById(\'sortable-table\');\n      switching = true;\n\n      try {\n        while (switching) {\n          switching = false;\n          rows = table.rows;\n\n          for (i = 1; i < rows.length - 1; i++) {\n            shouldSwitch = false;\n            x = rows[i].getElementsByTagName(\'TD\')[columnIndex];\n            y = rows[i + 1].getElementsByTagName(\'TD\')[columnIndex];\n\n            if (![\'ascending\', \'descending\'].includes(nextSort) || x.parentElement.parentElement.tagName === \'TFOOT\' || y.parentElement.parentElement.tagName === \'TFOOT\') {\n              break;\n            }\n\n            if ((nextSort === \'descending\' ? y : x).innerHTML.toLowerCase() > (nextSort === \'descending\' ? x : y).innerHTML.toLowerCase()) {\n              shouldSwitch = true;\n              break;\n            }\n          }\n\n          if (shouldSwitch) {\n            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);\n            switching = true;\n          }\n        }\n      } catch (error) {}\n    }\n  }\n})'}};var withSortingIcons=Table_stories_Template.bind({});withSortingIcons.storyName="With Sorting Icons",withSortingIcons.args={showSort:!0},withSortingIcons.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTable\n  },\n  props: {\n    label: String,\n    ...ScaleTable.props\n  },\n  template: `\n    <scale-table\n      :show-sort="showSort"\n      :striped="striped ? true : false"\n    >\n      <table id="sortable-table">\n        <caption class="sr-only">All sortable columns are focusable</caption>\n        <thead>\n          <tr>\n            <th scope="col" width="13%" title="sortable" :tabindex="showSort ? 0 : -1" aria-sort="descending" @click="showSort && sortTable(\'title\')" @keyup="showSort && handleKeyUp($event, \'title\')" class="title">Title</th>\n            <th scope="col" width="28%" aria-disabled="true" class="tags">Tags</th>\n            <th scope="col" width="23%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'stats\')" @keyup="showSort && handleKeyUp($event, \'stats\')" class="stats">Stats</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'time\')" @keyup="showSort && handleKeyUp($event, \'time\')" class="time" style="text-align: right;">Time</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'euros\')" @keyup="showSort && handleKeyUp($event, \'euros\')" class="euros" style="text-align: right;">\n              Euros\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Jane</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" style="margin-right: 8px;" type="strong"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">9.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="90"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:20</td>\n            <td style="text-align: right; font-weight: 200;">100.245,10</td>\n          </tr>\n          <tr>\n            <td>Jack</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">3.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="30"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:30</td>\n            <td style="text-align: right; font-weight: 200;">100.345,10</td>\n          </tr>\n          <tr>\n            <td>John</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">6.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="60"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:40</td>\n            <td style="text-align: right; font-weight: 200;">100.445,10</td>\n          </tr>\n        </tbody>\n        <tfoot>\n          <tr>\n            <td>Total</td>\n            <td />\n            <td />\n            <td style="text-align: right;">00:00:20</td>\n            <td style="text-align: right;">100.245,10</td>\n          </tr>\n        </tfoot>\n      </table>\n    </scale-table>\n  `,\n  methods: {\n    handleKeyUp: function (e, th) {\n      if ([\'Space\', \'Enter\'].includes(e.code)) {\n        this.sortTable(th);\n      }\n    },\n    sortTable: function (className) {\n      const getNextSort = sort => {\n        if (sort === \'ascending\') {\n          return \'descending\';\n        }\n\n        return \'ascending\';\n      };\n\n      const ths = document.getElementsByClassName(className);\n      const th = Array.from(ths).filter(x => x.getAttribute(\'tabindex\') === \'0\')[0];\n      const currentSort = th.getAttribute(\'aria-sort\');\n      const nextSort = getNextSort(currentSort);\n      const tableHeaders = Array.from(document.getElementsByTagName(\'TH\'));\n      const columnIndex = tableHeaders.findIndex(x => x === th);\n      tableHeaders.forEach(tableHeader => {\n        tableHeader.setAttribute(\'aria-sort\', \'none\');\n      });\n      th.setAttribute(\'aria-sort\', nextSort);\n      var table, rows, switching, i, x, y, shouldSwitch;\n      table = document.getElementById(\'sortable-table\');\n      switching = true;\n\n      try {\n        while (switching) {\n          switching = false;\n          rows = table.rows;\n\n          for (i = 1; i < rows.length - 1; i++) {\n            shouldSwitch = false;\n            x = rows[i].getElementsByTagName(\'TD\')[columnIndex];\n            y = rows[i + 1].getElementsByTagName(\'TD\')[columnIndex];\n\n            if (![\'ascending\', \'descending\'].includes(nextSort) || x.parentElement.parentElement.tagName === \'TFOOT\' || y.parentElement.parentElement.tagName === \'TFOOT\') {\n              break;\n            }\n\n            if ((nextSort === \'descending\' ? y : x).innerHTML.toLowerCase() > (nextSort === \'descending\' ? x : y).innerHTML.toLowerCase()) {\n              shouldSwitch = true;\n              break;\n            }\n          }\n\n          if (shouldSwitch) {\n            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);\n            switching = true;\n          }\n        }\n      } catch (error) {}\n    }\n  }\n})'}};var withStripedRows=Table_stories_Template.bind({});withStripedRows.storyName="With Striped Rows",withStripedRows.args={striped:!0},withStripedRows.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTable\n  },\n  props: {\n    label: String,\n    ...ScaleTable.props\n  },\n  template: `\n    <scale-table\n      :show-sort="showSort"\n      :striped="striped ? true : false"\n    >\n      <table id="sortable-table">\n        <caption class="sr-only">All sortable columns are focusable</caption>\n        <thead>\n          <tr>\n            <th scope="col" width="13%" title="sortable" :tabindex="showSort ? 0 : -1" aria-sort="descending" @click="showSort && sortTable(\'title\')" @keyup="showSort && handleKeyUp($event, \'title\')" class="title">Title</th>\n            <th scope="col" width="28%" aria-disabled="true" class="tags">Tags</th>\n            <th scope="col" width="23%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'stats\')" @keyup="showSort && handleKeyUp($event, \'stats\')" class="stats">Stats</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'time\')" @keyup="showSort && handleKeyUp($event, \'time\')" class="time" style="text-align: right;">Time</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'euros\')" @keyup="showSort && handleKeyUp($event, \'euros\')" class="euros" style="text-align: right;">\n              Euros\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Jane</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" style="margin-right: 8px;" type="strong"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">9.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="90"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:20</td>\n            <td style="text-align: right; font-weight: 200;">100.245,10</td>\n          </tr>\n          <tr>\n            <td>Jack</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">3.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="30"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:30</td>\n            <td style="text-align: right; font-weight: 200;">100.345,10</td>\n          </tr>\n          <tr>\n            <td>John</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">6.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="60"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:40</td>\n            <td style="text-align: right; font-weight: 200;">100.445,10</td>\n          </tr>\n        </tbody>\n        <tfoot>\n          <tr>\n            <td>Total</td>\n            <td />\n            <td />\n            <td style="text-align: right;">00:00:20</td>\n            <td style="text-align: right;">100.245,10</td>\n          </tr>\n        </tfoot>\n      </table>\n    </scale-table>\n  `,\n  methods: {\n    handleKeyUp: function (e, th) {\n      if ([\'Space\', \'Enter\'].includes(e.code)) {\n        this.sortTable(th);\n      }\n    },\n    sortTable: function (className) {\n      const getNextSort = sort => {\n        if (sort === \'ascending\') {\n          return \'descending\';\n        }\n\n        return \'ascending\';\n      };\n\n      const ths = document.getElementsByClassName(className);\n      const th = Array.from(ths).filter(x => x.getAttribute(\'tabindex\') === \'0\')[0];\n      const currentSort = th.getAttribute(\'aria-sort\');\n      const nextSort = getNextSort(currentSort);\n      const tableHeaders = Array.from(document.getElementsByTagName(\'TH\'));\n      const columnIndex = tableHeaders.findIndex(x => x === th);\n      tableHeaders.forEach(tableHeader => {\n        tableHeader.setAttribute(\'aria-sort\', \'none\');\n      });\n      th.setAttribute(\'aria-sort\', nextSort);\n      var table, rows, switching, i, x, y, shouldSwitch;\n      table = document.getElementById(\'sortable-table\');\n      switching = true;\n\n      try {\n        while (switching) {\n          switching = false;\n          rows = table.rows;\n\n          for (i = 1; i < rows.length - 1; i++) {\n            shouldSwitch = false;\n            x = rows[i].getElementsByTagName(\'TD\')[columnIndex];\n            y = rows[i + 1].getElementsByTagName(\'TD\')[columnIndex];\n\n            if (![\'ascending\', \'descending\'].includes(nextSort) || x.parentElement.parentElement.tagName === \'TFOOT\' || y.parentElement.parentElement.tagName === \'TFOOT\') {\n              break;\n            }\n\n            if ((nextSort === \'descending\' ? y : x).innerHTML.toLowerCase() > (nextSort === \'descending\' ? x : y).innerHTML.toLowerCase()) {\n              shouldSwitch = true;\n              break;\n            }\n          }\n\n          if (shouldSwitch) {\n            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);\n            switching = true;\n          }\n        }\n      } catch (error) {}\n    }\n  }\n})'}};var componentMeta={title:"Components/Table",component:ScaleTable,argTypes:{size:{table:{type:"select"},description:"(optional) DEPRECATED - size should replace small",control:{type:null}}},includeStories:["standard","withSortingIcons","withStripedRows"]},mdxStoryNameToKey={Standard:"standard","With Sorting Icons":"withSortingIcons","With Striped Rows":"withStripedRows"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/tag/Tag.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Tag_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateInteractive",(function(){return Tag_stories_TemplateInteractive})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"dismissableTag",(function(){return dismissableTag})),__webpack_require__.d(__webpack_exports__,"smallTag",(function(){return smallTag})),__webpack_require__.d(__webpack_exports__,"smallDismissableTag",(function(){return smallDismissableTag})),__webpack_require__.d(__webpack_exports__,"disabledDismissableTag",(function(){return disabledDismissableTag})),__webpack_require__.d(__webpack_exports__,"colors",(function(){return colors})),__webpack_require__.d(__webpack_exports__,"colorStandardTag",(function(){return colorStandardTag})),__webpack_require__.d(__webpack_exports__,"colorStrongTag",(function(){return colorStrongTag}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),tag_ScaleTagvue_type_script_lang_js_={props:{disabled:{type:Boolean,default:!1},dismissable:{type:Boolean,default:!1},href:String,dismissText:String,size:String,target:{type:String,default:"_self"},color:{type:0,default:"standard"},type:{type:0,default:"standard"},styles:String},methods:{scaleClose:function scaleClose($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-close":function scaleClose($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(tag_ScaleTagvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleTag=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTag",description:"",tags:{},props:[{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"dismissable",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"href",type:{name:"string"}},{name:"dismissText",type:{name:"string"}},{name:"size",type:{name:"string"}},{name:"target",type:{name:"string"},defaultValue:{func:!1,value:"'_self'"}},{name:"color",type:{name:"'cyan' |\n'yellow' |\n'green' |\n'orange' |\n'red' |\n'violet' |\n'brown' |\n'olive' |\n'teal' |\n'standard'"},defaultValue:{func:!1,value:"'standard'"}},{name:"type",type:{name:"'strong' | 'standard'"},defaultValue:{func:!1,value:"'standard'"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}]};var Tag_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({label:String},ScaleTag.props),template:'\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  ',methods:{action:addon_actions_dist_esm.action}}},Tag_stories_TemplateInteractive=function TemplateInteractive(args,_ref2){_ref2.argTypes;return{template:'\n      <ul aria-label="colors" style="display: flex; list-style: none; padding: 0;">\n          <li v-for="color in colors" :key="color" style="margin-right: 4px;">\n            <scale-tag\n                dismissable="true"\n                type="strong"\n                v-bind:color=color\n                v-bind:dismiss-text="\'Remove \' + color + \' from the list\'"\n                @scaleClose="removeColor(color)"\n            >\n                {{color}}\n            </scale-tag>\n            <div style="height: 10px"/>\n             <scale-tag\n                dismissable="true"\n                type="standard"\n                v-bind:color=color\n                v-bind:dismiss-text="\'Remove \' + color + \' from the list\'"\n                @scaleClose="removeColor(color)"\n            >\n                {{color}}\n            </scale-tag>\n          </li>\n      </ul>\n  ',methods:{action:Object(addon_actions_dist_esm.action)("scaleClose"),removeColor:function removeColor(color){var _this=this;this.action(),this.colors=this.colors.filter((function(x){return x!==color})),setTimeout((function(){_this.$el.querySelector("#root > ul > li > scale-tag")&&_this.$el.querySelector("#root > ul > li > scale-tag").shadowRoot.querySelector("span > button").focus()}))}},data:function data(){return{colors:["standard","cyan","yellow","green","orange","red","violet","brown","olive","teal"]}}}},layoutProps={Template:Tag_stories_Template,TemplateInteractive:Tag_stories_TemplateInteractive};function MDXContent(_ref3){var components=_ref3.components,props=_objectWithoutProperties(_ref3,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Tag",component:ScaleTag,argTypes:{size:{control:{type:"select",options:["default","small"]}},label:{control:{type:"text"}},color:{control:{type:"select",options:["cyan","yellow","green","orange","red","violet","brown","olive","teal","standard"]}},type:{control:{type:"select",options:["strong","standard"]}},styles:{control:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Tag"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"A tag"},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --background: var(--telekom-color-ui-faint);\n  --color: var(--telekom-color-text-and-icon-standard);\n  --font: var(--telekom-text-style-caption-bold);\n  --radius: 2px;\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n\n  --icon-color: var(--telekom-color-text-and-icon-additional);\n  --icon-color-hover: var(--color);\n\n  --background-disabled: var(--telekom-color-ui-faint);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n\n  --spacing-dismissable: var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-03);\n  --spacing-dismissable-small: var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-03);\n\n  --height: 24px;\n  --height-small: 20px;\n\n  --border-button-dismissable-focus: 1px solid transparent;\n  --box-shadow-button-dismissable-focus: var(--box-shadow-focus);\n  --background-button-dismissable-hover: var(\n    --telekom-color-ui-state-fill-hovered\n  );\n  --background-button-standard-strong-dismissible-hover: var(\n    --telekom-color-ui-state-fill-hovered-inverted\n  );\n  --background-button-standard-dismissible-hover: var(\n    --telekom-color-ui-state-fill-hovered\n  );\n  --background-button-dismissable-active: var(\n    --telekom-color-ui-state-fill-pressed\n  );\n\n  --height-button-dismissable: 20px;\n  --width-button-dismissable: 20px;\n  --height-button-dismissable-small: 16px;\n  --width-button-dismissable-small: 16px;\n\n  --spacing-small: 0 var(--telekom-spacing-composition-space-04);\n  --font-size-small: var(--telekom-typography-font-size-small);\n  --line-height-small: var(--telekom-typography-line-spacing-loose);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"dismissable-tag"},"Dismissable tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dismissable tag",args:{label:"Dismissable tag",dismissable:!0},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-tag dismissable>A dismissable tag</scale-tag>\n")),Object(esm.b)("h2",{id:"small-tag"},"Small tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small tag",args:{label:"Small tag",size:"small"},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tag size="small">A small tag</scale-tag>\n')),Object(esm.b)("h2",{id:"small-dismissable-tag"},"Small dismissable tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small dismissable tag",args:{label:"Small dismissable tag",size:"small",dismissable:!0},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tag size="small" dismissable>A small dismissable tag</scale-tag>\n')),Object(esm.b)("h2",{id:"disabled-dismissable-tag"},"Disabled dismissable tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled dismissable tag",args:{label:"Disabled dismissable tag",disabled:!0,dismissable:!0},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-tag disabled dismissable>Disabled dismissable tag</scale-tag>\n")),Object(esm.b)("h2",{id:"colors"},"Colors"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Colors",mdxType:"Story"},Tag_stories_TemplateInteractive.bind({}))),Object(esm.b)("h2",{id:"color-standard-tag"},"Color standard tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Color standard tag",args:{label:"Color standard tag",color:"red"},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tag color="red" type="standard">Color tag</scale-tag>\n')),Object(esm.b)("h2",{id:"color-strong-tag"},"Color strong tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Color strong tag",args:{label:"Color strong tag",color:"red",type:"strong"},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tag color="red" type="strong">Color tag</scale-tag>\n')))}MDXContent.isMDXComponent=!0;var standard=Tag_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"A tag"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var dismissableTag=Tag_stories_Template.bind({});dismissableTag.storyName="Dismissable tag",dismissableTag.args={label:"Dismissable tag",dismissable:!0},dismissableTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var smallTag=Tag_stories_Template.bind({});smallTag.storyName="Small tag",smallTag.args={label:"Small tag",size:"small"},smallTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var smallDismissableTag=Tag_stories_Template.bind({});smallDismissableTag.storyName="Small dismissable tag",smallDismissableTag.args={label:"Small dismissable tag",size:"small",dismissable:!0},smallDismissableTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var disabledDismissableTag=Tag_stories_Template.bind({});disabledDismissableTag.storyName="Disabled dismissable tag",disabledDismissableTag.args={label:"Disabled dismissable tag",disabled:!0,dismissable:!0},disabledDismissableTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var colors=Tag_stories_TemplateInteractive.bind({});colors.storyName="Colors",colors.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  template: `\n      <ul aria-label=\"colors\" style=\"display: flex; list-style: none; padding: 0;\">\n          <li v-for=\"color in colors\" :key=\"color\" style=\"margin-right: 4px;\">\n            <scale-tag\n                dismissable=\"true\"\n                type=\"strong\"\n                v-bind:color=color\n                v-bind:dismiss-text=\"'Remove ' + color + ' from the list'\"\n                @scaleClose=\"removeColor(color)\"\n            >\n                {{color}}\n            </scale-tag>\n            <div style=\"height: 10px\"/>\n             <scale-tag\n                dismissable=\"true\"\n                type=\"standard\"\n                v-bind:color=color\n                v-bind:dismiss-text=\"'Remove ' + color + ' from the list'\"\n                @scaleClose=\"removeColor(color)\"\n            >\n                {{color}}\n            </scale-tag>\n          </li>\n      </ul>\n  `,\n  methods: {\n    action: action('scaleClose'),\n\n    removeColor(color) {\n      this.action();\n      this.colors = this.colors.filter(x => x !== color);\n      setTimeout(() => {\n        this.$el.querySelector('#root > ul > li > scale-tag') && this.$el.querySelector('#root > ul > li > scale-tag').shadowRoot.querySelector('span > button').focus();\n      });\n    }\n\n  },\n  data: () => ({\n    colors: ['standard', 'cyan', 'yellow', 'green', 'orange', 'red', 'violet', 'brown', 'olive', 'teal']\n  })\n})"}};var colorStandardTag=Tag_stories_Template.bind({});colorStandardTag.storyName="Color standard tag",colorStandardTag.args={label:"Color standard tag",color:"red"},colorStandardTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var colorStrongTag=Tag_stories_Template.bind({});colorStrongTag.storyName="Color strong tag",colorStrongTag.args={label:"Color strong tag",color:"red",type:"strong"},colorStrongTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var componentMeta={title:"Components/Tag",component:ScaleTag,argTypes:{size:{control:{type:"select",options:["default","small"]}},label:{control:{type:"text"}},color:{control:{type:"select",options:["cyan","yellow","green","orange","red","violet","brown","olive","teal","standard"]}},type:{control:{type:"select",options:["strong","standard"]}},styles:{control:{disable:!0}}},includeStories:["standard","dismissableTag","smallTag","smallDismissableTag","disabledDismissableTag","colors","colorStandardTag","colorStrongTag"]},mdxStoryNameToKey={Standard:"standard","Dismissable tag":"dismissableTag","Small tag":"smallTag","Small dismissable tag":"smallDismissableTag","Disabled dismissable tag":"disabledDismissableTag",Colors:"colors","Color standard tag":"colorStandardTag","Color strong tag":"colorStrongTag"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_SlotFunctions_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_SlotFunctions_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_SlotFunctionsSlim_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_SlotFunctionsSlim_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return TelekomBrandHeader_stories_Template})),__webpack_require__.d(__webpack_exports__,"standardHeader",(function(){return standardHeader})),__webpack_require__.d(__webpack_exports__,"applicationName",(function(){return applicationName})),__webpack_require__.d(__webpack_exports__,"megaMenu",(function(){return megaMenu})),__webpack_require__.d(__webpack_exports__,"slimHeader",(function(){return slimHeader})),__webpack_require__.d(__webpack_exports__,"subtleHeader",(function(){return subtleHeader})),__webpack_require__.d(__webpack_exports__,"dataApi",(function(){return TelekomBrandHeader_stories_dataApi}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),telekom_brand_header_navigation_TelekomHeadervue_type_script_lang_js_={props:{appName:String,appNameLink:String,appNameClick:Function,logoHref:String,logoTitle:String,logoHideTitle:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_TelekomHeadervue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-telekom-header",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink,"app-name-click":_vm.appNameClick,"logo-ref":_vm.logoHref,"logo-title":_vm.logoTitle,"logo-hide-title":_vm.logoHideTitle,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_vm._t("logo"),_vm._v(" "),_vm._t("meta-nav-external"),_vm._v(" "),_vm._t("meta-nav"),_vm._v(" "),_vm._t("lang-switcher"),_vm._v(" "),_vm._t("main-nav"),_vm._v(" "),_vm._t("functions")],2)}),[],!1,null,null,null).exports;var TelekomHeader=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"TelekomHeader",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"appNameClick",type:{name:"func"}},{name:"logoHref",type:{name:"string"}},{name:"logoTitle",type:{name:"string"}},{name:"logoHideTitle",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}],slots:[{name:"logo"},{name:"meta-nav-external"},{name:"meta-nav"},{name:"lang-switcher"},{name:"main-nav"},{name:"functions"}]};var telekom_brand_header_navigation_TelekomHeaderDataBackCompatvue_type_script_lang_js_={props:{appNameClick:Function,appNameTitle:String,appName:String,mainNavigation:String,iconNavigation:String,sectorNavigation:String,userNavigation:String,addonNavigation:String,activeRouteId:String}};const TelekomHeaderDataBackCompat_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_TelekomHeaderDataBackCompatvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-telekom-header-data-back-compat",{attrs:{"app-name-click":_vm.appNameClick,"app-name-title":_vm.appNameTitle,"app-name":_vm.appName,"main-navigation":_vm.mainNavigation,"icon-navigation":_vm.iconNavigation,"sector-navigation":_vm.sectorNavigation,"addon-navigation":_vm.addonNavigation,"user-navigation":_vm.userNavigation,"active-route-id":_vm.activeRouteId}},[_vm._t("meta-nav-ext"),_vm._v(" "),_vm._t("meta-nav"),_vm._v(" "),_vm._t("language-switch"),_vm._v(" "),_vm._t("main-nav"),_vm._v(" "),_vm._t("functions")],2)}),[],!1,null,null,null).exports;var TelekomHeaderDataBackCompat=TelekomHeaderDataBackCompat_vuedocgen_export_0;TelekomHeaderDataBackCompat_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"TelekomHeaderDataBackCompat",description:"",tags:{},props:[{name:"appNameClick",type:{name:"func"}},{name:"appNameTitle",type:{name:"string"}},{name:"appName",type:{name:"string"}},{name:"mainNavigation",type:{name:"string"}},{name:"iconNavigation",type:{name:"string"}},{name:"sectorNavigation",type:{name:"string"}},{name:"userNavigation",type:{name:"string"}},{name:"addonNavigation",type:{name:"string"}},{name:"activeRouteId",type:{name:"string"}}],slots:[{name:"meta-nav-ext"},{name:"meta-nav"},{name:"language-switch"},{name:"main-nav"},{name:"functions"}]};const SlotMetaNavExternal_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"meta-nav-external",variant:"meta-nav-external","aria-label":"External Navigation"},slot:"meta-nav-external"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"External navigation link"}},[_c("a",{attrs:{href:"#"}},[this._v("\n      Metalink external\n      "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Second external navigation link"}},[_c("a",{attrs:{href:"#"}},[this._v("\n      Metalink external\n      "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)])],1)}),[],!1,null,null,null).exports;var SlotMetaNavExternal=SlotMetaNavExternal_vuedocgen_export_0;SlotMetaNavExternal_vuedocgen_export_0.__docgenInfo={displayName:"SlotMetaNavExternal",description:"",tags:{}};const SlotMetaNav_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"meta-nav",variant:"meta-nav","aria-label":"Meta Navigation"},slot:"meta-nav"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"First internal navigation link"}},[_c("a",{attrs:{href:"#"}},[this._v("Metalink internal")])]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Second internal navigation link"}},[_c("a",{attrs:{href:"#"}},[this._v("Metalink internal")])])],1)}),[],!1,null,null,null).exports;var SlotMetaNav=SlotMetaNav_vuedocgen_export_0;SlotMetaNav_vuedocgen_export_0.__docgenInfo={displayName:"SlotMetaNav",description:"",tags:{}};const SlotMainNav_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"main-nav",variant:"main-nav","aria-label":"Main navigation links"},slot:"main-nav"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Topic One"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic One")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Two"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Two")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Three"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Three")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Four"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Four")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Five"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Five")])])],1)}),[],!1,null,null,null).exports;var SlotMainNav=SlotMainNav_vuedocgen_export_0;SlotMainNav_vuedocgen_export_0.__docgenInfo={displayName:"SlotMainNav",description:"",tags:{}};const SlotLangSwitcher_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"lang-switcher",variant:"lang-switcher",alignment:"right","aria-label":"Language switcher"},slot:"lang-switcher"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Switch to English"}},[_c("a",{attrs:{href:"#",title:"English"}},[this._v("EN")])]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to German"}},[_c("a",{attrs:{href:"#",title:"German"}},[this._v("DE")])]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to Hungarian"}},[_c("a",{attrs:{href:"#",title:"Hungarian"}},[this._v("HU")])])],1)}),[],!1,null,null,null).exports;var SlotLangSwitcher=SlotLangSwitcher_vuedocgen_export_0;SlotLangSwitcher_vuedocgen_export_0.__docgenInfo={displayName:"SlotLangSwitcher",description:"",tags:{}};var telekom_brand_header_navigation_SlotMobileFlyoutCanvasvue_type_script_lang_js_={props:{appName:String,appNameLink:String}};const SlotMobileFlyoutCanvas_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotMobileFlyoutCanvasvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-mobile-flyout-canvas",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}},[_c("scale-telekom-nav-list",{attrs:{slot:"mobile-before-main-nav",variant:"lang-switcher",alignment:"left","aria-label":"Language Switcher"},slot:"mobile-before-main-nav"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Switch to English"}},[_c("a",{attrs:{href:"#",title:"English"}},[_vm._v("EN")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to Hungarian"}},[_c("a",{attrs:{href:"#",title:"Hungarian"}},[_vm._v("HU")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to German"}},[_c("a",{attrs:{href:"#",title:"German"}},[_vm._v("DE")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu",{attrs:{slot:"mobile-main-nav"},slot:"mobile-main-nav"},[_c("scale-telekom-mobile-menu-item",{attrs:{active:""}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic One")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children",active:""},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1)],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Two")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1)],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Three")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Four")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Five")])])],1),_vm._v(" "),_c("scale-telekom-nav-list",{staticStyle:{"--flex-direction":"column"},attrs:{slot:"mobile-meta-nav-external",variant:"meta-nav-external",alignment:"left"},slot:"mobile-meta-nav-external"},[_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])])],1)],1)}),[],!1,null,null,null).exports;var SlotMobileFlyoutCanvas=SlotMobileFlyoutCanvas_vuedocgen_export_0;SlotMobileFlyoutCanvas_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotMobileFlyoutCanvas",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_SlotFunctionsvue_type_script_lang_js_={components:{SlotMobileFlyoutCanvas:SlotMobileFlyoutCanvas},props:{appName:String,appNameLink:String}};__webpack_require__("./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&");const SlotFunctions_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotFunctionsvue_type_script_lang_js_,(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"functions",variant:"functions",alignment:"right","aria-label":"Functions Menu"},slot:"functions"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"Search"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{"no-dot":"",label:"Search"}},[_c("scale-icon-action-search")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Cart"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{count:"1",label:"Cart","aria-label-translation":"$label - $count item in shopping cart"}},[_c("scale-icon-action-shopping-cart")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Login"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{"no-dot":"",label:"Login"}},[_c("scale-icon-user-file-user")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"hide-on-desktop":"","aria-label":"Menu"}},[_c("button",[_c("scale-badge",[_c("scale-icon-action-menu")],1)],1),this._v(" "),_c("scale-telekom-nav-flyout",{attrs:{variant:"mobile"}},[_c("SlotMobileFlyoutCanvas",{attrs:{"app-name":this.appName,"app-name-link":this.appNameLink}})],1)],1)],1)}),[],!1,null,null,null).exports;var SlotFunctions=SlotFunctions_vuedocgen_export_0;SlotFunctions_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotFunctions",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_StoryStandardvue_type_script_lang_js_={components:{SlotMetaNavExternal:SlotMetaNavExternal,SlotMetaNav:SlotMetaNav,SlotMainNav:SlotMainNav,SlotLangSwitcher:SlotLangSwitcher,SlotFunctions:SlotFunctions},props:{appName:String,appNameLink:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}};const StoryStandard_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_StoryStandardvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-header",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_c("SlotMetaNavExternal"),_vm._v(" "),_c("SlotMetaNav"),_vm._v(" "),_c("SlotLangSwitcher"),_vm._v(" "),_c("SlotMainNav"),_vm._v(" "),_c("SlotFunctions",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}})],1)}),[],!1,null,null,null).exports;var StoryStandard=StoryStandard_vuedocgen_export_0;StoryStandard_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"StoryStandard",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}]};const SlotMainNavWithFlyout_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"main-nav",variant:"main-nav","aria-label":"Main navigation links"},slot:"main-nav"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Topic One"}},[_c("button",[_vm._v("Topic One")]),_vm._v(" "),_c("scale-telekom-nav-flyout",{attrs:{hover:""}},[_c("scale-telekom-mega-menu",[_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1)],1)],1)],1),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Two"}},[_c("button",[_vm._v("Topic Two")]),_vm._v(" "),_c("scale-telekom-nav-flyout",{attrs:{hover:""}},[_c("scale-telekom-mega-menu",[_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1)],1)],1)],1),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Three"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Three")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Four"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Four")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Five"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Five")])])],1)}),[],!1,null,null,null).exports;var SlotMainNavWithFlyout=SlotMainNavWithFlyout_vuedocgen_export_0;SlotMainNavWithFlyout_vuedocgen_export_0.__docgenInfo={displayName:"SlotMainNavWithFlyout",description:"",tags:{}};var telekom_brand_header_navigation_StoryMegaMenuvue_type_script_lang_js_={components:{SlotMetaNavExternal:SlotMetaNavExternal,SlotMetaNav:SlotMetaNav,SlotMainNavWithFlyout:SlotMainNavWithFlyout,SlotLangSwitcher:SlotLangSwitcher,SlotFunctions:SlotFunctions},props:{appName:String,appNameLink:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}};const StoryMegaMenu_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_StoryMegaMenuvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-header",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_c("SlotMetaNavExternal"),_vm._v(" "),_c("SlotMetaNav"),_vm._v(" "),_c("SlotLangSwitcher"),_vm._v(" "),_c("SlotMainNavWithFlyout"),_vm._v(" "),_c("SlotFunctions",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}})],1)}),[],!1,null,null,null).exports;var StoryMegaMenu=StoryMegaMenu_vuedocgen_export_0;StoryMegaMenu_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"StoryMegaMenu",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}]};const SlotDropdown_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"main-nav","aria-label":"Main Navigation"},slot:"main-nav"},[_c("scale-menu-flyout",[_c("scale-telekom-nav-item",{attrs:{slot:"trigger","aria-label":"Topic One"},slot:"trigger"},[_c("button",[_vm._v("Topic One")])]),_vm._v(" "),_c("scale-menu-flyout-list",{attrs:{"brand-header-dropdown":""}},[_c("scale-menu-flyout-item",[_vm._v("Item 1")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("\n          More Options\n          "),_c("scale-menu-flyout-list",{attrs:{slot:"sublist","brand-header-dropdown":""},slot:"sublist"},[_c("scale-menu-flyout-item",[_vm._v("\n              Item 1\n            ")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("\n              Even More\n              "),_c("scale-menu-flyout-list",{attrs:{slot:"sublist","brand-header-dropdown":""},slot:"sublist"},[_c("scale-menu-flyout-item",[_vm._v("Item 1")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v(" Item 2")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("Item 3")])],1)],1),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("\n              Item 3\n            ")])],1)],1),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("Item 3")])],1)],1),_vm._v(" "),_c("scale-menu-flyout",[_c("scale-telekom-nav-item",{attrs:{slot:"trigger","aria-label":"Topic Two"},slot:"trigger"},[_c("button",[_vm._v("Topic Two")])]),_vm._v(" "),_c("scale-menu-flyout-list",{attrs:{"brand-header-dropdown":""}},[_c("scale-menu-flyout-item",[_vm._v("Menu Item 1")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("Menu Item 2")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("Menu Item 3")])],1)],1)],1)}),[],!1,null,null,null).exports;var SlotDropdown=SlotDropdown_vuedocgen_export_0;SlotDropdown_vuedocgen_export_0.__docgenInfo={displayName:"SlotDropdown",description:"",tags:{}};var telekom_brand_header_navigation_SlotMobileDropdownvue_type_script_lang_js_={components:{SlotMobileFlyoutCanvas:SlotMobileFlyoutCanvas},props:{appName:String,appNameLink:String}};const SlotMobileDropdown_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotMobileDropdownvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"functions",variant:"functions",alignment:"right","aria-label":"Mobile Navigation"},slot:"functions"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"Search"}},[_c("a",{attrs:{href:"#"}},[_c("scale-icon-action-search")],1)]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_c("scale-icon-content-credit-card")],1)]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Shopping cart"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{count:"1",label:"Cart","label-visually-hidden":""}},[_c("scale-icon-action-shopping-cart")],1)],1)]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"User"}},[_c("a",{attrs:{href:"#"}},[_c("scale-icon-user-file-user")],1)]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"hide-on-desktop":"","aria-label":"Menu"}},[_c("button",[_c("scale-badge",[_c("scale-icon-action-menu")],1)],1),_vm._v(" "),_c("scale-telekom-nav-flyout",{attrs:{variant:"mobile"}},[_c("scale-telekom-mobile-flyout-canvas",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}},[_c("scale-telekom-nav-list",{attrs:{slot:"mobile-before-main-nav",variant:"lang-switcher",alignment:"left","aria-label":"Language switcher"},slot:"mobile-before-main-nav"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Switch to English"}},[_c("a",{attrs:{href:"#",title:"English"}},[_vm._v("EN")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to German"}},[_c("a",{attrs:{href:"#",title:"German"}},[_vm._v("DE")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to Hungarian"}},[_c("a",{attrs:{href:"#",title:"Hungarian"}},[_vm._v("HU")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu",{attrs:{slot:"mobile-main-nav"},slot:"mobile-main-nav"},[_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic One")]),_vm._v(" "),_c("a",{attrs:{href:"#"}},[_vm._v("Topic One")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item 1")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("More Options")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item 1")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Even More")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item ")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item 2")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item 3")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item 3")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Three")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Two")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Menu Item 1")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Menu Item 2")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Menu Item 3")])])],1)],1),_vm._v(" "),_c("scale-telekom-nav-list",{staticStyle:{"--flex-direction":"column"},attrs:{slot:"mobile-meta-nav-external",variant:"meta-nav-external",alignment:"left"},slot:"mobile-meta-nav-external"},[_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])])],1)],1)],1)],1)],1)}),[],!1,null,null,null).exports;var SlotMobileDropdown=SlotMobileDropdown_vuedocgen_export_0;SlotMobileDropdown_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotMobileDropdown",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_StoryDropdownvue_type_script_lang_js_={components:{SlotMetaNavExternal:SlotMetaNavExternal,SlotMetaNav:SlotMetaNav,SlotLangSwitcher:SlotLangSwitcher,SlotDropdown:SlotDropdown,SlotMobileDropdown:SlotMobileDropdown},props:{appName:String,appNameLink:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}};const StoryDropdown_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_StoryDropdownvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-header",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_c("SlotMetaNavExternal"),_vm._v(" "),_c("SlotMetaNav"),_vm._v(" "),_c("SlotLangSwitcher"),_vm._v(" "),_c("SlotDropdown"),_vm._v(" "),_c("SlotMobileDropdown",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}})],1)}),[],!1,null,null,null).exports;var StoryDropdown=StoryDropdown_vuedocgen_export_0;StoryDropdown_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"StoryDropdown",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}]};var telekom_brand_header_navigation_SlotMobileFlyoutCanvasSlimvue_type_script_lang_js_={props:{appName:String,appNameLink:String}};const SlotMobileFlyoutCanvasSlim_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotMobileFlyoutCanvasSlimvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-mobile-flyout-canvas",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}},[_c("scale-telekom-mobile-menu",{attrs:{slot:"mobile-main-nav"},slot:"mobile-main-nav"},[_c("scale-telekom-mobile-menu-item",{attrs:{active:""}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic One")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children",active:""},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1)],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Two")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1)],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Three")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Four")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Five")])])],1)],1)}),[],!1,null,null,null).exports;var SlotMobileFlyoutCanvasSlim=SlotMobileFlyoutCanvasSlim_vuedocgen_export_0;SlotMobileFlyoutCanvasSlim_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotMobileFlyoutCanvasSlim",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_SlotFunctionsSlimvue_type_script_lang_js_={components:{SlotMobileFlyoutCanvasSlim:SlotMobileFlyoutCanvasSlim},props:{appName:String,appNameLink:String}};__webpack_require__("./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&");const SlotFunctionsSlim_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotFunctionsSlimvue_type_script_lang_js_,(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"functions",variant:"functions",alignment:"right","aria-label":"Functions Menu"},slot:"functions"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"Search"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{"no-dot":"",label:"Search",search:""}},[_c("scale-icon-action-search")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Cart"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{count:"1",label:"Cart",cart:""}},[_c("scale-icon-action-shopping-cart")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Login"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{"no-dot":"",label:"Login",user:""}},[_c("scale-icon-user-file-user")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"hide-on-desktop":"","aria-label":"Menu"}},[_c("button",[_c("scale-badge",[_c("scale-icon-action-menu")],1)],1),this._v(" "),_c("scale-telekom-nav-flyout",{attrs:{variant:"mobile"}},[_c("SlotMobileFlyoutCanvasSlim",{attrs:{"app-name":this.appName,"app-name-link":this.appNameLink}})],1)],1)],1)}),[],!1,null,null,null).exports;var SlotFunctionsSlim=SlotFunctionsSlim_vuedocgen_export_0;SlotFunctionsSlim_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotFunctionsSlim",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_StorySlimvue_type_script_lang_js_={components:{SlotMetaNavExternal:SlotMetaNavExternal,SlotMainNavWithFlyout:SlotMainNavWithFlyout,SlotLangSwitcher:SlotLangSwitcher,SlotFunctionsSlim:SlotFunctionsSlim},props:{appName:String,appNameLink:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}};const StorySlim_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_StorySlimvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-header",{attrs:{type:"slim","app-name":_vm.appName,"app-name-link":_vm.appNameLink,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_c("SlotMetaNavExternal"),_vm._v(" "),_c("SlotLangSwitcher"),_vm._v(" "),_c("SlotMainNavWithFlyout"),_vm._v(" "),_c("SlotFunctionsSlim",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}})],1)}),[],!1,null,null,null).exports;var StorySlim=StorySlim_vuedocgen_export_0;StorySlim_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"StorySlim",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}]};var telekom_brand_header_navigation_SlotMobileFlyoutCanvasSubtlevue_type_script_lang_js_={props:{appName:String,appNameLink:String}};const SlotMobileFlyoutCanvasSubtle_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotMobileFlyoutCanvasSubtlevue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-mobile-flyout-canvas",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink,type:"subtle"}},[_c("scale-telekom-nav-list",{attrs:{slot:"mobile-before-main-nav",variant:"lang-switcher",alignment:"left","aria-label":"Language switcher"},slot:"mobile-before-main-nav"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Switch to English"}},[_c("a",{attrs:{href:"#",title:"English"}},[_vm._v("EN")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to Hungarian"}},[_c("a",{attrs:{href:"#",title:"Hungarian"}},[_vm._v("HU")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to German"}},[_c("a",{attrs:{href:"#",title:"German"}},[_vm._v("DE")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu",{attrs:{slot:"mobile-main-nav"},slot:"mobile-main-nav"}),_vm._v(" "),_c("scale-telekom-nav-list",{staticStyle:{"--flex-direction":"column"},attrs:{slot:"mobile-meta-nav-external",variant:"meta-nav-external",alignment:"left","aria-label":"Metanavigation"},slot:"mobile-meta-nav-external"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"External link"}},[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Second external link"}},[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Internal link"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Second internal link"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])])],1)],1)}),[],!1,null,null,null).exports;var SlotMobileFlyoutCanvasSubtle=SlotMobileFlyoutCanvasSubtle_vuedocgen_export_0;SlotMobileFlyoutCanvasSubtle_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotMobileFlyoutCanvasSubtle",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_SlotFunctionsSubtlevue_type_script_lang_js_={components:{SlotMobileFlyoutCanvasSubtle:SlotMobileFlyoutCanvasSubtle},props:{appName:String,appNameLink:String}};const SlotFunctionsSubtle_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotFunctionsSubtlevue_type_script_lang_js_,(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"functions",variant:"functions",alignment:"right","aria-label":"Functions Menu"},slot:"functions"},[_c("scale-telekom-nav-item",{attrs:{"hide-on-desktop":"","aria-label":"Menu"}},[_c("button",[_c("scale-badge",[_c("scale-icon-action-menu")],1)],1),this._v(" "),_c("scale-telekom-nav-flyout",{attrs:{variant:"mobile"}},[_c("SlotMobileFlyoutCanvasSubtle",{attrs:{"app-name":this.appName,"app-name-link":this.appNameLink}})],1)],1)],1)}),[],!1,null,null,null).exports;var SlotFunctionsSubtle=SlotFunctionsSubtle_vuedocgen_export_0;SlotFunctionsSubtle_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotFunctionsSubtle",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_StorySubtlevue_type_script_lang_js_={components:{SlotMetaNavExternal:SlotMetaNavExternal,SlotMetaNav:SlotMetaNav,SlotMainNavWithFlyout:SlotMainNavWithFlyout,SlotLangSwitcher:SlotLangSwitcher,SlotFunctionsSubtle:SlotFunctionsSubtle},props:{appName:String,appNameLink:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}};const StorySubtle_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_StorySubtlevue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-header",{attrs:{type:"subtle","app-name":_vm.appName,"app-name-link":_vm.appNameLink,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_c("SlotMetaNavExternal"),_vm._v(" "),_c("SlotMetaNav"),_vm._v(" "),_c("SlotLangSwitcher"),_vm._v(" "),_c("SlotFunctionsSubtle",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}})],1)}),[],!1,null,null,null).exports;var StorySubtle=StorySubtle_vuedocgen_export_0;StorySubtle_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"StorySubtle",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}]};var telekom_brand_header_navigation_TelekomHeaderTemplatevue_type_script_lang_js_={components:{StoryStandard:StoryStandard,StoryMegaMenu:StoryMegaMenu,StoryDropdown:StoryDropdown,StorySlim:StorySlim,StorySubtle:StorySubtle},props:{appName:String,appNameLink:String,appNameClick:Function,logoHref:String,logoTitle:String,logoHideTitle:String,storyName:String}};__webpack_require__("./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&");const TelekomHeaderTemplate_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_TelekomHeaderTemplatevue_type_script_lang_js_,(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("div",{staticClass:"wrapper"},[_c("scale-telekom-app-shell",[_c(this.storyName,{tag:"component",attrs:{slot:"header","app-name":this.appName,"app-name-link":this.appNameLink,"logo-href":this.logoHref,"logo-title":this.logoTitle,"logo-hide-title":this.logoHideTitle},slot:"header"})],1)],1)}),[],!1,null,null,null).exports;var TelekomHeaderTemplate=TelekomHeaderTemplate_vuedocgen_export_0;TelekomHeaderTemplate_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"TelekomHeaderTemplate",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"appNameClick",type:{name:"func"}},{name:"logoHref",type:{name:"string"}},{name:"logoTitle",type:{name:"string"}},{name:"logoHideTitle",type:{name:"string"}},{name:"storyName",type:{name:"string"}}]};var addonNavigation=[{name:"Telekom Shops",id:"Telekom Shops",href:"#telekom-shops"},{name:"Contact",id:"Contact",href:"#contact"}],userNavigation=[{type:"userInfo",shortName:"Alexander",name:"Alexander Dreyer",email:"alexander.dreyer@t-online.de"},{type:"divider"},{type:"item",name:"Customer Care",id:"customer-care",href:"https://www.telekom.de/kundencenter/startseite",onClick:function onClick(){},icon:"t-product-measure-internet-speed",iconPosition:"prefix"},{type:"item",name:"Login Settings",id:"login-settings",href:"https://account.idm.telekom.com/account-manager/index.xhtml",onClick:function onClick(){},icon:"service-settings",iconPosition:"prefix"},{type:"divider"},{type:"item",name:"Optional Link",id:"optional-link",href:"#optional-link",onClick:function onClick(){}},{type:"divider"},{type:"button",name:"Logout",id:"logout",onClick:function onClick(){console.log("button click")},href:"https://accounts.login.idm.telekom.com/sessionmessage/logout",variant:"secondary"}],mainNavigation=[{name:"Topic One",id:"Topic One",children:[{name:"Second Level",id:"Second Level 3",children:[{name:"Third Level",id:"Third Level 4",href:"#third-level"},{name:"Third Level",id:"Third Level 5",href:"#third-level"},{name:"Third Level",id:"Third Level 6",href:"#third-level"},{name:"Third Level",id:"Third Level 7",href:"#third-level"},{name:"Third Level",id:"Third Level 8",href:"#third-level"},{name:"Third Level",id:"Third Level 9",href:"#third-level"},{name:"Third Level",id:"Third Level 10",href:"#third-level"}]},{name:"Second Level",id:"Second Level 4",children:[{name:"Third Level",id:"Third Level 11",href:"#third-level"},{name:"Third Level",id:"Third Level 12",href:"#third-level"},{name:"Third Level",id:"Third Level 13",href:"#third-level"},{name:"Third Level",id:"Third Level 14",href:"#third-level"},{name:"Third Level",id:"Third Level 15",href:"#third-level"},{name:"Third Level",id:"Third Level 16",href:"#third-level"},{name:"Third Level",id:"Third Level 17",href:"#third-level"}]},{name:"Second Level",id:"Second Level 5",children:[{name:"Third Level",id:"Third Level 18",href:"#third-level"},{name:"Third Level",id:"Third Level 19",href:"#third-level"},{name:"Third Level",id:"Third Level 20",href:"#third-level"},{name:"Third Level",id:"Third Level 21",href:"#third-level"},{name:"Third Level",id:"Third Level 22",href:"#third-level"},{name:"Third Level",id:"Third Level 23",href:"#third-level"},{name:"Third Level",id:"Third Level 24",href:"#third-level"}]},{name:"Second Level",id:"Second Level 6",children:[{name:"Third Level",id:"Third Level 25",href:"#third-level"},{name:"Third Level",id:"Third Level 26",href:"#third-level"},{name:"Third Level",id:"Third Level 27",href:"#third-level"},{name:"Third Level",id:"Third Level 28",href:"#third-level"},{name:"Third Level",id:"Third Level 29",href:"#third-level"},{name:"Third Level",id:"Third Level 30",href:"#third-level"}]}]},{name:"Topic Two",id:"Topic Two",children:[{name:"Second Level",id:"Second Level 1",children:[{name:"Third Level",id:"Third Level 1",href:"#third-level"},{name:"Third Level",id:"Third Level 2",href:"#third-level"}]},{name:"Second Level",id:"Second Level 2",children:[{name:"Third Level",id:"Third Level 3",href:"#third-level"}]}]},{name:"Topic Three",id:"Topic Three",href:"#topic-three"},{name:"Topic Four",id:"Topic Four",href:"#topic-four"},{name:"Topic Five",id:"Topic Five",href:"#topic-five"}],iconNavigation=[{name:"Search",id:"Search35",href:"#search",icon:"action-search"},{name:"Cart",id:"Cart36",href:"#cart",icon:"action-shopping-cart",badge:!0,badgeLabel:"Cart",labelVisuallyHidden:!0,badgeCount:3,ariaLabelTranslation:"$badgeLabel - $badgeCount item"},{id:"menu",defaultName:"Menu",openedName:"Close"}],sectorNavigation=[{name:"Business",id:"Business39",href:"#business"}];function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var TelekomBrandHeader_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{TelekomHeaderTemplate:TelekomHeaderTemplate},props:Object.assign({},TelekomHeaderTemplate.props,{storyName:String,mainNavAriaLabel:"Main Navigation",metaNavAriaLabel:"Meta Navigation",metaNavExternalAriaLabel:"External Meta Navigation",langSwitcherAriaLabel:"Language Switcher"}),template:'\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  '}},layoutProps={Template:TelekomBrandHeader_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Telekom Brand Header & Navigation",component:TelekomHeader,argTypes:{appNameLink:{control:{type:"text"}},appName:{control:{type:"text"}},appNameClick:{control:{type:"disabled"},description:"app name click event handler custom function"},storyName:{table:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Telekom Brand Header & Navigation"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard-header"},"Standard Header"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard Header",args:{storyName:"StoryStandard"},inline:!1,height:500,mdxType:"Story"},TelekomBrandHeader_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard Header",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"main-components"},"Main components"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-app-shell",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-app-shell"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-header",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-header")))),Object(esm.b)("h3",{id:"subcomponents"},"Subcomponents"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-nav-list",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-nav-list"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-nav-item",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-nav-item"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-nav-flyout",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-nav-flyout"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-mega-menu",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-mega-menu"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-mega-menu",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-mega-menu-column"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-mobile-flyout-canvas",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-mobile-flyout-canvas"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-mobile-menu",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-mobile-menu"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-mobile-menu-item",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-mobile-menu-item")))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header>\n  <scale-telekom-nav-list slot="main-nav" aria-label="Main Navigation Links">\n    <scale-telekom-nav-item aria-label="Topic One">\n      <a href="#">Topic One</a>\n    </scale-telekom-nav-item>\n    \x3c!-- … --\x3e\n  </scale-telekom-nav-list>\n</scale-telekom-header>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-telekom-header {\n  --shadow: 0px 2px 9px rgba(0, 0, 0, 0.15);\n  --background: var(--telekom-color-background-surface);\n  --background-logo: var(--telekom-color-primary-standard);\n  --transition-common-scrolled: height var(--telekom-motion-duration-immediate)\n      var(--telekom-motion-easing-standard),\n    width var(--telekom-motion-duration-immediate),\n    margin var(--telekom-motion-duration-immediate);\n  --font-size-app-name: var(--telekom-typography-font-size-body);\n  --line-height-app-name: var(--telekom-typography-line-spacing-tight);\n  --font-weight-app-name: var(--telekom-typography-font-weight-extra-bold);\n}\n\nscale-telekom-nav-list {\n  --width: 100%;\n  --height: 100%;\n  --spacing-x-start: 0;\n  --flex-direction: row;\n}\n\nscale-telekom-nav-item {\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --color: var(--telekom-color-text-and-icon-standard);\n}\n")),Object(esm.b)("h2",{id:"application-name"},"Application Name"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Application Name",args:{storyName:"StoryStandard",appName:"Application Name"},inline:!1,height:500,mdxType:"Story"},TelekomBrandHeader_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header\n  app-name="Application Name"\n  app-name-link="https://example.com"\n  meta-nav-aria-label="Meta navigation section"\n  meta-nav-external-aria-label="External navigation section"\n  lang-switcher-aria-label="Language switcher section"\n  main-nav-aria-label="Main navigation"\n  section\n>\n  \x3c!-- … --\x3e\n</scale-telekom-header>\n')),Object(esm.b)("h2",{id:"mega-menu"},"Mega Menu"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Mega Menu",args:{storyName:"StoryMegaMenu",appName:"Application Name"},inline:!1,height:500,mdxType:"Story"},TelekomBrandHeader_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header\n  meta-nav-aria-label="Meta navigation section"\n  meta-nav-external-aria-label="External navigation section"\n  lang-switcher-aria-label="Language switcher section"\n  main-nav-aria-label="Main navigation section"\n>\n  <scale-telekom-nav-list slot="main-nav" aria-label="Main Navigation Links">\n    <scale-telekom-nav-item aria-label="Topic one">\n      <button>Topic One</button>\n      <scale-telekom-nav-flyout hover>\n        <div>Flyout content</div>\n      </scale-telekom-nav-flyout>\n    </scale-telekom-nav-item>\n    \x3c!-- … --\x3e\n  </scale-telekom-nav-list>\n</scale-telekom-header>\n')),Object(esm.b)("h3",{id:"mega-menu-1"},"Mega Menu"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-mega-menu>\n  <scale-telekom-mega-menu-column>\n    <scale-icon-home-home slot="icon" size="20"></scale-icon-home-home>\n    <a href="https://example.com" slot="heading">Second Level</a>\n    <ul>\n      <li><a href="https://example.com">Third Level</a></li>\n      <li><a href="https://example.com">Third Level</a></li>\n      \x3c!-- … --\x3e\n    </ul>\n  </scale-telekom-mega-menu-column>\n</scale-telekom-mega-menu>\n')),Object(esm.b)("h2",{id:"slim-header"},"Slim Header"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Slim Header",args:{storyName:"StorySlim",appName:"Application Name"},inline:!1,height:500,mdxType:"Story"},TelekomBrandHeader_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header\n  app-name="Application Name"\n  app-name-link="https://example.com"\n  meta-nav-aria-label="Meta navigation section"\n  meta-nav-external-aria-label="External navigation section"\n  lang-switcher-aria-label="Language switcher section"\n  main-nav-aria-label="Main navigation section"\n>\n  \x3c!-- … --\x3e\n</scale-telekom-header>\n')),Object(esm.b)("h2",{id:"subtle-header"},"Subtle Header"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Subtle Header",args:{storyName:"StorySubtle",appName:"Application Name"},inline:!1,height:500,mdxType:"Story"},TelekomBrandHeader_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header\n  app-name="Application Name"\n  app-name-link="https://example.com"\n  meta-nav-aria-label="Meta navigation section"\n  meta-nav-external-aria-label="External navigation section"\n  lang-switcher-aria-label="Language switcher section"\n  main-nav-aria-label="Main navigation section"\n>\n  \x3c!-- … --\x3e\n</scale-telekom-header>\n')),Object(esm.b)("h2",{id:"data-api-backward-compatibility"},"Data API (Backward compatibility)"),Object(esm.b)("blockquote",null,Object(esm.b)("p",{parentName:"blockquote"},"This scale-telekom-header-data-back-compat component is only meant to make it easier to migrate from a ",Object(esm.b)("a",{parentName:"p",href:"?path=/usage/components-brand-header-navigation--standard"},"previous version of the Brand Header"),". If you do not need to migrate, please avoid it. Learn more about the ",Object(esm.b)("a",{parentName:"p",href:"https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/telekom-header-navigation/fixtures.js",target:"_blank",rel:"nofollow noopener noreferrer"},"expected data shape"),".")),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Data API",inline:!1,height:500,args:{mainNavigation:JSON.stringify(mainNavigation),iconNavigation:JSON.stringify(iconNavigation),addonNavigation:JSON.stringify(addonNavigation),sectorNavigation:JSON.stringify(sectorNavigation),userNavigation:JSON.stringify(userNavigation),activeRouteId:"Third Level 24",appName:"Application Name"},mdxType:"Story"},(function(){return{components:{TelekomHeaderDataBackCompat:TelekomHeaderDataBackCompat},props:TelekomHeaderDataBackCompat.props,template:'\n        <div class="brand-header-spacing">\n          <scale-telekom-header-data-back-compat\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :app-name="appName"\n          >\n          </scale-telekom-header-data-back-compat>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header-data-back-compat\n  app-name="Application Name"\n  app-name-link="https://example.com"\n  active-route-id="id"\n></scale-telekom-header-data-back-compat>\n\n<script>\n  const header = window.document.querySelector(\n    \'scale-telekom-header-data-back-compat\'\n  );\n  header.mainNavigation = [...[]];\n  header.iconNavigation = [...[]];\n  header.sectorNavigation = [...[]];\n  header.addonNavigation = [...[]];\n<\/script>\n')))}MDXContent.isMDXComponent=!0;var standardHeader=TelekomBrandHeader_stories_Template.bind({});standardHeader.storyName="Standard Header",standardHeader.args={storyName:"StoryStandard"},standardHeader.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomHeaderTemplate\n  },\n  props: { ...TelekomHeaderTemplate.props,\n    storyName: String,\n    // TODO remove these from here since they\'re included already in TelekomHeaderTemplate\n    mainNavAriaLabel: \'Main Navigation\',\n    metaNavAriaLabel: \'Meta Navigation\',\n    metaNavExternalAriaLabel: \'External Meta Navigation\',\n    langSwitcherAriaLabel: \'Language Switcher\'\n  },\n  template: `\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  `\n})'}};var applicationName=TelekomBrandHeader_stories_Template.bind({});applicationName.storyName="Application Name",applicationName.args={storyName:"StoryStandard",appName:"Application Name"},applicationName.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomHeaderTemplate\n  },\n  props: { ...TelekomHeaderTemplate.props,\n    storyName: String,\n    // TODO remove these from here since they\'re included already in TelekomHeaderTemplate\n    mainNavAriaLabel: \'Main Navigation\',\n    metaNavAriaLabel: \'Meta Navigation\',\n    metaNavExternalAriaLabel: \'External Meta Navigation\',\n    langSwitcherAriaLabel: \'Language Switcher\'\n  },\n  template: `\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  `\n})'}};var megaMenu=TelekomBrandHeader_stories_Template.bind({});megaMenu.storyName="Mega Menu",megaMenu.args={storyName:"StoryMegaMenu",appName:"Application Name"},megaMenu.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomHeaderTemplate\n  },\n  props: { ...TelekomHeaderTemplate.props,\n    storyName: String,\n    // TODO remove these from here since they\'re included already in TelekomHeaderTemplate\n    mainNavAriaLabel: \'Main Navigation\',\n    metaNavAriaLabel: \'Meta Navigation\',\n    metaNavExternalAriaLabel: \'External Meta Navigation\',\n    langSwitcherAriaLabel: \'Language Switcher\'\n  },\n  template: `\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  `\n})'}};var slimHeader=TelekomBrandHeader_stories_Template.bind({});slimHeader.storyName="Slim Header",slimHeader.args={storyName:"StorySlim",appName:"Application Name"},slimHeader.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomHeaderTemplate\n  },\n  props: { ...TelekomHeaderTemplate.props,\n    storyName: String,\n    // TODO remove these from here since they\'re included already in TelekomHeaderTemplate\n    mainNavAriaLabel: \'Main Navigation\',\n    metaNavAriaLabel: \'Meta Navigation\',\n    metaNavExternalAriaLabel: \'External Meta Navigation\',\n    langSwitcherAriaLabel: \'Language Switcher\'\n  },\n  template: `\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  `\n})'}};var subtleHeader=TelekomBrandHeader_stories_Template.bind({});subtleHeader.storyName="Subtle Header",subtleHeader.args={storyName:"StorySubtle",appName:"Application Name"},subtleHeader.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomHeaderTemplate\n  },\n  props: { ...TelekomHeaderTemplate.props,\n    storyName: String,\n    // TODO remove these from here since they\'re included already in TelekomHeaderTemplate\n    mainNavAriaLabel: \'Main Navigation\',\n    metaNavAriaLabel: \'Meta Navigation\',\n    metaNavExternalAriaLabel: \'External Meta Navigation\',\n    langSwitcherAriaLabel: \'Language Switcher\'\n  },\n  template: `\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  `\n})'}};var TelekomBrandHeader_stories_dataApi=function dataApi(){return{components:{TelekomHeaderDataBackCompat:TelekomHeaderDataBackCompat},props:TelekomHeaderDataBackCompat.props,template:'\n        <div class="brand-header-spacing">\n          <scale-telekom-header-data-back-compat\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :app-name="appName"\n          >\n          </scale-telekom-header-data-back-compat>\n        </div>\n      '}};TelekomBrandHeader_stories_dataApi.storyName="Data API",TelekomBrandHeader_stories_dataApi.args={mainNavigation:JSON.stringify(mainNavigation),iconNavigation:JSON.stringify(iconNavigation),addonNavigation:JSON.stringify(addonNavigation),sectorNavigation:JSON.stringify(sectorNavigation),userNavigation:JSON.stringify(userNavigation),activeRouteId:"Third Level 24",appName:"Application Name"},TelekomBrandHeader_stories_dataApi.parameters={storySource:{source:'() => ({\n  components: {\n    TelekomHeaderDataBackCompat\n  },\n  props: TelekomHeaderDataBackCompat.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-telekom-header-data-back-compat\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :app-name="appName"\n          >\n          </scale-telekom-header-data-back-compat>\n        </div>\n      `\n})'}};var componentMeta={title:"Components/Telekom Brand Header & Navigation",component:TelekomHeader,argTypes:{appNameLink:{control:{type:"text"}},appName:{control:{type:"text"}},appNameClick:{control:{type:"disabled"},description:"app name click event handler custom function"},storyName:{table:{disable:!0}}},includeStories:["standardHeader","applicationName","megaMenu","slimHeader","subtleHeader","dataApi"]},mdxStoryNameToKey={"Standard Header":"standardHeader","Application Name":"applicationName","Mega Menu":"megaMenu","Slim Header":"slimHeader","Subtle Header":"subtleHeader","Data API":"dataApi"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_TelekomHeaderTemplate_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_TelekomHeaderTemplate_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/telekom-footer/TelekomFooter.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return TelekomFooter_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateMinimal",(function(){return TelekomFooter_stories_TemplateMinimal})),__webpack_require__.d(__webpack_exports__,"ExtendedTemplate",(function(){return TelekomFooter_stories_ExtendedTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"minimal",(function(){return minimal})),__webpack_require__.d(__webpack_exports__,"extended",(function(){return extended})),__webpack_require__.d(__webpack_exports__,"dataApi",(function(){return TelekomFooter_stories_dataApi}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),telekom_footer_Footervue_type_script_lang_js_={props:{type:{type:String,default:"standard"}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(telekom_footer_Footervue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-footer",{attrs:{type:_vm.type}},[_c("scale-telekom-footer-content",[_c("span",{attrs:{slot:"notice"},slot:"notice"},[_vm._v(" © Deutsche Telekom AG ")]),_vm._v(" "),_c("ul",{attrs:{slot:"navigation"},slot:"navigation"},[_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Imprint \n        ")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Data privacy \n        ")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Terms and conditions\n        ")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Consumer protection\n        ")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Product information sheet\n        ")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Youth protection\n        ")])])])])],1)}),[],!1,null,null,null).exports;var Footer=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"Footer",description:"",tags:{},props:[{name:"type",type:{name:"string"},defaultValue:{func:!1,value:"'standard'"}}]};var telekom_footer_TelekomFooterDataBackCompatvue_type_script_lang_js_={props:{footerNavigation:String,copyright:String,type:{type:String,default:"standard"}}};const TelekomFooterDataBackCompat_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_footer_TelekomFooterDataBackCompatvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-telekom-footer-data-back-compat",{attrs:{"footer-navigation":this.footerNavigation,type:this.type,copyright:this.copyright}})}),[],!1,null,null,null).exports;var TelekomFooterDataBackCompat=TelekomFooterDataBackCompat_vuedocgen_export_0;TelekomFooterDataBackCompat_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"TelekomFooterDataBackCompat",description:"",tags:{},props:[{name:"footerNavigation",type:{name:"string"}},{name:"copyright",type:{name:"string"}},{name:"type",type:{name:"string"},defaultValue:{func:!1,value:"'standard'"}}]};var footerNavigation=[{name:"Contact",id:"Contact",href:"#contact"},{name:"Terms and conditions",id:"Terms and conditions",href:"#terms-and-conditions"},{name:"Legal notice",id:"Legal notice",href:"#legal-notice"},{name:"Data privacy",id:"Data privacy",href:"#data-privacy",icon:"alert-imprint-dataprivacy"}],telekom_footer_FooterContentvue_type_script_lang_js_={name:"FooterContent",props:{logoHref:{type:String,default:""},logoTitle:{type:String,default:"Telekom Logo"},logoHideTitle:{type:Boolean,default:!1}}};const FooterContent_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_footer_FooterContentvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var FooterContent=FooterContent_vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}FooterContent_vuedocgen_export_0.__docgenInfo={displayName:"FooterContent",exportName:"default",description:"",tags:{},props:[{name:"logoHref",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"logoTitle",type:{name:"string"},defaultValue:{func:!1,value:"'Telekom Logo'"}},{name:"logoHideTitle",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}]};var TelekomFooter_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{TelekomFooter:Footer},props:Footer.props,template:'\n    <scale-telekom-footer \n        :type="type"\n    >\n      <scale-telekom-footer-content>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#">\n              Imprint\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Data privacy\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Terms and conditions\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Consumer protection\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Product information sheet\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Youth protection\n            </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer> \n  '}},TelekomFooter_stories_TemplateMinimal=function TemplateMinimal(args,_ref2){_ref2.argTypes;return{components:{TelekomFooter:Footer},props:Footer.props,template:'\n  <div style="position: relative; height: 100%;">\n    <scale-telekom-footer \n        :type="type"\n        style="position:absolute; bottom: 0;  width: 100%;"\n    >\n      <scale-telekom-footer-content>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#">\n              Imprint\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Data privacy\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Terms and conditions\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Consumer protection\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Product information sheet\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Youth protection\n            </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer> \n    </div>\n  '}},TelekomFooter_stories_ExtendedTemplate=function ExtendedTemplate(args,_ref3){_ref3.argTypes;return{components:{TelekomFooter:Footer},props:Footer.props,template:'\n    <scale-telekom-footer\n      :type="type"\n    >\n      <scale-telekom-footer-content>\n        <scale-telekom-footer-extended-navigation slot="extended-navigation">\n          <scale-telekom-footer-extended-navigation-column heading="Topic One">\n            <ul>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column heading="Topic Two">\n            <ul>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column\n            heading="Topic Three"\n          >\n            <ul>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column heading="Topic Four">\n            <ul>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n        </scale-telekom-footer-extended-navigation>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#"> Imprint </a>\n          </li>\n          <li>\n            <a href="#"> Data privacy </a>\n          </li>\n          <li>\n            <a href="#"> Terms and conditions </a>\n          </li>\n          <li>\n            <a href="#"> Consumer protection </a>\n          </li>\n          <li>\n            <a href="#"> Product information sheet </a>\n          </li>\n          <li>\n            <a href="#"> Youth protection </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer>\n  '}},layoutProps={Template:TelekomFooter_stories_Template,TemplateMinimal:TelekomFooter_stories_TemplateMinimal,ExtendedTemplate:TelekomFooter_stories_ExtendedTemplate};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Telekom Footer",component:Footer,subcomponents:{"Telekom Footer Content":FooterContent},argTypes:{type:{control:{type:"select"},options:["minimal","standard"],defaultValue:"standard"}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Telekom Footer"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",height:400,mdxType:"Story"},TelekomFooter_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --font-size: var(--telekom-typography-font-size-caption);\n  --font-color: var(--telekom-color-text-and-icon-white-standard);\n\n  --font-large: var(--telekom-text-style-ui);\n  --background-footer: var(--telekom-color-ui-black);\n  --background-footer-minimal: var(--telekom-color-background-canvas);\n}\n")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-footer>\n  <scale-telekom-footer-content>\n    <span slot="notice"> © Deutsche Telekom AG </span>\n    <ul slot="navigation">\n      <li>\n        <a href="#"> Imprint </a>\n      </li>\n      <li>\n        <a href="#"> Data privacy </a>\n      </li>\n      <li>\n        <a href="#"> Terms and conditions </a>\n      </li>\n      <li>\n        <a href="#"> Consumer protection </a>\n      </li>\n      <li>\n        <a href="#"> Product information sheet </a>\n      </li>\n      <li>\n        <a href="#"> Youth protection </a>\n      </li>\n    </ul>\n  </scale-telekom-footer-content>\n</scale-telekom-footer>\n')),Object(esm.b)("h2",{id:"minimal"},"Minimal"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Minimal",args:{type:"minimal"},mdxType:"Story"},TelekomFooter_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-footer type="minimal">\n  \x3c!-- … --\x3e\n</scale-telekom-footer>\n')),Object(esm.b)("h2",{id:"extended"},"Extended"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Extended",height:600,mdxType:"Story"},TelekomFooter_stories_ExtendedTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-footer>\n  <scale-telekom-footer-content>\n    <scale-telekom-footer-extended-navigation slot="extended-navigation">\n      <scale-telekom-footer-extended-navigation-column heading="Topic One">\n        <ul>\n          <li>\n            <a href="#">Topic One</a>\n          </li>\n          <li>\n            <a href="#">Topic One</a>\n          </li>\n          <li>\n            <a href="#">Topic One</a>\n          </li>\n          <li>\n            <a href="#">Topic One</a>\n          </li>\n        </ul>\n      </scale-telekom-footer-extended-navigation-column>\n      \x3c!-- … --\x3e\n    </scale-telekom-footer-extended-navigation>\n    \x3c!-- … --\x3e\n  </scale-telekom-footer-content>\n</scale-telekom-footer>\n')),Object(esm.b)("h2",{id:"data-api-backward-compatibility"},"Data API (Backward compatibility)"),Object(esm.b)("blockquote",null,Object(esm.b)("p",{parentName:"blockquote"},"This scale-telekom-footer-data-back-compat component is only meant to make it easier to migrate from a ",Object(esm.b)("a",{parentName:"p",href:"?path=/usage/components-footer--standard"},"previous version of the Brand Footer"),". If you do not need to migrate, please avoid it. Learn more about the ",Object(esm.b)("a",{parentName:"p",href:"https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/telekom-brand-header-navigation/fixtures.js",target:"_blank",rel:"nofollow noopener noreferrer"},"expected data shape"),".")),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Data API",inline:!1,height:500,args:{footerNavigation:JSON.stringify(footerNavigation),type:"minimal"},mdxType:"Story"},(function(){return{components:{TelekomFooterDataBackCompat:TelekomFooterDataBackCompat},props:TelekomFooterDataBackCompat.props,template:'\n        <scale-telekom-footer-data-back-compat\n          :footer-navigation="footerNavigation"\n          :type="type"\n          :copyright="copyright"\n        >\n        </scale-telekom-footer-data-back-compat>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-footer-data-back-compat\n  type="minimal"\n  copyright="© Deutsche Telekom AG"\n></scale-telekom-footer-data-back-compat>\n\n<script>\n  const footer = window.document.querySelector(\n    \'scale-telekom-footer-data-back-compat\'\n  );\n  footer.footerNavigation = [...[]];\n<\/script>\n')))}MDXContent.isMDXComponent=!0;var standard=TelekomFooter_stories_Template.bind({});standard.storyName="Standard",standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomFooter\n  },\n  props: TelekomFooter.props,\n  template: `\n    <scale-telekom-footer \n        :type="type"\n    >\n      <scale-telekom-footer-content>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#">\n              Imprint\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Data privacy\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Terms and conditions\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Consumer protection\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Product information sheet\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Youth protection\n            </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer> \n  `\n})'}};var minimal=TelekomFooter_stories_Template.bind({});minimal.storyName="Minimal",minimal.args={type:"minimal"},minimal.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomFooter\n  },\n  props: TelekomFooter.props,\n  template: `\n    <scale-telekom-footer \n        :type="type"\n    >\n      <scale-telekom-footer-content>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#">\n              Imprint\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Data privacy\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Terms and conditions\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Consumer protection\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Product information sheet\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Youth protection\n            </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer> \n  `\n})'}};var extended=TelekomFooter_stories_ExtendedTemplate.bind({});extended.storyName="Extended",extended.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomFooter\n  },\n  props: TelekomFooter.props,\n  template: `\n    <scale-telekom-footer\n      :type="type"\n    >\n      <scale-telekom-footer-content>\n        <scale-telekom-footer-extended-navigation slot="extended-navigation">\n          <scale-telekom-footer-extended-navigation-column heading="Topic One">\n            <ul>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column heading="Topic Two">\n            <ul>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column\n            heading="Topic Three"\n          >\n            <ul>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column heading="Topic Four">\n            <ul>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n        </scale-telekom-footer-extended-navigation>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#"> Imprint </a>\n          </li>\n          <li>\n            <a href="#"> Data privacy </a>\n          </li>\n          <li>\n            <a href="#"> Terms and conditions </a>\n          </li>\n          <li>\n            <a href="#"> Consumer protection </a>\n          </li>\n          <li>\n            <a href="#"> Product information sheet </a>\n          </li>\n          <li>\n            <a href="#"> Youth protection </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer>\n  `\n})'}};var TelekomFooter_stories_dataApi=function dataApi(){return{components:{TelekomFooterDataBackCompat:TelekomFooterDataBackCompat},props:TelekomFooterDataBackCompat.props,template:'\n        <scale-telekom-footer-data-back-compat\n          :footer-navigation="footerNavigation"\n          :type="type"\n          :copyright="copyright"\n        >\n        </scale-telekom-footer-data-back-compat>\n      '}};TelekomFooter_stories_dataApi.storyName="Data API",TelekomFooter_stories_dataApi.args={footerNavigation:JSON.stringify(footerNavigation),type:"minimal"},TelekomFooter_stories_dataApi.parameters={storySource:{source:'() => ({\n  components: {\n    TelekomFooterDataBackCompat\n  },\n  props: TelekomFooterDataBackCompat.props,\n  template: `\n        <scale-telekom-footer-data-back-compat\n          :footer-navigation="footerNavigation"\n          :type="type"\n          :copyright="copyright"\n        >\n        </scale-telekom-footer-data-back-compat>\n      `\n})'}};var componentMeta={title:"Components/Telekom Footer",component:Footer,subcomponents:{"Telekom Footer Content":FooterContent},argTypes:{type:{control:{type:"select"},options:["minimal","standard"],defaultValue:"standard"}},includeStories:["standard","minimal","extended","dataApi"]},mdxStoryNameToKey={Standard:"standard",Minimal:"minimal",Extended:"extended","Data API":"dataApi"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/text-area/TextArea.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return TextArea_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"placeholder",(function(){return placeholder})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"withError",(function(){return withError})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"readOnly",(function(){return readOnly})),__webpack_require__.d(__webpack_exports__,"maxLengthWithCounter",(function(){return maxLengthWithCounter})),__webpack_require__.d(__webpack_exports__,"moreRows",(function(){return moreRows}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),text_area_ScaleTextAreavue_type_script_lang_js_={props:{name:{type:String},label:{type:String},rows:{type:Number},cols:{type:Number},helperText:{type:String},invalid:{type:Boolean},maxLength:{type:Number},minLength:{type:Number},placeholder:{type:String},disabled:{type:Boolean},readonly:{type:Boolean},required:{type:Boolean},counter:{type:Boolean},resize:{type:String},value:{type:String},inputId:{type:String},transparent:{type:Boolean},inputAutofocus:{type:Boolean},styles:{type:String}},methods:{scaleInput:function scaleInput($event){Object(addon_actions_dist_esm.action)("scaleInput"),this.$emit("scaleInput",$event)},"scale-input":function scaleInput($event){Object(addon_actions_dist_esm.action)("scale-input"),this.$emit("scale-input",$event)},scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},scaleFocus:function scaleFocus($event){Object(addon_actions_dist_esm.action)("scaleFocus"),this.$emit("scaleFocus",$event)},"scale-focus":function scaleFocus($event){Object(addon_actions_dist_esm.action)("scale-focus"),this.$emit("scale-focus",$event)},scaleBlur:function scaleBlur($event){Object(addon_actions_dist_esm.action)("scaleBlur"),this.$emit("scaleBlur",$event)},"scale-blur":function scaleBlur($event){Object(addon_actions_dist_esm.action)("scale-blur"),this.$emit("scale-blur",$event)},scaleKeyDown:function scaleKeyDown($event){Object(addon_actions_dist_esm.action)("scaleKeyDown"),this.$emit("scaleKeyDown",$event)},"scale-keydown":function scaleKeydown($event){Object(addon_actions_dist_esm.action)("scale-keydown"),this.$emit("scale-keydown",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(text_area_ScaleTextAreavue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-input",{attrs:{name:_vm.name,label:_vm.label,rows:_vm.rows,cols:_vm.cols,"helper-text":_vm.helperText,invalid:_vm.invalid,"max-length":_vm.maxLength,"min-length":_vm.minLength,placeholder:_vm.placeholder,disabled:_vm.disabled,readonly:_vm.readonly,required:_vm.required,counter:_vm.counter,resize:_vm.resize,value:_vm.value,"input-id":_vm.inputId,transparent:_vm.transparent,"input-autofocus":_vm.inputAutofocus},on:{scaleInput:_vm.scaleInput,scaleChange:_vm.scaleChange,scaleFocus:_vm.scaleFocus,scaleBlur:_vm.scaleBlur,scaleKeyDown:_vm.scaleKeyDown}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleTextArea=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTextArea",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"rows",type:{name:"number"}},{name:"cols",type:{name:"number"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"maxLength",type:{name:"number"}},{name:"minLength",type:{name:"number"}},{name:"placeholder",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"readonly",type:{name:"boolean"}},{name:"required",type:{name:"boolean"}},{name:"counter",type:{name:"boolean"}},{name:"resize",type:{name:"string"}},{name:"value",type:{name:"string"}},{name:"inputId",type:{name:"string"}},{name:"transparent",type:{name:"boolean"}},{name:"inputAutofocus",type:{name:"boolean"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleInput",type:{names:["undefined"]}},{name:"scale-input",type:{names:["undefined"]}},{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}},{name:"scaleFocus",type:{names:["undefined"]}},{name:"scale-focus",type:{names:["undefined"]}},{name:"scaleBlur",type:{names:["undefined"]}},{name:"scale-blur",type:{names:["undefined"]}},{name:"scaleKeyDown",type:{names:["undefined"]}},{name:"scale-keydown",type:{names:["undefined"]}}],slots:[{name:"default"}]};var TextArea_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleTextArea:ScaleTextArea},props:ScaleTextArea.props,template:'\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  ',methods:{scaleChange:Object(addon_actions_dist_esm.action)("scaleChange"),scaleFocus:Object(addon_actions_dist_esm.action)("scaleFocus"),scaleBlur:Object(addon_actions_dist_esm.action)("scaleBlur"),scaleKeyDown:Object(addon_actions_dist_esm.action)("scaleKeyDown")}}},layoutProps={Template:TextArea_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Text Area",component:ScaleTextArea,argTypes:{resize:{control:{type:"select",options:["unset","none","vertical","horizontal"]}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Text Area"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Textarea",rows:3,resize:"vertical"},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea label="Textarea" rows="3" resize="vertical"></scale-textarea>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-textarea {\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --radius: var(--telekom-radius-standard);\n  --border: var(--telekom-line-weight-standard) solid\n    var(--telekom-color-ui-border-standard);\n  --border-error: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-danger-standard);\n  --border-color-hover: var(--telekom-color-ui-border-hovered);\n  --border-color-focus: var(--telekom-color-ui-border-hovered);\n  --border-color-disabled: var(--telekom-color-ui-border-disabled);\n  --background-color-hover: var(--telekom-color-ui-state-fill-hovered);\n  --background-color-disabled: none;\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --spacing-x-control: var(--telekom-spacing-composition-space-05);\n  --spacing-bottom-control: var(--telekom-spacing-composition-space-05);\n  --spacing-top-control: calc(\n    1.125rem - var(--telekom-spacing-composition-space-01)\n  );\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-disabled: transparent;\n  --border-color-readonly: transparent;\n  --background-readonly: var(--telekom-color-ui-disabled);\n\n  /*meta*/\n  --font-weight-meta: var(--telekom-typography-font-weight-bold);\n  --font-size-meta: var(--telekom-typography-font-size-small);\n  --line-height-meta: var(--telekom-typography-line-spacing-standard);\n  --spacing-y-meta: var(--telekom-spacing-composition-space-03);\n  --color-meta: var(--telekom-color-text-and-icon-standard);\n  --color-meta-error: var(--telekom-color-text-and-icon-functional-danger);\n\n  /*control*/\n  /*\n    18px 32px 4px 12px\n    (subtracting 1px from border)\n  */\n  --spacing-control: 0 calc(2rem - var(--telekom-spacing-composition-space-01))\n    0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));\n  --transition-control: var(--transition);\n  --background-control: var(--telekom-color-ui-state-fill-standard);\n\n  /*counter*/\n  --transition-counter: var(--transition);\n  --color-counter-error: var(--color-meta-error);\n\n  /*placeholder*/\n  --transition-placeholder: var(--transition);\n  --color-placeholder: var(--telekom-color-text-and-icon-additional);\n\n  /*label*/\n  --color-label: var(--telekom-color-text-and-icon-additional);\n  --color-label-readonly: var(--telekom-color-text-and-icon-standard);\n  --z-index-label: var(--scl-z-index-10);\n  --transition-label: var(--transition);\n}\n")),Object(esm.b)("h2",{id:"placeholder"},"Placeholder"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Placeholder",args:{label:"Placeholder",placeholder:"this is the placeholder"},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea\n  label="Placeholder"\n  placeholder="this is the placeholder"\n></scale-textarea>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{helperText:"Make sure to fill this",label:"Helper Text"},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea\n  label="Helper Text"\n  helper-text="Make sure to fill this"\n></scale-textarea>\n')),Object(esm.b)("h2",{id:"with-error"},"With Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Error",args:{label:"With Error",invalid:!0,helperText:"Something is wrong"},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea\n  label="With Error"\n  helper-text="Something is wrong"\n  invalid="true"\n></scale-textarea>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",disabled:!0},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea label="Disabled" disabled></scale-textarea>\n')),Object(esm.b)("h2",{id:"read-only"},"Read Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Read Only",args:{label:"Read only",readonly:!0,value:"This cannot be changed"},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea label="Read only" value="This cannot be changed" readonly></scale-textarea>\n')),Object(esm.b)("h2",{id:"max-length-with-counter"},"Max Length With Counter"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Max Length With Counter",args:{label:"Max Length With Counter",maxLength:10,counter:!0},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea\n  label="Max Length With Counter"\n  max-length="10"\n  counter\n></scale-textarea>\n')),Object(esm.b)("h2",{id:"more-rows"},"More rows"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"More rows",args:{label:"More rows",rows:10},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea label="More rows" rows="10"></scale-textarea>\n')))}MDXContent.isMDXComponent=!0;var standard=TextArea_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Textarea",rows:3,resize:"vertical"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var placeholder=TextArea_stories_Template.bind({});placeholder.storyName="Placeholder",placeholder.args={label:"Placeholder",placeholder:"this is the placeholder"},placeholder.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var helperText=TextArea_stories_Template.bind({});helperText.storyName="Helper Text",helperText.args={helperText:"Make sure to fill this",label:"Helper Text"},helperText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var withError=TextArea_stories_Template.bind({});withError.storyName="With Error",withError.args={label:"With Error",invalid:!0,helperText:"Something is wrong"},withError.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var disabled=TextArea_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var readOnly=TextArea_stories_Template.bind({});readOnly.storyName="Read Only",readOnly.args={label:"Read only",readonly:!0,value:"This cannot be changed"},readOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var maxLengthWithCounter=TextArea_stories_Template.bind({});maxLengthWithCounter.storyName="Max Length With Counter",maxLengthWithCounter.args={label:"Max Length With Counter",maxLength:10,counter:!0},maxLengthWithCounter.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var moreRows=TextArea_stories_Template.bind({});moreRows.storyName="More rows",moreRows.args={label:"More rows",rows:10},moreRows.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var componentMeta={title:"Components/Text Area",component:ScaleTextArea,argTypes:{resize:{control:{type:"select",options:["unset","none","vertical","horizontal"]}}},includeStories:["standard","placeholder","helperText","withError","disabled","readOnly","maxLengthWithCounter","moreRows"]},mdxStoryNameToKey={Standard:"standard",Placeholder:"placeholder","Helper Text":"helperText","With Error":"withError",Disabled:"disabled","Read Only":"readOnly","Max Length With Counter":"maxLengthWithCounter","More rows":"moreRows"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/text-field/TextField.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ICON",(function(){return ICON})),__webpack_require__.d(__webpack_exports__,"Template",(function(){return TextField_stories_Template})),__webpack_require__.d(__webpack_exports__,"StorySectionsTemplate",(function(){return TextField_stories_StorySectionsTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"textWithEvents",(function(){return textWithEvents})),__webpack_require__.d(__webpack_exports__,"placeholder",(function(){return placeholder})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"withError",(function(){return withError})),__webpack_require__.d(__webpack_exports__,"withWarning",(function(){return withWarning})),__webpack_require__.d(__webpack_exports__,"withSuccess",(function(){return withSuccess})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"readOnly",(function(){return readOnly})),__webpack_require__.d(__webpack_exports__,"maxLengthWithCounter",(function(){return maxLengthWithCounter}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),text_field_ScaleTextFieldvue_type_script_lang_js_={props:{name:{type:String},type:{type:String},inputModeType:{type:String},label:{type:String},helperText:{type:String},invalid:{type:Boolean},variant:{type:String},maxLength:{type:Number},minLength:{type:Number},max:{type:Number},min:{type:Number},placeholder:{type:String},disabled:{type:Boolean},readonly:{type:Boolean},required:{type:Boolean},counter:{type:Boolean},size:{type:String},value:{type:String},ariaDetailedId:{type:String},inputId:{type:String},inputAutofocus:{type:Boolean},inputAutocomplete:{type:String},experimentalControlled:{type:Boolean},hideLabelVisually:{type:Boolean,default:!1},styles:{type:String}},methods:{scaleInput:function scaleInput($event){Object(addon_actions_dist_esm.action)("scaleInput"),this.$emit("scaleInput",$event)},"scale-input":function scaleInput($event){Object(addon_actions_dist_esm.action)("scale-input"),this.$emit("scale-input",$event)},scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},scaleFocus:function scaleFocus($event){Object(addon_actions_dist_esm.action)("scaleFocus"),this.$emit("scaleFocus",$event)},"scale-focus":function scaleFocus($event){Object(addon_actions_dist_esm.action)("scale-focus"),this.$emit("scale-focus",$event)},scaleBlur:function scaleBlur($event){Object(addon_actions_dist_esm.action)("scaleBlur"),this.$emit("scaleBlur",$event)},"scale-blur":function scaleBlur($event){Object(addon_actions_dist_esm.action)("scale-blur"),this.$emit("scale-blur",$event)},scaleKeyDown:function scaleKeyDown($event){Object(addon_actions_dist_esm.action)("scaleKeyDown"),this.$emit("scaleKeyDown",$event)},"scale-keydown":function scaleKeydown($event){Object(addon_actions_dist_esm.action)("scale-keydown"),this.$emit("scale-keydown",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(text_field_ScaleTextFieldvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-text-field",{attrs:{name:_vm.name,type:_vm.type,"input-mode-type":_vm.inputModeType,label:_vm.label,"helper-text":_vm.helperText,invalid:_vm.invalid,variant:_vm.variant,"max-length":_vm.maxLength,"min-length":_vm.minLength,max:_vm.max,min:_vm.min,placeholder:_vm.placeholder,disabled:_vm.disabled,readonly:_vm.readonly,required:_vm.required,counter:_vm.counter,size:_vm.size,value:_vm.value,"aria-detailed-id":_vm.ariaDetailedId,"input-id":_vm.inputId,"input-autofocus":_vm.inputAutofocus,"input-autocomplete":_vm.inputAutocomplete,"experimental-controlled":_vm.experimentalControlled,"hide-label-visually":_vm.hideLabelVisually},on:{scaleInput:_vm.scaleInput,scaleChange:_vm.scaleChange,scaleFocus:_vm.scaleFocus,scaleBlur:_vm.scaleBlur,scaleKeyDown:_vm.scaleKeyDown}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleTextField=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTextField",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"type",type:{name:"string"}},{name:"inputModeType",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"variant",type:{name:"string"}},{name:"maxLength",type:{name:"number"}},{name:"minLength",type:{name:"number"}},{name:"max",type:{name:"number"}},{name:"min",type:{name:"number"}},{name:"placeholder",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"readonly",type:{name:"boolean"}},{name:"required",type:{name:"boolean"}},{name:"counter",type:{name:"boolean"}},{name:"size",type:{name:"string"}},{name:"value",type:{name:"string"}},{name:"ariaDetailedId",type:{name:"string"}},{name:"inputId",type:{name:"string"}},{name:"inputAutofocus",type:{name:"boolean"}},{name:"inputAutocomplete",type:{name:"string"}},{name:"experimentalControlled",type:{name:"boolean"}},{name:"hideLabelVisually",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleInput",type:{names:["undefined"]}},{name:"scale-input",type:{names:["undefined"]}},{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}},{name:"scaleFocus",type:{names:["undefined"]}},{name:"scale-focus",type:{names:["undefined"]}},{name:"scaleBlur",type:{names:["undefined"]}},{name:"scale-blur",type:{names:["undefined"]}},{name:"scaleKeyDown",type:{names:["undefined"]}},{name:"scale-keydown",type:{names:["undefined"]}}],slots:[{name:"default"}]};var ICON="M16.471,8.321 L12.613594,0.502886112 L8.755,8.321 L0.126435258,9.57533801 L6.37,15.66 L4.89610548,24.2548735 L12.613,20.197 L20.3310826,24.2548735 L18.856,15.66 L25.1007528,9.57533801 L16.471,8.321 Z M9.41891527,9.23556376 L12.613,2.761 L15.8082728,9.23556376 L22.951,10.273 L17.7826928,15.3122039 L19.003,22.427 L12.613594,19.067774 L6.223,22.427 L7.44449521,15.3122039 L2.275,10.273 L9.41891527,9.23556376 Z",TextField_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleTextField:ScaleTextField},props:Object.assign({label:String},ScaleTextField.props),template:'\n  <div style="padding: 20px 0 20px 0;">\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :aria-detailed-id="ariaDetailedId"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      :hide-label-visually="hideLabelVisually"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n    </div>\n  ',methods:{scaleChange:Object(addon_actions_dist_esm.action)("scaleChange"),scaleFocus:Object(addon_actions_dist_esm.action)("scaleFocus"),scaleBlur:Object(addon_actions_dist_esm.action)("scaleBlur"),scaleKeyDown:Object(addon_actions_dist_esm.action)("scaleKeyDown")}}},TextField_stories_StorySectionsTemplate=function StorySectionsTemplate(args,_ref2){_ref2.argTypes;return{components:{ScaleTextField:ScaleTextField},props:Object.assign({label:String},ScaleTextField.props),template:'\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  ',methods:{scaleChange:Object(addon_actions_dist_esm.action)("scaleChange"),scaleFocus:Object(addon_actions_dist_esm.action)("scaleFocus"),scaleBlur:Object(addon_actions_dist_esm.action)("scaleBlur"),scaleKeyDown:Object(addon_actions_dist_esm.action)("scaleKeyDown")}}},layoutProps={ICON:ICON,Template:TextField_stories_Template,StorySectionsTemplate:TextField_stories_StorySectionsTemplate};function MDXContent(_ref3){var components=_ref3.components,props=_objectWithoutProperties(_ref3,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Text Field",component:ScaleTextField,argTypes:{resize:{control:{type:"select",options:["unset","none","vertical","horizontal"]}},type:{control:{type:"select",options:["email","hidden","number","password","tel","text","date","month","week","time","datetime-local"]}},inputModeType:{control:{type:"select",options:["none","text","decimal","numeric","tel","search","email","url"]}},size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Text Field"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"An input"},mdxType:"Story"},TextField_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-text-field {\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --radius: var(--telekom-radius-standard);\n  --border: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);\n  --border-error: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-standard);\n  --border-success: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-success-standard);\n  --border-warning: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-warning-standard);\n  --border-color-hover: var(--telekom-color-ui-border-hovered);\n  --border-color-focus: var(--telekom-color-ui-border-hovered);\n  --border-color-disabled: var(--telekom-color-ui-border-disabled);\n  --background-color-hover: var(--telekom-color-ui-state-fill-hovered);\n  --background-color-disabled: none;\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --height: 44px;\n  --spacing-x: var(--telekom-spacing-composition-space-05);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-disabled: none;\n  --border-color-readonly: var(--telekom-color-ui-border-disabled);\n  --background-readonly: var(--telekom-color-ui-disabled);\n\n  /* meta */\n  --font-weight-meta: var(--telekom-line-weight-bold);\n  --font-size-meta: var(--telekom-typography-font-size-small);\n  --line-height-meta: var(--telekom-typography-line-spacing-standard);\n  --spacing-y-meta: var(--telekom-spacing-composition-space-03);\n  --color-meta: var(--telekom-color-text-and-icon-standard);\n  --color-meta-error: var(--telekom-color-text-and-icon-functional-danger);\n\n  /* control */\n  --spacing-control: 1.125rem\n    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem\n    calc(0.75rem - var(--telekom-spacing-composition-space-01));\n  --transition-control: var(--transition);\n  --background-control: var(--telekom-color-ui-state-fill-standard);\n  --margin-bottom-control: var(--telekom-spacing-composition-space-03);\n\n  /* counter */\n  --transition-counter: var(--transition);\n  --color-counter-error: var(--color-meta-error);\n\n  /* helper-text */\n  --font-size-helper-text: var(--telekom-typography-font-size-small);\n  --line-height-helper-text: 1.35;\n  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);\n  --color-helper-text: var(\n    --telekom-color-text-and-icon-functional-informational\n  );\n  --color-helper-text-error: var(--color-meta-error);\n  --color-helper-text-success: var(\n    --telekom-color-text-and-icon-functional-success\n  );\n  --color-helper-text-warning: var(\n    --telekom-color-text-and-icon-functional-warning\n  );\n  --color-helper-text-neutral: var(--telekom-color-text-and-icon-additional);\n  --helper-text-icon-size: 11px;\n\n  /* placeholder */\n  --transition-placeholder: var(--transition);\n  --color-placeholder: var(--telekom-color-text-and-icon-additional);\n\n  /* label */\n  --color-label: var(--telekom-color-text-and-icon-additional);\n  --color-label-readonly: var(--telekom-color-text-and-icon-standard);\n  --z-index-label: var(--scl-z-index-10);\n  --transition-label: var(--transition);\n}\n")),Object(esm.b)("h2",{id:"text-with-events"},"Text With Events"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Text With Events",args:{label:"Text With Events"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-text-field id=\"text-field\" label=\"Text With Events\"></scale-text-field>\n\n<script>\n  const textField = document.getElementById('text-field');\n  textField.addEventListener('scale-change', (event) => {\n    /* ... */\n  });\n  textField.addEventListener('scale-blur', (event) => {\n    /* ... */\n  });\n  textField.addEventListener('scale-focus', (event) => {\n    /* ... */\n  });\n  textField.addEventListener('scale-keydown', (event) => {\n    /* ... */\n  });\n<\/script>\n")),Object(esm.b)("h2",{id:"placeholder"},"Placeholder"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Placeholder",args:{label:"Placeholder",placeholder:"this is the placeholder"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="Placeholder"\n  placeholder="this is the placeholder"\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{label:"Helper Text",helperText:"Make sure to fill this"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="Helper Text"\n  helper-text="Make sure to fill this"\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"with-error"},"With Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Error",args:{label:"With Error",invalid:!0,helperText:"Something is wrong"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="With Error"\n  helper-text="Something is wrong"\n  invalid\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"with-warning"},"With Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Warning",args:{label:"With Warning",variant:"warning",helperText:"Something with warning"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="With Error"\n  helper-text="Something with warning"\n  variant="warning"\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"with-success"},"With Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Success",args:{label:"With Success",variant:"success",helperText:"Something is successful"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="With Success"\n  helper-text="Something is successful"\n  variant="success"\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",disabled:!0},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field label="Disabled" disabled></scale-text-field>\n')),Object(esm.b)("h2",{id:"read-only"},"Read Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Read Only",args:{label:"Read only",readonly:!0,value:"This cannot be changed"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="Read only"\n  value="This cannot be changed"\n  readonly\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"max-length-with-counter"},"Max Length With Counter"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Max Length With Counter",args:{label:"Max Length With Counter",maxLength:10,counter:!0},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="Max Length With Counter"\n  max-length="10"\n  counter\n></scale-text-field>\n')))}MDXContent.isMDXComponent=!0;var standard=TextField_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"An input"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n  <div style="padding: 20px 0 20px 0;">\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :aria-detailed-id="ariaDetailedId"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      :hide-label-visually="hideLabelVisually"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n    </div>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var textWithEvents=TextField_stories_StorySectionsTemplate.bind({});textWithEvents.storyName="Text With Events",textWithEvents.args={label:"Text With Events"},textWithEvents.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var placeholder=TextField_stories_StorySectionsTemplate.bind({});placeholder.storyName="Placeholder",placeholder.args={label:"Placeholder",placeholder:"this is the placeholder"},placeholder.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var helperText=TextField_stories_StorySectionsTemplate.bind({});helperText.storyName="Helper Text",helperText.args={label:"Helper Text",helperText:"Make sure to fill this"},helperText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var withError=TextField_stories_StorySectionsTemplate.bind({});withError.storyName="With Error",withError.args={label:"With Error",invalid:!0,helperText:"Something is wrong"},withError.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var withWarning=TextField_stories_StorySectionsTemplate.bind({});withWarning.storyName="With Warning",withWarning.args={label:"With Warning",variant:"warning",helperText:"Something with warning"},withWarning.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var withSuccess=TextField_stories_StorySectionsTemplate.bind({});withSuccess.storyName="With Success",withSuccess.args={label:"With Success",variant:"success",helperText:"Something is successful"},withSuccess.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var disabled=TextField_stories_StorySectionsTemplate.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var readOnly=TextField_stories_StorySectionsTemplate.bind({});readOnly.storyName="Read Only",readOnly.args={label:"Read only",readonly:!0,value:"This cannot be changed"},readOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var maxLengthWithCounter=TextField_stories_StorySectionsTemplate.bind({});maxLengthWithCounter.storyName="Max Length With Counter",maxLengthWithCounter.args={label:"Max Length With Counter",maxLength:10,counter:!0},maxLengthWithCounter.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var componentMeta={title:"Components/Text Field",component:ScaleTextField,argTypes:{resize:{control:{type:"select",options:["unset","none","vertical","horizontal"]}},type:{control:{type:"select",options:["email","hidden","number","password","tel","text","date","month","week","time","datetime-local"]}},inputModeType:{control:{type:"select",options:["none","text","decimal","numeric","tel","search","email","url"]}},size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},includeStories:["standard","textWithEvents","placeholder","helperText","withError","withWarning","withSuccess","disabled","readOnly","maxLengthWithCounter"]},mdxStoryNameToKey={Standard:"standard","Text With Events":"textWithEvents",Placeholder:"placeholder","Helper Text":"helperText","With Error":"withError","With Warning":"withWarning","With Success":"withSuccess",Disabled:"disabled","Read Only":"readOnly","Max Length With Counter":"maxLengthWithCounter"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/tooltip/Tooltip.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Tooltip_stories_Template})),__webpack_require__.d(__webpack_exports__,"SlotTemplate",(function(){return SlotTemplate})),__webpack_require__.d(__webpack_exports__,"FocusTemplate",(function(){return FocusTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"placementLeft",(function(){return placementLeft})),__webpack_require__.d(__webpack_exports__,"placementRight",(function(){return placementRight})),__webpack_require__.d(__webpack_exports__,"placementBelow",(function(){return placementBelow})),__webpack_require__.d(__webpack_exports__,"trigger",(function(){return trigger})),__webpack_require__.d(__webpack_exports__,"slot",(function(){return slot})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),tooltip_ScaleTooltipvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{content:{type:String},placement:{type:String},disabled:{type:Boolean},distance:{type:Number},opened:{type:Boolean},trigger:{type:String},flip:{type:Boolean},styles:String},methods:{"scale-show":function scaleShow($event){action("scale-show"),this.$emit("scale-show",$event)},"scale-before-show":function scaleBeforeShow($event){action("scale-before-show"),this.$emit("scale-before-show",$event)},"scale-before-hide":function scaleBeforeHide($event){action("scale-before-hide"),this.$emit("scale-before-hide",$event)},"scale-hide":function scaleHide($event){action("scale-hide"),this.$emit("scale-hide",$event)}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(tooltip_ScaleTooltipvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",{staticStyle:{padding:"30px 30px 30px 70px"}},[_c("scale-tooltip",{attrs:{content:_vm.content,placement:_vm.placement,disabled:_vm.disabled,distance:_vm.distance,opened:_vm.opened,trigger:_vm.trigger,flip:_vm.flip}},[_vm._t("content"),_vm._v(" "),_c("scale-button",{attrs:{disabled:_vm.disabled}},[_vm._v("Hover me")])],2)],1)}),[],!1,null,null,null).exports;var ScaleTooltip=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTooltip",description:"",tags:{},props:[{name:"content",type:{name:"string"}},{name:"placement",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"distance",type:{name:"number"}},{name:"opened",type:{name:"boolean"}},{name:"trigger",type:{name:"string"}},{name:"flip",type:{name:"boolean"}},{name:"styles",type:{name:"string"}}],events:[{name:"scale-show",type:{names:["undefined"]}},{name:"scale-before-show",type:{names:["undefined"]}},{name:"scale-before-hide",type:{names:["undefined"]}},{name:"scale-hide",type:{names:["undefined"]}}],slots:[{name:"content"}]};var Tooltip_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleTooltip:ScaleTooltip},props:Object.assign({},ScaleTooltip.props),template:'\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  '}},SlotTemplate=function SlotTemplate(args,_ref2){_ref2.argTypes;return{template:'\n    <div style="padding: 30px 30px 30px 70px">\n      <scale-tooltip trigger="click">\n        <span slot="content">\n          I\'m a HTML-tooltip\n          <scale-link href="https://github.com/telekom/scale"\n          >with a link</scale-link\n          >\n        </span>\n        <scale-button>Click me</scale-button>\n      </scale-tooltip>\n    </div>\n  '}},FocusTemplate=function FocusTemplate(args,_ref3){_ref3.argTypes;return{template:'\n    <div style="padding: 30px 30px 30px 70px">\n      <scale-tooltip trigger="focus" content="Tooltip">\n        <scale-button>Focus me</scale-button>\n      </scale-tooltip>\n    </div>\n  '}},layoutProps={Template:Tooltip_stories_Template,SlotTemplate:SlotTemplate,FocusTemplate:FocusTemplate};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Tooltip",component:ScaleTooltip,argTypes:{content:{control:{type:"text"}},placement:{control:{defaultValue:"top",type:"select",options:["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]}},disabled:{defaultValue:!1,control:{type:"boolean"}},distance:{control:{type:"text"}},opened:{defaultValue:!1,control:{type:"boolean"}},trigger:{defaultValue:"hover focus",control:{type:"text"}},flip:{defaultValue:!0,control:{type:"boolean"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Tooltip"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{content:"Tooltip"},mdxType:"Story"},Tooltip_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip">\n  <scale-button>Hover me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  /* tooltip */\n  --radius: var(--telekom-radius-small);\n  --background: var(--telekom-color-background-surface-highlight);\n  --color: var(--telekom-color-text-and-icon-white-standard);\n  --font-weight: var(--telekom-typography-font-weight-regular);\n  --font-size: var(--telekom-typography-font-size-body);\n  --line-height: var(--telekom-typography-line-spacing-standard);\n  --spacing: var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-04);\n  --width: auto;\n\n  /* arrow */\n  --arrow-size: 12px;\n\n  /* tooltip hide */\n  --transition-delay-hide: var(--telekom-motion-duration-instant);\n  --transition-duration-hide: var(--telekom-motion-duration-immediate);\n  --transition-timing-function-hide: var(--telekom-motion-easing-standard);\n\n  /* tooltip show */\n  --transition-duration-show: var(--telekom-motion-duration-immediate);\n  --transition-timing-function-show: var(--telekom-motion-easing-standard);\n  --z-index: var(--scl-z-index-70);  \n}\n")),Object(esm.b)("h2",{id:"placement"},"Placement"),Object(esm.b)("h3",{id:"left"},"Left"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Placement-Left",args:{content:"Tooltip",placement:"left"},mdxType:"Story"},Tooltip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip" placement="left">\n  <scale-button>Hover me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h3",{id:"right"},"Right"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Placement-Right",args:{content:"Tooltip",placement:"right"},mdxType:"Story"},Tooltip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip" placement="right">\n  <scale-button>Hover me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h3",{id:"below"},"Below"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Placement-Below",args:{content:"Tooltip",placement:"bottom"},mdxType:"Story"},Tooltip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip" placement="bottom">\n  <scale-button>Hover me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h2",{id:"trigger"},"Trigger"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Trigger",args:{content:"Tooltip",trigger:"focus"},mdxType:"Story"},FocusTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip" trigger="focus">\n  <scale-button>Focus me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h2",{id:"slot"},"Slot"),Object(esm.b)("h3",{id:"link-example"},"Link Example"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Slot",args:{},mdxType:"Story"},SlotTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip trigger="click">\n  <span slot="content">\n    I\'m a HTML-tooltip\n    <scale-link href="https://github.com/telekom/scale">with a link</scale-link>\n  </span>\n  <scale-button>Click me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{content:"Tooltip",disabled:!0},mdxType:"Story"},Tooltip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip" disabled="true">\n  <scale-button disabled>Hover me</scale-button>\n</scale-tooltip>\n')))}MDXContent.isMDXComponent=!0;var standard=Tooltip_stories_Template.bind({});standard.storyName="Standard",standard.args={content:"Tooltip"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTooltip\n  },\n  props: { ...ScaleTooltip.props\n  },\n  template: `\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  `\n})'}};var placementLeft=Tooltip_stories_Template.bind({});placementLeft.storyName="Placement-Left",placementLeft.args={content:"Tooltip",placement:"left"},placementLeft.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTooltip\n  },\n  props: { ...ScaleTooltip.props\n  },\n  template: `\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  `\n})'}};var placementRight=Tooltip_stories_Template.bind({});placementRight.storyName="Placement-Right",placementRight.args={content:"Tooltip",placement:"right"},placementRight.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTooltip\n  },\n  props: { ...ScaleTooltip.props\n  },\n  template: `\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  `\n})'}};var placementBelow=Tooltip_stories_Template.bind({});placementBelow.storyName="Placement-Below",placementBelow.args={content:"Tooltip",placement:"bottom"},placementBelow.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTooltip\n  },\n  props: { ...ScaleTooltip.props\n  },\n  template: `\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  `\n})'}};var trigger=FocusTemplate.bind({});trigger.storyName="Trigger",trigger.args={content:"Tooltip",trigger:"focus"},trigger.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  template: `\n    <div style="padding: 30px 30px 30px 70px">\n      <scale-tooltip trigger="focus" content="Tooltip">\n        <scale-button>Focus me</scale-button>\n      </scale-tooltip>\n    </div>\n  `\n})'}};var slot=SlotTemplate.bind({});slot.storyName="Slot",slot.args={},slot.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  template: `\n    <div style="padding: 30px 30px 30px 70px">\n      <scale-tooltip trigger="click">\n        <span slot="content">\n          I\'m a HTML-tooltip\n          <scale-link href="https://github.com/telekom/scale"\n          >with a link</scale-link\n          >\n        </span>\n        <scale-button>Click me</scale-button>\n      </scale-tooltip>\n    </div>\n  `\n})'}};var disabled=Tooltip_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={content:"Tooltip",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTooltip\n  },\n  props: { ...ScaleTooltip.props\n  },\n  template: `\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  `\n})'}};var componentMeta={title:"Components/Tooltip",component:ScaleTooltip,argTypes:{content:{control:{type:"text"}},placement:{control:{defaultValue:"top",type:"select",options:["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]}},disabled:{defaultValue:!1,control:{type:"boolean"}},distance:{control:{type:"text"}},opened:{defaultValue:!1,control:{type:"boolean"}},trigger:{defaultValue:"hover focus",control:{type:"text"}},flip:{defaultValue:!0,control:{type:"boolean"}}},includeStories:["standard","placementLeft","placementRight","placementBelow","trigger","slot","disabled"]},mdxStoryNameToKey={Standard:"standard","Placement-Left":"placementLeft","Placement-Right":"placementRight","Placement-Below":"placementBelow",Trigger:"trigger",Slot:"slot",Disabled:"disabled"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/contact/Contributing.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Contributing_en='# Contributing to Scale\n\nScale enables the Telekom developer community to share their skills. Whether you fix a bug, improve usability or build entire new components: Contribution is what makes Scale an invaluable asset to the Telekom product ecosystem.\n\n## Open Source, Open Beta\n\nOur open-source design system is currently an open beta and it is growing and evolving every day.\n\n## How You Can Contribute\n\n- Report an issue in our [repository](https://github.com/telekom/scale/issues)\n- Fix a bug and send a [pull request](https://github.com/telekom/scale/pulls)\n- If you want to contribute design work and new components, send an e-mail to <a href="mailto:contact@brand-design.telekom.com">contact@brand-design.telekom.com</a>\n\nPlease refer to the [Contribution Guidelines](https://github.com/telekom/scale/blob/master/CONTRIBUTING.md) on GitHub and follow the [Code of Conduct](https://github.com/telekom/scale/blob/master/CODE_OF_CONDUCT.md).\n\n## Development Workflow for Contributions\n\n### Pull Requests\n\nWhen opening a new MR it is advised to branch off the latest `master` branch. We loosely follow the `Git flow` standards for branch naming e.g. `feat|feature`, `fix`, `chore`, `test` etc. All pull requests are then merged into `master` and released through the `CI` pipeline via the `release` branch.\n\n### Tests\n\nWhen developing new features or components it is required to provide `unit tests` and `end to end` tests if appropriate and aim at 100% test coverage. In addition we use `screenshot tests` for components via `jest-image-snapshot`. Stencil uses `Jest` as the testing framework, please take a look at the existing components as an example or visit the official documentation:\n\n- https://stenciljs.com/docs/testing-overview\n- https://jestjs.io/\n\n### Tooling\n\nWe strongly recommend you use the `VSCode text editor` since most of our code is written in `Typescript` and it offers amazing support for the language.\n',Contributing_de='# An Scale mitwirken\n\nScale ermöglicht es der Telekom Entwickler-Community ihre Fähigkeiten zu teilen. Ob du einen Fehler behebst, die Benutzbarkeit verbesserst oder neue Komponenten entwickelst: Diese Beiträge machen Scale zu einem wertvollen Asset im Produkt-Ökosystem der Telekom.\n\n## Open-source, Open Beta\n\nUnser open-source Designsystem ist derzeit eine Open Beta und entwickelt sich stetig weiter.\n\n## Wie du zu Scale beiträgst\n\n- Sende ein Issue in unserem [Repository](https://github.com/telekom/scale/issues)\n- Behebe einen Fehler und sende uns einen [Pull request](https://github.com/telekom/scale/pulls)\n- Wenn du Design-Verbesserungen und neue Komponenten beitragen willst, wende Dich an <a href="mailto:contact@brand-design.telekom.com">contact@brand-design.telekom.com</a>\n\nBeachte die [Contribution Guidelines](https://github.com/telekom/scale/blob/master/CONTRIBUTING.md) und halte Dich an unseren [Code of Conduct](https://github.com/telekom/scale/blob/master/CODE_OF_CONDUCT.md).\n\n## Unser Arbeits-Ablauf für Beiträge\n\n### Pull Requests\n\nWenn du einen neuen Pull Request öffnest, starte mit dem aktuellen `master` Branch. Wir folgen wenn möglich den `Git flow` Standards für Benamung: z.B. `feat|feature`, `fix`, `chore`, `test` etc. Alle Pull-Requests werden in `master` gemerged und durch die `CI` Pipeline im `release` -Branch veröffentlicht.\n\n### Tests\n\nWenn neue Features und Komponenten entwickelt werden, benötigen wir `unit tests` und `end to end` Tests. Wir zielen auf 100% Test-Abdeckung. Zusätzlich nutzen wir `screenshot tests` für Komponenten in `jest-image-snapshot`. Stencil nutz `Jest` als Test-Framework. Bitte sieh Dir die existierenden Komponenten als Beispiele an und lies die offizielle Dokumentation:\n\n- https://stenciljs.com/docs/testing-overview\n- https://jestjs.io/\n\n### Tooling\n\nWir empfehlen die Nutzung des `VSCode text editor` da er `Typescript` optimal unterstützt.\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Contact/Contributing to Scale",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Contributing_en:Contributing_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Contact/Contributing to Scale",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Contributing_en:Contributing_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/contact/Feedback.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Feedback_en='# Your Feedback to Scale\n\nThe Scale design system is always evolving. To be better we need your feedback:\n\n## How to Provide Feedback\n\n- Leave a comment on [our repository](https://github.com/telekom/scale)\n- Open an issue on [our repository](https://github.com/telekom/scale/issues)\n- For feedback about design and design requirements, send an e-mail to <a href="mailto:contact@brand-design.telekom.com">contact@brand-design.telekom.com</a>\n',Feedback_de='# Dein Feedback zu Scale\n\nDas Scale Design System entwickelt sich ständig weiter. Um uns ständig zu verbessern, brauchen wir dein Feedback:\n\n## Wie gebe ich Feedback zu Scale?\n\n- Hinterlasse Kommentare zu [unserem Repository](https://github.com/telekom/scale)\n- Eröffne ein Issue in [unserem Repository](https://github.com/telekom/scale/issues)\n- Für Feedback zu Design und Design-Anforderungen, sende eine E-Mail an <a href="mailto:contact@brand-design.telekom.com">contact@brand-design.telekom.com</a>\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Contact/Your Feedback",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Feedback_en:Feedback_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Contact/Your Feedback",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Feedback_en:Feedback_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/brand-header-navigation/BrandHeader.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"standard",(function(){return BrandHeader_stories_standard})),__webpack_require__.d(__webpack_exports__,"customMainNavigation",(function(){return BrandHeader_stories_customMainNavigation})),__webpack_require__.d(__webpack_exports__,"customIconNavigation",(function(){return BrandHeader_stories_customIconNavigation})),__webpack_require__.d(__webpack_exports__,"customSectorNavigation",(function(){return BrandHeader_stories_customSectorNavigation})),__webpack_require__.d(__webpack_exports__,"customAddonNavigation",(function(){return BrandHeader_stories_customAddonNavigation})),__webpack_require__.d(__webpack_exports__,"customLogo",(function(){return BrandHeader_stories_customLogo})),__webpack_require__.d(__webpack_exports__,"customMobileMenu",(function(){return BrandHeader_stories_customMobileMenu})),__webpack_require__.d(__webpack_exports__,"standaloneHeader",(function(){return BrandHeader_stories_standaloneHeader}));__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),fixtures=__webpack_require__("./stories/deprecated/brand-header-navigation/fixtures.js"),brand_header_navigation_AppShellvue_type_script_lang_js_={props:{logoTitle:String,logoHideTitle:Boolean,logoHref:String,logoAriaDescribedBy:String,logoClick:Function,portalName:String,claimLang:String,mainNavigation:String,iconNavigation:String,sectorNavigation:String,userNavigation:String,addonNavigation:String,activeRouteId:String,activeSectorId:String,userMenuAriaLabel:String}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(brand_header_navigation_AppShellvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-app-shell",{attrs:{"logo-click":_vm.logoClick,"logo-title":_vm.logoTitle,"logo-hide-title":_vm.logoHideTitle,"logo-href":_vm.logoHref,"logo-aria-described-by":_vm.logoAriaDescribedBy,"portal-name":_vm.portalName,"claim-lang":_vm.claimLang,"main-navigation":_vm.mainNavigation,"icon-navigation":_vm.iconNavigation,"sector-navigation":_vm.sectorNavigation,"addon-navigation":_vm.addonNavigation,"user-navigation":_vm.userNavigation,"active-route-id":_vm.activeRouteId,"active-sector-id":_vm.activeRouteId,"user-menu-aria-label":_vm.userMenuAriaLabel}},[_vm._t("default"),_vm._v(" "),_vm._t("header"),_vm._v(" "),_vm._t("footer")],2)}),[],!1,null,null,null).exports;var AppShell=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"AppShell",description:"",tags:{},props:[{name:"logoTitle",type:{name:"string"}},{name:"logoHideTitle",type:{name:"boolean"}},{name:"logoHref",type:{name:"string"}},{name:"logoAriaDescribedBy",type:{name:"string"}},{name:"logoClick",type:{name:"func"}},{name:"portalName",type:{name:"string"}},{name:"claimLang",type:{name:"string"}},{name:"mainNavigation",type:{name:"string"}},{name:"iconNavigation",type:{name:"string"}},{name:"sectorNavigation",type:{name:"string"}},{name:"userNavigation",type:{name:"string"}},{name:"addonNavigation",type:{name:"string"}},{name:"activeRouteId",type:{name:"string"}},{name:"activeSectorId",type:{name:"string"}},{name:"userMenuAriaLabel",type:{name:"string"}}],slots:[{name:"default"},{name:"header"},{name:"footer"}]};var setColorMode=function setColorMode(){try{document.body.dataset.mode=JSON.parse(window.localStorage.getItem("persistedColorMode"))}catch(e){}},layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Brand Header & Navigation",component:AppShell,argTypes:{activeRouteId:{control:{type:"text"}},activeSectorId:{control:{type:"text"}},logoTitle:{control:{type:"text"}},logoHideTitle:{control:{type:"boolean"}},logoHref:{control:{type:"text"}},logoAriaDescribedBy:{control:{type:"text"}},logoClick:{control:{type:"disabled"},description:"logo click event handler custom function"},mainNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},iconNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},sectorNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},addonNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},userNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"},portalName:{control:{type:"text"},description:"optionally replaces the sectorNavigation with a single bold title"},claimLang:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_lat","mk_kyr","ro","sk"]}},userMenuAriaLabel:{control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Brand Header & Navigation"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("div",{class:"Notification"},Object(esm.b)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(esm.b)("g",{fill:"currentColor"},Object(esm.b)("g",null,Object(esm.b)("path",{"fill-rule":"evenodd",d:"M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"})))),Object(esm.b)("span",null,"There is a newer version of the Brand Header available: ",Object(esm.b)("a",{href:"?path=/docs/components-telekom-brand-header-navigation--standard-header"},"Telekom Brand Header & Navigation"))),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),userNavigation:JSON.stringify(fixtures.f),activeRouteId:"Third Level 24",activeSectorId:"Personal38",logoTitle:"Custom Logo Title",logoHref:"#custom-href"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-shell claim-lang="de" logo-title="App Name" logo-href="/">\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll to test header behavior\n  </div>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll more to test header behavior\n  </div>\n</scale-app-shell>\n')),Object(esm.b)("h2",{id:"using-scale-app-shell-over-scale-header"},"Using scale-app-shell over scale-header"),Object(esm.b)("p",null,"Using scale-app-shell provides the page with the common region ",Object(esm.b)("inlineCode",{parentName:"p"},"content"),", which helps you fulfill accessibility requirements. The scale-app-shell component includes both the Header and optionally the ",Object(esm.b)("a",{href:"?path=/docs/components-footer--standard"},"Footer")," component. However, there is a story ",Object(esm.b)("a",{href:"?path=/docs/components-brand-header-navigation--standalone-header"},"demonstrating the standalone mode of the Header")," for special cases."),Object(esm.b)("h2",{id:"dropdown-navigation-beta"},"Dropdown Navigation Beta"),Object(esm.b)("p",null,"You can find code examples where the Flyout Menu Beta component is implemented in the ",Object(esm.b)("a",{href:"?path=/story/beta-components-flyout-menu--brand-header-primary-navigation"},"Primary navigation")," and the ",Object(esm.b)("a",{href:"?path=/story/beta-components-flyout-menu--brand-header-user-menu"},"User menu"),"."),Object(esm.b)("h2",{id:"custom-main-navigation"},"Custom Main Navigation"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Main Navigation",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,methods:{handleOpen:function handleOpen(){this.$refs.header.isMegaMenuVisible=!0,this.$refs.navMainWithMegaMenu.isMegaMenuVisible=!0,this.$refs.header.megaMenuVisible=!0,this.$refs.navMainWithMegaMenu.megaMenuVisible=!0},handleClose:function handleClose(){this.$refs.header.isMegaMenuVisible=!1,this.$refs.navMainWithMegaMenu.isMegaMenuVisible=!1,this.$refs.header.megaMenuVisible=!1,this.$refs.navMainWithMegaMenu.megaMenuVisible=!1}},template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                ref="header"\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n                @keydown="$event.key === \'Escape\' && handleClose()"\n            >\n                <div slot="menu-main">\n                  <scale-nav-main name="Custom Item #1"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #2" id="nav-main-with-mega-menu" ref="navMainWithMegaMenu" @mouseenter="handleOpen" @mouseleave="handleClose" @keydown="$event.key === \'Enter\' && handleOpen()">\n                    <app-mega-menu>\n                      <div slot="custom-body"><pre>custom-body</pre></div>\n                    </app-mega-menu></scale-nav-main>\n                  <scale-nav-main active name="Custom Item #3"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #4"></scale-nav-main>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<body>\n  <scale-app-shell>\n    <scale-app-header slot="header" id="header">\n      <div slot="menu-main">\n        <scale-nav-main name="Custom Item #1"></scale-nav-main>\n        <scale-nav-main name="Custom Item #2" id="nav-main-with-mega-menu">\n          <app-mega-menu>\n            <div slot="custom-body"><pre>custom-body</pre></div>\n          </app-mega-menu>\n        </scale-nav-main>\n        \x3c!--\n          Deprecated:\n          <scale-nav-main is-active name="Custom Item #3"></scale-nav-main>\n        --\x3e\n        <scale-nav-main active name="Custom Item #3"></scale-nav-main>\n        <scale-nav-main name="Custom Item #4"></scale-nav-main>\n      </div>\n    </scale-app-header>\n    <div style="height: 800px; padding: 48px 0;">\n      Scroll to test header behavior\n    </div>\n    <div style="height: 800px; padding: 48px 0;">\n      Scroll more to test header behavior\n    </div>\n  </scale-app-shell>\n  <script>\n    const header = document.getElementById(\'header\');\n    header.mainNavigation = [\n      /* ... */\n    ];\n    header.iconNavigation = [\n      /* ... */\n    ];\n    header.addonNavigation = [\n      /* ... */\n    ];\n    header.sectionNavigation = [\n      /* ... */\n    ];\n    const navMainWithMegaMenu = document.getElementById(\n      \'nav-main-with-mega-menu\'\n    );\n    header.addEventListener(\'keydown\', function (event) {\n      if (event.key === \'Escape\') {\n        // Deprecated\n        navMainWithMegaMenu.isMegaMenuVisible = false;\n        // Deprecated\n        header.isMegaMenuVisible = false;\n        navMainWithMegaMenu.megaMenuVisible = false;\n        header.megaMenuVisible = false;\n      }\n    });\n    navMainWithMegaMenu.addEventListener(\'mouseenter\', function () {\n      // Deprecated\n      navMainWithMegaMenu.isMegaMenuVisible = true;\n      // Deprecated\n      header.isMegaMenuVisible = true;\n      navMainWithMegaMenu.megaMenuVisible = true;\n      header.megaMenuVisible = true;\n    });\n    navMainWithMegaMenu.addEventListener(\'mouseleave\', function () {\n      // Deprecated\n      navMainWithMegaMenu.isMegaMenuVisible = false;\n      // Deprecated\n      header.isMegaMenuVisible = false;\n      navMainWithMegaMenu.megaMenuVisible = false;\n      header.megaMenuVisible = false;\n    });\n    navMainWithMegaMenu.addEventListener(\'keydown\', function (event) {\n      if (event.key === \'Enter\') {\n        // Deprecated\n        navMainWithMegaMenu.isMegaMenuVisible = true;\n        // Deprecated\n        header.isMegaMenuVisible = true;\n        navMainWithMegaMenu.megaMenuVisible = true;\n        header.megaMenuVisible = true;\n      }\n    });\n  <\/script>\n</body>\n')),Object(esm.b)("h2",{id:"custom-icon-navigation"},"Custom Icon Navigation"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Icon Navigation",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-icon">\n                  <scale-nav-icon icon="action-mute">\n                    Mute\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-play">\n                    Play\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-pause">\n                    Pause\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-fast-forward">\n                    Forward\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-favorite">\n                    Favorite\n                  </scale-nav-icon>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-shell>\n  <scale-app-header slot="header" id="header">\n    <div slot="menu-icon">\n      <scale-nav-icon icon="action-mute"> Mute </scale-nav-icon>\n      <scale-nav-icon icon="action-play"> Play </scale-nav-icon>\n      <scale-nav-icon icon="action-pause"> Pause </scale-nav-icon>\n      <scale-nav-icon icon="action-fast-forward"> Forward </scale-nav-icon>\n      <scale-nav-icon icon="action-favorite"> Favorite </scale-nav-icon>\n    </div>\n  </scale-app-header>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll to test header behavior\n  </div>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll more to test header behavior\n  </div>\n</scale-app-shell>\n')),Object(esm.b)("h2",{id:"custom-sector-navigation"},"Custom Sector Navigation"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Sector Navigation",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-sector">\n                  <scale-nav-segment active="true" href="#custom-sector-1">\n                    Custom Sector #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-sector-2">\n                    Custom Sector #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-shell>\n  <scale-app-header slot="header" id="header">\n    <div slot="menu-sector">\n      \x3c!--\n        Deprecated:\n        <scale-nav-segment\n        is-active="true"\n        ...\n      >\n      --\x3e\n      <scale-nav-segment\n        active="true"\n        href="#custom-sector-1"\n        onclick="handleClick()"\n      >\n        Custom Sector #1\n      </scale-nav-segment>\n      <scale-nav-segment href="#custom-sector-2" onclick="handleClick()">\n        Custom Sector #2\n      </scale-nav-segment>\n    </div>\n  </scale-app-header>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll to test header behavior\n  </div>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll more to test header behavior\n  </div>\n</scale-app-shell>\n\n<script>\n  function handleClick() {\n    /* ... */\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"custom-addon-navigation"},"Custom Addon Navigation"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Addon Navigation",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-addon">\n                  <scale-nav-segment active="true" href="#custom-addon-1">\n                    Custom Addon #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-addon-2">\n                    Custom Addon #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-shell>\n  <scale-app-header slot="header" id="header">\n    <div slot="menu-addon">\n      \x3c!--\n        Deprecated:\n        <scale-nav-segment\n        is-active="true"\n        ...\n      >\n      --\x3e\n      <scale-nav-segment\n        active="true"\n        href="#custom-addon-1"\n        onclick="handleClick()"\n      >\n        Custom Addon #1\n      </scale-nav-segment>\n      <scale-nav-segment href="#custom-addon-2" onclick="handleClick()">\n        Custom Addon #2\n      </scale-nav-segment>\n    </div>\n  </scale-app-header>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll to test header behavior\n  </div>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll more to test header behavior\n  </div>\n</scale-app-shell>\n\n<script>\n  function handleClick() {\n    /* ... */\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"custom-logo"},"Custom Logo"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Logo",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :claim-lang="claimLang"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n                <div slot="logo">\n                    <scale-logo transparent variant="white" language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n                <div slot="logo-inverse">\n                    <scale-logo transparent language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-shell>\n  <scale-app-header slot="header" id="header">\n    <div slot="logo">\n      <scale-logo\n        transparent\n        variant="white"\n        language="en"\n        href="#custom"\n        logo-title="Custom"\n        styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"\n      ></scale-logo>\n    </div>\n    <div slot="logo-inverse">\n      <scale-logo\n        transparent\n        language=""\n        href="#custom"\n        logo-title="Custom"\n        styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"\n      ></scale-logo>\n    </div>\n  </scale-app-header>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll to test header behavior\n  </div>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll more to test header behavior\n  </div>\n</scale-app-shell>\n\n<script>\n  function handleClick() {\n    /* ... */\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"custom-mobile-menu"},"Custom Mobile Menu"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Mobile Menu",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                ref="header"\n                :main-navigation="mainNavigation"\n                :claim-lang="claimLang"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n              <div slot="menu-mobile"><pre>menu-mobile</pre></div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      ',mounted:function mounted(){var _this=this;document.body.addEventListener("keydown",(function(event){["Escape","Esc"].includes(event.key)&&(event.preventDefault(),_this.$refs.header&&_this.$refs.header.dispatchEvent(new Event("closeMenu")))}))}}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<body>\n  <scale-app-shell>\n    <scale-app-header slot=\"header\" id=\"header\">\n      <div slot=\"menu-mobile\"><pre>menu-mobile</pre></div>\n    </scale-app-header>\n    <div style=\"height: 800px; padding: 48px 0;\">\n      Scroll to test header behavior\n    </div>\n    <div style=\"height: 800px; padding: 48px 0;\">\n      Scroll more to test header behavior\n    </div>\n  </scale-app-shell>\n  <script>\n    const header = document.getElementById('header');\n    document.body.addEventListener('keydown', function (event) {\n      if (['Escape', 'Esc'].includes(event.key)) {\n        event.preventDefault();\n        header.dispatchEvent(new Event('closeMenu'));\n      }\n    });\n  <\/script>\n</body>\n")),Object(esm.b)("h2",{id:"standalone-header"},"Standalone Header"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standalone Header",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38",logoTitle:"Custom Logo Title",logoHref:"#custom-href"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-header\n            :logo-title="logoTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n          </scale-app-header>\n        </div>\n      '}}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-header claim-lang="en" logo-title="App Name" logo-href="/">\n</scale-app-header>\n')))}MDXContent.isMDXComponent=!0;var BrandHeader_stories_standard=function standard(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_standard.storyName="Standard",BrandHeader_stories_standard.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),userNavigation:JSON.stringify(fixtures.f),activeRouteId:"Third Level 24",activeSectorId:"Personal38",logoTitle:"Custom Logo Title",logoHref:"#custom-href"},BrandHeader_stories_standard.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customMainNavigation=function customMainNavigation(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,methods:{handleOpen:function handleOpen(){this.$refs.header.isMegaMenuVisible=!0,this.$refs.navMainWithMegaMenu.isMegaMenuVisible=!0,this.$refs.header.megaMenuVisible=!0,this.$refs.navMainWithMegaMenu.megaMenuVisible=!0},handleClose:function handleClose(){this.$refs.header.isMegaMenuVisible=!1,this.$refs.navMainWithMegaMenu.isMegaMenuVisible=!1,this.$refs.header.megaMenuVisible=!1,this.$refs.navMainWithMegaMenu.megaMenuVisible=!1}},template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                ref="header"\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n                @keydown="$event.key === \'Escape\' && handleClose()"\n            >\n                <div slot="menu-main">\n                  <scale-nav-main name="Custom Item #1"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #2" id="nav-main-with-mega-menu" ref="navMainWithMegaMenu" @mouseenter="handleOpen" @mouseleave="handleClose" @keydown="$event.key === \'Enter\' && handleOpen()">\n                    <app-mega-menu>\n                      <div slot="custom-body"><pre>custom-body</pre></div>\n                    </app-mega-menu></scale-nav-main>\n                  <scale-nav-main active name="Custom Item #3"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #4"></scale-nav-main>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_customMainNavigation.storyName="Custom Main Navigation",BrandHeader_stories_customMainNavigation.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customMainNavigation.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  methods: {\n    handleOpen: function () {\n      // Deprecated\n      this.$refs.header.isMegaMenuVisible = true; // Deprecated\n\n      this.$refs.navMainWithMegaMenu.isMegaMenuVisible = true;\n      this.$refs.header.megaMenuVisible = true;\n      this.$refs.navMainWithMegaMenu.megaMenuVisible = true;\n    },\n    handleClose: function () {\n      // Deprecated\n      this.$refs.header.isMegaMenuVisible = false; // Deprecated\n\n      this.$refs.navMainWithMegaMenu.isMegaMenuVisible = false;\n      this.$refs.header.megaMenuVisible = false;\n      this.$refs.navMainWithMegaMenu.megaMenuVisible = false;\n    }\n  },\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                ref="header"\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n                @keydown="$event.key === \'Escape\' && handleClose()"\n            >\n                <div slot="menu-main">\n                  <scale-nav-main name="Custom Item #1"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #2" id="nav-main-with-mega-menu" ref="navMainWithMegaMenu" @mouseenter="handleOpen" @mouseleave="handleClose" @keydown="$event.key === \'Enter\' && handleOpen()">\n                    <app-mega-menu>\n                      <div slot="custom-body"><pre>custom-body</pre></div>\n                    </app-mega-menu></scale-nav-main>\n                  <scale-nav-main active name="Custom Item #3"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #4"></scale-nav-main>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customIconNavigation=function customIconNavigation(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-icon">\n                  <scale-nav-icon icon="action-mute">\n                    Mute\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-play">\n                    Play\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-pause">\n                    Pause\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-fast-forward">\n                    Forward\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-favorite">\n                    Favorite\n                  </scale-nav-icon>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_customIconNavigation.storyName="Custom Icon Navigation",BrandHeader_stories_customIconNavigation.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customIconNavigation.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-icon">\n                  <scale-nav-icon icon="action-mute">\n                    Mute\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-play">\n                    Play\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-pause">\n                    Pause\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-fast-forward">\n                    Forward\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-favorite">\n                    Favorite\n                  </scale-nav-icon>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customSectorNavigation=function customSectorNavigation(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-sector">\n                  <scale-nav-segment active="true" href="#custom-sector-1">\n                    Custom Sector #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-sector-2">\n                    Custom Sector #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_customSectorNavigation.storyName="Custom Sector Navigation",BrandHeader_stories_customSectorNavigation.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customSectorNavigation.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-sector">\n                  <scale-nav-segment active="true" href="#custom-sector-1">\n                    Custom Sector #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-sector-2">\n                    Custom Sector #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customAddonNavigation=function customAddonNavigation(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-addon">\n                  <scale-nav-segment active="true" href="#custom-addon-1">\n                    Custom Addon #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-addon-2">\n                    Custom Addon #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_customAddonNavigation.storyName="Custom Addon Navigation",BrandHeader_stories_customAddonNavigation.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customAddonNavigation.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-addon">\n                  <scale-nav-segment active="true" href="#custom-addon-1">\n                    Custom Addon #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-addon-2">\n                    Custom Addon #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customLogo=function customLogo(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :claim-lang="claimLang"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n                <div slot="logo">\n                    <scale-logo transparent variant="white" language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n                <div slot="logo-inverse">\n                    <scale-logo transparent language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_customLogo.storyName="Custom Logo",BrandHeader_stories_customLogo.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customLogo.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :claim-lang="claimLang"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n                <div slot="logo">\n                    <scale-logo transparent variant="white" language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n                <div slot="logo-inverse">\n                    <scale-logo transparent language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customMobileMenu=function customMobileMenu(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                ref="header"\n                :main-navigation="mainNavigation"\n                :claim-lang="claimLang"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n              <div slot="menu-mobile"><pre>menu-mobile</pre></div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      ',mounted:function mounted(){var _this2=this;document.body.addEventListener("keydown",(function(event){["Escape","Esc"].includes(event.key)&&(event.preventDefault(),_this2.$refs.header&&_this2.$refs.header.dispatchEvent(new Event("closeMenu")))}))}}};BrandHeader_stories_customMobileMenu.storyName="Custom Mobile Menu",BrandHeader_stories_customMobileMenu.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customMobileMenu.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                ref="header"\n                :main-navigation="mainNavigation"\n                :claim-lang="claimLang"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n              <div slot="menu-mobile"><pre>menu-mobile</pre></div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `,\n\n  mounted() {\n    document.body.addEventListener(\'keydown\', event => {\n      if ([\'Escape\', \'Esc\'].includes(event.key)) {\n        event.preventDefault();\n        this.$refs.header && this.$refs.header.dispatchEvent(new Event(\'closeMenu\'));\n      }\n    });\n  }\n\n})'}};var BrandHeader_stories_standaloneHeader=function standaloneHeader(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-header\n            :logo-title="logoTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n          </scale-app-header>\n        </div>\n      '}};BrandHeader_stories_standaloneHeader.storyName="Standalone Header",BrandHeader_stories_standaloneHeader.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38",logoTitle:"Custom Logo Title",logoHref:"#custom-href"},BrandHeader_stories_standaloneHeader.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-header\n            :logo-title="logoTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n          </scale-app-header>\n        </div>\n      `\n})'}};var componentMeta={title:"Deprecated Components/Brand Header & Navigation",component:AppShell,argTypes:{activeRouteId:{control:{type:"text"}},activeSectorId:{control:{type:"text"}},logoTitle:{control:{type:"text"}},logoHideTitle:{control:{type:"boolean"}},logoHref:{control:{type:"text"}},logoAriaDescribedBy:{control:{type:"text"}},logoClick:{control:{type:"disabled"},description:"logo click event handler custom function"},mainNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},iconNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},sectorNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},addonNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},userNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"},portalName:{control:{type:"text"},description:"optionally replaces the sectorNavigation with a single bold title"},claimLang:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_lat","mk_kyr","ro","sk"]}},userMenuAriaLabel:{control:{type:"text"}}},includeStories:["standard","customMainNavigation","customIconNavigation","customSectorNavigation","customAddonNavigation","customLogo","customMobileMenu","standaloneHeader"]},mdxStoryNameToKey={Standard:"standard","Custom Main Navigation":"customMainNavigation","Custom Icon Navigation":"customIconNavigation","Custom Sector Navigation":"customSectorNavigation","Custom Addon Navigation":"customAddonNavigation","Custom Logo":"customLogo","Custom Mobile Menu":"customMobileMenu","Standalone Header":"standaloneHeader"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/brand-header-navigation/fixtures.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return addonNavigation})),__webpack_require__.d(__webpack_exports__,"f",(function(){return userNavigation})),__webpack_require__.d(__webpack_exports__,"d",(function(){return mainNavigation})),__webpack_require__.d(__webpack_exports__,"c",(function(){return iconNavigation})),__webpack_require__.d(__webpack_exports__,"e",(function(){return sectorNavigation})),__webpack_require__.d(__webpack_exports__,"b",(function(){return footerNavigation}));var addonNavigation=[{name:"Telekom Shops",id:"Telekom Shops",href:"#telekom-shops"},{name:"Contact",id:"Contact",href:"#contact"}],userNavigation=[{type:"userInfo",shortName:"Alexander",name:"Alexander Dreyer",email:"alexander.dreyer@t-online.de"},{type:"divider"},{type:"item",name:"Customer Care",id:"customer-care",href:"https://www.telekom.de/kundencenter/startseite",onClick:function onClick(){},icon:"t-product-measure-internet-speed",iconPosition:"prefix"},{type:"item",name:"Login Settings",id:"login-settings",href:"https://account.idm.telekom.com/account-manager/index.xhtml",onClick:function onClick(){},icon:"service-settings",iconPosition:"prefix"},{type:"divider"},{type:"item",name:"Optional Link",id:"optional-link",href:"#optional-link",onClick:function onClick(){}},{type:"divider"},{type:"button",name:"Logout",id:"logout",onClick:function onClick(){console.log("button click")},href:"https://accounts.login.idm.telekom.com/sessionmessage/logout",variant:"secondary"}],mainNavigation=[{name:"Topic One",id:"Topic One",children:[{name:"Second Level",id:"Second Level 3",children:[{name:"Third Level",id:"Third Level 4",href:"#third-level"},{name:"Third Level",id:"Third Level 5",href:"#third-level"},{name:"Third Level",id:"Third Level 6",href:"#third-level"},{name:"Third Level",id:"Third Level 7",href:"#third-level"},{name:"Third Level",id:"Third Level 8",href:"#third-level"},{name:"Third Level",id:"Third Level 9",href:"#third-level"},{name:"Third Level",id:"Third Level 10",href:"#third-level"}]},{name:"Second Level",id:"Second Level 4",children:[{name:"Third Level",id:"Third Level 11",href:"#third-level"},{name:"Third Level",id:"Third Level 12",href:"#third-level"},{name:"Third Level",id:"Third Level 13",href:"#third-level"},{name:"Third Level",id:"Third Level 14",href:"#third-level"},{name:"Third Level",id:"Third Level 15",href:"#third-level"},{name:"Third Level",id:"Third Level 16",href:"#third-level"},{name:"Third Level",id:"Third Level 17",href:"#third-level"}]},{name:"Second Level",id:"Second Level 5",children:[{name:"Third Level",id:"Third Level 18",href:"#third-level"},{name:"Third Level",id:"Third Level 19",href:"#third-level"},{name:"Third Level",id:"Third Level 20",href:"#third-level"},{name:"Third Level",id:"Third Level 21",href:"#third-level"},{name:"Third Level",id:"Third Level 22",href:"#third-level"},{name:"Third Level",id:"Third Level 23",href:"#third-level"},{name:"Third Level",id:"Third Level 24",href:"#third-level"}]},{name:"Second Level",id:"Second Level 6",children:[{name:"Third Level",id:"Third Level 25",href:"#third-level"},{name:"Third Level",id:"Third Level 26",href:"#third-level"},{name:"Third Level",id:"Third Level 27",href:"#third-level"},{name:"Third Level",id:"Third Level 28",href:"#third-level"},{name:"Third Level",id:"Third Level 29",href:"#third-level"},{name:"Third Level",id:"Third Level 30",href:"#third-level"}]},{name:"Second Level",id:"Second Level 7"}]},{name:"Topic Two",id:"Topic Two",children:[{name:"Second Level",id:"Second Level 1",children:[{name:"Third Level",id:"Third Level 1",href:"#third-level"},{name:"Third Level",id:"Third Level 2",href:"#third-level"}]},{name:"Second Level",id:"Second Level 2",children:[{name:"Third Level",id:"Third Level 3",href:"#third-level"}]}]},{name:"Topic Three",id:"Topic Three",href:"#topic-three"},{name:"Topic Four",id:"Topic Four",href:"#topic-four"},{name:"Topic Five",id:"Topic Five",href:"#topic-five"}],iconNavigation=[{name:"Search",id:"Search35",href:"#search",icon:"action-search"},{name:"Cart",id:"Cart36",href:"#cart",icon:"action-shopping-cart",badge:!0,badgeLabel:3,labelVisuallyHidden:!1,badgeCount:3,ariaLabelTranslation:"$badgeLabel - $badgeCount item"},{id:"menu",defaultName:"Menu",openedName:"Close"}],sectorNavigation=[{name:"Personal",id:"Personal38",href:"#personal"},{name:"Business",id:"Business39",href:"#business"}],footerNavigation=[{name:"Contact",id:"Contact",href:"#contact"},{name:"Terms and conditions",id:"Terms and conditions",href:"#terms-and-conditions"},{name:"Legal notice",id:"Legal notice",href:"#legal-notice"},{name:"Data privacy",id:"Data privacy",href:"#data-privacy",icon:"alert-imprint-dataprivacy"}]},"./stories/deprecated/footer/Footer.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Footer_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"minimal",(function(){return minimal})),__webpack_require__.d(__webpack_exports__,"customSlots",(function(){return Footer_stories_customSlots}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),fixtures=__webpack_require__("./stories/deprecated/brand-header-navigation/fixtures.js"),footer_AppFootervue_type_script_lang_js_={props:{claimLang:String,footerNavigation:String,variant:String,copyright:String,logoTitle:String,logoHref:String,logoAriaDescribedBy:String,logoClick:Function}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(footer_AppFootervue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-app-footer",{attrs:{"claim-lang":_vm.claimLang,"footer-navigation":_vm.footerNavigation,variant:_vm.variant,copyright:_vm.copyright,"logo-title":_vm.logoTitle,"logo-href":_vm.logoHref,"logo-aria-described-by":_vm.logoAriaDescribedBy},on:{"logo-click":_vm.logoClick}},[_vm._t("logo"),_vm._v(" "),_vm._t("navigation")],2)}),[],!1,null,null,null).exports;var AppFooter=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"AppFooter",description:"",tags:{},props:[{name:"claimLang",type:{name:"string"}},{name:"footerNavigation",type:{name:"string"}},{name:"variant",type:{name:"string"}},{name:"copyright",type:{name:"string"}},{name:"logoTitle",type:{name:"string"}},{name:"logoHref",type:{name:"string"}},{name:"logoAriaDescribedBy",type:{name:"string"}},{name:"logoClick",type:{name:"func"}}],slots:[{name:"logo"},{name:"navigation"}]};var setColorMode=function setColorMode(){try{document.body.dataset.mode=JSON.parse(window.localStorage.getItem("persistedColorMode"))}catch(e){}},Footer_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{AppFooter:AppFooter},props:AppFooter.props,template:'\n    <div style="margin: -1rem;">\n      <scale-app-footer\n        :footer-navigation="footerNavigation"\n        :variant="variant"\n        :copyright="copyright"\n      >\n      </scale-app-footer>\n    </div>\n  '}},layoutProps={Template:Footer_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Footer",component:AppFooter,argTypes:{footerNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},claimLang:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_lat","mk_kyr","ro","sk"]}},variant:{control:{type:"select",options:["angular","standard","minimal"]}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Footer"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("div",{class:"Notification"},Object(esm.b)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(esm.b)("g",{fill:"currentColor"},Object(esm.b)("g",null,Object(esm.b)("path",{"fill-rule":"evenodd",d:"M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"})))),Object(esm.b)("span",null,"There is a newer version of the Brand Footer available: ",Object(esm.b)("a",{href:"?path=/docs/components-telekom-footer--standard"},"Telekom Footer"))),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",inline:!1,height:500,args:{claimLang:"en",footerNavigation:JSON.stringify(fixtures.b)},mdxType:"Story"},(setColorMode(),Footer_stories_Template.bind({})))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-footer claim-lang="en"></scale-app-footer>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --background: var(--telekom-color-background-surface-highlight);\n  --color: var(--telekom-color-text-and-icon-white-standard);\n  --spacing-top: var(--telekom-spacing-unit-x8);\n  --spacing-bottom: var(--telekom-spacing-unit-x6);\n  --spacing-x: var(--telekom-spacing-unit-x6);\n  --background-container: var(--telekom-color-background-canvas);\n  --radius: var(--telekom-radius-large);\n  --max-width: inherit;\n\n  --border-top-minimal: var(--telekom-spacing-unit-x025) solid var(\n      --telekom-color-ui-faint\n    );\n  --color-minimal: var(--telekom-color-text-and-icon-additional);\n  --background-minimal: var(--telekom-color-background-surface);\n\n  --spacing-angular: var(--telekom-spacing-unit-x6);\n  --spacing-minimal: var(--telekom-spacing-unit-x6);\n\n  --background-mask: var(--telekom-color-background-canvas);\n  --radius-mask: 0 0 var(--telekom-radius-large) var(--telekom-radius-large);\n\n  --height-logo: var(--telekom-spacing-unit-x6);\n  --font-size-copyright: var(--telekom-typography-font-size-caption);\n  --color-link-standard: var(--telekom-color-text-and-icon-white-standard);\n  --color-link-minimal: var(--telekom-color-text-and-icon-additional);\n\n  --font-size-navigation-standard: var(--telekom-typography-font-size-caption);\n  --font-family-navigation-standard: var(--telekom-typography-font-family-sans);\n  --font-weight-navigation-standard: var(\n    --telekom-typography-font-weight-extra-bold\n  );\n  --font-weight-navigation-minimal: var(\n    --telekom-typography-font-weight-medium\n  );\n\n  --spacing-navigation-standard: var(--telekom-spacing-unit-x2);\n  --color-navigation-standard-hover: var(\n    --telekom-color-text-and-icon-white-standard\n  );\n  --color-navigation-minimal-hover: var(\n    --telekom-color-text-and-icon-primary-hovered\n  );\n  --color-navigation-active-focus: var(\n    --telekom-color-text-and-icon-primary-pressed\n  );\n  --box-shadow-navigation-focus: 0 0 0 var(--telekom-spacing-unit-x05) var(\n      --telekom-color-functional-focus\n    );\n  --border-color-standard-hover: var(\n    --telekom-color-text-and-icon-white-standard\n  );\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"minimal"},"Minimal"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Minimal",inline:!1,height:500,args:{claimLang:"en",footerNavigation:JSON.stringify(fixtures.b),variant:"minimal"},mdxType:"Story"},(setColorMode(),Footer_stories_Template.bind({})))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-app-footer id=\"footer\" claim-lang=\"en\" variant=\"minimal\">\n</scale-app-footer>\n\n<script>\n  const footer = document.getElementById('footer');\n  footer.footerNavigation = [\n    { name: 'Contact', id: 'Contact', href: '#contact' },\n    {\n      name: 'Terms and conditions',\n      id: 'Terms and conditions',\n      href: '#terms-and-conditions',\n    },\n    { name: 'Legal notice', id: 'Legal notice', href: '#legal-notice' },\n    {\n      name: 'Data privacy',\n      id: 'Data privacy',\n      href: '#data-privacy',\n      icon: 'alert-imprint-dataprivacy',\n    },\n  ];\n<\/script>\n")),Object(esm.b)("h2",{id:"custom-slots"},"Custom Slots"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Slots",inline:!1,height:500,args:{claimLang:"en"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppFooter:AppFooter},props:AppFooter.props,template:'\n        <div style="margin: -1rem;">\n          <scale-app-footer\n            \n            :variant="variant"\n            :copyright="copyright"\n          >\n            <div slot="navigation">\n              <span>custom navigation placeholder</span>\n            </div>\n            <div slot="logo">\n              <span>custom logo placeholder</span>\n            </div>\n          </scale-app-footer>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-footer :variant="variant" :copyright="copyright">\n  <div slot="navigation">\n    <span>custom navigation placeholder</span>\n  </div>\n  <div slot="logo">\n    <span>custom logo placeholder</span>\n  </div>\n</scale-app-footer>\n')))}MDXContent.isMDXComponent=!0;var standard=(setColorMode(),Footer_stories_Template.bind({}));standard.storyName="Standard",standard.args={claimLang:"en",footerNavigation:JSON.stringify(fixtures.b)},standard.parameters={storySource:{source:"(() => {\n  setColorMode();\n  return Template.bind({});\n})()"}};var minimal=(setColorMode(),Footer_stories_Template.bind({}));minimal.storyName="Minimal",minimal.args={claimLang:"en",footerNavigation:JSON.stringify(fixtures.b),variant:"minimal"},minimal.parameters={storySource:{source:"(() => {\n  setColorMode();\n  return Template.bind({});\n})()"}};var Footer_stories_customSlots=function customSlots(){return setColorMode(),{components:{AppFooter:AppFooter},props:AppFooter.props,template:'\n        <div style="margin: -1rem;">\n          <scale-app-footer\n            \n            :variant="variant"\n            :copyright="copyright"\n          >\n            <div slot="navigation">\n              <span>custom navigation placeholder</span>\n            </div>\n            <div slot="logo">\n              <span>custom logo placeholder</span>\n            </div>\n          </scale-app-footer>\n        </div>\n      '}};Footer_stories_customSlots.storyName="Custom Slots",Footer_stories_customSlots.args={claimLang:"en"},Footer_stories_customSlots.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppFooter\n  },\n  props: AppFooter.props,\n  template: `\n        <div style="margin: -1rem;">\n          <scale-app-footer\n            \n            :variant="variant"\n            :copyright="copyright"\n          >\n            <div slot="navigation">\n              <span>custom navigation placeholder</span>\n            </div>\n            <div slot="logo">\n              <span>custom logo placeholder</span>\n            </div>\n          </scale-app-footer>\n        </div>\n      `\n})'}};var componentMeta={title:"Deprecated Components/Footer",component:AppFooter,argTypes:{footerNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},claimLang:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_lat","mk_kyr","ro","sk"]}},variant:{control:{type:"select",options:["angular","standard","minimal"]}}},includeStories:["standard","minimal","customSlots"]},mdxStoryNameToKey={Standard:"standard",Minimal:"minimal","Custom Slots":"customSlots"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/notification-banner/NotificationBanner.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return NotificationBanner_stories_Template})),__webpack_require__.d(__webpack_exports__,"TextTemplate",(function(){return NotificationBanner_stories_TextTemplate})),__webpack_require__.d(__webpack_exports__,"LinkTemplate",(function(){return NotificationBanner_stories_LinkTemplate})),__webpack_require__.d(__webpack_exports__,"LinkTextTemplate",(function(){return NotificationBanner_stories_LinkTextTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"warning",(function(){return warning})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"informational",(function(){return informational})),__webpack_require__.d(__webpack_exports__,"dismissible",(function(){return dismissible})),__webpack_require__.d(__webpack_exports__,"timeout",(function(){return timeout})),__webpack_require__.d(__webpack_exports__,"withText",(function(){return withText})),__webpack_require__.d(__webpack_exports__,"withLink",(function(){return withLink})),__webpack_require__.d(__webpack_exports__,"withLinkAndText",(function(){return withLinkAndText}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),notification_banner_ScaleNotificationBannervue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{variant:{type:0,default:"informational"},dismissible:{type:Boolean,default:!1},opened:{type:Boolean},autoHide:{type:Boolean,default:!1},autoHideDuration:{type:Number,default:3e3},closeButtonLabel:{type:String,default:"close"},closeButtonTitle:{type:String,default:"close"}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(notification_banner_ScaleNotificationBannervue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("text"),this._v(" "),this._t("link")],2)}),[],!1,null,null,null).exports;var ScaleNotificationBanner=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleNotificationBanner",description:"",tags:{},props:[{name:"variant",type:{name:"'error' | 'warning' | 'success' | 'informational'"},defaultValue:{func:!1,value:"'informational'"}},{name:"dismissible",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"opened",type:{name:"boolean"}},{name:"autoHide",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"autoHideDuration",type:{name:"number"},defaultValue:{func:!1,value:"3000"}},{name:"closeButtonLabel",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}},{name:"closeButtonTitle",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}}],slots:[{name:"text"},{name:"link"}]};var NotificationBanner_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({},ScaleNotificationBanner.props,{heading:String,text:String,link:String}),template:'\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  '}},NotificationBanner_stories_TextTemplate=function TextTemplate(args,_ref2){_ref2.argTypes;return{props:Object.assign({},ScaleNotificationBanner.props),template:'\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p slot="text">Here you can add some more text.</p>\n    </scale-notification-banner>\n  '}},NotificationBanner_stories_LinkTemplate=function LinkTemplate(args,_ref3){_ref3.argTypes;return{props:Object.assign({},ScaleNotificationBanner.props,{text:String}),template:'\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p v-if="text">{{ text }}</p>\n      <p slot="link">Link text</p>\n    </scale-notification-banner>\n  '}},NotificationBanner_stories_LinkTextTemplate=function LinkTextTemplate(args,_ref4){_ref4.argTypes;return{props:Object.assign({},ScaleNotificationBanner.props,{text:String}),template:'\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p slot="text">Here you can add some more text</p>\n      <p slot="link">Link text</p>\n    </scale-notification-banner>\n  '}},layoutProps={Template:NotificationBanner_stories_Template,TextTemplate:NotificationBanner_stories_TextTemplate,LinkTemplate:NotificationBanner_stories_LinkTemplate,LinkTextTemplate:NotificationBanner_stories_LinkTextTemplate};function MDXContent(_ref5){var components=_ref5.components,props=_objectWithoutProperties(_ref5,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Notification Banner",component:ScaleNotificationBanner,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Notification Banner"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{opened:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-notification-banner opened\n  >Notification text goes here</scale-notification-banner\n>\n")),Object(esm.b)("h2",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 100%;\n  --radius: var(--telekom-radius-standard);\n\n  --background-error: var(--telekom-color-functional-danger-subtle);\n  --background-warning: var(--telekom-color-functional-warning-subtle);\n  --background-informational: var(\n    --telekom-color-functional-informational-subtle\n  );\n  --background-success: var(--telekom-color-functional-success-subtle);\n}\n")),Object(esm.b)("h2",{id:"variants"},"Variants"),Object(esm.b)("h3",{id:"warning"},"Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Warning",args:{opened:!0,variant:"warning",heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner variant="warning" opened>\n  Notification text goes here\n</scale-notification-banner>\n')),Object(esm.b)("h3",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{opened:!0,variant:"error",heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner variant="error" opened>\n  Notification text goes here\n</scale-notification-banner>\n')),Object(esm.b)("h3",{id:"success"},"Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Success",args:{opened:!0,variant:"success",heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner variant="success" opened>\n  Notification text goes here\n</scale-notification-banner>\n')),Object(esm.b)("h3",{id:"informational"},"Informational"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Informational",args:{opened:!0,variant:"informational",heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner variant="informational" opened>\n  Notification text goes here\n</scale-notification-banner>\n')),Object(esm.b)("h2",{id:"dismissible"},"Dismissible"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dismissible",args:{opened:!0,dismissible:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-notification-banner dismissible opened>\n  Notification text goes here\n</scale-notification-banner>\n")),Object(esm.b)("h2",{id:"timeout"},"Timeout"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Timeout",args:{opened:!0,autoHideDuration:4e3,autoHide:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner auto-hide auto-hide-duration="4000" opened>\n  Notification text goes here\n</scale-notification-banner>\n')),Object(esm.b)("h2",{id:"with-text"},"With Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Text",args:{opened:!0},mdxType:"Story"},NotificationBanner_stories_TextTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner opened>\n  Notification text goes here.\n  <p slot="text">Here you can add some more text.</p>\n</scale-notification-banner>\n')),Object(esm.b)("h2",{id:"with-link"},"With Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Link",args:{opened:!0},mdxType:"Story"},NotificationBanner_stories_LinkTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner opened>\n  Notification text goes here.\n  <p slot="link">Link Text</p>\n</scale-notification-banner>\n')),Object(esm.b)("h2",{id:"with-link-and-text"},"With Link and Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Link and Text",args:{opened:!0},mdxType:"Story"},NotificationBanner_stories_LinkTextTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner opened>\n  Notification text goes here.\n  <p slot="text">Here you can add some more text.</p>\n  <p slot="link">Link Text</p>\n</scale-notification-banner>\n')))}MDXContent.isMDXComponent=!0;var standard=NotificationBanner_stories_Template.bind({});standard.storyName="Standard",standard.args={opened:!0,heading:"Notification text goes here"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var warning=NotificationBanner_stories_Template.bind({});warning.storyName="Warning",warning.args={opened:!0,variant:"warning",heading:"Notification text goes here"},warning.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var error=NotificationBanner_stories_Template.bind({});error.storyName="Error",error.args={opened:!0,variant:"error",heading:"Notification text goes here"},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var success=NotificationBanner_stories_Template.bind({});success.storyName="Success",success.args={opened:!0,variant:"success",heading:"Notification text goes here"},success.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var informational=NotificationBanner_stories_Template.bind({});informational.storyName="Informational",informational.args={opened:!0,variant:"informational",heading:"Notification text goes here"},informational.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var dismissible=NotificationBanner_stories_Template.bind({});dismissible.storyName="Dismissible",dismissible.args={opened:!0,dismissible:!0,heading:"Notification text goes here"},dismissible.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var timeout=NotificationBanner_stories_Template.bind({});timeout.storyName="Timeout",timeout.args={opened:!0,autoHideDuration:4e3,autoHide:!0,heading:"Notification text goes here"},timeout.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var withText=NotificationBanner_stories_TextTemplate.bind({});withText.storyName="With Text",withText.args={opened:!0},withText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props\n  },\n  template: `\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p slot="text">Here you can add some more text.</p>\n    </scale-notification-banner>\n  `\n})'}};var withLink=NotificationBanner_stories_LinkTemplate.bind({});withLink.storyName="With Link",withLink.args={opened:!0},withLink.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    text: String\n  },\n  template: `\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p v-if="text">{{ text }}</p>\n      <p slot="link">Link text</p>\n    </scale-notification-banner>\n  `\n})'}};var withLinkAndText=NotificationBanner_stories_LinkTextTemplate.bind({});withLinkAndText.storyName="With Link and Text",withLinkAndText.args={opened:!0},withLinkAndText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    text: String\n  },\n  template: `\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p slot="text">Here you can add some more text</p>\n      <p slot="link">Link text</p>\n    </scale-notification-banner>\n  `\n})'}};var componentMeta={title:"Deprecated Components/Notification Banner",component:ScaleNotificationBanner,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}}},includeStories:["standard","warning","error","success","informational","dismissible","timeout","withText","withLink","withLinkAndText"]},mdxStoryNameToKey={Standard:"standard",Warning:"warning",Error:"error",Success:"success",Informational:"informational",Dismissible:"dismissible",Timeout:"timeout","With Text":"withText","With Link":"withLink","With Link and Text":"withLinkAndText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/notification-message/NotificationMessage.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return NotificationMessage_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"warning",(function(){return warning})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"informational",(function(){return informational})),__webpack_require__.d(__webpack_exports__,"dismissible",(function(){return dismissible})),__webpack_require__.d(__webpack_exports__,"timeout",(function(){return timeout})),__webpack_require__.d(__webpack_exports__,"withText",(function(){return withText}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),notification_message_ScaleNotificationMessagevue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{variant:{type:0,default:"informational"},dismissible:{type:Boolean,default:!1},opened:{type:Boolean},autoHideDuration:{type:Number,default:3e3},autoHide:{type:Boolean,default:!1},closeButtonLabel:{type:String,default:"close"},closeButtonTitle:{type:String,default:"close"}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(notification_message_ScaleNotificationMessagevue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("text")],2)}),[],!1,null,null,null).exports;var ScaleNotificationMessage=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleNotificationMessage",description:"",tags:{},props:[{name:"variant",type:{name:"'error' | 'warning' | 'success' | 'informational'"},defaultValue:{func:!1,value:"'informational'"}},{name:"dismissible",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"opened",type:{name:"boolean"}},{name:"autoHideDuration",type:{name:"number"},defaultValue:{func:!1,value:"3000"}},{name:"autoHide",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"closeButtonLabel",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}},{name:"closeButtonTitle",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}}],slots:[{name:"text"}]};var NotificationMessage_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({},ScaleNotificationMessage.props,{heading:String,text:String}),template:'\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  '}},layoutProps={Template:NotificationMessage_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Notification Message",component:ScaleNotificationMessage,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Notification Message"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{opened:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-notification-message opened\n  >Notification text goes here</scale-notification-message\n>\n")),Object(esm.b)("h2",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 100%;\n  --radius: var(--telekom-radius-standard);\n  --border: var(--telekom-line-weight-standard) solid transparent;\n\n  --background-error: var(--telekom-color-functional-danger-subtle);\n  --background-warning: var(--telekom-color-functional-warning-subtle);\n  --background-informational: var(\n    --telekom-color-functional-informational-subtle\n  );\n  --background-success: var(--telekom-color-functional-success-subtle);\n}\n")),Object(esm.b)("h2",{id:"variants"},"Variants"),Object(esm.b)("h3",{id:"warning"},"Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Warning",args:{opened:!0,variant:"warning",heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message variant="warning" opened>\n  Notification text goes here\n</scale-notification-message>\n')),Object(esm.b)("h3",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{opened:!0,variant:"error",heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message variant="error" opened>\n  Notification text goes here\n</scale-notification-message>\n')),Object(esm.b)("h3",{id:"success"},"Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Success",args:{opened:!0,variant:"success",heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message variant="success" opened>\n  Notification text goes here\n</scale-notification-message>\n')),Object(esm.b)("h3",{id:"informational"},"Informational"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Informational",args:{opened:!0,variant:"informational",heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message variant="informational" opened>\n  Notification text goes here\n</scale-notification-message>\n')),Object(esm.b)("h2",{id:"dismissible"},"Dismissible"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dismissible",args:{opened:!0,dismissible:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-notification-message dismissible opened>\n  Notification text goes here\n</scale-notification-message>\n")),Object(esm.b)("h2",{id:"timeout"},"Timeout"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Timeout",args:{opened:!0,autoHideDuration:4e3,autoHide:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message auto-hide-duration="4000" auto-hide opened>\n  Notification text goes here\n</scale-notification-message>\n')),Object(esm.b)("h2",{id:"with-text"},"With Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Text",args:{opened:!0,heading:"Notification text goes here",text:"Here you can add some more text"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message opened>\n  Notification text goes here.\n  <p slot="text">Here you can add some more text.</p>\n</scale-notification-message>\n')))}MDXContent.isMDXComponent=!0;var standard=NotificationMessage_stories_Template.bind({});standard.storyName="Standard",standard.args={opened:!0,heading:"Notification text goes here"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var warning=NotificationMessage_stories_Template.bind({});warning.storyName="Warning",warning.args={opened:!0,variant:"warning",heading:"Notification text goes here"},warning.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var error=NotificationMessage_stories_Template.bind({});error.storyName="Error",error.args={opened:!0,variant:"error",heading:"Notification text goes here"},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var success=NotificationMessage_stories_Template.bind({});success.storyName="Success",success.args={opened:!0,variant:"success",heading:"Notification text goes here"},success.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var informational=NotificationMessage_stories_Template.bind({});informational.storyName="Informational",informational.args={opened:!0,variant:"informational",heading:"Notification text goes here"},informational.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var dismissible=NotificationMessage_stories_Template.bind({});dismissible.storyName="Dismissible",dismissible.args={opened:!0,dismissible:!0,heading:"Notification text goes here"},dismissible.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var timeout=NotificationMessage_stories_Template.bind({});timeout.storyName="Timeout",timeout.args={opened:!0,autoHideDuration:4e3,autoHide:!0,heading:"Notification text goes here"},timeout.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var withText=NotificationMessage_stories_Template.bind({});withText.storyName="With Text",withText.args={opened:!0,heading:"Notification text goes here",text:"Here you can add some more text"},withText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var componentMeta={title:"Deprecated Components/Notification Message",component:ScaleNotificationMessage,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}}},includeStories:["standard","warning","error","success","informational","dismissible","timeout","withText"]},mdxStoryNameToKey={Standard:"standard",Warning:"warning",Error:"error",Success:"success",Informational:"informational",Dismissible:"dismissible",Timeout:"timeout","With Text":"withText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/notification-toast/NotificationToast.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return NotificationToast_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateText",(function(){return NotificationToast_stories_TemplateText})),__webpack_require__.d(__webpack_exports__,"TemplateLink",(function(){return NotificationToast_stories_TemplateLink})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"warning",(function(){return warning})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"informational",(function(){return informational})),__webpack_require__.d(__webpack_exports__,"timeout",(function(){return timeout})),__webpack_require__.d(__webpack_exports__,"withText",(function(){return withText})),__webpack_require__.d(__webpack_exports__,"withLink",(function(){return withLink}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),notification_toast_ScaleNotificationToastvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{variant:{type:0,default:"informational"},alignment:{type:0,default:"top-right"},opened:{type:Boolean,default:!1},animated:{type:Boolean,default:!0},positionVertical:{type:Number,default:12},positionHorizontal:{type:Number,default:12},fadeDuration:{type:Number,default:500},autoHideDuration:{type:Number,default:3e3},autoHide:{type:Boolean,default:!1},styles:{type:String},closeButtonLabel:{type:String,default:"close"},closeButtonTitle:{type:String,default:"close"}},methods:{"scale-close":function scaleClose($event){action("scale-close"),this.$emit("scale-close",$event)},"scale-closing":function scaleClosing($event){action("scale-closing"),this.$emit("scale-closing",$event)}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(notification_toast_ScaleNotificationToastvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("header"),this._v(" "),this._t("body"),this._v(" "),this._t("link")],2)}),[],!1,null,null,null).exports;var ScaleNotificationToast=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleNotificationToast",description:"",tags:{},props:[{name:"variant",type:{name:"'error' | 'warning' | 'success' | 'informational'"},defaultValue:{func:!1,value:"'informational'"}},{name:"alignment",type:{name:"'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'"},defaultValue:{func:!1,value:"'top-right'"}},{name:"opened",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"animated",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"positionVertical",type:{name:"number"},defaultValue:{func:!1,value:"12"}},{name:"positionHorizontal",type:{name:"number"},defaultValue:{func:!1,value:"12"}},{name:"fadeDuration",type:{name:"number"},defaultValue:{func:!1,value:"500"}},{name:"autoHideDuration",type:{name:"number"},defaultValue:{func:!1,value:"3000"}},{name:"autoHide",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"styles",type:{name:"string"}},{name:"closeButtonLabel",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}},{name:"closeButtonTitle",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}}],events:[{name:"scale-close",type:{names:["undefined"]}},{name:"scale-closing",type:{names:["undefined"]}}],slots:[{name:"header"},{name:"body"},{name:"link"}]};var NotificationToast_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({},ScaleNotificationToast.props),template:'<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  '}},NotificationToast_stories_TemplateText=function TemplateText(args,_ref2){_ref2.argTypes;return{props:Object.assign({},ScaleNotificationToast.props),template:'<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :variant="variant"\n      :opened="opened"\n      ><p slot="header">Informational toast headline</p>\n      <p slot="body">Subheadline goes here.</p>\n    </scale-notification-toast>\n    </div>\n  '}},NotificationToast_stories_TemplateLink=function TemplateLink(args,_ref3){_ref3.argTypes;return{props:Object.assign({},ScaleNotificationToast.props),template:'<div style="height: 100px">\n    <scale-notification-toast \n      story \n      :variant="variant"\n      :opened="opened"\n      ><p slot="header">Informational toast headline</p>\n      <p slot="link">Link Text</p>\n    </scale-notification-toast>\n    </div>\n  '}},layoutProps={Template:NotificationToast_stories_Template,TemplateText:NotificationToast_stories_TemplateText,TemplateLink:NotificationToast_stories_TemplateLink};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Notification Toast",component:ScaleNotificationToast,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}},alignment:{defaultValue:"top-right",options:["bottom-right","bottom-left","top-right","top-left"],control:{type:"select"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Notification Toast"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{opened:!0},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast opened>\n  <p slot="header">Informational toast headline</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"warning"},"Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Warning",args:{opened:!0,variant:"warning"},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast variant="warning" opened>\n  <p slot="header">Informational toast headline</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{opened:!0,variant:"error"},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast variant="error" opened>\n  <p slot="header">Informational toast headline</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"success"},"Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Success",args:{opened:!0,variant:"success"},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast variant="success" opened>\n  <p slot="header">Informational toast headline</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"informational"},"Informational"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Informational",args:{opened:!0,variant:"informational"},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast variant="informational" opened>\n  <p slot="header">Informational toast headline</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"timeout"},"Timeout"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Timeout",args:{opened:!0,autoHide:!0,autHideDuration:"4000"},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast opened>\n  <p slot="header" auto-hide auto-hide-duration="4000">\n    Informational toast headline\n  </p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"with-text"},"With Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Text",args:{opened:!0},mdxType:"Story"},NotificationToast_stories_TemplateText.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast>\n  <p slot="header">Informational toast headline</p>\n  <p slot="body">Subheadline goes here.</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"with-link"},"With Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Link",args:{opened:!0},mdxType:"Story"},NotificationToast_stories_TemplateLink.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast variant="success" opened>\n  <p slot="header">Informational toast headline</p>\n  <p slot="link">Link Text</p>\n</scale-notification-toast>\n')))}MDXContent.isMDXComponent=!0;var standard=NotificationToast_stories_Template.bind({});standard.storyName="Standard",standard.args={opened:!0},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var warning=NotificationToast_stories_Template.bind({});warning.storyName="Warning",warning.args={opened:!0,variant:"warning"},warning.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var error=NotificationToast_stories_Template.bind({});error.storyName="Error",error.args={opened:!0,variant:"error"},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var success=NotificationToast_stories_Template.bind({});success.storyName="Success",success.args={opened:!0,variant:"success"},success.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var informational=NotificationToast_stories_Template.bind({});informational.storyName="Informational",informational.args={opened:!0,variant:"informational"},informational.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var timeout=NotificationToast_stories_Template.bind({});timeout.storyName="Timeout",timeout.args={opened:!0,autoHide:!0,autHideDuration:"4000"},timeout.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var withText=NotificationToast_stories_TemplateText.bind({});withText.storyName="With Text",withText.args={opened:!0},withText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :variant="variant"\n      :opened="opened"\n      ><p slot="header">Informational toast headline</p>\n      <p slot="body">Subheadline goes here.</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var withLink=NotificationToast_stories_TemplateLink.bind({});withLink.storyName="With Link",withLink.args={opened:!0},withLink.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story \n      :variant="variant"\n      :opened="opened"\n      ><p slot="header">Informational toast headline</p>\n      <p slot="link">Link Text</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var componentMeta={title:"Deprecated Components/Notification Toast",component:ScaleNotificationToast,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}},alignment:{defaultValue:"top-right",options:["bottom-right","bottom-left","top-right","top-left"],control:{type:"select"}}},includeStories:["standard","warning","error","success","informational","timeout","withText","withLink"]},mdxStoryNameToKey={Standard:"standard",Warning:"warning",Error:"error",Success:"success",Informational:"informational",Timeout:"timeout","With Text":"withText","With Link":"withLink"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/toggle-group/ToggleGroup.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return ToggleGroup_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateAriaTranslation",(function(){return ToggleGroup_stories_TemplateAriaTranslation})),__webpack_require__.d(__webpack_exports__,"TemplateIcons",(function(){return ToggleGroup_stories_TemplateIcons})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"monochromeVariant",(function(){return monochromeVariant})),__webpack_require__.d(__webpack_exports__,"greyBackground",(function(){return greyBackground})),__webpack_require__.d(__webpack_exports__,"noBorder",(function(){return noBorder})),__webpack_require__.d(__webpack_exports__,"smallSize",(function(){return smallSize})),__webpack_require__.d(__webpack_exports__,"fullWidth",(function(){return fullWidth})),__webpack_require__.d(__webpack_exports__,"singleSelect",(function(){return singleSelect})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"accessibilityGerman",(function(){return accessibilityGerman})),__webpack_require__.d(__webpack_exports__,"iconBefore",(function(){return iconBefore})),__webpack_require__.d(__webpack_exports__,"iconOnly",(function(){return iconOnly}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),toggle_group_ScaleToggleGroupvue_type_script_lang_js_={props:{size:{type:String,default:"regular"},background:{type:String,default:"white"},fullWidth:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideBorder:{type:Boolean,default:!1},singleSelect:{type:Boolean,default:!1},ariaLabelTranslation:{type:String,default:"toggle button group with $slottedButtons buttons"},variant:{type:String,default:"color"},styles:{type:String}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(toggle_group_ScaleToggleGroupvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-toggle-group",{attrs:{size:_vm.size,background:_vm.background,"full-width":_vm.fullWidth,disabled:_vm.disabled,"hide-border":_vm.hideBorder,"single-select":_vm.singleSelect,"aria-label-translation":_vm.ariaLabelTranslation,variant:_vm.variant,styles:_vm.styles},on:{scaleChange:_vm.scaleChange}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleToggleGroup=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleToggleGroup",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'regular'"}},{name:"background",type:{name:"string"},defaultValue:{func:!1,value:"'white'"}},{name:"fullWidth",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"hideBorder",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"singleSelect",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"ariaLabelTranslation",type:{name:"string"},defaultValue:{func:!1,value:"'toggle button group with $slottedButtons buttons'"}},{name:"variant",type:{name:"string"},defaultValue:{func:!1,value:"'color'"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}],slots:[{name:"default"}]};var ToggleGroup_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleToggleGroup:ScaleToggleGroup},props:Object.assign({label:String,icon:String},ScaleToggleGroup.props),template:'\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  '}},ToggleGroup_stories_TemplateAriaTranslation=function TemplateAriaTranslation(args,_ref2){_ref2.argTypes;return{components:{ScaleToggleGroup:ScaleToggleGroup},props:Object.assign({label:String,icon:String},ScaleToggleGroup.props),template:'\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert">Label\n      </scale-toggle-button>\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert">Label\n      </scale-toggle-button>\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert"\n        selected\n        >Label\n      </scale-toggle-button>\n    </scale-toggle-group>\n  '}},ToggleGroup_stories_TemplateIcons=function TemplateIcons(args,_ref3){_ref3.argTypes;return{components:{ScaleToggleGroup:ScaleToggleGroup},props:Object.assign({label:String,iconBefore:Boolean},ScaleToggleGroup.props),template:'\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button v-if="iconBefore" aria-label-toggle-button="Label">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n    </scale-toggle-group>\n  '}},layoutProps={Template:ToggleGroup_stories_Template,TemplateAriaTranslation:ToggleGroup_stories_TemplateAriaTranslation,TemplateIcons:ToggleGroup_stories_TemplateIcons};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Toggle Group",component:ScaleToggleGroup,argTypes:{background:{control:{type:"select",options:["white","grey"]}},size:{control:{type:"select",options:["xs","small","regular","large"]}},fullWidth:{control:{type:"boolean"}},ariaLabelTranslation:{control:{type:"text"}},colorScheme:{description:"Deprecated; variant should replace colorScheme"},variant:{control:{type:"select",options:["color","monochrome"]}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Toggle Group"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"monochrome-variant"},"Monochrome Variant"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Monochrome Variant",args:{variant:"monochrome"},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'\x3c!-- Deprecated: <scale-toggle-group color-scheme="monochrome"> --\x3e\n<scale-toggle-group variant="monochrome">\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n')),Object(esm.b)("h2",{id:"grey-background"},"Grey Background"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Grey Background",args:{background:"grey"},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-toggle-group background="grey">\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n')),Object(esm.b)("h2",{id:"no-border"},"No Border"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"No Border",args:{hideBorder:!0},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group hide-border>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"small-size"},"Small Size"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Size",args:{size:"small"},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-toggle-group size="small">\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n')),Object(esm.b)("h2",{id:"full-width"},"Full Width"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Full Width",args:{fullWidth:!0},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group full-width>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"single-select"},"Single Select"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Single Select",args:{singleSelect:!0},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group single-select>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{disabled:!0},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group disabled>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"accessibility-german"},"Accessibility German"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Accessibility German",args:{ariaLabelTranslation:"wechsel schalter gruppe mit $slottedButtons schaltern"},mdxType:"Story"},ToggleGroup_stories_TemplateAriaTranslation.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-toggle-group\n  aria-label-translation="wechsel schalter gruppe mit $slottedButtons schaltern"\n>\n  <scale-toggle-button\n    aria-label-toggle-button="Drück mich"\n    aria-lang-selected="selektiert"\n    aria-lang-deselected="deselektiert"\n    >Label\n  </scale-toggle-button>\n  <scale-toggle-button\n    aria-label-toggle-button="Drück mich"\n    aria-lang-selected="selektiert"\n    aria-lang-deselected="deselektiert"\n    >Label\n  </scale-toggle-button>\n  <scale-toggle-button\n    aria-label-toggle-button="Drück mich"\n    aria-lang-selected="selektiert"\n    aria-lang-deselected="deselektiert"\n    selected\n    >Label\n  </scale-toggle-button>\n</scale-toggle-group>\n')),Object(esm.b)("h2",{id:"icon-before"},"Icon Before"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon Before",args:{iconBefore:!0},mdxType:"Story"},ToggleGroup_stories_TemplateIcons.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group>\n  <scale-toggle-button>\n    Label <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n  <scale-toggle-button>\n    Label <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n  <scale-toggle-button selected>\n    Label <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"icon-only"},"Icon Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon Only",args:{iconBefore:!1},mdxType:"Story"},ToggleGroup_stories_TemplateIcons.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-toggle-group>\n  <scale-toggle-button icon-only aria-label-toggle-button="search">\n    <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n  <scale-toggle-button icon-only aria-label-toggle-button="search">\n    <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n  <scale-toggle-button icon-only aria-label-toggle-button="search" selected>\n    <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n</scale-toggle-group>\n')))}MDXContent.isMDXComponent=!0;var standard=ToggleGroup_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var monochromeVariant=ToggleGroup_stories_Template.bind({});monochromeVariant.storyName="Monochrome Variant",monochromeVariant.args={variant:"monochrome"},monochromeVariant.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var greyBackground=ToggleGroup_stories_Template.bind({});greyBackground.storyName="Grey Background",greyBackground.args={background:"grey"},greyBackground.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var noBorder=ToggleGroup_stories_Template.bind({});noBorder.storyName="No Border",noBorder.args={hideBorder:!0},noBorder.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var smallSize=ToggleGroup_stories_Template.bind({});smallSize.storyName="Small Size",smallSize.args={size:"small"},smallSize.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var fullWidth=ToggleGroup_stories_Template.bind({});fullWidth.storyName="Full Width",fullWidth.args={fullWidth:!0},fullWidth.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var singleSelect=ToggleGroup_stories_Template.bind({});singleSelect.storyName="Single Select",singleSelect.args={singleSelect:!0},singleSelect.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var disabled=ToggleGroup_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var accessibilityGerman=ToggleGroup_stories_TemplateAriaTranslation.bind({});accessibilityGerman.storyName="Accessibility German",accessibilityGerman.args={ariaLabelTranslation:"wechsel schalter gruppe mit $slottedButtons schaltern"},accessibilityGerman.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert">Label\n      </scale-toggle-button>\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert">Label\n      </scale-toggle-button>\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert"\n        selected\n        >Label\n      </scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var iconBefore=ToggleGroup_stories_TemplateIcons.bind({});iconBefore.storyName="Icon Before",iconBefore.args={iconBefore:!0},iconBefore.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    iconBefore: Boolean,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button v-if="iconBefore" aria-label-toggle-button="Label">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var iconOnly=ToggleGroup_stories_TemplateIcons.bind({});iconOnly.storyName="Icon Only",iconOnly.args={iconBefore:!1},iconOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    iconBefore: Boolean,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button v-if="iconBefore" aria-label-toggle-button="Label">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var componentMeta={title:"Deprecated Components/Toggle Group",component:ScaleToggleGroup,argTypes:{background:{control:{type:"select",options:["white","grey"]}},size:{control:{type:"select",options:["xs","small","regular","large"]}},fullWidth:{control:{type:"boolean"}},ariaLabelTranslation:{control:{type:"text"}},colorScheme:{description:"Deprecated; variant should replace colorScheme"},variant:{control:{type:"select",options:["color","monochrome"]}}},includeStories:["standard","monochromeVariant","greyBackground","noBorder","smallSize","fullWidth","singleSelect","disabled","accessibilityGerman","iconBefore","iconOnly"]},mdxStoryNameToKey={Standard:"standard","Monochrome Variant":"monochromeVariant","Grey Background":"greyBackground","No Border":"noBorder","Small Size":"smallSize","Full Width":"fullWidth","Single Select":"singleSelect",Disabled:"disabled","Accessibility German":"accessibilityGerman","Icon Before":"iconBefore","Icon Only":"iconOnly"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Colors.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@telekom/design-tokens/dist/telekom/docs-json/telekom-design-tokens.light.json"),_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_dark_json__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@telekom/design-tokens/dist/telekom/docs-json/telekom-design-tokens.dark.json"),_storybook_core_events__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("../../node_modules/@storybook/core-events/dist/esm/index.js"),_storybook_addons__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("../../node_modules/@storybook/addons/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_13__.f,{title:"Guidelines/Colors",parameters:{docs:{container:function container(_ref2){var item,borderItem,contrastSections,context=_ref2.context,locale=context&&context.globals&&context.globals.locale,colorMode=context&&context.globals&&context.globals.colorMode,allTokens="light"===colorMode?_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__:_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_dark_json__WEBPACK_IMPORTED_MODULE_15__,darkMode="light"!==colorMode,channel=_storybook_addons__WEBPACK_IMPORTED_MODULE_17__.a.getChannel(),pathStringItem=[],levelStringItem=[],cleared=!1;function getItemPathByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].path[3]?allTokens.tokens[i].path[2]+" / "+allTokens.tokens[i].path[3]:allTokens.tokens[i].path[2]}function getItemColorByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].value}function getLevelByPath(path){for(var i=0;i<levelStringItem.length;i++){var splittedItem=levelStringItem[i].split("/");if(splittedItem[0]===path)return splittedItem[1]}}function getItemByPathString(pathString){for(var i=0;i<allTokens.tokens.length;i++){var currentItem=allTokens.tokens[i];if(currentItem.pathString===pathString)return currentItem}}function getAllSections(items){var currentSection,itemPaths=[],sections=[];items.map((function(path){return itemPaths.push(getItemPathByPath(path))}));for(var i=0;i<itemPaths.length;i++)itemPaths[i].includes("/")&&(0==sections.length?(currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/")),sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/")))):currentSection!==itemPaths[i].substr(0,itemPaths[i].indexOf("/"))&&(sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/"))),currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/"))));contrastSections=sections}function hasContrastWithoutSlash(items){var itemPaths=[];items.map((function(item){itemPaths.push(getItemPathByPath(item))}));for(var i=0;i<itemPaths.length;i++)if(!itemPaths[i].includes("/"))return!0}function setContrastStates(){item.contrastChecks&&item.contrastChecks.map((function(contrastCkeckItem){pathStringItem.push(contrastCkeckItem.path),levelStringItem.push(contrastCkeckItem.path+"/"+contrastCkeckItem.level)}))}function clearContrastStates(){pathStringItem.length=0,levelStringItem.length=0,cleared=!0}function generateTableColorRow(itemPathString,commentStringGerman,commentStringEnglish,additionalColor){return additionalColor?function setAdditionalColorSettings(){allTokens=_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__}():function resetAdditionalColorSettings(){allTokens="light"===colorMode?_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__:_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_dark_json__WEBPACK_IMPORTED_MODULE_15__}(),(item=getItemByPathString(itemPathString))?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",{style:{backgroundColor:"var(--telekom-color-background-canvas)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",padding:"4px 4px 4px 0"}},clearContrastStates(),cleared?setContrastStates():null,item.contrastChecks?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x1)",marginBottom:"var(--telekom-spacing-unit-x1)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",minWidth:"400px",minHeight:"120px"}},0!==pathStringItem.length?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingTop:"var(--telekom-spacing-unit-x1)",passingBottom:"var(--telekom-spacing-unit-x1)"}},"en"===locale?"Recommended colors for text and icons":"Empfohlene Farben für Text & Icons"):null,hasContrastWithoutSlash(pathStringItem)?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{padding:"4px 4px 4px 0",border:"none",width:"140px"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,getAllSections(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",padding:"4px 4px 4px 0",width:"200px"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600,marginRight:"10px"}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))})))})):null):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"20px",marginTop:"var(--telekom-spacing-unit-x1)",marginBottom:"var(--telekom-spacing-unit-x1)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",width:"400px",minHeight:"120px"}})),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},item.name)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},"en"===locale?commentStringEnglish:commentStringGerman)))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)",width:"330px",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"css"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.cssVariableName),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("button",{id:""+item.cssVariableName,className:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.jsPathName),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("button",{id:""+item.jsPathName,className:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:500,fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.value)))):null}function generateUIOutlinedTableColorRow(itemPathString,borderItemPathString,itemTextColorLight,borderItemColorLight,itemTextColorDark,borderItemColorDark){var _ref3;return item=getItemByPathString(itemPathString),borderItem=getItemByPathString(borderItemPathString),item&&borderItem?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",{style:{backgroundColor:darkMode?"#000":"#fff"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"0px"}},clearContrastStates(),cleared?setContrastStates():null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+borderItem.value,paddingTop:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x2)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px 4px 0px 0px",minWidth:"380px",minHeight:"80px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{padding:"var(--telekom-spacing-unit-x5)",color:""+(darkMode?borderItemColorDark:borderItemColorLight),fontSize:"12px"}},"Border color")),item.contrastChecks?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"0px 0px 4px 4px",minWidth:"380px",minHeight:"120px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:(_ref3={color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingBottom:"var(--telekom-spacing-unit-x1)"},_ref3.color=""+(darkMode?itemColorDark:itemColorLight),_ref3)},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"12px"}},"Fill color ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null)),"Recommended colors for text & icons"),hasContrastWithoutSlash(pathStringItem)?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{padding:"4px 4px 4px 0",border:"none"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"11px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,getAllSections(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",padding:"4px 4px 4px 0"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"11px",fontWeight:600}},getItemPathByPath(path),"("+getLevelByPath(path)+")"))})))})):null):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"0px 0px 4px 4px",width:"400px",minHeight:"110px",color:"var(--telekom-color-text-and-icon-standard)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"12px"}},"Fill color"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},borderItem.name)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},borderItem.comment)))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x2)",paddingLeft:"var(--telekom-spacing-unit-x5)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"css"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.cssVariableName," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.cssVariableName)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.jsPathName," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.jsPathName)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.value," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.value)))):null}function generateTableHead(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("thead",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",backgroundColor:"transparent",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Example"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Description"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",width:"342px"}},"Token")))}function generateSectionTitle(sectionTitleGerman,sectionTitleEnglish){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x12)",marginBottom:"var(--telekom-spacing-unit-x6)",fontWeight:800,fontSize:"32px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionTitleEnglish:sectionTitleGerman)}function generateSectionSubTitle(sectionSubTitleGerman,sectionSubTitleEnglish,hasFollowingText){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x6)",marginBottom:hasFollowingText?"var(--telekom-spacing-unit-x6)":"var(--telekom-spacing-unit-x8)",fontWeight:"bold",fontSize:"21px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionSubTitleEnglish:sectionSubTitleGerman)}function generateSectionDescription(sectionSubTitleGerman,sectionSubTitleEnglish){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x5)",marginBottom:"var(--telekom-spacing-unit-x5)",fontWeight:"normal",fontSize:"16px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionSubTitleEnglish:sectionSubTitleGerman))}return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_13__.e,{context:context,mdxType:"DocsContainer"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("h1",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?"Colors":"Farben"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?"Color design is one of the decisive factors for our overall visual appearance and brand recognition. With our brand color, Magenta, Deutsche Telekom is one of the few companies that can be recognized internationally by its color alone. This is why Magenta is always the dominant color in our visual appearance. To create a lively and interesting visual appearance, we can add more colors – as long as they harmonize with Magenta.":"Die Farbgestaltung ist einer der entscheidenden Faktoren für die visuelle Gesamterscheinung und Wiedererkennung unserer Marke. Mit unserer Markenfarbe Magenta ist die Deutsche Telekom eines der wenigen Unternehmen, das man international allein über seine Farbe erkennt. Deswegen ist Magenta in unserem Auftritt immer die dominante Farbe. Um einen lebendigen und interessanten Auftritt zu schaffen, können wir weitere Farben hinzufügen – solange sie mit Magenta harmonieren."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{role:"button",style:{cursor:"pointer",paddingLeft:"var(--telekom-spacing-unit-x2)"},onClick:function onClick(){!function changeModeLink(){var toggleMode=darkMode?"light":"dark";channel.emit(_storybook_core_events__WEBPACK_IMPORTED_MODULE_16__.UPDATE_GLOBALS,{globals:{colorMode:toggleMode}})}()}},function generateColorModeLinkText(){return"en"===locale?"Show "+(darkMode?"light":"dark")+" mode color palette":"Farbpalette des "+(darkMode?"Light":"Dark")+" Modes anzeigen"}()),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,"To make it as easy as possible for you to apply our color tokens, we use semantic names for the colors. If you change scale components or develop new components, pay attention to the correct use of the color tokens. This is the only way to ensure that future updates can be easily transferred to your designs at the push of a button. Only then can dark mode be implemented without additional effort. You can learn more about this concept in the guideline for"," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"?path=/story/guidelines-design-tokens--page&globals=locale:en;colorMode:dark"},"Design Tokens")):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,"Damit die Anwendung unserer Farb-Tokens möglichst einfach für dich ist, verwenden wir semantische Bezeichnungen für die Farben. Solltest du Scale Komponenten ändern oder neue Komponenten entwickeln, achte auf die korrekte Anwendung der Farb-Tokens. Nur dann ist gewährleistet, dass du künftige Updates einfach per Knopfdruck in deine Designs übertragen kannst. Auch der Dark Mode lässt sich nur dann ohne Mehraufwand umsetzen. In der Guideline"," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"?path=/story/guidelines-design-tokens--page&globals=locale:en;colorMode:dark"},"Design-Tokens"," ")," ","erfährst du mehr über das Konzept der Tokens im Design."," ")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("table",{className:"colors-table",style:{backgroundColor:darkMode?"#000":"#fff"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("thead",null,darkMode?generateSectionTitle("Primäre Farben im Dark Mode","Dark Mode Primary Colors"):generateSectionTitle("Primäre Farben im Light Mode","Light mode primary colors"),darkMode?generateSectionDescription("Unsere Markenfarbe Magenta sowie Schwarz und Grau sind die primären Farben für User Interfaces im Dark Mode.","The primary colors for user interfaces in dark mode are our brand color, Magenta, as well as black and gray."):generateSectionDescription("Unsere Markenfarbe Magenta sowie Weiß und Schwarz sind die primären Farben für User Interfaces im Light Mode. Die grundlegende Tonalität unserer Webseiten und digitalen Produkte wirkt dadurch freundlich, offen und hell.","The primary colors for user interfaces in light mode are our brand color, Magenta, as well as white and black. This makes the basic tonality of our websites and digital products friendly, open, and bright.")),generateTableHead(),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.primary.standard","Markenfarbe Magenta","Brand color, Magenta"),generateTableColorRow("color.background.canvas","Für den Hintergrund deiner Webseite oder App.","For the background of your website or app."),generateTableColorRow("color.background.surface-highlight","Für den Hintergrund von Komponenten oder Flächen, die hervorgehoben werden sollen (bspw. der Footer).","For the background of components or areas that should be highlighted (e.g., the footer).")),generateSectionTitle("Textfarben Standard","Text color standard"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.standard","Für alle Standardtexte.","For all standard text."),generateTableColorRow("color.text-&-icon.additional","Für Texte mit ergänzenden Informationen.","For text with additional information."),generateTableColorRow("color.text-&-icon.disabled","Nur für Texte im „disabled State“.","Only for text in a disabled state.")),generateSectionSubTitle("Weitere Farben für spezielle Anwendungsfälle","More colors for special use cases"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.inverted.standard","Inverted/Standard ist der umgekehrte Zustand der Standard-Textfarbe. Für Texte, die im jeweils anderen Modus invertiert dargestellt werden (Farbe Weiß im hellen Modus und Dunkelgrau im dunklen Modus).","Inverted / standard is the inverse state of the default text color. For text displayed as inverted in the other mode (white in light mode and dark gray in dark mode)."),generateTableColorRow("color.text-&-icon.inverted.additional","Inverted/Additional ist der umgekehrte Zustand der Additional-Textfarbe. Für Texte, die im jeweils anderen Modus invertiert dargestellt werden (ein dunkleres Grau im hellen Modus und ein helleres Grau im dunklen Modus).","Inverted / additional is the inverse state of the additional text color. For text displayed as inverted in the other mode (a darker gray in light mode and a lighter gray in dark mode)."),generateTableColorRow("color.text-&-icon.white.standard","Für Standardtexte, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi identisch sind, so zum Beispiel beim Primary Button.","For standard text displayed in white in both light and dark mode. This is mostly used when text is on a colored area that is identical in both modes, such as the primary button."),generateTableColorRow("color.text-&-icon.white.additional","Für ergänzende Texte, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi identisch sind, so zum Beispiel beim Primary Button.","For supplementary text displayed in white in both light and dark mode. This is mostly used when text is on a colored area that is identical in both modes, such as the primary button."),generateTableColorRow("color.text-&-icon.black.standard","Für Standardtexte, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi hell sind.","For standard text displayed in black in both light and dark mode. This is mostly used when text is on a colored area that is light in both modes."),generateTableColorRow("color.text-&-icon.black.additional","Für ergänzende Texte, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi hell sind.","For standard text displayed in black in both light and dark mode. This is mostly used when text is on a colored area that is light in both modes.")),generateSectionTitle("Textfarbe Funktion","Text color function"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard","Für unterstützende Informationen sowie für Funktionen wie Synchronisieren, Sortieren und Hinzufügen.","For supporting information as well as for functions like synchronize, sort, and add."),generateTableColorRow("color.text-&-icon.functional.success","Für Funktionen wie Senden, Anrufen und Aktivieren und zur Bestätigung einer erfolgreich durchgeführten Aktion.","For confirming a successfully performed action or for functions like send, call, and activate."),generateTableColorRow("color.text-&-icon.functional.danger","Für Fehlermeldungen oder Funktionen wie Beenden und Löschen.","For error messages or functions like exit and delete."),generateTableColorRow("color.text-&-icon.functional.warning","Für Warnungen vor möglicherweise unerwünschten Ergebnissen.","For warnings of potentially undesirable results."),generateTableColorRow("color.text-&-icon.functional.informational","Für unterstützende Informationen.","For supporting information.")),generateSectionTitle("Hintergrund Standard","Background standard"),generateTableHead(),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.background.canvas","Für den Hintergrund deiner Webseite oder App.","For the background of your website or app."),generateTableColorRow("color.background.canvas-subtle","Für den Hintergrund deiner Webseite oder App, bspw. wenn du ein card-basiertes Layout anlegst.","For the background of your website or app (e.g., when you create a card-based layout)."),generateTableColorRow("color.background.surface","Für die Hintergrundfläche von Komponenten wie Header oder Cards.","For the background area of components like headers or cards."),generateTableColorRow("color.background.surface-subtle","Für die Hintergrundfläche von Komponenten, die sich etwas vom weißen Hintergrund abheben sollen.","For the background area of components that should stand out somewhat against a white background."),generateTableColorRow("color.background.backdrop","Für die Abdunklung des Contents unter Dialogen.","For darkening the content under dialogs."),generateTableColorRow("color.background.surface-highlight","Für Hintergründe von Komponenten, die sich vom restlichen Inhalt abheben sollen, wie bspw. der Footer.","For backgrounds of components that should stand out from the rest of the content, such as the footer.")),generateSectionTitle("Background Funktion","Background function"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.success.standard","Für Hintergründe von Komponenten, die eine erfolgreiche Aktion bestätigen, wie bspw. eine Success Notification oder für Funktionen wie Senden, Anrufen und Aktivieren.","For backgrounds of components that confirm a successful action, such as a success notification, or for functions such as send, call, and activate."),generateTableColorRow("color.functional.success.subtle","Für Hintergründe von Komponenten, die eine erfolgreiche Aktion bestätigen, wie bspw. eine Success Notification.","For backgrounds of components that confirm a successful action, such as a success notification."),generateTableColorRow("color.functional.informational.standard","Für Hintergründe von Komponenten, die zusätzliche und hilfreiche Informationen bereitstellen, wie bspw. eine Informational Notification oder für Funktionen wie Speichern.","For backgrounds of components that provide additional and helpful information, such as an informational notification, or functions such as save."),generateTableColorRow("color.functional.informational.subtle","Für Hintergründe von Komponenten, die zusätzliche und hilfreiche Informationen bereitstellen, wie bspw. eine Success Notification.","For backgrounds of components that provide additional and helpful information, such as a success notification."),generateTableColorRow("color.functional.warning.standard","Für Hintergründe von Komponenten, die vor möglicherweise unerwünschten Ergebnissen warnen, wie bspw. die Warning Notification.","For backgrounds of components that warn of potentially undesirable results, such as a warning notification."),generateTableColorRow("color.functional.warning.subtle","Für Hintergründe von Komponenten, die vor möglicherweise unerwünschten Ergebnissen warnen, wie bspw. die Warning Notification.","For backgrounds of components that warn of potentially undesirable results, such as a warning notification."),generateTableColorRow("color.functional.danger.standard","Für Hintergründe von Komponenten, die über eine fehlgeschlagene Aktion oder einen Fehler informieren, wie bspw. die Error Notification, oder Funktionen wie Löschen.","For backgrounds of components that inform about a failed action or error, such as the error notification, or functions like delete."),generateTableColorRow("color.functional.danger.subtle","Für Hintergründe von Komponenten, die über eine fehlgeschlagene Aktion oder einen Fehler informieren, wie bspw. die Error Notification.","For backgrounds of components that inform about a failed action or error, such as error notification.")),generateSectionTitle("UI","UI"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.ui.base","","",!0),generateTableColorRow("color.ui.subtle"),generateTableColorRow("color.ui.light"),generateTableColorRow("color.ui.regular"),generateTableColorRow("color.ui.strong"),generateTableColorRow("color.ui.extra-strong"),generateTableColorRow("color.ui.black","Für Elemente, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden.","Use for elements that are displayed in black in both light and dark mode."),generateTableColorRow("color.ui.white","Für Elemente, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden.","Use for elements that are displayed in white in both light and dark mode.")),generateSectionSubTitle("UI Border","UI border"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.ui.border.standard","Für Outlines von Komponenten ohne sichtbare Füllung.","For outlines of components without visible filling.")),generateSectionTitle("Agent States","Agent states"),generateSectionDescription("Z. B. Primary Button","e.g., Primary Button"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.primary.standard","Markenfarbe Magenta","Brand color, Magenta"),generateTableColorRow("color.text-&-icon.primary.hovered"),generateTableColorRow("color.text-&-icon.primary.pressed")),generateSectionSubTitle("Text-Link","Text link"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard"),generateTableColorRow("color.text-&-icon.link.hovered"),generateTableColorRow("color.text-&-icon.link.visited"),generateTableColorRow("color.text-&-icon.link.active")),generateSectionSubTitle("Funktionale Elemente","Functional elements"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.success.standard"),generateTableColorRow("color.functional.success.hovered"),generateTableColorRow("color.functional.success.pressed")),generateSectionSubTitle("Border Focus State","Border focus state"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.focus")),generateSectionSubTitle("UI Outlined","UI outlined elements"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateUIOutlinedTableColorRow("color.ui.state-fill.standard","color.ui.border.standard",0,"#fff",0,"#fff"),generateUIOutlinedTableColorRow("color.ui.state-fill.hovered","color.ui.border.hovered",0,"#fff",0,"#fff"),generateUIOutlinedTableColorRow("color.ui.state-fill.pressed","color.ui.border.pressed",0,"#fff",0,"#000"),generateUIOutlinedTableColorRow("color.ui.state-fill.standard","color.ui.border.disabled",0,"#000",0,"#fff")),generateSectionTitle("Additional","Additional"),generateSectionDescription("Für Farbakzente und Datenvisualisierungen empfehlen wir diese zusätzlichen Farben:","For color accents and data visualizations, we recommend these additional colors:"),generateSectionSubTitle("Violett","Violet"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.violet.0","","",!0),generateTableColorRow("color.additional.violet.100","","",!0),generateTableColorRow("color.additional.violet.200","","",!0),generateTableColorRow("color.additional.violet.300","","",!0),generateTableColorRow("color.additional.violet.400","","",!0),generateTableColorRow("color.additional.violet.500","","",!0),generateTableColorRow("color.additional.violet.600","","",!0),generateTableColorRow("color.additional.violet.700","","",!0),generateTableColorRow("color.additional.violet.800","","",!0),generateTableColorRow("color.additional.violet.900","","",!0)),generateSectionSubTitle("Blau","Blue"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.blue.0","","",!0),generateTableColorRow("color.additional.blue.100","","",!0),generateTableColorRow("color.additional.blue.200","","",!0),generateTableColorRow("color.additional.blue.300","","",!0),generateTableColorRow("color.additional.blue.400","","",!0),generateTableColorRow("color.additional.blue.500","","",!0),generateTableColorRow("color.additional.blue.600","","",!0),generateTableColorRow("color.additional.blue.700","","",!0),generateTableColorRow("color.additional.blue.800","","",!0),generateTableColorRow("color.additional.blue.900","","",!0)),generateSectionSubTitle("Türkis","Cyan"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.cyan.0","","",!0),generateTableColorRow("color.additional.cyan.100","","",!0),generateTableColorRow("color.additional.cyan.200","","",!0),generateTableColorRow("color.additional.cyan.300","","",!0),generateTableColorRow("color.additional.cyan.400","","",!0),generateTableColorRow("color.additional.cyan.500","","",!0),generateTableColorRow("color.additional.cyan.600","","",!0),generateTableColorRow("color.additional.cyan.700","","",!0),generateTableColorRow("color.additional.cyan.800","","",!0),generateTableColorRow("color.additional.cyan.900","","",!0)),generateSectionSubTitle("Teal","Teal"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.teal.0","","",!0),generateTableColorRow("color.additional.teal.100","","",!0),generateTableColorRow("color.additional.teal.200","","",!0),generateTableColorRow("color.additional.teal.300","","",!0),generateTableColorRow("color.additional.teal.400","","",!0),generateTableColorRow("color.additional.teal.500","","",!0),generateTableColorRow("color.additional.teal.600","","",!0),generateTableColorRow("color.additional.teal.700","","",!0),generateTableColorRow("color.additional.teal.800","","",!0),generateTableColorRow("color.additional.teal.900","","",!0)),generateSectionSubTitle("Grün","Green"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.green.0","","",!0),generateTableColorRow("color.additional.green.100","","",!0),generateTableColorRow("color.additional.green.200","","",!0),generateTableColorRow("color.additional.green.300","","",!0),generateTableColorRow("color.additional.green.400","","",!0),generateTableColorRow("color.additional.green.500","","",!0),generateTableColorRow("color.additional.green.600","","",!0),generateTableColorRow("color.additional.green.700","","",!0),generateTableColorRow("color.additional.green.800","","",!0),generateTableColorRow("color.additional.green.900","","",!0)),generateSectionSubTitle("Olive","Olive"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.olive.0","","",!0),generateTableColorRow("color.additional.olive.100","","",!0),generateTableColorRow("color.additional.olive.200","","",!0),generateTableColorRow("color.additional.olive.300","","",!0),generateTableColorRow("color.additional.olive.400","","",!0),generateTableColorRow("color.additional.olive.500","","",!0),generateTableColorRow("color.additional.olive.600","","",!0),generateTableColorRow("color.additional.olive.700","","",!0),generateTableColorRow("color.additional.olive.800","","",!0),generateTableColorRow("color.additional.olive.900","","",!0)),generateSectionSubTitle("Braun","Brown"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.brown.0","","",!0),generateTableColorRow("color.additional.brown.100","","",!0),generateTableColorRow("color.additional.brown.200","","",!0),generateTableColorRow("color.additional.brown.300","","",!0),generateTableColorRow("color.additional.brown.400","","",!0),generateTableColorRow("color.additional.brown.500","","",!0),generateTableColorRow("color.additional.brown.600","","",!0),generateTableColorRow("color.additional.brown.700","","",!0),generateTableColorRow("color.additional.brown.800","","",!0),generateTableColorRow("color.additional.brown.900","","",!0)),generateSectionSubTitle("Gelb","Yellow"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.yellow.0","","",!0),generateTableColorRow("color.additional.yellow.100","","",!0),generateTableColorRow("color.additional.yellow.200","","",!0),generateTableColorRow("color.additional.yellow.300","","",!0),generateTableColorRow("color.additional.yellow.400","","",!0),generateTableColorRow("color.additional.yellow.500","","",!0),generateTableColorRow("color.additional.yellow.600","","",!0),generateTableColorRow("color.additional.yellow.700","","",!0),generateTableColorRow("color.additional.yellow.800","","",!0),generateTableColorRow("color.additional.yellow.900","","",!0)),generateSectionSubTitle("Orange","Orange"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.orange.0","","",!0),generateTableColorRow("color.additional.orange.100","","",!0),generateTableColorRow("color.additional.orange.200","","",!0),generateTableColorRow("color.additional.orange.300","","",!0),generateTableColorRow("color.additional.orange.400","","",!0),generateTableColorRow("color.additional.orange.500","","",!0),generateTableColorRow("color.additional.orange.600","","",!0),generateTableColorRow("color.additional.orange.700","","",!0),generateTableColorRow("color.additional.orange.800","","",!0),generateTableColorRow("color.additional.orange.900","","",!0)),generateSectionSubTitle("Rot","Red"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.red.0","","",!0),generateTableColorRow("color.additional.red.100","","",!0),generateTableColorRow("color.additional.red.200","","",!0),generateTableColorRow("color.additional.red.300","","",!0),generateTableColorRow("color.additional.red.400","","",!0),generateTableColorRow("color.additional.red.500","","",!0),generateTableColorRow("color.additional.red.600","","",!0),generateTableColorRow("color.additional.red.700","","",!0),generateTableColorRow("color.additional.red.800","","",!0),generateTableColorRow("color.additional.red.900","","",!0))))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Colors",parameters:{docs:{container:function container(_ref4){var item,borderItem,contrastSections,context=_ref4.context,locale=context&&context.globals&&context.globals.locale,colorMode=context&&context.globals&&context.globals.colorMode,allTokens="light"===colorMode?_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__:_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_dark_json__WEBPACK_IMPORTED_MODULE_15__,darkMode="light"!==colorMode,channel=_storybook_addons__WEBPACK_IMPORTED_MODULE_17__.a.getChannel(),pathStringItem=[],levelStringItem=[],cleared=!1;function getItemPathByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].path[3]?allTokens.tokens[i].path[2]+" / "+allTokens.tokens[i].path[3]:allTokens.tokens[i].path[2]}function getItemColorByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].value}function getLevelByPath(path){for(var i=0;i<levelStringItem.length;i++){var splittedItem=levelStringItem[i].split("/");if(splittedItem[0]===path)return splittedItem[1]}}function getItemByPathString(pathString){for(var i=0;i<allTokens.tokens.length;i++){var currentItem=allTokens.tokens[i];if(currentItem.pathString===pathString)return currentItem}}function getAllSections(items){var currentSection,itemPaths=[],sections=[];items.map((function(path){return itemPaths.push(getItemPathByPath(path))}));for(var i=0;i<itemPaths.length;i++)itemPaths[i].includes("/")&&(0==sections.length?(currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/")),sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/")))):currentSection!==itemPaths[i].substr(0,itemPaths[i].indexOf("/"))&&(sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/"))),currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/"))));contrastSections=sections}function hasContrastWithoutSlash(items){var itemPaths=[];items.map((function(item){itemPaths.push(getItemPathByPath(item))}));for(var i=0;i<itemPaths.length;i++)if(!itemPaths[i].includes("/"))return!0}function setContrastStates(){item.contrastChecks&&item.contrastChecks.map((function(contrastCkeckItem){pathStringItem.push(contrastCkeckItem.path),levelStringItem.push(contrastCkeckItem.path+"/"+contrastCkeckItem.level)}))}function clearContrastStates(){pathStringItem.length=0,levelStringItem.length=0,cleared=!0}function generateTableColorRow(itemPathString,commentStringGerman,commentStringEnglish,additionalColor){return additionalColor?function setAdditionalColorSettings(){allTokens=_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__}():function resetAdditionalColorSettings(){allTokens="light"===colorMode?_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__:_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_dark_json__WEBPACK_IMPORTED_MODULE_15__}(),(item=getItemByPathString(itemPathString))?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",{style:{backgroundColor:"var(--telekom-color-background-canvas)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",padding:"4px 4px 4px 0"}},clearContrastStates(),cleared?setContrastStates():null,item.contrastChecks?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x1)",marginBottom:"var(--telekom-spacing-unit-x1)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",minWidth:"400px",minHeight:"120px"}},0!==pathStringItem.length?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingTop:"var(--telekom-spacing-unit-x1)",passingBottom:"var(--telekom-spacing-unit-x1)"}},"en"===locale?"Recommended colors for text and icons":"Empfohlene Farben für Text & Icons"):null,hasContrastWithoutSlash(pathStringItem)?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{padding:"4px 4px 4px 0",border:"none",width:"140px"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,getAllSections(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",padding:"4px 4px 4px 0",width:"200px"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600,marginRight:"10px"}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))})))})):null):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"20px",marginTop:"var(--telekom-spacing-unit-x1)",marginBottom:"var(--telekom-spacing-unit-x1)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",width:"400px",minHeight:"120px"}})),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},item.name)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},"en"===locale?commentStringEnglish:commentStringGerman)))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)",width:"330px",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"css"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.cssVariableName),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("button",{id:""+item.cssVariableName,className:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.jsPathName),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("button",{id:""+item.jsPathName,className:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:500,fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.value)))):null}function generateUIOutlinedTableColorRow(itemPathString,borderItemPathString,itemTextColorLight,borderItemColorLight,itemTextColorDark,borderItemColorDark){var _ref5;return item=getItemByPathString(itemPathString),borderItem=getItemByPathString(borderItemPathString),item&&borderItem?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",{style:{backgroundColor:darkMode?"#000":"#fff"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"0px"}},clearContrastStates(),cleared?setContrastStates():null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+borderItem.value,paddingTop:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x2)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px 4px 0px 0px",minWidth:"380px",minHeight:"80px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{padding:"var(--telekom-spacing-unit-x5)",color:""+(darkMode?borderItemColorDark:borderItemColorLight),fontSize:"12px"}},"Border color")),item.contrastChecks?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"0px 0px 4px 4px",minWidth:"380px",minHeight:"120px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:(_ref5={color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingBottom:"var(--telekom-spacing-unit-x1)"},_ref5.color=""+(darkMode?itemColorDark:itemColorLight),_ref5)},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"12px"}},"Fill color ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null)),"Recommended colors for text & icons"),hasContrastWithoutSlash(pathStringItem)?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{padding:"4px 4px 4px 0",border:"none"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"11px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,getAllSections(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",padding:"4px 4px 4px 0"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"11px",fontWeight:600}},getItemPathByPath(path),"("+getLevelByPath(path)+")"))})))})):null):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"0px 0px 4px 4px",width:"400px",minHeight:"110px",color:"var(--telekom-color-text-and-icon-standard)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"12px"}},"Fill color"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},borderItem.name)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},borderItem.comment)))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x2)",paddingLeft:"var(--telekom-spacing-unit-x5)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"css"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.cssVariableName," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.cssVariableName)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.jsPathName," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.jsPathName)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.value," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.value)))):null}function generateTableHead(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("thead",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",backgroundColor:"transparent",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Example"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Description"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",width:"342px"}},"Token")))}function generateSectionTitle(sectionTitleGerman,sectionTitleEnglish){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x12)",marginBottom:"var(--telekom-spacing-unit-x6)",fontWeight:800,fontSize:"32px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionTitleEnglish:sectionTitleGerman)}function generateSectionSubTitle(sectionSubTitleGerman,sectionSubTitleEnglish,hasFollowingText){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x6)",marginBottom:hasFollowingText?"var(--telekom-spacing-unit-x6)":"var(--telekom-spacing-unit-x8)",fontWeight:"bold",fontSize:"21px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionSubTitleEnglish:sectionSubTitleGerman)}function generateSectionDescription(sectionSubTitleGerman,sectionSubTitleEnglish){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x5)",marginBottom:"var(--telekom-spacing-unit-x5)",fontWeight:"normal",fontSize:"16px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionSubTitleEnglish:sectionSubTitleGerman))}return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_13__.e,{context:context},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("h1",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?"Colors":"Farben"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?"Color design is one of the decisive factors for our overall visual appearance and brand recognition. With our brand color, Magenta, Deutsche Telekom is one of the few companies that can be recognized internationally by its color alone. This is why Magenta is always the dominant color in our visual appearance. To create a lively and interesting visual appearance, we can add more colors – as long as they harmonize with Magenta.":"Die Farbgestaltung ist einer der entscheidenden Faktoren für die visuelle Gesamterscheinung und Wiedererkennung unserer Marke. Mit unserer Markenfarbe Magenta ist die Deutsche Telekom eines der wenigen Unternehmen, das man international allein über seine Farbe erkennt. Deswegen ist Magenta in unserem Auftritt immer die dominante Farbe. Um einen lebendigen und interessanten Auftritt zu schaffen, können wir weitere Farben hinzufügen – solange sie mit Magenta harmonieren."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{role:"button",style:{cursor:"pointer",paddingLeft:"var(--telekom-spacing-unit-x2)"},onClick:function onClick(){!function changeModeLink(){var toggleMode=darkMode?"light":"dark";channel.emit(_storybook_core_events__WEBPACK_IMPORTED_MODULE_16__.UPDATE_GLOBALS,{globals:{colorMode:toggleMode}})}()}},function generateColorModeLinkText(){return"en"===locale?"Show "+(darkMode?"light":"dark")+" mode color palette":"Farbpalette des "+(darkMode?"Light":"Dark")+" Modes anzeigen"}()),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,"To make it as easy as possible for you to apply our color tokens, we use semantic names for the colors. If you change scale components or develop new components, pay attention to the correct use of the color tokens. This is the only way to ensure that future updates can be easily transferred to your designs at the push of a button. Only then can dark mode be implemented without additional effort. You can learn more about this concept in the guideline for"," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"?path=/story/guidelines-design-tokens--page&globals=locale:en;colorMode:dark"},"Design Tokens")):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,"Damit die Anwendung unserer Farb-Tokens möglichst einfach für dich ist, verwenden wir semantische Bezeichnungen für die Farben. Solltest du Scale Komponenten ändern oder neue Komponenten entwickeln, achte auf die korrekte Anwendung der Farb-Tokens. Nur dann ist gewährleistet, dass du künftige Updates einfach per Knopfdruck in deine Designs übertragen kannst. Auch der Dark Mode lässt sich nur dann ohne Mehraufwand umsetzen. In der Guideline"," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"?path=/story/guidelines-design-tokens--page&globals=locale:en;colorMode:dark"},"Design-Tokens"," ")," ","erfährst du mehr über das Konzept der Tokens im Design."," ")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("table",{className:"colors-table",style:{backgroundColor:darkMode?"#000":"#fff"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("thead",null,darkMode?generateSectionTitle("Primäre Farben im Dark Mode","Dark Mode Primary Colors"):generateSectionTitle("Primäre Farben im Light Mode","Light mode primary colors"),darkMode?generateSectionDescription("Unsere Markenfarbe Magenta sowie Schwarz und Grau sind die primären Farben für User Interfaces im Dark Mode.","The primary colors for user interfaces in dark mode are our brand color, Magenta, as well as black and gray."):generateSectionDescription("Unsere Markenfarbe Magenta sowie Weiß und Schwarz sind die primären Farben für User Interfaces im Light Mode. Die grundlegende Tonalität unserer Webseiten und digitalen Produkte wirkt dadurch freundlich, offen und hell.","The primary colors for user interfaces in light mode are our brand color, Magenta, as well as white and black. This makes the basic tonality of our websites and digital products friendly, open, and bright.")),generateTableHead(),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.primary.standard","Markenfarbe Magenta","Brand color, Magenta"),generateTableColorRow("color.background.canvas","Für den Hintergrund deiner Webseite oder App.","For the background of your website or app."),generateTableColorRow("color.background.surface-highlight","Für den Hintergrund von Komponenten oder Flächen, die hervorgehoben werden sollen (bspw. der Footer).","For the background of components or areas that should be highlighted (e.g., the footer).")),generateSectionTitle("Textfarben Standard","Text color standard"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.standard","Für alle Standardtexte.","For all standard text."),generateTableColorRow("color.text-&-icon.additional","Für Texte mit ergänzenden Informationen.","For text with additional information."),generateTableColorRow("color.text-&-icon.disabled","Nur für Texte im „disabled State“.","Only for text in a disabled state.")),generateSectionSubTitle("Weitere Farben für spezielle Anwendungsfälle","More colors for special use cases"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.inverted.standard","Inverted/Standard ist der umgekehrte Zustand der Standard-Textfarbe. Für Texte, die im jeweils anderen Modus invertiert dargestellt werden (Farbe Weiß im hellen Modus und Dunkelgrau im dunklen Modus).","Inverted / standard is the inverse state of the default text color. For text displayed as inverted in the other mode (white in light mode and dark gray in dark mode)."),generateTableColorRow("color.text-&-icon.inverted.additional","Inverted/Additional ist der umgekehrte Zustand der Additional-Textfarbe. Für Texte, die im jeweils anderen Modus invertiert dargestellt werden (ein dunkleres Grau im hellen Modus und ein helleres Grau im dunklen Modus).","Inverted / additional is the inverse state of the additional text color. For text displayed as inverted in the other mode (a darker gray in light mode and a lighter gray in dark mode)."),generateTableColorRow("color.text-&-icon.white.standard","Für Standardtexte, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi identisch sind, so zum Beispiel beim Primary Button.","For standard text displayed in white in both light and dark mode. This is mostly used when text is on a colored area that is identical in both modes, such as the primary button."),generateTableColorRow("color.text-&-icon.white.additional","Für ergänzende Texte, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi identisch sind, so zum Beispiel beim Primary Button.","For supplementary text displayed in white in both light and dark mode. This is mostly used when text is on a colored area that is identical in both modes, such as the primary button."),generateTableColorRow("color.text-&-icon.black.standard","Für Standardtexte, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi hell sind.","For standard text displayed in black in both light and dark mode. This is mostly used when text is on a colored area that is light in both modes."),generateTableColorRow("color.text-&-icon.black.additional","Für ergänzende Texte, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi hell sind.","For standard text displayed in black in both light and dark mode. This is mostly used when text is on a colored area that is light in both modes.")),generateSectionTitle("Textfarbe Funktion","Text color function"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard","Für unterstützende Informationen sowie für Funktionen wie Synchronisieren, Sortieren und Hinzufügen.","For supporting information as well as for functions like synchronize, sort, and add."),generateTableColorRow("color.text-&-icon.functional.success","Für Funktionen wie Senden, Anrufen und Aktivieren und zur Bestätigung einer erfolgreich durchgeführten Aktion.","For confirming a successfully performed action or for functions like send, call, and activate."),generateTableColorRow("color.text-&-icon.functional.danger","Für Fehlermeldungen oder Funktionen wie Beenden und Löschen.","For error messages or functions like exit and delete."),generateTableColorRow("color.text-&-icon.functional.warning","Für Warnungen vor möglicherweise unerwünschten Ergebnissen.","For warnings of potentially undesirable results."),generateTableColorRow("color.text-&-icon.functional.informational","Für unterstützende Informationen.","For supporting information.")),generateSectionTitle("Hintergrund Standard","Background standard"),generateTableHead(),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.background.canvas","Für den Hintergrund deiner Webseite oder App.","For the background of your website or app."),generateTableColorRow("color.background.canvas-subtle","Für den Hintergrund deiner Webseite oder App, bspw. wenn du ein card-basiertes Layout anlegst.","For the background of your website or app (e.g., when you create a card-based layout)."),generateTableColorRow("color.background.surface","Für die Hintergrundfläche von Komponenten wie Header oder Cards.","For the background area of components like headers or cards."),generateTableColorRow("color.background.surface-subtle","Für die Hintergrundfläche von Komponenten, die sich etwas vom weißen Hintergrund abheben sollen.","For the background area of components that should stand out somewhat against a white background."),generateTableColorRow("color.background.backdrop","Für die Abdunklung des Contents unter Dialogen.","For darkening the content under dialogs."),generateTableColorRow("color.background.surface-highlight","Für Hintergründe von Komponenten, die sich vom restlichen Inhalt abheben sollen, wie bspw. der Footer.","For backgrounds of components that should stand out from the rest of the content, such as the footer.")),generateSectionTitle("Background Funktion","Background function"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.success.standard","Für Hintergründe von Komponenten, die eine erfolgreiche Aktion bestätigen, wie bspw. eine Success Notification oder für Funktionen wie Senden, Anrufen und Aktivieren.","For backgrounds of components that confirm a successful action, such as a success notification, or for functions such as send, call, and activate."),generateTableColorRow("color.functional.success.subtle","Für Hintergründe von Komponenten, die eine erfolgreiche Aktion bestätigen, wie bspw. eine Success Notification.","For backgrounds of components that confirm a successful action, such as a success notification."),generateTableColorRow("color.functional.informational.standard","Für Hintergründe von Komponenten, die zusätzliche und hilfreiche Informationen bereitstellen, wie bspw. eine Informational Notification oder für Funktionen wie Speichern.","For backgrounds of components that provide additional and helpful information, such as an informational notification, or functions such as save."),generateTableColorRow("color.functional.informational.subtle","Für Hintergründe von Komponenten, die zusätzliche und hilfreiche Informationen bereitstellen, wie bspw. eine Success Notification.","For backgrounds of components that provide additional and helpful information, such as a success notification."),generateTableColorRow("color.functional.warning.standard","Für Hintergründe von Komponenten, die vor möglicherweise unerwünschten Ergebnissen warnen, wie bspw. die Warning Notification.","For backgrounds of components that warn of potentially undesirable results, such as a warning notification."),generateTableColorRow("color.functional.warning.subtle","Für Hintergründe von Komponenten, die vor möglicherweise unerwünschten Ergebnissen warnen, wie bspw. die Warning Notification.","For backgrounds of components that warn of potentially undesirable results, such as a warning notification."),generateTableColorRow("color.functional.danger.standard","Für Hintergründe von Komponenten, die über eine fehlgeschlagene Aktion oder einen Fehler informieren, wie bspw. die Error Notification, oder Funktionen wie Löschen.","For backgrounds of components that inform about a failed action or error, such as the error notification, or functions like delete."),generateTableColorRow("color.functional.danger.subtle","Für Hintergründe von Komponenten, die über eine fehlgeschlagene Aktion oder einen Fehler informieren, wie bspw. die Error Notification.","For backgrounds of components that inform about a failed action or error, such as error notification.")),generateSectionTitle("UI","UI"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.ui.base","","",!0),generateTableColorRow("color.ui.subtle"),generateTableColorRow("color.ui.light"),generateTableColorRow("color.ui.regular"),generateTableColorRow("color.ui.strong"),generateTableColorRow("color.ui.extra-strong"),generateTableColorRow("color.ui.black","Für Elemente, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden.","Use for elements that are displayed in black in both light and dark mode."),generateTableColorRow("color.ui.white","Für Elemente, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden.","Use for elements that are displayed in white in both light and dark mode.")),generateSectionSubTitle("UI Border","UI border"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.ui.border.standard","Für Outlines von Komponenten ohne sichtbare Füllung.","For outlines of components without visible filling.")),generateSectionTitle("Agent States","Agent states"),generateSectionDescription("Z. B. Primary Button","e.g., Primary Button"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.primary.standard","Markenfarbe Magenta","Brand color, Magenta"),generateTableColorRow("color.text-&-icon.primary.hovered"),generateTableColorRow("color.text-&-icon.primary.pressed")),generateSectionSubTitle("Text-Link","Text link"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard"),generateTableColorRow("color.text-&-icon.link.hovered"),generateTableColorRow("color.text-&-icon.link.visited"),generateTableColorRow("color.text-&-icon.link.active")),generateSectionSubTitle("Funktionale Elemente","Functional elements"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.success.standard"),generateTableColorRow("color.functional.success.hovered"),generateTableColorRow("color.functional.success.pressed")),generateSectionSubTitle("Border Focus State","Border focus state"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.focus")),generateSectionSubTitle("UI Outlined","UI outlined elements"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateUIOutlinedTableColorRow("color.ui.state-fill.standard","color.ui.border.standard",0,"#fff",0,"#fff"),generateUIOutlinedTableColorRow("color.ui.state-fill.hovered","color.ui.border.hovered",0,"#fff",0,"#fff"),generateUIOutlinedTableColorRow("color.ui.state-fill.pressed","color.ui.border.pressed",0,"#fff",0,"#000"),generateUIOutlinedTableColorRow("color.ui.state-fill.standard","color.ui.border.disabled",0,"#000",0,"#fff")),generateSectionTitle("Additional","Additional"),generateSectionDescription("Für Farbakzente und Datenvisualisierungen empfehlen wir diese zusätzlichen Farben:","For color accents and data visualizations, we recommend these additional colors:"),generateSectionSubTitle("Violett","Violet"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.violet.0","","",!0),generateTableColorRow("color.additional.violet.100","","",!0),generateTableColorRow("color.additional.violet.200","","",!0),generateTableColorRow("color.additional.violet.300","","",!0),generateTableColorRow("color.additional.violet.400","","",!0),generateTableColorRow("color.additional.violet.500","","",!0),generateTableColorRow("color.additional.violet.600","","",!0),generateTableColorRow("color.additional.violet.700","","",!0),generateTableColorRow("color.additional.violet.800","","",!0),generateTableColorRow("color.additional.violet.900","","",!0)),generateSectionSubTitle("Blau","Blue"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.blue.0","","",!0),generateTableColorRow("color.additional.blue.100","","",!0),generateTableColorRow("color.additional.blue.200","","",!0),generateTableColorRow("color.additional.blue.300","","",!0),generateTableColorRow("color.additional.blue.400","","",!0),generateTableColorRow("color.additional.blue.500","","",!0),generateTableColorRow("color.additional.blue.600","","",!0),generateTableColorRow("color.additional.blue.700","","",!0),generateTableColorRow("color.additional.blue.800","","",!0),generateTableColorRow("color.additional.blue.900","","",!0)),generateSectionSubTitle("Türkis","Cyan"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.cyan.0","","",!0),generateTableColorRow("color.additional.cyan.100","","",!0),generateTableColorRow("color.additional.cyan.200","","",!0),generateTableColorRow("color.additional.cyan.300","","",!0),generateTableColorRow("color.additional.cyan.400","","",!0),generateTableColorRow("color.additional.cyan.500","","",!0),generateTableColorRow("color.additional.cyan.600","","",!0),generateTableColorRow("color.additional.cyan.700","","",!0),generateTableColorRow("color.additional.cyan.800","","",!0),generateTableColorRow("color.additional.cyan.900","","",!0)),generateSectionSubTitle("Teal","Teal"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.teal.0","","",!0),generateTableColorRow("color.additional.teal.100","","",!0),generateTableColorRow("color.additional.teal.200","","",!0),generateTableColorRow("color.additional.teal.300","","",!0),generateTableColorRow("color.additional.teal.400","","",!0),generateTableColorRow("color.additional.teal.500","","",!0),generateTableColorRow("color.additional.teal.600","","",!0),generateTableColorRow("color.additional.teal.700","","",!0),generateTableColorRow("color.additional.teal.800","","",!0),generateTableColorRow("color.additional.teal.900","","",!0)),generateSectionSubTitle("Grün","Green"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.green.0","","",!0),generateTableColorRow("color.additional.green.100","","",!0),generateTableColorRow("color.additional.green.200","","",!0),generateTableColorRow("color.additional.green.300","","",!0),generateTableColorRow("color.additional.green.400","","",!0),generateTableColorRow("color.additional.green.500","","",!0),generateTableColorRow("color.additional.green.600","","",!0),generateTableColorRow("color.additional.green.700","","",!0),generateTableColorRow("color.additional.green.800","","",!0),generateTableColorRow("color.additional.green.900","","",!0)),generateSectionSubTitle("Olive","Olive"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.olive.0","","",!0),generateTableColorRow("color.additional.olive.100","","",!0),generateTableColorRow("color.additional.olive.200","","",!0),generateTableColorRow("color.additional.olive.300","","",!0),generateTableColorRow("color.additional.olive.400","","",!0),generateTableColorRow("color.additional.olive.500","","",!0),generateTableColorRow("color.additional.olive.600","","",!0),generateTableColorRow("color.additional.olive.700","","",!0),generateTableColorRow("color.additional.olive.800","","",!0),generateTableColorRow("color.additional.olive.900","","",!0)),generateSectionSubTitle("Braun","Brown"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.brown.0","","",!0),generateTableColorRow("color.additional.brown.100","","",!0),generateTableColorRow("color.additional.brown.200","","",!0),generateTableColorRow("color.additional.brown.300","","",!0),generateTableColorRow("color.additional.brown.400","","",!0),generateTableColorRow("color.additional.brown.500","","",!0),generateTableColorRow("color.additional.brown.600","","",!0),generateTableColorRow("color.additional.brown.700","","",!0),generateTableColorRow("color.additional.brown.800","","",!0),generateTableColorRow("color.additional.brown.900","","",!0)),generateSectionSubTitle("Gelb","Yellow"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.yellow.0","","",!0),generateTableColorRow("color.additional.yellow.100","","",!0),generateTableColorRow("color.additional.yellow.200","","",!0),generateTableColorRow("color.additional.yellow.300","","",!0),generateTableColorRow("color.additional.yellow.400","","",!0),generateTableColorRow("color.additional.yellow.500","","",!0),generateTableColorRow("color.additional.yellow.600","","",!0),generateTableColorRow("color.additional.yellow.700","","",!0),generateTableColorRow("color.additional.yellow.800","","",!0),generateTableColorRow("color.additional.yellow.900","","",!0)),generateSectionSubTitle("Orange","Orange"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.orange.0","","",!0),generateTableColorRow("color.additional.orange.100","","",!0),generateTableColorRow("color.additional.orange.200","","",!0),generateTableColorRow("color.additional.orange.300","","",!0),generateTableColorRow("color.additional.orange.400","","",!0),generateTableColorRow("color.additional.orange.500","","",!0),generateTableColorRow("color.additional.orange.600","","",!0),generateTableColorRow("color.additional.orange.700","","",!0),generateTableColorRow("color.additional.orange.800","","",!0),generateTableColorRow("color.additional.orange.900","","",!0)),generateSectionSubTitle("Rot","Red"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.red.0","","",!0),generateTableColorRow("color.additional.red.100","","",!0),generateTableColorRow("color.additional.red.200","","",!0),generateTableColorRow("color.additional.red.300","","",!0),generateTableColorRow("color.additional.red.400","","",!0),generateTableColorRow("color.additional.red.500","","",!0),generateTableColorRow("color.additional.red.600","","",!0),generateTableColorRow("color.additional.red.700","","",!0),generateTableColorRow("color.additional.red.800","","",!0),generateTableColorRow("color.additional.red.900","","",!0))))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_13__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./stories/guidelines/DesignTokens.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),DesignTokens_en="# Telekom Design Tokens\n\n## What are design tokens?\n\nDesign tokens are the variables of our designs. They centrally store the values for colors, typography, spacing, or radii – in contrast to hard-coded values. As a result, they help establish consistent product development. Handing designs off for development is less prone to errors because developers can select the right token from a predefined package. And tokens can update globally and change automatically for all projects.\n\n## How does Scale implement design tokens in practice?\n\nThe design tokens are created in a JSON format and converted into formats that can be used in Sketch, Figma, CSS, or Javascript by a program called Style Dictionary. The Sketch & Figma libraries are created by using the respective outputs from Style Dictionary. The Scale code components use the design token package as well. As a developer, you can pull the design tokens directly from GitHub into your project. This assures that everyone at Deutsche Telekom works with the same design principles to create a consistent, high-quality experience for our customers.\n\n## How designers work with design tokens\n\nWe have converted the design tokens into color, text, and shadow styles for Sketch and Figma. As a designer, you can work like you always have, using styles for your designs. Using semantic token names like Text & Icon or Link will make it easier to understand and remember what to use specific styles for. With the help of the tokens, you can also easily change the designs from light to dark mode to make sure that dark mode works well too. When we update the tokens, you just need to accept the update, and everything will update automatically.\n\n## How developers work with design tokens\n\nAs a developer, you can include the tokens as CSS variables or Javascript objects. This way, you can easily implement the styles you receive from the designers. By using the correct tokens, no extra implementation is needed for dark mode. Whenever a token needs to update, all you have to do is pull in the latest changes from GitHub or npm, and your code will update automatically. You can find the core and semantics tokens in the @telekom/design-tokens repo (folder: src). By using Scale or the design tokens repository, you only need to take care of the semantic tokens.\n\n[Color Tokens](.?path=/docs/guidelines-colors--page)\n\n[Shadows](./?path=/docs/guidelines-shadows--page)\n\n## Light and dark mode\n\nDesign tokens are the basis for an intuitive light and dark mode. In this guideline, you will learn more about the advantages of dark mode and how to implement it:\n[Light and dark mode](./?path=/docs/guidelines-light-and-dark-mode--page)\n\n## The advantages at a glance\n\n- You automatically design in a brand-compliant and consistent way.\n- Your interfaces are accessible, and you save time in the approval process.\n- You can automatically update your product with upcoming changes.\n- You automatically have the option to offer dark mode without additional effort.\n- Design tokens enable much more customization, so that Scale will be able to grow with the needs of your projects.\n- Product theming is easy to carry out (e.g., for third party products).\n",DesignTokens_de="# Telekom Design Tokens\n\n## Was sind Design Tokens?\n\nDesign Tokens sind die Variablen unseres Designs. Sie speichern die Werte für Farben, Typografie, Abstände oder Radien zentral ab – im Gegensatz zu fest codierten Werten. Dadurch erleichtern sie eine konsistente Produktentwicklung. Die Übergabe von Designs in die Entwicklung ist weniger fehleranfällig, da die Entwickler\\*innen den richtigen Token aus einem vordefinierten Paket auswählen können. Zudem ist es möglich, Tokens global zu aktualisieren – das passiert dann ganz automatisch in allen Projekten.\n\n## Wie setzt Scale Design Tokens in der Praxis um?\n\nDie Design Tokens liegen in Form einer JSON-Datei auf GitHub. Ein Programm namens Style Dictionary wandelt sie in Formate um, die in Sketch, Figma, CSS oder Javascript verwendet werden können. Unsere Sketch- und Figma-Bibliotheken beinhalten das jeweilige Ausgabeformat. Auch die Scale Code-Komponenten arbeiten mit dem Design Token Package. Als Entwickler*in kannst du die Design Tokens direkt von GitHub oder NPM in dein Projekt laden. Das stellt sicher, dass jeder bei der Deutschen Telekom mit den gleichen Designgrundlagen arbeitet und wir eine konsistente, qualitativ hochwertige Nutzungserfahrung für unsere Kund*innen schaffen.\n\n## So arbeiten Designer\\*innen mit Design Tokens\n\nWir haben die Design Tokens in Farb-, Text- und Schattenstile für Sketch und Figma konvertiert. Du kannst wie bisher arbeiten und diese Stile anwenden. Durch die Verwendung semantischer Token-Namen wie Text & Icon oder Link erkennst du leichter, welcher Stil für welches Element gedacht ist. Mit Hilfe der Tokens kannst du die Designs auch leicht vom Light in den Dark Mode ändern, um sicherzustellen, dass auch der Dark Mode gut funktioniert. Wenn wir die Tokens aktualisieren, brauchst du nur das Update zulassen, und alles wird automatisch aktualisiert.\n\n## So arbeiten Entwickler\\*innen mit Design Tokens\n\nAls Entwickler*in bindest du die Tokens in Form von CSS-Variablen oder Javascript-Objekten ein. So kannst du die Stile, die du von den Designer*innen erhältst, leicht umsetzen. Für den Dark Mode ist keine zusätzliche Implementierung erforderlich. Wann immer ein Token aktualisiert werden muss, spielst du einfach die neuesten Updates von GitHub oder NPM ein und dein Code wird automatisch aktualisiert. Du findest die Core- und Semantik-Tokens im @telekom/design-tokens Repo (Ordner: src). Als Benutzer\\*in von Scale oder dem Design-Token-Repository musst du dich nur um die semantischen Tokens kümmern.\n\n[Farben](.?path=/docs/guidelines-colors--page)\n\n[Schatten](./?path=/docs/guidelines-shadows--page)\n\n## Light und Dark Mode\n\nDesign Tokens bilden die Grundlage für einen intuitiven Light und Dark Mode. In dieser Guideline erfährst du mehr darüber, welche Vorteile der Dark Mode bietet und wie du diesen implementieren kannst.\n\n[Light and Dark Mode](./?path=/docs/guidelines-light-and-dark-mode--page)\n\n## Die Vorteile im Überblick\n\n- Du gestaltest automatisch brand-konform und konsistent.\n- Deine Interfaces sind barrierefrei und du sparst Zeit im Approval-Prozess.\n- Bei künftigen Änderungen kannst du dein Produkt automatisch aktualisieren.\n- Du hast die Möglichkeit, den Dark Mode anzubieten, ohne dass es dich zusätzlich Zeit kostet.\n- Die große Anpassungsfähigkeit ermöglicht, dass Scale mit den Anforderungen von Telekom Projekten wachsen kann.\n- Das Theming von Produkten ist leicht umsetzbar (bspw. für Third-Party-Produkte).\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Design Tokens",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?DesignTokens_en:DesignTokens_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Design Tokens",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?DesignTokens_en:DesignTokens_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Grid.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Grid_en="# Grid\n\nThe grid is the geometric foundation of all our visual elements - from typography to columns, boxes, icons, and illustrations. It provides structure and guidance for all creative decision-making.\n\n## Base unit\n\nThe basic unit of our grid is the eight-pixel square base unit. Multiples of base units compose the dimensions of columns, rows, and boxes, along with their margins and padding. The base unit adapts to your content while maintaining a consistent visual rhythm.\n\n![Image Name](assets/2_guidelines/1_grid/Grid01.png)\n\n## Spacing types\n\n![Image Name](assets/2_guidelines/1_grid/Grid02.png)\n\n**Margin - fixed (1)**\n\n**Columns - dynamic (2)**\n\n**Gutter - fixed (3)**\n\n## Breakpoints\n\n| Breakpoint | Range in px  | Margin in px | Column Amount | Column in px | Gutter in px |\n| ---------- | ------------ | ------------ | ------------- | ------------ | ------------ |\n| S          | 320 - 639    | 16           | 4             | Dynamic      | 32           |\n| M          | 640 - 1039   | 16           | 8             | Dynamic      | 32           |\n| L          | 1040 - 1295  | 24           | 16            | Dynamic      | 32           |\n| XL         | 1296 - 1679  | 24           | 16            | Dynamic      | 32           |\n| XXL        | 1680 & above | Dynamic      | 16            | 64           | 32           |\n\n### Small\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-s_.png)\n\n### Medium\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-m_.png)\n\n### Large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-l_.png)\n\n### X-large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-xl_.png)\n\n### XX-large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-xxl_.png)\n",Grid_de="# Gestaltungsraster\n\nDas Gestaltungsraster ist die Basis für jedes Design. Es ist die geometrische Grundlage aller visuellen Elemente: Von Typografie über Icon bis zur Illustration. Es gibt Struktur und Hilfestellung bei all deinen kreativen Entscheidungen.\n\n## Basiseinheit\n\nDie Basiseinheit des Gestaltungsrasters ist 8 x 8 Pixel groß. Mehrere Basiseinheiten bilden zusammen die Spalten, Zeilen und Blöcke mit ihren Randabständen und Paddings. Die Menge der Flächen kann variieren, wobei die Basiseinheit an sich immer gleich groß bleibt.\n\n![Image Name](assets/2_guidelines/1_grid/Grid01.png)\n\n## Abstände und Größen\n\n![Image Name](assets/2_guidelines/1_grid/Grid02.png)\n\n**Randabstand - fest (1)**\n\n**Layout-Spalte - dynamisch (2)**\n\n**Spaltenabstand - fest (3)**\n\n## Breakpoints\n\n| Breakpoint | Bereich in px | Randabstand in px | Anzahl der Spalten | Spalte in px | Spaltenabstand in px |\n| ---------- | ------------- | ----------------- | ------------------ | ------------ | -------------------- |\n| S          | 320 - 639     | 16                | 4                  | Dynamisch    | 32                   |\n| M          | 640 - 1039    | 16                | 8                  | Dynamisch    | 32                   |\n| L          | 1040 - 1295   | 24                | 16                 | Dynamisch    | 32                   |\n| XL         | 1296 - 1679   | 24                | 16                 | Dynamisch    | 32                   |\n| XXL        | 1680 & above  | Dynamisch         | 16                 | 64           | 32                   |\n\n### Small\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-s_.png)\n\n### Medium\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-m_.png)\n\n### Large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-l_.png)\n\n### X-large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-xl_.png)\n\n### XX-large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-xxl_.png)\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Grid",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Grid_en:Grid_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Grid",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Grid_en:Grid_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/LightAndDarkMode.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),LightAndDarkMode_en='# Light and Dark Mode\n\n**Light and dark mode are directed at different user groups and different use cases. This is not only about aesthetics, but also about avoiding eye strain. Be it due to ambient light or, for example, visual impairments such as cataracts.**\n\nWith the help of our components, dark mode can be implemented with almost no additional effort. Both in the design and in the code.\n\n![Dark mode example modal](assets/dark-mode-example-modal.png)\n\n## Light mode\n\nMost general users without visual impairments prefer light mode, especially in a well-lit environment. As such, we recommend light mode as default, unless there are special reasons not to. However, there are also exceptions, such as Magenta TV – this platform is offered exclusively in dark mode.\n\n## Dark mode\n\nDark mode is especially beneficial for users with certain visual impairments, as it makes it easier to distinguish between elements and text. Some users also benefit from the lower contrast in dark mode. Most users, even without visual impairments, prefer dark mode at night and in dimly-lit environments. This helps avoid eye strain and fatigue.\n\n## Switching modes\n\nEach color of a component is replaced by a matching color from the other mode. This allows designers and developers to change modes with almost no additional effort.\n\n![Dark mode example shapes](assets/dark-mode-example-shapes.png)\n\n## An optimized color palette\n\nWe’ve optimized the Scale color palette so that it provides a consistent look and feel across both modes. Of course, all colors in our components are\ncertified for accessibility. To learn more, [check out an overview of the new color palette](./?path=/docs/guidelines-colors--page)\n\n![Dark mode example palette](assets/img_color.png)\n\n## Let your users decide\n\nSince there are many personal reasons for choosing a mode, it’s ideal to let your users decide which mode they want to use. If you can detect user preferences from the operating system (like via `prefers-color-scheme` on the web), select the preferred mode automatically. To offer a manual change, you can offer a button or switch that toggles between light and dark mode – e.g., in the settings of your product.\n\n## For designers\n\nScale allows you to design in either light or dark mode. Switching is possible at any time at the press of a button, so you can view your design in the other mode. But even without additional designs, the development team can activate the other mode.\n\n### Sketch\n\n- Go to <a href="./?path=/docs/setup-info-getting-started-for-designers--page">Getting Started for Designers</a> and import the libraries for light and dark mode.\n- Design your interface with the library of your choice.\n- To change the mode, go to Preferences > Libraries and select the other library. When asked, select "Replace". Close the preferences window.\n- In Sketch, click the notification icon (bell) in the upper-right corner and select "Component updates available".\n- Select "Update components".\n- Now your design will appear in the other mode.\n\n![Dark mode sketch modes](assets/dark-mode-sketch-modes-en.png)\n\n## Information for developers\n\n### Implementing dark mode\n\nDark mode is included starting with Scale version `3.0.0-beta.100`. It leverages CSS variables to allow switching modes.\n\nBy default, the mode is set to match the operating system preferences, via the `prefers-color-scheme` media query.\n\nAlternatively, you can set the mode via the `data-mode` attribute. The value must be either `light` or `dark`. It\'s recommended to do this in the body, e.g. `<body data-mode="light">`, although it\'s also possible to only switch a specific part of the page.\n\nSetting the `data-mode` attribute will override the system preferences.\n\nIn order to have your app switch modes entirely (not only the Scale components), use the following tokens for the canvas and text colors:\n\n```css\nbody {\n  background-color: var(--telekom-color-background-canvas);\n  color: var(--telekom-color-text-and-icon-standard);\n}\n```\n\nThere are more color tokens at your disposal for different use cases. Please make sure to check our guideline on [Colors](./?path=/docs/guidelines-colors--page).\n\n### Disabling automatic switching\n\nIf you want your app to be in either light or dark mode regardless of the user\'s system preferences, set the data-mode attribute to the desired mode:\n\n```html\n<body data-mode="light"></body>\n```\n\n### Changing modes manually\n\nYou can build a switch into the UI with a bit of JavaScript, to set the `data-mode` attribute accordingly. The following snippet should serve as an illustration:\n\n```js\nconst element = document.querySelector(\'.mode-switch\');\n\nelement.addEventListener(\'click\', function switchMode() {\n  const isDark = document.body.dataset.mode === \'dark\';\n  document.body.dataset.mode = isDark ? \'light\' : \'dark\';\n});\n```\n\nIn JavaScript, you can check and monitor the system preference via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia" target="_blank" rel="noopener noreferrer">window.matchMedia</a> method.\n\n```js\nconst mq = window.matchMedia(\'(prefers-color-scheme: dark)\');\nconst isDark = mq.matches;\n```\n',LightAndDarkMode_de='# Light und Dark Mode\n\n**Light und Dark Mode richten sich an unterschiedliche Nutzungsgruppen und -szenarien. Dabei geht es nicht nur um Ästhetik, sondern oft auch darum, eine Überanstrengung der Augen zu vermeiden. Sei es aufgrund des Umgebungslichts oder bspw. bei Sehbehinderungen, wie dem Grauen Star.**\n\nMithilfe unserer Komponenten lässt sich der Dark Mode nahezu ohne zusätzlichen Aufwand implementieren. Sowohl im Design als auch im Code.\n\n![Dark mode example modal](assets/dark-mode-example-modal.png)\n\n## Light Mode\n\nDie meisten Nutzer\\*innen mit normaler Sehkraft bevorzugen den hellen Modus, insbesondere in einer gut beleuchteten Umgebung. Daher empfehlen wir den hellen Modus als Standard, sofern keine besonderen Gründe dagegensprechen. Es gibt aber auch Ausnahmen, wie bspw. MagentaTV – diese Plattform ist ausschließlich im Dark Mode umgesetzt.\n\n## Dark Mode\n\nDer dunkle Modus ist besonders für Nutzer*innen mit bestimmten Sehschwächen von Vorteil, da er die Unterscheidung von Elementen und Texten erleichtert. Einige Nutzer*innen profitieren auch von dem geringeren Kontrast im dunklen Modus. Die meisten Nutzer\\*innen, auch mit normaler Sehkraft, ziehen den dunklen Modus bei Nacht und in schwach beleuchteter Umgebung vor. Dies hilft, Überanstrengung und Müdigkeit der Augen zu vermeiden.\n\n## Den Modus wechseln\n\nJede Farbe einer Komponente wird durch eine passende Farbe aus dem jeweils anderen Modus ersetzt. So ist der Wechsel des Modus für Designer*innen und Entwickler*innen nahezu ohne zusätzlichen Aufwand möglich.\n\n![Dark mode example shapes](assets/dark-mode-example-shapes.png)\n\n## Optimierte Farbpalette\n\nWir haben die Farbpalette angepasst, sodass sie für beide Modi ein konsistentes Erscheinungsbild bietet. Selbstverständlich sind alle Farben in unseren Komponenten auf Barrierefreiheit geprüft. Eine Übersicht der neuen Farbpalette mit Nutzungshinweisen findest du [hier](./?path=/docs/guidelines-colors--page).\n\n![Dark mode example palette](assets/img_color.png)\n\n## Lass die Nutzer\\*innen entscheiden\n\nDa es viele persönliche Gründe für die Auswahl des Modus gibt, lasse deine Nutzer\\*innen im Idealfall selbst entscheiden, in welchem Modus sie dein Produkt nutzen möchten. Können die Benutzungspräferenzen vom Betriebssystem abgeleitet werden, bspw. über Prefers Color Scheme im Web, sollte der bevorzugte Modus automatisch ausgewählt und als Default angeboten werden. Für einen manuellen Wechsel kannst du auch einen Button, Switch oder Toggle Button anbieten – bspw. in den Nutzungseinstellungen deines Produkts.\n\n## Hinweis Für Designer\\*innen\n\nScale erlaubt es, entweder im hellen oder dunklen Modus zu gestalten. Ein Wechsel ist jederzeit per Knopfdruck möglich, sodass du die Wirkung im jeweils anderen Modus beurteilen kannst. Aber auch ohne zusätzliche Designs kann das Entwicklungsteam den anderen Modus aktivieren.\n\nWenn du bereits eine ältere Version unserer Sketch Library nutzt, lese dir bitte zunächst unsere Aktualisierungshinweise durch und lade im Anschluss das Update.\n\n### Sketch\n\n- Gehe auf die Seite „<a href="./?path=/docs/setup-info-getting-started-for-designers--page">Erste Schritte für Designer\\*innen</a>“ und importiere die Libraries für den hellen und dunklen Modus.\n- Gestalte mit der Library deiner Wahl dein Interface.\n- Um den Modus zu wechseln, gehe in die „Preferences“ > „Libraries“ und wähle die andere Library aus. Dort wirst du gefragt, ob die zu Anfang genutzte Library ersetzt werden soll. Bitte bestätige das und schließe dann das Einstellungsfenster.\n- Klicke in Sketch auf das Benachrichtigungssymbol (Glocke) in der rechten oberen Ecke und wähle „Component Updates Available".\n- Wähle „Update Components“.\n- Nun wird dein Design im jeweils anderen Modus angezeigt.\n\n![Dark mode sketch modes](assets/dark-mode-sketch-modes-de.png)\n\n## Hinweis für Entwickler\\*innen\n\n### Dark Mode implementieren\n\nDer Dark Mode ist in Scale ab Version `3.0.0-beta.100` enthalten. Er nutzt CSS-Variablen, um einen Wechsel des Modus zu ermöglichen.\n\nStandardmäßig wird der Modus so eingestellt, dass er den Einstellungen des Betriebssystems entspricht, und zwar über die Medienabfrage `prefers-color-scheme`.\n\nAlternativ können die Modi auch über das `data-mode`-Attribut festgelegt werden. Der Wert muss entweder `light` oder `dark` sein. Es wird empfohlen, dies im Body Text zu tun, z. B. `<body data-mode="light">`, obwohl es auch möglich ist, nur einen bestimmten Teil der Seite umzuschalten.\n\nDas Setzen des `data-mode`-Attributs setzt die Systemeinstellungen außer Kraft.\n\nDamit deine Anwendung komplett zwischen den Modi wechselt und nicht nur die Scale Komponenten, verwende die folgenden Tokens für den Hintergrund und die Texte.\n\n```css\nbody {\n  background-color: var(--telekom-color-background-canvas);\n  color: var(--telekom-color-text-and-icon-standard);\n}\n```\n\nMehr Informationen zu weiteren Farb-Tokens findest du in der Guideline [Colors](./?path=/docs/guidelines-colors--page).\n\n### Deaktivieren der automatischen Umschaltung\n\nSoll sich die Anwendung unabhängig von den Systemeinstellungen der Nutzer\\*innen entweder im hellen oder im dunklen Modus befinden, setze das Attribut data-mode auf den gewünschten Modus:\n\n```html\n<body data-mode="light"></body>\n```\n\n### Modus manuell wechseln\n\nMit ein wenig JavaScript kann ein Switch in die Benutzungsoberfläche eingebaut werden, um das Attribut data-mode entsprechend zu setzen. Der folgende Ausschnitt soll zur Veranschaulichung dienen:\n\n```js\nconst element = document.querySelector(\'.mode-switch\');\n\nelement.addEventListener(\'click\', function switchMode() {\n  const isDark = document.body.dataset.mode === \'dark\';\n  document.body.dataset.mode = isDark ? \'light\' : \'dark\';\n});\n```\n\nIn JavaScript kannst du die Systemeinstellung mit der Methode <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia" target="_blank" rel="noopener noreferrer">window.matchMedia</a> prüfen und überwachen.\n\n```js\nconst mq = window.matchMedia(\'(prefers-color-scheme: dark)\');\nconst isDark = mq.matches;\n```\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Light and Dark Mode",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?LightAndDarkMode_en:LightAndDarkMode_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Light and Dark Mode",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?LightAndDarkMode_en:LightAndDarkMode_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Shadows.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Shadows_en="# Scale Shadows\n\nShadows make the visual level clear where components and elements are located. They help users quickly understand the UI. As such, it’s important to use the right shadow for a specific use case.\n\n## Raised\n\nFor elements that are visually elevated.\n\n![raised shadows](assets/shadows-raised.png)\n\n## Floating\n\nFor floating elements like notifications or action buttons (not yet included).\n\n![floating shadows](assets/shadows-floating.png)\n\n## Top\n\nFor elements that are positioned above the main content, like navigations, bottomsheets, etc.\n\n![top](assets/shadows-top.png)\n\n## Overlay\n\nFor elements that are temporarily positioned above everything else. Use this for modals, dialogs, or something similar.\n\n![overlay](assets/shadows-overlay.png)\n\n## App bar top\n\n> Available soon\n\nThe app bar top shadow tokens are for headers and app bars at the top.\n\n## App bar bottom\n\n> Available soon\n\nThe app bar bottom shadow tokens are for bottom bars and other elements that are stuck to the bottom.\n",Shadows_de="# Scale Shadows\n\nSchatten verdeutlichen, auf welcher visuellen Ebene Komponenten und Elemente liegen. Sie helfen Nutzer\\*innen, die Benutzungsoberfläche schnell zu verstehen. Daher ist es wichtig, für jeden Anwendungsfall den richtigen Schatten zu verwenden.\n\n## Raised\n\nFür Komponenten, die visuell angehoben werden.\n\n![raised shadows](assets/shadows-raised.png)\n\n## Floating\n\nFür Komponenten, die oberhalb des Inhalts liegen, wie bspw. eine Notification oder ein Action Button (noch nicht enthalten).\n\n![floating shadows](assets/shadows-floating.png)\n\n## Top\n\nFür Komponenten auf oberster Ebene, wie bspw. die Navigation.\n\n![top](assets/shadows-top.png)\n\n## Overlay\n\nFür Komponenten, die den gesamten Inhalt temporär überlagern, wie bspw. das Modal.\n\n![overlay](assets/shadows-overlay.png)\n\n## App Bar Top\n\n> Diese Funktion ist bald verfügbar.\n\nDie App Bar Top Shadow Tokens für den oberen Schatten sind für Kopfzeilen und App-Bars im oberen Bereich gedacht.\n\n## App Bar Bottom\n\n> Diese Funktion ist bald verfügbar.\n\nDie App Bar Bottom Shadow Tokens sind für Bottom Bars und andere Elemente, die persistent am unteren Viewport sitzen.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Shadows",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Shadows_en:Shadows_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Shadows",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Shadows_en:Shadows_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Spacing.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Spacing_en='# Spacing\n\nSpacing is an important — and often overlooked — part of visual design. Scale takes a lot of the guesswork out of spacing to help designers deliver clear, functional layouts.\n\n## Spacing scale\n\nUse the spacing units when building individual components. They include small increments needed to create appropriate spatial relationships for detail-level designs.\n\n| variable name    | px  | rem    | example                                                    |\n| ---------------- | --- | ------ | ---------------------------------------------------------- |\n| --scl-spacing-1  | 1   | 0.0625 | <scale-sb-spacing style="width: 1px;"></scale-sb-spacing>  |\n| --scl-spacing-2  | 2   | 0.125  | <scale-sb-spacing style="width: 2px;"></scale-sb-spacing>  |\n| --scl-spacing-4  | 4   | 0.25   | <scale-sb-spacing style="width: 4px;"></scale-sb-spacing>  |\n| --scl-spacing-8  | 8   | 0.5    | <scale-sb-spacing style="width: 8px;"></scale-sb-spacing>  |\n| --scl-spacing-12 | 12  | 0.75   | <scale-sb-spacing style="width: 12px;"></scale-sb-spacing> |\n| --scl-spacing-16 | 16  | 1      | <scale-sb-spacing style="width: 16px;"></scale-sb-spacing> |\n| --scl-spacing-24 | 24  | 1.5    | <scale-sb-spacing style="width: 24px;"></scale-sb-spacing> |\n| --scl-spacing-32 | 32  | 2      | <scale-sb-spacing style="width: 32px;"></scale-sb-spacing> |\n\n## Layout scale\n\nThe layout units arrange components and other UI parts into a full-page layout. Their larger increments control the density of a design. Use the smaller spacing tokens to create dense compositions and direct relationships. Use the larger tokens to increase the amount of white space and to separate sections.\n\n| variable name    | px  | rem | example                                                    |\n| ---------------- | --- | --- | ---------------------------------------------------------- |\n| --scl-spacing-16 | 16  | 1   | <scale-sb-spacing style="width: 16px;"></scale-sb-spacing> |\n| --scl-spacing-24 | 24  | 1.5 | <scale-sb-spacing style="width: 24px;"></scale-sb-spacing> |\n| --scl-spacing-32 | 32  | 2   | <scale-sb-spacing style="width: 32px;"></scale-sb-spacing> |\n| --scl-spacing-40 | 40  | 2.5 | <scale-sb-spacing style="width: 40px;"></scale-sb-spacing> |\n| --scl-spacing-48 | 48  | 3   | <scale-sb-spacing style="width: 48px;"></scale-sb-spacing> |\n| --scl-spacing-64 | 64  | 4   | <scale-sb-spacing style="width: 64px;"></scale-sb-spacing> |\n| --scl-spacing-80 | 80  | 5   | <scale-sb-spacing style="width: 80px;"></scale-sb-spacing> |\n\n## Designing with space\n\nEvery part of a UI — including the empty space between elements — should be intentional. The amount of space between items creates relationships and hierarchy.\n\n### Creating relationships\n\nUsers consider elements that are near each other to be meaningfully related. As the space between elements increases, their perceived relationship weakens.\n\nPatterns in spacing can also create relationships. Users see elements with the same spacing pattern as related pieces that have equal weight.\n\nSpace can also denote groups of associated information. This creates content sections on a page without having to use lines or other graphical elements as a divider.\n\n### Creating hierarchy\n\nElements with more space tend to convey a greater importance than elements with less space. Take this page for instance: The top-level headers have more space around them, which gives them focus and prominence. Then, as the headers descend in importance, they receive less space, which signals that they are subordinate.\n\nUsers can easily overlook elements that are close to each other. While users may be aware of the grouping, they may not process each individual item. Therefore, if a page has content or an element of high importance, consider giving it extra surrounding space to help it attract focus.\n\n### White space\n\nEmpty space — also known as white space — is important in design. It can break up sections on a page or help add focus to certain elements. White space also helps with information processing, since too much dense information can be disorienting or overwhelming for a user. Individual sections of a UI are allowed to be dense, but the whole page should never be crowded; there should always be white space to give the user’s eye some rest.\n',Spacing_de='# Abstände\n\nDer Umgang mit Abständen ist ein wichtiger, aber oft vernachlässigter Aspekt bei der Gestaltung des visuellen Designs. Scale legt hierfür Normen zugrunde, die dir helfen, klare und funktionale Layouts zu erstellen.\n\n## Abstandseinheiten\n\nVerwende die folgenden Einheiten bei der Konstruktion von Komponenten. Sie enthalten kleine Abstufungen, mit denen du eine geeignete räumliche Beziehung auf der Detailebene schaffen kannst.\n\n| Variablen Name   | px  | rem    | Beispiel                                                   |\n| ---------------- | --- | ------ | ---------------------------------------------------------- |\n| --scl-spacing-1  | 1   | 0.0625 | <scale-sb-spacing style="width: 1px;"></scale-sb-spacing>  |\n| --scl-spacing-2  | 2   | 0.125  | <scale-sb-spacing style="width: 2px;"></scale-sb-spacing>  |\n| --scl-spacing-4  | 4   | 0.25   | <scale-sb-spacing style="width: 4px;"></scale-sb-spacing>  |\n| --scl-spacing-8  | 8   | 0.5    | <scale-sb-spacing style="width: 8px;"></scale-sb-spacing>  |\n| --scl-spacing-12 | 12  | 0.75   | <scale-sb-spacing style="width: 12px;"></scale-sb-spacing> |\n| --scl-spacing-16 | 16  | 1      | <scale-sb-spacing style="width: 16px;"></scale-sb-spacing> |\n| --scl-spacing-24 | 24  | 1.5    | <scale-sb-spacing style="width: 24px;"></scale-sb-spacing> |\n| --scl-spacing-32 | 32  | 2      | <scale-sb-spacing style="width: 32px;"></scale-sb-spacing> |\n\n## Layout-Einheiten\n\nMit Layout-Einheiten kannst du einzelne Komponenten und andere UI-Elemente eines User Interfaces in einem ganzseitigen Layout sinnvoll anordnen. Verwende die größeren Einheiten, um die Dichte eines Layouts zu verringern, Weißraum zu erzeugen oder Abschnitte voneinander zu trennen. Mit den kleineren Einheiten verdichtest du dein Layout und schaffst direkte Beziehungen.\n\n| Variablen Name   | px  | rem | Beispiel                                                   |\n| ---------------- | --- | --- | ---------------------------------------------------------- |\n| --scl-spacing-16 | 16  | 1   | <scale-sb-spacing style="width: 16px;"></scale-sb-spacing> |\n| --scl-spacing-24 | 24  | 1.5 | <scale-sb-spacing style="width: 24px;"></scale-sb-spacing> |\n| --scl-spacing-32 | 32  | 2   | <scale-sb-spacing style="width: 32px;"></scale-sb-spacing> |\n| --scl-spacing-40 | 40  | 2.5 | <scale-sb-spacing style="width: 40px;"></scale-sb-spacing> |\n| --scl-spacing-48 | 48  | 3   | <scale-sb-spacing style="width: 48px;"></scale-sb-spacing> |\n| --scl-spacing-64 | 64  | 4   | <scale-sb-spacing style="width: 64px;"></scale-sb-spacing> |\n| --scl-spacing-80 | 80  | 5   | <scale-sb-spacing style="width: 80px;"></scale-sb-spacing> |\n\n## Mit Weißraum gestalten\n\nJeder Teil eines User Interfaces – auch der leere Raum zwischen den Elementen – sollte bewusst gestaltet sein. Je nach Größe der Abstände kannst du Zusammenhänge oder Hierarchien zwischen Elementen erzeugen.\n\n### Zusammenhänge herstellen\n\nElemente, die nahe beieinander liegen, erkennen Nutzer\\*innen als zusammengehörig. Je größer der Abstand zwischen Elementen ist, desto schwächer erscheint die Beziehung.\n\nDurch Abstände erzeugte Muster können ebenfalls Beziehungen herstellen. Elemente, die im gleichen Abstandsmuster angeordnet sind, werden als zusammengehörige, gleichwertige Teile wahrgenommen.\n\nDu kannst Weißraum auch dazu verwenden, um die Zusammengehörigkeit von Informationen zu verdeutlichen. Damit erzeugst du Inhaltsabschnitte auf einer Seite, ohne dass du Linien oder andere grafischen Elemente als Trenner verwenden musst.\n\n### Hierarchie erzeugen\n\nJe mehr Weißraum ein Element umgibt, desto wichtiger wirkt es. Das lässt sich an diesem Beispiel verdeutlichen: Die Überschrift der ersten Ebene einer Webseite besitzt immer den größten umgebenden Leerraum. Das verleiht ihr die größte Aufmerksamkeit und vermittelt Wichtigkeit. Alle darauffolgenden Überschriften erhalten weniger Platz – das signalisiert, dass sie untergeordnet sind.\n\nBitte beachte, dass Elemente, die nahe beieinander liegen auch leichter übersehen werden können. Während die Nutzer\\*innen die Gruppierung wahrnehmen, verarbeiten sie möglicherweise nicht jedes einzelne Element. Wenn du also wichtige Inhalte hervorheben möchtest, umgib sie einfach mit zusätzlichem Weißraum.\n\n### Weißraum\n\nDer Leerraum ist in der Gestaltung auch als Weißraum bekannt. Du kannst ihn verwenden, um Abschnitte auf einer Seite aufzuteilen oder um den Fokus auf bestimmte Elemente zu lenken. Weißraum hilft auch bei der Informationsverarbeitung: Er erhöht die Lesbarkeit einer Seite und gibt dem Auge Ruhe. Zu viele Informationen sind unübersichtlich und überfordern die Nutzer\\*innen. Einzelne Abschnitte dürfen zwar kompakt sein, die gesamte Seite sollte jedoch nicht überfüllt wirken.\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Spacing",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Spacing_en:Spacing_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Spacing",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Spacing_en:Spacing_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Theming.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Theming_en="# Customization and Themes\n\nMost Scale components use the shadow DOM to encapsulate styles, so you can't modify their styles by targeting them with a plain CSS selector. To allow for customization, however, each component exposes a set of **scoped CSS variables** and **shadow parts**.\n\nCustomization is possible at different levels. For instance, you can:\n\n- customize a single instance of a component,\n- _extend_ or create a new \"variant\" of a component, or\n- create a theme that groups a set of customizations.\n\nBy default, components are styled using Scale's design tokens. These are CSS variables defined in `:root` in the `scale-components.css` file. When customizing elements, always try and use a limited set of design tokens – either the system's, your own, or both – to keep your UI consistent.\n\nTo learn more about CSS custom properties (also called variables) and shadow parts, please refer to:\n\n- [Using CSS custom properties (variables) on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\n- [A user's guide to CSS variables by Lea Verou](https://increment.com/frontend/a-users-guide-to-css-variables/)\n- [::part on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)\n- [CSS Shadow Parts spec draft at W3C](https://drafts.csswg.org/css-shadow-parts-1/#part)\n\n## Customization options\n\n### Component-scoped variables\n\nYou can overwrite a component's variables in your CSS.\n\n```css\nscale-button {\n  --radius: 0;\n}\n```\n\nCreating variants is also possible by grouping overwrites in a CSS selector, like a class or an attribute.\n\n```html\n<style>\n  scale-button.squared {\n    --radius: 0;\n  }\n</style>\n\n<scale-button class=\"squared\">Sign in</scale-button>\n```\n\nAn attribute doesn't need to exist in the component for you to use it as a selector; you can use anything as long as it's a valid CSS selector.\n\n```html\n<style>\n  scale-button[variant='squared'] {\n    --radius: 0;\n  }\n</style>\n\n<scale-button variant=\"squared\">Sign in</scale-button>\n```\n\nIf you need to customize a single instance, you can inline it:\n\n```html\n<scale-button style=\"--radius: 0\">Sign out</scale-button>\n```\n\n### Shadow Parts\n\nShadow parts make it possible to target internal elements of a component directly via the [`::part` pseudo-element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).\n\n```css\nscale-button::part(base) {\n  border-radius: 0;\n}\n```\n\nIt's possible to apply the same idea of a variant.\n\n```css\nscale-button[variant='squared']::part(base) {\n  border-radius: 0;\n  background: var(--telekom-color-additional-teal-600);\n}\n\nscale-button[variant='squared']::part(base):hover {\n  background: var(--telekom-color-additional-teal-900);\n}\n```\n\nBear in mind that the `::part` selector is limited exclusively to a single element; you can’t target descendants and siblings or chain it.\n\n### Themes\n\nWhen we group a set of style customization under the scope of a CSS class, we create a theme we can activate as easily as adding that class to the body of the document.\n\nAs an example:\n\n```css\n<style>\n  .theme-example {\n    --telekom-color-primary-standard: limegreen;\n    --telekom-color-primary-hovered: seagreen;\n    --telekom-color-primary-pressed: green;\n  }\n\n  .theme-example scale-button,\n  .theme-example scale-tag,\n  .theme-example scale-card {\n    --radius: 2em;\n  }\n\n  .theme-example scale-button[variant=\"plain\"]::part(base) {\n    background: transparent;\n    border: 2px solid currentColor;\n  }\n</style>\n\n<body class=\"theme-example\">\n```\n",Theming_de='# Anpassungen und Themes\n\nDie meisten Scale Komponenten nutzen das Shadow DOM, um vorgeschriebene Stylings zu kapseln. Dadurch lassen sich Styles auch dann nicht verändern, wenn sie über einen einfachen CSS Selector angesteuert werden. Um dennoch individuell gestalten zu können, bietet jede Komponente eine Sammlung von **scoped CSS variables** und **shadow parts**.\n\nAnpassungen sind auf verschiedenen Ebenen möglich. Du kannst zum Beispiel:\n\n- eine einzelne Instanz einer Komponente anpassen,\n- eine Komponente erweitern oder eine neue „Variante“ anlegen,\n- ein Theme erstellen, das eine Reihe von Anpassungen kombiniert.\n\nStandardmäßig werden die Komponenten mit den Design-Tokens von Scale gestaltet. Das sind CSS-Variablen, die über `:root` in der Datei `scale-components.css` definiert sind. Versuch beim Anpassen von Elementen eine möglichst kleine Zahl von Design-Tokens zu benutzen: entweder die vom System, die eigenen oder eine Kombination aus beiden. So sorgst du für ein konsistentes User Interface.\n\nHier erfährst du mehr über individuelle CSS-Eigenschaften (Variablen) und Shadow Parts:\n\n- [Using CSS custom properties (variables) on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\n- [A user\'s guide to CSS variables by Lea Verou](https://increment.com/frontend/a-users-guide-to-css-variables/)\n- [::part on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)\n- [CSS Shadow Parts spec draft at W3C](https://drafts.csswg.org/css-shadow-parts-1/#part)\n\n## Anpassungsmöglichkeiten\n\n### Komponentenbezogene Variablen\n\nDu kannst die Variablen einer Komponente in deinem CSS überschreiben.\n\n```css\nscale-button {\n  --radius: 0;\n}\n```\n\nNeue Varianten lassen sich auch durch das Gruppieren von zu überschreibenden Werten, wie einer Klasse oder einem Attribut, erstellen.\n\n```html\n<style>\n  scale-button.squared {\n    --radius: 0;\n  }\n</style>\n\n<scale-button class="squared">Sign in</scale-button>\n```\n\nEin Attribut muss nicht in der jeweiligen Komponente vorhanden sein, um es als Selector zu benutzen. Es reicht, wenn es sich um einen gültigen CSS Selector handelt.\n\n```html\n<style>\n  scale-button[variant=\'squared\'] {\n    --radius: 0;\n  }\n</style>\n\n<scale-button variant="squared">Sign in</scale-button>\n```\n\nWenn du nur ein einzelnes Element einer Komponente anpassen möchtest, kannst du es einfach inline einbinden:\n\n```html\n<scale-button style="--radius: 0">Sign out</scale-button>\n```\n\n### Shadow Parts\n\nMit Shadow Parts ist es möglich, interne Elemente einer Komponente gezielt anzusteuern über [`::part` pseudo-element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).\n\n```css\nscale-button::part(base) {\n  border-radius: 0;\n}\n```\n\nDiese Herangehensweise lässt sich auch auf eigene Varianten anwenden.\n\n```css\nscale-button[variant=\'squared\']::part(base) {\n  border-radius: 0;\n  background: var(--telekom-color-additional-teal-600);\n}\n\nscale-button[variant=\'squared\']::part(base):hover {\n  background: var(--telekom-color-additional-teal-900);\n}\n```\n\nBeachte, dass der `::part` Selector auf ein Element beschränkt ist. Damit lässt sich weder auf nachfolgende oder verwandte Elemente zugreifen noch kann es verknüpft werden.\n\n### Theming\n\nDu kannst eine Reihe von Stilanpassungen im Bereich einer CSS-Klasse zusammenfassen. Als Ergebnis erhältst du ein Theme, das sich so einfach aktivieren lässt wie das Hinzufügen dieser Klasse zum Dokument.\n\nEin möglichst aussagekräftiges Beispiel sagt mehr als tausend Worte:\n\n```css\n<style>\n  .theme-example {\n    --telekom-color-primary-standard: limegreen;\n    --telekom-color-primary-hovered: seagreen;\n    --telekom-color-primary-pressed: green;\n  }\n\n  .theme-example scale-button,\n  .theme-example scale-tag,\n  .theme-example scale-card {\n    --radius: 2em;\n  }\n\n  .theme-example scale-button[variant="plain"]::part(base) {\n    background: transparent;\n    border: 2px solid currentColor;\n  }\n</style>\n\n<body class="theme-example">\n```\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Customization and Themes",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Theming_en:Theming_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Customization and Themes",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Theming_en:Theming_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Typography.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Typography_1_de="# Typografie\n\nDie Typografie hat großen Einfluss auf die Nutzbarkeit und Funktionalität unserer Interfaces. Sie ist ein wirksames Gestaltungselement, mit dem wir Nutzer\\*innen durch unsere Produkte und Services führen.\n\n## Allgemein\n\nNeben Farbe und Logo ist die Schrift TeleNeo ein zentrales Gestaltungselement für die Wiedererkennung unserer Marke. Verwende unsere Hausschrift in allen Produkten und Services, um das Nutzungserlebnis nachhaltig zu prägen.\n\nDas [Liquid Brand Design Konzept](https://www.brand-design.telekom.com/artikel/l/liquid-brand-design-konzept/) gibt uns die Freiheit und Flexibilität, die Schrift an Zielgruppe und Kontext anzupassen. Detaillierte Informationen zur Schrift TeleNeo inklusive aller Formate, sowie zu allgemeinen Nutzungsprinzipien, Zeichensatz und Funktionsumfang findest du im Artikel [Typografie](https://www.brand-design.telekom.com/artikel/t/typografie/).\n\n## Schriftschnitte der TeleNeo\n\nDie TeleNeo verfügt über fünf gleichmäßig im Schriftgewicht abgestufte Schriftschnitte. Gut aufeinander abgestimmt bewirken diese eine Betonung und Differenzierung der Inhaltshierarchie. Jeder Schriftschnitt ist auch in einer kursiven Version verfügbar. Verwende den kursiven Schnitt nur in Ausnahmefällen, bspw. für Quellenangaben bei Zitaten.\n\n![Image Name](assets/2_guidelines/3_typography/schriftschnitte.png)\n\n### Schriftschnitte und CSS Variablen\n\n| Schnitt   | Variable                                    | CSS Wert |\n| --------- | ------------------------------------------- | -------- |\n| extrabold | --telekom-typography-font-weight-extra-bold | 800      |\n| bold      | --telekom-typography-font-weight-bold       | 700      |\n| medium    | --telekom-typography-font-weight-medium     | 500      |\n| regular   | --telekom-typography-font-weight-regular    | 400      |\n| thin      | --telekom-typography-font-weight-thin       | 200      |\n\n## Schriftformate für User Interfaces\n\nScale verwendet eine ausgewählte Kombination von Schriftformaten, um klare und fokussierte Interfaces zu erzeugen. Für die Ausgestaltung deiner Inhalte eignet sich eine Auswahl der folgenden Schriftformate.\n\n![Image Name](assets/2_guidelines/3_typography/font-formats-DE.png)\n\n## Farben\n\nAchte bei der Auswahl von Textfarben auf die Lesbarkeit. Der Mindestkontrast bei kleinen Texten liegt bei 4,5 zu 1.\nScale enthält Standardfarben für Texte, Text-Links sowie Nutzerfeedback wie Fehler- und Erfolgsmeldungen.\n",Typography_2_de="## Sprache, Schreibweise und Tonalität\n\nHinweise zu Stil, Sprache und Tonalität der Telekom findest du im Artikel [Markentypisch schreiben](https://www.brand-design.telekom.com/artikel/markentypisch-schreiben/).\n",Typography_1_en="# Typography\n\nTypography has a huge influence on the usability and functionality of our interfaces. It helps us guide users through a product or service.\n\n## General\n\nIn addition to our color and logo, the TeleNeo font is a central design element for our brand recognition. To make a lasting impact on the customer experience, use our corporate font for the written word in all our products and services.\n\nThe [Liquid Design Brand Concept](https://www.brand-design.telekom.com/en/articles/l/liquid-brand-design-concept/) gives us the freedom and flexibility to adapt our font to the particular target group and context. You can find detailed information about TeleNeo, including formats, best practices, character sets, and range of functionality, in the article [Typography](https://www.brand-design.telekom.com/en/articles/t/typography/).\n\n## TeleNeo font styles\n\nTeleNeo has five font styles that are evenly graded in terms of weight. When used properly, they emphasize and clarify the content hierarchy. Each font style is also available as italics. Use the italic style only as an exception, e.g., for references in quotations or something similar.\n\n![Image Name](assets/2_guidelines/3_typography/schriftschnitte.png)\n\n### Font weights and CSS variables\n\n| weight    | variable name                               | CSS value |\n| --------- | ------------------------------------------- | --------- |\n| extrabold | --telekom-typography-font-weight-extra-bold | 800       |\n| bold      | --telekom-typography-font-weight-bold       | 700       |\n| medium    | --telekom-typography-font-weight-medium     | 500       |\n| regular   | --telekom-typography-font-weight-regular    | 400       |\n| thin      | --telekom-typography-font-weight-thin       | 200       |\n\n## Font formats for user interfaces\n\nScale uses a selected combination of font formats to create clear and focused interfaces. A selection from the following font formats is well suited for designing your content.\n\n![Image Name](assets/2_guidelines/3_typography/font-formats-EN.png)\n\n## Colors\n\nWhen choosing text colors, it’s most important to consider legibility. The minimum contrast for small texts is 4.5 to 1.\nScale contains standard colors for texts, text links, and user feedback like error and success messages.\n",Typography_2_en="## Language, style, and tone\n\nYou can find information on Telekom's style, language, and tone in the article [Brand-Specific Writing](https://www.brand-design.telekom.com/en/articles/brand-specific-writing/).\n",telekom_design_tokens_light=__webpack_require__("./node_modules/@telekom/design-tokens/dist/telekom/docs-json/telekom-design-tokens.light.json"),telekom_design_tokens_dark=__webpack_require__("./node_modules/@telekom/design-tokens/dist/telekom/docs-json/telekom-design-tokens.dark.json"),core_events_dist_esm=__webpack_require__("../../node_modules/@storybook/core-events/dist/esm/index.js"),addons_dist_esm=__webpack_require__("../../node_modules/@storybook/addons/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Typography",parameters:{docs:{container:function container(_ref2){var item,contrastSections,context=_ref2.context,locale=context&&context.globals&&context.globals.locale,colorMode=context&&context.globals&&context.globals.colorMode,allTokens="light"===colorMode?telekom_design_tokens_light:telekom_design_tokens_dark,darkMode="light"!==colorMode,pathStringItem=[],levelStringItem=[],cleared=!1,channel=addons_dist_esm.a.getChannel();function getItemPathByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].path[3]?allTokens.tokens[i].path[2]+" / "+allTokens.tokens[i].path[3]:allTokens.tokens[i].path[2]}function getItemColorByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].value}function getLevelByPath(path){for(var i=0;i<levelStringItem.length;i++){var splittedItem=levelStringItem[i].split("/");if(splittedItem[0]===path)return splittedItem[1]}}function generateTableColorRow(itemPathString,commentStringGerman,commentStringEnglish,additionalColor){return additionalColor?function setAdditionalColorSettings(){allTokens=telekom_design_tokens_light}():function resetAdditionalColorSettings(){allTokens="light"===colorMode?telekom_design_tokens_light:telekom_design_tokens_dark}(),(item=function getItemByPathString(pathString){for(var i=0;i<allTokens.tokens.length;i++){var currentItem=allTokens.tokens[i];if(currentItem.pathString===pathString)return currentItem}}(itemPathString))?Object(esm.b)("tr",{style:{backgroundColor:"var(--telekom-color-background-canvas)"}},Object(esm.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",padding:"4px 4px 4px 0"}},function clearContrastStates(){pathStringItem.length=0,levelStringItem.length=0,cleared=!0}(),cleared?function setContrastStates(){item.contrastChecks&&item.contrastChecks.map((function(contrastCkeckItem){pathStringItem.push(contrastCkeckItem.path),levelStringItem.push(contrastCkeckItem.path+"/"+contrastCkeckItem.level)}))}():null,item.contrastChecks?Object(esm.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",minWidth:"380px",minHeight:"120px"}},Object(esm.b)("div",{style:{color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingTop:"var(--telekom-spacing-unit-x1)",passingBottom:"var(--telekom-spacing-unit-x1)"}},"en"===locale?"Recommended colors for text & icons":"Empfohlene Farben für Text & Icons"),function hasContrastWithoutSlash(items){var itemPaths=[];items.map((function(item){itemPaths.push(getItemPathByPath(item))}));for(var i=0;i<itemPaths.length;i++)if(!itemPaths[i].includes("/"))return!0}(pathStringItem)?Object(esm.b)("td",{style:{paddingRight:"var(--telekom-spacing-unit-x4)",border:"none",width:"140px"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(esm.b)("a",{href:"#"+path},Object(esm.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,function getAllSections(items){var currentSection,itemPaths=[],sections=[];items.map((function(path){return itemPaths.push(getItemPathByPath(path))}));for(var i=0;i<itemPaths.length;i++)itemPaths[i].includes("/")&&(0==sections.length?(currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/")),sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/")))):currentSection!==itemPaths[i].substr(0,itemPaths[i].indexOf("/"))&&(sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/"))),currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/"))));contrastSections=sections}(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(esm.b)("td",{style:{border:"none",paddingRight:"var(--telekom-spacing-unit-x4)",width:"200px"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(esm.b)("a",{href:"#"+path},Object(esm.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))})))})):null):Object(esm.b)("div",{style:{backgroundColor:""+item.value,padding:"20px",marginTop:"4px",marginLeft:"8px",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",width:"380px",minHeight:"120px"}})),Object(esm.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(esm.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(esm.b)("div",null,Object(esm.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},item.name)),Object(esm.b)("div",null,Object(esm.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},"en"===locale?commentStringEnglish:commentStringGerman)))),Object(esm.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)"}},Object(esm.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)",width:"330px",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"css"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.cssVariableName),Object(esm.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(esm.b)("button",{id:""+item.cssVariableName,class:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(esm.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(esm.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.jsPathName),Object(esm.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(esm.b)("button",{id:""+item.jsPathName,class:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(esm.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(esm.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:500,fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.value)))):null}function generateTableHead(){return Object(esm.b)("thead",null,Object(esm.b)("tr",null,Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Example"),Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Description"),Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",width:"342px"}},"Token")))}function generateSectionTitle(sectionTitleGerman,sectionTitleEnglish){return Object(esm.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x12)",marginBottom:"var(--telekom-spacing-unit-x6)",fontWeight:800,fontSize:"32px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionTitleEnglish:sectionTitleGerman)}return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)("div",null,Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Typography_1_en:Typography_1_de,mdxType:"Description"}),Object(esm.b)("a",{role:"button",style:{cursor:"pointer"},onClick:function onClick(){!function changeModeLink(){var toggleMode=darkMode?"light":"dark";channel.emit(core_events_dist_esm.UPDATE_GLOBALS,{globals:{colorMode:toggleMode}})}()}},function generateColorModeLinkText(){return"en"===locale?"To the "+(darkMode?"light":"dark")+" mode color palette":"Zur Farbpalette des "+(darkMode?"Light":"Dark")+" Modes"}()),Object(esm.b)("div",null,Object(esm.b)("table",{style:{backgroundColor:darkMode?"#000":"#fff"}},Object(esm.b)("div",null,generateSectionTitle("Textfarben Standard","Textcolor Standard"),generateTableHead(),Object(esm.b)("tbody",null,generateTableColorRow("color.text-&-icon.standard","Für alle Standard Texte.","For all standard texts."),generateTableColorRow("color.text-&-icon.additional","Für Texte mit ergänzenden Informationen.","For texts with additional information."),generateTableColorRow("color.text-&-icon.disabled","Nur für Texte im disabled State.","Only for texts in disabled state.")),generateSectionTitle("Textfarbe Funktion","Textcolor Function"),generateTableHead(),Object(esm.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard","Für unterstützende Informationen sowie für Funktionen wie synchronisieren, sortieren und hinzufügen.","For supporting information as well as for functions like synchronize, sort and add."),generateTableColorRow("color.text-&-icon.functional.success","Bestätigt eine erfolgreich durchgeführte Aktion oder für Funktion wie senden, anrufen und aktivieren.",""),generateTableColorRow("color.text-&-icon.functional.danger","Für Fehlermeldungen oder Funktionen wie beenden und löschen.","Confirms a successfully performed action or for function like send, call and activate."),generateTableColorRow("color.text-&-icon.functional.warning","Für Warnungen vor möglicherweise unerwünschten Ergebnissen.","For warnings of potentially undesirable results."),generateTableColorRow("color.text-&-icon.functional.informational","Für unterstützende Informationen.","For supporting information."))))),Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Typography_2_en:Typography_2_de,mdxType:"Description"})))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Typography",parameters:{docs:{container:function container(_ref3){var item,contrastSections,context=_ref3.context,locale=context&&context.globals&&context.globals.locale,colorMode=context&&context.globals&&context.globals.colorMode,allTokens="light"===colorMode?telekom_design_tokens_light:telekom_design_tokens_dark,darkMode="light"!==colorMode,pathStringItem=[],levelStringItem=[],cleared=!1,channel=addons_dist_esm.a.getChannel();function getItemPathByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].path[3]?allTokens.tokens[i].path[2]+" / "+allTokens.tokens[i].path[3]:allTokens.tokens[i].path[2]}function getItemColorByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].value}function getLevelByPath(path){for(var i=0;i<levelStringItem.length;i++){var splittedItem=levelStringItem[i].split("/");if(splittedItem[0]===path)return splittedItem[1]}}function generateTableColorRow(itemPathString,commentStringGerman,commentStringEnglish,additionalColor){return additionalColor?function setAdditionalColorSettings(){allTokens=telekom_design_tokens_light}():function resetAdditionalColorSettings(){allTokens="light"===colorMode?telekom_design_tokens_light:telekom_design_tokens_dark}(),(item=function getItemByPathString(pathString){for(var i=0;i<allTokens.tokens.length;i++){var currentItem=allTokens.tokens[i];if(currentItem.pathString===pathString)return currentItem}}(itemPathString))?Object(esm.b)("tr",{style:{backgroundColor:"var(--telekom-color-background-canvas)"}},Object(esm.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",padding:"4px 4px 4px 0"}},function clearContrastStates(){pathStringItem.length=0,levelStringItem.length=0,cleared=!0}(),cleared?function setContrastStates(){item.contrastChecks&&item.contrastChecks.map((function(contrastCkeckItem){pathStringItem.push(contrastCkeckItem.path),levelStringItem.push(contrastCkeckItem.path+"/"+contrastCkeckItem.level)}))}():null,item.contrastChecks?Object(esm.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",minWidth:"380px",minHeight:"120px"}},Object(esm.b)("div",{style:{color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingTop:"var(--telekom-spacing-unit-x1)",passingBottom:"var(--telekom-spacing-unit-x1)"}},"en"===locale?"Recommended colors for text & icons":"Empfohlene Farben für Text & Icons"),function hasContrastWithoutSlash(items){var itemPaths=[];items.map((function(item){itemPaths.push(getItemPathByPath(item))}));for(var i=0;i<itemPaths.length;i++)if(!itemPaths[i].includes("/"))return!0}(pathStringItem)?Object(esm.b)("td",{style:{paddingRight:"var(--telekom-spacing-unit-x4)",border:"none",width:"140px"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(esm.b)("a",{href:"#"+path},Object(esm.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,function getAllSections(items){var currentSection,itemPaths=[],sections=[];items.map((function(path){return itemPaths.push(getItemPathByPath(path))}));for(var i=0;i<itemPaths.length;i++)itemPaths[i].includes("/")&&(0==sections.length?(currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/")),sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/")))):currentSection!==itemPaths[i].substr(0,itemPaths[i].indexOf("/"))&&(sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/"))),currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/"))));contrastSections=sections}(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(esm.b)("td",{style:{border:"none",paddingRight:"var(--telekom-spacing-unit-x4)",width:"200px"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(esm.b)("a",{href:"#"+path},Object(esm.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))})))})):null):Object(esm.b)("div",{style:{backgroundColor:""+item.value,padding:"20px",marginTop:"4px",marginLeft:"8px",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",width:"380px",minHeight:"120px"}})),Object(esm.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(esm.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(esm.b)("div",null,Object(esm.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},item.name)),Object(esm.b)("div",null,Object(esm.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},"en"===locale?commentStringEnglish:commentStringGerman)))),Object(esm.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)"}},Object(esm.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)",width:"330px",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"css"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.cssVariableName),Object(esm.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(esm.b)("button",{id:""+item.cssVariableName,class:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(esm.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(esm.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.jsPathName),Object(esm.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(esm.b)("button",{id:""+item.jsPathName,class:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(esm.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(esm.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:500,fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.value)))):null}function generateTableHead(){return Object(esm.b)("thead",null,Object(esm.b)("tr",null,Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Example"),Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Description"),Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",width:"342px"}},"Token")))}function generateSectionTitle(sectionTitleGerman,sectionTitleEnglish){return Object(esm.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x12)",marginBottom:"var(--telekom-spacing-unit-x6)",fontWeight:800,fontSize:"32px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionTitleEnglish:sectionTitleGerman)}return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)("div",null,Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Typography_1_en:Typography_1_de}),Object(esm.b)("a",{role:"button",style:{cursor:"pointer"},onClick:function onClick(){!function changeModeLink(){var toggleMode=darkMode?"light":"dark";channel.emit(core_events_dist_esm.UPDATE_GLOBALS,{globals:{colorMode:toggleMode}})}()}},function generateColorModeLinkText(){return"en"===locale?"To the "+(darkMode?"light":"dark")+" mode color palette":"Zur Farbpalette des "+(darkMode?"Light":"Dark")+" Modes"}()),Object(esm.b)("div",null,Object(esm.b)("table",{style:{backgroundColor:darkMode?"#000":"#fff"}},Object(esm.b)("div",null,generateSectionTitle("Textfarben Standard","Textcolor Standard"),generateTableHead(),Object(esm.b)("tbody",null,generateTableColorRow("color.text-&-icon.standard","Für alle Standard Texte.","For all standard texts."),generateTableColorRow("color.text-&-icon.additional","Für Texte mit ergänzenden Informationen.","For texts with additional information."),generateTableColorRow("color.text-&-icon.disabled","Nur für Texte im disabled State.","Only for texts in disabled state.")),generateSectionTitle("Textfarbe Funktion","Textcolor Function"),generateTableHead(),Object(esm.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard","Für unterstützende Informationen sowie für Funktionen wie synchronisieren, sortieren und hinzufügen.","For supporting information as well as for functions like synchronize, sort and add."),generateTableColorRow("color.text-&-icon.functional.success","Bestätigt eine erfolgreich durchgeführte Aktion oder für Funktion wie senden, anrufen und aktivieren.",""),generateTableColorRow("color.text-&-icon.functional.danger","Für Fehlermeldungen oder Funktionen wie beenden und löschen.","Confirms a successfully performed action or for function like send, call and activate."),generateTableColorRow("color.text-&-icon.functional.warning","Für Warnungen vor möglicherweise unerwünschten Ergebnissen.","For warnings of potentially undesirable results."),generateTableColorRow("color.text-&-icon.functional.informational","Für unterstützende Informationen.","For supporting information."))))),Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Typography_2_en:Typography_2_de})))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/new_release/SketchLibrary.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),SketchLibrary_en='# New: Scale Figma Libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Figma.png" alt={alt} style={{ width: \'100%\' }} />\n\nWe now also provide Figma libraries for all designers who already work with Figma.\n\n<p><a href="https://www.figma.com/file/3xCcfn6sawB7EcfUjpr7OE/%E2%98%80%EF%B8%8F-Telekom-Scale-Beta-Light-1.0.0?type=design&node-id=11505%3A145418&mode=design&t=nAdhrYOpRNgurAwy-1" rel="nofollow" class="matomo_download">Telekom Scale Components Light </a></p>\n\n<p><a href="https://www.figma.com/file/tdmMhhu1FbA0GTapn3cGb1/%F0%9F%8C%92Telekom-Scale-Beta-Dark-1.0.0?type=design&node-id=13102%3A157996&mode=design&t=ne7mjHvtsCeTlqjL-1" rel="nofollow" class="matomo_download">Telekom Scale Components Dark </a></p>\n\n## Light and dark mode\n\nScale contains its own library for light and dark mode. This way, you can design your interface in either light or dark mode. It’s possible to change this anytime at the push of a button, so you can assess a given effect in the other mode. But even without additional designs, the development team can activate the other mode.\n\n## Prototype\n\nEach interactive component is already built with prototype functionality. This helps test prototypes and your product even faster.\n\n## Documentation\n\nEach component includes a short description and a link to the detailed documentation on the respective usage page of the Scale website.\n\n## Updates\n\nWith a Pro license from Figma, you will automatically receive future updates. To get this, go to “Getting started” in the library and leave your email address in the space provided. We will then invite you to the library.\n',SketchLibrary_de='# New: Scale Figma Libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Figma.png" alt={alt} style={{ width: \'100%\' }} />\n\nFür alle Designer\\*innen, die bereits mit Figma arbeiten, stellen wir nun auch Figma Libraries zur Verfügung.\n\n<p><a href="https://www.figma.com/file/3xCcfn6sawB7EcfUjpr7OE/%E2%98%80%EF%B8%8F-Telekom-Scale-Beta-Light-1.0.0?type=design&node-id=11505%3A145418&mode=design&t=nAdhrYOpRNgurAwy-1" rel="nofollow" class="matomo_download">Telekom Scale Components Light </a></p>\n\n<p><a href="https://www.figma.com/file/tdmMhhu1FbA0GTapn3cGb1/%F0%9F%8C%92Telekom-Scale-Beta-Dark-1.0.0?type=design&node-id=13102%3A157996&mode=design&t=ne7mjHvtsCeTlqjL-1" rel="nofollow" class="matomo_download">Telekom Scale Components Dark </a></p>\n\n## Light und Dark Mode\n\nScale beinhaltet für Light und Dark Mode jeweils eine eigene Library. So kannst du dein Interface entweder im hellen oder dunklen Modus gestalten. Ein Wechsel ist jederzeit per Knopfdruck möglich, sodass du die Wirkung im jeweils anderen Modus beurteilen kannst. Aber auch ohne zusätzliche Designs kann das Entwicklungsteam den anderen Modus aktivieren.\n\n## Prototype\n\nJede interaktive Komponente ist bereits mit Prototyp-Funktion gebaut. So kannst du noch schneller Prototypen erstellen und dein Produkt testen.\n\n## Dokumentation\n\nJede Komponente beinhaltet eine Kurzbeschreibung und einen Link zur ausführlicheren Dokumentation auf der jeweiligen Usage Page der Scale Website.\n\n## Updates\n\nMit einer Pro Lizenz von Figma erhältst du sogar ganz automatisch künftige Updates. Gehe dafür in die Library zur Seite “Getting started” und hinterlasse deine E-Mail Adresse in dem dafür vorgesehenen Bereich. Wir laden dich dann zur Library ein.\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"New Release/Sketch Library Update",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?SketchLibrary_en:SketchLibrary_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"New Release/Sketch Library Update",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?SketchLibrary_en:SketchLibrary_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/Accessibility.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Accessibility_en="# Accessibility\n\n## Serving everyone\n\nWe aim at making inclusive products and experiences that serve everyone.\nTherefore, Scale components meet the Telekom accessibility requirements as well as the [Web Content Accessibility Guidelines (WCAG) version 2.1](https://www.w3.org/TR/WCAG21/), level AA criteria.\n\n## Crucial testing\n\n![AA Tag](assets/1_setup/3_scale-for-developers/aa_tag.png)\n\nComponents marked with the green label Accessible AA (pictured above) fulfill AA Accessibility requirements for the following setup:\n\n**Operating system:** Microsoft Windows 10\n\n**Browser:** Google Chrome version 85.0.4183.121 (official build) (64 bit)\n\n**Screenreader:** JAWS2019\n\n**High-contrast mode is tested on:**\n\n**Browser:** Mozilla Firefox ESR52.9.0 (64 bit)\n\n## How to achieve full compliance\n\nWhile Scale components and the standard theme support accessible experiences, many other factors determine full compliance with all mandatory accessibility requirements of your product as a whole.\nTherefore, please have your particular product reviewed by an accessibility consultant to find out how to use the Scale components in the best possible way.\n\n## Suggestions are always welcome\n\nOur goal is to make Scale as accessible as possible. If you have any comments or suggestions on how we can make it better for users with disabilities, please reach out on our Git Repo or contact support.\n",Accessibility_de="# Barrierefreiheit\n\n## Produkte und Services für alle\n\nUnser Ziel ist es, inklusive Produkte und Erlebnisse zu schaffen, die allen Menschen zugänglich sind.\nDaher erfüllen die Scale Komponenten die Anforderungen der Telekom für Barrierefreiheit sowie die Kriterien der [Web Content Accessibility Guidelines (WCAG) Version 2.1](https://www.w3.org/TR/WCAG21/), Stufe AA.\n\n## Technische Kriterien\n\n![AA Tag](assets/1_setup/3_scale-for-developers/aa_tag.png)\n\nKomponenten, die mit dem grünen Label Accessible AA (siehe Abbildung) gekennzeichnet sind, erfüllen die Anforderungen an die Barrierefreiheit AA bei den folgenden Anwendungen:\n\n**Betriebssystem:** Microsoft Windows 10\n\n**Browser:** Google Chrome Version 85.0.4183.121 (64 bit)\n\n**Screen Reader:** JAWS2019\n\n**Modus für hohen Kontrast aktiviert bei:**\n\n**Browser:** Mozilla Firefox ESR52.9.0 (64 bit)\n\n## Alle Anforderungen kennen\n\nDie Scale Komponenten und das Standard Theme erfüllen bereits die Basis der Anforderungen für ein barrierefreies Nutzungserlebnis. Es gibt aber noch eine Reihe anderer wichtiger Faktoren, um die vollständige Barrierefreiheit deines Produkts oder Services zu gewährleisten.\nWende dich dafür an die Berater\\*innen für Barrierefreiheit, um zu erfahren, wie du die Scale Komponenten bestmöglich einsetzt.\n\n## Deine Ideen\n\nDu hast Feedback oder Vorschläge, wie wir die Plattform für Menschen mit Einschränkungen noch zugänglicher machen können? Erstelle bitte ein Ticket im Git Repo oder kontaktiere unseren Support.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Accessibility",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Accessibility_en:Accessibility_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Accessibility",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Accessibility_en:Accessibility_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/Browser_Support.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Browser_Support_en="# Browser Support\n\n## We focus on the evergreens.\n\n![Browser Support](assets/1_setup/3_scale-for-developers/Browser-support-scale.png)\n\nAll of our components are tested to support the most important (evergreen) browsers. Currently, that's a total of 11 browsers.\nPlease refer to the table above for more information on the exact browser types and versions, as well as the details regarding future or other forms of support.\n",Browser_Support_de="# Unterstützte Internet-Browser\n\n## Wir setzen auf Evergreens.\n\n![Browser Support](assets/1_setup/3_scale-for-developers/Browser-support-scale.png)\n\nAlle unsere Komponenten funktionieren mit den gängigsten Internet-Browsern – derzeit sind es insgesamt 11.\nWeitere Details zu den jeweiligen Typen und Versionen der Browser sowie Informationen zu zukünftigen oder anderen unterstützten Formaten findest du in der oben abgebildeten Tabelle.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Browser Support",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Browser_Support_en:Browser_Support_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Browser Support",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Browser_Support_en:Browser_Support_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/GettingStartedForDesigners.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),GettingStartedForDesigners_en='# Getting started for designers\n\nWith Scale, you can develop brand-compliant, intuitive, and accessible products and services – in a simple and efficient way. The component library contains everything you need to do this.\n\n## 1. Install TeleNeo\n\nThe following font is part of the Telekom brand and design assets. It is not open source and may not be used freely. The express consent of Deutsche Telekom is required for commercial use.\n\n[Download TeleNeo](https://www.brand-design.telekom.com/asset/font-0-teleneo/)\n\n## 2. Activate the component libraries in your design tool\n\n<br/>\n\n### Light and dark mode\n\nr\nScale contains its own library for light and dark mode. This way, you can design your interface in either light or dark mode. It’s possible to change this anytime at the push of a button, so you can assess a given effect in the other mode. But even without additional designs, the development team can activate the other mode.\n\n### Figma libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Figma.png" alt={alt} style={{ width: \'100%\' }} />\n\n<p><a href="https://www.figma.com/file/3xCcfn6sawB7EcfUjpr7OE/%E2%98%80%EF%B8%8F-Telekom-Scale-Beta-Light-1.0.0?type=design&node-id=11505%3A145418&mode=design&t=nAdhrYOpRNgurAwy-1" rel="nofollow" class="matomo_download">Telekom Scale Components Light </a></p>\n\n<p><a href="https://www.figma.com/file/tdmMhhu1FbA0GTapn3cGb1/%F0%9F%8C%92Telekom-Scale-Beta-Dark-1.0.0?type=design&node-id=13102%3A157996&mode=design&t=ne7mjHvtsCeTlqjL-1" rel="nofollow" class="matomo_download">Telekom Scale Components Dark </a></p>\n\nBy the way, with a Pro license from Figma, you will automatically receive future updates. To get this, go to “Getting started” in the library and leave your email address in the space provided. We will then invite you to the library.\n\n<br/>\n\n### Sketch libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Sketch.png" alt={alt} style={{ width: \'100%\' }} />\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-light.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Light)</a></p>\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-dark.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Dark)</a></p>\n\nImportant note: the latest release doesn’t include an update of the Sketch library.\n\n<br/>\n\n### Legal notes\n\nDeutsche Telekom reserves all rights to the Telekom brand. The Telekom theme must be completely replaced for any usage that is not explicitly intended for the Telekom.\n\n## Design documentation\n\nFor each component, there is detailed information on its usage as well as on the different variants. To access this, simply go to the desired component in the left sidebar and select the Usage tab (1).\n\n![Scale for Designers](assets/1_setup/2_scale-for-designers/storybook-Usage-tab.png)\n\n<br/>\n\n# Your feedback is welcome!\n\nWith your feedback, we can make Scale even better. You can also share your designs with us so everyone can benefit from them.\nFeel free to reach out to the Scale team at [contact@brand-design.telekom.com](mailto:contact@brand-design.telekom.com).\n',GettingStartedForDesigners_de='# Erste Schritte für Designer\\*innen\n\nMit Scale entwickelst du markenkonforme, intuitive und barrierefreie Produkte und Services – einfach und effizient. Die Komponenten-Library enthält alles, was du dafür benötigst.\n\n## 1. Installiere TeleNeo\n\nDie folgende Schrift gehört zu den Marken- und Design-Assets der Telekom. Sie ist nicht Open Source und darf nicht frei verwendet werden. Für eine kommerzielle Nutzung ist die ausdrückliche Zustimmung der Deutschen Telekom erforderlich.\n\n[Download TeleNeo](https://www.brand-design.telekom.com/asset/font-0-teleneo/)\n\n## 2. Aktiviere die Komponenten-Libraries in deinem Design Tool\n\n<br/>\n\n### Light und Dark Mode\n\nScale beinhaltet für Light und Dark Mode jeweils eine eigene Library. So kannst du dein Interface entweder im hellen oder dunklen Modus gestalten. Ein Wechsel ist jederzeit per Knopfdruck möglich, sodass du die Wirkung im jeweils anderen Modus beurteilen kannst. Aber auch ohne zusätzliche Designs kann das Entwicklungsteam den anderen Modus aktivieren.\n\n### Figma Libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Figma.png" alt={alt} style={{ width: \'100%\' }} />\n\n<p><a href="https://www.figma.com/file/3xCcfn6sawB7EcfUjpr7OE/%E2%98%80%EF%B8%8F-Telekom-Scale-Beta-Light-1.0.0?type=design&node-id=11505%3A145418&mode=design&t=nAdhrYOpRNgurAwy-1" rel="nofollow" class="matomo_download">Telekom Scale Components Light </a></p>\n<p><a href="https://www.figma.com/file/tdmMhhu1FbA0GTapn3cGb1/%F0%9F%8C%92Telekom-Scale-Beta-Dark-1.0.0?type=design&node-id=13102%3A157996&mode=design&t=ne7mjHvtsCeTlqjL-1" rel="nofollow" class="matomo_download">Telekom Scale Components Dark </a></p>\n\nÜbrigens: Mit einer Pro Lizenz von Figma erhältst du sogar ganz automatisch künftige Updates. Gehe dafür in die Library zur Seite “Getting started” und hinterlasse deine E-Mail Adresse in dem dafür vorgesehenen Bereich. Wir laden dich dann zur Library ein.\n\n<br/>\n\n### Sketch Libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Sketch.png" alt={alt} style={{ width: \'100%\' }} />\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-light.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Light)</a></p>\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-dark.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Dark)</a></p>\n\nWichtiger Hinweis: das aktuellste Release beinhaltet kein Update der Sketch Library.\n\n<br/>\n\n### Rechtliche Hinweise\n\nDie Deutsche Telekom behält sich alle Rechte an der Marke Telekom vor. Für jede Nutzung, die nicht explizit für die Telekom bestimmt ist, muss das Telekom Theme komplett ersetzt werden.\n\n## Designdokumentationen\n\nZu jeder Komponente gibt es ausführliche Informationen zur Verwendung sowie zu den unterschiedlichen Varianten. Gehe dazu einfach in der linken Seitenleiste zur gewünschten Komponente und wähle dort die Registerkarte „Usage“ (1) aus.\n\n![Scale for Designers](assets/1_setup/2_scale-for-designers/storybook-Usage-tab.png)\n\n<br/>\n\n# Dein Feedback ist willkommen!\n\nMit deinem Feedback können wir Scale noch besser machen. Du kannst auch deine Designs mit uns teilen, damit alle davon profitieren können.\u2028Du erreichst das Scale Team unter [contact@brand-design.telekom.com](mailto:contact@brand-design.telekom.com).\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Getting Started For Designers",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?GettingStartedForDesigners_en:GettingStartedForDesigners_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Getting Started For Designers",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?GettingStartedForDesigners_en:GettingStartedForDesigners_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/GettingStartedForDevelopers.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),GettingStartedForDevelopers_en='# Setup for Developers\n\nScale provides frontend developers and engineers with a collection of reusable web components to build websites and user interfaces in major frontend frameworks like Vue, React, Angular, and HTML.\n\nAdopting the Scale design system enables developers to use consistent markup, styles, and behavior in prototype and production work.\n\n## Setting things up\n\nInstall the component library in your project with `npm` or `yarn`:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\n> To install the <a href="https://github.com/telekom/scale/releases/tag/v3.0.0-beta.53" target="_blank" rel="noopener noreferrer">version prior to dark mode</a>, do `npm install @telekom/scale-components` (without `@next`)\n\nTo use the components, you need to load a CSS file and some JavaScript. The CSS file includes the fonts and the design tokens.\n\n### Plain HTML\n\n```html\n<link\n  rel="stylesheet"\n  href="node_modules/@telekom/scale-components/dist/scale-components/scale-components.css"\n/>\n<script\n  type="module"\n  src="node_modules/@telekom/scale-components/dist/scale-components/scale-components.esm.js"\n><\/script>\n```\n\n### With a bundler or ES modules\n\n```js\nimport \'@telekom/scale-components/dist/scale-components/scale-components.css\';\nimport {\n  applyPolyfills,\n  defineCustomElements,\n} from \'@telekom/scale-components/loader\';\n\napplyPolyfills().then(() => {\n  defineCustomElements(window);\n});\n```\n\nAlternatively, if you wish to only load the component you need, for example, the button component, you can load the component in the following way:\n\n```js\nimport \'@telekom/scale-components/dist/scale-components/scale-components.css\';\nimport { defineCustomElementScaleButton } from \'@telekom/scale-components\';\n\ndefineCustomElementScaleButton();\n```\n\n### NPM Packages\n\n| Package Name                        | Description                                 |\n| ----------------------------------- | ------------------------------------------- |\n| @telekom/scale-components           | Web components                              |\n| @telekom/scale-components-react     | Wrapper package for React (autogenerated)   |\n| @telekom/scale-components-vue\\*     | Wrapper package for Vue (autogenerated)     |\n| @telekom/scale-components-angular\\* | Wrapper package for Angular (autogenerated) |\n| @telekom/scale-design-tokens\\*\\*    | Scale Design Tokens                         |\n| @telekom/design-tokens              | Telekom Design Tokens                       |\n\n> \\*deprecated since `v3.0.0-beta.X`  \n> \\*\\*deprecated since `v3.0.0-beta.100`\n\n## Frameworks\n\n[Scale and Vue](./?path=/docs/setup-info-scale-and-vue--page)<br/>\n[Scale and Angular](./?path=/docs/setup-info-scale-and-angular--page)<br/>\n[Scale and React](./?path=/docs/setup-info-scale-and-react--page)\n\n## Source Code on GitHub\n\nHere you find <a href="https://github.com/telekom/scale" target="_blank">Telekom Scale on GitHub</a>\n',GettingStartedForDevelopers_de='# Setup für Entwickler\\*innen\n\nMit Scale erhältst du wiederverwendbare Web-Komponenten zur Produktion von Webseiten und anderen digitalen User Interfaces. Du kannst sie problemlos in den wichtigsten Frameworks einsetzen, wie Vue, React und Angular – oder einfach in HTML. Durch Scale schaffst du Konsistenz bei Markups, Styles und beim Verhalten deiner Anwendungen.\n\n## Einrichtung\n\nInstalliere die Komponenten-Library mit `npm` oder `yarn` in dein Projekt:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\n> To install the <a href="https://github.com/telekom/scale/releases/tag/v3.0.0-beta.53" target="_blank" rel="noopener noreferrer">version prior to dark mode</a>, do `npm install @telekom/scale-components` (without `@next`)\n\nUm die Komponenten zu verwenden, lade die CSS-Datei sowie JavaScript. Die CSS-Datei enthält die Schriftarten und die Design-Tokens.\n\n### Plain HTML\n\n```html\n<link\n  rel="stylesheet"\n  href="node_modules/@telekom/scale-components/dist/scale-components/scale-components.css"\n/>\n<script\n  type="module"\n  src="node_modules/@telekom/scale-components/dist/scale-components/scale-components.esm.js"\n><\/script>\n```\n\n### Mit Bundler oder ES-Modulen\n\n```js\nimport \'@telekom/scale-components/dist/scale-components/scale-components.css\';\nimport {\n  applyPolyfills,\n  defineCustomElements,\n} from \'@telekom/scale-components/loader\';\n\napplyPolyfills().then(() => {\n  defineCustomElements(window);\n});\n```\n\nFalls Sie nur eine spezifische Komponente laden möchten, z.B. die Komponente Button, können Sie diese Komponente auch auf folgende Art laden:\n\n```js\nimport \'@telekom/scale-components/dist/scale-components/scale-components.css\';\nimport { defineCustomElementScaleButton } from \'@telekom/scale-components\';\n\ndefineCustomElementScaleButton();\n```\n\n### NPM Packages\n\n| Package Name                        | Description                                 |\n| ----------------------------------- | ------------------------------------------- |\n| @telekom/scale-components           | Web components                              |\n| @telekom/scale-components-react     | Wrapper package for React (autogenerated)   |\n| @telekom/scale-components-vue\\*     | Wrapper package for Vue (autogenerated)     |\n| @telekom/scale-components-angular\\* | Wrapper package for Angular (autogenerated) |\n| @telekom/scale-design-tokens\\*\\*    | Scale Design Tokens                         |\n| @telekom/design-tokens              | Telekom Design Tokens                       |\n\n> \\*deprecated since `v3.0.0-beta.X`  \n> \\*\\*deprecated since `v3.0.0-beta.100`\n\n## Frameworks\n\n[Scale und Vue](./?path=/docs/setup-info-scale-and-vue--page)<br/>\n[Scale und Angular](./?path=/docs/setup-info-scale-and-angular--page)<br/>\n[Scale und React](./?path=/docs/setup-info-scale-and-react--page)\n\n## Quellcode auf GitHub\n\nHier findest du <a href="https://github.com/telekom/scale" target="_blank">Telekom Scale auf GitHub</a>\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Getting Started For Developers",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?GettingStartedForDevelopers_en:GettingStartedForDevelopers_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Getting Started For Developers",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?GettingStartedForDevelopers_en:GettingStartedForDevelopers_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/ScaleAndAngular.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),ScaleAndAngular_en="# Scale and Angular\n\nAngular fully supports web components.\n\nYou can find an example boilerplate app in the \"examples\" folder in the [GitHub repo](https://github.com/telekom/scale/tree/main/examples/angular-boilerplate).\n\n## Setup\n\nFirst, install the package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nThen load the component library in `main.ts`:\n\n```ts\n// src/main.ts\nimport { defineCustomElements } from '@telekom/scale-components/loader';\n\n// ...\n\ndefineCustomElements();\n```\n\nAfter that, load the CSS in the `angular.json` config file:\n\n```json\n// angular.json\n{\n  \"build\": {\n    \"styles\": [\n      \"node_modules/@telekom/scale-components/dist/scale-components/scale-components.css\"\n    ]\n  }\n}\n```\n\nIn order for Angular to handle non-Angular element names, include the [`CUSTOM_ELEMENTS_SCHEMA`](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA) in `src/app/app.module.ts`:\n\n```ts\n// src/app/app.module.ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n  // ...\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppModule {}\n```\n\nIf you use routing, also include it in `src/app/app-routing.module.ts`:\n\n```ts\n// src/app/app-routing.module.ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n  // ..\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppRoutingModule {}\n```\n\nYou should now be able to use Scale components in your templates:\n\n```html\n<div>\n  <scale-button>Click!</scale-button>\n</div>\n```\n\n## Events in Angular\n\nIn order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation on these custom events on the respective component pages in the \"docs\" section.\n\nYou can bind to `scale`-prefixed events with the regular Angular syntax:\n\n```html\n<scale-slider (scaleInput)=\"setValue($event)\"></scale-slider>\n```\n\n## Reactive Forms\n\nIf you're working with Reactive Forms, you will notice that the form controls in Scale —text field, checkbox, etc.— do not work out of the box. Only native form control elements like `input` and `textarea` do.\n\nWriting custom Control Value Accessors can be hard, so we provide a series of working examples to get you started.\n\nTo try it out, please manually add the directives found in the [example project](https://github.com/telekom/scale/tree/main/examples/angular-reactive-forms/src/directives) to your project and load it in `app.module.ts`:\n\n```ts\n// src/app/app.module.ts\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { TextValueAccessorDirective } from 'src/directives/text-value-accessor';\nimport { CheckedValueAccessorDirective } from 'src/directives/checked-value-accessor';\nimport { NumberValueAccessorDirective } from 'src/directives/number-value-accessor';\n\n@NgModule({\n  declarations: [\n    // ...\n    TextValueAccessorDirective,\n    CheckedValueAccessorDirective,\n    NumberValueAccessorDirective,\n  ],\n  imports: [\n    // don't forget to import the `ReactiveFormsModule`\n    ReactiveFormsModule,\n  ],\n})\nexport class AppModule {}\n```\n\n## Proxy Package\n\nThe automatically generated proxy packages will be removed in v4:\n\n- `@telekom/scale-components-angular`\n- `@telekom/scale-components-angular-neutral`\n\nPlease use `@telekom/scale-components` directly, support for custom elements is already great.\n",ScaleAndAngular_de="# Scale und Angular\n\nAngular unterstützt problemlos Web Components.\n\nEin Beispiel für eine Boilerplate-App findest du im [GitHub Repository](https://github.com/telekom/scale/tree/main/examples/angular-boilerplate).\n\n## Setup\n\nInstalliere zuerst das Package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nLade danach die Komponenten-Bibliothek in `main.ts`:\n\n```ts\n// src/main.ts\nimport { defineCustomElements } from '@telekom/scale-components/loader';\n\n// ...\n\ndefineCustomElements();\n```\n\nLade anschließend das CSS in die Konfigurationsdatei `angular.json`:\n\n```json\n// angular.json\n{\n  \"build\": {\n    \"styles\": [\n      \"node_modules/@telekom/scale-components/dist/scale-components/scale-components.css\"\n    ]\n  }\n}\n```\n\nUm Angular den Umgang mit Non-Angular-Elementnamen zu ermöglichen, füge das `CUSTOM_ELEMENTS_SCHEMA` in `src/app/app.module.ts` ein:\n\n```ts\n// src/app/app.module.ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n  // ...\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppModule {}\n```\n\nWenn du Routing verwendest, füge es auch in `src/app/app-routing.module.ts` ein:\n\n```ts\n// src/app/app-routing.module.ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n  // ..\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppRoutingModule {}\n```\n\nNun solltest du in der Lage sein, Scale-Komponenten in deinen Templates zu verwenden:\n\n```html\n<div>\n  <scale-button>Click!</scale-button>\n</div>\n```\n\n## Events in Angular\n\nUm Konflikte mit Standard-Events zu vermeiden und für beste Kompatibilität mit anderen Libraries und Frameworks, sind die Custom Events, die von einigen Scale-Komponenten ausgegeben werden, mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z. B. scaleChange). Die Dokumentation zu Custom Events findest du auf den jeweiligen Komponentenseiten im Abschnitt \"docs\".\n\nAn Events mit dem Prefix `scale` kannst du reguläre Angular-Syntax anbinden:\n\n```html\n<scale-slider (scaleInput)=\"setValue($event)\"></scale-slider>\n```\n\n## Reactive Forms\n\nWenn du mit Reactive Forms arbeitest, wirst du feststellen, dass die Formularelemente in Scale —Textfield, Checkbox, etc.— nicht direkt funktionieren. Nur native Formularsteuerelemente wie `input` und `textarea` funktionieren.\n\nDas Schreiben von benutzerdefinierten Control Value Accessors kann Schwierigkeiten mit sich bringen. Um den Einstieg zu erleichtern, stellen wir daher eine Reihe von Arbeitsbeispielen zur Verfügung.\n\nUm es auszuprobieren, füge bitte die Directives aus [dem Beispielprojekt](https://github.com/telekom/scale/tree/main/examples/angular-reactive-forms/src/directives) manuell in dein Projekt ein und lade sie in `app.module.ts`:\n\n```ts\n// src/app/app.module.ts\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { TextValueAccessorDirective } from 'src/directives/text-value-accessor';\nimport { CheckedValueAccessorDirective } from 'src/directives/checked-value-accessor';\nimport { NumberValueAccessorDirective } from 'src/directives/number-value-accessor';\n\n@NgModule({\n  declarations: [\n    // ...\n    TextValueAccessorDirective,\n    CheckedValueAccessorDirective,\n    NumberValueAccessorDirective,\n  ],\n  imports: [\n    // don't forget to import the `ReactiveFormsModule`\n    ReactiveFormsModule,\n  ],\n})\nexport class AppModule {}\n```\n\n## Proxy Package\n\nDie automatisch generierten Proxy Packages werden in v4 entfernt:\n\n- `@telekom/scale-components-angular`\n- `@telekom/scale-components-angular-neutral`\n\nBitte nutze `@telekom/scale-components` direkt. Custom Elements werden bereits super unterstützt.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Scale and Angular",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndAngular_en:ScaleAndAngular_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Scale and Angular",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndAngular_en:ScaleAndAngular_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/ScaleAndReact.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),ScaleAndReact_en="# Scale and React\n\nReact supports web components, but there are a couple of limitations to be aware of, listed below. Fortunately, it's possible to work around them.\n\nYou can find an example boilerplate app in the \"examples\" folder in the [GitHub repo](https://github.com/telekom/scale/tree/main/examples).\n\n## Setup\n\nFirst, install the package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nThen load the component library and the CSS in `index.js`:\n\n```js\nimport { defineCustomElements } from '@telekom/scale-components/loader';\nimport '@telekom/scale-components/dist/scale-components/scale-components.css';\n\n// ...\n\ndefineCustomElements();\n```\n\nYou should now be able to use Scale components without having to import them:\n\n```jsx\nimport React from 'react';\n\nconst App = () => (\n  <div>\n    <scale-button>Click</scale-button>\n  </div>\n);\n\nexport default App;\n```\n\nIf you use our automatically generated proxy package `@telekom/scale-components-react` (don't forget to install it first `npm install @telekom/scale-components-react@next`):\n\n```jsx\nimport React from 'react';\nimport { ScaleButton } from '@telekom/scale-components-react';\n\nconst App = () => (\n  <div>\n    <ScaleButton>Click</ScaleButton>\n  </div>\n);\n\nexport default App;\n```\n\n> In the first snippet, the custom element (aka web component) is used directly (`<scale-button>`); in the second, a React component (`ScaleButton`) is wrapping the actual web component. This wrapper is useful to work around the framework limitations.\n\n## Limitations\n\n### Data Binding\n\nReact passes all data to custom elements not as props but as HTML attributes which can only be strings, so objects or arrays will be stringified and you'll end up with `some-attr=\"[object Object]\"`. You can read more about it in this [GitHub issue](https://github.com/facebook/react/issues/11347).\n\n### Custom Events\n\nReact has its own [synthetic event system](https://reactjs.org/docs/handling-events.html), which makes it impossible to declaratively bind to custom events. That means `<scale-button onScaleChange={handleChange}>` won't work.\n\nWorking around these limitations without help is possible but can be cumbersome and requires some imperative code. So we recommend using a wrapper or interop layer to make things easier.\n\n- [reactify-wc](https://github.com/BBKolton/reactify-wc) — Turn web components into React components\n- [@skatejs/val](https://github.com/skatejs/val) — A generic wrapper for better VDOM/DOM integration\n- [@telekom/scale-components-react](https://www.npmjs.com/package/@telekom/scale-components-react) — Our own automatically generated proxy package\n\nAn example using `reactify-wc` would look like this:\n\n```jsx\nimport React from 'react';\nimport reactifyWc from 'reactify-wc';\n\nconst ScaleSlider = reactifyWc('scale-slider');\n\nconst App = () => {\n  const handleInput = (event) => {\n    // it works!\n  };\n  return <ScaleSlider label=\"Example\" onScaleInput={handleInput}></ScaleSlider>;\n};\n\nexport default App;\n```\n\nPlease note that when using any custom events from scale in a wrapper, it is important to include \"on\" before the event name. For example, \"scaleChange\" should be written as \"onScaleChange.\n\n## Events in React\n\nIn order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation for these custom events on the respective component pages in the \"docs\" section.\n\nDue to React's [synthetic events](https://reactjs.org/docs/handling-events.html), binding to custom events requires some extra work. You can use an interop layer like the ones listed above, or alternatively use [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) to bind imperatively with `addEventListener`.\n\n## Styles\n\nIt's important to remember that most Scale components leverage the Shadow DOM, so it's not possible to apply styles directly from the outside.\n\nPlease refer to our [Customization and Themes](./?path=/docs/guidelines-customization-and-themes--page) page for guidance.\n\n`styled-components`-type of techniques will not work. However, it's possible to inline scoped variables overwrites:\n\n```jsx\n// ..\n\nconst Slider = (\n  <ScaleSlider\n    label=\"Example\"\n    track-small\n    style={{\n      '--background-track': 'tomato',\n      '--color-display-value': 'limegreen',\n    }}\n  ></ScaleSlider>\n);\n```\n\n## Proxy Package\n\nThe automatically generated proxy packages **might** be deprecated in v4:\n\n- `@telekom/scale-components-react`\n- `@telekom/scale-components-react-neutral`\n\nSupport for custom elements landed in React in the `@experimental` dist. Please try it out, any feedback is appreciated. See https://github.com/facebook/react/issues/11347#issuecomment-988970952\n",ScaleAndReact_de="# Scale und React\n\nReact unterstützt Web Components. Bestehende Einschränkungen und wie du sie umgehen kannst, listen wir im Folgenden auf.\n\nEin Beispiel für eine Boilerplate App findest du im Ordner _Examples_ in unserem [GitHub Repository](https://github.com/telekom/scale/tree/main/examples).\n\n## Setup\n\nInstalliere zuerst das Package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nLade danach die Komponenten und das CSS in `index.js`:\n\n```js\nimport { defineCustomElements } from '@telekom/scale-components/loader';\nimport '@telekom/scale-components/dist/scale-components/scale-components.css';\n\n// ...\n\ndefineCustomElements();\n```\n\nJetzt kannst du die Scale-Komponenten ohne zusätzlichen Import nutzen:\n\n```jsx\nimport React from 'react';\n\nconst App = () => (\n  <div>\n    <scale-button>Click</scale-button>\n  </div>\n);\n\nexport default App;\n```\n\nWenn du unser automatisch generiertes Proxy Package `@telekom/scale-components-react` nutzt (vergiss nicht, es zu installieren `npm install @telekom/scale-components-react@next`):\n\n```jsx\nimport React from 'react';\nimport { ScaleButton } from '@telekom/scale-components-react';\n\nconst App = () => (\n  <div>\n    <ScaleButton>Click</ScaleButton>\n  </div>\n);\n\nexport default App;\n```\n\n> Das erste Beispiel nutzt die Web Component `<scale-button>` direkt, das zweite ruft sie innerhalb der React-Komponente `ScaleButton` auf. Die zweite Variante ist besonders nützlich, um Einschränkungen des Frameworks zu umgehen.\n\n## Einschränkungen\n\n### Data Binding\n\nReact übermittelt Daten zu Custom Elements nicht als Properties, sondern als HTML-Attribute, die nur aus Strings bestehen dürfen. Objekte und Arrays werden in Strings konvertiert. Das produziert `some-attr=\"[object Object]\"`. Weitere Informationen findest du in diesem [GitHub Issue](https://github.com/facebook/react/issues/11347).\n\n### Custom Events\n\nReact hat sein eigenes [Synthetic Event System](https://reactjs.org/docs/handling-events.html), weshalb Custom Events nicht deklarativ angebunden werden können. `<scale-button onScaleChange={handleChange}>` wird nicht funktionieren.\n\nDiese Einschränkung ohne Hilfe zu umgehen, kann aufwändig sein und erfordert imperativen Code. Wir empfehlen die Verwendung eines Wrappers oder Interop Layers.\n\n- [reactify-wc](https://github.com/BBKolton/reactify-wc) — Konvertiere Web Components in React Components\n- [@skatejs/val](https://github.com/skatejs/val) — Generischer Wrapper für bessere VDOM/DOM-Integration\n- [@telekom/scale-components-react](https://www.npmjs.com/package/@telekom/scale-components-react) — Unser automatisch generiertes Proxy Package\n\nEin Beispiel mit `reactify-wc` sieht wie folgt aus:\n\n```jsx\nimport React from 'react';\nimport reactifyWc from 'reactify-wc';\n\nconst ScaleSlider = reactifyWc('scale-slider');\n\nconst App = () => {\n  const handleInput = (event) => {\n    // it works!\n  };\n  return <ScaleSlider label=\"Example\" onScaleInput={handleInput}></ScaleSlider>;\n};\n\nexport default App;\n```\n\nBitte beachten Sie, dass es wichtig ist, das Wort \"on\" vor dem Ereignisnamen zu verwenden, wenn Sie benutzerdefinierte Ereignisse von einer Skala in einem Wrapper verwenden. \"scaleChange\" sollte zum Beispiel als \"onScaleChange\" geschrieben werden.\n\n## Events in React\n\nUm Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z.B. `scaleChange`) Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt \"Docs\".\n\nAufgrund von Reacts [Synthetic Events](https://reactjs.org/docs/handling-events.html), bedarf das Binding von Custom Events etwas Mehraufwand. Nutze wie oben beschrieben einen Interop Layer oder alternativ [`ref`](https://reactjs.org/docs/refs-and-the-dom.html), um `addEventListener` imperativ anzuwenden.\n\n## Styles\n\nDie meisten Scale-Komponenten nutzen das Shadow-DOM. So kannst du Styles direkt von ausserhalb der Komponente anwenden. Unter [Anpassungen und Themes](./?path=/docs/guidelines-customization-and-themes--page) findest du mehr Informationen.\n\nDie `styled-components`-Techniken werden nicht funktionieren. Es ist möglich, Overwrites für Scoped Variables inline anzuwenden:\n\n```jsx\n// ..\n\nconst Slider = (\n  <ScaleSlider\n    label=\"Example\"\n    track-small\n    style={{\n      '--background-track': 'tomato',\n      '--color-display-value': 'limegreen',\n    }}\n  ></ScaleSlider>\n);\n```\n\n## Proxy Package\n\nDie automatisch generierten Proxy Packages könnten in v4 auslaufen:\n\n- `@telekom/scale-components-react`\n- `@telekom/scale-components-react-neutral`\n\nReact bietet nun Support für Custom Elements in der `@experimental` Distribution. Probiere es aus! Wir freuen uns auf jegliches Feedback. Siehe https://github.com/facebook/react/issues/11347#issuecomment-988970952\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Scale and React",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndReact_en:ScaleAndReact_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Scale and React",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndReact_en:ScaleAndReact_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/ScaleAndVue.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),ScaleAndVue_en="# Scale and Vue\n\nVue fully supports web components.\n\nYou can find an example boilerplate app in the \"examples\" folder in the [GitHub repo](https://github.com/telekom/scale/tree/main/examples).\n\n## Setup\n\nFirst, install the package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nThen load the component library and the CSS in `main.js`:\n\n```js\nimport { defineCustomElements } from '@telekom/scale-components/loader';\nimport '@telekom/scale-components/dist/scale-components/scale-components.css';\n\n// ...\n\ndefineCustomElements();\n```\n\nIn order to instruct Vue to treat Scale components as custom elements, [a bit of configuration is needed](https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements).\n\nFor **Vue v2**:\n\n```js\n// main.js\nVue.config.ignoredElements = [/scale-\\w*/];\n```\n\nFor **Vue v3**, set `compilerOptions.isCustomElement`:\n\n```js\n// in vue.config.js (vue-cli)\nchainWebpack: (config) => {\n  config.module\n    .rule('vue')\n    .use('vue-loader')\n    .tap((options) => {\n      // https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements\n      options.compilerOptions = {\n        isCustomElement: (tag) => tag.startsWith('scale-'),\n      };\n      return options;\n    });\n};\n\n// in webpack config\nrules: [\n  {\n    test: /\\.vue$/,\n    use: 'vue-loader',\n    options: {\n      compilerOptions: {\n        isCustomElement: (tag) => tag.startsWith('scale-'),\n      },\n    },\n  },\n  // ...\n];\n\n// in vite.config.js\ndefineConfig({\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          isCustomElement: (tag) => tag.startsWith('scale-'),\n        },\n      },\n    }),\n  ],\n});\n\n// or in main.js (on-the-fly template compilation)\nconst app = Vue.createApp({});\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-');\n```\n\nIf your project is using ESLint with `eslint-plugin-vue`, you should also deactivate the rule `vue/no-deprecated-slot-attribute`.\n\n```js\n// In .eslintrc.js or in package.json\nrules: {\n  \"vue/no-deprecated-slot-attribute\": \"off\",\n},\n```\n\nYou should now be able to use Scale components in your templates:\n\n```html\n<div>\n  <scale-button>Click!</scale-button>\n</div>\n```\n\n## Events in Vue\n\nIn order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation for these custom events on the respective component pages in the \"docs\" section.\n\nYou can bind to `scale`-prefixed events with the regular Vue syntax:\n\n```html\n<scale-slider @scaleInput=\"handleInput\"></scale-slider>\n```\n\n## Form Input Bindings\n\nThe `v-model` directive does not work with custom elements. Only native form control elements like `input` and `textarea` do.\n\nYou can achieve the same results quite easily:\n\n```html\n<scale-text-field\n  :value=\"example\"\n  @scaleChange=\"example = $event.target.value\"\n></scale-text-field>\n```\n\n## Proxy Package\n\nThe automatically generated proxy packages will be removed in v4:\n\n- `@telekom/scale-components-vue`\n- `@telekom/scale-components-vue-neutral`\n\nPlease use `@telekom/scale-components` directly, support for custom elements is already great.\n",ScaleAndVue_de="# Scale und Vue\n\nVue unterstützt problemlos Web Components.\n\nEin Beispiel für eine Boilerplate-App findest du im [GitHub Repository](https://github.com/telekom/scale/tree/main/examples).\n\n## Setup\n\nInstalliere zuerst das Package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nLade danach die Komponenten-Bibliothek und das CSS in `main.js`:\n\n```ts\nimport { defineCustomElements } from '@telekom/scale-components/loader';\nimport '@telekom/scale-components/dist/scale-components/scale-components.css';\n\n// ...\n\ndefineCustomElements();\n```\n\nUm Vue den Umgang mit Custom Elements zu erleichtern, [ist etwas Konfiguration nötig](https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements).\n\nFür **Vue v2**:\n\n```js\n// main.js\nVue.config.ignoredElements = [/scale-\\w*/];\n```\n\nFür **Vue v3**, setze `compilerOptions.isCustomElement`:\n\n```js\n// in vue.config.js (vue-cli)\nchainWebpack: (config) => {\n  config.module\n    .rule('vue')\n    .use('vue-loader')\n    .tap((options) => {\n      // https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements\n      options.compilerOptions = {\n        isCustomElement: (tag) => tag.startsWith('scale-'),\n      };\n      return options;\n    });\n};\n\n// in webpack config\nrules: [\n  {\n    test: /\\.vue$/,\n    use: 'vue-loader',\n    options: {\n      compilerOptions: {\n        isCustomElement: (tag) => tag.startsWith('scale-'),\n      },\n    },\n  },\n  // ...\n];\n\n// in vite.config.js\ndefineConfig({\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          isCustomElement: (tag) => tag.startsWith('scale-'),\n        },\n      },\n    }),\n  ],\n});\n\n// or in main.js (on-the-fly template compilation)\nconst app = Vue.createApp({});\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-');\n```\n\nFalls in dem Projekt ESLint mit `eslint-plugin-vue` verwendet wird, sollte zusätzlich die Regel `vue/no-deprecated-slot-attribute` deaktiviert werden.\n\n```js\n// In .eslintrc.js or in package.json\nrules: {\n  \"vue/no-deprecated-slot-attribute\": \"off\",\n},\n```\n\nNun solltest du in der Lage sein, Scale-Komponenten in deinen Templates zu verwenden:\n\n```html\n<div>\n  <scale-button>Click!</scale-button>\n</div>\n```\n\n## Events in Vue\n\nUm Konflikte mit Standard-Events zu vermeiden und für beste Kompatibilität mit anderen Libraries und Frameworks, sind die Custom Events, die von einigen Scale-Komponenten ausgegeben werden, mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z. B. scaleChange). Die Dokumentation zu Custom Events findest du auf den jeweiligen Komponentenseiten im Abschnitt \"Docs\".\n\nAn Events mit dem Prefix `scale` kannst du reguläre Vue-Syntax anbinden:\n\n```html\n<scale-slider @scaleInput=\"handleInput\"></scale-slider>\n```\n\n## Form Input Bindings\n\nDie `v-model`-Directive wird mit Custom Elements nicht funktionieren; es funktionieren nur native Formularsteuerelemente wie `input` und `textarea`.\n\nDu kannst ganz einfach die gleichen Ergebnisse erzielen:\n\n```html\n<scale-text-field\n  :value=\"example\"\n  @scaleChange=\"example = $event.target.value\"\n></scale-text-field>\n```\n\n## Proxy Package\n\nDie automatisch generierten Proxy Packages werden in v4 entfernt:\n\n- `@telekom/scale-components-vue`\n- `@telekom/scale-components-vue-neutral`\n\nBitte nutze `@telekom/scale-components` direkt. Custom Elements werden bereits super unterstützt.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Scale and Vue",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndVue_en:ScaleAndVue_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Scale and Vue",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndVue_en:ScaleAndVue_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/update_history/Design.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Design_en='# Design Updates\n\nThis page documents updates to the visual appearance of Scale.\n\n## Ghost Button Update\n\n30.11.2023\n\nWe have changed the color of the Ghost Button to optimize accessibility in dark mode.\n\n## Type Update\n\n06.04.2023\n\nFont format “Footnote” has been removed from our type scale.\n\n## Additional basic types of the Telekom Brand Header\n\n20.03.2023\n\nThe beta component “Telekom Brand Header & Navigation” released in January is extended by two new basic types - “Slim Header” and “Subtle Header”. You can find more information in the Usage Text of the [new Brand Header](./?path=/docs/beta-components-telekom-brand-header-navigation--standard).\n\n## New Brand Footer\n\n17.02.2023\n\nRelease of the new brand footer as a beta version. This will replace the current component once quality control is complete and WCAG accessibility certification is in place.\n\n## New Brand Header\n\n31.01.2023\n\nRelease of the new brand header as a beta version. This will replace the current component once quality control is complete and WCAG accessibility certification is in place. Until then, we\'d love to hear <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">your feedback</a> on the new component.\n\n## New Beta Components\n\n25.01.2023\n\n- Release of the new beta components Segmented Button and Chip.\n- The Segmented Button replaces the beta component Toggle Group.\n- New category Deprecated Components. This lists components we no longer support.\n\n<br>\n\n## Component Update (Optimized Mobile and Visual Design)\n\n27.10.2022\n\n**Visual and functionality changes**\n\n- Slider: optimized the design and expanded on the overall functionality\n- Radio Buttons: optimized the selected interactive state\n- Tags: optimized the current colors and added predefined colors\n- Switch: revised the design and added a variant for Android\n- Tab Navigation: optimized the visual design\n\n<br>\n\n**Optimized for touch-screen devices**\n\nThe following components have been resized to make them easier to use on touch screens:\n\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Removed small variants**\n\nThe following components have been adjusted in height and are now only available in one size on Scale. If you need a different size, you can change the components with CSS overwrite.\n\n- Text Field\n- Dropdown\n- Dropdown Select\n- Date Picker\n- Pagination\n\nWe continue to support the small and large button sizes. The height of the large button was also adjusted.\n\n<br>\n\n**Accessibility**\n\nInformation text now contains icons to support people with color vision deficiency (often referred to as color blindness). These are the updated components:\n\n- Text Field\n- Text Area\n- Dropdown\n- Dropdown Select\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Sketch library**\n\nThe changes above have also been applied to our Sketch library. In addition, we’ve optimized the icons for the following components:\n\n- Buttons\n- Text Field\n- Text Area\n- Rating Stars\n- Switch\n- Dropdown\n- Text List\n- Table\n\nPlease note: some small variants are no longer supported or available in the library. If you use such variants, you can replace them with the new standard size by clicking Layer ➔ Replace With. Here is an overview of the removed components:\n\n| Component       | Previous variant size | New variant name | Replaced with |\n| --------------- | --------------------- | ---------------- | ------------- |\n| Text Field      | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Dropdown        | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Dropdown Select | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Date Picker     | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Pagination      | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Table           | Small                 | Standard         | –             |\n|                 | Large                 | ❌               | Standard      |\n\n**Color tokens**\n\nThe new UI colors white and black are well suited when the color is identical in dark and light mode.\n\n## New dropdown select beta component\n\n02.08.22\n\nThe dropdown menu is now an integrated part and is no longer generated by the browser as in the [current version](./?path=/docs/components-dropdown--standard). This makes the component less error-prone. In particular, errors that could occur when switching between light and dark modes are now avoided.\n\nWe aim to deprecate the [Dropdown](./?path=/docs/components-dropdown--standard) component in favour of the newly released beta [Dropdown Select](./?path=/docs/beta-components-dropdown-select--standard) as soon as new component gets our of the beta phase.\n\n## Simplification of UI color tokens\n\n11.07.22\n\nWe have simplified the structure of UI colors and removed duplications. You can find <a href="https://github.com/telekom/design-tokens/pull/192#issuecomment-1178815001" target="_blank" rel="noopener noreferrer">a detailed overview of the changes here</a>.\n\n## Refinements to the Color Palette\n\n23.06.22\n\nColor updates:\n\n- New color category (on-subtle) for texts on colored backgrounds of the gradation Subtle\n- New color scale Yellow\n- New color scale Cyan\n- New color scale Green\n- New color scale Red\n- New color scale Orange\n- New color scale Blue\n\nColor value changes:\n\n- Updated text color function\n- Updated background color function\n- Updated Brown scale\n- Updated Violet scale\n- Updated Teal scale\n- Updated Olive scale\n- Updated gray value for Disabled in dark mode\n\nRemoved colors:\n\n- The Interaction category was removed due to duplication. If you want to use these colors, you can use the Blue color scale\n\nAffected content:\n\n- All error states and notifications, as well as warning and success messages of the respective components\n- These components: Notification Banner, Notification Message, and Notification Toast\n- Color tokens (color updates, color value changes)\n\n## Light and dark mode\n\n19.04.22\n\n- The Scale components are now also available in dark mode.\n- The color palette has been optimized.\n- The design token concept has been optimized and extended with semantic tokens.\n- The text styles have been optimized.\n\nAffected content:\n\nAll components\n\n> Please note that the following components make use of Telekom brand and design assets — including but not limited to the logos, the color magenta, the typeface and icons, as well as the footer and header components — and are **not open source** and **not available for free use**. They require Deutsche Telekom\'s express permission for use in commerce.\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-light.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Light)</a><br /><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-dark.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Dark)</a></p>\n\n[Release Notes](./?path=/docs/new-release-release-notes--page)<br>\n[Sketch Library Update](./?path=/docs/new-release-sketch-library-update--page)<br>\n[Design Tokens](./?path=/docs/guidelines-design-tokens--page)<br>\n[Typography](./?path=/docs/guidelines-typography--page)<br>\n[Colors](./?path=/docs/guidelines-colors--page)<br>\n[Shadows](./?path=/docs/guidelines-shadows--page)<br>\n\n## Roundings\n\n11.11.2021\n\n- Element roundings have been harmonized for better visual appearance.  \n  <br>\n  Affected Content: <br>\n  [Brand Header](./?path=/docs/components-brand-header-navigation--standard)  \n  [Card](./?path=/docs/components-card--standard)  \n  [Data Grid](./?path=/docs/components-data-grid--standard)  \n  [Date Picker](./?path=/docs/components-date-picker--standard)  \n  [Dropdown](./?path=/docs/components-dropdown--standard)  \n  [Flyout Menu](./?path=/docs/components-flyout-menu--standard)  \n  [Footer](./?path=/docs/components-footer--standard)  \n  [Modal](./?path=/docs/components-modal--standard)  \n  [Pagination](./?path=/docs/components-pagination--standard)  \n  [Table](./?path=/docs/components-table--standard)  \n  [Tag](./?path=/docs/components-tag--standard)  \n  [Text Area](./?path=/docs/components-text-area--standard)  \n  [Text Field](./?path=/docs/components-text-field--standard)\n\n## Link color & underline\n\n13.9.2021\n\n- The default link color has been updated to blue-60. This way we ensure better contrasts and accessibility.\n- The option to use a link without underline has been added.  \n  <br>\n  Affected Content: <br>\n  [Link](./?path=/docs/components-link--standard)\n',Design_de='# Design Updates\n\nDiese Seite dokumentiert Updates der visuellen Erscheinung von Scale\n\n## Aktualisierung des Ghost Buttons\n\n30.11.2023\n\nWir haben die Farbe des Ghost Buttons geändert, um die Barrierefreiheit im Dark Mode zu optimieren.\n\n## Typografie-Update\n\n06.04.2023\n\nDas Schriftformat “Footnote” wurde aus der Typografie-Skala entfernt.\n\n## Weitere Basistypen des Telekom Brand Headers\n\n20.03.2023\n\nDie im Januar veröffentlichte Beta-Komponente “Telekom Brand Header & Navigation” wird um zwei neue Basistypen ergänzt – “Slim Header” und “Subtle Header”. Mehr Informationen findest du im Usage Text des [neuen Brand Headers](./?path=/docs/beta-components-telekom-brand-header-navigation--standard).\n\n## Neuer Brand Footer\n\n17.02.2023\n\nVeröffentlichung des neuen Brand Footers als Beta-Version. Dieser ersetzt die aktuelle Komponente, wenn die Qualitätskontrolle abgeschlossen ist und die WCAG-Zertifizierung für Barrierefreiheit vorliegt.\n\n## Neuer Brand Header\n\n31.01.2023\n\nVeröffentlichung des neuen Brand Headers als Beta-Version. Dieser ersetzt die aktuelle Komponente, wenn die Qualitätskontrolle abgeschlossen ist und die WCAG-Zertifizierung für Barrierefreiheit vorliegt. Bis dahin freuen wir uns über <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">euer Feedback</a> zur neuen Komponente.\n\n## Neue Beta-Komponenten\n\n25.01.2023\n\n- Veröffentlichung der neuen Beta-Komponenten Segmented Button und Chip.\n- Der Segmented Button ersetzt die Beta-Komponente Toggle Group.\n- Neue Kategorie „Deprecated Components“. Hier sind Komponenten aufgelistet, die wir nicht weiter unterstützen.\n\n<br>\n\n## Komponenten-Update (Optimierung von Mobile und Visual Design)\n\n27.10.2022\n\n**Visuelle und funktionale Änderungen**\n\n- Slider: Visuelle Optimierung und funktionale Erweiterung\n- Radio Buttons: Optimierung des Interactive States „Selected“\n- Tags: Farbliche Optimierung und Erweiterung um vordefinierte Farben\n- Switch: Visuelle Überarbeitung und eine neue Variante für Android\n- Tab Navigation: Visuelle Optimierung\n\n<br>\n\n**Optimierung für Geräte mit Touchscreen**\n\nDie Größe der folgenden Komponenten ist angepasst und vereinfacht die Nutzung auf Touchscreens:\n\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Entfernte Varianten „Small“**\n\nDie folgenden Komponenten sind in ihrer Höhe angepasst und ab sofort nur noch in einer Größe auf Scale verfügbar. Wenn du für deinen Anwendungsfall eine andere Größe brauchst, kannst du die Komponenten per CSS-Overwrite ändern.\n\n- Textfield\n- Dropdown\n- Dropdown Select\n- Date Picker\n- Pagination\n\nDen Button unterstützen wir weiterhin in den Größen „Small“ und „Large“.\nDie Höhe des „Large Button“ ist ebenfalls angepasst.\n\n<br>\n\n**Barierrefreiheit**\n\nInformationstexte enthalten ab sofort Icons, um Menschen mit Farbfehlsichtigkeit in ihrer Nutzung zu unterstützen. Das sind die geänderten Komponenten:\n\n- Text Field\n- Text Area\n- Dropdown\n- Dropdown Select\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Sketch Library**\n\nDie oben genannten Änderungen wurden auch in unserer Sketch-Library angepasst. Zusätzlich haben wir die Symbole der folgenden Komponenten optimiert:\n\n- Buttons\n- Text-Field\n- Text-Area\n- Rating Stars\n- Switch\n- Dropdown\n- Text List\n- Table\n\nBitte beachte: Einige „Small“-Varianten werden nicht mehr unterstützt und sind in der Library nicht mehr verfügbar. Solltest du in deinem Layout solche Varianten verwenden, kannst du sie über „Layer“ ➔ „Replace with“ durch die neue Standardgröße ersetzen. Hier eine Übersicht der entfernten Komponenten:\n\n| Komponente      | Alte Variantengröße | Neuer Variantenname | Ersetzen durch |\n| --------------- | ------------------- | ------------------- | -------------- |\n| Textfield       | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Dropdown        | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Dropdown Select | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Date Picker     | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Pagination      | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Table           | Small               | Standard            | –              |\n|                 | Large               | ❌                  | Standard       |\n\n**Farbtokens**\n\nDie neuen UI-Farben „White“ und „Black“ sind für Anwendungsfälle geeignet, bei denen die Farbe im Dark und Light Mode identisch ist.\n\n## Neue Dropdown Select Beta-Komponente\n\n02.08.2022\n\nDas Dropdown-Menü ist nun ein integrierter Bestandteil der Komponente und wird nicht mehr wie in der [bestehenden Version](./?path=/docs/components-dropdown--standard) vom Browser generiert. Dadurch ist die Komponente weniger fehleranfällig. Insbesondere Fehler, die beim Switch zwischen Light- und Dark Mode entstehen konnten, werden nun vermieden.\n\nWir planen, die bestehende [Dropdown-Komponente](./?path=/docs/components-dropdown--standard) zugunsten der neu veröffentlichten Beta-Version von [Dropdown Select](./?path=/docs/beta-components-dropdown-select--standard) zu verwerfen, sobald die neue Komponente die Beta-Phase verlassen hat.\n\n## Vereinfachung der UI-Farbtokens\n\n11.07.22\n\nWir habe die Struktur der UI-Farben vereinfacht und Dopplungen entfernt. Eine <a href="https://github.com/telekom/design-tokens/pull/192#issuecomment-1178815001" target="_blank" rel="noopener noreferrer">detaillierte Übersicht der Änderungen findest du hier</a>.\n\n## Überarbeitung der Farbpalette\n\n23.06.22\n\nFarbergänzungen:\n\n- Neue Farbkategorie („on-subtle”) für Texte auf farbigen Hintergründen der Abstufung „Subtle”\n- Neue Farbskala „Yellow“\n- Neue Farbskala „Cyan“\n- Neue Farbskala „Green“\n- Neue Farbskala „Red“\n- Neue Farbskala „Orange“\n- Neue Farbskala „Blue“\n\nFarbwertänderungen:\n\n- Anpassung der „Textfarben Funktion“\n- Anpassung der „Hintergrundfarben Funktion“\n- Anpassung der Skala „Brown“\n- Anpassung der Skala „Violet“\n- Anpassung der Skala „Teal“\n- Anpassung der Skala „Olive“\n- Anpassung des Grauwerts für „Disabled“ im Dark Mode\n\nEntfernte Farben:\n\n- Die Kategorie „Interaction“ wurde aufgrund von Dopplungen entfernt. Wer diese Farben nutzen möchte, kann auf die Farbskala „Blue“ zurückgreifen\n\nBetroffene Inhalte:\n\n- Alle Error-States, Benachrichtigungen sowie Warn- und Erfolgsmeldungen der jeweiligen Komponenten\n- Die Komponenten „Notification Banner”, „Notification Message” und „Notification Toast”\n- Farbtokens (Farbergänzungen, Farbwertänderungen)\n\n## Dark and Light Mode\n\n19.04.22\n\n- Die Scale Komponenten sind nun auch im Dark Mode verfügbar\n- Die Farbpalette wurde optimiert\n- Das Design Token Konzept wurde optimiert und um semantische Tokens erweitert\n- Die Textstile wurden optimiert\n\nBetroffene Inhalte:\n\nAlle Komponenten\n\n> Bitte beachte: Die folgenden Komponenten enthalten Marken- und Design-Assets der Telekom – beispielsweise Logos, die Farbe Magenta, die Schrift, Icons sowie Footer und Header. Die Komponenten sind **nicht Open Source** und dürfen **nicht frei verwendet werden**. Für eine kommerzielle Nutzung ist die ausdrückliche Zustimmung der Deutschen Telekom erforderlich.\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-light.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Light)</a><br /><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-dark.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Dark)</a></p>\n\n[Hinweise zum Release](./?path=/docs/new-release-release-notes--page)<br>\n[Sketch Library Update](./?path=/docs/new-release-sketch-library-update--page)<br>\n[Design Tokens](./?path=/docs/guidelines-design-tokens--page)<br>\n[Typografie](./?path=/docs/guidelines-typography--page)<br>\n[Farben](./?path=/docs/guidelines-colors--page)<br>\n[Schatten](./?path=/docs/guidelines-shadows--page)<br>\n\n## Rundungen\n\n11.11.2021\n\n- Die Rundungen der Elemente wurden angepasst. Dadurch verbessern wir den visuellen Zusammenhalt der Elemente  \n   <br>\n  Betroffene Inhalte: <br>\n  [Brand Header](./?path=/docs/components-brand-header-navigation--standard)  \n  [Card](./?path=/docs/components-card--standard)  \n  [Data Grid](./?path=/docs/components-data-grid--standard)  \n  [Date Picker](./?path=/docs/components-date-picker--standard)  \n  [Dropdown](./?path=/docs/components-dropdown--standard)  \n  [Flyout Menu](./?path=/docs/components-flyout-menu--standard)  \n  [Footer](./?path=/docs/components-footer--standard)  \n  [Modal](./?path=/docs/components-modal--standard)  \n  [Pagination](./?path=/docs/components-pagination--standard)  \n  [Table](./?path=/docs/components-table--standard)  \n  [Tag](./?path=/docs/components-tag--standard)  \n  [Text Area](./?path=/docs/components-text-area--standard)  \n  [Text Field](./?path=/docs/components-text-field--standard)\n\n## Link Farbe und Unterstreichung\n\n13.9.2021\n\n- Die Standardfarbe für Links ist jetzt „blue-60“. Dadurch stellen wir bessere Kontrastverhältnisse sicher und verbessern die Barrierefreiheit\n- Die Option „Link ohne Unterstreichung“ wurde hinzugefügt.  \n   <br>\n  Betroffene Inhalte: <br>\n  [Link](./?path=/docs/components-link--standard)\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Update History/Design",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Design_en:Design_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Update History/Design",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Design_en:Design_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/update_history/Development.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Development_en='# Code Updates\n\nThis page documents updates in `@telekom/scale-components` and related packages.\n\n## Visual Design Updates\n\n21.06.2023\n\nMinor bug fixes and optimizations of the visual design of the following components:\n\n- Accordion\n- Breadcrumb\n- Button\n- Checkbox Group\n- Card\n- Data Grid\n- Date Picker\n- Dropdown Select\n- Footer\n- Flyout Menu\n- Link\n- List\n- Loading Spinner\n- Modal\n- Notification\n- Radio Button Group\n- Rating Stars\n- Sidebar Navigation\n- Switch\n- Tab Navigation\n- Table\n- Tag\n- Telekom Brand Header\n- Text Area\n- Text Field\n\n**Further changes:**\n\nThe beta components Notification Banner, Messager, and Toast have been merged into a component named "Notification."\n\nThe logo variants with a claim have been removed from Scale as they are not intended for digital applications. The logo with a claim can still be downloaded via the [Brand & Design portal](https://www.brand-design.telekom.com/en/asset/logo-0-t-logo-with-claim/).\n\n## Additional basic types of the Telekom Brand Header\n\n20.03.2023\n\nThe beta component “Telekom Brand Header & Navigation” released in January is extended by two new basic types - “Slim Header” and “Subtle Header”. You can find more information in the Usage Text of the [new Brand Header](./?path=/docs/beta-components-telekom-brand-header-navigation--standard).\n\n## New Brand Footer\n\n17.02.2023\n\nRelease of the new brand footer as a beta version. This will replace the current component once quality control is complete and WCAG accessibility certification is in place.\n\n## New Brand Header\n\n31.01.2023\n\nRelease of the new brand header as a beta version. This will replace the current component once quality control is complete and WCAG accessibility certification is in place. Until then, we\'d love to hear <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">your feedback</a> on the new component.\n\n## New Beta Components\n\n25.01.2023\n\n- Release of the new beta components Segmented Button and Chip.\n- The Segmented Button replaces the beta component Toggle Group.\n- New category Deprecated Components. This lists components we no longer support.\n\n<br>\n\n## Component Update (Optimized Mobile and Visual Design)\n\n27.10.2022\n\n**Visual and functionality changes**\n\n- Slider: optimized the design and expanded on the overall functionality\n- Radio Buttons: optimized the selected interactive state\n- Tags: optimized the current colors and added predefined colors\n- Switch: revised the design and added a variant for Android\n- Tab Navigation: optimized the visual design\n\n<br>\n\n**Optimized for touch-screen devices**\n\nThe following components have been resized to make them easier to use on touch screens:\n\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Removed small variants**\n\nThe following components have been adjusted in height and are now only available in one size on Scale. If you need a different size, you can change the components with CSS overwrite.\n\n- Text Field\n- Dropdown\n- Dropdown Select\n- Date Picker\n- Pagination\n\nWe continue to support the small and large button sizes. The height of the large button was also adjusted.\n\n<br>\n\n**Accessibility**\n\nInformation text now contains icons to support people with color vision deficiency (often referred to as color blindness). These are the updated components:\n\n- Text Field\n- Text Area\n- Dropdown\n- Dropdown Select\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Sketch library**\n\nThe changes above have also been applied to our Sketch library. In addition, we’ve optimized the icons for the following components:\n\n- Buttons\n- Text Field\n- Text Area\n- Rating Stars\n- Switch\n- Dropdown\n- Text List\n- Table\n\nPlease note: some small variants are no longer supported or available in the library. If you use such variants, you can replace them with the new standard size by clicking Layer ➔ Replace With. Here is an overview of the removed components:\n\n| Component       | Previous variant size | New variant name | Replaced with |\n| --------------- | --------------------- | ---------------- | ------------- |\n| Text Field      | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Dropdown        | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Dropdown Select | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Date Picker     | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Pagination      | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Table           | Small                 | Standard         | –             |\n|                 | Large                 | ❌               | Standard      |\n\n**Color tokens**\n\nThe new UI colors white and black are well suited when the color is identical in dark and light mode.\n\n## New dropdown select beta component\n\n02.08.22\n\nThe dropdown menu is now an integrated part and is no longer generated by the browser as in the [current version](./?path=/docs/components-dropdown--standard). This makes the component less error-prone. In particular, errors that could occur when switching between light and dark modes are now avoided.\n\nWe aim to deprecate the [Dropdown](./?path=/docs/components-dropdown--standard) component in favour of the newly released beta [Dropdown Select](./?path=/docs/beta-components-dropdown-select--standard) as soon as new component gets our of the beta phase.\n\n## Dark and light mode (`v3.0.0-beta.100`)\n\n- The Scale components are now also available in Dark Mode\n- The color palette was optimized\n- The design token concept was optimized and extended by semantic tokens\n- The text styles have been optimized\n- CSS variables prefixed with `--scl` are deprecated in favor of the new `--telekom` ones.\n\nRead more about <a href="https://github.com/telekom/scale/blob/main/docs/dark-mode-v3-beta-100.md" target="_blank" rel="noopener noreferrer">the changes on GitHub</a>.\n\n### Affected content\n\nAll components  \n[Release Notes](./?path=/docs/new-release-release-notes--page)  \n[Sketch Library Update](./?path=/docs/new-release-sketch-library-update--page)  \n[Design Tokens](./?path=/docs/guidelines-design-tokens--page)  \n[Typography](./?path=/docs/guidelines-typography--page)  \n[Colors](./?path=/docs/guidelines-colors--page)  \n[Shadows](./?path=/docs/guidelines-shadows--page)\n\n## v1 to v2 Migration\n\nFind the guide <a href="https://github.com/telekom/scale/blob/main/docs/archive/v1-to-v2-migration-guide.md" target="_blank" rel="noopener noreferrer">on GitHub</a>.\n',Development_de='# Code Updates\n\nDiese Seite dokumentiert Aktualisierungen in `@telekom/scale-components` und verwandten Paketen.\n\n## Visual Design Updates\n\n21.06.2023\n\nKleinere Bugfixes und Optimierungen des Visual Designs folgender Komponenten:\n\n- Accordion\n- Breadcrump\n- Button\n- Checkbox Group\n- Card\n- Data Grid\n- Date Picker\n- Dropdown Select\n- Footer\n- Flyout Menu\n- Link\n- List\n- Loading Spinner\n- Modal\n- Notification\n- Radio Button Group\n- Rating Stars\n- Sidebar Navigation\n- Switch\n- Tab Navigation\n- Table\n- Tag\n- Telekom Brand Header\n- Text Area\n- Text Field\n\n**Weitere Änderungen:**\n\nDie Beta-Komponenten Notification Banner, Messager und Toast wurden zu einer Komponente namens "Notification" zusammengefasst.\n\nDie Logovarianten mit Claim wurden aus Scale entfernt, da sie nicht für digitale Anwendungen vorgesehen sind. Das Logo mit Claim kann weiterhin über das Brand & Design-Portal heruntergeladen werden.\n\n## Weitere Basistypen des Telekom Brand Headers\n\n20.03.2023\n\nDie im Januar veröffentlichte Beta-Komponente “Telekom Brand Header & Navigation” wird um zwei neue Basistypen ergänzt – “Slim Header” und “Subtle Header”. Mehr Informationen findest du im Usage Text des [neuen Brand Headers](./?path=/docs/beta-components-telekom-brand-header-navigation--standard).\n\n## Neuer Brand Footer\n\n17.02.2023\n\nVeröffentlichung des neuen Brand Footers als Beta-Version. Dieser ersetzt die aktuelle Komponente, wenn die Qualitätskontrolle abgeschlossen ist und die WCAG-Zertifizierung für Barrierefreiheit vorliegt.\n\n## Neuer Brand Header\n\n31.01.2023\n\nVeröffentlichung des neuen Brand Headers als Beta-Version. Dieser ersetzt die aktuelle Komponente, wenn die Qualitätskontrolle abgeschlossen ist und die WCAG-Zertifizierung für Barrierefreiheit vorliegt. Bis dahin freuen wir uns über <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">euer Feedback</a> zur neuen Komponente.\n\n## Neue Beta-Komponenten\n\n25.01.2023\n\n- Veröffentlichung der neuen Beta-Komponenten Segmented Button und Chip.\n- Der Segmented Button ersetzt die Beta-Komponente Toggle Group.\n- Neue Kategorie „Deprecated Components“. Hier sind Komponenten aufgelistet, die wir nicht weiter unterstützen.\n\n<br>\n\n## Komponenten-Update (Optimierung von Mobile und Visual Design)\n\n27.10.2022\n\n**Visuelle und funktionale Änderungen**\n\n- Slider: Visuelle Optimierung und funktionale Erweiterung\n- Radio Buttons: Optimierung des Interactive States „Selected“\n- Tags: Farbliche Optimierung und Erweiterung um vordefinierte Farben\n- Switch: Visuelle Überarbeitung und eine neue Variante für Android\n- Tab Navigation: Visuelle Optimierung\n\n<br>\n\n**Optimierung für Geräte mit Touchscreen**\n\nDie Größe der folgenden Komponenten ist angepasst und vereinfacht die Nutzung auf Touchscreens:\n\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Entfernte Varianten „Small“**\n\nDie folgenden Komponenten sind in ihrer Höhe angepasst und ab sofort nur noch in einer Größe auf Scale verfügbar. Wenn du für deinen Anwendungsfall eine andere Größe brauchst, kannst du die Komponenten per CSS-Overwrite ändern.\n\n- Textfield\n- Dropdown\n- Dropdown Select\n- Date Picker\n- Pagination\n\nDen Button unterstützen wir weiterhin in den Größen „Small“ und „Large“.\nDie Höhe des „Large Button“ ist ebenfalls angepasst.\n\n<br>\n\n**Barierrefreiheit**\n\nInformationstexte enthalten ab sofort Icons, um Menschen mit Farbfehlsichtigkeit in ihrer Nutzung zu unterstützen. Das sind die geänderten Komponenten:\n\n- Text Field\n- Text Area\n- Dropdown\n- Dropdown Select\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Sketch Library**\n\nDie oben genannten Änderungen wurden auch in unserer Sketch-Library angepasst. Zusätzlich haben wir die Symbole der folgenden Komponenten optimiert:\n\n- Buttons\n- Text-Field\n- Text-Area\n- Rating Stars\n- Switch\n- Dropdown\n- Text List\n- Table\n\nBitte beachte: Einige „Small“-Varianten werden nicht mehr unterstützt und sind in der Library nicht mehr verfügbar. Solltest du in deinem Layout solche Varianten verwenden, kannst du sie über „Layer“ ➔ „Replace with“ durch die neue Standardgröße ersetzen. Hier eine Übersicht der entfernten Komponenten:\n\n| Komponente      | Alte Variantengröße | Neuer Variantenname | Ersetzen durch |\n| --------------- | ------------------- | ------------------- | -------------- |\n| Textfield       | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Dropdown        | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Dropdown Select | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Date Picker     | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Pagination      | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Table           | Small               | Standard            | –              |\n|                 | Large               | ❌                  | Standard       |\n\n**Farbtokens**\n\nDie neuen UI-Farben „White“ und „Black“ sind für Anwendungsfälle geeignet, bei denen die Farbe im Dark und Light Mode identisch ist.\n\n## Neue Dropdown Select Beta-Komponente\n\n02.08.2022\n\nDas Dropdown-Menü ist nun ein integrierter Bestandteil der Komponente und wird nicht mehr wie in der [bestehenden Version](./?path=/docs/components-dropdown--standard) vom Browser generiert. Dadurch ist die Komponente weniger fehleranfällig. Insbesondere Fehler, die beim Switch zwischen Light- und Dark Mode entstehen konnten, werden nun vermieden.\n\nWir planen, die bestehende [Dropdown-Komponente](./?path=/docs/components-dropdown--standard) zugunsten der neu veröffentlichten Beta-Version von [Dropdown Select](./?path=/docs/beta-components-dropdown-select--standard) zu verwerfen, sobald die neue Komponente die Beta-Phase verlassen hat.\n\n## Dark mode (`v3.0.0-beta.100`)\n\n- Die Scale Komponenten sind nun auch im Dark Mode verfügbar\n- Die Farbpalette wurde optimiert\n- Das Design Token Konzept wurde optimiert und um semantische Tokens erweitert\n- Die Text Stile wurden optimiert\n- CSS-Variablen mit dem Präfix `--scl` werden nicht weiter genutzt. Der neue Präfix ist `--telekom`.\n\nMehr zu den Änderungen findest du <a href="https://github.com/telekom/scale/blob/main/docs/dark-mode-v3-beta-100.md" target="_blank" rel="noopener noreferrer">auf GitHub</a>.\n\n### Betroffene Inhalte:\n\nAlle Komponenten  \n[Hinweise zum Release](./?path=/docs/new-release-release-notes--page)  \n[Sketch Library Update](./?path=/docs/new-release-sketch-library-update--page)  \n[Design Tokens](./?path=/docs/guidelines-design-tokens--page)  \n[Typografie](./?path=/docs/guidelines-typography--page)  \n[Farben](./?path=/docs/guidelines-colors--page)  \n[Schatten](./?path=/docs/guidelines-shadows--page)\n\n## v1 zu v2 Migration\n\nFinde die Migrationsleitung <a href="https://github.com/telekom/scale/blob/main/docs/archive/v1-to-v2-migration-guide.md" target="_blank" rel="noopener noreferrer">auf GitHub</a>.\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Update History/Development",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Development_en:Development_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Update History/Development",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Development_en:Development_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./storybook-init-framework-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__("./node_modules/@storybook/vue/dist/esm/client/index.js")},0:function(module,exports,__webpack_require__){__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/polyfills.js"),__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/globals.js"),__webpack_require__("./storybook-init-framework-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/vue/dist/esm/client/preview/config-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js"),__webpack_require__("./.storybook/preview.js-generated-config-entry.js"),module.exports=__webpack_require__("./generated-stories-entry.js")},1:function(module,exports){},2:function(module,exports){}},[[0,410,411]]]);
\ No newline at end of file
diff --git a/main.cb105c1e.iframe.bundle.js b/main.cb105c1e.iframe.bundle.js
new file mode 100644
index 0000000000..b8ff2883de
--- /dev/null
+++ b/main.cb105c1e.iframe.bundle.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[407],{"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\n.visually-hidden[data-v-4083c6d8] {\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(50%);\n          clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n",""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\nscale-link {\n  font: var(--telekom-text-style-body);\n}\n",""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\np[data-v-1349bb3e] {\n  max-width: 60ch;\n  margin-top: 0;\n}\n",""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\nscale-badge::part(label) {\n  display: none;\n}\n@media screen and (min-width: 1040px) {\nscale-badge::part(label) {\n    display: flex;\n}\n}\n",""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\nscale-badge::part(label) {\n  display: none;\n}\n@media screen and (min-width: 1040px) {\nscale-badge::part(label) {\n    display: flex\n}\n}\n",""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"\n.wrapper {\n  margin: -1rem;\n}\nscale-telekom-app-shell {\n  --min-height: 200vh;\n  --background: var(--telekom-color-background-surface-subtle);\n}\n",""]),module.exports=exports},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"../components/dist/esm lazy recursive ^\\.\\/.*\\.entry\\.js$ include: \\.entry\\.js$ exclude: \\.system\\.entry\\.js$":function(module,exports,__webpack_require__){var map={"./app-logo.entry.js":["../components/dist/esm/app-logo.entry.js",45],"./app-mega-menu_8.entry.js":["../components/dist/esm/app-mega-menu_8.entry.js",5],"./duet-date-picker_2.entry.js":["../components/dist/esm/duet-date-picker_2.entry.js",28],"./scale-accordion.entry.js":["../components/dist/esm/scale-accordion.entry.js",46],"./scale-alert.entry.js":["../components/dist/esm/scale-alert.entry.js",30],"./scale-app-footer.entry.js":["../components/dist/esm/scale-app-footer.entry.js",29],"./scale-app-header.entry.js":["../components/dist/esm/scale-app-header.entry.js",7],"./scale-app-shell.entry.js":["../components/dist/esm/scale-app-shell.entry.js",62],"./scale-badge_12.entry.js":["../components/dist/esm/scale-badge_12.entry.js",13],"./scale-breadcrumb.entry.js":["../components/dist/esm/scale-breadcrumb.entry.js",47],"./scale-button_3.entry.js":["../components/dist/esm/scale-button_3.entry.js",31],"./scale-callout.entry.js":["../components/dist/esm/scale-callout.entry.js",59],"./scale-card.entry.js":["../components/dist/esm/scale-card.entry.js",48],"./scale-carousel.entry.js":["../components/dist/esm/scale-carousel.entry.js",32],"./scale-chart-stack-card.entry.js":["../components/dist/esm/scale-chart-stack-card.entry.js",14],"./scale-checkbox-group.entry.js":["../components/dist/esm/scale-checkbox-group.entry.js",60],"./scale-checkbox_2.entry.js":["../components/dist/esm/scale-checkbox_2.entry.js",42],"./scale-chip.entry.js":["../components/dist/esm/scale-chip.entry.js",33],"./scale-collapsible.entry.js":["../components/dist/esm/scale-collapsible.entry.js",34],"./scale-data-grid.entry.js":["../components/dist/esm/scale-data-grid.entry.js",4],"./scale-date-picker.entry.js":["../components/dist/esm/scale-date-picker.entry.js",8],"./scale-divider.entry.js":["../components/dist/esm/scale-divider.entry.js",49],"./scale-dropdown-select_13.entry.js":["../components/dist/esm/scale-dropdown-select_13.entry.js",0,35],"./scale-dropdown.entry.js":["../components/dist/esm/scale-dropdown.entry.js",9],"./scale-grid-item.entry.js":["../components/dist/esm/scale-grid-item.entry.js",26],"./scale-grid.entry.js":["../components/dist/esm/scale-grid.entry.js",27],"./scale-helper-text.entry.js":["../components/dist/esm/scale-helper-text.entry.js",63],"./scale-icon-action-add-card.entry.js":["../components/dist/esm/scale-icon-action-add-card.entry.js",64],"./scale-icon-action-add.entry.js":["../components/dist/esm/scale-icon-action-add.entry.js",65],"./scale-icon-action-arrange.entry.js":["../components/dist/esm/scale-icon-action-arrange.entry.js",66],"./scale-icon-action-arrow-down.entry.js":["../components/dist/esm/scale-icon-action-arrow-down.entry.js",67],"./scale-icon-action-arrow-left.entry.js":["../components/dist/esm/scale-icon-action-arrow-left.entry.js",68],"./scale-icon-action-arrow-right.entry.js":["../components/dist/esm/scale-icon-action-arrow-right.entry.js",69],"./scale-icon-action-arrow-up.entry.js":["../components/dist/esm/scale-icon-action-arrow-up.entry.js",70],"./scale-icon-action-auto-login.entry.js":["../components/dist/esm/scale-icon-action-auto-login.entry.js",71],"./scale-icon-action-backspace.entry.js":["../components/dist/esm/scale-icon-action-backspace.entry.js",72],"./scale-icon-action-backward.entry.js":["../components/dist/esm/scale-icon-action-backward.entry.js",73],"./scale-icon-action-changelog.entry.js":["../components/dist/esm/scale-icon-action-changelog.entry.js",74],"./scale-icon-action-checkmark.entry.js":["../components/dist/esm/scale-icon-action-checkmark.entry.js",75],"./scale-icon-action-circle-add.entry.js":["../components/dist/esm/scale-icon-action-circle-add.entry.js",76],"./scale-icon-action-circle-close_2.entry.js":["../components/dist/esm/scale-icon-action-circle-close_2.entry.js",77],"./scale-icon-action-close.entry.js":["../components/dist/esm/scale-icon-action-close.entry.js",78],"./scale-icon-action-compare.entry.js":["../components/dist/esm/scale-icon-action-compare.entry.js",79],"./scale-icon-action-copy-paste.entry.js":["../components/dist/esm/scale-icon-action-copy-paste.entry.js",80],"./scale-icon-action-cut-paste.entry.js":["../components/dist/esm/scale-icon-action-cut-paste.entry.js",81],"./scale-icon-action-disabled-microphone.entry.js":["../components/dist/esm/scale-icon-action-disabled-microphone.entry.js",82],"./scale-icon-action-download-from-cloud.entry.js":["../components/dist/esm/scale-icon-action-download-from-cloud.entry.js",83],"./scale-icon-action-download.entry.js":["../components/dist/esm/scale-icon-action-download.entry.js",84],"./scale-icon-action-drag-and-drop.entry.js":["../components/dist/esm/scale-icon-action-drag-and-drop.entry.js",85],"./scale-icon-action-edit.entry.js":["../components/dist/esm/scale-icon-action-edit.entry.js",86],"./scale-icon-action-export.entry.js":["../components/dist/esm/scale-icon-action-export.entry.js",87],"./scale-icon-action-fast-forward-nb.entry.js":["../components/dist/esm/scale-icon-action-fast-forward-nb.entry.js",88],"./scale-icon-action-fast-forward.entry.js":["../components/dist/esm/scale-icon-action-fast-forward.entry.js",89],"./scale-icon-action-favorite.entry.js":["../components/dist/esm/scale-icon-action-favorite.entry.js",90],"./scale-icon-action-filter-2.entry.js":["../components/dist/esm/scale-icon-action-filter-2.entry.js",91],"./scale-icon-action-filter.entry.js":["../components/dist/esm/scale-icon-action-filter.entry.js",92],"./scale-icon-action-forward.entry.js":["../components/dist/esm/scale-icon-action-forward.entry.js",93],"./scale-icon-action-full-screen.entry.js":["../components/dist/esm/scale-icon-action-full-screen.entry.js",94],"./scale-icon-action-import.entry.js":["../components/dist/esm/scale-icon-action-import.entry.js",95],"./scale-icon-action-install.entry.js":["../components/dist/esm/scale-icon-action-install.entry.js",96],"./scale-icon-action-launch.entry.js":["../components/dist/esm/scale-icon-action-launch.entry.js",97],"./scale-icon-action-light-dark-mode.entry.js":["../components/dist/esm/scale-icon-action-light-dark-mode.entry.js",98],"./scale-icon-action-link.entry.js":["../components/dist/esm/scale-icon-action-link.entry.js",99],"./scale-icon-action-logout.entry.js":["../components/dist/esm/scale-icon-action-logout.entry.js",100],"./scale-icon-action-loop.entry.js":["../components/dist/esm/scale-icon-action-loop.entry.js",101],"./scale-icon-action-microphone.entry.js":["../components/dist/esm/scale-icon-action-microphone.entry.js",102],"./scale-icon-action-minimize-screen.entry.js":["../components/dist/esm/scale-icon-action-minimize-screen.entry.js",103],"./scale-icon-action-minus-circle.entry.js":["../components/dist/esm/scale-icon-action-minus-circle.entry.js",104],"./scale-icon-action-more.entry.js":["../components/dist/esm/scale-icon-action-more.entry.js",105],"./scale-icon-action-move.entry.js":["../components/dist/esm/scale-icon-action-move.entry.js",106],"./scale-icon-action-mute.entry.js":["../components/dist/esm/scale-icon-action-mute.entry.js",107],"./scale-icon-action-notification.entry.js":["../components/dist/esm/scale-icon-action-notification.entry.js",108],"./scale-icon-action-pause-nb.entry.js":["../components/dist/esm/scale-icon-action-pause-nb.entry.js",109],"./scale-icon-action-pause.entry.js":["../components/dist/esm/scale-icon-action-pause.entry.js",110],"./scale-icon-action-pin.entry.js":["../components/dist/esm/scale-icon-action-pin.entry.js",111],"./scale-icon-action-play-nb.entry.js":["../components/dist/esm/scale-icon-action-play-nb.entry.js",112],"./scale-icon-action-play.entry.js":["../components/dist/esm/scale-icon-action-play.entry.js",113],"./scale-icon-action-pop-up-window.entry.js":["../components/dist/esm/scale-icon-action-pop-up-window.entry.js",114],"./scale-icon-action-power.entry.js":["../components/dist/esm/scale-icon-action-power.entry.js",115],"./scale-icon-action-previous-nb.entry.js":["../components/dist/esm/scale-icon-action-previous-nb.entry.js",116],"./scale-icon-action-print.entry.js":["../components/dist/esm/scale-icon-action-print.entry.js",117],"./scale-icon-action-publish.entry.js":["../components/dist/esm/scale-icon-action-publish.entry.js",118],"./scale-icon-action-random.entry.js":["../components/dist/esm/scale-icon-action-random.entry.js",119],"./scale-icon-action-record-nb.entry.js":["../components/dist/esm/scale-icon-action-record-nb.entry.js",120],"./scale-icon-action-refresh.entry.js":["../components/dist/esm/scale-icon-action-refresh.entry.js",121],"./scale-icon-action-remove.entry.js":["../components/dist/esm/scale-icon-action-remove.entry.js",122],"./scale-icon-action-reply-all.entry.js":["../components/dist/esm/scale-icon-action-reply-all.entry.js",123],"./scale-icon-action-reply-forward.entry.js":["../components/dist/esm/scale-icon-action-reply-forward.entry.js",124],"./scale-icon-action-reply.entry.js":["../components/dist/esm/scale-icon-action-reply.entry.js",125],"./scale-icon-action-restart.entry.js":["../components/dist/esm/scale-icon-action-restart.entry.js",126],"./scale-icon-action-search.entry.js":["../components/dist/esm/scale-icon-action-search.entry.js",127],"./scale-icon-action-send.entry.js":["../components/dist/esm/scale-icon-action-send.entry.js",128],"./scale-icon-action-share.entry.js":["../components/dist/esm/scale-icon-action-share.entry.js",129],"./scale-icon-action-shopping-cart.entry.js":["../components/dist/esm/scale-icon-action-shopping-cart.entry.js",130],"./scale-icon-action-show-password.entry.js":["../components/dist/esm/scale-icon-action-show-password.entry.js",131],"./scale-icon-action-sound-on.entry.js":["../components/dist/esm/scale-icon-action-sound-on.entry.js",132],"./scale-icon-action-star.entry.js":["../components/dist/esm/scale-icon-action-star.entry.js",133],"./scale-icon-action-stream-on.entry.js":["../components/dist/esm/scale-icon-action-stream-on.entry.js",134],"./scale-icon-action-success_3.entry.js":["../components/dist/esm/scale-icon-action-success_3.entry.js",135],"./scale-icon-action-thumbs-down.entry.js":["../components/dist/esm/scale-icon-action-thumbs-down.entry.js",136],"./scale-icon-action-thumbs-up.entry.js":["../components/dist/esm/scale-icon-action-thumbs-up.entry.js",137],"./scale-icon-action-tiles-add.entry.js":["../components/dist/esm/scale-icon-action-tiles-add.entry.js",138],"./scale-icon-action-upload-to-cloud.entry.js":["../components/dist/esm/scale-icon-action-upload-to-cloud.entry.js",139],"./scale-icon-action-upload.entry.js":["../components/dist/esm/scale-icon-action-upload.entry.js",140],"./scale-icon-action-volume-down.entry.js":["../components/dist/esm/scale-icon-action-volume-down.entry.js",141],"./scale-icon-action-volume-up.entry.js":["../components/dist/esm/scale-icon-action-volume-up.entry.js",142],"./scale-icon-action-zoom-in.entry.js":["../components/dist/esm/scale-icon-action-zoom-in.entry.js",143],"./scale-icon-action-zoom-out.entry.js":["../components/dist/esm/scale-icon-action-zoom-out.entry.js",144],"./scale-icon-alert-antivirus-protection.entry.js":["../components/dist/esm/scale-icon-alert-antivirus-protection.entry.js",145],"./scale-icon-alert-compliance.entry.js":["../components/dist/esm/scale-icon-alert-compliance.entry.js",146],"./scale-icon-alert-cyber-security.entry.js":["../components/dist/esm/scale-icon-alert-cyber-security.entry.js",147],"./scale-icon-alert-help.entry.js":["../components/dist/esm/scale-icon-alert-help.entry.js",148],"./scale-icon-alert-high-priority-email.entry.js":["../components/dist/esm/scale-icon-alert-high-priority-email.entry.js",149],"./scale-icon-alert-imprint-dataprivacy.entry.js":["../components/dist/esm/scale-icon-alert-imprint-dataprivacy.entry.js",150],"./scale-icon-alert-legal.entry.js":["../components/dist/esm/scale-icon-alert-legal.entry.js",151],"./scale-icon-alert-network-disrupted.entry.js":["../components/dist/esm/scale-icon-alert-network-disrupted.entry.js",152],"./scale-icon-alert-password-breaking.entry.js":["../components/dist/esm/scale-icon-alert-password-breaking.entry.js",153],"./scale-icon-alert-security.entry.js":["../components/dist/esm/scale-icon-alert-security.entry.js",154],"./scale-icon-alert-traffic-disruption.entry.js":["../components/dist/esm/scale-icon-alert-traffic-disruption.entry.js",155],"./scale-icon-alert-unknown.entry.js":["../components/dist/esm/scale-icon-alert-unknown.entry.js",156],"./scale-icon-communication-available.entry.js":["../components/dist/esm/scale-icon-communication-available.entry.js",157],"./scale-icon-communication-blog.entry.js":["../components/dist/esm/scale-icon-communication-blog.entry.js",158],"./scale-icon-communication-call-incoming.entry.js":["../components/dist/esm/scale-icon-communication-call-incoming.entry.js",159],"./scale-icon-communication-call-outgoing.entry.js":["../components/dist/esm/scale-icon-communication-call-outgoing.entry.js",160],"./scale-icon-communication-chat-badge.entry.js":["../components/dist/esm/scale-icon-communication-chat-badge.entry.js",161],"./scale-icon-communication-chat.entry.js":["../components/dist/esm/scale-icon-communication-chat.entry.js",162],"./scale-icon-communication-email.entry.js":["../components/dist/esm/scale-icon-communication-email.entry.js",163],"./scale-icon-communication-end-call.entry.js":["../components/dist/esm/scale-icon-communication-end-call.entry.js",164],"./scale-icon-communication-feedback.entry.js":["../components/dist/esm/scale-icon-communication-feedback.entry.js",165],"./scale-icon-communication-flight-mode.entry.js":["../components/dist/esm/scale-icon-communication-flight-mode.entry.js",166],"./scale-icon-communication-happy-person.entry.js":["../components/dist/esm/scale-icon-communication-happy-person.entry.js",167],"./scale-icon-communication-inbox.entry.js":["../components/dist/esm/scale-icon-communication-inbox.entry.js",168],"./scale-icon-communication-landing-mobile-contact-client.entry.js":["../components/dist/esm/scale-icon-communication-landing-mobile-contact-client.entry.js",169],"./scale-icon-communication-loyalty-earned.entry.js":["../components/dist/esm/scale-icon-communication-loyalty-earned.entry.js",170],"./scale-icon-communication-loyalty-lost.entry.js":["../components/dist/esm/scale-icon-communication-loyalty-lost.entry.js",171],"./scale-icon-communication-mail-opened.entry.js":["../components/dist/esm/scale-icon-communication-mail-opened.entry.js",172],"./scale-icon-communication-message-incoming.entry.js":["../components/dist/esm/scale-icon-communication-message-incoming.entry.js",173],"./scale-icon-communication-message-outgoing.entry.js":["../components/dist/esm/scale-icon-communication-message-outgoing.entry.js",174],"./scale-icon-communication-message.entry.js":["../components/dist/esm/scale-icon-communication-message.entry.js",175],"./scale-icon-communication-mms-incoming.entry.js":["../components/dist/esm/scale-icon-communication-mms-incoming.entry.js",176],"./scale-icon-communication-mms-outgoing.entry.js":["../components/dist/esm/scale-icon-communication-mms-outgoing.entry.js",177],"./scale-icon-communication-mobile-phone-number.entry.js":["../components/dist/esm/scale-icon-communication-mobile-phone-number.entry.js",178],"./scale-icon-communication-network-signal.entry.js":["../components/dist/esm/scale-icon-communication-network-signal.entry.js",179],"./scale-icon-communication-new-email.entry.js":["../components/dist/esm/scale-icon-communication-new-email.entry.js",180],"./scale-icon-communication-outbox.entry.js":["../components/dist/esm/scale-icon-communication-outbox.entry.js",181],"./scale-icon-communication-phone-number.entry.js":["../components/dist/esm/scale-icon-communication-phone-number.entry.js",182],"./scale-icon-communication-recipient.entry.js":["../components/dist/esm/scale-icon-communication-recipient.entry.js",183],"./scale-icon-communication-save-emails-to-drafts.entry.js":["../components/dist/esm/scale-icon-communication-save-emails-to-drafts.entry.js",184],"./scale-icon-communication-sms.entry.js":["../components/dist/esm/scale-icon-communication-sms.entry.js",185],"./scale-icon-communication-spam.entry.js":["../components/dist/esm/scale-icon-communication-spam.entry.js",186],"./scale-icon-communication-voice-message.entry.js":["../components/dist/esm/scale-icon-communication-voice-message.entry.js",187],"./scale-icon-content-2fa-google-auth.entry.js":["../components/dist/esm/scale-icon-content-2fa-google-auth.entry.js",188],"./scale-icon-content-achievement.entry.js":["../components/dist/esm/scale-icon-content-achievement.entry.js",189],"./scale-icon-content-android.entry.js":["../components/dist/esm/scale-icon-content-android.entry.js",190],"./scale-icon-content-apple.entry.js":["../components/dist/esm/scale-icon-content-apple.entry.js",191],"./scale-icon-content-applications.entry.js":["../components/dist/esm/scale-icon-content-applications.entry.js",192],"./scale-icon-content-available-keychain.entry.js":["../components/dist/esm/scale-icon-content-available-keychain.entry.js",193],"./scale-icon-content-bank.entry.js":["../components/dist/esm/scale-icon-content-bank.entry.js",194],"./scale-icon-content-biometric.entry.js":["../components/dist/esm/scale-icon-content-biometric.entry.js",195],"./scale-icon-content-birthday.entry.js":["../components/dist/esm/scale-icon-content-birthday.entry.js",196],"./scale-icon-content-bookmark.entry.js":["../components/dist/esm/scale-icon-content-bookmark.entry.js",197],"./scale-icon-content-clipboard.entry.js":["../components/dist/esm/scale-icon-content-clipboard.entry.js",198],"./scale-icon-content-clock.entry.js":["../components/dist/esm/scale-icon-content-clock.entry.js",199],"./scale-icon-content-cloud-security.entry.js":["../components/dist/esm/scale-icon-content-cloud-security.entry.js",200],"./scale-icon-content-code-scanner.entry.js":["../components/dist/esm/scale-icon-content-code-scanner.entry.js",201],"./scale-icon-content-color-selection.entry.js":["../components/dist/esm/scale-icon-content-color-selection.entry.js",202],"./scale-icon-content-country.entry.js":["../components/dist/esm/scale-icon-content-country.entry.js",203],"./scale-icon-content-credit-card.entry.js":["../components/dist/esm/scale-icon-content-credit-card.entry.js",204],"./scale-icon-content-data-visualisation.entry.js":["../components/dist/esm/scale-icon-content-data-visualisation.entry.js",205],"./scale-icon-content-delivery.entry.js":["../components/dist/esm/scale-icon-content-delivery.entry.js",206],"./scale-icon-content-digital-banking.entry.js":["../components/dist/esm/scale-icon-content-digital-banking.entry.js",207],"./scale-icon-content-digital-media.entry.js":["../components/dist/esm/scale-icon-content-digital-media.entry.js",208],"./scale-icon-content-discount.entry.js":["../components/dist/esm/scale-icon-content-discount.entry.js",209],"./scale-icon-content-e-sim.entry.js":["../components/dist/esm/scale-icon-content-e-sim.entry.js",210],"./scale-icon-content-eu.entry.js":["../components/dist/esm/scale-icon-content-eu.entry.js",211],"./scale-icon-content-face-mask.entry.js":["../components/dist/esm/scale-icon-content-face-mask.entry.js",212],"./scale-icon-content-features.entry.js":["../components/dist/esm/scale-icon-content-features.entry.js",213],"./scale-icon-content-flexible-tariffs.entry.js":["../components/dist/esm/scale-icon-content-flexible-tariffs.entry.js",214],"./scale-icon-content-folder.entry.js":["../components/dist/esm/scale-icon-content-folder.entry.js",215],"./scale-icon-content-food.entry.js":["../components/dist/esm/scale-icon-content-food.entry.js",216],"./scale-icon-content-gender-diverse.entry.js":["../components/dist/esm/scale-icon-content-gender-diverse.entry.js",217],"./scale-icon-content-gender-female.entry.js":["../components/dist/esm/scale-icon-content-gender-female.entry.js",218],"./scale-icon-content-gender-male.entry.js":["../components/dist/esm/scale-icon-content-gender-male.entry.js",219],"./scale-icon-content-half-rating.entry.js":["../components/dist/esm/scale-icon-content-half-rating.entry.js",220],"./scale-icon-content-heart.entry.js":["../components/dist/esm/scale-icon-content-heart.entry.js",221],"./scale-icon-content-height.entry.js":["../components/dist/esm/scale-icon-content-height.entry.js",222],"./scale-icon-content-history.entry.js":["../components/dist/esm/scale-icon-content-history.entry.js",223],"./scale-icon-content-hour-glass.entry.js":["../components/dist/esm/scale-icon-content-hour-glass.entry.js",224],"./scale-icon-content-iban.entry.js":["../components/dist/esm/scale-icon-content-iban.entry.js",225],"./scale-icon-content-id.entry.js":["../components/dist/esm/scale-icon-content-id.entry.js",226],"./scale-icon-content-in-stock.entry.js":["../components/dist/esm/scale-icon-content-in-stock.entry.js",227],"./scale-icon-content-international-sms.entry.js":["../components/dist/esm/scale-icon-content-international-sms.entry.js",228],"./scale-icon-content-international.entry.js":["../components/dist/esm/scale-icon-content-international.entry.js",229],"./scale-icon-content-interview.entry.js":["../components/dist/esm/scale-icon-content-interview.entry.js",230],"./scale-icon-content-key.entry.js":["../components/dist/esm/scale-icon-content-key.entry.js",231],"./scale-icon-content-language.entry.js":["../components/dist/esm/scale-icon-content-language.entry.js",232],"./scale-icon-content-lock.entry.js":["../components/dist/esm/scale-icon-content-lock.entry.js",233],"./scale-icon-content-loyalty.entry.js":["../components/dist/esm/scale-icon-content-loyalty.entry.js",234],"./scale-icon-content-media-folder.entry.js":["../components/dist/esm/scale-icon-content-media-folder.entry.js",235],"./scale-icon-content-money-at.entry.js":["../components/dist/esm/scale-icon-content-money-at.entry.js",236],"./scale-icon-content-music.entry.js":["../components/dist/esm/scale-icon-content-music.entry.js",237],"./scale-icon-content-news.entry.js":["../components/dist/esm/scale-icon-content-news.entry.js",238],"./scale-icon-content-out-of-stock.entry.js":["../components/dist/esm/scale-icon-content-out-of-stock.entry.js",239],"./scale-icon-content-person-walking.entry.js":["../components/dist/esm/scale-icon-content-person-walking.entry.js",240],"./scale-icon-content-prepaid-activate.entry.js":["../components/dist/esm/scale-icon-content-prepaid-activate.entry.js",241],"./scale-icon-content-price-tag.entry.js":["../components/dist/esm/scale-icon-content-price-tag.entry.js",242],"./scale-icon-content-ratings.entry.js":["../components/dist/esm/scale-icon-content-ratings.entry.js",243],"./scale-icon-content-route.entry.js":["../components/dist/esm/scale-icon-content-route.entry.js",244],"./scale-icon-content-rss.entry.js":["../components/dist/esm/scale-icon-content-rss.entry.js",245],"./scale-icon-content-shop.entry.js":["../components/dist/esm/scale-icon-content-shop.entry.js",246],"./scale-icon-content-signal.entry.js":["../components/dist/esm/scale-icon-content-signal.entry.js",247],"./scale-icon-content-sim-card.entry.js":["../components/dist/esm/scale-icon-content-sim-card.entry.js",248],"./scale-icon-content-smile.entry.js":["../components/dist/esm/scale-icon-content-smile.entry.js",249],"./scale-icon-content-sort-indicator-mini-down.entry.js":["../components/dist/esm/scale-icon-content-sort-indicator-mini-down.entry.js",250],"./scale-icon-content-sort-indicator-up-mini.entry.js":["../components/dist/esm/scale-icon-content-sort-indicator-up-mini.entry.js",251],"./scale-icon-content-status-inactive.entry.js":["../components/dist/esm/scale-icon-content-status-inactive.entry.js",252],"./scale-icon-content-status-recurring.entry.js":["../components/dist/esm/scale-icon-content-status-recurring.entry.js",253],"./scale-icon-content-stopwatch.entry.js":["../components/dist/esm/scale-icon-content-stopwatch.entry.js",254],"./scale-icon-content-support-chat.entry.js":["../components/dist/esm/scale-icon-content-support-chat.entry.js",255],"./scale-icon-content-sustainable.entry.js":["../components/dist/esm/scale-icon-content-sustainable.entry.js",256],"./scale-icon-content-tariffs.entry.js":["../components/dist/esm/scale-icon-content-tariffs.entry.js",257],"./scale-icon-content-threats.entry.js":["../components/dist/esm/scale-icon-content-threats.entry.js",258],"./scale-icon-content-todo-list.entry.js":["../components/dist/esm/scale-icon-content-todo-list.entry.js",259],"./scale-icon-content-transport.entry.js":["../components/dist/esm/scale-icon-content-transport.entry.js",260],"./scale-icon-content-unlock.entry.js":["../components/dist/esm/scale-icon-content-unlock.entry.js",261],"./scale-icon-content-voucher.entry.js":["../components/dist/esm/scale-icon-content-voucher.entry.js",262],"./scale-icon-content-waiting.entry.js":["../components/dist/esm/scale-icon-content-waiting.entry.js",263],"./scale-icon-content-wallet.entry.js":["../components/dist/esm/scale-icon-content-wallet.entry.js",264],"./scale-icon-device-add-device.entry.js":["../components/dist/esm/scale-icon-device-add-device.entry.js",265],"./scale-icon-device-camera.entry.js":["../components/dist/esm/scale-icon-device-camera.entry.js",266],"./scale-icon-device-change-camera.entry.js":["../components/dist/esm/scale-icon-device-change-camera.entry.js",267],"./scale-icon-device-computer.entry.js":["../components/dist/esm/scale-icon-device-computer.entry.js",268],"./scale-icon-device-device-controller.entry.js":["../components/dist/esm/scale-icon-device-device-controller.entry.js",269],"./scale-icon-device-device-ethernet.entry.js":["../components/dist/esm/scale-icon-device-device-ethernet.entry.js",270],"./scale-icon-device-device-mesh.entry.js":["../components/dist/esm/scale-icon-device-device-mesh.entry.js",271],"./scale-icon-device-device-phone.entry.js":["../components/dist/esm/scale-icon-device-device-phone.entry.js",272],"./scale-icon-device-device-router.entry.js":["../components/dist/esm/scale-icon-device-device-router.entry.js",273],"./scale-icon-device-device-tv.entry.js":["../components/dist/esm/scale-icon-device-device-tv.entry.js",274],"./scale-icon-device-device-watch.entry.js":["../components/dist/esm/scale-icon-device-device-watch.entry.js",275],"./scale-icon-device-dongle.entry.js":["../components/dist/esm/scale-icon-device-dongle.entry.js",276],"./scale-icon-device-fax.entry.js":["../components/dist/esm/scale-icon-device-fax.entry.js",277],"./scale-icon-device-fixed-line-services.entry.js":["../components/dist/esm/scale-icon-device-fixed-line-services.entry.js",278],"./scale-icon-device-game-controller.entry.js":["../components/dist/esm/scale-icon-device-game-controller.entry.js",279],"./scale-icon-device-media-receiver.entry.js":["../components/dist/esm/scale-icon-device-media-receiver.entry.js",280],"./scale-icon-device-mobile-data.entry.js":["../components/dist/esm/scale-icon-device-mobile-data.entry.js",281],"./scale-icon-device-mobile-devices-combination.entry.js":["../components/dist/esm/scale-icon-device-mobile-devices-combination.entry.js",282],"./scale-icon-device-mobile-equipment.entry.js":["../components/dist/esm/scale-icon-device-mobile-equipment.entry.js",283],"./scale-icon-device-mobile-phone-insurance.entry.js":["../components/dist/esm/scale-icon-device-mobile-phone-insurance.entry.js",284],"./scale-icon-device-mobile-services.entry.js":["../components/dist/esm/scale-icon-device-mobile-services.entry.js",285],"./scale-icon-device-no-camera.entry.js":["../components/dist/esm/scale-icon-device-no-camera.entry.js",286],"./scale-icon-device-phone-with-mobile-plan.entry.js":["../components/dist/esm/scale-icon-device-phone-with-mobile-plan.entry.js",287],"./scale-icon-device-phone-without-mobile-plan.entry.js":["../components/dist/esm/scale-icon-device-phone-without-mobile-plan.entry.js",288],"./scale-icon-device-photo-camera.entry.js":["../components/dist/esm/scale-icon-device-photo-camera.entry.js",289],"./scale-icon-device-remote-controller.entry.js":["../components/dist/esm/scale-icon-device-remote-controller.entry.js",290],"./scale-icon-device-replacement-mobilephone.entry.js":["../components/dist/esm/scale-icon-device-replacement-mobilephone.entry.js",291],"./scale-icon-device-screen-rotate.entry.js":["../components/dist/esm/scale-icon-device-screen-rotate.entry.js",292],"./scale-icon-device-server.entry.js":["../components/dist/esm/scale-icon-device-server.entry.js",293],"./scale-icon-device-smart-speaker.entry.js":["../components/dist/esm/scale-icon-device-smart-speaker.entry.js",294],"./scale-icon-device-tablet.entry.js":["../components/dist/esm/scale-icon-device-tablet.entry.js",295],"./scale-icon-device-tv-and-mobile.entry.js":["../components/dist/esm/scale-icon-device-tv-and-mobile.entry.js",296],"./scale-icon-device-twitching-closed-state.entry.js":["../components/dist/esm/scale-icon-device-twitching-closed-state.entry.js",297],"./scale-icon-device-twitching-open-state.entry.js":["../components/dist/esm/scale-icon-device-twitching-open-state.entry.js",298],"./scale-icon-home-home.entry.js":["../components/dist/esm/scale-icon-home-home.entry.js",299],"./scale-icon-home-internet-at-home.entry.js":["../components/dist/esm/scale-icon-home-internet-at-home.entry.js",300],"./scale-icon-home-iot.entry.js":["../components/dist/esm/scale-icon-home-iot.entry.js",301],"./scale-icon-home-light-bulb.entry.js":["../components/dist/esm/scale-icon-home-light-bulb.entry.js",302],"./scale-icon-home-network-secure.entry.js":["../components/dist/esm/scale-icon-home-network-secure.entry.js",303],"./scale-icon-home-no-wifi.entry.js":["../components/dist/esm/scale-icon-home-no-wifi.entry.js",304],"./scale-icon-home-power-socket.entry.js":["../components/dist/esm/scale-icon-home-power-socket.entry.js",305],"./scale-icon-home-preferred-wifi.entry.js":["../components/dist/esm/scale-icon-home-preferred-wifi.entry.js",306],"./scale-icon-home-reduced-wifi.entry.js":["../components/dist/esm/scale-icon-home-reduced-wifi.entry.js",307],"./scale-icon-home-slow-wifi.entry.js":["../components/dist/esm/scale-icon-home-slow-wifi.entry.js",308],"./scale-icon-home-smarthome.entry.js":["../components/dist/esm/scale-icon-home-smarthome.entry.js",309],"./scale-icon-home-unable-to-connect-to-router.entry.js":["../components/dist/esm/scale-icon-home-unable-to-connect-to-router.entry.js",310],"./scale-icon-home-wifi-connected.entry.js":["../components/dist/esm/scale-icon-home-wifi-connected.entry.js",311],"./scale-icon-home-wifi-connection-error.entry.js":["../components/dist/esm/scale-icon-home-wifi-connection-error.entry.js",312],"./scale-icon-home-wifi-manual-login.entry.js":["../components/dist/esm/scale-icon-home-wifi-manual-login.entry.js",313],"./scale-icon-home-wifi-no-wired-internet.entry.js":["../components/dist/esm/scale-icon-home-wifi-no-wired-internet.entry.js",314],"./scale-icon-home-wifi.entry.js":["../components/dist/esm/scale-icon-home-wifi.entry.js",315],"./scale-icon-navigation-circle-top-up.entry.js":["../components/dist/esm/scale-icon-navigation-circle-top-up.entry.js",316],"./scale-icon-navigation-collapse-down.entry.js":["../components/dist/esm/scale-icon-navigation-collapse-down.entry.js",317],"./scale-icon-navigation-collapse-up.entry.js":["../components/dist/esm/scale-icon-navigation-collapse-up.entry.js",318],"./scale-icon-navigation-double-left_2.entry.js":["../components/dist/esm/scale-icon-navigation-double-left_2.entry.js",319],"./scale-icon-navigation-external-link.entry.js":["../components/dist/esm/scale-icon-navigation-external-link.entry.js",320],"./scale-icon-navigation-internal-link.entry.js":["../components/dist/esm/scale-icon-navigation-internal-link.entry.js",321],"./scale-icon-navigation-left-condensed.entry.js":["../components/dist/esm/scale-icon-navigation-left-condensed.entry.js",322],"./scale-icon-navigation-left.entry.js":["../components/dist/esm/scale-icon-navigation-left.entry.js",323],"./scale-icon-navigation-location.entry.js":["../components/dist/esm/scale-icon-navigation-location.entry.js",324],"./scale-icon-navigation-map.entry.js":["../components/dist/esm/scale-icon-navigation-map.entry.js",325],"./scale-icon-navigation-my-location.entry.js":["../components/dist/esm/scale-icon-navigation-my-location.entry.js",326],"./scale-icon-navigation-right-condensed.entry.js":["../components/dist/esm/scale-icon-navigation-right-condensed.entry.js",327],"./scale-icon-navigation-right.entry.js":["../components/dist/esm/scale-icon-navigation-right.entry.js",328],"./scale-icon-navigation-start.entry.js":["../components/dist/esm/scale-icon-navigation-start.entry.js",329],"./scale-icon-navigation-top-up.entry.js":["../components/dist/esm/scale-icon-navigation-top-up.entry.js",330],"./scale-icon-process-order-status.entry.js":["../components/dist/esm/scale-icon-process-order-status.entry.js",331],"./scale-icon-process-processing.entry.js":["../components/dist/esm/scale-icon-process-processing.entry.js",332],"./scale-icon-process-sepa-transaction.entry.js":["../components/dist/esm/scale-icon-process-sepa-transaction.entry.js",333],"./scale-icon-service-devices-service.entry.js":["../components/dist/esm/scale-icon-service-devices-service.entry.js",334],"./scale-icon-service-maintanance.entry.js":["../components/dist/esm/scale-icon-service-maintanance.entry.js",335],"./scale-icon-service-manual.entry.js":["../components/dist/esm/scale-icon-service-manual.entry.js",336],"./scale-icon-service-one-time-password.entry.js":["../components/dist/esm/scale-icon-service-one-time-password.entry.js",337],"./scale-icon-service-services.entry.js":["../components/dist/esm/scale-icon-service-services.entry.js",338],"./scale-icon-service-support.entry.js":["../components/dist/esm/scale-icon-service-support.entry.js",339],"./scale-icon-service-vpn.entry.js":["../components/dist/esm/scale-icon-service-vpn.entry.js",340],"./scale-icon-t-product-2fa-telekom-app.entry.js":["../components/dist/esm/scale-icon-t-product-2fa-telekom-app.entry.js",341],"./scale-icon-t-product-magenta-cloud.entry.js":["../components/dist/esm/scale-icon-t-product-magenta-cloud.entry.js",342],"./scale-icon-t-product-magenta-tv.entry.js":["../components/dist/esm/scale-icon-t-product-magenta-tv.entry.js",343],"./scale-icon-t-product-magentaone.entry.js":["../components/dist/esm/scale-icon-t-product-magentaone.entry.js",344],"./scale-icon-t-product-measure-internet-speed.entry.js":["../components/dist/esm/scale-icon-t-product-measure-internet-speed.entry.js",345],"./scale-icon-t-product-seamless-connectivity.entry.js":["../components/dist/esm/scale-icon-t-product-seamless-connectivity.entry.js",346],"./scale-icon-t-product-telekom-1t1.entry.js":["../components/dist/esm/scale-icon-t-product-telekom-1t1.entry.js",347],"./scale-icon-t-product-telekom-plan.entry.js":["../components/dist/esm/scale-icon-t-product-telekom-plan.entry.js",348],"./scale-icon-t-product-telekom-shop-b.entry.js":["../components/dist/esm/scale-icon-t-product-telekom-shop-b.entry.js",349],"./scale-icon-t-product-usage.entry.js":["../components/dist/esm/scale-icon-t-product-usage.entry.js",350],"./scale-icon-t-product-voice.entry.js":["../components/dist/esm/scale-icon-t-product-voice.entry.js",351],"./scale-icon-user-file-admin.entry.js":["../components/dist/esm/scale-icon-user-file-admin.entry.js",352],"./scale-icon-user-file-analytics.entry.js":["../components/dist/esm/scale-icon-user-file-analytics.entry.js",353],"./scale-icon-user-file-attachment.entry.js":["../components/dist/esm/scale-icon-user-file-attachment.entry.js",354],"./scale-icon-user-file-audio-file.entry.js":["../components/dist/esm/scale-icon-user-file-audio-file.entry.js",355],"./scale-icon-user-file-billing.entry.js":["../components/dist/esm/scale-icon-user-file-billing.entry.js",356],"./scale-icon-user-file-boy.entry.js":["../components/dist/esm/scale-icon-user-file-boy.entry.js",357],"./scale-icon-user-file-bussines-users.entry.js":["../components/dist/esm/scale-icon-user-file-bussines-users.entry.js",358],"./scale-icon-user-file-communities.entry.js":["../components/dist/esm/scale-icon-user-file-communities.entry.js",359],"./scale-icon-user-file-contacts-from-cloud.entry.js":["../components/dist/esm/scale-icon-user-file-contacts-from-cloud.entry.js",360],"./scale-icon-user-file-contacts.entry.js":["../components/dist/esm/scale-icon-user-file-contacts.entry.js",361],"./scale-icon-user-file-contracts.entry.js":["../components/dist/esm/scale-icon-user-file-contracts.entry.js",362],"./scale-icon-user-file-draft-file.entry.js":["../components/dist/esm/scale-icon-user-file-draft-file.entry.js",363],"./scale-icon-user-file-families.entry.js":["../components/dist/esm/scale-icon-user-file-families.entry.js",364],"./scale-icon-user-file-family.entry.js":["../components/dist/esm/scale-icon-user-file-family.entry.js",365],"./scale-icon-user-file-file-collection.entry.js":["../components/dist/esm/scale-icon-user-file-file-collection.entry.js",366],"./scale-icon-user-file-file.entry.js":["../components/dist/esm/scale-icon-user-file-file.entry.js",367],"./scale-icon-user-file-girl.entry.js":["../components/dist/esm/scale-icon-user-file-girl.entry.js",368],"./scale-icon-user-file-handshake.entry.js":["../components/dist/esm/scale-icon-user-file-handshake.entry.js",369],"./scale-icon-user-file-html-file.entry.js":["../components/dist/esm/scale-icon-user-file-html-file.entry.js",370],"./scale-icon-user-file-id-card.entry.js":["../components/dist/esm/scale-icon-user-file-id-card.entry.js",371],"./scale-icon-user-file-image-file.entry.js":["../components/dist/esm/scale-icon-user-file-image-file.entry.js",372],"./scale-icon-user-file-logout.entry.js":["../components/dist/esm/scale-icon-user-file-logout.entry.js",373],"./scale-icon-user-file-man.entry.js":["../components/dist/esm/scale-icon-user-file-man.entry.js",374],"./scale-icon-user-file-pdf-file.entry.js":["../components/dist/esm/scale-icon-user-file-pdf-file.entry.js",375],"./scale-icon-user-file-switch-users.entry.js":["../components/dist/esm/scale-icon-user-file-switch-users.entry.js",376],"./scale-icon-user-file-videos.entry.js":["../components/dist/esm/scale-icon-user-file-videos.entry.js",377],"./scale-icon-user-file-woman.entry.js":["../components/dist/esm/scale-icon-user-file-woman.entry.js",378],"./scale-icon-weather-cloudy-rain.entry.js":["../components/dist/esm/scale-icon-weather-cloudy-rain.entry.js",379],"./scale-icon-weather-cloudy-sleet.entry.js":["../components/dist/esm/scale-icon-weather-cloudy-sleet.entry.js",380],"./scale-icon-weather-cloudy-snow.entry.js":["../components/dist/esm/scale-icon-weather-cloudy-snow.entry.js",381],"./scale-icon-weather-cloudy-thunder-rain.entry.js":["../components/dist/esm/scale-icon-weather-cloudy-thunder-rain.entry.js",382],"./scale-icon-weather-cloudy-thunder-snow.entry.js":["../components/dist/esm/scale-icon-weather-cloudy-thunder-snow.entry.js",383],"./scale-icon-weather-cloudy.entry.js":["../components/dist/esm/scale-icon-weather-cloudy.entry.js",384],"./scale-icon-weather-heavy-sleet.entry.js":["../components/dist/esm/scale-icon-weather-heavy-sleet.entry.js",385],"./scale-icon-weather-heavy-snow.entry.js":["../components/dist/esm/scale-icon-weather-heavy-snow.entry.js",386],"./scale-icon-weather-moon-clear.entry.js":["../components/dist/esm/scale-icon-weather-moon-clear.entry.js",387],"./scale-icon-weather-moon-cloudy-a.entry.js":["../components/dist/esm/scale-icon-weather-moon-cloudy-a.entry.js",388],"./scale-icon-weather-moon-cloudy-b.entry.js":["../components/dist/esm/scale-icon-weather-moon-cloudy-b.entry.js",389],"./scale-icon-weather-moon-rain.entry.js":["../components/dist/esm/scale-icon-weather-moon-rain.entry.js",390],"./scale-icon-weather-moon-sleet.entry.js":["../components/dist/esm/scale-icon-weather-moon-sleet.entry.js",391],"./scale-icon-weather-moon-snow.entry.js":["../components/dist/esm/scale-icon-weather-moon-snow.entry.js",392],"./scale-icon-weather-moon-thunder-rain.entry.js":["../components/dist/esm/scale-icon-weather-moon-thunder-rain.entry.js",393],"./scale-icon-weather-moon-thunder-snow.entry.js":["../components/dist/esm/scale-icon-weather-moon-thunder-snow.entry.js",394],"./scale-icon-weather-overcast.entry.js":["../components/dist/esm/scale-icon-weather-overcast.entry.js",395],"./scale-icon-weather-rain.entry.js":["../components/dist/esm/scale-icon-weather-rain.entry.js",396],"./scale-icon-weather-sunny.entry.js":["../components/dist/esm/scale-icon-weather-sunny.entry.js",397],"./scale-icon-weather-thunder-rain.entry.js":["../components/dist/esm/scale-icon-weather-thunder-rain.entry.js",398],"./scale-icon-weather-thunder-snow.entry.js":["../components/dist/esm/scale-icon-weather-thunder-snow.entry.js",399],"./scale-icon.entry.js":["../components/dist/esm/scale-icon.entry.js",50],"./scale-input.entry.js":["../components/dist/esm/scale-input.entry.js",10],"./scale-link.entry.js":["../components/dist/esm/scale-link.entry.js",400],"./scale-list-item.entry.js":["../components/dist/esm/scale-list-item.entry.js",51],"./scale-list.entry.js":["../components/dist/esm/scale-list.entry.js",52],"./scale-loading-spinner.entry.js":["../components/dist/esm/scale-loading-spinner.entry.js",53],"./scale-logo_2.entry.js":["../components/dist/esm/scale-logo_2.entry.js",36],"./scale-menu-flyout-divider.entry.js":["../components/dist/esm/scale-menu-flyout-divider.entry.js",54],"./scale-modal.entry.js":["../components/dist/esm/scale-modal.entry.js",37],"./scale-notification-banner.entry.js":["../components/dist/esm/scale-notification-banner.entry.js",15],"./scale-notification-message.entry.js":["../components/dist/esm/scale-notification-message.entry.js",16],"./scale-notification-toast.entry.js":["../components/dist/esm/scale-notification-toast.entry.js",17],"./scale-notification.entry.js":["../components/dist/esm/scale-notification.entry.js",38],"./scale-radio-button-group.entry.js":["../components/dist/esm/scale-radio-button-group.entry.js",18],"./scale-radio-button.entry.js":["../components/dist/esm/scale-radio-button.entry.js",19],"./scale-rating-stars.entry.js":["../components/dist/esm/scale-rating-stars.entry.js",43],"./scale-segment.entry.js":["../components/dist/esm/scale-segment.entry.js",11],"./scale-segmented-button.entry.js":["../components/dist/esm/scale-segmented-button.entry.js",39],"./scale-sidebar-nav-collapsible.entry.js":["../components/dist/esm/scale-sidebar-nav-collapsible.entry.js",55],"./scale-sidebar-nav-item.entry.js":["../components/dist/esm/scale-sidebar-nav-item.entry.js",56],"./scale-sidebar-nav.entry.js":["../components/dist/esm/scale-sidebar-nav.entry.js",40],"./scale-slider.entry.js":["../components/dist/esm/scale-slider.entry.js",20],"./scale-ssr-slot-fix.entry.js":["../components/dist/esm/scale-ssr-slot-fix.entry.js",401],"./scale-tab-header.entry.js":["../components/dist/esm/scale-tab-header.entry.js",21],"./scale-tab-nav.entry.js":["../components/dist/esm/scale-tab-nav.entry.js",41],"./scale-tab-panel.entry.js":["../components/dist/esm/scale-tab-panel.entry.js",61],"./scale-table.entry.js":["../components/dist/esm/scale-table.entry.js",22],"./scale-telekom-app-shell.entry.js":["../components/dist/esm/scale-telekom-app-shell.entry.js",402],"./scale-telekom-footer-data-back-compat.entry.js":["../components/dist/esm/scale-telekom-footer-data-back-compat.entry.js",403],"./scale-telekom-footer-extended-navigation-column.entry.js":["../components/dist/esm/scale-telekom-footer-extended-navigation-column.entry.js",57],"./scale-telekom-footer-extended-navigation.entry.js":["../components/dist/esm/scale-telekom-footer-extended-navigation.entry.js",404],"./scale-telekom-footer_2.entry.js":["../components/dist/esm/scale-telekom-footer_2.entry.js",58],"./scale-telekom-header-data-back-compat.entry.js":["../components/dist/esm/scale-telekom-header-data-back-compat.entry.js",12],"./scale-textarea.entry.js":["../components/dist/esm/scale-textarea.entry.js",23],"./scale-toast.entry.js":["../components/dist/esm/scale-toast.entry.js",6],"./scale-toggle-button.entry.js":["../components/dist/esm/scale-toggle-button.entry.js",24],"./scale-toggle-group.entry.js":["../components/dist/esm/scale-toggle-group.entry.js",25],"./scale-tooltip.entry.js":["../components/dist/esm/scale-tooltip.entry.js",0,405]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((function(){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((function(){return __webpack_require__(id)}))}webpackAsyncContext.keys=function webpackAsyncContextKeys(){return Object.keys(map)},webpackAsyncContext.id="../components/dist/esm lazy recursive ^\\.\\/.*\\.entry\\.js$ include: \\.entry\\.js$ exclude: \\.system\\.entry\\.js$",module.exports=webpackAsyncContext},"../components/dist/esm/index-6d95a4bc.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Fragment})),__webpack_require__.d(__webpack_exports__,"b",(function(){return NAMESPACE})),__webpack_require__.d(__webpack_exports__,"c",(function(){return Host})),__webpack_require__.d(__webpack_exports__,"d",(function(){return bootstrapLazy})),__webpack_require__.d(__webpack_exports__,"e",(function(){return createEvent})),__webpack_require__.d(__webpack_exports__,"f",(function(){return getElement})),__webpack_require__.d(__webpack_exports__,"g",(function(){return h})),__webpack_require__.d(__webpack_exports__,"h",(function(){return promiseResolve})),__webpack_require__.d(__webpack_exports__,"i",(function(){return registerInstance}));__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.weak-map.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.set.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.trim.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.some.js"),__webpack_require__("../../node_modules/core-js/modules/es.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.parse-float.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.is-nan.js"),__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.entries.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.every.js"),__webpack_require__("../../node_modules/core-js/modules/web.url.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js");function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&_setPrototypeOf(subClass,superClass)}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){return!call||"object"!=typeof call&&"function"!=typeof call?_assertThisInitialized(self):call}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _wrapNativeSuper(Class){var _cache="function"==typeof Map?new Map:void 0;return _wrapNativeSuper=function _wrapNativeSuper(Class){if(null===Class||!function _isNativeFunction(fn){return-1!==Function.toString.call(fn).indexOf("[native code]")}(Class))return Class;if("function"!=typeof Class)throw new TypeError("Super expression must either be null or a function");if(void 0!==_cache){if(_cache.has(Class))return _cache.get(Class);_cache.set(Class,Wrapper)}function Wrapper(){return _construct(Class,arguments,_getPrototypeOf(this).constructor)}return Wrapper.prototype=Object.create(Class.prototype,{constructor:{value:Wrapper,enumerable:!1,writable:!0,configurable:!0}}),_setPrototypeOf(Wrapper,Class)},_wrapNativeSuper(Class)}function _construct(Parent,args,Class){return _construct=_isNativeReflectConstruct()?Reflect.construct:function _construct(Parent,args,Class){var a=[null];a.push.apply(a,args);var instance=new(Function.bind.apply(Parent,a));return Class&&_setPrototypeOf(instance,Class.prototype),instance},_construct.apply(null,arguments)}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||_unsupportedIterableToArray(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var scopeId,contentRef,hostTagName,NAMESPACE="scale-components",useNativeShadowDom=!1,checkSlotFallbackVisibility=!1,checkSlotRelocate=!1,isSvgMode=!1,queuePending=!1,win="undefined"!=typeof window?window:{},doc=win.document||{head:{}},plt=(win.HTMLElement,{$flags$:0,$resourcesUrl$:"",jmp:function jmp(h){return h()},raf:function raf(h){return requestAnimationFrame(h)},ael:function ael(el,eventName,listener,opts){return el.addEventListener(eventName,listener,opts)},rel:function rel(el,eventName,listener,opts){return el.removeEventListener(eventName,listener,opts)},ce:function ce(eventName,opts){return new CustomEvent(eventName,opts)}}),promiseResolve=function promiseResolve(v){return Promise.resolve(v)},supportsConstructibleStylesheets=function(){try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1}(),addHostEventListeners=function addHostEventListeners(elm,hostRef,listeners,attachParentListeners){listeners&&listeners.map((function(_ref){var _ref2=_slicedToArray(_ref,3),flags=_ref2[0],name=_ref2[1],method=_ref2[2],target=getHostListenerTarget(elm,flags),handler=hostListenerProxy(hostRef,method),opts=hostListenerOpts(flags);plt.ael(target,name,handler,opts),(hostRef.$rmListeners$=hostRef.$rmListeners$||[]).push((function(){return plt.rel(target,name,handler,opts)}))}))},hostListenerProxy=function hostListenerProxy(hostRef,methodName){return function(ev){try{256&hostRef.$flags$?hostRef.$lazyInstance$[methodName](ev):(hostRef.$queuedListeners$=hostRef.$queuedListeners$||[]).push([methodName,ev])}catch(e){consoleError(e)}}},getHostListenerTarget=function getHostListenerTarget(elm,flags){return 4&flags?doc:8&flags?win:elm},hostListenerOpts=function hostListenerOpts(flags){return 0!=(2&flags)},HYDRATED_CSS="{visibility:hidden}.hydrated{visibility:inherit}",XLINK_NS="http://www.w3.org/1999/xlink",rootAppliedStyles=new WeakMap,registerStyle=function registerStyle(scopeId,cssText,allowCS){var style=styles.get(scopeId);supportsConstructibleStylesheets&&allowCS?(style=style||new CSSStyleSheet).replace(cssText):style=cssText,styles.set(scopeId,style)},addStyle=function addStyle(styleContainerNode,cmpMeta,mode,hostElm){var scopeId=getScopeId(cmpMeta),style=styles.get(scopeId);if(styleContainerNode=11===styleContainerNode.nodeType?styleContainerNode:doc,style)if("string"==typeof style){styleContainerNode=styleContainerNode.head||styleContainerNode;var styleElm,appliedStyles=rootAppliedStyles.get(styleContainerNode);appliedStyles||rootAppliedStyles.set(styleContainerNode,appliedStyles=new Set),appliedStyles.has(scopeId)||(styleContainerNode.host&&(styleElm=styleContainerNode.querySelector('[sty-id="'+scopeId+'"]'))?styleElm.innerHTML=style:((styleElm=doc.createElement("style")).innerHTML=style,styleContainerNode.insertBefore(styleElm,styleContainerNode.querySelector("link"))),appliedStyles&&appliedStyles.add(scopeId))}else styleContainerNode.adoptedStyleSheets.includes(style)||(styleContainerNode.adoptedStyleSheets=[].concat(_toConsumableArray(styleContainerNode.adoptedStyleSheets),[style]));return scopeId},attachStyles=function attachStyles(hostRef){var cmpMeta=hostRef.$cmpMeta$,elm=hostRef.$hostElement$,flags=cmpMeta.$flags$,endAttachStyles=(cmpMeta.$tagName$,function(){}),scopeId=addStyle(elm.shadowRoot?elm.shadowRoot:elm.getRootNode(),cmpMeta);10&flags&&(elm["s-sc"]=scopeId,elm.classList.add(scopeId+"-h")),endAttachStyles()},getScopeId=function getScopeId(cmp,mode){return"sc-"+cmp.$tagName$},convertScopedToShadow=function convertScopedToShadow(css){return css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g,"$1{")},EMPTY_OBJ={},isComplexType=function isComplexType(o){return"object"===(o=typeof o)||"function"===o},h=function h(nodeName,vnodeData){for(var child=null,key=null,slotName=null,simple=!1,lastSimple=!1,vNodeChildren=[],walk=function walk(c){for(var i=0;i<c.length;i++)child=c[i],Array.isArray(child)?walk(child):null!=child&&"boolean"!=typeof child&&((simple="function"!=typeof nodeName&&!isComplexType(child))&&(child=String(child)),simple&&lastSimple?vNodeChildren[vNodeChildren.length-1].$text$+=child:vNodeChildren.push(simple?newVNode(null,child):child),lastSimple=simple)},_len=arguments.length,children=new Array(_len>2?_len-2:0),_key=2;_key<_len;_key++)children[_key-2]=arguments[_key];if(walk(children),vnodeData){vnodeData.key&&(key=vnodeData.key),vnodeData.name&&(slotName=vnodeData.name);var classData=vnodeData.className||vnodeData.class;classData&&(vnodeData.class="object"!=typeof classData?classData:Object.keys(classData).filter((function(k){return classData[k]})).join(" "))}if("function"==typeof nodeName)return nodeName(null===vnodeData?{}:vnodeData,vNodeChildren,vdomFnUtils);var vnode=newVNode(nodeName,null);return vnode.$attrs$=vnodeData,vNodeChildren.length>0&&(vnode.$children$=vNodeChildren),vnode.$key$=key,vnode.$name$=slotName,vnode},newVNode=function newVNode(tag,text){var vnode={$flags$:0,$tag$:tag,$text$:text,$elm$:null,$children$:null,$attrs$:null,$key$:null,$name$:null};return vnode},Host={},vdomFnUtils={forEach:function forEach(children,cb){return children.map(convertToPublic).forEach(cb)},map:function map(children,cb){return children.map(convertToPublic).map(cb).map(convertToPrivate)}},convertToPublic=function convertToPublic(node){return{vattrs:node.$attrs$,vchildren:node.$children$,vkey:node.$key$,vname:node.$name$,vtag:node.$tag$,vtext:node.$text$}},convertToPrivate=function convertToPrivate(node){if("function"==typeof node.vtag){var vnodeData=Object.assign({},node.vattrs);return node.vkey&&(vnodeData.key=node.vkey),node.vname&&(vnodeData.name=node.vname),h.apply(void 0,[node.vtag,vnodeData].concat(_toConsumableArray(node.vchildren||[])))}var vnode=newVNode(node.vtag,node.vtext);return vnode.$attrs$=node.vattrs,vnode.$children$=node.vchildren,vnode.$key$=node.vkey,vnode.$name$=node.vname,vnode},setAccessor=function setAccessor(elm,memberName,oldValue,newValue,isSvg,flags){if(oldValue!==newValue){var isProp=isMemberInElement(elm,memberName),ln=memberName.toLowerCase();if("class"===memberName){var classList=elm.classList,oldClasses=parseClassList(oldValue),newClasses=parseClassList(newValue);classList.remove.apply(classList,_toConsumableArray(oldClasses.filter((function(c){return c&&!newClasses.includes(c)})))),classList.add.apply(classList,_toConsumableArray(newClasses.filter((function(c){return c&&!oldClasses.includes(c)}))))}else if("style"===memberName){for(var prop in oldValue)newValue&&null!=newValue[prop]||(prop.includes("-")?elm.style.removeProperty(prop):elm.style[prop]="");for(var _prop in newValue)oldValue&&newValue[_prop]===oldValue[_prop]||(_prop.includes("-")?elm.style.setProperty(_prop,newValue[_prop]):elm.style[_prop]=newValue[_prop])}else if("key"===memberName);else if("ref"===memberName)newValue&&newValue(elm);else if(isProp||"o"!==memberName[0]||"n"!==memberName[1]){var isComplex=isComplexType(newValue);if((isProp||isComplex&&null!==newValue)&&!isSvg)try{if(elm.tagName.includes("-"))elm[memberName]=newValue;else{var n=null==newValue?"":newValue;"list"===memberName?isProp=!1:null!=oldValue&&elm[memberName]==n||(elm[memberName]=n)}}catch(e){}var xlink=!1;ln!==(ln=ln.replace(/^xlink\:?/,""))&&(memberName=ln,xlink=!0),null==newValue||!1===newValue?!1===newValue&&""!==elm.getAttribute(memberName)||(xlink?elm.removeAttributeNS(XLINK_NS,memberName):elm.removeAttribute(memberName)):(!isProp||4&flags||isSvg)&&!isComplex&&(newValue=!0===newValue?"":newValue,xlink?elm.setAttributeNS(XLINK_NS,memberName,newValue):elm.setAttribute(memberName,newValue))}else memberName="-"===memberName[2]?memberName.slice(3):isMemberInElement(win,ln)?ln.slice(2):ln[2]+memberName.slice(3),oldValue&&plt.rel(elm,memberName,oldValue,!1),newValue&&plt.ael(elm,memberName,newValue,!1)}},parseClassListRegex=/\s/,parseClassList=function parseClassList(value){return value?value.split(parseClassListRegex):[]},updateElement=function updateElement(oldVnode,newVnode,isSvgMode,memberName){var elm=11===newVnode.$elm$.nodeType&&newVnode.$elm$.host?newVnode.$elm$.host:newVnode.$elm$,oldVnodeAttrs=oldVnode&&oldVnode.$attrs$||EMPTY_OBJ,newVnodeAttrs=newVnode.$attrs$||EMPTY_OBJ;for(memberName in oldVnodeAttrs)memberName in newVnodeAttrs||setAccessor(elm,memberName,oldVnodeAttrs[memberName],void 0,isSvgMode,newVnode.$flags$);for(memberName in newVnodeAttrs)setAccessor(elm,memberName,oldVnodeAttrs[memberName],newVnodeAttrs[memberName],isSvgMode,newVnode.$flags$)},createElm=function createElm(oldParentVNode,newParentVNode,childIndex,parentElm){var elm,childNode,oldVNode,newVNode=newParentVNode.$children$[childIndex],i=0;if(useNativeShadowDom||(checkSlotRelocate=!0,"slot"===newVNode.$tag$&&(scopeId&&parentElm.classList.add(scopeId+"-s"),newVNode.$flags$|=newVNode.$children$?2:1)),null!==newVNode.$text$)elm=newVNode.$elm$=doc.createTextNode(newVNode.$text$);else if(1&newVNode.$flags$)elm=newVNode.$elm$=doc.createTextNode("");else{if(isSvgMode||(isSvgMode="svg"===newVNode.$tag$),elm=newVNode.$elm$=doc.createElementNS(isSvgMode?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",2&newVNode.$flags$?"slot-fb":newVNode.$tag$),isSvgMode&&"foreignObject"===newVNode.$tag$&&(isSvgMode=!1),updateElement(null,newVNode,isSvgMode),function isDef(v){return null!=v}(scopeId)&&elm["s-si"]!==scopeId&&elm.classList.add(elm["s-si"]=scopeId),newVNode.$children$)for(i=0;i<newVNode.$children$.length;++i)(childNode=createElm(oldParentVNode,newVNode,i,elm))&&elm.appendChild(childNode);"svg"===newVNode.$tag$?isSvgMode=!1:"foreignObject"===elm.tagName&&(isSvgMode=!0)}return elm["s-hn"]=hostTagName,3&newVNode.$flags$&&(elm["s-sr"]=!0,elm["s-cr"]=contentRef,elm["s-sn"]=newVNode.$name$||"",(oldVNode=oldParentVNode&&oldParentVNode.$children$&&oldParentVNode.$children$[childIndex])&&oldVNode.$tag$===newVNode.$tag$&&oldParentVNode.$elm$&&putBackInOriginalLocation(oldParentVNode.$elm$,!1)),elm},putBackInOriginalLocation=function putBackInOriginalLocation(parentElm,recursive){plt.$flags$|=1;for(var oldSlotChildNodes=parentElm.childNodes,i=oldSlotChildNodes.length-1;i>=0;i--){var childNode=oldSlotChildNodes[i];childNode["s-hn"]!==hostTagName&&childNode["s-ol"]&&(parentReferenceNode(childNode).insertBefore(childNode,referenceNode(childNode)),childNode["s-ol"].remove(),childNode["s-ol"]=void 0,checkSlotRelocate=!0),recursive&&putBackInOriginalLocation(childNode,recursive)}plt.$flags$&=-2},addVnodes=function addVnodes(parentElm,before,parentVNode,vnodes,startIdx,endIdx){var childNode,containerElm=parentElm["s-cr"]&&parentElm["s-cr"].parentNode||parentElm;for(containerElm.shadowRoot&&containerElm.tagName===hostTagName&&(containerElm=containerElm.shadowRoot);startIdx<=endIdx;++startIdx)vnodes[startIdx]&&(childNode=createElm(null,parentVNode,startIdx,parentElm))&&(vnodes[startIdx].$elm$=childNode,containerElm.insertBefore(childNode,referenceNode(before)))},removeVnodes=function removeVnodes(vnodes,startIdx,endIdx,vnode,elm){for(;startIdx<=endIdx;++startIdx)(vnode=vnodes[startIdx])&&(elm=vnode.$elm$,callNodeRefs(vnode),checkSlotFallbackVisibility=!0,elm["s-ol"]?elm["s-ol"].remove():putBackInOriginalLocation(elm,!0),elm.remove())},updateChildren=function updateChildren(parentElm,oldCh,newVNode,newCh){for(var node,elmToMove,oldStartIdx=0,newStartIdx=0,idxInOld=0,i=0,oldEndIdx=oldCh.length-1,oldStartVnode=oldCh[0],oldEndVnode=oldCh[oldEndIdx],newEndIdx=newCh.length-1,newStartVnode=newCh[0],newEndVnode=newCh[newEndIdx];oldStartIdx<=oldEndIdx&&newStartIdx<=newEndIdx;)if(null==oldStartVnode)oldStartVnode=oldCh[++oldStartIdx];else if(null==oldEndVnode)oldEndVnode=oldCh[--oldEndIdx];else if(null==newStartVnode)newStartVnode=newCh[++newStartIdx];else if(null==newEndVnode)newEndVnode=newCh[--newEndIdx];else if(isSameVnode(oldStartVnode,newStartVnode))patch(oldStartVnode,newStartVnode),oldStartVnode=oldCh[++oldStartIdx],newStartVnode=newCh[++newStartIdx];else if(isSameVnode(oldEndVnode,newEndVnode))patch(oldEndVnode,newEndVnode),oldEndVnode=oldCh[--oldEndIdx],newEndVnode=newCh[--newEndIdx];else if(isSameVnode(oldStartVnode,newEndVnode))"slot"!==oldStartVnode.$tag$&&"slot"!==newEndVnode.$tag$||putBackInOriginalLocation(oldStartVnode.$elm$.parentNode,!1),patch(oldStartVnode,newEndVnode),parentElm.insertBefore(oldStartVnode.$elm$,oldEndVnode.$elm$.nextSibling),oldStartVnode=oldCh[++oldStartIdx],newEndVnode=newCh[--newEndIdx];else if(isSameVnode(oldEndVnode,newStartVnode))"slot"!==oldStartVnode.$tag$&&"slot"!==newEndVnode.$tag$||putBackInOriginalLocation(oldEndVnode.$elm$.parentNode,!1),patch(oldEndVnode,newStartVnode),parentElm.insertBefore(oldEndVnode.$elm$,oldStartVnode.$elm$),oldEndVnode=oldCh[--oldEndIdx],newStartVnode=newCh[++newStartIdx];else{for(idxInOld=-1,i=oldStartIdx;i<=oldEndIdx;++i)if(oldCh[i]&&null!==oldCh[i].$key$&&oldCh[i].$key$===newStartVnode.$key$){idxInOld=i;break}idxInOld>=0?((elmToMove=oldCh[idxInOld]).$tag$!==newStartVnode.$tag$?node=createElm(oldCh&&oldCh[newStartIdx],newVNode,idxInOld,parentElm):(patch(elmToMove,newStartVnode),oldCh[idxInOld]=void 0,node=elmToMove.$elm$),newStartVnode=newCh[++newStartIdx]):(node=createElm(oldCh&&oldCh[newStartIdx],newVNode,newStartIdx,parentElm),newStartVnode=newCh[++newStartIdx]),node&&parentReferenceNode(oldStartVnode.$elm$).insertBefore(node,referenceNode(oldStartVnode.$elm$))}oldStartIdx>oldEndIdx?addVnodes(parentElm,null==newCh[newEndIdx+1]?null:newCh[newEndIdx+1].$elm$,newVNode,newCh,newStartIdx,newEndIdx):newStartIdx>newEndIdx&&removeVnodes(oldCh,oldStartIdx,oldEndIdx)},isSameVnode=function isSameVnode(vnode1,vnode2){return vnode1.$tag$===vnode2.$tag$&&("slot"===vnode1.$tag$?vnode1.$name$===vnode2.$name$:vnode1.$key$===vnode2.$key$)},referenceNode=function referenceNode(node){return node&&node["s-ol"]||node},parentReferenceNode=function parentReferenceNode(node){return(node["s-ol"]?node["s-ol"]:node).parentNode},patch=function patch(oldVNode,newVNode){var defaultHolder,elm=newVNode.$elm$=oldVNode.$elm$,oldChildren=oldVNode.$children$,newChildren=newVNode.$children$,tag=newVNode.$tag$,text=newVNode.$text$;null===text?(isSvgMode="svg"===tag||"foreignObject"!==tag&&isSvgMode,"slot"===tag||updateElement(oldVNode,newVNode,isSvgMode),null!==oldChildren&&null!==newChildren?updateChildren(elm,oldChildren,newVNode,newChildren):null!==newChildren?(null!==oldVNode.$text$&&(elm.textContent=""),addVnodes(elm,null,newVNode,newChildren,0,newChildren.length-1)):null!==oldChildren&&removeVnodes(oldChildren,0,oldChildren.length-1),isSvgMode&&"svg"===tag&&(isSvgMode=!1)):(defaultHolder=elm["s-cr"])?defaultHolder.parentNode.textContent=text:oldVNode.$text$!==text&&(elm.data=text)},updateFallbackSlotVisibility=function updateFallbackSlotVisibility(elm){var childNode,i,ilen,j,slotNameAttr,nodeType,childNodes=elm.childNodes;for(i=0,ilen=childNodes.length;i<ilen;i++)if(1===(childNode=childNodes[i]).nodeType){if(childNode["s-sr"])for(slotNameAttr=childNode["s-sn"],childNode.hidden=!1,j=0;j<ilen;j++)if(nodeType=childNodes[j].nodeType,childNodes[j]["s-hn"]!==childNode["s-hn"]||""!==slotNameAttr){if(1===nodeType&&slotNameAttr===childNodes[j].getAttribute("slot")){childNode.hidden=!0;break}}else if(1===nodeType||3===nodeType&&""!==childNodes[j].textContent.trim()){childNode.hidden=!0;break}updateFallbackSlotVisibility(childNode)}},relocateNodes=[],relocateSlotContent=function relocateSlotContent(elm){for(var childNode,node,hostContentNodes,slotNameAttr,relocateNodeData,j,i=0,childNodes=elm.childNodes,ilen=childNodes.length;i<ilen;i++){if((childNode=childNodes[i])["s-sr"]&&(node=childNode["s-cr"])&&node.parentNode)for(hostContentNodes=node.parentNode.childNodes,slotNameAttr=childNode["s-sn"],j=hostContentNodes.length-1;j>=0;j--)(node=hostContentNodes[j])["s-cn"]||node["s-nr"]||node["s-hn"]===childNode["s-hn"]||(isNodeLocatedInSlot(node,slotNameAttr)?(relocateNodeData=relocateNodes.find((function(r){return r.$nodeToRelocate$===node})),checkSlotFallbackVisibility=!0,node["s-sn"]=node["s-sn"]||slotNameAttr,relocateNodeData?relocateNodeData.$slotRefNode$=childNode:relocateNodes.push({$slotRefNode$:childNode,$nodeToRelocate$:node}),node["s-sr"]&&relocateNodes.map((function(relocateNode){isNodeLocatedInSlot(relocateNode.$nodeToRelocate$,node["s-sn"])&&(relocateNodeData=relocateNodes.find((function(r){return r.$nodeToRelocate$===node})))&&!relocateNode.$slotRefNode$&&(relocateNode.$slotRefNode$=relocateNodeData.$slotRefNode$)}))):relocateNodes.some((function(r){return r.$nodeToRelocate$===node}))||relocateNodes.push({$nodeToRelocate$:node}));1===childNode.nodeType&&relocateSlotContent(childNode)}},isNodeLocatedInSlot=function isNodeLocatedInSlot(nodeToRelocate,slotNameAttr){return 1===nodeToRelocate.nodeType?null===nodeToRelocate.getAttribute("slot")&&""===slotNameAttr||nodeToRelocate.getAttribute("slot")===slotNameAttr:nodeToRelocate["s-sn"]===slotNameAttr||""===slotNameAttr},callNodeRefs=function callNodeRefs(vNode){vNode.$attrs$&&vNode.$attrs$.ref&&vNode.$attrs$.ref(null),vNode.$children$&&vNode.$children$.map(callNodeRefs)},renderVdom=function renderVdom(hostRef,renderFnResults){var hostElm=hostRef.$hostElement$,cmpMeta=hostRef.$cmpMeta$,oldVNode=hostRef.$vnode$||newVNode(null,null),rootVnode=function isHost(node){return node&&node.$tag$===Host}(renderFnResults)?renderFnResults:h(null,null,renderFnResults);if(hostTagName=hostElm.tagName,cmpMeta.$attrsToReflect$&&(rootVnode.$attrs$=rootVnode.$attrs$||{},cmpMeta.$attrsToReflect$.map((function(_ref3){var _ref4=_slicedToArray(_ref3,2),propName=_ref4[0],attribute=_ref4[1];return rootVnode.$attrs$[attribute]=hostElm[propName]}))),rootVnode.$tag$=null,rootVnode.$flags$|=4,hostRef.$vnode$=rootVnode,rootVnode.$elm$=oldVNode.$elm$=hostElm.shadowRoot||hostElm,scopeId=hostElm["s-sc"],contentRef=hostElm["s-cr"],useNativeShadowDom=0!=(1&cmpMeta.$flags$),checkSlotFallbackVisibility=!1,patch(oldVNode,rootVnode),plt.$flags$|=1,checkSlotRelocate){var relocateData,nodeToRelocate,orgLocationNode,parentNodeRef,insertBeforeNode,refNode;relocateSlotContent(rootVnode.$elm$);for(var i=0;i<relocateNodes.length;i++)(nodeToRelocate=(relocateData=relocateNodes[i]).$nodeToRelocate$)["s-ol"]||((orgLocationNode=doc.createTextNode(""))["s-nr"]=nodeToRelocate,nodeToRelocate.parentNode.insertBefore(nodeToRelocate["s-ol"]=orgLocationNode,nodeToRelocate));for(i=0;i<relocateNodes.length;i++)if(nodeToRelocate=(relocateData=relocateNodes[i]).$nodeToRelocate$,relocateData.$slotRefNode$){for(parentNodeRef=relocateData.$slotRefNode$.parentNode,insertBeforeNode=relocateData.$slotRefNode$.nextSibling,orgLocationNode=nodeToRelocate["s-ol"];orgLocationNode=orgLocationNode.previousSibling;)if((refNode=orgLocationNode["s-nr"])&&refNode["s-sn"]===nodeToRelocate["s-sn"]&&parentNodeRef===refNode.parentNode&&(!(refNode=refNode.nextSibling)||!refNode["s-nr"])){insertBeforeNode=refNode;break}(!insertBeforeNode&&parentNodeRef!==nodeToRelocate.parentNode||nodeToRelocate.nextSibling!==insertBeforeNode)&&nodeToRelocate!==insertBeforeNode&&(!nodeToRelocate["s-hn"]&&nodeToRelocate["s-ol"]&&(nodeToRelocate["s-hn"]=nodeToRelocate["s-ol"].parentNode.nodeName),parentNodeRef.insertBefore(nodeToRelocate,insertBeforeNode))}else 1===nodeToRelocate.nodeType&&(nodeToRelocate.hidden=!0)}checkSlotFallbackVisibility&&updateFallbackSlotVisibility(rootVnode.$elm$),plt.$flags$&=-2,relocateNodes.length=0},getElement=function getElement(ref){return getHostRef(ref).$hostElement$},createEvent=function createEvent(ref,name,flags){var elm=getElement(ref);return{emit:function emit(detail){return emitEvent(elm,name,{bubbles:!!(4&flags),composed:!!(2&flags),cancelable:!!(1&flags),detail:detail})}}},emitEvent=function emitEvent(elm,name,opts){var ev=plt.ce(name,opts);return elm.dispatchEvent(ev),ev},attachToAncestor=function attachToAncestor(hostRef,ancestorComponent){ancestorComponent&&!hostRef.$onRenderResolve$&&ancestorComponent["s-p"]&&ancestorComponent["s-p"].push(new Promise((function(r){return hostRef.$onRenderResolve$=r})))},scheduleUpdate=function scheduleUpdate(hostRef,isInitialLoad){if(hostRef.$flags$|=16,!(4&hostRef.$flags$)){attachToAncestor(hostRef,hostRef.$ancestorComponent$);return writeTask((function dispatch(){return dispatchHooks(hostRef,isInitialLoad)}))}hostRef.$flags$|=512},dispatchHooks=function dispatchHooks(hostRef,isInitialLoad){var promise,endSchedule=(hostRef.$cmpMeta$.$tagName$,function(){}),instance=hostRef.$lazyInstance$;return isInitialLoad?(hostRef.$flags$|=256,hostRef.$queuedListeners$&&(hostRef.$queuedListeners$.map((function(_ref5){var _ref6=_slicedToArray(_ref5,2),methodName=_ref6[0],event=_ref6[1];return safeCall(instance,methodName,event)})),hostRef.$queuedListeners$=null),promise=safeCall(instance,"componentWillLoad")):promise=safeCall(instance,"componentWillUpdate"),promise=then(promise,(function(){return safeCall(instance,"componentWillRender")})),endSchedule(),then(promise,(function(){return updateComponent(hostRef,instance,isInitialLoad)}))},updateComponent=function(){var _ref7=_asyncToGenerator(regeneratorRuntime.mark((function _callee(hostRef,instance,isInitialLoad){var elm,endUpdate,rc,endRender,childrenPromises,postUpdate;return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:elm=hostRef.$hostElement$,hostRef.$cmpMeta$.$tagName$,endUpdate=function(){},rc=elm["s-rc"],isInitialLoad&&attachStyles(hostRef),hostRef.$cmpMeta$.$tagName$,endRender=function(){},callRender(hostRef,instance),rc&&(rc.map((function(cb){return cb()})),elm["s-rc"]=void 0),endRender(),endUpdate(),childrenPromises=elm["s-p"],postUpdate=function postUpdate(){return postUpdateComponent(hostRef)},0===childrenPromises.length?postUpdate():(Promise.all(childrenPromises).then(postUpdate),hostRef.$flags$|=4,childrenPromises.length=0);case 12:case"end":return _context.stop()}}),_callee)})));return function updateComponent(_x,_x2,_x3){return _ref7.apply(this,arguments)}}(),callRender=function callRender(hostRef,instance,elm){try{instance=instance.render(),hostRef.$flags$&=-17,hostRef.$flags$|=2,renderVdom(hostRef,instance)}catch(e){consoleError(e,hostRef.$hostElement$)}return null},postUpdateComponent=function postUpdateComponent(hostRef){hostRef.$cmpMeta$.$tagName$;var elm=hostRef.$hostElement$,endPostUpdate=function(){},instance=hostRef.$lazyInstance$,ancestorComponent=hostRef.$ancestorComponent$;safeCall(instance,"componentDidRender"),64&hostRef.$flags$?(safeCall(instance,"componentDidUpdate"),endPostUpdate()):(hostRef.$flags$|=64,addHydratedFlag(elm),safeCall(instance,"componentDidLoad"),endPostUpdate(),hostRef.$onReadyResolve$(elm),ancestorComponent||appDidLoad()),hostRef.$onInstanceResolve$(elm),hostRef.$onRenderResolve$&&(hostRef.$onRenderResolve$(),hostRef.$onRenderResolve$=void 0),512&hostRef.$flags$&&nextTick((function(){return scheduleUpdate(hostRef,!1)})),hostRef.$flags$&=-517},appDidLoad=function appDidLoad(who){addHydratedFlag(doc.documentElement),nextTick((function(){return emitEvent(win,"appload",{detail:{namespace:NAMESPACE}})}))},safeCall=function safeCall(instance,method,arg){if(instance&&instance[method])try{return instance[method](arg)}catch(e){consoleError(e)}},then=function then(promise,thenFn){return promise&&promise.then?promise.then(thenFn):thenFn()},addHydratedFlag=function addHydratedFlag(elm){return elm.classList.add("hydrated")},clientHydrate=function clientHydrate(parentVNode,childRenderNodes,slotNodes,shadowRootNodes,hostElm,node,hostId){var childNodeType,childIdSplt,childVNode,i;if(1===node.nodeType){for((childNodeType=node.getAttribute("c-id"))&&((childIdSplt=childNodeType.split("."))[0]!==hostId&&"0"!==childIdSplt[0]||(childVNode={$flags$:0,$hostId$:childIdSplt[0],$nodeId$:childIdSplt[1],$depth$:childIdSplt[2],$index$:childIdSplt[3],$tag$:node.tagName.toLowerCase(),$elm$:node,$attrs$:null,$children$:null,$key$:null,$name$:null,$text$:null},childRenderNodes.push(childVNode),node.removeAttribute("c-id"),parentVNode.$children$||(parentVNode.$children$=[]),parentVNode.$children$[childVNode.$index$]=childVNode,parentVNode=childVNode,shadowRootNodes&&"0"===childVNode.$depth$&&(shadowRootNodes[childVNode.$index$]=childVNode.$elm$))),i=node.childNodes.length-1;i>=0;i--)clientHydrate(parentVNode,childRenderNodes,slotNodes,shadowRootNodes,hostElm,node.childNodes[i],hostId);if(node.shadowRoot)for(i=node.shadowRoot.childNodes.length-1;i>=0;i--)clientHydrate(parentVNode,childRenderNodes,slotNodes,shadowRootNodes,hostElm,node.shadowRoot.childNodes[i],hostId)}else if(8===node.nodeType)(childIdSplt=node.nodeValue.split("."))[1]!==hostId&&"0"!==childIdSplt[1]||(childNodeType=childIdSplt[0],childVNode={$flags$:0,$hostId$:childIdSplt[1],$nodeId$:childIdSplt[2],$depth$:childIdSplt[3],$index$:childIdSplt[4],$elm$:node,$attrs$:null,$children$:null,$key$:null,$name$:null,$tag$:null,$text$:null},"t"===childNodeType?(childVNode.$elm$=node.nextSibling,childVNode.$elm$&&3===childVNode.$elm$.nodeType&&(childVNode.$text$=childVNode.$elm$.textContent,childRenderNodes.push(childVNode),node.remove(),parentVNode.$children$||(parentVNode.$children$=[]),parentVNode.$children$[childVNode.$index$]=childVNode,shadowRootNodes&&"0"===childVNode.$depth$&&(shadowRootNodes[childVNode.$index$]=childVNode.$elm$))):childVNode.$hostId$===hostId&&("s"===childNodeType?(childVNode.$tag$="slot",childIdSplt[5]?node["s-sn"]=childVNode.$name$=childIdSplt[5]:node["s-sn"]="",node["s-sr"]=!0,shadowRootNodes&&(childVNode.$elm$=doc.createElement(childVNode.$tag$),childVNode.$name$&&childVNode.$elm$.setAttribute("name",childVNode.$name$),node.parentNode.insertBefore(childVNode.$elm$,node),node.remove(),"0"===childVNode.$depth$&&(shadowRootNodes[childVNode.$index$]=childVNode.$elm$)),slotNodes.push(childVNode),parentVNode.$children$||(parentVNode.$children$=[]),parentVNode.$children$[childVNode.$index$]=childVNode):"r"===childNodeType&&(shadowRootNodes?node.remove():(hostElm["s-cr"]=node,node["s-cn"]=!0))));else if(parentVNode&&"style"===parentVNode.$tag$){var vnode=newVNode(null,node.textContent);vnode.$elm$=node,vnode.$index$="0",parentVNode.$children$=[vnode]}},initializeDocumentHydrate=function initializeDocumentHydrate(node,orgLocNodes){if(1===node.nodeType){for(var i=0;i<node.childNodes.length;i++)initializeDocumentHydrate(node.childNodes[i],orgLocNodes);if(node.shadowRoot)for(i=0;i<node.shadowRoot.childNodes.length;i++)initializeDocumentHydrate(node.shadowRoot.childNodes[i],orgLocNodes)}else if(8===node.nodeType){var childIdSplt=node.nodeValue.split(".");"o"===childIdSplt[0]&&(orgLocNodes.set(childIdSplt[1]+"."+childIdSplt[2],node),node.nodeValue="",node["s-en"]=childIdSplt[3])}},setValue=function setValue(ref,propName,newVal,cmpMeta){var hostRef=getHostRef(ref),elm=hostRef.$hostElement$,oldVal=hostRef.$instanceValues$.get(propName),flags=hostRef.$flags$,instance=hostRef.$lazyInstance$;newVal=function parsePropertyValue(propValue,propType){return null==propValue||isComplexType(propValue)?propValue:4&propType?"false"!==propValue&&(""===propValue||!!propValue):2&propType?parseFloat(propValue):1&propType?String(propValue):propValue}(newVal,cmpMeta.$members$[propName][0]);var areBothNaN=Number.isNaN(oldVal)&&Number.isNaN(newVal);if((!(8&flags)||void 0===oldVal)&&(newVal!==oldVal&&!areBothNaN)&&(hostRef.$instanceValues$.set(propName,newVal),instance)){if(cmpMeta.$watchers$&&128&flags){var watchMethods=cmpMeta.$watchers$[propName];watchMethods&&watchMethods.map((function(watchMethodName){try{instance[watchMethodName](newVal,oldVal,propName)}catch(e){consoleError(e,elm)}}))}2==(18&flags)&&scheduleUpdate(hostRef,!1)}},proxyComponent=function proxyComponent(Cstr,cmpMeta,flags){if(cmpMeta.$members$){Cstr.watchers&&(cmpMeta.$watchers$=Cstr.watchers);var members=Object.entries(cmpMeta.$members$),prototype=Cstr.prototype;if(members.map((function(_ref8){var _ref9=_slicedToArray(_ref8,2),memberName=_ref9[0],memberFlags=_slicedToArray(_ref9[1],1)[0];31&memberFlags||2&flags&&32&memberFlags?Object.defineProperty(prototype,memberName,{get:function get(){return function getValue(ref,propName){return getHostRef(ref).$instanceValues$.get(propName)}(this,memberName)},set:function set(newValue){setValue(this,memberName,newValue,cmpMeta)},configurable:!0,enumerable:!0}):1&flags&&64&memberFlags&&Object.defineProperty(prototype,memberName,{value:function value(){for(var _len2=arguments.length,args=new Array(_len2),_key2=0;_key2<_len2;_key2++)args[_key2]=arguments[_key2];var ref=getHostRef(this);return ref.$onInstancePromise$.then((function(){var _ref$$lazyInstance$;return(_ref$$lazyInstance$=ref.$lazyInstance$)[memberName].apply(_ref$$lazyInstance$,args)}))}})})),1&flags){var attrNameToPropName=new Map;prototype.attributeChangedCallback=function(attrName,_oldValue,newValue){var _this=this;plt.jmp((function(){var propName=attrNameToPropName.get(attrName);if(_this.hasOwnProperty(propName))newValue=_this[propName],delete _this[propName];else if(prototype.hasOwnProperty(propName)&&"number"==typeof _this[propName]&&_this[propName]==newValue)return;_this[propName]=(null!==newValue||"boolean"!=typeof _this[propName])&&newValue}))},Cstr.observedAttributes=members.filter((function(_ref10){var _ref11=_slicedToArray(_ref10,2);_ref11[0];return 15&_ref11[1][0]})).map((function(_ref12){var _ref13=_slicedToArray(_ref12,2),propName=_ref13[0],m=_ref13[1],attrName=m[1]||propName;return attrNameToPropName.set(attrName,propName),512&m[0]&&cmpMeta.$attrsToReflect$.push([propName,attrName]),attrName}))}}return Cstr},initializeComponent=function(){var _ref14=_asyncToGenerator(regeneratorRuntime.mark((function _callee2(elm,hostRef,cmpMeta,hmrVersionId,Cstr){var endLoad,endNewInstance,style,_scopeId,endRegisterStyles,ancestorComponent,schedule;return regeneratorRuntime.wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:if(0!=(32&hostRef.$flags$)){_context2.next=18;break}if(hostRef.$flags$|=32,!(Cstr=loadModule(cmpMeta)).then){_context2.next=9;break}return endLoad=function(){},_context2.next=7,Cstr;case 7:Cstr=_context2.sent,endLoad();case 9:Cstr.isProxied||(cmpMeta.$watchers$=Cstr.watchers,proxyComponent(Cstr,cmpMeta,2),Cstr.isProxied=!0),cmpMeta.$tagName$,endNewInstance=function(){},hostRef.$flags$|=8;try{new Cstr(hostRef)}catch(e){consoleError(e)}hostRef.$flags$&=-9,hostRef.$flags$|=128,endNewInstance(),fireConnectedCallback(hostRef.$lazyInstance$),Cstr.style&&(style=Cstr.style,_scopeId=getScopeId(cmpMeta),styles.has(_scopeId)||(cmpMeta.$tagName$,endRegisterStyles=function(){},registerStyle(_scopeId,style,!!(1&cmpMeta.$flags$)),endRegisterStyles()));case 18:ancestorComponent=hostRef.$ancestorComponent$,schedule=function schedule(){return scheduleUpdate(hostRef,!0)},ancestorComponent&&ancestorComponent["s-rc"]?ancestorComponent["s-rc"].push(schedule):schedule();case 21:case"end":return _context2.stop()}}),_callee2)})));return function initializeComponent(_x4,_x5,_x6,_x7,_x8){return _ref14.apply(this,arguments)}}(),fireConnectedCallback=function fireConnectedCallback(instance){safeCall(instance,"connectedCallback")},_connectedCallback=function connectedCallback(elm){if(0==(1&plt.$flags$)){var hostRef=getHostRef(elm),cmpMeta=hostRef.$cmpMeta$,endConnected=(cmpMeta.$tagName$,function(){});if(1&hostRef.$flags$)addHostEventListeners(elm,hostRef,cmpMeta.$listeners$),fireConnectedCallback(hostRef.$lazyInstance$);else{var hostId;if(hostRef.$flags$|=1,hostId=elm.getAttribute("s-id")){if(1&cmpMeta.$flags$){var _scopeId2=addStyle(elm.shadowRoot,cmpMeta);elm.classList.remove(_scopeId2+"-h",_scopeId2+"-s")}!function initializeClientHydrate(hostElm,tagName,hostId,hostRef){var endHydrate=function(){},shadowRoot=hostElm.shadowRoot,childRenderNodes=[],shadowRootNodes=shadowRoot?[]:null,vnode=hostRef.$vnode$=newVNode(tagName,null);plt.$orgLocNodes$||initializeDocumentHydrate(doc.body,plt.$orgLocNodes$=new Map),hostElm["s-id"]=hostId,hostElm.removeAttribute("s-id"),clientHydrate(vnode,childRenderNodes,[],shadowRootNodes,hostElm,hostElm,hostId),childRenderNodes.map((function(c){var orgLocationId=c.$hostId$+"."+c.$nodeId$,orgLocationNode=plt.$orgLocNodes$.get(orgLocationId),node=c.$elm$;orgLocationNode&&""===orgLocationNode["s-en"]&&orgLocationNode.parentNode.insertBefore(node,orgLocationNode.nextSibling),shadowRoot||(node["s-hn"]=tagName,orgLocationNode&&(node["s-ol"]=orgLocationNode,node["s-ol"]["s-nr"]=node)),plt.$orgLocNodes$.delete(orgLocationId)})),shadowRoot&&shadowRootNodes.map((function(shadowRootNode){shadowRootNode&&shadowRoot.appendChild(shadowRootNode)})),endHydrate()}(elm,cmpMeta.$tagName$,hostId,hostRef)}hostId||12&cmpMeta.$flags$&&setContentReference(elm);for(var ancestorComponent=elm;ancestorComponent=ancestorComponent.parentNode||ancestorComponent.host;)if(1===ancestorComponent.nodeType&&ancestorComponent.hasAttribute("s-id")&&ancestorComponent["s-p"]||ancestorComponent["s-p"]){attachToAncestor(hostRef,hostRef.$ancestorComponent$=ancestorComponent);break}cmpMeta.$members$&&Object.entries(cmpMeta.$members$).map((function(_ref15){var _ref16=_slicedToArray(_ref15,2),memberName=_ref16[0];if(31&_slicedToArray(_ref16[1],1)[0]&&elm.hasOwnProperty(memberName)){var value=elm[memberName];delete elm[memberName],elm[memberName]=value}})),initializeComponent(elm,hostRef,cmpMeta)}endConnected()}},setContentReference=function setContentReference(elm){var contentRefElm=elm["s-cr"]=doc.createComment("");contentRefElm["s-cn"]=!0,elm.insertBefore(contentRefElm,elm.firstChild)},_disconnectedCallback=function disconnectedCallback(elm){if(0==(1&plt.$flags$)){var hostRef=getHostRef(elm),instance=hostRef.$lazyInstance$;hostRef.$rmListeners$&&(hostRef.$rmListeners$.map((function(rmListener){return rmListener()})),hostRef.$rmListeners$=void 0),safeCall(instance,"disconnectedCallback")}},patchCloneNode=function patchCloneNode(HostElementPrototype){var orgCloneNode=HostElementPrototype.cloneNode;HostElementPrototype.cloneNode=function(deep){var srcNode=this,isShadowDom=srcNode.shadowRoot&&true,clonedNode=orgCloneNode.call(srcNode,!!isShadowDom&&deep);return!isShadowDom&&deep&&function(){for(var slotted,nonStencilNode,i=0,stencilPrivates=["s-id","s-cr","s-lr","s-rc","s-sc","s-p","s-cn","s-sr","s-sn","s-hn","s-ol","s-nr","s-si"];i<srcNode.childNodes.length;i++)slotted=srcNode.childNodes[i]["s-nr"],nonStencilNode=stencilPrivates.every((function(privateField){return!srcNode.childNodes[i][privateField]})),slotted&&clonedNode.appendChild(slotted.cloneNode(!0)),nonStencilNode&&clonedNode.appendChild(srcNode.childNodes[i].cloneNode(!0))}(),clonedNode}},bootstrapLazy=function bootstrapLazy(lazyBundles){var appLoadFallback,options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},endBootstrap=function(){},cmpTags=[],exclude=options.exclude||[],customElements=win.customElements,head=doc.head,metaCharset=head.querySelector("meta[charset]"),visibilityStyle=doc.createElement("style"),deferredConnectedCallbacks=[],styles=doc.querySelectorAll("[sty-id]"),isBootstrapping=!0,i=0;for(Object.assign(plt,options),plt.$resourcesUrl$=new URL(options.resourcesUrl||"./",doc.baseURI).href,plt.$flags$|=2;i<styles.length;i++)registerStyle(styles[i].getAttribute("sty-id"),convertScopedToShadow(styles[i].innerHTML),!0);lazyBundles.map((function(lazyBundle){lazyBundle[1].map((function(compactMeta){var cmpMeta={$flags$:compactMeta[0],$tagName$:compactMeta[1],$members$:compactMeta[2],$listeners$:compactMeta[3]};cmpMeta.$members$=compactMeta[2],cmpMeta.$listeners$=compactMeta[3],cmpMeta.$attrsToReflect$=[],cmpMeta.$watchers$={};var tagName=cmpMeta.$tagName$,HostElement=function(_HTMLElement){_inherits(HostElement,_HTMLElement);var _super=_createSuper(HostElement);function HostElement(self){var _this2;return _classCallCheck(this,HostElement),self=_assertThisInitialized(_this2=_super.call(this,self)),registerHost(self,cmpMeta),1&cmpMeta.$flags$&&self.attachShadow({mode:"open"}),_this2}return _createClass(HostElement,[{key:"connectedCallback",value:function connectedCallback(){var _this3=this;appLoadFallback&&(clearTimeout(appLoadFallback),appLoadFallback=null),isBootstrapping?deferredConnectedCallbacks.push(this):plt.jmp((function(){return _connectedCallback(_this3)}))}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this4=this;plt.jmp((function(){return _disconnectedCallback(_this4)}))}},{key:"componentOnReady",value:function componentOnReady(){return getHostRef(this).$onReadyPromise$}}]),HostElement}(_wrapNativeSuper(HTMLElement));patchCloneNode(HostElement.prototype),cmpMeta.$lazyBundleId$=lazyBundle[0],exclude.includes(tagName)||customElements.get(tagName)||(cmpTags.push(tagName),customElements.define(tagName,proxyComponent(HostElement,cmpMeta,1)))}))})),visibilityStyle.innerHTML=cmpTags+HYDRATED_CSS,visibilityStyle.setAttribute("data-styles",""),head.insertBefore(visibilityStyle,metaCharset?metaCharset.nextSibling:head.firstChild),isBootstrapping=!1,deferredConnectedCallbacks.length?deferredConnectedCallbacks.map((function(host){return host.connectedCallback()})):plt.jmp((function(){return appLoadFallback=setTimeout(appDidLoad,30)})),endBootstrap()},Fragment=function Fragment(_,children){return children},hostRefs=new WeakMap,getHostRef=function getHostRef(ref){return hostRefs.get(ref)},registerInstance=function registerInstance(lazyInstance,hostRef){return hostRefs.set(hostRef.$lazyInstance$=lazyInstance,hostRef)},registerHost=function registerHost(elm,cmpMeta){var hostRef={$flags$:0,$hostElement$:elm,$cmpMeta$:cmpMeta,$instanceValues$:new Map};return hostRef.$onInstancePromise$=new Promise((function(r){return hostRef.$onInstanceResolve$=r})),hostRef.$onReadyPromise$=new Promise((function(r){return hostRef.$onReadyResolve$=r})),elm["s-p"]=[],elm["s-rc"]=[],addHostEventListeners(elm,hostRef,cmpMeta.$listeners$),hostRefs.set(elm,hostRef)},isMemberInElement=function isMemberInElement(elm,memberName){return memberName in elm},consoleError=function consoleError(e,el){return(0,console.error)(e,el)},cmpModules=new Map,loadModule=function loadModule(cmpMeta,hostRef,hmrVersionId){var exportName=cmpMeta.$tagName$.replace(/-/g,"_"),bundleId=cmpMeta.$lazyBundleId$,module=cmpModules.get(bundleId);if(module)return module[exportName];if(!hmrVersionId||!BUILD.hotModuleReplacement){var processMod=function processMod(importedModule){return cmpModules.set(bundleId,importedModule),importedModule[exportName]};switch(bundleId){case"app-logo":return __webpack_require__.e(45).then(__webpack_require__.bind(null,"../components/dist/esm/app-logo.entry.js")).then(processMod,consoleError);case"scale-accordion":return __webpack_require__.e(46).then(__webpack_require__.bind(null,"../components/dist/esm/scale-accordion.entry.js")).then(processMod,consoleError);case"scale-alert":return __webpack_require__.e(30).then(__webpack_require__.bind(null,"../components/dist/esm/scale-alert.entry.js")).then(processMod,consoleError);case"scale-app-footer":return __webpack_require__.e(29).then(__webpack_require__.bind(null,"../components/dist/esm/scale-app-footer.entry.js")).then(processMod,consoleError);case"scale-app-shell":return __webpack_require__.e(62).then(__webpack_require__.bind(null,"../components/dist/esm/scale-app-shell.entry.js")).then(processMod,consoleError);case"scale-breadcrumb":return __webpack_require__.e(47).then(__webpack_require__.bind(null,"../components/dist/esm/scale-breadcrumb.entry.js")).then(processMod,consoleError);case"scale-callout":return __webpack_require__.e(59).then(__webpack_require__.bind(null,"../components/dist/esm/scale-callout.entry.js")).then(processMod,consoleError);case"scale-carousel":return __webpack_require__.e(32).then(__webpack_require__.bind(null,"../components/dist/esm/scale-carousel.entry.js")).then(processMod,consoleError);case"scale-chart-stack-card":return __webpack_require__.e(14).then(__webpack_require__.bind(null,"../components/dist/esm/scale-chart-stack-card.entry.js")).then(processMod,consoleError);case"scale-checkbox-group":return __webpack_require__.e(60).then(__webpack_require__.bind(null,"../components/dist/esm/scale-checkbox-group.entry.js")).then(processMod,consoleError);case"scale-chip":return __webpack_require__.e(33).then(__webpack_require__.bind(null,"../components/dist/esm/scale-chip.entry.js")).then(processMod,consoleError);case"scale-collapsible":return __webpack_require__.e(34).then(__webpack_require__.bind(null,"../components/dist/esm/scale-collapsible.entry.js")).then(processMod,consoleError);case"scale-data-grid":return __webpack_require__.e(4).then(__webpack_require__.bind(null,"../components/dist/esm/scale-data-grid.entry.js")).then(processMod,consoleError);case"scale-date-picker":return __webpack_require__.e(8).then(__webpack_require__.bind(null,"../components/dist/esm/scale-date-picker.entry.js")).then(processMod,consoleError);case"scale-divider":return __webpack_require__.e(49).then(__webpack_require__.bind(null,"../components/dist/esm/scale-divider.entry.js")).then(processMod,consoleError);case"scale-dropdown":return __webpack_require__.e(9).then(__webpack_require__.bind(null,"../components/dist/esm/scale-dropdown.entry.js")).then(processMod,consoleError);case"scale-grid":return __webpack_require__.e(27).then(__webpack_require__.bind(null,"../components/dist/esm/scale-grid.entry.js")).then(processMod,consoleError);case"scale-grid-item":return __webpack_require__.e(26).then(__webpack_require__.bind(null,"../components/dist/esm/scale-grid-item.entry.js")).then(processMod,consoleError);case"scale-icon-action-add":return __webpack_require__.e(65).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-add.entry.js")).then(processMod,consoleError);case"scale-icon-action-add-card":return __webpack_require__.e(64).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-add-card.entry.js")).then(processMod,consoleError);case"scale-icon-action-arrange":return __webpack_require__.e(66).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-arrange.entry.js")).then(processMod,consoleError);case"scale-icon-action-arrow-down":return __webpack_require__.e(67).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-arrow-down.entry.js")).then(processMod,consoleError);case"scale-icon-action-arrow-left":return __webpack_require__.e(68).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-arrow-left.entry.js")).then(processMod,consoleError);case"scale-icon-action-arrow-right":return __webpack_require__.e(69).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-arrow-right.entry.js")).then(processMod,consoleError);case"scale-icon-action-arrow-up":return __webpack_require__.e(70).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-arrow-up.entry.js")).then(processMod,consoleError);case"scale-icon-action-auto-login":return __webpack_require__.e(71).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-auto-login.entry.js")).then(processMod,consoleError);case"scale-icon-action-backspace":return __webpack_require__.e(72).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-backspace.entry.js")).then(processMod,consoleError);case"scale-icon-action-backward":return __webpack_require__.e(73).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-backward.entry.js")).then(processMod,consoleError);case"scale-icon-action-changelog":return __webpack_require__.e(74).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-changelog.entry.js")).then(processMod,consoleError);case"scale-icon-action-circle-add":return __webpack_require__.e(76).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-circle-add.entry.js")).then(processMod,consoleError);case"scale-icon-action-compare":return __webpack_require__.e(79).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-compare.entry.js")).then(processMod,consoleError);case"scale-icon-action-copy-paste":return __webpack_require__.e(80).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-copy-paste.entry.js")).then(processMod,consoleError);case"scale-icon-action-cut-paste":return __webpack_require__.e(81).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-cut-paste.entry.js")).then(processMod,consoleError);case"scale-icon-action-disabled-microphone":return __webpack_require__.e(82).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-disabled-microphone.entry.js")).then(processMod,consoleError);case"scale-icon-action-download":return __webpack_require__.e(84).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-download.entry.js")).then(processMod,consoleError);case"scale-icon-action-download-from-cloud":return __webpack_require__.e(83).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-download-from-cloud.entry.js")).then(processMod,consoleError);case"scale-icon-action-drag-and-drop":return __webpack_require__.e(85).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-drag-and-drop.entry.js")).then(processMod,consoleError);case"scale-icon-action-edit":return __webpack_require__.e(86).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-edit.entry.js")).then(processMod,consoleError);case"scale-icon-action-export":return __webpack_require__.e(87).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-export.entry.js")).then(processMod,consoleError);case"scale-icon-action-fast-forward":return __webpack_require__.e(89).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-fast-forward.entry.js")).then(processMod,consoleError);case"scale-icon-action-fast-forward-nb":return __webpack_require__.e(88).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-fast-forward-nb.entry.js")).then(processMod,consoleError);case"scale-icon-action-filter":return __webpack_require__.e(92).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-filter.entry.js")).then(processMod,consoleError);case"scale-icon-action-filter-2":return __webpack_require__.e(91).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-filter-2.entry.js")).then(processMod,consoleError);case"scale-icon-action-forward":return __webpack_require__.e(93).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-forward.entry.js")).then(processMod,consoleError);case"scale-icon-action-full-screen":return __webpack_require__.e(94).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-full-screen.entry.js")).then(processMod,consoleError);case"scale-icon-action-import":return __webpack_require__.e(95).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-import.entry.js")).then(processMod,consoleError);case"scale-icon-action-install":return __webpack_require__.e(96).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-install.entry.js")).then(processMod,consoleError);case"scale-icon-action-launch":return __webpack_require__.e(97).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-launch.entry.js")).then(processMod,consoleError);case"scale-icon-action-light-dark-mode":return __webpack_require__.e(98).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-light-dark-mode.entry.js")).then(processMod,consoleError);case"scale-icon-action-link":return __webpack_require__.e(99).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-link.entry.js")).then(processMod,consoleError);case"scale-icon-action-logout":return __webpack_require__.e(100).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-logout.entry.js")).then(processMod,consoleError);case"scale-icon-action-loop":return __webpack_require__.e(101).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-loop.entry.js")).then(processMod,consoleError);case"scale-icon-action-microphone":return __webpack_require__.e(102).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-microphone.entry.js")).then(processMod,consoleError);case"scale-icon-action-minimize-screen":return __webpack_require__.e(103).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-minimize-screen.entry.js")).then(processMod,consoleError);case"scale-icon-action-minus-circle":return __webpack_require__.e(104).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-minus-circle.entry.js")).then(processMod,consoleError);case"scale-icon-action-more":return __webpack_require__.e(105).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-more.entry.js")).then(processMod,consoleError);case"scale-icon-action-move":return __webpack_require__.e(106).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-move.entry.js")).then(processMod,consoleError);case"scale-icon-action-mute":return __webpack_require__.e(107).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-mute.entry.js")).then(processMod,consoleError);case"scale-icon-action-notification":return __webpack_require__.e(108).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-notification.entry.js")).then(processMod,consoleError);case"scale-icon-action-pause":return __webpack_require__.e(110).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-pause.entry.js")).then(processMod,consoleError);case"scale-icon-action-pause-nb":return __webpack_require__.e(109).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-pause-nb.entry.js")).then(processMod,consoleError);case"scale-icon-action-pin":return __webpack_require__.e(111).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-pin.entry.js")).then(processMod,consoleError);case"scale-icon-action-play":return __webpack_require__.e(113).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-play.entry.js")).then(processMod,consoleError);case"scale-icon-action-play-nb":return __webpack_require__.e(112).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-play-nb.entry.js")).then(processMod,consoleError);case"scale-icon-action-pop-up-window":return __webpack_require__.e(114).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-pop-up-window.entry.js")).then(processMod,consoleError);case"scale-icon-action-power":return __webpack_require__.e(115).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-power.entry.js")).then(processMod,consoleError);case"scale-icon-action-previous-nb":return __webpack_require__.e(116).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-previous-nb.entry.js")).then(processMod,consoleError);case"scale-icon-action-print":return __webpack_require__.e(117).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-print.entry.js")).then(processMod,consoleError);case"scale-icon-action-publish":return __webpack_require__.e(118).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-publish.entry.js")).then(processMod,consoleError);case"scale-icon-action-random":return __webpack_require__.e(119).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-random.entry.js")).then(processMod,consoleError);case"scale-icon-action-record-nb":return __webpack_require__.e(120).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-record-nb.entry.js")).then(processMod,consoleError);case"scale-icon-action-refresh":return __webpack_require__.e(121).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-refresh.entry.js")).then(processMod,consoleError);case"scale-icon-action-remove":return __webpack_require__.e(122).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-remove.entry.js")).then(processMod,consoleError);case"scale-icon-action-reply":return __webpack_require__.e(125).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-reply.entry.js")).then(processMod,consoleError);case"scale-icon-action-reply-all":return __webpack_require__.e(123).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-reply-all.entry.js")).then(processMod,consoleError);case"scale-icon-action-reply-forward":return __webpack_require__.e(124).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-reply-forward.entry.js")).then(processMod,consoleError);case"scale-icon-action-restart":return __webpack_require__.e(126).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-restart.entry.js")).then(processMod,consoleError);case"scale-icon-action-search":return __webpack_require__.e(127).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-search.entry.js")).then(processMod,consoleError);case"scale-icon-action-send":return __webpack_require__.e(128).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-send.entry.js")).then(processMod,consoleError);case"scale-icon-action-share":return __webpack_require__.e(129).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-share.entry.js")).then(processMod,consoleError);case"scale-icon-action-shopping-cart":return __webpack_require__.e(130).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-shopping-cart.entry.js")).then(processMod,consoleError);case"scale-icon-action-show-password":return __webpack_require__.e(131).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-show-password.entry.js")).then(processMod,consoleError);case"scale-icon-action-sound-on":return __webpack_require__.e(132).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-sound-on.entry.js")).then(processMod,consoleError);case"scale-icon-action-star":return __webpack_require__.e(133).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-star.entry.js")).then(processMod,consoleError);case"scale-icon-action-stream-on":return __webpack_require__.e(134).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-stream-on.entry.js")).then(processMod,consoleError);case"scale-icon-action-thumbs-down":return __webpack_require__.e(136).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-thumbs-down.entry.js")).then(processMod,consoleError);case"scale-icon-action-thumbs-up":return __webpack_require__.e(137).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-thumbs-up.entry.js")).then(processMod,consoleError);case"scale-icon-action-tiles-add":return __webpack_require__.e(138).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-tiles-add.entry.js")).then(processMod,consoleError);case"scale-icon-action-upload":return __webpack_require__.e(140).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-upload.entry.js")).then(processMod,consoleError);case"scale-icon-action-upload-to-cloud":return __webpack_require__.e(139).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-upload-to-cloud.entry.js")).then(processMod,consoleError);case"scale-icon-action-volume-down":return __webpack_require__.e(141).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-volume-down.entry.js")).then(processMod,consoleError);case"scale-icon-action-volume-up":return __webpack_require__.e(142).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-volume-up.entry.js")).then(processMod,consoleError);case"scale-icon-action-zoom-in":return __webpack_require__.e(143).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-zoom-in.entry.js")).then(processMod,consoleError);case"scale-icon-action-zoom-out":return __webpack_require__.e(144).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-zoom-out.entry.js")).then(processMod,consoleError);case"scale-icon-alert-antivirus-protection":return __webpack_require__.e(145).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-antivirus-protection.entry.js")).then(processMod,consoleError);case"scale-icon-alert-compliance":return __webpack_require__.e(146).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-compliance.entry.js")).then(processMod,consoleError);case"scale-icon-alert-cyber-security":return __webpack_require__.e(147).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-cyber-security.entry.js")).then(processMod,consoleError);case"scale-icon-alert-help":return __webpack_require__.e(148).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-help.entry.js")).then(processMod,consoleError);case"scale-icon-alert-high-priority-email":return __webpack_require__.e(149).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-high-priority-email.entry.js")).then(processMod,consoleError);case"scale-icon-alert-imprint-dataprivacy":return __webpack_require__.e(150).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-imprint-dataprivacy.entry.js")).then(processMod,consoleError);case"scale-icon-alert-legal":return __webpack_require__.e(151).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-legal.entry.js")).then(processMod,consoleError);case"scale-icon-alert-network-disrupted":return __webpack_require__.e(152).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-network-disrupted.entry.js")).then(processMod,consoleError);case"scale-icon-alert-password-breaking":return __webpack_require__.e(153).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-password-breaking.entry.js")).then(processMod,consoleError);case"scale-icon-alert-security":return __webpack_require__.e(154).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-security.entry.js")).then(processMod,consoleError);case"scale-icon-alert-traffic-disruption":return __webpack_require__.e(155).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-traffic-disruption.entry.js")).then(processMod,consoleError);case"scale-icon-alert-unknown":return __webpack_require__.e(156).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-alert-unknown.entry.js")).then(processMod,consoleError);case"scale-icon-communication-available":return __webpack_require__.e(157).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-available.entry.js")).then(processMod,consoleError);case"scale-icon-communication-blog":return __webpack_require__.e(158).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-blog.entry.js")).then(processMod,consoleError);case"scale-icon-communication-call-incoming":return __webpack_require__.e(159).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-call-incoming.entry.js")).then(processMod,consoleError);case"scale-icon-communication-call-outgoing":return __webpack_require__.e(160).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-call-outgoing.entry.js")).then(processMod,consoleError);case"scale-icon-communication-chat":return __webpack_require__.e(162).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-chat.entry.js")).then(processMod,consoleError);case"scale-icon-communication-chat-badge":return __webpack_require__.e(161).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-chat-badge.entry.js")).then(processMod,consoleError);case"scale-icon-communication-email":return __webpack_require__.e(163).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-email.entry.js")).then(processMod,consoleError);case"scale-icon-communication-end-call":return __webpack_require__.e(164).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-end-call.entry.js")).then(processMod,consoleError);case"scale-icon-communication-feedback":return __webpack_require__.e(165).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-feedback.entry.js")).then(processMod,consoleError);case"scale-icon-communication-flight-mode":return __webpack_require__.e(166).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-flight-mode.entry.js")).then(processMod,consoleError);case"scale-icon-communication-happy-person":return __webpack_require__.e(167).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-happy-person.entry.js")).then(processMod,consoleError);case"scale-icon-communication-inbox":return __webpack_require__.e(168).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-inbox.entry.js")).then(processMod,consoleError);case"scale-icon-communication-landing-mobile-contact-client":return __webpack_require__.e(169).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-landing-mobile-contact-client.entry.js")).then(processMod,consoleError);case"scale-icon-communication-loyalty-earned":return __webpack_require__.e(170).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-loyalty-earned.entry.js")).then(processMod,consoleError);case"scale-icon-communication-loyalty-lost":return __webpack_require__.e(171).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-loyalty-lost.entry.js")).then(processMod,consoleError);case"scale-icon-communication-mail-opened":return __webpack_require__.e(172).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-mail-opened.entry.js")).then(processMod,consoleError);case"scale-icon-communication-message":return __webpack_require__.e(175).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-message.entry.js")).then(processMod,consoleError);case"scale-icon-communication-message-incoming":return __webpack_require__.e(173).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-message-incoming.entry.js")).then(processMod,consoleError);case"scale-icon-communication-message-outgoing":return __webpack_require__.e(174).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-message-outgoing.entry.js")).then(processMod,consoleError);case"scale-icon-communication-mms-incoming":return __webpack_require__.e(176).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-mms-incoming.entry.js")).then(processMod,consoleError);case"scale-icon-communication-mms-outgoing":return __webpack_require__.e(177).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-mms-outgoing.entry.js")).then(processMod,consoleError);case"scale-icon-communication-mobile-phone-number":return __webpack_require__.e(178).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-mobile-phone-number.entry.js")).then(processMod,consoleError);case"scale-icon-communication-network-signal":return __webpack_require__.e(179).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-network-signal.entry.js")).then(processMod,consoleError);case"scale-icon-communication-new-email":return __webpack_require__.e(180).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-new-email.entry.js")).then(processMod,consoleError);case"scale-icon-communication-outbox":return __webpack_require__.e(181).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-outbox.entry.js")).then(processMod,consoleError);case"scale-icon-communication-phone-number":return __webpack_require__.e(182).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-phone-number.entry.js")).then(processMod,consoleError);case"scale-icon-communication-recipient":return __webpack_require__.e(183).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-recipient.entry.js")).then(processMod,consoleError);case"scale-icon-communication-save-emails-to-drafts":return __webpack_require__.e(184).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-save-emails-to-drafts.entry.js")).then(processMod,consoleError);case"scale-icon-communication-sms":return __webpack_require__.e(185).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-sms.entry.js")).then(processMod,consoleError);case"scale-icon-communication-spam":return __webpack_require__.e(186).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-spam.entry.js")).then(processMod,consoleError);case"scale-icon-communication-voice-message":return __webpack_require__.e(187).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-communication-voice-message.entry.js")).then(processMod,consoleError);case"scale-icon-content-2fa-google-auth":return __webpack_require__.e(188).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-2fa-google-auth.entry.js")).then(processMod,consoleError);case"scale-icon-content-achievement":return __webpack_require__.e(189).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-achievement.entry.js")).then(processMod,consoleError);case"scale-icon-content-android":return __webpack_require__.e(190).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-android.entry.js")).then(processMod,consoleError);case"scale-icon-content-apple":return __webpack_require__.e(191).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-apple.entry.js")).then(processMod,consoleError);case"scale-icon-content-applications":return __webpack_require__.e(192).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-applications.entry.js")).then(processMod,consoleError);case"scale-icon-content-available-keychain":return __webpack_require__.e(193).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-available-keychain.entry.js")).then(processMod,consoleError);case"scale-icon-content-bank":return __webpack_require__.e(194).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-bank.entry.js")).then(processMod,consoleError);case"scale-icon-content-biometric":return __webpack_require__.e(195).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-biometric.entry.js")).then(processMod,consoleError);case"scale-icon-content-birthday":return __webpack_require__.e(196).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-birthday.entry.js")).then(processMod,consoleError);case"scale-icon-content-bookmark":return __webpack_require__.e(197).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-bookmark.entry.js")).then(processMod,consoleError);case"scale-icon-content-clipboard":return __webpack_require__.e(198).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-clipboard.entry.js")).then(processMod,consoleError);case"scale-icon-content-clock":return __webpack_require__.e(199).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-clock.entry.js")).then(processMod,consoleError);case"scale-icon-content-cloud-security":return __webpack_require__.e(200).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-cloud-security.entry.js")).then(processMod,consoleError);case"scale-icon-content-code-scanner":return __webpack_require__.e(201).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-code-scanner.entry.js")).then(processMod,consoleError);case"scale-icon-content-color-selection":return __webpack_require__.e(202).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-color-selection.entry.js")).then(processMod,consoleError);case"scale-icon-content-country":return __webpack_require__.e(203).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-country.entry.js")).then(processMod,consoleError);case"scale-icon-content-credit-card":return __webpack_require__.e(204).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-credit-card.entry.js")).then(processMod,consoleError);case"scale-icon-content-data-visualisation":return __webpack_require__.e(205).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-data-visualisation.entry.js")).then(processMod,consoleError);case"scale-icon-content-delivery":return __webpack_require__.e(206).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-delivery.entry.js")).then(processMod,consoleError);case"scale-icon-content-digital-banking":return __webpack_require__.e(207).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-digital-banking.entry.js")).then(processMod,consoleError);case"scale-icon-content-digital-media":return __webpack_require__.e(208).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-digital-media.entry.js")).then(processMod,consoleError);case"scale-icon-content-discount":return __webpack_require__.e(209).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-discount.entry.js")).then(processMod,consoleError);case"scale-icon-content-e-sim":return __webpack_require__.e(210).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-e-sim.entry.js")).then(processMod,consoleError);case"scale-icon-content-eu":return __webpack_require__.e(211).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-eu.entry.js")).then(processMod,consoleError);case"scale-icon-content-face-mask":return __webpack_require__.e(212).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-face-mask.entry.js")).then(processMod,consoleError);case"scale-icon-content-features":return __webpack_require__.e(213).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-features.entry.js")).then(processMod,consoleError);case"scale-icon-content-flexible-tariffs":return __webpack_require__.e(214).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-flexible-tariffs.entry.js")).then(processMod,consoleError);case"scale-icon-content-folder":return __webpack_require__.e(215).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-folder.entry.js")).then(processMod,consoleError);case"scale-icon-content-food":return __webpack_require__.e(216).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-food.entry.js")).then(processMod,consoleError);case"scale-icon-content-gender-diverse":return __webpack_require__.e(217).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-gender-diverse.entry.js")).then(processMod,consoleError);case"scale-icon-content-gender-female":return __webpack_require__.e(218).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-gender-female.entry.js")).then(processMod,consoleError);case"scale-icon-content-gender-male":return __webpack_require__.e(219).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-gender-male.entry.js")).then(processMod,consoleError);case"scale-icon-content-half-rating":return __webpack_require__.e(220).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-half-rating.entry.js")).then(processMod,consoleError);case"scale-icon-content-heart":return __webpack_require__.e(221).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-heart.entry.js")).then(processMod,consoleError);case"scale-icon-content-height":return __webpack_require__.e(222).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-height.entry.js")).then(processMod,consoleError);case"scale-icon-content-history":return __webpack_require__.e(223).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-history.entry.js")).then(processMod,consoleError);case"scale-icon-content-hour-glass":return __webpack_require__.e(224).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-hour-glass.entry.js")).then(processMod,consoleError);case"scale-icon-content-iban":return __webpack_require__.e(225).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-iban.entry.js")).then(processMod,consoleError);case"scale-icon-content-id":return __webpack_require__.e(226).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-id.entry.js")).then(processMod,consoleError);case"scale-icon-content-in-stock":return __webpack_require__.e(227).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-in-stock.entry.js")).then(processMod,consoleError);case"scale-icon-content-international":return __webpack_require__.e(229).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-international.entry.js")).then(processMod,consoleError);case"scale-icon-content-international-sms":return __webpack_require__.e(228).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-international-sms.entry.js")).then(processMod,consoleError);case"scale-icon-content-interview":return __webpack_require__.e(230).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-interview.entry.js")).then(processMod,consoleError);case"scale-icon-content-key":return __webpack_require__.e(231).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-key.entry.js")).then(processMod,consoleError);case"scale-icon-content-language":return __webpack_require__.e(232).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-language.entry.js")).then(processMod,consoleError);case"scale-icon-content-lock":return __webpack_require__.e(233).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-lock.entry.js")).then(processMod,consoleError);case"scale-icon-content-loyalty":return __webpack_require__.e(234).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-loyalty.entry.js")).then(processMod,consoleError);case"scale-icon-content-media-folder":return __webpack_require__.e(235).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-media-folder.entry.js")).then(processMod,consoleError);case"scale-icon-content-money-at":return __webpack_require__.e(236).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-money-at.entry.js")).then(processMod,consoleError);case"scale-icon-content-music":return __webpack_require__.e(237).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-music.entry.js")).then(processMod,consoleError);case"scale-icon-content-news":return __webpack_require__.e(238).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-news.entry.js")).then(processMod,consoleError);case"scale-icon-content-out-of-stock":return __webpack_require__.e(239).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-out-of-stock.entry.js")).then(processMod,consoleError);case"scale-icon-content-person-walking":return __webpack_require__.e(240).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-person-walking.entry.js")).then(processMod,consoleError);case"scale-icon-content-prepaid-activate":return __webpack_require__.e(241).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-prepaid-activate.entry.js")).then(processMod,consoleError);case"scale-icon-content-price-tag":return __webpack_require__.e(242).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-price-tag.entry.js")).then(processMod,consoleError);case"scale-icon-content-ratings":return __webpack_require__.e(243).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-ratings.entry.js")).then(processMod,consoleError);case"scale-icon-content-route":return __webpack_require__.e(244).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-route.entry.js")).then(processMod,consoleError);case"scale-icon-content-rss":return __webpack_require__.e(245).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-rss.entry.js")).then(processMod,consoleError);case"scale-icon-content-shop":return __webpack_require__.e(246).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-shop.entry.js")).then(processMod,consoleError);case"scale-icon-content-signal":return __webpack_require__.e(247).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-signal.entry.js")).then(processMod,consoleError);case"scale-icon-content-sim-card":return __webpack_require__.e(248).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-sim-card.entry.js")).then(processMod,consoleError);case"scale-icon-content-smile":return __webpack_require__.e(249).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-smile.entry.js")).then(processMod,consoleError);case"scale-icon-content-sort-indicator-mini-down":return __webpack_require__.e(250).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-sort-indicator-mini-down.entry.js")).then(processMod,consoleError);case"scale-icon-content-sort-indicator-up-mini":return __webpack_require__.e(251).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-sort-indicator-up-mini.entry.js")).then(processMod,consoleError);case"scale-icon-content-status-inactive":return __webpack_require__.e(252).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-status-inactive.entry.js")).then(processMod,consoleError);case"scale-icon-content-status-recurring":return __webpack_require__.e(253).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-status-recurring.entry.js")).then(processMod,consoleError);case"scale-icon-content-stopwatch":return __webpack_require__.e(254).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-stopwatch.entry.js")).then(processMod,consoleError);case"scale-icon-content-support-chat":return __webpack_require__.e(255).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-support-chat.entry.js")).then(processMod,consoleError);case"scale-icon-content-sustainable":return __webpack_require__.e(256).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-sustainable.entry.js")).then(processMod,consoleError);case"scale-icon-content-tariffs":return __webpack_require__.e(257).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-tariffs.entry.js")).then(processMod,consoleError);case"scale-icon-content-threats":return __webpack_require__.e(258).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-threats.entry.js")).then(processMod,consoleError);case"scale-icon-content-todo-list":return __webpack_require__.e(259).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-todo-list.entry.js")).then(processMod,consoleError);case"scale-icon-content-transport":return __webpack_require__.e(260).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-transport.entry.js")).then(processMod,consoleError);case"scale-icon-content-unlock":return __webpack_require__.e(261).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-unlock.entry.js")).then(processMod,consoleError);case"scale-icon-content-voucher":return __webpack_require__.e(262).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-voucher.entry.js")).then(processMod,consoleError);case"scale-icon-content-waiting":return __webpack_require__.e(263).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-waiting.entry.js")).then(processMod,consoleError);case"scale-icon-content-wallet":return __webpack_require__.e(264).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-content-wallet.entry.js")).then(processMod,consoleError);case"scale-icon-device-add-device":return __webpack_require__.e(265).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-add-device.entry.js")).then(processMod,consoleError);case"scale-icon-device-camera":return __webpack_require__.e(266).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-camera.entry.js")).then(processMod,consoleError);case"scale-icon-device-change-camera":return __webpack_require__.e(267).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-change-camera.entry.js")).then(processMod,consoleError);case"scale-icon-device-computer":return __webpack_require__.e(268).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-computer.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-controller":return __webpack_require__.e(269).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-controller.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-ethernet":return __webpack_require__.e(270).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-ethernet.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-mesh":return __webpack_require__.e(271).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-mesh.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-phone":return __webpack_require__.e(272).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-phone.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-router":return __webpack_require__.e(273).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-router.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-tv":return __webpack_require__.e(274).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-tv.entry.js")).then(processMod,consoleError);case"scale-icon-device-device-watch":return __webpack_require__.e(275).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-device-watch.entry.js")).then(processMod,consoleError);case"scale-icon-device-dongle":return __webpack_require__.e(276).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-dongle.entry.js")).then(processMod,consoleError);case"scale-icon-device-fax":return __webpack_require__.e(277).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-fax.entry.js")).then(processMod,consoleError);case"scale-icon-device-fixed-line-services":return __webpack_require__.e(278).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-fixed-line-services.entry.js")).then(processMod,consoleError);case"scale-icon-device-game-controller":return __webpack_require__.e(279).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-game-controller.entry.js")).then(processMod,consoleError);case"scale-icon-device-media-receiver":return __webpack_require__.e(280).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-media-receiver.entry.js")).then(processMod,consoleError);case"scale-icon-device-mobile-data":return __webpack_require__.e(281).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-mobile-data.entry.js")).then(processMod,consoleError);case"scale-icon-device-mobile-devices-combination":return __webpack_require__.e(282).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-mobile-devices-combination.entry.js")).then(processMod,consoleError);case"scale-icon-device-mobile-equipment":return __webpack_require__.e(283).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-mobile-equipment.entry.js")).then(processMod,consoleError);case"scale-icon-device-mobile-phone-insurance":return __webpack_require__.e(284).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-mobile-phone-insurance.entry.js")).then(processMod,consoleError);case"scale-icon-device-mobile-services":return __webpack_require__.e(285).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-mobile-services.entry.js")).then(processMod,consoleError);case"scale-icon-device-no-camera":return __webpack_require__.e(286).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-no-camera.entry.js")).then(processMod,consoleError);case"scale-icon-device-phone-with-mobile-plan":return __webpack_require__.e(287).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-phone-with-mobile-plan.entry.js")).then(processMod,consoleError);case"scale-icon-device-phone-without-mobile-plan":return __webpack_require__.e(288).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-phone-without-mobile-plan.entry.js")).then(processMod,consoleError);case"scale-icon-device-photo-camera":return __webpack_require__.e(289).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-photo-camera.entry.js")).then(processMod,consoleError);case"scale-icon-device-remote-controller":return __webpack_require__.e(290).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-remote-controller.entry.js")).then(processMod,consoleError);case"scale-icon-device-replacement-mobilephone":return __webpack_require__.e(291).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-replacement-mobilephone.entry.js")).then(processMod,consoleError);case"scale-icon-device-screen-rotate":return __webpack_require__.e(292).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-screen-rotate.entry.js")).then(processMod,consoleError);case"scale-icon-device-server":return __webpack_require__.e(293).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-server.entry.js")).then(processMod,consoleError);case"scale-icon-device-smart-speaker":return __webpack_require__.e(294).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-smart-speaker.entry.js")).then(processMod,consoleError);case"scale-icon-device-tablet":return __webpack_require__.e(295).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-tablet.entry.js")).then(processMod,consoleError);case"scale-icon-device-tv-and-mobile":return __webpack_require__.e(296).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-tv-and-mobile.entry.js")).then(processMod,consoleError);case"scale-icon-device-twitching-closed-state":return __webpack_require__.e(297).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-twitching-closed-state.entry.js")).then(processMod,consoleError);case"scale-icon-device-twitching-open-state":return __webpack_require__.e(298).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-device-twitching-open-state.entry.js")).then(processMod,consoleError);case"scale-icon-home-home":return __webpack_require__.e(299).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-home.entry.js")).then(processMod,consoleError);case"scale-icon-home-internet-at-home":return __webpack_require__.e(300).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-internet-at-home.entry.js")).then(processMod,consoleError);case"scale-icon-home-iot":return __webpack_require__.e(301).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-iot.entry.js")).then(processMod,consoleError);case"scale-icon-home-light-bulb":return __webpack_require__.e(302).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-light-bulb.entry.js")).then(processMod,consoleError);case"scale-icon-home-network-secure":return __webpack_require__.e(303).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-network-secure.entry.js")).then(processMod,consoleError);case"scale-icon-home-no-wifi":return __webpack_require__.e(304).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-no-wifi.entry.js")).then(processMod,consoleError);case"scale-icon-home-power-socket":return __webpack_require__.e(305).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-power-socket.entry.js")).then(processMod,consoleError);case"scale-icon-home-preferred-wifi":return __webpack_require__.e(306).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-preferred-wifi.entry.js")).then(processMod,consoleError);case"scale-icon-home-reduced-wifi":return __webpack_require__.e(307).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-reduced-wifi.entry.js")).then(processMod,consoleError);case"scale-icon-home-slow-wifi":return __webpack_require__.e(308).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-slow-wifi.entry.js")).then(processMod,consoleError);case"scale-icon-home-smarthome":return __webpack_require__.e(309).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-smarthome.entry.js")).then(processMod,consoleError);case"scale-icon-home-unable-to-connect-to-router":return __webpack_require__.e(310).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-unable-to-connect-to-router.entry.js")).then(processMod,consoleError);case"scale-icon-home-wifi":return __webpack_require__.e(315).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-wifi.entry.js")).then(processMod,consoleError);case"scale-icon-home-wifi-connected":return __webpack_require__.e(311).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-wifi-connected.entry.js")).then(processMod,consoleError);case"scale-icon-home-wifi-connection-error":return __webpack_require__.e(312).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-wifi-connection-error.entry.js")).then(processMod,consoleError);case"scale-icon-home-wifi-manual-login":return __webpack_require__.e(313).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-wifi-manual-login.entry.js")).then(processMod,consoleError);case"scale-icon-home-wifi-no-wired-internet":return __webpack_require__.e(314).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-home-wifi-no-wired-internet.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-circle-top-up":return __webpack_require__.e(316).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-circle-top-up.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-external-link":return __webpack_require__.e(320).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-external-link.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-internal-link":return __webpack_require__.e(321).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-internal-link.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-left-condensed":return __webpack_require__.e(322).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-left-condensed.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-location":return __webpack_require__.e(324).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-location.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-map":return __webpack_require__.e(325).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-map.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-my-location":return __webpack_require__.e(326).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-my-location.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-right-condensed":return __webpack_require__.e(327).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-right-condensed.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-start":return __webpack_require__.e(329).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-start.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-top-up":return __webpack_require__.e(330).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-top-up.entry.js")).then(processMod,consoleError);case"scale-icon-process-order-status":return __webpack_require__.e(331).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-process-order-status.entry.js")).then(processMod,consoleError);case"scale-icon-process-processing":return __webpack_require__.e(332).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-process-processing.entry.js")).then(processMod,consoleError);case"scale-icon-process-sepa-transaction":return __webpack_require__.e(333).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-process-sepa-transaction.entry.js")).then(processMod,consoleError);case"scale-icon-service-devices-service":return __webpack_require__.e(334).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-devices-service.entry.js")).then(processMod,consoleError);case"scale-icon-service-maintanance":return __webpack_require__.e(335).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-maintanance.entry.js")).then(processMod,consoleError);case"scale-icon-service-manual":return __webpack_require__.e(336).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-manual.entry.js")).then(processMod,consoleError);case"scale-icon-service-one-time-password":return __webpack_require__.e(337).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-one-time-password.entry.js")).then(processMod,consoleError);case"scale-icon-service-services":return __webpack_require__.e(338).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-services.entry.js")).then(processMod,consoleError);case"scale-icon-service-support":return __webpack_require__.e(339).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-support.entry.js")).then(processMod,consoleError);case"scale-icon-service-vpn":return __webpack_require__.e(340).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-service-vpn.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-2fa-telekom-app":return __webpack_require__.e(341).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-2fa-telekom-app.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-magenta-cloud":return __webpack_require__.e(342).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-magenta-cloud.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-magenta-tv":return __webpack_require__.e(343).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-magenta-tv.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-magentaone":return __webpack_require__.e(344).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-magentaone.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-measure-internet-speed":return __webpack_require__.e(345).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-measure-internet-speed.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-seamless-connectivity":return __webpack_require__.e(346).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-seamless-connectivity.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-telekom-1t1":return __webpack_require__.e(347).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-telekom-1t1.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-telekom-plan":return __webpack_require__.e(348).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-telekom-plan.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-telekom-shop-b":return __webpack_require__.e(349).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-telekom-shop-b.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-usage":return __webpack_require__.e(350).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-usage.entry.js")).then(processMod,consoleError);case"scale-icon-t-product-voice":return __webpack_require__.e(351).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-t-product-voice.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-admin":return __webpack_require__.e(352).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-admin.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-analytics":return __webpack_require__.e(353).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-analytics.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-attachment":return __webpack_require__.e(354).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-attachment.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-audio-file":return __webpack_require__.e(355).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-audio-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-billing":return __webpack_require__.e(356).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-billing.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-boy":return __webpack_require__.e(357).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-boy.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-bussines-users":return __webpack_require__.e(358).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-bussines-users.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-communities":return __webpack_require__.e(359).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-communities.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-contacts":return __webpack_require__.e(361).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-contacts.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-contacts-from-cloud":return __webpack_require__.e(360).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-contacts-from-cloud.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-contracts":return __webpack_require__.e(362).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-contracts.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-draft-file":return __webpack_require__.e(363).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-draft-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-families":return __webpack_require__.e(364).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-families.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-family":return __webpack_require__.e(365).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-family.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-file":return __webpack_require__.e(367).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-file-collection":return __webpack_require__.e(366).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-file-collection.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-girl":return __webpack_require__.e(368).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-girl.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-handshake":return __webpack_require__.e(369).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-handshake.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-html-file":return __webpack_require__.e(370).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-html-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-id-card":return __webpack_require__.e(371).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-id-card.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-image-file":return __webpack_require__.e(372).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-image-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-logout":return __webpack_require__.e(373).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-logout.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-man":return __webpack_require__.e(374).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-man.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-pdf-file":return __webpack_require__.e(375).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-pdf-file.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-switch-users":return __webpack_require__.e(376).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-switch-users.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-videos":return __webpack_require__.e(377).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-videos.entry.js")).then(processMod,consoleError);case"scale-icon-user-file-woman":return __webpack_require__.e(378).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-user-file-woman.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy":return __webpack_require__.e(384).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy-rain":return __webpack_require__.e(379).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy-sleet":return __webpack_require__.e(380).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy-sleet.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy-snow":return __webpack_require__.e(381).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy-snow.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy-thunder-rain":return __webpack_require__.e(382).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy-thunder-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-cloudy-thunder-snow":return __webpack_require__.e(383).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-cloudy-thunder-snow.entry.js")).then(processMod,consoleError);case"scale-icon-weather-heavy-sleet":return __webpack_require__.e(385).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-heavy-sleet.entry.js")).then(processMod,consoleError);case"scale-icon-weather-heavy-snow":return __webpack_require__.e(386).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-heavy-snow.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-clear":return __webpack_require__.e(387).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-clear.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-cloudy-a":return __webpack_require__.e(388).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-cloudy-a.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-cloudy-b":return __webpack_require__.e(389).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-cloudy-b.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-rain":return __webpack_require__.e(390).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-sleet":return __webpack_require__.e(391).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-sleet.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-snow":return __webpack_require__.e(392).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-snow.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-thunder-rain":return __webpack_require__.e(393).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-thunder-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-moon-thunder-snow":return __webpack_require__.e(394).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-moon-thunder-snow.entry.js")).then(processMod,consoleError);case"scale-icon-weather-overcast":return __webpack_require__.e(395).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-overcast.entry.js")).then(processMod,consoleError);case"scale-icon-weather-rain":return __webpack_require__.e(396).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-sunny":return __webpack_require__.e(397).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-sunny.entry.js")).then(processMod,consoleError);case"scale-icon-weather-thunder-rain":return __webpack_require__.e(398).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-thunder-rain.entry.js")).then(processMod,consoleError);case"scale-icon-weather-thunder-snow":return __webpack_require__.e(399).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-weather-thunder-snow.entry.js")).then(processMod,consoleError);case"scale-input":return __webpack_require__.e(10).then(__webpack_require__.bind(null,"../components/dist/esm/scale-input.entry.js")).then(processMod,consoleError);case"scale-list":return __webpack_require__.e(52).then(__webpack_require__.bind(null,"../components/dist/esm/scale-list.entry.js")).then(processMod,consoleError);case"scale-list-item":return __webpack_require__.e(51).then(__webpack_require__.bind(null,"../components/dist/esm/scale-list-item.entry.js")).then(processMod,consoleError);case"scale-loading-spinner":return __webpack_require__.e(53).then(__webpack_require__.bind(null,"../components/dist/esm/scale-loading-spinner.entry.js")).then(processMod,consoleError);case"scale-menu-flyout-divider":return __webpack_require__.e(54).then(__webpack_require__.bind(null,"../components/dist/esm/scale-menu-flyout-divider.entry.js")).then(processMod,consoleError);case"scale-modal":return __webpack_require__.e(37).then(__webpack_require__.bind(null,"../components/dist/esm/scale-modal.entry.js")).then(processMod,consoleError);case"scale-notification":return __webpack_require__.e(38).then(__webpack_require__.bind(null,"../components/dist/esm/scale-notification.entry.js")).then(processMod,consoleError);case"scale-notification-banner":return __webpack_require__.e(15).then(__webpack_require__.bind(null,"../components/dist/esm/scale-notification-banner.entry.js")).then(processMod,consoleError);case"scale-notification-message":return __webpack_require__.e(16).then(__webpack_require__.bind(null,"../components/dist/esm/scale-notification-message.entry.js")).then(processMod,consoleError);case"scale-notification-toast":return __webpack_require__.e(17).then(__webpack_require__.bind(null,"../components/dist/esm/scale-notification-toast.entry.js")).then(processMod,consoleError);case"scale-radio-button":return __webpack_require__.e(19).then(__webpack_require__.bind(null,"../components/dist/esm/scale-radio-button.entry.js")).then(processMod,consoleError);case"scale-radio-button-group":return __webpack_require__.e(18).then(__webpack_require__.bind(null,"../components/dist/esm/scale-radio-button-group.entry.js")).then(processMod,consoleError);case"scale-rating-stars":return __webpack_require__.e(43).then(__webpack_require__.bind(null,"../components/dist/esm/scale-rating-stars.entry.js")).then(processMod,consoleError);case"scale-segment":return __webpack_require__.e(11).then(__webpack_require__.bind(null,"../components/dist/esm/scale-segment.entry.js")).then(processMod,consoleError);case"scale-segmented-button":return __webpack_require__.e(39).then(__webpack_require__.bind(null,"../components/dist/esm/scale-segmented-button.entry.js")).then(processMod,consoleError);case"scale-sidebar-nav":return __webpack_require__.e(40).then(__webpack_require__.bind(null,"../components/dist/esm/scale-sidebar-nav.entry.js")).then(processMod,consoleError);case"scale-sidebar-nav-collapsible":return __webpack_require__.e(55).then(__webpack_require__.bind(null,"../components/dist/esm/scale-sidebar-nav-collapsible.entry.js")).then(processMod,consoleError);case"scale-sidebar-nav-item":return __webpack_require__.e(56).then(__webpack_require__.bind(null,"../components/dist/esm/scale-sidebar-nav-item.entry.js")).then(processMod,consoleError);case"scale-slider":return __webpack_require__.e(20).then(__webpack_require__.bind(null,"../components/dist/esm/scale-slider.entry.js")).then(processMod,consoleError);case"scale-ssr-slot-fix":return __webpack_require__.e(401).then(__webpack_require__.bind(null,"../components/dist/esm/scale-ssr-slot-fix.entry.js")).then(processMod,consoleError);case"scale-tab-header":return __webpack_require__.e(21).then(__webpack_require__.bind(null,"../components/dist/esm/scale-tab-header.entry.js")).then(processMod,consoleError);case"scale-tab-nav":return __webpack_require__.e(41).then(__webpack_require__.bind(null,"../components/dist/esm/scale-tab-nav.entry.js")).then(processMod,consoleError);case"scale-tab-panel":return __webpack_require__.e(61).then(__webpack_require__.bind(null,"../components/dist/esm/scale-tab-panel.entry.js")).then(processMod,consoleError);case"scale-table":return __webpack_require__.e(22).then(__webpack_require__.bind(null,"../components/dist/esm/scale-table.entry.js")).then(processMod,consoleError);case"scale-telekom-app-shell":return __webpack_require__.e(402).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-app-shell.entry.js")).then(processMod,consoleError);case"scale-telekom-footer-data-back-compat":return __webpack_require__.e(403).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-footer-data-back-compat.entry.js")).then(processMod,consoleError);case"scale-telekom-footer-extended-navigation":return __webpack_require__.e(404).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-footer-extended-navigation.entry.js")).then(processMod,consoleError);case"scale-telekom-footer-extended-navigation-column":return __webpack_require__.e(57).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-footer-extended-navigation-column.entry.js")).then(processMod,consoleError);case"scale-telekom-header-data-back-compat":return __webpack_require__.e(12).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-header-data-back-compat.entry.js")).then(processMod,consoleError);case"scale-textarea":return __webpack_require__.e(23).then(__webpack_require__.bind(null,"../components/dist/esm/scale-textarea.entry.js")).then(processMod,consoleError);case"scale-toast":return __webpack_require__.e(6).then(__webpack_require__.bind(null,"../components/dist/esm/scale-toast.entry.js")).then(processMod,consoleError);case"scale-toggle-button":return __webpack_require__.e(24).then(__webpack_require__.bind(null,"../components/dist/esm/scale-toggle-button.entry.js")).then(processMod,consoleError);case"scale-toggle-group":return __webpack_require__.e(25).then(__webpack_require__.bind(null,"../components/dist/esm/scale-toggle-group.entry.js")).then(processMod,consoleError);case"scale-tooltip":return Promise.all([__webpack_require__.e(0),__webpack_require__.e(405)]).then(__webpack_require__.bind(null,"../components/dist/esm/scale-tooltip.entry.js")).then(processMod,consoleError);case"duet-date-picker_2":return __webpack_require__.e(28).then(__webpack_require__.bind(null,"../components/dist/esm/duet-date-picker_2.entry.js")).then(processMod,consoleError);case"scale-app-header":return __webpack_require__.e(7).then(__webpack_require__.bind(null,"../components/dist/esm/scale-app-header.entry.js")).then(processMod,consoleError);case"scale-badge_12":return __webpack_require__.e(13).then(__webpack_require__.bind(null,"../components/dist/esm/scale-badge_12.entry.js")).then(processMod,consoleError);case"scale-card":return __webpack_require__.e(48).then(__webpack_require__.bind(null,"../components/dist/esm/scale-card.entry.js")).then(processMod,consoleError);case"scale-dropdown-select_13":return Promise.all([__webpack_require__.e(0),__webpack_require__.e(35)]).then(__webpack_require__.bind(null,"../components/dist/esm/scale-dropdown-select_13.entry.js")).then(processMod,consoleError);case"scale-icon-action-favorite":return __webpack_require__.e(90).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-favorite.entry.js")).then(processMod,consoleError);case"scale-telekom-footer_2":return __webpack_require__.e(58).then(__webpack_require__.bind(null,"../components/dist/esm/scale-telekom-footer_2.entry.js")).then(processMod,consoleError);case"app-mega-menu_8":return __webpack_require__.e(5).then(__webpack_require__.bind(null,"../components/dist/esm/app-mega-menu_8.entry.js")).then(processMod,consoleError);case"scale-checkbox_2":return __webpack_require__.e(42).then(__webpack_require__.bind(null,"../components/dist/esm/scale-checkbox_2.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-collapse-up":return __webpack_require__.e(318).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-collapse-up.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-double-left_2":return __webpack_require__.e(319).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-double-left_2.entry.js")).then(processMod,consoleError);case"scale-icon-action-circle-close_2":return __webpack_require__.e(77).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-circle-close_2.entry.js")).then(processMod,consoleError);case"scale-link":return __webpack_require__.e(400).then(__webpack_require__.bind(null,"../components/dist/esm/scale-link.entry.js")).then(processMod,consoleError);case"scale-button_3":return __webpack_require__.e(31).then(__webpack_require__.bind(null,"../components/dist/esm/scale-button_3.entry.js")).then(processMod,consoleError);case"scale-icon-action-close":return __webpack_require__.e(78).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-close.entry.js")).then(processMod,consoleError);case"scale-helper-text":return __webpack_require__.e(63).then(__webpack_require__.bind(null,"../components/dist/esm/scale-helper-text.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-collapse-down":return __webpack_require__.e(317).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-collapse-down.entry.js")).then(processMod,consoleError);case"scale-logo_2":return __webpack_require__.e(36).then(__webpack_require__.bind(null,"../components/dist/esm/scale-logo_2.entry.js")).then(processMod,consoleError);case"scale-icon":return __webpack_require__.e(50).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon.entry.js")).then(processMod,consoleError);case"scale-icon-action-checkmark":return __webpack_require__.e(75).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-checkmark.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-left":return __webpack_require__.e(323).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-left.entry.js")).then(processMod,consoleError);case"scale-icon-navigation-right":return __webpack_require__.e(328).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-navigation-right.entry.js")).then(processMod,consoleError);case"scale-icon-action-success_3":return __webpack_require__.e(135).then(__webpack_require__.bind(null,"../components/dist/esm/scale-icon-action-success_3.entry.js")).then(processMod,consoleError)}}return __webpack_require__("../components/dist/esm lazy recursive ^\\.\\/.*\\.entry\\.js$ include: \\.entry\\.js$ exclude: \\.system\\.entry\\.js$")("./"+bundleId+".entry.js").then((function(importedModule){return cmpModules.set(bundleId,importedModule),importedModule[exportName]}),consoleError)},styles=new Map,queueDomReads=[],queueDomWrites=[],queueTask=function queueTask(queue,write){return function(cb){queue.push(cb),queuePending||(queuePending=!0,write&&4&plt.$flags$?nextTick(flush):plt.raf(flush))}},consume=function consume(queue){for(var i=0;i<queue.length;i++)try{queue[i](performance.now())}catch(e){consoleError(e)}queue.length=0},flush=function flush(){consume(queueDomReads),consume(queueDomWrites),(queuePending=queueDomReads.length>0)&&plt.raf(flush)},nextTick=function nextTick(cb){return promiseResolve().then(cb)},writeTask=queueTask(queueDomWrites,!0)},"../components/dist/scale-components/components/icons/scale-icons.json":function(module){module.exports=JSON.parse('[{"label":"Action","category":"action","items":["add","add-card","arrange","arrow-left","arrow-right","arrow-down","arrow-up","auto-login","backspace","backward","changelog","checkmark","circle-add","circle-close","close","compare","copy-paste","cut-paste","disabled-microphone","download","download-from-cloud","drag-and-drop","edit","export","fast-forward","fast-forward-nb","favorite","filter","filter-2","forward","full-screen","hide-password","import","install","launch","light-dark-mode","link","logout","loop","menu","microphone","minimize-screen","minus","minus-circle","more","move","mute","notification","pause","pause-nb","pin","play","play-nb","pop-up-window","power","previous-nb","print","publish","random","record-nb","refresh","remove","reply","reply-all","reply-forward","restart","search","send","share","shopping-cart","show-password","sort","sound-on","star","stream-on","success","thumbs-down","thumbs-up","tiles-add","upload","upload-to-cloud","volume-down","volume-up","zoom-in","zoom-out"]},{"label":"Alert","category":"alert","items":["antivirus-protection","compliance","cyber-security","error","help","high-priority-email","imprint-dataprivacy","information","legal","network-disrupted","password-breaking","security","traffic-disruption","unknown","warning"]},{"label":"Communication","category":"communication","items":["available","blog","call-incoming","call-outgoing","chat","chat-badge","email","end-call","feedback","flight-mode","happy-person","inbox","landing-mobile-contact-client","loyalty-earned","loyalty-lost","mail-opened","message","message-incoming","message-outgoing","mms-incoming","mms-outgoing","mobile-phone-number","network-signal","new-email","outbox","phone-number","recipient","save-emails-to-drafts","sms","spam","voice-message"]},{"label":"Content","category":"content","items":["2fa-google-auth","achievement","android","apple","applications","available-keychain","bank","biometric","birthday","bookmark","calendar","clipboard","clock","cloud-security","code-scanner","color-selection","country","credit-card","data-visualisation","delivery","digital-banking","digital-media","discount","e-sim","eu","face-mask","features","flexible-tariffs","folder","food","gender-diverse","gender-female","gender-male","half-rating","heart","height","history","hour-glass","iban","id","in-stock","international","international-sms","interview","key","language","lock","loyalty","media-folder","money-at","music","news","out-of-stock","person-walking","prepaid-activate","price-tag","ratings","route","rss","shop","signal","sim-card","smile","sort-indicator-down","sort-indicator-mini-down","sort-indicator-up","sort-indicator-up-mini","status-inactive","status-recurring","stopwatch","support-chat","sustainable","tariffs","threats","todo-list","transport","unlock","voucher","waiting","wallet"]},{"label":"Device","category":"device","items":["add-device","camera","change-camera","computer","device-controller","device-ethernet","device-mesh","device-phone","device-router","device-tv","device-watch","dongle","fax","fixed-line-services","game-controller","media-receiver","mobile-data","mobile-devices-combination","mobile-equipment","mobile-phone-insurance","mobile-services","no-camera","phone-with-mobile-plan","phone-without-mobile-plan","photo-camera","remote-controller","replacement-mobilephone","screen-rotate","server","smart-speaker","tablet","tv-and-mobile","twitching-closed-state","twitching-open-state"]},{"label":"Home","category":"home","items":["home","internet-at-home","iot","light-bulb","network-secure","no-wifi","power-socket","preferred-wifi","reduced-wifi","slow-wifi","smarthome","unable-to-connect-to-router","wifi","wifi-connected","wifi-connection-error","wifi-manual-login","wifi-no-wired-internet"]},{"label":"Navigation","category":"navigation","items":["circle-top-up","collapse-down","collapse-up","double-left","double-right","external-link","internal-link","left","left-condensed","location","map","my-location","right","right-condensed","start","top-up"]},{"label":"Process","category":"process","items":["order-status","processing","sepa-transaction"]},{"label":"Service","category":"service","items":["devices-service","maintanance","manual","one-time-password","services","settings","support","vpn"]},{"label":"T Product","category":"t-product","items":["2fa-telekom-app","magenta-cloud","magenta-tv","magentaone","measure-internet-speed","seamless-connectivity","telekom-1t1","telekom-plan","telekom-shop-b","usage","voice"]},{"label":"User File","category":"user-file","items":["admin","analytics","attachment","audio-file","billing","boy","bussines-users","communities","contacts","contacts-from-cloud","contracts","draft-file","families","family","file","file-collection","girl","handshake","html-file","id-card","image-file","logout","man","pdf-file","switch-users","user","videos","woman"]},{"label":"Weather","category":"weather","items":["cloudy","cloudy-rain","cloudy-sleet","cloudy-snow","cloudy-thunder-rain","cloudy-thunder-snow","heavy-sleet","heavy-snow","moon-clear","moon-cloudy-a","moon-cloudy-b","moon-rain","moon-sleet","moon-snow","moon-thunder-rain","moon-thunder-snow","overcast","rain","sunny","thunder-rain","thunder-snow"]}]')},"./.storybook/preview.js-generated-config-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,"parameters",(function(){return parameters}));__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var ClientApi=__webpack_require__("../../node_modules/@storybook/client-api/dist/esm/ClientApi.js"),esm=__webpack_require__("../../node_modules/@storybook/client-logger/dist/esm/index.js"),vue_esm=__webpack_require__("../../node_modules/vue/dist/vue.esm.js");__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.url.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.entries.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.starts-with.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.ends-with.js"),__webpack_require__("../../node_modules/core-js/modules/es.weak-map.js");var index_6d95a4bc=__webpack_require__("../components/dist/esm/index-6d95a4bc.js"),loader_defineCustomElements=function defineCustomElements(win,options){return"undefined"==typeof window?Promise.resolve():function patchEsm(){return Object(index_6d95a4bc.h)()}().then((function(){return Object(index_6d95a4bc.d)(JSON.parse('[["scale-icon",[[0,"scale-icon",{"name":[1],"path":[1],"size":[514],"fill":[1],"stroke":[1],"focusable":[4],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"]}]]],["scale-data-grid",[[1,"scale-data-grid",{"fields":[8],"freezeHeader":[4,"freeze-header"],"heading":[1],"height":[1],"hideBorder":[4,"hide-border"],"hideHeader":[4,"hide-header"],"hideInfo":[4,"hide-info"],"hideMenu":[4,"hide-menu"],"numbered":[4],"pageSize":[2,"page-size"],"rows":[8],"selectable":[4],"selection":[16],"shadeAlternate":[4,"shade-alternate"],"styles":[8],"visible":[4],"sortableColumnTitle":[1,"sortable-column-title"],"localization":[16],"forceRender":[32],"paginationStart":[32],"scrollY":[32]}]]],["scale-telekom-header-data-back-compat",[[0,"scale-telekom-header-data-back-compat",{"appName":[513,"app-name"],"appNameLink":[1,"app-name-link"],"appNameClick":[8,"app-name-click"],"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"],"mainNavigation":[8,"main-navigation"],"iconNavigation":[8,"icon-navigation"],"addonNavigation":[8,"addon-navigation"],"sectorNavigation":[8,"sector-navigation"],"userNavigation":[8,"user-navigation"],"activeRouteId":[1,"active-route-id"]}]]],["scale-app-shell",[[1,"scale-app-shell",{"portalName":[1,"portal-name"],"claimLang":[1,"claim-lang"],"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"],"logoClick":[8,"logo-click"],"logoAriaDescribedBy":[1,"logo-aria-described-by"],"mainNavigation":[8,"main-navigation"],"iconNavigation":[8,"icon-navigation"],"userNavigation":[8,"user-navigation"],"sectorNavigation":[8,"sector-navigation"],"addonNavigation":[8,"addon-navigation"],"activeRouteId":[1,"active-route-id"],"activeSectorId":[1,"active-sector-id"],"userMenuAriaLabel":[1,"user-menu-aria-label"],"sticky":[4],"styles":[1],"scrolled":[32]}]]],["scale-date-picker",[[0,"scale-date-picker",{"name":[1],"popupTitle":[1,"popup-title"],"identifier":[1025],"disabled":[516],"innerRole":[1,"inner-role"],"direction":[1],"required":[4],"value":[1537],"min":[1],"max":[1],"firstDayOfWeek":[8,"first-day-of-week"],"localization":[16],"dateAdapter":[8,"date-adapter"],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"label":[1],"styles":[1],"placeholder":[1],"size":[1],"variant":[1],"hasFocus":[32],"hasValue":[32],"setFocus":[64],"show":[64],"hide":[64]}]]],["scale-notification-banner",[[1,"scale-notification-banner",{"variant":[1],"dismissible":[4],"opened":[516],"autoHide":[4,"auto-hide"],"autoHideDuration":[2,"auto-hide-duration"],"href":[1],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"],"open":[64]}]]],["scale-notification-toast",[[1,"scale-notification-toast",{"variant":[1],"opened":[516],"animated":[4],"alignment":[1],"positionVertical":[2,"position-vertical"],"positionHorizontal":[2,"position-horizontal"],"autoHide":[4,"auto-hide"],"autoHideDuration":[2,"auto-hide-duration"],"fadeDuration":[2,"fade-duration"],"styles":[513],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"],"story":[4],"href":[1],"toastHeightWithOffset":[32],"open":[64]}]]],["scale-checkbox-group",[[4,"scale-checkbox-group",{"name":[1],"label":[1],"ariaLabelCheckboxGroup":[1,"aria-label-checkbox-group"],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"value":[1],"inputId":[1025,"input-id"],"styles":[1],"selectText":[1,"select-text"],"unselectText":[1,"unselect-text"],"checked":[32],"indeterminate":[32],"disabled":[32]},[[0,"scaleChange","handleCheckboxChange"]]]]],["scale-dropdown",[[4,"scale-dropdown",{"name":[1],"label":[1],"helperText":[1,"helper-text"],"status":[1],"size":[1],"invalid":[4],"variant":[1],"disabled":[4],"required":[4],"value":[1032],"inputId":[1,"input-id"],"multiple":[4],"visibleSize":[2,"visible-size"],"transparent":[4],"controlled":[4],"hideLabelVisually":[4,"hide-label-visually"],"styles":[1],"forceUpdate":[32]}]]],["scale-notification-message",[[1,"scale-notification-message",{"variant":[1],"dismissible":[4],"opened":[516],"autoHide":[4,"auto-hide"],"autoHideDuration":[2,"auto-hide-duration"],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"],"open":[64]}]]],["scale-segmented-button",[[1,"scale-segmented-button",{"size":[1],"multiSelect":[4,"multi-select"],"selectedIndex":[2,"selected-index"],"disabled":[516],"fullWidth":[4,"full-width"],"invalid":[4],"helperText":[1,"helper-text"],"label":[1],"styles":[1],"ariaLabelTranslation":[1,"aria-label-translation"],"longestButtonWidth":[1025,"longest-button-width"],"status":[32]},[[0,"scaleClick","scaleClickHandler"]]]]],["scale-telekom-footer-data-back-compat",[[0,"scale-telekom-footer-data-back-compat",{"type":[513],"footerNavigation":[8,"footer-navigation"],"copyright":[1]}]]],["scale-textarea",[[0,"scale-textarea",{"name":[1],"label":[1],"rows":[2],"cols":[2],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"variant":[1],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"placeholder":[1],"disabled":[4],"readonly":[4],"required":[4],"counter":[4],"resize":[1],"value":[1032],"inputId":[1,"input-id"],"transparent":[4],"inputAutofocus":[4,"input-autofocus"],"styles":[1],"hasFocus":[32]}]]],["scale-app-footer",[[1,"scale-app-footer",{"footerNavigation":[8,"footer-navigation"],"variant":[1],"copyright":[1],"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoClick":[8,"logo-click"],"logoAriaDescribedBy":[1,"logo-aria-described-by"],"styles":[1]}]]],["scale-chip",[[1,"scale-chip",{"variant":[1],"type":[1],"selected":[4],"ariaRoleTitle":[1,"aria-role-title"],"ariaCheckedState":[4,"aria-checked-state"],"label":[1],"disabled":[4],"dismissText":[1,"dismiss-text"],"styles":[1]}]]],["scale-notification",[[1,"scale-notification",{"heading":[1],"type":[1],"variant":[1],"opened":[1540],"dismissible":[4],"delay":[2],"innerAriaLive":[1,"inner-aria-live"],"innerRole":[1,"inner-role"],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"],"headingLevel":[2,"heading-level"],"ariaHeading":[1,"aria-heading"],"styles":[1],"isOpen":[32],"animationState":[32],"hasTextSlot":[32]}]]],["scale-radio-button",[[0,"scale-radio-button",{"name":[1],"label":[1],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"disabled":[4],"checked":[516],"value":[1032],"inputId":[1,"input-id"],"styles":[1]}]]],["scale-radio-button-group",[[1,"scale-radio-button-group",{"label":[1],"helperText":[1,"helper-text"],"status":[1],"invalid":[4]}]]],["scale-breadcrumb",[[1,"scale-breadcrumb",{"separator":[1],"styles":[1],"linksArray":[32],"separatorSlot":[32]}]]],["scale-chart-stack-card",[[0,"scale-chart-stack-card",{"data":[1],"heading":[1]}]]],["scale-input",[[4,"scale-input",{"type":[1],"name":[1],"variant":[1],"label":[1],"size":[1],"rows":[2],"cols":[2],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"placeholder":[1],"disabled":[4],"required":[4],"counter":[4],"checked":[516],"resize":[1],"value":[1032],"inputId":[1,"input-id"],"icon":[1],"multiple":[4],"visibleSize":[2,"visible-size"],"transparent":[4],"controlled":[4],"styles":[1],"customResize":[32],"hasFocus":[32],"forceUpdate":[32]}]]],["scale-modal",[[1,"scale-modal",{"heading":[1],"size":[1],"opened":[1540],"duration":[2],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"],"omitCloseButton":[4,"omit-close-button"],"alignActions":[1,"align-actions"],"styles":[1],"allowInjectingStyleToBody":[4,"allow-injecting-style-to-body"],"isOpen":[32],"hasActionsSlot":[32],"hasBody":[32],"hasScroll":[32],"bodyOverflowValue":[32]}]]],["scale-rating-stars",[[1,"scale-rating-stars",{"starSize":[1,"star-size"],"size":[1537],"minRating":[2,"min-rating"],"maxRating":[2,"max-rating"],"max":[1538],"rating":[1538],"readonly":[516],"disabled":[516],"ariaLabelTranslation":[1,"aria-label-translation"],"label":[513],"hideLabel":[516,"hide-label"],"infoText":[1,"info-text"]}]]],["scale-segment",[[1,"scale-segment",{"size":[1],"selected":[1028],"disabled":[4],"segmentId":[1537,"segment-id"],"ariaLabelSegment":[1,"aria-label-segment"],"width":[1],"styles":[1],"adjacentSiblings":[1537,"adjacent-siblings"],"ariaLangSelected":[1,"aria-lang-selected"],"ariaLangDeselected":[1,"aria-lang-deselected"],"ariaDescriptionTranslation":[1,"aria-description-translation"],"position":[2],"hasIcon":[1028,"has-icon"],"textOnly":[1028,"text-only"],"iconOnly":[1028,"icon-only"],"selectedIndex":[1025,"selected-index"],"setFocus":[64]}]]],["scale-sidebar-nav",[[1,"scale-sidebar-nav",{"ariaLabelSidebarNav":[1,"aria-label-sidebar-nav"],"collapsible":[1540],"collapsibleMediaQuery":[1,"collapsible-media-query"],"collapsibleLabel":[1,"collapsible-label"],"styles":[1],"collapsed":[32]}]]],["scale-sidebar-nav-collapsible",[[1,"scale-sidebar-nav-collapsible",{"tag":[1],"label":[1],"href":[1],"expanded":[1540],"active":[4],"bold":[4],"condensed":[4],"nestingLevel":[2,"nesting-level"],"styles":[1]}]]],["scale-telekom-footer-extended-navigation-column",[[1,"scale-telekom-footer-extended-navigation-column",{"heading":[1],"expanded":[516],"headingLevel":[1,"heading-level"]}]]],["app-logo",[[0,"app-logo",{"href":[1],"logoTitle":[1,"logo-title"],"color":[1],"claim":[4],"claimLang":[1,"claim-lang"],"focusable":[4]}]]],["scale-accordion",[[1,"scale-accordion",{"styles":[1],"dependent":[4],"expanded":[4],"headingLevel":[2,"heading-level"],"iconLocation":[1,"icon-location"]},[[0,"scale-expand","collapsibleHandler"]]]]],["scale-alert",[[1,"scale-alert",{"size":[1],"variant":[1],"headline":[513],"opened":[516],"timeout":[8],"icon":[1],"styles":[1],"open":[64]}]]],["scale-callout",[[1,"scale-callout",{"variant":[1],"rotation":[2],"top":[1],"right":[1],"bottom":[1],"left":[1],"styles":[1]}]]],["scale-carousel",[[1,"scale-carousel",{"vertical":[4],"styles":[1],"slidesArray":[32],"value":[32]}]]],["scale-collapsible",[[1,"scale-collapsible",{"expanded":[1540],"headingLevel":[2,"heading-level"],"styles":[1],"iconLocation":[1,"icon-location"]}]]],["scale-divider",[[1,"scale-divider",{"vertical":[4],"styles":[1]}]]],["scale-grid",[[4,"scale-grid",{"columns":[1],"gutterY":[1,"gutter-y"],"gutterX":[1,"gutter-x"],"spacing":[1],"maxWidth":[1,"max-width"]}]]],["scale-grid-item",[[4,"scale-grid-item",{"size":[1],"offset":[1]}]]],["scale-icon-action-add",[[0,"scale-icon-action-add",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-add-card",[[0,"scale-icon-action-add-card",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-arrange",[[0,"scale-icon-action-arrange",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-arrow-down",[[0,"scale-icon-action-arrow-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-arrow-left",[[0,"scale-icon-action-arrow-left",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-arrow-right",[[0,"scale-icon-action-arrow-right",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-arrow-up",[[0,"scale-icon-action-arrow-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-auto-login",[[0,"scale-icon-action-auto-login",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-backspace",[[0,"scale-icon-action-backspace",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-backward",[[0,"scale-icon-action-backward",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-changelog",[[0,"scale-icon-action-changelog",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-circle-add",[[0,"scale-icon-action-circle-add",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-compare",[[0,"scale-icon-action-compare",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-copy-paste",[[0,"scale-icon-action-copy-paste",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-cut-paste",[[0,"scale-icon-action-cut-paste",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-disabled-microphone",[[0,"scale-icon-action-disabled-microphone",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-download",[[0,"scale-icon-action-download",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-download-from-cloud",[[0,"scale-icon-action-download-from-cloud",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-drag-and-drop",[[0,"scale-icon-action-drag-and-drop",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-edit",[[0,"scale-icon-action-edit",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-export",[[0,"scale-icon-action-export",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-fast-forward",[[0,"scale-icon-action-fast-forward",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-fast-forward-nb",[[0,"scale-icon-action-fast-forward-nb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-filter",[[0,"scale-icon-action-filter",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-filter-2",[[0,"scale-icon-action-filter-2",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-forward",[[0,"scale-icon-action-forward",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-full-screen",[[0,"scale-icon-action-full-screen",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-import",[[0,"scale-icon-action-import",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-install",[[0,"scale-icon-action-install",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-launch",[[0,"scale-icon-action-launch",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-light-dark-mode",[[0,"scale-icon-action-light-dark-mode",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-link",[[0,"scale-icon-action-link",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-logout",[[0,"scale-icon-action-logout",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-loop",[[0,"scale-icon-action-loop",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-microphone",[[0,"scale-icon-action-microphone",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-minimize-screen",[[0,"scale-icon-action-minimize-screen",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-minus-circle",[[0,"scale-icon-action-minus-circle",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-more",[[0,"scale-icon-action-more",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-move",[[0,"scale-icon-action-move",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-mute",[[0,"scale-icon-action-mute",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-notification",[[0,"scale-icon-action-notification",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-pause",[[0,"scale-icon-action-pause",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-pause-nb",[[0,"scale-icon-action-pause-nb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-pin",[[0,"scale-icon-action-pin",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-play",[[0,"scale-icon-action-play",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-play-nb",[[0,"scale-icon-action-play-nb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-pop-up-window",[[0,"scale-icon-action-pop-up-window",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-power",[[0,"scale-icon-action-power",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-previous-nb",[[0,"scale-icon-action-previous-nb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-print",[[0,"scale-icon-action-print",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-publish",[[0,"scale-icon-action-publish",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-random",[[0,"scale-icon-action-random",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-record-nb",[[0,"scale-icon-action-record-nb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-refresh",[[0,"scale-icon-action-refresh",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-remove",[[0,"scale-icon-action-remove",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-reply",[[0,"scale-icon-action-reply",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-reply-all",[[0,"scale-icon-action-reply-all",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-reply-forward",[[0,"scale-icon-action-reply-forward",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-restart",[[0,"scale-icon-action-restart",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-search",[[0,"scale-icon-action-search",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-send",[[0,"scale-icon-action-send",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-share",[[0,"scale-icon-action-share",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-shopping-cart",[[0,"scale-icon-action-shopping-cart",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-show-password",[[0,"scale-icon-action-show-password",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-sound-on",[[0,"scale-icon-action-sound-on",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-star",[[0,"scale-icon-action-star",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-stream-on",[[0,"scale-icon-action-stream-on",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-thumbs-down",[[0,"scale-icon-action-thumbs-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-thumbs-up",[[0,"scale-icon-action-thumbs-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-tiles-add",[[0,"scale-icon-action-tiles-add",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-upload",[[0,"scale-icon-action-upload",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-upload-to-cloud",[[0,"scale-icon-action-upload-to-cloud",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-volume-down",[[0,"scale-icon-action-volume-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-volume-up",[[0,"scale-icon-action-volume-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-zoom-in",[[0,"scale-icon-action-zoom-in",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-zoom-out",[[0,"scale-icon-action-zoom-out",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-antivirus-protection",[[0,"scale-icon-alert-antivirus-protection",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-compliance",[[0,"scale-icon-alert-compliance",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-cyber-security",[[0,"scale-icon-alert-cyber-security",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-help",[[0,"scale-icon-alert-help",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-high-priority-email",[[0,"scale-icon-alert-high-priority-email",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-imprint-dataprivacy",[[0,"scale-icon-alert-imprint-dataprivacy",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-legal",[[0,"scale-icon-alert-legal",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-network-disrupted",[[0,"scale-icon-alert-network-disrupted",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-password-breaking",[[0,"scale-icon-alert-password-breaking",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-security",[[0,"scale-icon-alert-security",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-traffic-disruption",[[0,"scale-icon-alert-traffic-disruption",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-alert-unknown",[[0,"scale-icon-alert-unknown",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-available",[[0,"scale-icon-communication-available",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-blog",[[0,"scale-icon-communication-blog",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-call-incoming",[[0,"scale-icon-communication-call-incoming",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-call-outgoing",[[0,"scale-icon-communication-call-outgoing",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-chat",[[0,"scale-icon-communication-chat",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-chat-badge",[[0,"scale-icon-communication-chat-badge",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-email",[[0,"scale-icon-communication-email",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-end-call",[[0,"scale-icon-communication-end-call",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-feedback",[[0,"scale-icon-communication-feedback",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-flight-mode",[[0,"scale-icon-communication-flight-mode",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-happy-person",[[0,"scale-icon-communication-happy-person",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-inbox",[[0,"scale-icon-communication-inbox",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-landing-mobile-contact-client",[[0,"scale-icon-communication-landing-mobile-contact-client",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-loyalty-earned",[[0,"scale-icon-communication-loyalty-earned",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-loyalty-lost",[[0,"scale-icon-communication-loyalty-lost",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-mail-opened",[[0,"scale-icon-communication-mail-opened",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-message",[[0,"scale-icon-communication-message",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-message-incoming",[[0,"scale-icon-communication-message-incoming",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-message-outgoing",[[0,"scale-icon-communication-message-outgoing",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-mms-incoming",[[0,"scale-icon-communication-mms-incoming",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-mms-outgoing",[[0,"scale-icon-communication-mms-outgoing",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-mobile-phone-number",[[0,"scale-icon-communication-mobile-phone-number",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-network-signal",[[0,"scale-icon-communication-network-signal",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-new-email",[[0,"scale-icon-communication-new-email",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-outbox",[[0,"scale-icon-communication-outbox",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-phone-number",[[0,"scale-icon-communication-phone-number",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-recipient",[[0,"scale-icon-communication-recipient",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-save-emails-to-drafts",[[0,"scale-icon-communication-save-emails-to-drafts",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-sms",[[0,"scale-icon-communication-sms",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-spam",[[0,"scale-icon-communication-spam",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-communication-voice-message",[[0,"scale-icon-communication-voice-message",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-2fa-google-auth",[[0,"scale-icon-content-2fa-google-auth",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-achievement",[[0,"scale-icon-content-achievement",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-android",[[0,"scale-icon-content-android",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-apple",[[0,"scale-icon-content-apple",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-applications",[[0,"scale-icon-content-applications",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-available-keychain",[[0,"scale-icon-content-available-keychain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-bank",[[0,"scale-icon-content-bank",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-biometric",[[0,"scale-icon-content-biometric",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-birthday",[[0,"scale-icon-content-birthday",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-bookmark",[[0,"scale-icon-content-bookmark",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-clipboard",[[0,"scale-icon-content-clipboard",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-clock",[[0,"scale-icon-content-clock",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-cloud-security",[[0,"scale-icon-content-cloud-security",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-code-scanner",[[0,"scale-icon-content-code-scanner",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-color-selection",[[0,"scale-icon-content-color-selection",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-country",[[0,"scale-icon-content-country",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-credit-card",[[0,"scale-icon-content-credit-card",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-data-visualisation",[[0,"scale-icon-content-data-visualisation",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-delivery",[[0,"scale-icon-content-delivery",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-digital-banking",[[0,"scale-icon-content-digital-banking",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-digital-media",[[0,"scale-icon-content-digital-media",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-discount",[[0,"scale-icon-content-discount",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-e-sim",[[0,"scale-icon-content-e-sim",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-eu",[[0,"scale-icon-content-eu",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-face-mask",[[0,"scale-icon-content-face-mask",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-features",[[0,"scale-icon-content-features",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-flexible-tariffs",[[0,"scale-icon-content-flexible-tariffs",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-folder",[[0,"scale-icon-content-folder",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-food",[[0,"scale-icon-content-food",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-gender-diverse",[[0,"scale-icon-content-gender-diverse",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-gender-female",[[0,"scale-icon-content-gender-female",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-gender-male",[[0,"scale-icon-content-gender-male",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-half-rating",[[0,"scale-icon-content-half-rating",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-heart",[[0,"scale-icon-content-heart",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-height",[[0,"scale-icon-content-height",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-history",[[0,"scale-icon-content-history",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-hour-glass",[[0,"scale-icon-content-hour-glass",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-iban",[[0,"scale-icon-content-iban",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-id",[[0,"scale-icon-content-id",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-in-stock",[[0,"scale-icon-content-in-stock",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-international",[[0,"scale-icon-content-international",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-international-sms",[[0,"scale-icon-content-international-sms",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-interview",[[0,"scale-icon-content-interview",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-key",[[0,"scale-icon-content-key",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-language",[[0,"scale-icon-content-language",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-lock",[[0,"scale-icon-content-lock",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-loyalty",[[0,"scale-icon-content-loyalty",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-media-folder",[[0,"scale-icon-content-media-folder",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-money-at",[[0,"scale-icon-content-money-at",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-music",[[0,"scale-icon-content-music",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-news",[[0,"scale-icon-content-news",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-out-of-stock",[[0,"scale-icon-content-out-of-stock",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-person-walking",[[0,"scale-icon-content-person-walking",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-prepaid-activate",[[0,"scale-icon-content-prepaid-activate",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-price-tag",[[0,"scale-icon-content-price-tag",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-ratings",[[0,"scale-icon-content-ratings",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-route",[[0,"scale-icon-content-route",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-rss",[[0,"scale-icon-content-rss",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-shop",[[0,"scale-icon-content-shop",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-signal",[[0,"scale-icon-content-signal",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-sim-card",[[0,"scale-icon-content-sim-card",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-smile",[[0,"scale-icon-content-smile",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-sort-indicator-mini-down",[[0,"scale-icon-content-sort-indicator-mini-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-sort-indicator-up-mini",[[0,"scale-icon-content-sort-indicator-up-mini",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-status-inactive",[[0,"scale-icon-content-status-inactive",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-status-recurring",[[0,"scale-icon-content-status-recurring",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-stopwatch",[[0,"scale-icon-content-stopwatch",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-support-chat",[[0,"scale-icon-content-support-chat",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-sustainable",[[0,"scale-icon-content-sustainable",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-tariffs",[[0,"scale-icon-content-tariffs",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-threats",[[0,"scale-icon-content-threats",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-todo-list",[[0,"scale-icon-content-todo-list",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-transport",[[0,"scale-icon-content-transport",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-unlock",[[0,"scale-icon-content-unlock",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-voucher",[[0,"scale-icon-content-voucher",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-waiting",[[0,"scale-icon-content-waiting",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-content-wallet",[[0,"scale-icon-content-wallet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-add-device",[[0,"scale-icon-device-add-device",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-camera",[[0,"scale-icon-device-camera",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-change-camera",[[0,"scale-icon-device-change-camera",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-computer",[[0,"scale-icon-device-computer",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-controller",[[0,"scale-icon-device-device-controller",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-ethernet",[[0,"scale-icon-device-device-ethernet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-mesh",[[0,"scale-icon-device-device-mesh",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-phone",[[0,"scale-icon-device-device-phone",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-router",[[0,"scale-icon-device-device-router",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-tv",[[0,"scale-icon-device-device-tv",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-device-watch",[[0,"scale-icon-device-device-watch",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-dongle",[[0,"scale-icon-device-dongle",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-fax",[[0,"scale-icon-device-fax",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-fixed-line-services",[[0,"scale-icon-device-fixed-line-services",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-game-controller",[[0,"scale-icon-device-game-controller",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-media-receiver",[[0,"scale-icon-device-media-receiver",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-mobile-data",[[0,"scale-icon-device-mobile-data",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-mobile-devices-combination",[[0,"scale-icon-device-mobile-devices-combination",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-mobile-equipment",[[0,"scale-icon-device-mobile-equipment",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-mobile-phone-insurance",[[0,"scale-icon-device-mobile-phone-insurance",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-mobile-services",[[0,"scale-icon-device-mobile-services",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-no-camera",[[0,"scale-icon-device-no-camera",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-phone-with-mobile-plan",[[0,"scale-icon-device-phone-with-mobile-plan",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-phone-without-mobile-plan",[[0,"scale-icon-device-phone-without-mobile-plan",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-photo-camera",[[0,"scale-icon-device-photo-camera",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-remote-controller",[[0,"scale-icon-device-remote-controller",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-replacement-mobilephone",[[0,"scale-icon-device-replacement-mobilephone",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-screen-rotate",[[0,"scale-icon-device-screen-rotate",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-server",[[0,"scale-icon-device-server",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-smart-speaker",[[0,"scale-icon-device-smart-speaker",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-tablet",[[0,"scale-icon-device-tablet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-tv-and-mobile",[[0,"scale-icon-device-tv-and-mobile",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-twitching-closed-state",[[0,"scale-icon-device-twitching-closed-state",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-device-twitching-open-state",[[0,"scale-icon-device-twitching-open-state",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-home",[[0,"scale-icon-home-home",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-internet-at-home",[[0,"scale-icon-home-internet-at-home",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-iot",[[0,"scale-icon-home-iot",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-light-bulb",[[0,"scale-icon-home-light-bulb",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-network-secure",[[0,"scale-icon-home-network-secure",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-no-wifi",[[0,"scale-icon-home-no-wifi",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-power-socket",[[0,"scale-icon-home-power-socket",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-preferred-wifi",[[0,"scale-icon-home-preferred-wifi",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-reduced-wifi",[[0,"scale-icon-home-reduced-wifi",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-slow-wifi",[[0,"scale-icon-home-slow-wifi",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-smarthome",[[0,"scale-icon-home-smarthome",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-unable-to-connect-to-router",[[0,"scale-icon-home-unable-to-connect-to-router",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-wifi",[[0,"scale-icon-home-wifi",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-wifi-connected",[[0,"scale-icon-home-wifi-connected",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-wifi-connection-error",[[0,"scale-icon-home-wifi-connection-error",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-wifi-manual-login",[[0,"scale-icon-home-wifi-manual-login",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-home-wifi-no-wired-internet",[[0,"scale-icon-home-wifi-no-wired-internet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-circle-top-up",[[0,"scale-icon-navigation-circle-top-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-external-link",[[0,"scale-icon-navigation-external-link",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-internal-link",[[0,"scale-icon-navigation-internal-link",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-left-condensed",[[0,"scale-icon-navigation-left-condensed",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-location",[[0,"scale-icon-navigation-location",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-map",[[0,"scale-icon-navigation-map",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-my-location",[[0,"scale-icon-navigation-my-location",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-right-condensed",[[0,"scale-icon-navigation-right-condensed",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-start",[[0,"scale-icon-navigation-start",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-top-up",[[0,"scale-icon-navigation-top-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-process-order-status",[[0,"scale-icon-process-order-status",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-process-processing",[[0,"scale-icon-process-processing",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-process-sepa-transaction",[[0,"scale-icon-process-sepa-transaction",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-devices-service",[[0,"scale-icon-service-devices-service",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-maintanance",[[0,"scale-icon-service-maintanance",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-manual",[[0,"scale-icon-service-manual",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-one-time-password",[[0,"scale-icon-service-one-time-password",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-services",[[0,"scale-icon-service-services",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-support",[[0,"scale-icon-service-support",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-service-vpn",[[0,"scale-icon-service-vpn",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-2fa-telekom-app",[[0,"scale-icon-t-product-2fa-telekom-app",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-magenta-cloud",[[0,"scale-icon-t-product-magenta-cloud",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-magenta-tv",[[0,"scale-icon-t-product-magenta-tv",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-magentaone",[[0,"scale-icon-t-product-magentaone",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-measure-internet-speed",[[0,"scale-icon-t-product-measure-internet-speed",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-seamless-connectivity",[[0,"scale-icon-t-product-seamless-connectivity",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-telekom-1t1",[[0,"scale-icon-t-product-telekom-1t1",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-telekom-plan",[[0,"scale-icon-t-product-telekom-plan",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-telekom-shop-b",[[0,"scale-icon-t-product-telekom-shop-b",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-usage",[[0,"scale-icon-t-product-usage",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-t-product-voice",[[0,"scale-icon-t-product-voice",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-admin",[[0,"scale-icon-user-file-admin",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-analytics",[[0,"scale-icon-user-file-analytics",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-attachment",[[0,"scale-icon-user-file-attachment",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-audio-file",[[0,"scale-icon-user-file-audio-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-billing",[[0,"scale-icon-user-file-billing",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-boy",[[0,"scale-icon-user-file-boy",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-bussines-users",[[0,"scale-icon-user-file-bussines-users",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-communities",[[0,"scale-icon-user-file-communities",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-contacts",[[0,"scale-icon-user-file-contacts",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-contacts-from-cloud",[[0,"scale-icon-user-file-contacts-from-cloud",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-contracts",[[0,"scale-icon-user-file-contracts",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-draft-file",[[0,"scale-icon-user-file-draft-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-families",[[0,"scale-icon-user-file-families",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-family",[[0,"scale-icon-user-file-family",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-file",[[0,"scale-icon-user-file-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-file-collection",[[0,"scale-icon-user-file-file-collection",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-girl",[[0,"scale-icon-user-file-girl",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-handshake",[[0,"scale-icon-user-file-handshake",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-html-file",[[0,"scale-icon-user-file-html-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-id-card",[[0,"scale-icon-user-file-id-card",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-image-file",[[0,"scale-icon-user-file-image-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-logout",[[0,"scale-icon-user-file-logout",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-man",[[0,"scale-icon-user-file-man",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-pdf-file",[[0,"scale-icon-user-file-pdf-file",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-switch-users",[[0,"scale-icon-user-file-switch-users",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-videos",[[0,"scale-icon-user-file-videos",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-user-file-woman",[[0,"scale-icon-user-file-woman",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy",[[0,"scale-icon-weather-cloudy",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy-rain",[[0,"scale-icon-weather-cloudy-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy-sleet",[[0,"scale-icon-weather-cloudy-sleet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy-snow",[[0,"scale-icon-weather-cloudy-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy-thunder-rain",[[0,"scale-icon-weather-cloudy-thunder-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-cloudy-thunder-snow",[[0,"scale-icon-weather-cloudy-thunder-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-heavy-sleet",[[0,"scale-icon-weather-heavy-sleet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-heavy-snow",[[0,"scale-icon-weather-heavy-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-clear",[[0,"scale-icon-weather-moon-clear",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-cloudy-a",[[0,"scale-icon-weather-moon-cloudy-a",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-cloudy-b",[[0,"scale-icon-weather-moon-cloudy-b",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-rain",[[0,"scale-icon-weather-moon-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-sleet",[[0,"scale-icon-weather-moon-sleet",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-snow",[[0,"scale-icon-weather-moon-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-thunder-rain",[[0,"scale-icon-weather-moon-thunder-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-moon-thunder-snow",[[0,"scale-icon-weather-moon-thunder-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-overcast",[[0,"scale-icon-weather-overcast",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-rain",[[0,"scale-icon-weather-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-sunny",[[0,"scale-icon-weather-sunny",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-thunder-rain",[[0,"scale-icon-weather-thunder-rain",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-weather-thunder-snow",[[0,"scale-icon-weather-thunder-snow",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-list",[[1,"scale-list",{"ordered":[4],"styles":[1]}]]],["scale-list-item",[[1,"scale-list-item",{"ordered":[4],"index":[1026],"marker":[4],"styles":[1],"hasNestedChild":[32],"isNested":[32]}]]],["scale-loading-spinner",[[1,"scale-loading-spinner",{"variant":[1],"alignment":[1],"text":[1],"accessibilityTitle":[1,"accessibility-title"],"size":[1]}]]],["scale-menu-flyout-divider",[[1,"scale-menu-flyout-divider",{"styles":[1]}]]],["scale-sidebar-nav-item",[[1,"scale-sidebar-nav-item",{"condensed":[4],"bold":[4],"active":[1540],"current":[8],"nestingLevel":[2,"nesting-level"],"styles":[1]}]]],["scale-slider",[[1,"scale-slider",{"name":[1],"value":[1538],"range":[4],"valueFrom":[1538,"value-from"],"valueTo":[1538,"value-to"],"min":[2],"max":[2],"step":[2],"showStepMarks":[4,"show-step-marks"],"label":[1],"helperText":[1,"helper-text"],"showValue":[4,"show-value"],"unit":[1],"unitPosition":[1,"unit-position"],"decimals":[2],"platform":[513],"customColor":[1,"custom-color"],"disabled":[4],"trackSmall":[4,"track-small"],"thumbLarge":[4,"thumb-large"],"sliderId":[1025,"slider-id"],"innerAriaValueText":[1,"inner-aria-value-text"],"styles":[1],"position":[32],"positionFrom":[32],"positionTo":[32]}]]],["scale-ssr-slot-fix",[[4,"scale-ssr-slot-fix"]]],["scale-tab-header",[[1,"scale-tab-header",{"disabled":[516],"small":[4],"size":[1],"selected":[4],"styles":[1],"hasFocus":[32]},[[0,"click","handleClick"]]]]],["scale-tab-nav",[[1,"scale-tab-nav",{"small":[4],"size":[1],"styles":[1]},[[0,"scale-select","handleSelect"],[0,"keydown","handleKeydown"]]]]],["scale-tab-panel",[[1,"scale-tab-panel",{"small":[4],"size":[1],"tabbablePanel":[4,"tabbable-panel"],"styles":[1]}]]],["scale-table",[[4,"scale-table",{"showSort":[4,"show-sort"],"size":[1],"striped":[4],"styles":[1],"forceUpdate":[32]}]]],["scale-telekom-app-shell",[[1,"scale-telekom-app-shell",{"styles":[1]}]]],["scale-telekom-footer-extended-navigation",[[4,"scale-telekom-footer-extended-navigation"]]],["scale-toast",[[1,"scale-toast",{"size":[1],"variant":[1],"opened":[516],"autoHide":[8,"auto-hide"],"animated":[4],"time":[2],"positionTop":[2,"position-top"],"positionRight":[2,"position-right"],"fadeDuration":[2,"fade-duration"],"styles":[513],"progress":[32],"toastHeightWithOffset":[32],"open":[64]}]]],["scale-toggle-button",[[1,"scale-toggle-button",{"size":[1],"background":[1],"colorScheme":[1,"color-scheme"],"variant":[1],"disabled":[4],"selected":[1028],"iconOnly":[4,"icon-only"],"iconPosition":[1537,"icon-position"],"hideBorder":[4,"hide-border"],"radius":[1],"toggleButtonId":[513,"toggle-button-id"],"ariaLabelToggleButton":[1,"aria-label-toggle-button"],"styles":[1],"position":[2],"ariaLangSelected":[1,"aria-lang-selected"],"ariaLangDeselected":[1,"aria-lang-deselected"],"ariaDescriptionTranslation":[1,"aria-description-translation"],"setFocus":[64]}]]],["scale-toggle-group",[[1,"scale-toggle-group",{"size":[1],"background":[1],"fullWidth":[4,"full-width"],"disabled":[4],"hideBorder":[4,"hide-border"],"singleSelect":[4,"single-select"],"ariaLabelTranslation":[1,"aria-label-translation"],"colorScheme":[1,"color-scheme"],"variant":[1],"styles":[1],"status":[32]},[[0,"scaleClick","scaleClickHandler"]]]]],["scale-tooltip",[[1,"scale-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"arrowOffset":[2,"arrow-offset"],"arrowPadding":[2,"arrow-padding"],"opened":[1540],"trigger":[1],"flip":[4],"styles":[1],"mouseOverTooltip":[32],"showTooltip":[64],"hideTooltip":[64]},[[4,"click","handleOutsideClick"]]]]],["scale-app-header",[[4,"scale-app-header",{"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"],"logoClick":[8,"logo-click"],"logoAriaDescribedBy":[1,"logo-aria-described-by"],"claimLang":[1,"claim-lang"],"portalName":[1,"portal-name"],"mainNavigation":[8,"main-navigation"],"iconNavigation":[8,"icon-navigation"],"userNavigation":[8,"user-navigation"],"sectorNavigation":[8,"sector-navigation"],"addonNavigation":[8,"addon-navigation"],"activeRouteId":[1,"active-route-id"],"activeSectorId":[1,"active-sector-id"],"sticky":[4],"userMenuAriaLabel":[1,"user-menu-aria-label"],"isMegaMenuVisible":[4,"is-mega-menu-visible"],"megaMenuVisible":[4,"mega-menu-visible"],"isMobileMenuVisible":[4,"is-mobile-menu-visible"],"mobileMenuVisible":[4,"mobile-menu-visible"],"activeSegment":[32],"mobileMenu":[32],"userMenu":[32],"userMenuMobile":[32],"visibleMegaMenu":[32],"scrolled":[32]},[[9,"scroll","onScroll"],[0,"closeMenu","handleCloseMenu"],[0,"scale-close","handleCloseUserMenu"],[0,"scale-open","handleOpenUserMenu"]]]]],["scale-card",[[1,"scale-card",{"to":[1],"label":[1],"target":[1],"rel":[1],"styles":[1]}]]],["scale-icon-action-favorite",[[0,"scale-icon-action-favorite",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-telekom-footer_2",[[1,"scale-telekom-footer-content",{"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"]}],[4,"scale-telekom-footer",{"type":[513]}]]],["duet-date-picker_2",[[0,"duet-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"value":[513],"min":[1],"max":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"dateAdapter":[16],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]],[0,"scale-icon-content-calendar",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-collapse-up",[[0,"scale-icon-navigation-collapse-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-link",[[1,"scale-link",{"disabled":[4],"omitUnderline":[4,"omit-underline"],"href":[1],"download":[1],"iconPosition":[1,"icon-position"],"hreflang":[1],"ping":[1],"referrerpolicy":[1],"rel":[1],"target":[1],"type":[1],"innerTabindex":[2,"inner-tabindex"],"styles":[1],"setFocus":[64]}]]],["scale-icon-navigation-double-left_2",[[0,"scale-icon-navigation-double-left",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-navigation-double-right",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-checkbox_2",[[4,"scale-checkbox",{"name":[1],"label":[1],"ariaLabelCheckbox":[1,"aria-label-checkbox"],"hideLabel":[4,"hide-label"],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"disabled":[516],"checked":[1540],"indeterminate":[1540],"value":[1],"inputId":[1025,"input-id"],"styles":[1],"required":[4]}],[0,"scale-icon-action-minus",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-close",[[0,"scale-icon-action-close",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-helper-text",[[1,"scale-helper-text",{"helperText":[1,"helper-text"],"styles":[1],"variant":[1]}]]],["scale-icon-navigation-collapse-down",[[0,"scale-icon-navigation-collapse-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-circle-close_2",[[0,"scale-icon-alert-warning",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-action-circle-close",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-action-checkmark",[[0,"scale-icon-action-checkmark",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-left",[[0,"scale-icon-navigation-left",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-icon-navigation-right",[[0,"scale-icon-navigation-right",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-badge_12",[[1,"scale-telekom-header",{"appName":[513,"app-name"],"appNameLink":[1,"app-name-link"],"appNameClick":[8,"app-name-click"],"logoHref":[1,"logo-href"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"],"type":[1],"metaNavAriaLabel":[1,"meta-nav-aria-label"],"metaNavExternalAriaLabel":[1,"meta-nav-external-aria-label"],"langSwitcherAriaLabel":[1,"lang-switcher-aria-label"],"mainNavAriaLabel":[1,"main-nav-aria-label"],"scrolled":[32],"scrolledBack":[32],"pageYOffset":[32]},[[5,"scroll","onScroll"]]],[1,"scale-telekom-mega-menu-column",{"headingLevel":[2,"heading-level"],"headingHasLink":[32]}],[1,"scale-telekom-mobile-flyout-canvas",{"appName":[1,"app-name"],"appNameLink":[1,"app-name-link"],"appNameClick":[8,"app-name-click"],"closeButtonLabel":[1,"close-button-label"],"closeButtonTitle":[1,"close-button-title"]}],[1,"scale-telekom-mobile-menu",{"backButtonTitle":[1,"back-button-title"],"appName":[1,"app-name"],"appNameLink":[1,"app-name-link"],"appNameClick":[8,"app-name-click"],"currentLevel":[32]},[[0,"scale-set-menu-item-active","handleSetMenuItemActive"],[0,"scale-set-menu-item-open","handleSetMenuItemOpen"]]],[1,"scale-telekom-mobile-menu-item",{"open":[4],"active":[4],"level":[1],"currentLevel":[1,"current-level"]}],[1,"scale-badge",{"count":[2],"label":[1],"labelVisuallyHidden":[4,"label-visually-hidden"],"ariaLabelTranslation":[1,"aria-label-translation"]}],[0,"scale-icon-action-menu",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-user-file-user",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[4,"scale-telekom-mega-menu",{"childrenTooMany":[32]}],[1,"scale-telekom-nav-flyout",{"expanded":[1540],"triggerSelector":[1,"trigger-selector"],"variant":[1],"hover":[4],"isExpanded":[32],"animationState":[32],"show":[64],"hide":[64]},[[8,"keydown","handleWindowKeydown"],[0,"scale-close-nav-flyout","handleScaleCloseNavFlyout"],[4,"click","handleDocumentClick"]]],[4,"scale-telekom-nav-item",{"active":[516],"variant":[513],"role":[513],"hideOnMobile":[516,"hide-on-mobile"],"hideOnDesktop":[516,"hide-on-desktop"]}],[4,"scale-telekom-nav-list",{"role":[513],"alignment":[513],"variant":[513]},[[0,"scale-expanded","handleScaleExpanded"]]]]],["scale-dropdown-select_13",[[1,"scale-dropdown-select",{"comboboxId":[1,"combobox-id"],"label":[1],"name":[1],"helperText":[1,"helper-text"],"disabled":[4],"readonly":[4],"transparent":[4],"invalid":[4],"variant":[1],"value":[1544],"floatingStrategy":[1,"floating-strategy"],"hideLabelVisually":[4,"hide-label-visually"],"ariaLabelSelected":[1,"aria-label-selected"],"hcmLabelDisabled":[1,"hcm-label-disabled"],"options":[32],"open":[32],"currentIndex":[32],"queryString":[32],"queryTimeout":[32],"hasFocus":[32]}],[1,"scale-pagination",{"hideBorders":[4,"hide-borders"],"hideBorder":[4,"hide-border"],"pageSize":[2,"page-size"],"startElement":[2,"start-element"],"totalElements":[2,"total-elements"],"styles":[1],"small":[4],"size":[1],"ariaLabelFirstPage":[1,"aria-label-first-page"],"ariaLabelNextPage":[1,"aria-label-next-page"],"ariaLabelPreviousPage":[1,"aria-label-previous-page"],"ariaLabelLastPage":[1,"aria-label-last-page"]}],[0,"scale-text-field",{"type":[1],"inputModeType":[1,"input-mode-type"],"name":[1],"label":[1],"size":[1],"helperText":[1,"helper-text"],"status":[1],"invalid":[4],"variant":[1],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"max":[2],"min":[2],"placeholder":[1],"disabled":[4],"readonly":[4],"required":[4],"counter":[4],"value":[1032],"inputId":[1,"input-id"],"transparent":[4],"step":[1],"list":[1],"inputAutofocus":[4,"input-autofocus"],"inputAutocomplete":[1,"input-autocomplete"],"ariaDetailedId":[1,"aria-detailed-id"],"hideLabelVisually":[4,"hide-label-visually"],"styles":[1],"experimentalControlled":[4,"experimental-controlled"],"hasFocus":[32],"forceUpdate":[32]}],[1,"scale-menu-flyout-item",{"cascade":[4],"active":[516],"checkable":[1],"checked":[1540],"disabled":[516],"value":[513],"styles":[1],"triggerEvent":[64]}],[1,"scale-progress-bar",{"busy":[4],"percentage":[2],"percentageStart":[2,"percentage-start"],"customColor":[1,"custom-color"],"showStatus":[4,"show-status"],"icon":[1],"statusDescription":[1,"status-description"],"hasError":[4,"has-error"],"disabled":[4],"progressBarId":[1,"progress-bar-id"],"label":[1],"mute":[4],"styles":[1]}],[0,"scale-switch",{"checked":[1540],"disabled":[4],"name":[1],"inputId":[1025,"input-id"],"label":[1],"styles":[1],"size":[1]}],[1,"scale-tag",{"size":[1],"type":[1],"color":[1],"href":[1],"target":[1],"dismissable":[4],"disabled":[4],"dismissText":[1,"dismiss-text"],"styles":[1]}],[1,"scale-dropdown-select-item",{"selected":[4],"focused":[4],"value":[520],"disabled":[516]}],[0,"scale-icon-action-hide-password",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-action-sort",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-content-sort-indicator-down",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-content-sort-indicator-up",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-service-settings",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]],["scale-button_3",[[1,"scale-menu-flyout",{"closeOnSelect":[4,"close-on-select"],"direction":[1],"styles":[1]},[[0,"scale-open","handleScaleOpen"],[0,"scale-select","handleScaleSelect"],[0,"scale-close","handleScaleClose"],[9,"scroll","handleWindowScroll"],[4,"click","handleOutsideClick"],[0,"keydown","handleKeydown"]]],[1,"scale-menu-flyout-list",{"opened":[1540],"trigger":[16],"direction":[1025],"active":[1540],"closeOnSelect":[4,"close-on-select"],"brandHeaderDropdown":[4,"brand-header-dropdown"],"styles":[1],"forceRender":[32],"open":[64],"close":[64],"setFocus":[64]},[[9,"resize","handleResize"],[0,"keydown","handleKeydown"],[0,"click","handleClick"],[0,"scale-select","handleScaleSelect"],[0,"scale-open","handleScaleOpen"]]],[1,"scale-button",{"size":[1],"variant":[1],"disabled":[4],"type":[1],"name":[1],"value":[1],"iconOnly":[4,"icon-only"],"iconPosition":[513,"icon-position"],"href":[1],"target":[1],"styles":[1],"download":[1],"innerTabindex":[2,"inner-tabindex"],"innerAriaLabel":[1,"inner-aria-label"],"setFocus":[64]},[[2,"click","handleHostClick"]]]]],["scale-logo_2",[[1,"scale-logo",{"variant":[1],"transparent":[4],"language":[1],"size":[2],"href":[1],"accessibilityTitle":[1,"accessibility-title"],"styles":[1],"focusable":[4],"scrollIntoViewOnFocus":[4,"scroll-into-view-on-focus"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"],"logoAriaDescribedBy":[1,"logo-aria-described-by"],"logoAriaHidden":[4,"logo-aria-hidden"]}],[0,"scale-logo-svg",{"color":[1],"innerRole":[1,"inner-role"],"focusable":[4],"accessibilityTitle":[1,"accessibility-title"],"logoTitle":[1,"logo-title"],"logoHideTitle":[4,"logo-hide-title"]}]]],["app-mega-menu_8",[[0,"app-navigation-main-mobile",{"hide":[16],"navigation":[16],"activeRouteId":[1,"active-route-id"],"selected":[32],"parent":[32]}],[4,"scale-nav-icon",{"isActive":[4,"is-active"],"active":[4],"href":[1],"clickLink":[8,"click-link"],"icon":[1],"isMobileMenuOpen":[4,"is-mobile-menu-open"],"mobileMenuOpen":[4,"mobile-menu-open"],"refMobileMenuToggle":[8,"ref-mobile-menu-toggle"],"refMobileUserMenuToggle":[8,"ref-mobile-user-menu-toggle"],"refUserMenuToggle":[8,"ref-user-menu-toggle"],"badge":[4],"badgeLabel":[2,"badge-label"]}],[4,"app-mega-menu",{"navigation":[16],"hide":[16],"activeRouteId":[1,"active-route-id"],"isActive":[4,"is-active"],"active":[4]}],[0,"app-navigation-sector-mobile",{"hide":[16],"navigation":[16],"activeSectorId":[1,"active-sector-id"],"selected":[32]}],[4,"scale-nav-main",{"isActive":[4,"is-active"],"active":[4],"popup":[4],"isMegaMenuVisible":[4,"is-mega-menu-visible"],"megaMenuVisible":[4,"mega-menu-visible"],"href":[1],"name":[1],"target":[1],"innerId":[1,"inner-id"],"clickLink":[8,"click-link"]}],[4,"scale-nav-segment",{"isActive":[4,"is-active"],"active":[4],"href":[1]}],[1,"app-navigation-user-menu",{"hide":[16],"navigation":[8]}],[1,"scale-notification-badge",{"label":[2],"maxCharacters":[2,"max-characters"],"type":[1],"clickHandler":[8,"click-handler"]}]]],["scale-icon-action-success_3",[[0,"scale-icon-action-success",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-alert-information",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}],[0,"scale-icon-alert-error",{"size":[514],"fill":[1],"color":[1],"selected":[516],"decorative":[4],"accessibilityTitle":[1,"accessibility-title"],"focusable":[4]}]]]]'),options)}))};!function(){if("undefined"!=typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)},HTMLElement.prototype=a.prototype,HTMLElement.prototype.constructor=HTMLElement,Object.setPrototypeOf(HTMLElement,a)}}();var preview=__webpack_require__("../../node_modules/@storybook/addon-viewport/dist/esm/preview.js");vue_esm.a.config.productionTip=!1,vue_esm.a.config.ignoredElements=[/scale-\w*/],function applyPolyfills(){var promises=[];if("undefined"!=typeof window){var win=window;win.customElements&&(!win.Element||win.Element.prototype.closest&&win.Element.prototype.matches&&win.Element.prototype.remove&&win.Element.prototype.getRootNode)||promises.push(__webpack_require__.e(409).then(__webpack_require__.t.bind(null,"../components/dist/esm/polyfills/dom.js",7)));"function"==typeof Object.assign&&Object.entries&&Array.prototype.find&&Array.prototype.includes&&String.prototype.startsWith&&String.prototype.endsWith&&(!win.NodeList||win.NodeList.prototype.forEach)&&win.fetch&&function checkIfURLIsSupported(){try{var u=new URL("b","http://a");return u.pathname="c%20d","http://a/c%20d"===u.href&&u.searchParams}catch(e){return!1}}()&&"undefined"!=typeof WeakMap||promises.push(Promise.all([__webpack_require__.e(2),__webpack_require__.e(408)]).then(__webpack_require__.t.bind(null,"../components/dist/esm/polyfills/core-js.js",7)))}return Promise.all(promises)}().then((function(){loader_defineCustomElements(window)}));var parameters={a11y:{config:{rules:[{id:"list",enabled:!1},{id:"listitem",enabled:!1},{id:"color-contrast",enabled:!1}]}},viewport:{viewports:preview.a},viewMode:"docs",options:{storySort:{order:["Scale Design System","FAQ","New Release",["Release Notes","Sketch Library Update"],"Setup & Info",["Getting Started For Designers","Getting Started For Developers","Scale and Vue","Scale and Angular","Scale and React","Accessibility","Browser Support"],"Guidelines",["Design Tokens","Light and Dark Mode","Customization and Themes","Grid","Spacings","Typography","Colors","Shadows"],"Update History",["Design","Development"],"Components","Beta Components","Deprecated Components","Contact","Legal",["Disclaimer","Legal Notice","Privacy"]]}}};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}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":case"argTypes":return esm.a.warn("Invalid args/argTypes in config, ignoring.",JSON.stringify(value));case"decorators":return value.forEach((function(decorator){return Object(ClientApi.d)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(ClientApi.e)(loader,!1)}));case"parameters":return Object(ClientApi.f)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.b)(enhancer)}));case"argsEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.c)(enhancer)}));case"render":return Object(ClientApi.g)(value);case"globals":case"globalTypes":var v={};return v[key]=value,Object(ClientApi.f)(v,!1);case"__namedExportsOrder":case"decorateStory":case"renderToDOM":return null;default:return console.log(key+" was not supported :( !")}}))},"./generated-stories-entry.js":function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__("./node_modules/@storybook/vue/dist/esm/client/index.js").configure)([__webpack_require__("./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$")],module,!1)}).call(this,__webpack_require__("../../node_modules/webpack/buildin/module.js")(module))},"./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$":function(module,exports,__webpack_require__){var map={"./5_legal/Disclaimer.stories.mdx":"./stories/5_legal/Disclaimer.stories.mdx","./5_legal/LegalNotice.stories.mdx":"./stories/5_legal/LegalNotice.stories.mdx","./5_legal/Privacy.stories.mdx":"./stories/5_legal/Privacy.stories.mdx","./FAQ.stories.mdx":"./stories/FAQ.stories.mdx","./Index.stories.mdx":"./stories/Index.stories.mdx","./components/accordion/Accordion.stories.mdx":"./stories/components/accordion/Accordion.stories.mdx","./components/breadcrumb/Breadcrumb.stories.mdx":"./stories/components/breadcrumb/Breadcrumb.stories.mdx","./components/button/Button.stories.mdx":"./stories/components/button/Button.stories.mdx","./components/callout/Callout.stories.mdx":"./stories/components/callout/Callout.stories.mdx","./components/card/Card.stories.mdx":"./stories/components/card/Card.stories.mdx","./components/checkbox-group/CheckboxGroup.stories.mdx":"./stories/components/checkbox-group/CheckboxGroup.stories.mdx","./components/checkbox/Checkbox.stories.mdx":"./stories/components/checkbox/Checkbox.stories.mdx","./components/chip/Chip.stories.mdx":"./stories/components/chip/Chip.stories.mdx","./components/data-grid/DataGrid.stories.mdx":"./stories/components/data-grid/DataGrid.stories.mdx","./components/date-picker/DatePicker.stories.mdx":"./stories/components/date-picker/DatePicker.stories.mdx","./components/divider/Divider.stories.mdx":"./stories/components/divider/Divider.stories.mdx","./components/dropdown-select/DropdownSelect.stories.mdx":"./stories/components/dropdown-select/DropdownSelect.stories.mdx","./components/dropdown/DropDown.stories.mdx":"./stories/components/dropdown/DropDown.stories.mdx","./components/flyout-menu/MenuFlyout.stories.mdx":"./stories/components/flyout-menu/MenuFlyout.stories.mdx","./components/icon/Icon.stories.mdx":"./stories/components/icon/Icon.stories.mdx","./components/link/Link.stories.mdx":"./stories/components/link/Link.stories.mdx","./components/list/List.stories.mdx":"./stories/components/list/List.stories.mdx","./components/loading-spinner/LoadingSpinner.stories.mdx":"./stories/components/loading-spinner/LoadingSpinner.stories.mdx","./components/logo/Logo.stories.mdx":"./stories/components/logo/Logo.stories.mdx","./components/modal/Modal.stories.mdx":"./stories/components/modal/Modal.stories.mdx","./components/notification-badge/NotificationBadge.stories.mdx":"./stories/components/notification-badge/NotificationBadge.stories.mdx","./components/notification/Notification.stories.mdx":"./stories/components/notification/Notification.stories.mdx","./components/pagination/Pagination.stories.mdx":"./stories/components/pagination/Pagination.stories.mdx","./components/progress-bar/ProgressBar.stories.mdx":"./stories/components/progress-bar/ProgressBar.stories.mdx","./components/radio-button-group/RadioButtonGroup.stories.mdx":"./stories/components/radio-button-group/RadioButtonGroup.stories.mdx","./components/rating-stars/RatingStars.stories.mdx":"./stories/components/rating-stars/RatingStars.stories.mdx","./components/segmented-button/SegmentedButton.stories.mdx":"./stories/components/segmented-button/SegmentedButton.stories.mdx","./components/sidebar-navigation/SidebarNav.stories.mdx":"./stories/components/sidebar-navigation/SidebarNav.stories.mdx","./components/slider/Slider.stories.mdx":"./stories/components/slider/Slider.stories.mdx","./components/switch/switch.stories.mdx":"./stories/components/switch/switch.stories.mdx","./components/tab-navigation/TabNav.stories.mdx":"./stories/components/tab-navigation/TabNav.stories.mdx","./components/table/Table.stories.mdx":"./stories/components/table/Table.stories.mdx","./components/tag/Tag.stories.mdx":"./stories/components/tag/Tag.stories.mdx","./components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx":"./stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx","./components/telekom-footer/TelekomFooter.stories.mdx":"./stories/components/telekom-footer/TelekomFooter.stories.mdx","./components/text-area/TextArea.stories.mdx":"./stories/components/text-area/TextArea.stories.mdx","./components/text-field/TextField.stories.mdx":"./stories/components/text-field/TextField.stories.mdx","./components/tooltip/Tooltip.stories.mdx":"./stories/components/tooltip/Tooltip.stories.mdx","./contact/Contributing.stories.mdx":"./stories/contact/Contributing.stories.mdx","./contact/Feedback.stories.mdx":"./stories/contact/Feedback.stories.mdx","./deprecated/brand-header-navigation/BrandHeader.stories.mdx":"./stories/deprecated/brand-header-navigation/BrandHeader.stories.mdx","./deprecated/footer/Footer.stories.mdx":"./stories/deprecated/footer/Footer.stories.mdx","./deprecated/notification-banner/NotificationBanner.stories.mdx":"./stories/deprecated/notification-banner/NotificationBanner.stories.mdx","./deprecated/notification-message/NotificationMessage.stories.mdx":"./stories/deprecated/notification-message/NotificationMessage.stories.mdx","./deprecated/notification-toast/NotificationToast.stories.mdx":"./stories/deprecated/notification-toast/NotificationToast.stories.mdx","./deprecated/toggle-group/ToggleGroup.stories.mdx":"./stories/deprecated/toggle-group/ToggleGroup.stories.mdx","./guidelines/Colors.stories.mdx":"./stories/guidelines/Colors.stories.mdx","./guidelines/DesignTokens.stories.mdx":"./stories/guidelines/DesignTokens.stories.mdx","./guidelines/Grid.stories.mdx":"./stories/guidelines/Grid.stories.mdx","./guidelines/LightAndDarkMode.stories.mdx":"./stories/guidelines/LightAndDarkMode.stories.mdx","./guidelines/Shadows.stories.mdx":"./stories/guidelines/Shadows.stories.mdx","./guidelines/Spacing.stories.mdx":"./stories/guidelines/Spacing.stories.mdx","./guidelines/Theming.stories.mdx":"./stories/guidelines/Theming.stories.mdx","./guidelines/Typography.stories.mdx":"./stories/guidelines/Typography.stories.mdx","./new_release/SketchLibrary.stories.mdx":"./stories/new_release/SketchLibrary.stories.mdx","./setup_and_info/Accessibility.stories.mdx":"./stories/setup_and_info/Accessibility.stories.mdx","./setup_and_info/Browser_Support.stories.mdx":"./stories/setup_and_info/Browser_Support.stories.mdx","./setup_and_info/GettingStartedForDesigners.stories.mdx":"./stories/setup_and_info/GettingStartedForDesigners.stories.mdx","./setup_and_info/GettingStartedForDevelopers.stories.mdx":"./stories/setup_and_info/GettingStartedForDevelopers.stories.mdx","./setup_and_info/ScaleAndAngular.stories.mdx":"./stories/setup_and_info/ScaleAndAngular.stories.mdx","./setup_and_info/ScaleAndReact.stories.mdx":"./stories/setup_and_info/ScaleAndReact.stories.mdx","./setup_and_info/ScaleAndVue.stories.mdx":"./stories/setup_and_info/ScaleAndVue.stories.mdx","./update_history/Design.stories.mdx":"./stories/update_history/Design.stories.mdx","./update_history/Development.stories.mdx":"./stories/update_history/Development.stories.mdx"};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="./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},"./stories/5_legal/Disclaimer.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("../../node_modules/@storybook/addon-docs/blocks.js"),Disclaimer_en="# Disclaimer\n\nDeutsche Telekom AG does not guarantee that the information provided on this website is complete, correct, or in any case up to date. This also applies to all links which this website refers to directly or indirectly. Deutsche Telekom AG is not responsible for the content of any page accessed via such a link.\n\nDeutsche Telekom AG reserves the right to make changes or additions to the information provided without prior notice. Providing this information by Deutsche Telekom AG does not constitute a contractual offer for information, advice, or similar contractual relationships. Any liability is excluded for the use of the content of the website or the correctness of the content or the accessibility of the website. Therefore, Deutsche Telekom AG shall not be liable for any special, indirect, or consequential damages or any damages whatsoever resulting from loss of use, data, or profits, whether in an action of contract, negligence, or other tortious action, arising out of or in connection with the use or performance of documents or information available from this website.\n\n© 2022 and provider within the meaning of the MDStV:\n\nDeutsche Telekom AG<br>\nFriedrich-Ebert-Allee 140<br>\n53113 Bonn\n",Disclaimer_de="# Haftungsausschluss\n\nDie Deutsche Telekom AG übernimmt keine Garantie dafür, dass die auf dieser Webseite bereitgestellten Informationen vollständig, richtig und in jedem Fall aktuell sind. Dies gilt auch für alle Links, auf die diese Webseite direkt oder indirekt verweist. Die Deutsche Telekom AG ist nicht verantwortlich für den Inhalt von Seiten, die über einen solchen Link erreicht werden.\n\nDie Deutsche Telekom AG behält sich das Recht vor, ohne Ankündigung Änderungen oder Ergänzungen der bereitgestellten Informationen vorzunehmen. Die Bereitstellung dieser Informationen stellt von Seiten der Deutschen Telekom AG kein vertragliches Angebot für Auskünfte, Beratung oder ähnliche Vertragsbeziehungen dar. Jegliche Haftung für die Nutzung und Richtigkeit der Webseiteninhalte sowie die Verfügbarkeit der Webseite ist ausgeschlossen. Die Deutsche Telekom AG haftet deshalb nicht für besondere, indirekte oder Folgeschäden oder jegliche Schäden, die aus Nutzungsausfall, Verlust von Daten oder entgangenem Gewinn resultieren, gleich ob durch eine Vertragshandlung oder durch Fahrlässigkeit oder sonstige unerlaubte Handlung, und die aus oder in Zusammenhang mit der Nutzung von auf dieser Website verfügbaren Dokumenten oder Informationen entstehen.\n\n© 2022 und Anbieter im Sinne des Staatsvertrages über Mediendienste (MDStV):\n\nDeutsche Telekom AG<br>\nFriedrich-Ebert-Allee 140<br>\n53113 Bonn\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.c,{title:"Legal/Disclaimer",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?Disclaimer_en:Disclaimer_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Legal/Disclaimer",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?Disclaimer_en:Disclaimer_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/5_legal/LegalNotice.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("../../node_modules/@storybook/addon-docs/blocks.js"),LegalNotice_en="# Legal Notice\n\nBrand & Design is a service offered by Telekom Customer Experience Management as well as Brand Strategy and Marketing Communications, Deutsche Telekom AG.\n\nDeutsche Telekom AG<br>\nFriedrich-Ebert-Allee 140<br>\n53113 Bonn\nE-Mail: [contact-NOSPAM-brand-design.telekom.com](mailto:contact-NOSPAM-brand-design.telekom.com)<br>\nPhone: +49 228 181-24299\n\n**Commercial Register:**\nBonn District Court (Amtsgericht) HRB 6794,<br>\nRegistered Office, Bonn,<br>\nVAT ID: DE 123475223, WEEE Reg. No. DE50478376\n\n## Authorized Representatives\n\nTimotheus Höttges<br>\nAdel Al-Saleh<br>\nBirgit Bohle<br>\nSrinivasan Gopalan<br>\nDr. Christian P. Illek<br>\nThorsten Langheim<br>\nDominique Leroy<br>\nClaudia Nemat<br>\n\n## Regulatory Authority\n\nFederal Network Agency for Electricity, Gas, Telecommunications, Post and Railway<br>\nTulpenfeld 4<br>\n53113 Bonn\nGermany\n\n## Responsible\n\nOle Heydekamp<br>\nLead Customer Experience Management<br>\n\nAlexander Engelhardt<br>\nVice President Brand Management\n",LegalNotice_de="# Impressum\n\nBrand & Design ist ein Dienst der Bereiche Telekom „Customer Experience Management“ und „Group Brand Strategy and Marketing Communications“ der Deutschen Telekom AG.\n\nDeutsche Telekom AG<br>\nFriedrich-Ebert-Allee 140<br>\n53113 Bonn\n\nE-Mail: [contact-NOSPAM-brand-design.telekom.com](mailto:contact-NOSPAM-brand-design.telekom.com)<br>\nPhone: +49 228 181-24299\n\n**Handelsregister:**\nAmtsgericht Bonn HRB 6794<br>\nSitz der Gesellschaft: Bonn<br>\nUSt-IdNr. DE 123475223<br>\nWEEE-Reg.-Nr. DE50478376\n\n## Vertretungsberechtigt\n\nTimotheus Höttges<br>\nAdel Al-Saleh<br>\nBirgit Bohle<br>\nSrinivasan Gopalan<br>\nDr. Christian P. Illek<br>\nThorsten Langheim<br>\nDominique Leroy<br>\nClaudia Nemat<br>\n\n## Aufsichtsbehörde\n\nBundesnetzagentur für Elektrizität, Gas, Telekommunikation, Post und Eisenbahnen\nTulpenfeld 4<br>\n53113 Bonn\n\n## Verantwortlich\n\nOle Heydekamp<br>\nLeiter Customer Experience Management<br>\n\nAlexander Engelhardt<br>\nLeiter Markenmanagement\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.c,{title:"Legal/Legal Notice",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?LegalNotice_en:LegalNotice_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Legal/Legal Notice",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?LegalNotice_en:LegalNotice_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/5_legal/Privacy.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("../../node_modules/@storybook/addon-docs/blocks.js"),Privacy_en='# Data Privacy Policy\n\nDeutsche Telekom AG attaches great importance to protecting your personal data. We always inform you what personal data we collect, how your data is used, and how you can influence the process.\n\n## 1. What data is recorded, how is it used, and how long is it stored?\n\nWe will only collect technical characteristics: When you visit our websites, the web server temporarily records the domain name or your computer’s IP address, the file requested by the client (file name and URL), the http response code, and the website from which you are visiting us. The recorded data is used solely for data security purposes, particularly to protect against attempted attacks on our web server (Article 6 (1f) GDPR). We do not use it to create individual user profiles nor do we share this information with third parties. It is erased after seven days at the latest. We reserve the right to statistically analyze anonymized data records.\n\n## 2. Controlling data used by social media plug-ins and links to social media platforms\n\nNo social media plug-ins are used, and no links to social media platforms are provided.\n\n## 3. Will my usage habits be evaluated, e.g. for advertising purposes or tracking?\n\nWe want you to enjoy using our websites and take advantage of our products and services. We have an economic interest in ensuring this is the case. We analyze usage habits anonymously and pseudonymously so you can find the products that interest you and so we can make our websites user-friendly. We, or our contract service providers, create usage profiles that comply with the legal requirements. This information cannot be traced back to you directly. The following information is intended to provide you with general information on the various purposes, techniques, storage periods, and processing countries of this data.\n\n### Technology\n\n### Required cookies\n\nThese cookies are required to enable you to navigate through the web pages and use key functions. They support basic functions to ensure access to secure areas of the website. The legal basis for these cookies is Article 6 (1) b GDPR, or for third countries Article 49 (1) b GDPR.\n\n| Firma     | Purpose          | Expires / Max-Age | Location |\n| --------- | ---------------- | ----------------- | -------- |\n| T-Systems | Session ID / WAF | Session cookie    | Germany  |\n\n## 4. Where can I find the information that is important to me?\n\nThis data privacy information provides an overview of the items which apply to Deutsche Telekom AG processing your data in this web portal. Further information, including information on data protection in general and in specific products, is available at https://www.telekom.com/en/corporate-responsibility/data-protection-data-security/data-protection and http://www.telekom.de/datenschutzhinweise.\n\n## 5. Who is responsible for data processing? Who should I contact if I have any queries regarding data privacy at Deutsche Telekom AG?\n\nDeutsche Telekom AG acts as the data controller. If you have any queries, please contact our Customer Service department or the Global Data Privacy Officer, Dr. Claus D. Ulmer, Friedrich-Ebert-Allee 140, 53113 Bonn, Germany, datenschutz@telekom.de.\n\n## 6. What rights do I have?\n\nYou have the right:\n\n<ol type="a">\n  <li>to request <b>information</b> on the categories of personal data concerned, the purposes of the processing, any recipients of the data, and the envisaged storage period (Article 15 GDPR);</li>\n  <li>to request that incorrect or incomplete data be <b>rectified</b> or supplemented (Article 16 GDPR);</li>\n  <li>to <b>withdraw</b> consent at any time with effect for the future (Article 7 (3) GDPR);</li>\n  <li>to <b>object</b> to the processing of data on the grounds of legitimate interests, for reasons relating to your particular situation (Article 21 (1) GDPR);</li>\n  <li>to request the <b>erasure</b> of data in certain cases under Article 17 GDPR – especially if the data is no longer necessary in relation to the purposes for which it was collected or is unlawfully processed, or you withdraw your consent according to (c) above or object according to (d) above;</li>\n  <li>to demand, under certain circumstances, the <b>restriction</b> of data where erasure is not possible or the erasure obligation is disputed (Article 18 GDPR);</li>\n  <li>to <b>data portability</b>, i.e., you can receive the data that you provided to us in a commonly used and machine-readable format such as CSV, and can, where necessary, transfer the data to others (Article 20 GDPR);</li>\n  <li>to <b>file a complaint about the data processing</b> with the responsible <b>supervisory authority</b> (for telecommunications contracts: the German Federal Commissioner for Data Protection and Freedom of Information (Bundesbeauftragter für den Datenschutz und die Informationsfreiheit); for any other matters: State Commissioner for Data Protection and Freedom of Information, North Rhine-Westphalia (Landesbeauftragter für den Datenschutz und die Informationsfreiheit Nordrhein-Westfalen)).</li>\n</ol>\n\n## 7. Who does Deutsche Telekom AG pass my data on to?\n\nWe will only pass your data **owing to legal obligations:** In certain cases, we are legally obliged to transfer certain data to a state authority that requests it.\n\n## 8. Where is my data processed?\n\nYour data will be processed in Germany and other European countries. If, in exceptional cases, your data is processed in countries outside the European Union (in so-called third countries), this will take place:\n\n<ol type="a">\n  <li>if you have expressly consented to this (Article 49 (1) a GDPR). (In most countries outside the EU, the level of data protection does not meet EU standards. This concerns in particular comprehensive monitoring and control rights of state authorities, e.g. in the USA, which disproportionately interfere with the data protection of European citizens,</li>\n  <li>or to the extent necessary for our service provision to you (Article 49 (1) b GDPR),</li>\n  <li>or to the extent required by law (Article 49 (1) c GDPR).</li>\n</ol>\n\nFurthermore, your data will only be processed in third countries if certain measures ensure a suitable level of data protection (e.g., EU Commission\'s adequacy decision or suitable guarantees, Article 44 et seq. GDPR).\n\n**© Deutsche Telekom AG – April 2022**\n',Privacy_de='# Datenschutzhinweise\n\nDer Schutz deiner personenbezogenen Daten hat für die Deutsche Telekom AG einen hohen Stellenwert. Wir informieren dich stets darüber, welche personenbezogenen Daten erfasst werden, wie wir diese verwenden und welche Gestaltungsmöglichkeiten du dabei hast.\n\n## 1. Welche Daten werden erfasst, wie werden sie verwendet und wie lange werden sie gespeichert?\n\nWir erfassen lediglich **technische Merkmale**: Wenn du unsere Webseiten besuchst, erfasst der Webserver vorübergehend den Domain-Namen oder die IP-Adresse deines Computers, die Dateianfrage des Clients (Dateiname und URL), den http-Antwort-Code und die Webseite, von der aus du unsere Seite aufrufst. Die erfassten Daten werden ausschließlich für Zwecke der Datensicherheit, insbesondere zur Abwehr von Angriffsversuchen auf unseren Webserver verwendet (Art. 6 Abs.1f DSGVO). Sie werden weder für die Erstellung von individuellen Nutzerprofilen verwendet noch an Dritte weitergegeben. Die Daten werden nach spätestens sieben Tagen wieder gelöscht. Wir behalten uns das Recht vor, anonymisierte Datensätze statistisch auszuwerten.\n\n## 2. Kontrolle der von Social-Media-Plugins verwendeten Daten und bei Verlinkungen zu Social-Media-Plattformen\n\nWir verwenden keine Social-Media-Plugins und verlinken nicht auf Social-Media-Plattformen.\n\n## 3. Wird mein Nutzungsverhalten ausgewertet, z. B. für Werbung, Tracking oder Betrugsprävention?\n\nWir möchten, dass du unsere Webseiten gerne nutzt und unsere Produkte und Dienste in Anspruch nimmst. Daran haben wir ein wirtschaftliches Interesse. Damit du die Informationen findest, die dich interessieren und wir unsere Webseiten nutzerfreundlich ausgestalten können, analysieren wir anonymisiert und pseudonymisiert das Nutzungsverhalten. Im Rahmen der gesetzlichen Regelungen legen wir, oder von uns im Rahmen einer Auftragsverarbeitung beauftragte Unternehmen, Nutzungsprofile an. Ein unmittelbarer Rückschluss auf deine Person ist dabei nicht möglich. Nachfolgend informieren wir dich allgemein über die verschiedenen Zwecke, Techniken, Speicherdauer sowie die Verarbeitungsländer.\n\n### Techniken\n\n### Erforderliche Cookies\n\nDiese Cookies sind notwendig, damit du durch die Seiten navigieren und wesentliche Funktionen nutzen kannst. Sie ermöglichen Grundfunktionen, um den Zugriff auf gesicherte Bereiche der Webseite zu gewährleisten. Rechtsgrundlage für diese Cookies ist Art. 6 Abs. 1b DSGVO bzw. bei Drittstaaten Art. 49 Abs. 1b DSGVO.\n\n| Firma     | Zweck            | Speicherdauer  | Land der Verarbeitung |\n| --------- | ---------------- | -------------- | --------------------- |\n| T-Systems | Session ID / WAF | Session cookie | Deutschland           |\n\n## 4. Wo finde ich die Informationen, die für mich wichtig sind?\n\nDieser **Datenschutzinhinweis** gibt einen Überblick über die Punkte, die für die Verarbeitung deiner Daten auf diesem Webportal durch die Deutsche Telekom gelten. Weitere Informationen, auch zum Datenschutz im Allgemeinen oder in speziellen Produkten, erhältst du auf https://www.telekom.com/en/corporate-responsibility/data-protection-data-security/data-protection und unter http://www.telekom.de/datenschutzhinweise.\n\n## 5. Wer ist für die Datenverarbeitung verantwortlich? An wen muss ich mich wenden, wenn ich Fragen zum Datenschutz bei der Deutschen Telekom habe?\n\nDatenverantwortliche ist die Deutsche Telekom AG. Bei Fragen kontaktiere bitte unseren Kundenservice oder unseren Datenschutzbeauftragten, Dr. Claus D. Ulmer, Friedrich-Ebert-Allee 140, 53113 Bonn, datenschutz@telekom.de.\n\n## 6. Welche Rechte habe ich?\n\nDu hast das Recht,\n\n<ol type="a">\n    <li><b>Auskunft</b> zu verlangen zu Kategorien der verarbeiteten personenbezogenen Daten, Verarbeitungszwecken, etwaigen Empfängern der Daten und der geplanten Speicherdauer (Art. 15 DSGVO);</li>\n    <li>die <b>Berichtigung</b> bzw. Ergänzung unrichtiger oder unvollständiger Daten zu verlangen (Art. 16 DSGVO);</li>\n    <li>eine erteilte Einwilligung jederzeit mit Wirkung für die Zukunft <b>zu widerrufen</b> (Art. 7 Abs. 3 DSGVO);</li>\n    <li>einer Datenverarbeitung, die aufgrund eines berechtigten Interesses erfolgen soll, aus Gründen <b>zu widersprechen</b>, die sich aus deiner besonderen Situation ergeben (Art. 21 Abs. 1 DSGVO);</li>\n    <li>in bestimmten Fällen im Rahmen des Art. 17 DSGVO die <b>Löschung</b> von Daten zu verlangen – insbesondere soweit die Daten für den vorgesehenen Zweck nicht mehr erforderlich sind bzw. unrechtmäßig verarbeitet werden - oder du deine Einwilligung gemäß oben (c) widerrufen oder einen Widerspruch gemäß oben (d) erklärt hast;</li>\n    <li>unter bestimmten Voraussetzungen die <b>Einschränkung</b> der Verarbeitung zu verlangen, soweit eine Löschung nicht möglich bzw. die Löschpflicht streitig ist (Art. 18 DSGVO);</li>\n    <li>auf <b>Datenübertragbarkeit</b>, d. h. du kannst die Daten, die du uns bereitgestellt hast, in einem gängigen maschinenlesbaren Format wie z. B.  CSV erhalten und, soweit erforderlich, an Dritte übermitteln (Art. 20 DSGVO);</li>\n    <li>sich bei der zuständigen <b>Aufsichtsbehörde</b> über die Datenverarbeitung zu <b>beschweren</b> (für Telekommunikationsverträge: Bundesbeauftragte für den Datenschutz und die Informationsfreiheit; für alle übrigen: Landesbeauftragte für den Datenschutz und die Informationsfreiheit Nordrhein-Westfalen).</li>\n</ol>\n\n## 7. An wen gibt die Deutsche Telekom AG meine Daten weiter?\n\nWir geben deine Daten ausschließlich **aufgrund gesetzlicher Verpflichtung** weiter: In bestimmen Fällen sind wir gesetzlich dazu verpflichtet, bestimmte Daten an die anfragende staatliche Stelle zu übermitteln.\n\n## 8. Wo werden meine Daten verarbeitet?\n\nDeine Daten werden in Deutschland und im europäischen Ausland verarbeitet. Findet eine Verarbeitung deiner Daten in Ausnahmefällen auch in Ländern außerhalb der Europäischen Union (in sog. Drittstaaten) statt, geschieht dies,\n\n<ol type="a">\n    <li>soweit du hierin ausdrücklich eingewilligt hast (Art. 49 Abs. 1a DSGVO). (In den meisten Ländern außerhalb der EU entspricht das Datenschutzniveau nicht den EU-Standards. Dies betrifft insbesondere umfassende Überwachungs- und Kontrollrechte staatliche Behörden – z. B. in den USA, die in den Datenschutz der europäischen Bürgerinnen und Bürger unverhältnismäßig eingreifen.),</li>\n    <li>oder soweit es für unsere Leistungserbringung dir gegenüber erforderlich ist (Art. 49 Abs. 1b DSGVO),</li>\n    <li>oder soweit es gesetzlich vorgesehen ist (Art. 49 Abs. 1c DSGVO).</li>\n</ol>\n\nDarüber hinaus erfolgt eine Verarbeitung deiner Daten in Drittstaaten nur, soweit durch bestimmte Maßnahmen sichergestellt ist, dass hierfür ein angemessenes Datenschutzniveau besteht (z. B. Angemessenheitsbeschluss der EU-Kommission oder sog. geeignete Garantien, Art. 44 ff. DSGVO).\n\n**© Deutsche Telekom AG – April 2022**\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.c,{title:"Legal/Privacy",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?Privacy_en:Privacy_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Legal/Privacy",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(blocks.b,{context:context},locale&&Object(esm.b)(blocks.a,{markdown:"en"===locale?Privacy_en:Privacy_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/FAQ.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),FAQ_en='# FAQ\n\nHere is a list of common questions about Scale, along with practical answers.\n\n## Are Scale components accessible?\n\n**They are!**\n\nAll Scale components meet the Telekom accessibility requirements as well as the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG21/) version 2.1, level AA criteria.\n\n[Learn more about accessibility](./?path=/docs/setup-info-accessibility--page) in Scale and how we test our components.\n\n## Can I integrate Scale into an ongoing project?\n\n**Yes, absolutely!**\n\nFeel free to use Scale components in addition to your own.\nThat\'ll save you some time on more general UI work, which you can reinvest to improve parts of the product you otherwise wouldn’t have time to focus on in such detail.\n\n**How does it work?**\n\nIf you manage dependencies within your project with npm or yarn and use either a bundler (e.g., Webpack) or ESM, the integration is very simple and straightforward.\nFor any other case, please get in touch so we can advise on the best setup.\n\n## How do I get access to Scale?\n\nHere are the best ways to get started:\n\n[General documentation](./?path=/story/scale-design-system--page)\n\n[For designers](./?path=/docs/setup-info-getting-started-for-designers--page)\n\n[For developers](./?path=/docs/setup-info-getting-started-for-developers--page)\n\nAlso have Sketch ready to work with Scale.\n\n## How mature is Scale?\n\nScale is currently an open beta. It is growing and evolving every day. And the contributions of our users are what make it a truly invaluable asset.\n\n[Learn how you can contribute](./?path=/story/contact-contributing-to-scale--page).\n\n## Is Scale open source?\n\n**Yes.**\nOur open-source design system is currently an open beta.\nWe are excited to receive your feedback! And we are delighted if you help us improve Scale with your ideas, experience and skills for developing new components and features.\n\nYou can find the <a href="https://github.com/telekom/scale" target="_blank">Scale Sourcecode on GitHub</a>\n\n## What if I need a new component?\n\nHere are some ideas:\n\n- Get in touch with the team. We might be able to prioritize your requirements. Ask us about beta or WIP options that could be helpful.\n- Create a component locally so it truly fits your specific needs.\n\nIf you need a component with specific requirements that Scale doesn\'t offer:\n\n- Develop the component locally that fits your specific needs. Also, if everyone will benefit, we’d love to [include it in the Scale library](./?path=/story/contact-contributing-to-scale--page).\n- Fork an existing component and improve upon it. If your requirements will benefit everyone, we’d love for you to [contribute to Scale](./?path=/story/contact-contributing-to-scale--page).\n- Contact us with your exact specifications and implementation ideas. We might be able to develop it.\n\n**A friendly design reminder**\nWhen developing components locally, make sure to follow the Telekom brand and design guidelines and use the quality of the Scale components for orientation.\n\n## What do I need to publish software?\n\nYou can include Scale for production just like you would for a local project.\n\n## Can I use Scale for designing email newsletters?\n\nUnfortunately, Scale is not compatible with emails. Please use the [design guidelines and instructions for creating newsletters](https://www.brand-design.telekom.com/en/articles/n/newsletter/) on Brand & Design. There you will also find suitable [newsletter templates](https://www.brand-design.telekom.com/en/asset/email-template-0-newsletter-templates/).\n\n## What is Scale exactly?\n\nScale is the new Telekom Digital Design System—a library of production-ready UI components in code and design. The components are brand-compliant and accessible and help you create intuitive interfaces quickly and easily.\n\nThe component library is centrally accessible and works with all modern frameworks used for building web applications. Scale is integrated into an optimized toolchain that greatly simplifies the frontend development workflow: As a UX designer you can easily integrate the Scale library into Sketch and receive automated updates. As a frontend developer you will find that implementation and updating with the library on NPM are as easy as it gets.\n\nScale is the single source of truth for both designers and developers. Design and code are always in sync and up to date. And since this single source of truth—Storybook—also holds the entire documentation for design and development, communication will improve within teams since everyone speaks the same language.\n\n## What is the Scale accessibility standard?\n\nWe aim at making inclusive products and experiences that serve everyone.\nScale components meet the Telekom accessibility requirements as well as the Web Content Accessibility Guidelines (WCAG) version 2.1, level AA criteria.\n\n[Have a look at our standards](./?path=/docs/setup-info-accessibility--page)\n\n**How to achieve full compliance**\n\nWhile the Scale components and standard theme enable accessible experiences, full compliance with all mandatory accessibility requirements relies on many other factors for your product as a whole.\nAs such, please have your particular product reviewed by an accessibility consultant to find out how to use the Scale components in the best possible way.\n\n**Suggestions welcome!**\n\nOur goal is to make Scale as accessible as possible. If you have any comments or suggestions on how we can make it better for users with disabilities, please raise an issue on our Git Repo or contact our support team.\n\n## Which browsers are supported?\n\n**We love evergreens!**\nAll our components are tested to support the most important (evergreen) browsers.\n\n[Our complete list of browsers](./?path=/docs/setup-info-browser-support--page)\n\n## Who is behind Scale?\n\nA joint team of UX designers and frontend specialists developed Scale with the aim of making frontend development easier, faster, and more effective.\nNow, a team of UX designers and developers maintains and refines Scale, making sure it continues to meet the current and future requirements of the project teams using it.\n\n## Why should I use Scale?\n\nBecause working with Scale has a host of benefits:\n\n**Faster frontend development:** Production-ready components save time in UX design and development, which means faster time to market for products and services.\n\n**Reduced production costs:** Fully designed and developed components avoid double work and reduce rework.\n\n**Happier teams:** Common resources and a shared language boost collaboration. Less routine tasks mean more time to be creative.\n\n**Easy brand-compliance:** Scale components are consistent with the Liquid Design System and therefore with the Telekom experience principles.\n\n**Better consistency:** With Storybook, all components are collected neatly in one place and are therefore always up to date.\n\n**Hassle-free accessibility:** Scale components fulfill the internal Telekom accessibility standards as well as the AA standard of the W3C, so we can build inclusive products that serve everyone.\n\n**Great flexibility:** Visual and functional elements can be adapted to meet specific project requirements, variants make for more versatility and new themes can be implemented with little technological effort.\n\n**Best compatibility:** Based on the Web Component standard, Scale components are interpreted directly by all modern browsers and can be used with the most common frameworks.\n\n**Smart toolchain:** Scale simplifies handoff and quality assurance processes, provides comprehensive documentation and is easy to integrate into your trusted environment.\n\n**Open source:** Scale is developed further with the help of its users. Your feedback, recommendations and ideas will help us improve our component library continuously.\n',FAQ_de='# FAQ\n\nHier findest du eine Liste mit häufig gestellten Fragen und nützlichen Antworten.\n\n## Erfüllen Scale Komponenten alle Anforderungen der Deutschen Telekom an die Barrierefreiheit?\n\n**Ja, das tun sie!**\n\nAlle Komponenten erfüllen sowohl die Anforderungen der Telekom an die Barrierefreiheit sowie die Kriterien der [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG21/) Version 2.1, Stufe AA.\n\n[Erfahre mehr zum Thema Barrierefreiheit](./?path=/story/scale-for-developers-accessibility--page) und wie wir unsere Komponenten daraufhin prüfen.\n\n## Kann ich Scale in ein laufendes Projekt integrieren?\n\n**Ja, unbedingt!**\n\nDu kannst die Scale Komponenten zusätzlich zu deinen eigenen Komponenten verwenden.\nDas spart wertvolle Zeit, die du in die Verbesserung deines Produkts oder Dienstes investieren kannst.\n\n**Und wie geht das?**\n\nWenn du dein Projekt mit npm oder yarn verwaltest oder du einen Bundler (z. B. Webpack) bzw. ESM verwendest, ist die Integration sehr einfach und unkompliziert.\nIn jedem anderen Fall kontaktiere uns bitte, damit wir dich über das beste Setup beraten können.\n\n## Wie erhalte ich Zugang zu Scale?\n\nAls Designer\\*in findest du alles Wichtige für den Start mit Scale hier:\n[Scale für Designer](./?path=/docs/setup-info-getting-started-for-designers--page)\n\nBitte beachte: Du benötigst Sketch, um Scale nutzen zu können.\n\nAls Entwickler\\*in erhältst du alle Informationen zur Nutzung von Scale hier:\n[Scale für Entwickler](./?path=/docs/setup-info-getting-started-for-developers--page)\n\n## Was ist der Entwicklungsstand von Scale?\n\nScale ist derzeit eine Open Beta und entwickelt sich stetig weiter. Vor allem die Beiträge unserer Nutzer\\*innen machen Scale zu einer so wertvollen Ressource.\nWie du mitmachen kannst, [erfährst du hier](./?path=/story/contact-contributing-to-scale--page).\n\n## Ist Scale open-source?\n\n**Ja.**\nUnser open-source Designsystem ist derzeit eine Open Beta. Deshalb freuen wir uns über dein Feedback! Und auch darüber, wenn du mit deiner Erfahrung und mit deinen Fähigkeiten und Ideen für neue Komponenten und Funktionen mithilfst, Scale weiter zu verbessern.\n\nDu findest den <a href="https://github.com/telekom/scale" target="_blank"> Scale Sourcecode auf GitHub.</a>\n\n## Ich benötige eine Komponente, die noch nicht in Scale verfügbar ist. Was kann ich tun?\n\nDann hast du einige Möglichkeiten:\n\n- Kontaktiere uns. Vielleicht können wir deine Anfrage priorisieren und dir die gewünschte Komponente bald bereitstellen. Möglicherweise können wir dir auch Beta- oder WIP-Optionen bereitstellen, die dir weiterhelfen.\n- Oder du erstellst die Komponente einfach selbst, damit sie die konkreten Anforderungen deines Produkts oder Dienstes erfüllt.\n\n**Wenn eine Komponente zwar verfügbar ist, diese aber nicht deinen spezifischen Anforderungen entspricht, kannst du Folgendes tun:**\n\n- Entwickle eine eigene Komponente, die genau diesen Anforderungen entspricht. Du denkst, dass auch andere davon profitieren könnten? Prima, dann würden wir uns sehr freuen, wenn du uns deine [Komponente in der Scale Library zur Verfügung stellen](./?path=/story/contact-contributing-to-scale--page) würdest.\n- Benutze einfach eine bereits bestehende Komponente und verändere sie. Auch in diesem Fall freuen wir uns, wenn du [deine Version mit uns teilst](./?path=/story/contact-contributing-to-scale--page).\n- Oder kontaktiere uns, um deine genauen Spezifikationen sowie Umsetzungsideen mitzuteilen. Wir prüfen dann, ob wir dir die Komponenten ganz nach deinen Wünschen erstellen können.\n\n**Freundliche Erinnerung**\nBitte halte dich bei der Entwicklung von Komponenten immer an die Marken- und Designrichtlinien der Deutschen Telekom. Orientiere dich dabei an der Qualität der Scale Komponenten.\n\n## Was benötige ich, um Produkte und Dienste zu entwickeln?\n\nDu kannst Scale für die Produktion genauso einbinden, wie du es für ein lokales Projekt tun würdest.\n\n## Kann ich Scale für die Gestaltung von E-Mail-Newslettern nutzen?\n\nLeider ist Scale mit E-Mails nicht kompatibel. Nutze einfach die [Gestaltungsvorgaben und Informationen für das Erstellen von Newslettern](https://www.brand-design.telekom.com/artikel/n/newsletter/) auf Brand & Design. Dort findest du auch passende [Newsletter Templates](https://www.brand-design.telekom.com/asset/email-template-0-newsletter-templates/).\n\n## Was ist Scale genau?\n\nScale ist das neue digitale Designsystem der Telekom – eine Bibliothek produktionsfertiger UI-Komponenten, die in Code und Design vorliegen. Sie sind brandkonform und barrierefrei, sodass du mit Leichtigkeit intutive Interfaces erstellen kannst.\n\nDie Komponenten-Bibliothek ist zentral zugänglich und funktioniert mit allen gängigen Frameworks, die zur Erstellung von Webanwendungen verwendet werden. Außerdem ist sie in eine optimierte Toolchain integriert, die die Abläufe in der Frontend-Entwicklung stark vereinfacht: Als UX-Designer*in kannst du die Scale Bibliothek ganz leicht in Sketch integrieren und dich über automatische Updates freuen. Als Frontend-Entwickler*in profitierst du von der einfachen Implementierung und mühelosen Updates mit der Bibliothek auf NPM.\n\nScale ist "Single Source Of Truth" für Designer*innen und Entwickler*innen. Design und Code sind immer auf dem neuesten Stand. Und weil dieser eine Ort – Storybook – auch die gesamte Dokumentation für Design und Entwicklung enthält, verbessert sich die Zusammenarbeit im Team, weil alle dieselbe Sprache sprechen.\n\n## Wie gestalte ich barrierefreie Produkte und Dienste mit Scale?\n\nUnser Ziel ist es, inklusive Produkte und Erlebnisse zu schaffen, die allen Menschen zugänglich sind. Daher erfüllen die Scale Komponenten bereits alle Anforderungen der Telekom für Barrierefreiheit sowie die Kriterien der Web Content Accessibility Guidelines (WCAG) Version 2.1, Stufe AA.\n\nHier findest du [weitere Informationen zum Thema Barrierefreiheit](./?path=/docs/setup-info-accessibility--page)\n\n**Wirklich alle Anforderungen kennen**\n\nDie Scale Komponenten und das Standard Theme erfüllen bereits die Basis der Anforderungen für ein barrierefreies Nutzungserlebnis. Es gibt aber noch eine Reihe anderer wichtiger Faktoren, um die vollständige Barrierefreiheit deines Produkts oder Dienstes zu gewährleisten.\nWende dich dafür an die Berater\\*innen für Barrierefreiheit, um zu erfahren, wie du die Scale Komponenten bestmöglich einsetzt.\n\n**Deine Ideen**\n\nUnser Ziel ist es, Scale so zugänglich wie möglich zu machen. Wenn du Ideen oder Vorschläge hast, wie wir Scale für Menschen mit Einschränkungen oder Behinderungen noch besser machen können, dann erstelle bitte ein Issue im Git Repo oder kontaktiere den Support.\n\n## Welche Browser unterstützt Scale?\n\n**Wir setzen auf Evergreens**\nAlle unsere Komponenten funktionieren mit den gängigsten Internet-Browsern.\n\nHier findest du die [komplette Liste](./?path=/docs/setup-info-browser-support--page)\n\n## Wer steckt hinter Scale?\n\nScale wurde gemeinsam mit UX-Designer\\*innen und Frontend-Spezialist\\*innen entwickelt, um die Frontend-Entwicklung einfacher, schneller und effektiver zu machen.\nEin Team aus UX-Designer\\*innen und Entwickler\\*innen pflegt Scale und entwickelt es weiter, um sicherzustellen, dass es weiterhin die aktuellen und zukünftigen Anforderungen der Projektteams erfüllt.\n\n## Warum sollte ich Scale nutzen?\n\nWeil Scale dir viele Vorteile bietet:\n\n**Schnellere Frontend-Entwicklung:** Produktionsfertige Komponenten sparen Zeit in UX-Design und Entwicklung. Produkte und Services kommen schneller auf den Markt.\n\n**Niedrigere Produktionskosten:** Mit vollständig designten und entwickelten Komponenten wird Doppelarbeit vermieden und Nacharbeit deutlich reduziert.\n\n**Zufriedenere Teams:** Gemeinsame Ressourcen und eine gemeinsame Sprache verbessern die Zusammenarbeit. Durch weniger Routineaufgaben bleibt mehr Zeit für Kreativität.\n\n**Mühelose Markenkonformität:** Scale Komponenten erfüllen alle Anforderungen des Liquid Design Systems und damit die Experience-Richtlinien der Telekom.\n\n**Verbesserte Konsistenz:** Mit Storybook sind alle Komponenten an einem einzigen Zugriffspunkt gesammelt und damit immer aktuell.\n\n**Einfache Barrierefreiheit:** Mit Komponenten, die die internen Telekom Standards sowie die Stufe-AA-Kriterien der W3C erfüllen, entwickeln wir Produkte, die für alle zugänglich sind.\n\n**Große Flexibilität:** Visuelle und funktionale Elemente können projektspezifisch angepasst werden, Varianten sorgen für Abwechslung und neue Themes lassen sich mit wenig Aufwand umsetzen.\n\n**Beste Kompatibilität:** Basierend auf dem Web-Component-Standard werden Scale Komponenten von allen modernen Browsern direkt interpretiert und können mit den gängigsten Frameworks genutzt werden.\n\n**Smarte Toolchain:** Scale vereinfacht Übergabe- und Qualitätssicherungsprozesse, bietet eine umfassende Dokumentation und lässt sich leicht in die gewohnte Arbeitsumgebung integrieren.\n\n**Open-source:** Scale darf sich mit Hilfe seiner Nutzer\\*innen weiterentwickeln. Mit Feedback, Vorschlägen und Ideen verbessert sich unsere Komponenten-Bibliothek stetig weiter.\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"FAQ",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?FAQ_en:FAQ_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"FAQ",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?FAQ_en:FAQ_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/Index.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Index_en="<br/>\n\n### Scale is the Telekom Digital Design System\n\nScale is a part of Brand & Design. All components are brand compliant and help create a coherent brand experience.\n\n### Code and design for consistent products\n\nBased on our brand identity, the Scale design system helps you develop consistent products. This is how you contribute to strengthening the Telekom brand.\n\n### Accessibility out of the box\n\nScale components meet the technical requirements for the accessibility level AA. They are just as suitable for customer-focused products as they are for internal use cases.\n\n### Compatible with the relevant framework and design tools\n\nThe UI libraries are available in Figma and Sketch. You can use the code components as pure web components or in the framework for Vue, React, and Angular.\n\n### For the best user experience\n\nScale saves you time throughout the entire design and development process: for the design of user interfaces, prototyping, design handover, front-end development, and in the approval process with Brand & Design. This leaves more time to create specific features and functionality.\n\n### Flexibility and scalability through design tokens\n\nBy including design tokens, Scale is particularly adaptable. Changes and additions can be implemented quickly. Other themes for third-party brands can also be created quickly.\n\n### For better collaboration\n\nA design system encourages collaboration between teams and stakeholders. It creates a common foundation on which everyone can build together. As a designer or developer, you can help improve Scale. Send us your new or improved components to share with your colleagues in Scale.\n",Index_de="<br/>\n\n### Scale ist das digitale Design System der Telekom\n\nScale ist Teil von Brand & Design. Alle Komponenten sind markenkonform und helfen, ein kohärentes Markenerlebnis zu schaffen.\n\n### Code und Design für konsistente Produkte\n\nDas auf unserer Markenidentität basierende Designsystem hilft dir, konsistente Produkte zu entwickeln. So stärkst du die Marke Telekom.\n\n### Barrierefreiheit „out of the box“\n\nDie Komponenten von Scale erfüllen die technischen Anforderungen für das Level AA der Barrierefreiheit. Sie sind ebenso für kundenbezogene Produkte wie für interne Anwendungen geeignet.\n\n### Kompatibel mit den relevanten Frameworks und Design Tools\n\nDie UI Libraries gibt es im Figma- und Sketchformat. Die Code Komponenten kannst du als reine Web-Komponenten oder in den Frameworks Vue, React und Angular verwenden.\n\n### Für die beste User Experience\n\nMit Scale sparst du Zeit – und zwar im gesamten Design- und Entwicklungsprozess: bei der Gestaltung von User Interfaces, beim Prototyping, der Design-Übergabe, der Frontend-Entwicklung und im Freigabeprozess mit Brand & Design. So bleibt mehr Zeit für spezifische Funktionen und Lösungen.\n\n### Flexibilität und Skalierbarkeit durch Design Tokens\n\nDurch die Verwendung von Design Tokens ist Scale besonders anpassungsfähig. Änderungen und Erweiterungen lassen sich schnell umsetzen. Auch weitere Themes für bspw. Drittmarken sind schnell erstellt.\n\n### Für bessere Kollaboration\n\nEin Designsytsem fördert die Zusammenarbeit zwischen Teams und Stakeholdern. Es schafft eine gemeinsame Grundlage, auf die alle Beteiligten gemeinsam aufbauen können. Als Designer*in oder Entwickler*in kannst du dazu beitragen, Scale zu verbessern. Schicke uns deine neuen oder verbesserten Komponenten, um sie mit deinen Kolleg\\*innen in Scale zu teilen.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Scale Design System",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale,alt="en"===locale?"Welcome to Scale Design System":"Wilkommen beim Scale Design System";return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},Object(esm.b)("img",{src:"assets/welcome.png",alt:alt,style:{width:"100%"}}),locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Index_en:Index_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Scale Design System",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale,alt="en"===locale?"Welcome to Scale Design System":"Wilkommen beim Scale Design System";return Object(esm.b)(dist_esm.e,{context:context},Object(esm.b)("img",{src:"assets/welcome.png",alt:alt,style:{width:"100%"}}),locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Index_en:Index_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/accordion/Accordion.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Accordion_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"dependent",(function(){return dependent})),__webpack_require__.d(__webpack_exports__,"expanded",(function(){return expanded})),__webpack_require__.d(__webpack_exports__,"headingLevel",(function(){return headingLevel}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),accordion_ScaleAccordionvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{styles:{type:String},dependent:{type:Boolean,default:!1},expanded:{type:Boolean,default:!1},headingLevel:{type:Number},iconLocation:{type:String,default:"left"}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(accordion_ScaleAccordionvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-accordion",{attrs:{styles:this.styles,dependent:this.dependent,expanded:this.expanded,"heading-level":this.headingLevel,"icon-location":this.iconLocation}},[this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleAccordion=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleAccordion",description:"",tags:{},props:[{name:"styles",type:{name:"string"}},{name:"dependent",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"expanded",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"headingLevel",type:{name:"number"}},{name:"iconLocation",type:{name:"string"},defaultValue:{func:!1,value:"'left'"}}],slots:[{name:"default"}]};var Accordion_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleAccordion:ScaleAccordion},props:Object.assign({},ScaleAccordion.props),template:'\n    <scale-accordion\n      :styles="styles"\n      :dependent="dependent"\n      :expanded="expanded"\n      :headingLevel="headingLevel"\n    >\n      <scale-collapsible>\n        <span slot="heading">Leo integer malesuada nunc vel risus</span>\n        <p>Freegan kinfolk <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic master cleanse copper mug schlitz palo santo bushwick ethical pop-up chambray portland. Sartorial austin iceland street art, pug asymmetrical marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck everyday carry 3 wolf moon.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Dolor purus non enim</span>\n        <p>Bespoke austin pork belly yuccie pop-up. <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers microdosing etsy hashtag seitan photo booth bitters.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>\n        <p>Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh four loko selfies you probably haven\'t heard of them locavore bushwick. Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf godard skateboard celiac taxidermy tacos offal.</p>\n      </scale-collapsible>\n    </scale-accordion>\n  '}},layoutProps={Template:Accordion_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Accordion",component:ScaleAccordion,argTypes:{dependent:{defaultValue:!1,control:{type:"boolean"}},expanded:{defaultValue:!1,control:{type:"boolean"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Accordion"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",mdxType:"Story"},Accordion_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-accordion>\n  <scale-collapsible>\n    <span slot="heading">Leo integer malesuada nunc vel risus</span>\n    <p>\n      Freegan kinfolk\n      <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock\n      bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic\n      master cleanse copper mug schlitz palo santo bushwick ethical pop-up\n      chambray portland. Sartorial austin iceland street art, pug asymmetrical\n      marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin\n      food truck everyday carry 3 wolf moon.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading">Dolor purus non enim</span>\n    <p>\n      Bespoke austin pork belly yuccie pop-up.\n      <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter\n      scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers\n      microdosing etsy hashtag seitan photo booth bitters.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading"\n      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span\n    >\n    <p>\n      Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe\n      helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh\n      four loko selfies you probably haven\'t heard of them locavore bushwick.\n      Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf\n      godard skateboard celiac taxidermy tacos offal.\n    </p>\n  </scale-collapsible>\n</scale-accordion>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"/* scale-collapsible */\n:host {\n  --spacing-y: var(--telekom-spacing-composition-space-06);\n\n  /* button */\n  --font: var(--telekom-text-style-heading-5);\n  --border-width-button: var(--telekom-spacing-composition-space-02);\n  --radius-button: var(--telekom-radius-small);\n  --spacing-left-button: 0;\n  --spacing-left-button-text: var(--telekom-spacing-composition-space-04);\n  --color-button-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-button-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --background-button-hover: none;\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n\n  /* content */\n  --spacing-right-content: var(--telekom-spacing-composition-space-14);\n  --spacing-left-content: 34px;\n  --spacing-top-content: var(--telekom-spacing-composition-space-06);\n  --spacing-bottom-content: var(--telekom-spacing-composition-space-08);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"dependent"},"Dependent"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dependent",args:{dependent:!0},mdxType:"Story"},Accordion_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-accordion dependent>\n  <scale-collapsible>\n    <span slot="heading">Leo integer malesuada nunc vel risus</span>\n    <p>\n      Freegan kinfolk\n      <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock\n      bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic\n      master cleanse copper mug schlitz palo santo bushwick ethical pop-up\n      chambray portland. Sartorial austin iceland street art, pug asymmetrical\n      marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin\n      food truck everyday carry 3 wolf moon.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading">Dolor purus non enim</span>\n    <p>\n      Bespoke austin pork belly yuccie pop-up.\n      <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter\n      scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers\n      microdosing etsy hashtag seitan photo booth bitters.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading"\n      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span\n    >\n    <p>\n      Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe\n      helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh\n      four loko selfies you probably haven\'t heard of them locavore bushwick.\n      Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf\n      godard skateboard celiac taxidermy tacos offal.\n    </p>\n  </scale-collapsible>\n</scale-accordion>\n')),Object(esm.b)("h2",{id:"expanded"},"Expanded"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Expanded",args:{expanded:!0},mdxType:"Story"},Accordion_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-accordion expanded>\n  <scale-collapsible>\n    <span slot="heading">Leo integer malesuada nunc vel risus</span>\n    <p>\n      Freegan kinfolk\n      <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock\n      bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic\n      master cleanse copper mug schlitz palo santo bushwick ethical pop-up\n      chambray portland. Sartorial austin iceland street art, pug asymmetrical\n      marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin\n      food truck everyday carry 3 wolf moon.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading">Dolor purus non enim</span>\n    <p>\n      Bespoke austin pork belly yuccie pop-up.\n      <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter\n      scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers\n      microdosing etsy hashtag seitan photo booth bitters.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading"\n      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span\n    >\n    <p>\n      Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe\n      helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh\n      four loko selfies you probably haven\'t heard of them locavore bushwick.\n      Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf\n      godard skateboard celiac taxidermy tacos offal.\n    </p>\n  </scale-collapsible>\n</scale-accordion>\n')),Object(esm.b)("h2",{id:"heading-level"},"Heading Level"),Object(esm.b)("p",null,"The default level for the heading (h1, h2, h3…) inside the toggle button is ",Object(esm.b)("inlineCode",{parentName:"p"},"2"),". So setting ",Object(esm.b)("inlineCode",{parentName:"p"},"heading-level")," in ",Object(esm.b)("inlineCode",{parentName:"p"},"<scale-accordion>")," will affect all ",Object(esm.b)("inlineCode",{parentName:"p"},"<scale-collapsible>")," children automatically."),Object(esm.b)("p",null,"Adding ",Object(esm.b)("inlineCode",{parentName:"p"},'aria-level=""')," to the heading slot on each item is not needed, but results in better accessibility in case JavaScript fails to load or execute."),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Heading Level",args:{headingLevel:3},mdxType:"Story"},Accordion_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-accordion heading-level="3">\n  <scale-collapsible>\n    <span slot="heading" aria-level="3"\n      >Leo integer malesuada nunc vel risus</span\n    >\n    <p>\n      Freegan kinfolk\n      <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock\n      bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic\n      master cleanse copper mug schlitz palo santo bushwick ethical pop-up\n      chambray portland. Sartorial austin iceland street art, pug asymmetrical\n      marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin\n      food truck everyday carry 3 wolf moon.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading" aria-level="3">Dolor purus non enim</span>\n    <p>\n      Bespoke austin pork belly yuccie pop-up.\n      <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter\n      scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers\n      microdosing etsy hashtag seitan photo booth bitters.\n    </p>\n  </scale-collapsible>\n  <scale-collapsible>\n    <span slot="heading" aria-level="3"\n      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span\n    >\n    <p>\n      Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe\n      helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh\n      four loko selfies you probably haven\'t heard of them locavore bushwick.\n      Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf\n      godard skateboard celiac taxidermy tacos offal.\n    </p>\n  </scale-collapsible>\n</scale-accordion>\n')))}MDXContent.isMDXComponent=!0;var standard=Accordion_stories_Template.bind({});standard.storyName="Standard",standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleAccordion\n  },\n  props: { ...ScaleAccordion.props\n  },\n  template: `\n    <scale-accordion\n      :styles="styles"\n      :dependent="dependent"\n      :expanded="expanded"\n      :headingLevel="headingLevel"\n    >\n      <scale-collapsible>\n        <span slot="heading">Leo integer malesuada nunc vel risus</span>\n        <p>Freegan kinfolk <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic master cleanse copper mug schlitz palo santo bushwick ethical pop-up chambray portland. Sartorial austin iceland street art, pug asymmetrical marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck everyday carry 3 wolf moon.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Dolor purus non enim</span>\n        <p>Bespoke austin pork belly yuccie pop-up. <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers microdosing etsy hashtag seitan photo booth bitters.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>\n        <p>Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh four loko selfies you probably haven\'t heard of them locavore bushwick. Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf godard skateboard celiac taxidermy tacos offal.</p>\n      </scale-collapsible>\n    </scale-accordion>\n  `\n})'}};var dependent=Accordion_stories_Template.bind({});dependent.storyName="Dependent",dependent.args={dependent:!0},dependent.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleAccordion\n  },\n  props: { ...ScaleAccordion.props\n  },\n  template: `\n    <scale-accordion\n      :styles="styles"\n      :dependent="dependent"\n      :expanded="expanded"\n      :headingLevel="headingLevel"\n    >\n      <scale-collapsible>\n        <span slot="heading">Leo integer malesuada nunc vel risus</span>\n        <p>Freegan kinfolk <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic master cleanse copper mug schlitz palo santo bushwick ethical pop-up chambray portland. Sartorial austin iceland street art, pug asymmetrical marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck everyday carry 3 wolf moon.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Dolor purus non enim</span>\n        <p>Bespoke austin pork belly yuccie pop-up. <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers microdosing etsy hashtag seitan photo booth bitters.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>\n        <p>Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh four loko selfies you probably haven\'t heard of them locavore bushwick. Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf godard skateboard celiac taxidermy tacos offal.</p>\n      </scale-collapsible>\n    </scale-accordion>\n  `\n})'}};var expanded=Accordion_stories_Template.bind({});expanded.storyName="Expanded",expanded.args={expanded:!0},expanded.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleAccordion\n  },\n  props: { ...ScaleAccordion.props\n  },\n  template: `\n    <scale-accordion\n      :styles="styles"\n      :dependent="dependent"\n      :expanded="expanded"\n      :headingLevel="headingLevel"\n    >\n      <scale-collapsible>\n        <span slot="heading">Leo integer malesuada nunc vel risus</span>\n        <p>Freegan kinfolk <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic master cleanse copper mug schlitz palo santo bushwick ethical pop-up chambray portland. Sartorial austin iceland street art, pug asymmetrical marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck everyday carry 3 wolf moon.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Dolor purus non enim</span>\n        <p>Bespoke austin pork belly yuccie pop-up. <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers microdosing etsy hashtag seitan photo booth bitters.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>\n        <p>Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh four loko selfies you probably haven\'t heard of them locavore bushwick. Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf godard skateboard celiac taxidermy tacos offal.</p>\n      </scale-collapsible>\n    </scale-accordion>\n  `\n})'}};var headingLevel=Accordion_stories_Template.bind({});headingLevel.storyName="Heading Level",headingLevel.args={headingLevel:3},headingLevel.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleAccordion\n  },\n  props: { ...ScaleAccordion.props\n  },\n  template: `\n    <scale-accordion\n      :styles="styles"\n      :dependent="dependent"\n      :expanded="expanded"\n      :headingLevel="headingLevel"\n    >\n      <scale-collapsible>\n        <span slot="heading">Leo integer malesuada nunc vel risus</span>\n        <p>Freegan kinfolk <scale-link href="/">farm-to-table humblebrag cred</scale-link>, hammock bespoke small batch pabst. 90\'s tumblr whatever direct trade, organic master cleanse copper mug schlitz palo santo bushwick ethical pop-up chambray portland. Sartorial austin iceland street art, pug asymmetrical marfa mustache mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck everyday carry 3 wolf moon.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Dolor purus non enim</span>\n        <p>Bespoke austin pork belly yuccie pop-up. <scale-link href="/">Before they sold out</scale-link> YOLO kickstarter scenester meggings echo park aesthetic. Thundercats post-ironic wayfarers microdosing etsy hashtag seitan photo booth bitters.</p>\n      </scale-collapsible>\n      <scale-collapsible>\n        <span slot="heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>\n        <p>Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe helvetica brunch godard cray viral prism. Street art tattooed bitters, ugh four loko selfies you probably haven\'t heard of them locavore bushwick. Tattooed 90\'s kinfolk, banh mi umami banjo palo santo cliche. Cray wolf godard skateboard celiac taxidermy tacos offal.</p>\n      </scale-collapsible>\n    </scale-accordion>\n  `\n})'}};var componentMeta={title:"Components/Accordion",component:ScaleAccordion,argTypes:{dependent:{defaultValue:!1,control:{type:"boolean"}},expanded:{defaultValue:!1,control:{type:"boolean"}}},includeStories:["standard","dependent","expanded","headingLevel"]},mdxStoryNameToKey={Standard:"standard",Dependent:"dependent",Expanded:"expanded","Heading Level":"headingLevel"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/breadcrumb/Breadcrumb.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Breadcrumb_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),breadcrumb_ScaleBreadcrumbvue_type_script_lang_js_={props:{separator:String,styles:{type:String}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(breadcrumb_ScaleBreadcrumbvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-breadcrumb",{attrs:{separator:this.separator,styles:this.styles}},[this._t("default"),this._v(" "),this._t("separator")],2)}),[],!1,null,null,null).exports;var ScaleBreadcrumb=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleBreadcrumb",description:"",tags:{},props:[{name:"separator",type:{name:"string"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"},{name:"separator"}]};var Breadcrumb_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleBreadcrumb:ScaleBreadcrumb},props:Object.assign({label:String},ScaleBreadcrumb.props),template:'\n    <scale-breadcrumb\n      :separator="separator"\n      :styles="styles"\n    >\n      <a href="#1">Home</a>\n      <a href="#2">Page 1</a>\n      <a href="#2">Page 2</a>\n      <a href="#3">Current Page</a>\n      <template v-if="separator === true" #separator>\n        <span slot="separator">\n          <scale-icon-navigation-right size={12} color="#6B6B6B"></scale-icon-navigation-right>\n        </span>\n      </template>\n    </scale-breadcrumb>\n  '}},layoutProps={Template:Breadcrumb_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Breadcrumb",component:ScaleBreadcrumb,argTypes:{separator:{control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Breadcrumb"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},Breadcrumb_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-breadcrumb separator="---">\n  <a href="#1">First link</a>\n  <a href="#2">Second link</a>\n  <a href="#3">Third link</a>\n</scale-breadcrumb>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --spacing-left: calc(-1 * var(--telekom-spacing-composition-space-04));\n\n  --font-size-list-item: var(--telekom-typography-font-size-caption);\n\n  --color-separator: var(--telekom-color-text-and-icon-additional);\n\n  --spacing-y-item: var(--telekom-spacing-composition-space-03);\n  --spacing-x-item: var(--telekom-spacing-composition-space-04);\n\n  --color-link: var(--telekom-color-text-and-icon-additional);\n  --radius-link: var(--telekom-radius-standard);\n  --color-link-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-link-active: var(--telekom-color-text-and-icon-primary-pressed);\n\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --font-current: var(--telekom-text-style-caption-bold);\n  --color-current: var(--telekom-color-text-and-icon-standard);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."))}MDXContent.isMDXComponent=!0;var standard=Breadcrumb_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleBreadcrumb\n  },\n  props: {\n    label: String,\n    ...ScaleBreadcrumb.props\n  },\n  template: `\n    <scale-breadcrumb\n      :separator="separator"\n      :styles="styles"\n    >\n      <a href="#1">Home</a>\n      <a href="#2">Page 1</a>\n      <a href="#2">Page 2</a>\n      <a href="#3">Current Page</a>\n      <template v-if="separator === true" #separator>\n        <span slot="separator">\n          <scale-icon-navigation-right size={12} color="#6B6B6B"></scale-icon-navigation-right>\n        </span>\n      </template>\n    </scale-breadcrumb>\n  `\n})'}};var componentMeta={title:"Components/Breadcrumb",component:ScaleBreadcrumb,argTypes:{separator:{control:{type:"text"}}},includeStories:["standard"]},mdxStoryNameToKey={Standard:"standard"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/button/Button.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Button_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"secondary",(function(){return secondary})),__webpack_require__.d(__webpack_exports__,"secondaryWhite",(function(){return secondaryWhite})),__webpack_require__.d(__webpack_exports__,"ghostStandard",(function(){return ghostStandard})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"secondaryDisabled",(function(){return secondaryDisabled})),__webpack_require__.d(__webpack_exports__,"ghostDisabled",(function(){return ghostDisabled})),__webpack_require__.d(__webpack_exports__,"withIconBefore",(function(){return withIconBefore})),__webpack_require__.d(__webpack_exports__,"withIconAfter",(function(){return withIconAfter})),__webpack_require__.d(__webpack_exports__,"iconOnly",(function(){return iconOnly})),__webpack_require__.d(__webpack_exports__,"link",(function(){return Button_stories_link})),__webpack_require__.d(__webpack_exports__,"linkDownload",(function(){return linkDownload})),__webpack_require__.d(__webpack_exports__,"externalLink",(function(){return externalLink})),__webpack_require__.d(__webpack_exports__,"smallStandard",(function(){return smallStandard})),__webpack_require__.d(__webpack_exports__,"smallSecondary",(function(){return smallSecondary})),__webpack_require__.d(__webpack_exports__,"smallDisabled",(function(){return smallDisabled})),__webpack_require__.d(__webpack_exports__,"smallSecondaryDisabled",(function(){return smallSecondaryDisabled})),__webpack_require__.d(__webpack_exports__,"smallWithIconBefore",(function(){return smallWithIconBefore})),__webpack_require__.d(__webpack_exports__,"smallWithIconAfter",(function(){return smallWithIconAfter})),__webpack_require__.d(__webpack_exports__,"smallIconOnly",(function(){return smallIconOnly})),__webpack_require__.d(__webpack_exports__,"smallLink",(function(){return smallLink})),__webpack_require__.d(__webpack_exports__,"smallLinkDownload",(function(){return smallLinkDownload}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),handler=Object(addon_actions_dist_esm.action)("click"),button_ScaleButtonvue_type_script_lang_js_={props:{disabled:Boolean,href:String,download:String,type:String,name:String,value:String,target:String,variant:String,size:String,iconOnly:Boolean,innerTabindex:Number,innerAriaLabel:String,styles:String},methods:{handler:handler}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(button_ScaleButtonvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-button",{attrs:{disabled:_vm.disabled,href:_vm.href,download:_vm.download,target:_vm.target,size:_vm.size,type:_vm.type,name:_vm.name,value:_vm.value,variant:_vm.variant,"icon-only":_vm.iconOnly,"inner-tabindex":_vm.innerTabindex,"inner-aria-label":_vm.innerAriaLabel,styles:_vm.styles},on:{click:_vm.handler}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleButton=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleButton",description:"",tags:{},props:[{name:"disabled",type:{name:"boolean"}},{name:"href",type:{name:"string"}},{name:"download",type:{name:"string"}},{name:"type",type:{name:"string"}},{name:"name",type:{name:"string"}},{name:"value",type:{name:"string"}},{name:"target",type:{name:"string"}},{name:"variant",type:{name:"string"}},{name:"size",type:{name:"string"}},{name:"iconOnly",type:{name:"boolean"}},{name:"innerTabindex",type:{name:"number"}},{name:"innerAriaLabel",type:{name:"string"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var Button_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleButton:ScaleButton},props:Object.assign({label:String,icon:String},ScaleButton.props),template:'\n  <div style="'+("secondary-white"===args.variant?"background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);":"")+'">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  '}},layoutProps={Template:Button_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Button",component:ScaleButton,argTypes:{size:{control:{type:"select",options:["large","small"]}},variant:{control:{type:"select",options:["primary","secondary","ghost"]}},type:{control:{type:"select",options:["reset","submit","button"]}},label:{defaultValue:"Label",control:{type:"text"}},disabled:{control:{type:"boolean"}},download:{control:{type:"text"}},innerAriaLabel:{control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Button"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Label"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-button>Label</scale-button>\n")),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: auto;\n  --spacing-x-right: var(--telekom-spacing-composition-space-07);\n  --spacing-x-left: var(--telekom-spacing-composition-space-07);\n  --spacing-x-icon-only: var(--telekom-spacing-composition-space-05);\n  --min-height: var(--telekom-spacing-composition-space-13);\n  --min-width: var(--telekom-spacing-composition-space-13);\n  --radius: var(--telekom-radius-standard);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --color-focus: var(--telekom-color-functional-focus-standard);\n  --font-weight: var(--telekom-typography-font-weight-bold);\n  --font-size: var(--telekom-typography-font-size-body);\n  --line-height: var(--telekom-typography-line-spacing-tight);\n  --spacing-icon-x: var(--telekom-spacing-composition-space-04);\n  --vertical-align: middle;\n\n  /* size: small */\n  --font-size-small: var(--telekom-typography-font-size-caption);\n  --line-height-small: 1.125rem;\n  --min-height-small: var(--telekom-spacing-composition-space-10);\n  --spacing-x-right-small: var(--telekom-spacing-composition-space-06);\n  --spacing-x-left-small: var(--telekom-spacing-composition-space-06);\n  --spacing-x-icon-only-small: var(--telekom-spacing-composition-space-00);\n  --spacing-icon-x-small: var(--telekom-spacing-composition-space-03);\n\n  /* variant: primary */\n  --radius-primary: var(--radius);\n  --background-primary: var(--telekom-color-primary-standard);\n  --background-primary-hover: var(--telekom-color-primary-hovered);\n  --background-primary-active: var(--telekom-color-primary-pressed);\n  --background-primary-disabled: var(--telekom-color-ui-disabled);\n  --color-primary: var(--telekom-color-text-and-icon-white-standard);\n  --color-primary-disabled: var(--telekom-color-text-and-icon-disabled);\n\n  /* variant: secondary */\n  --radius-secondary: var(--radius);\n  --border-width-secondary: var(--telekom-spacing-composition-space-01);\n  --background-secondary: transparent;\n  --color-secondary: var(--telekom-color-text-and-icon-standard);\n  --color-secondary-hover: var(--telekom-color-text-and-icon-standard);\n  --color-secondary-active: var(--telekom-color-text-and-icon-standard);\n  --color-secondary-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-secondary: var(--telekom-color-ui-state-fill-standard);\n  --background-secondary-hover: var(--telekom-color-ui-state-fill-hovered);\n  --background-secondary-active: var(--telekom-color-ui-state-fill-pressed);\n  --background-secondary-disabled: none;\n  --border-secondary: var(--telekom-color-ui-border-standard);\n  --border-secondary-hover: var(--telekom-color-ui-border-hovered);\n  --border-secondary-active: var(--telekom-color-ui-border-pressed);\n  --border-secondary-focus: var(--telekom-color-functional-focus-standard);\n\n  /* variant: secondary white */\n  --border-secondary-white: var(--telekom-color-ui-white);\n  --color-secondary-white: var(--telekom-color-ui-white);\n  --background-secondary-white-hover: var(\n    --telekom-color-ui-state-fill-hovered-inverted\n  );\n  --background-secondary-white-active: var(\n    --telekom-color-ui-state-fill-pressed-inverted\n  );\n  --secondary-white-opacity: 0.5;\n\n  /* variant: ghost */\n  --radius-ghost: var(--radius);\n  --border-width-ghost: var(--telekom-spacing-composition-space-01);\n  --spacing-x-ghost: var(--telekom-spacing-composition-space-04);\n  --color-ghost: var(--telekom-color-text-and-icon-primary-standard);\n  --color-ghost-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-ghost-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --color-ghost-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-ghost-hover: var(--telekom-color-ui-state-fill-hovered);\n  --background-ghost-active: var(--telekom-color-ui-state-fill-pressed);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"secondary"},"Secondary"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Secondary",args:{variant:"secondary"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button variant="secondary">Label</scale-button>\n')),Object(esm.b)("h2",{id:"secondary-white"},"Secondary White"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Secondary White",args:{variant:"secondary-white"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button variant="secondary-white">Label</scale-button>\n')),Object(esm.b)("h2",{id:"ghost-standard"},"Ghost Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Ghost Standard",args:{variant:"ghost"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button variant="secondary-white">Label</scale-button>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{disabled:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-button disabled>Label</scale-button>\n")),Object(esm.b)("h2",{id:"secondary-disabled"},"Secondary Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Secondary Disabled",args:{variant:"secondary",disabled:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button variant="secondary" disabled>Label</scale-button>\n')),Object(esm.b)("h2",{id:"ghost-disabled"},"Ghost Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Ghost Disabled",args:{variant:"ghost",disabled:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button variant="secondary" disabled>Label</scale-button>\n')),Object(esm.b)("h2",{id:"with-icon-before"},"With Icon Before"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Icon Before",args:{icon:"before"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-button>\n  <scale-icon-content-heart></scale-icon-content-heart> Label\n</scale-button>\n")),Object(esm.b)("h2",{id:"with-icon-after"},"With Icon After"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Icon After",args:{icon:"after"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button icon-position="after">\n  Label <scale-icon-navigation-right></scale-icon-navigation-right>\n</scale-button>\n')),Object(esm.b)("h2",{id:"icon-only"},"Icon Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon Only",args:{size:"large",iconOnly:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button icon-only>\n  <scale-icon-content-heart accessibility-title="like" />\n</scale-button>\n')),Object(esm.b)("h2",{id:"link"},"Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Link",args:{href:"https://example.com",target:"_blank"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button href="https://example.com" target="_blank">Label</scale-button>\n')),Object(esm.b)("h2",{id:"link-download"},"Link Download"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Link Download",args:{href:"assets/welcome.png",download:"welcome.png",label:"Download"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button href="assets/welcome.png" download="welcome.png"\n  >Download</scale-button\n>\n')),Object(esm.b)("h2",{id:"external-link"},"External Link"),Object(esm.b)("p",null,"If the button with a link is used to point the user to an external address, then the user should be informed of this.\nWe recommend using an icon (visually) and an additional caption for screen readers.\nIf the icon is an ",Object(esm.b)("inlineCode",{parentName:"p"},"img")," element, its ",Object(esm.b)("inlineCode",{parentName:"p"},"alt")," attribute should be empty."),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"External link",args:{href:"https://example.com",target:"_blank",label:"Label",icon:"external"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button href="https://example.com" target="_blank">\n  External link, opens in new tab\n  <scale-icon-navigation-external-link\n    accesibility-title="External link, opens in new tab"\n  ></scale-icon-navigation-external-link>\n</scale-button>\n')),Object(esm.b)("h2",{id:"small-standard"},"Small Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Standard",args:{size:"small",label:"Label"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small">Label</scale-button>\n')),Object(esm.b)("h2",{id:"small-secondary"},"Small Secondary"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Secondary",args:{size:"small",variant:"secondary"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small" variant="secondary">Label</scale-button>\n')),Object(esm.b)("h2",{id:"small-disabled"},"Small Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Disabled",args:{size:"small",disabled:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small" disabled>Label</scale-button>\n')),Object(esm.b)("h2",{id:"small-secondary-disabled"},"Small Secondary Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Secondary Disabled",args:{size:"small",variant:"secondary",disabled:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small" variant="secondary" disabled>Label</scale-button>\n')),Object(esm.b)("h2",{id:"small-with-icon-before"},"Small With Icon Before"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small With Icon Before",args:{size:"small",icon:"before"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small">\n  <scale-icon-action-search></scale-icon-action-search> Label\n</scale-button>\n')),Object(esm.b)("h2",{id:"small-with-icon-after"},"Small With Icon After"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small With Icon After",args:{size:"small",icon:"after"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small">\n  Label <scale-icon-navigation-right></scale-icon-navigation-right>\n</scale-button>\n')),Object(esm.b)("h2",{id:"small-icon-only"},"Small Icon Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Icon Only",args:{size:"small",iconOnly:!0},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small">\n  <scale-icon-navigation-external-link\n    accessibility-title="External link, opens in new tab"\n  ></scale-icon-navigation-external-link>\n</scale-button>\n')),Object(esm.b)("h2",{id:"small-link"},"Small Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Link",args:{size:"small",href:"https://example.com",target:"_blank"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small" href="https://example.com" target="_blank">\n  Label\n</scale-button>\n')),Object(esm.b)("h2",{id:"small-link-download"},"Small Link Download"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Link Download",args:{size:"small",href:"assets/welcome.png",download:"welcome.png",label:"Download"},mdxType:"Story"},Button_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-button size="small" icon-only>\n  <scale-icon-action-add accessibility-title="add"></scale-icon-action-add>\n</scale-button>\n')))}MDXContent.isMDXComponent=!0;var standard=Button_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Label"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var secondary=Button_stories_Template.bind({});secondary.storyName="Secondary",secondary.args={variant:"secondary"},secondary.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var secondaryWhite=Button_stories_Template.bind({});secondaryWhite.storyName="Secondary White",secondaryWhite.args={variant:"secondary-white"},secondaryWhite.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var ghostStandard=Button_stories_Template.bind({});ghostStandard.storyName="Ghost Standard",ghostStandard.args={variant:"ghost"},ghostStandard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var disabled=Button_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var secondaryDisabled=Button_stories_Template.bind({});secondaryDisabled.storyName="Secondary Disabled",secondaryDisabled.args={variant:"secondary",disabled:!0},secondaryDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var ghostDisabled=Button_stories_Template.bind({});ghostDisabled.storyName="Ghost Disabled",ghostDisabled.args={variant:"ghost",disabled:!0},ghostDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var withIconBefore=Button_stories_Template.bind({});withIconBefore.storyName="With Icon Before",withIconBefore.args={icon:"before"},withIconBefore.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var withIconAfter=Button_stories_Template.bind({});withIconAfter.storyName="With Icon After",withIconAfter.args={icon:"after"},withIconAfter.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var iconOnly=Button_stories_Template.bind({});iconOnly.storyName="Icon Only",iconOnly.args={size:"large",iconOnly:!0},iconOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var Button_stories_link=Button_stories_Template.bind({});Button_stories_link.storyName="Link",Button_stories_link.args={href:"https://example.com",target:"_blank"},Button_stories_link.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var linkDownload=Button_stories_Template.bind({});linkDownload.storyName="Link Download",linkDownload.args={href:"assets/welcome.png",download:"welcome.png",label:"Download"},linkDownload.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var externalLink=Button_stories_Template.bind({});externalLink.storyName="External link",externalLink.args={href:"https://example.com",target:"_blank",label:"Label",icon:"external"},externalLink.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallStandard=Button_stories_Template.bind({});smallStandard.storyName="Small Standard",smallStandard.args={size:"small",label:"Label"},smallStandard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallSecondary=Button_stories_Template.bind({});smallSecondary.storyName="Small Secondary",smallSecondary.args={size:"small",variant:"secondary"},smallSecondary.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallDisabled=Button_stories_Template.bind({});smallDisabled.storyName="Small Disabled",smallDisabled.args={size:"small",disabled:!0},smallDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallSecondaryDisabled=Button_stories_Template.bind({});smallSecondaryDisabled.storyName="Small Secondary Disabled",smallSecondaryDisabled.args={size:"small",variant:"secondary",disabled:!0},smallSecondaryDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallWithIconBefore=Button_stories_Template.bind({});smallWithIconBefore.storyName="Small With Icon Before",smallWithIconBefore.args={size:"small",icon:"before"},smallWithIconBefore.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallWithIconAfter=Button_stories_Template.bind({});smallWithIconAfter.storyName="Small With Icon After",smallWithIconAfter.args={size:"small",icon:"after"},smallWithIconAfter.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallIconOnly=Button_stories_Template.bind({});smallIconOnly.storyName="Small Icon Only",smallIconOnly.args={size:"small",iconOnly:!0},smallIconOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallLink=Button_stories_Template.bind({});smallLink.storyName="Small Link",smallLink.args={size:"small",href:"https://example.com",target:"_blank"},smallLink.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var smallLinkDownload=Button_stories_Template.bind({});smallLinkDownload.storyName="Small Link Download",smallLinkDownload.args={size:"small",href:"assets/welcome.png",download:"welcome.png",label:"Download"},smallLinkDownload.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleButton.props\n  },\n  template: `\n  <div style="${args.variant === \'secondary-white\' ? \'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);\' : \'\'}">\n  <scale-button\n      :disabled="disabled"\n      :size="size"\n      :href="href"\n      :download="download"\n      :target="target"\n      :type="type"\n      :name="name"\n      :value="value"\n      :variant="variant"\n      :icon-position="icon === \'after\' ? \'after\' : \'before\'"\n      :icon-only="iconOnly"\n      :inner-tabindex="innerTabindex"\n      :styles="styles"\n      @click="action(\'clicked\')"\n    >\n      <scale-icon-content-heart v-if="icon === \'before\'" />\n      {{ iconOnly !== true ? label : null }}\n      <scale-icon-content-heart accessibility-title="Add" v-if="iconOnly" />\n      <scale-icon-navigation-right accessibility-title="Next" v-if="icon === \'after\'" />\n      <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === \'external\'" />\n    </scale-button>\n    </div>\n  `\n})'}};var componentMeta={title:"Components/Button",component:ScaleButton,argTypes:{size:{control:{type:"select",options:["large","small"]}},variant:{control:{type:"select",options:["primary","secondary","ghost"]}},type:{control:{type:"select",options:["reset","submit","button"]}},label:{defaultValue:"Label",control:{type:"text"}},disabled:{control:{type:"boolean"}},download:{control:{type:"text"}},innerAriaLabel:{control:{type:"text"}}},includeStories:["standard","secondary","secondaryWhite","ghostStandard","disabled","secondaryDisabled","ghostDisabled","withIconBefore","withIconAfter","iconOnly","link","linkDownload","externalLink","smallStandard","smallSecondary","smallDisabled","smallSecondaryDisabled","smallWithIconBefore","smallWithIconAfter","smallIconOnly","smallLink","smallLinkDownload"]},mdxStoryNameToKey={Standard:"standard",Secondary:"secondary","Secondary White":"secondaryWhite","Ghost Standard":"ghostStandard",Disabled:"disabled","Secondary Disabled":"secondaryDisabled","Ghost Disabled":"ghostDisabled","With Icon Before":"withIconBefore","With Icon After":"withIconAfter","Icon Only":"iconOnly",Link:"link","Link Download":"linkDownload","External link":"externalLink","Small Standard":"smallStandard","Small Secondary":"smallSecondary","Small Disabled":"smallDisabled","Small Secondary Disabled":"smallSecondaryDisabled","Small With Icon Before":"smallWithIconBefore","Small With Icon After":"smallWithIconAfter","Small Icon Only":"smallIconOnly","Small Link":"smallLink","Small Link Download":"smallLinkDownload"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/callout/Callout.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"CANVAS_HEIGHT",(function(){return CANVAS_HEIGHT})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return Callout_stories_standard})),__webpack_require__.d(__webpack_exports__,"primary",(function(){return primary})),__webpack_require__.d(__webpack_exports__,"black",(function(){return black})),__webpack_require__.d(__webpack_exports__,"white",(function(){return white})),__webpack_require__.d(__webpack_exports__,"blue",(function(){return blue})),__webpack_require__.d(__webpack_exports__,"medium",(function(){return medium})),__webpack_require__.d(__webpack_exports__,"largeAndSmall",(function(){return largeAndSmall}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),callout_ScaleCalloutvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{variant:{type:String,default:""},rotation:{type:Number,default:0},top:{type:String},right:{type:String},bottom:{type:String},left:{type:String},styles:{type:String}},render:function render(){return this.$slots.default}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(callout_ScaleCalloutvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleCallout=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleCallout",description:"",tags:{},props:[{name:"variant",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"rotation",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"top",type:{name:"string"}},{name:"right",type:{name:"string"}},{name:"bottom",type:{name:"string"}},{name:"left",type:{name:"string"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var CANVAS_HEIGHT=204,layoutProps={CANVAS_HEIGHT:CANVAS_HEIGHT};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Beta Components/Callout",component:ScaleCallout,argTypes:{variant:{options:["standard","primary","blue","white","black"],defaultValue:"standard",control:{type:"select"}},rotation:{defaultValue:0,control:{type:"number"}},top:{control:{type:"text"}},right:{control:{type:"text"}},bottom:{control:{type:"text"}},left:{control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Callout"),Object(esm.b)("img",{src:"assets/beta.png",alt:"Beta Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{variant:"primary"},mdxType:"Story"},{props:Object.assign({},ScaleCallout.props),template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout\n            :variant="variant"\n            :rotation="rotation"\n            :top="top"\n            :right="right"\n            :bottom="bottom"\n            :left="left"\n          >\n            <span class="scl-callout-text-small">Starting at</span>\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="primary">\n  <span class="scl-callout-text-small">Starting at</span>\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n  <span class="scl-callout-text-small">for 4 weeks</span>\n</scale-callout>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"}," :host {\n  --position: absolute;\n  --background: var(--telekom-color-ui-extra-strong);\n  --color: var(--telekom-color-text-and-icon-inverted-standard);\n  --spacing: var(--telekom-spacing-composition-space-10);\n  --min-width: 6rem;\n  --aspect-ratio: 1 / 1;\n  --rotation: 0deg;\n  --font-small: var(--telekom-text-style-body-bold);\n  --font-medium: var(--telekom-text-style-body-bold);\n  --font-large: var(--telekom-text-style-heading-1);\n}\n")),Object(esm.b)("h2",{id:"variants"},"Variants"),Object(esm.b)("h3",{id:"primary"},"Primary"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Primary",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="primary">\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n</scale-callout>\n')),Object(esm.b)("h3",{id:"black"},"Black"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Black",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="black">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="black">\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n</scale-callout>\n')),Object(esm.b)("h3",{id:"white"},"White"),Object(esm.b)(dist_esm.c,{withSource:"none",style:{background:"#222"},mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"White",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="white">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="white">\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n</scale-callout>\n')),Object(esm.b)("h3",{id:"blue"},"Blue"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Blue",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="blue">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="blue">\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n</scale-callout>\n')),Object(esm.b)("h2",{id:"font-sizes"},"Font Sizes"),Object(esm.b)("h3",{id:"medium"},"Medium"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Medium",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="black">\n            <span>Up to 200 &#8364;</span>\n            <span>Exchange premium +</span>\n            <span>receive old appliance</span>\n            <span>value *</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="black">\n  <span>Up to 200 &#8364;</span>\n  <span>Exchange premium +</span>\n  <span>receive old appliance</span>\n  <span>value *</span>\n</scale-callout>\n')),Object(esm.b)("h3",{id:"large-and-small"},"Large and Small"),Object(esm.b)("p",null,"For convenience, two scoped CSS classes are provided for large and small text: ",Object(esm.b)("inlineCode",{parentName:"p"},"scl-callout-text-large")," and ",Object(esm.b)("inlineCode",{parentName:"p"},"scl-callout-text-small"),". But any size can be set using CSS."),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large and Small",mdxType:"Story"},{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-callout variant="primary">\n  <span class="scl-callout-text-large">9.95 &#8364;</span>\n  <span class="scl-callout-text-small">for 4 weeks</span>\n</scale-callout>\n')))}MDXContent.isMDXComponent=!0;var Callout_stories_standard=function standard(){return{props:Object.assign({},ScaleCallout.props),template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout\n            :variant="variant"\n            :rotation="rotation"\n            :top="top"\n            :right="right"\n            :bottom="bottom"\n            :left="left"\n          >\n            <span class="scl-callout-text-small">Starting at</span>\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      '}};Callout_stories_standard.storyName="Standard",Callout_stories_standard.args={variant:"primary"},Callout_stories_standard.parameters={storySource:{source:'{\n  props: { ...ScaleCallout.props\n  },\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout\n            :variant="variant"\n            :rotation="rotation"\n            :top="top"\n            :right="right"\n            :bottom="bottom"\n            :left="left"\n          >\n            <span class="scl-callout-text-small">Starting at</span>\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var primary=function primary(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '}};primary.storyName="Primary",primary.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var black=function black(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="black">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '}};black.storyName="Black",black.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="black">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var white=function white(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="white">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '}};white.storyName="White",white.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="white">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var blue=function blue(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="blue">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      '}};blue.storyName="Blue",blue.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="blue">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var medium=function medium(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="black">\n            <span>Up to 200 &#8364;</span>\n            <span>Exchange premium +</span>\n            <span>receive old appliance</span>\n            <span>value *</span>\n          </scale-callout>\n        </div>\n      '}};medium.storyName="Medium",medium.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="black">\n            <span>Up to 200 &#8364;</span>\n            <span>Exchange premium +</span>\n            <span>receive old appliance</span>\n            <span>value *</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var largeAndSmall=function largeAndSmall(){return{template:'\n        <div style="min-height: '+CANVAS_HEIGHT+'px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      '}};largeAndSmall.storyName="Large and Small",largeAndSmall.parameters={storySource:{source:'{\n  template: `\n        <div style="min-height: ${CANVAS_HEIGHT}px">\n          <scale-callout variant="primary">\n            <span class="scl-callout-text-large">9.95 &#8364;</span>\n            <span class="scl-callout-text-small">for 4 weeks</span>\n          </scale-callout>\n        </div>\n      `\n}'}};var componentMeta={title:"Beta Components/Callout",component:ScaleCallout,argTypes:{variant:{options:["standard","primary","blue","white","black"],defaultValue:"standard",control:{type:"select"}},rotation:{defaultValue:0,control:{type:"number"}},top:{control:{type:"text"}},right:{control:{type:"text"}},bottom:{control:{type:"text"}},left:{control:{type:"text"}}},includeStories:["standard","primary","black","white","blue","medium","largeAndSmall"]},mdxStoryNameToKey={Standard:"standard",Primary:"primary",Black:"black",White:"white",Blue:"blue",Medium:"medium","Large and Small":"largeAndSmall"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/card/Card.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Card_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"withLink",(function(){return withLink})),__webpack_require__.d(__webpack_exports__,"withImage",(function(){return withImage}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),card_ScaleCardvue_type_script_lang_js_={props:{label:String,to:String,target:{type:String,default:"_self"},rel:{type:String,default:"_self"},styles:{type:String}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(card_ScaleCardvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-card",{attrs:{label:this.label,to:this.to,target:this.target,rel:this.rel,styles:this.styles}},[this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleCard=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleCard",description:"",tags:{},props:[{name:"label",type:{name:"string"}},{name:"to",type:{name:"string"}},{name:"target",type:{name:"string"},defaultValue:{func:!1,value:'"_self"'}},{name:"rel",type:{name:"string"},defaultValue:{func:!1,value:'"_self"'}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var Card_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleCard:ScaleCard},props:Object.assign({slot:String},ScaleCard.props),template:'\n    <div :style="{ maxWidth: slot.startsWith(\'<div\') ? \'300px\'  : \'auto\' }">\n        <scale-card\n              :to="to"\n              :target="target"\n              :label="label"\n              :rel="rel"\n              :styles="styles"\n            >\n                <div v-if="slot.startsWith(\'<div\')">\n                    <div style="margin: -24px;">\n                      <img style="display: block; width:100%;" src="assets/card-image.jpg" alt="placeholder" />\n                      <div style="padding: 24px;"> \n                        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                        <span style="font: var(--telekom-text-style-body);"> Lorem ipsur dolor sit amet </span>\n                      </div>\n                    </div>\n                </div>\n                <div v-if="slot.startsWith(\'<span\')">\n                  <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                  <span> Lorem ipsur dolor sit amet </span>\n                </div>\n                <div v-if="!slot.startsWith(\'<span\') && !slot.startsWith(\'<div\')">\n                  {{ slot }}\n                </div>                \n        </scale-card>\n    </div>\n  '}},layoutProps={Template:Card_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Card",component:ScaleCard,argTypes:{label:{control:{type:"text"}},styles:{control:{type:String}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Card"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{slot:"<span>Lorem ipsur dolor sit amet</span>",label:"Example Card"},mdxType:"Story"},Card_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --background: var(--telekom-color-background-surface);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --radius: var(--telekom-radius-large);\n  --box-shadow: var(--telekom-shadow-raised-standard);\n  --box-shadow-hover: var(--telekom-shadow-raised-hover);\n  --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);\n  --box-shadow-active: var(--telekom-shadow-raised-pressed);\n\n  --spacing-body: var(--telekom-spacing-composition-space-08);\n\n  --spacing-body-slotted: 0;\n  --spacing-body-slotted-interactive: 0;\n\n  --font-body-slotted: var(--telekom-text-style-body);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"with-link"},"With Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Link",args:{slot:"Lorem ipsur dolor sit amet",to:"https://example.com",target:"_blank",rel:"noopener noreferrer"},mdxType:"Story"},Card_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-card\n  to="https://example.com"\n  to="_blank"\n  target="_blank"\n  rel="noopener noreferrer"\n  label="Example Card"\n  >Lorem ipsur dolor sit amet</scale-card\n>\n')),Object(esm.b)("h2",{id:"with-image"},"With Image"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Image",args:{slot:'<div style="margin: -24px;">\n        <img style="display:block; width:100%;" src="assets/card-image" alt="placeholder" />\n        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);"> Title </h4>\n        <div style="padding: 24px;">Lorem ipsur dolor sit amet</div>\n      </div>\n      ',to:"https://example.com",target:"_blank",rel:"noopener noreferrer"},mdxType:"Story"},Card_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div style="max-width: 200px;">\n  <scale-card to="https://example.com" target="_blank">\n    <div style="margin: -24px;">\n      <img\n        style="margin-bottom: -4px; width:100%;"\n        src="assets/card-image"\n        alt="placeholder"\n      />\n      <div style="padding: 24px;"> \n        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n        <span>Lorem ipsur dolor sit amet</span>\n      </div>\n    </div>\n  </scale-card>\n</div>\n')))}MDXContent.isMDXComponent=!0;var standard=Card_stories_Template.bind({});standard.storyName="Standard",standard.args={slot:"<span>Lorem ipsur dolor sit amet</span>",label:"Example Card"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleCard\n  },\n  props: {\n    slot: String,\n    ...ScaleCard.props\n  },\n  template: `\n    <div :style="{ maxWidth: slot.startsWith(\'<div\') ? \'300px\'  : \'auto\' }">\n        <scale-card\n              :to="to"\n              :target="target"\n              :label="label"\n              :rel="rel"\n              :styles="styles"\n            >\n                <div v-if="slot.startsWith(\'<div\')">\n                    <div style="margin: -24px;">\n                      <img style="display: block; width:100%;" src="assets/card-image.jpg" alt="placeholder" />\n                      <div style="padding: 24px;"> \n                        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                        <span style="${\'font: var(--telekom-text-style-body);\'}"> Lorem ipsur dolor sit amet </span>\n                      </div>\n                    </div>\n                </div>\n                <div v-if="slot.startsWith(\'<span\')">\n                  <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                  <span> Lorem ipsur dolor sit amet </span>\n                </div>\n                <div v-if="!slot.startsWith(\'<span\') && !slot.startsWith(\'<div\')">\n                  {{ slot }}\n                </div>                \n        </scale-card>\n    </div>\n  `\n})'}};var withLink=Card_stories_Template.bind({});withLink.storyName="With Link",withLink.args={slot:"Lorem ipsur dolor sit amet",to:"https://example.com",target:"_blank",rel:"noopener noreferrer"},withLink.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleCard\n  },\n  props: {\n    slot: String,\n    ...ScaleCard.props\n  },\n  template: `\n    <div :style="{ maxWidth: slot.startsWith(\'<div\') ? \'300px\'  : \'auto\' }">\n        <scale-card\n              :to="to"\n              :target="target"\n              :label="label"\n              :rel="rel"\n              :styles="styles"\n            >\n                <div v-if="slot.startsWith(\'<div\')">\n                    <div style="margin: -24px;">\n                      <img style="display: block; width:100%;" src="assets/card-image.jpg" alt="placeholder" />\n                      <div style="padding: 24px;"> \n                        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                        <span style="${\'font: var(--telekom-text-style-body);\'}"> Lorem ipsur dolor sit amet </span>\n                      </div>\n                    </div>\n                </div>\n                <div v-if="slot.startsWith(\'<span\')">\n                  <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                  <span> Lorem ipsur dolor sit amet </span>\n                </div>\n                <div v-if="!slot.startsWith(\'<span\') && !slot.startsWith(\'<div\')">\n                  {{ slot }}\n                </div>                \n        </scale-card>\n    </div>\n  `\n})'}};var withImage=Card_stories_Template.bind({});withImage.storyName="With Image",withImage.args={slot:'<div style="margin: -24px;">\n        <img style="display:block; width:100%;" src="assets/card-image" alt="placeholder" />\n        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);"> Title </h4>\n        <div style="padding: 24px;">Lorem ipsur dolor sit amet</div>\n      </div>\n      ',to:"https://example.com",target:"_blank",rel:"noopener noreferrer"},withImage.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleCard\n  },\n  props: {\n    slot: String,\n    ...ScaleCard.props\n  },\n  template: `\n    <div :style="{ maxWidth: slot.startsWith(\'<div\') ? \'300px\'  : \'auto\' }">\n        <scale-card\n              :to="to"\n              :target="target"\n              :label="label"\n              :rel="rel"\n              :styles="styles"\n            >\n                <div v-if="slot.startsWith(\'<div\')">\n                    <div style="margin: -24px;">\n                      <img style="display: block; width:100%;" src="assets/card-image.jpg" alt="placeholder" />\n                      <div style="padding: 24px;"> \n                        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                        <span style="${\'font: var(--telekom-text-style-body);\'}"> Lorem ipsur dolor sit amet </span>\n                      </div>\n                    </div>\n                </div>\n                <div v-if="slot.startsWith(\'<span\')">\n                  <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>\n                  <span> Lorem ipsur dolor sit amet </span>\n                </div>\n                <div v-if="!slot.startsWith(\'<span\') && !slot.startsWith(\'<div\')">\n                  {{ slot }}\n                </div>                \n        </scale-card>\n    </div>\n  `\n})'}};var componentMeta={title:"Components/Card",component:ScaleCard,argTypes:{label:{control:{type:"text"}},styles:{control:{type:String}}},includeStories:["standard","withLink","withImage"]},mdxStoryNameToKey={Standard:"standard","With Link":"withLink","With Image":"withImage"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/checkbox-group/CheckboxGroup.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"checkboxDisabled",(function(){return checkboxDisabled})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"checkboxError",(function(){return checkboxError})),__webpack_require__.d(__webpack_exports__,"groupError",(function(){return groupError}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),checkbox_group_ScaleCheckboxGroupvue_type_script_lang_js_={props:{name:{type:String},label:{type:String,default:""},helperText:{type:String},ariaLabelCheckboxGroup:{type:String},invalid:{type:Boolean},selectText:{type:String,default:"Select all"},unselectText:{type:String,default:"Unselect all"},value:{type:String,default:""},inputId:{type:String},styles:{type:String}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(checkbox_group_ScaleCheckboxGroupvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleCheckboxGroup=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleCheckboxGroup",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"helperText",type:{name:"string"}},{name:"ariaLabelCheckboxGroup",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"selectText",type:{name:"string"},defaultValue:{func:!1,value:"'Select all'"}},{name:"unselectText",type:{name:"string"},defaultValue:{func:!1,value:"'Unselect all'"}},{name:"value",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"inputId",type:{name:"string"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Checkbox Group",component:ScaleCheckboxGroup,argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Checkbox Group"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox  label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 2" name="example" value="2" checked></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  /* checkbox-group container */\n  --spacing-left-container: var(--telekom-spacing-composition-space-10);\n\n  /* checkbox-group checkbox */\n  --spacing-left-checkbox: var(--telekom-spacing-composition-space-04);\n\n  /* slotted item */\n  --spacing-top-slotted-item: var(--telekom-spacing-composition-space-05);\n}\n")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox-group label="Group Label" name="group" value="">\n  <scale-checkbox\n    label="Checkbox Item 1"\n    name="example"\n    value="1"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 2"\n    name="example"\n    value="2"\n    checked\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 3"\n    name="example"\n    value="3"\n  ></scale-checkbox>\n</scale-checkbox-group>\n')),Object(esm.b)("h2",{id:"checkbox-disabled"},"Checkbox Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Checkbox Disabled",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1" checked></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2" checked disabled></scale-checkbox>\n        </scale-checkbox-group>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox-group label="Group Label" name="group" value="">\n  <scale-checkbox\n    label="Checkbox Item 1"\n    name="example"\n    value="1"\n    checked\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 2"\n    name="example"\n    value="2"\n    checked\n    disabled\n  ></scale-checkbox>\n</scale-checkbox-group>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="" helper-text="Some info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox-group\n  label="Group Label"\n  name="group"\n  value=""\n  helper-text="Some info regarding the group"\n>\n  <scale-checkbox\n    label="Checkbox Item 1"\n    name="example"\n    value="1"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 2"\n    name="example"\n    value="2"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 3"\n    name="example"\n    value="3"\n  ></scale-checkbox>\n</scale-checkbox-group>\n')),Object(esm.b)("h2",{id:"checkbox-error"},"Checkbox Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Checkbox Error",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="" invalid helper-text="Some of the options have errors!">\n          <scale-checkbox invalid label="Checkbox Item 1" helper-text="This is an error!" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox checked label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox-group\n  label="Group Label"\n  name="group"\n  value=""\n  helper-text="Some info regarding the group"\n>\n  <scale-checkbox\n    invalid\n    label="Checkbox Item 1"\n    name="example"\n    value="1"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 2"\n    name="example"\n    value="2"\n  ></scale-checkbox>\n  <scale-checkbox\n    invalid\n    checked\n    label="Checkbox Item 3"\n    name="example"\n    value="3"\n  ></scale-checkbox>\n</scale-checkbox-group>\n')),Object(esm.b)("h2",{id:"group-error"},"Group Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Group Error",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox-group invalid label="Group Label" name="group" value="" helper-text="Some error info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox-group\n  label="Group Label"\n  name="group"\n  value=""\n  helper-text="Some info regarding the group"\n  invalid\n>\n  <scale-checkbox\n    label="Checkbox Item 1"\n    name="example"\n    value="1"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 2"\n    name="example"\n    value="2"\n  ></scale-checkbox>\n  <scale-checkbox\n    label="Checkbox Item 3"\n    name="example"\n    value="3"\n  ></scale-checkbox>\n</scale-checkbox-group>\n')))}MDXContent.isMDXComponent=!0;var standard=function standard(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox  label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 2" name="example" value="2" checked></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}};standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox  label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 2" name="example" value="2" checked></scale-checkbox>\n          <scale-checkbox  label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      `\n})'}};var checkboxDisabled=function checkboxDisabled(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1" checked></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2" checked disabled></scale-checkbox>\n        </scale-checkbox-group>\n      '}};checkboxDisabled.storyName="Checkbox Disabled",checkboxDisabled.args={},checkboxDisabled.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox-group label="Group Label" name="group" value="">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1" checked></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2" checked disabled></scale-checkbox>\n        </scale-checkbox-group>\n      `\n})'}};var helperText=function helperText(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="" helper-text="Some info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}};helperText.storyName="Helper Text",helperText.args={},helperText.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox-group label="Group Label" name="group" value="" helper-text="Some info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      `\n})'}};var checkboxError=function checkboxError(){return{template:'\n        <scale-checkbox-group label="Group Label" name="group" value="" invalid helper-text="Some of the options have errors!">\n          <scale-checkbox invalid label="Checkbox Item 1" helper-text="This is an error!" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox checked label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}};checkboxError.storyName="Checkbox Error",checkboxError.args={},checkboxError.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox-group label="Group Label" name="group" value="" invalid helper-text="Some of the options have errors!">\n          <scale-checkbox invalid label="Checkbox Item 1" helper-text="This is an error!" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox checked label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      `\n})'}};var groupError=function groupError(){return{template:'\n        <scale-checkbox-group invalid label="Group Label" name="group" value="" helper-text="Some error info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      '}};groupError.storyName="Group Error",groupError.args={},groupError.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox-group invalid label="Group Label" name="group" value="" helper-text="Some error info regarding the group">\n          <scale-checkbox label="Checkbox Item 1" name="example" value="1"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 2" name="example" value="2"></scale-checkbox>\n          <scale-checkbox label="Checkbox Item 3" name="example" value="3"></scale-checkbox>\n        </scale-checkbox-group>\n      `\n})'}};var componentMeta={title:"Components/Checkbox Group",component:ScaleCheckboxGroup,argTypes:{},includeStories:["standard","checkboxDisabled","helperText","checkboxError","groupError"]},mdxStoryNameToKey={Standard:"standard","Checkbox Disabled":"checkboxDisabled","Helper Text":"helperText","Checkbox Error":"checkboxError","Group Error":"groupError"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/checkbox/Checkbox.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Checkbox_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"standardDisabled",(function(){return standardDisabled})),__webpack_require__.d(__webpack_exports__,"selected",(function(){return selected})),__webpack_require__.d(__webpack_exports__,"selectedDisabled",(function(){return selectedDisabled})),__webpack_require__.d(__webpack_exports__,"indeterminate",(function(){return indeterminate})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"customLabel",(function(){return customLabel}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),checkbox_ScaleCheckboxvue_type_script_lang_js_={props:{name:{type:String},label:{type:String},helperText:{type:String},invalid:{type:Boolean},disabled:{type:Boolean},checked:{type:Boolean},indeterminate:{type:Boolean},value:{type:String},inputId:{type:String},required:{type:Boolean},ariaLabelCheckbox:{type:String}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(checkbox_ScaleCheckboxvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-checkbox",{attrs:{name:_vm.name,label:_vm.label,"helper-text":_vm.helperText,invalid:_vm.invalid,disabled:_vm.disabled,checked:_vm.checked,indeterminate:_vm.indeterminate,value:_vm.value,"input-id":_vm.inputId,required:_vm.required,"aria-label-checkbox":_vm.ariaLabelCheckbox},on:{scaleChange:_vm.scaleChange}})}),[],!1,null,null,null).exports;var ScaleCheckbox=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleCheckbox",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"disabled",type:{name:"boolean"}},{name:"checked",type:{name:"boolean"}},{name:"indeterminate",type:{name:"boolean"}},{name:"value",type:{name:"string"}},{name:"inputId",type:{name:"string"}},{name:"required",type:{name:"boolean"}},{name:"ariaLabelCheckbox",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}]};var Checkbox_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({label:String},ScaleCheckbox.props),template:'\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  ',methods:{action:addon_actions_dist_esm.action}}},layoutProps={Template:Checkbox_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Checkbox",component:ScaleCheckbox,argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Checkbox"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Checkbox"},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-checkbox {\n  --spacing-x: var(--telekom-spacing-composition-space-04);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --color-text: var(--telekom-color-text-and-icon-standard);\n  --color-error: var(--telekom-color-functional-danger-standard);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  /* FIXME unused variable */\n  --color-standard: var(--telekom-color-background-surface);\n  --background-disabled: none;\n  --color-primary: var(--telekom-color-primary-standard);\n  --color-focus: var(--telekom-color-functional-focus-standard);\n  --color-primary-hover: var(--telekom-color-text-and-icon-standard);\n  --color-primary-active: var(--telekom-color-text-and-icon-standard);\n\n  /*control*/\n  --width-control: var(--telekom-spacing-composition-space-07);\n  --height-control: var(--telekom-spacing-composition-space-07);\n  --transition-control: var(--transition);\n  --spacing-control: var(--telekom-spacing-composition-space-02);\n  --spacing-left-control: var(--telekom-spacing-composition-space-03);\n  --radius-control: var(--telekom-radius-small);\n  --border-width-control: var(--telekom-line-weight-standard);\n\n  /*helper-text*/\n  --transition-helper-text: var(--transition);\n  --spacing-left-helper-text: calc(var(--width-control) + var(--spacing-x));\n  --font-size-helper-text: var(--telekom-typography-font-size-small);\n  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);\n  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);\n  --color-helper-text: var(\n    --telekom-color-text-and-icon-functional-informational\n  );\n  /*label*/\n  --font-weight-label: var(--telekom-typography-font-weight-medium);\n  --transition-label: var(--transition);\n\n  /*icon*/\n  --color-icon-checked-disabled: var(--telekom-color-text-and-icon-disabled);\n  --color-icon-checked-active: var(\n    --telekom-color-text-and-icon-white-standard\n  );\n  --width-icon: var(--telekom-spacing-composition-space-06);\n  --height-icon: var(--telekom-spacing-composition-space-06);\n  --stroke-width: var(--stroke-width-checkbox, 0.5px);\n}\n")),Object(esm.b)("h2",{id:"standard-disabled"},"Standard Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard Disabled",args:{label:"Standard Disabled",disabled:!0},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox disabled label="Standard Disabled"></scale-checkbox>\n')),Object(esm.b)("h2",{id:"selected"},"Selected"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Selected",args:{label:"Selected",checked:!0},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox checked label="Selected"></scale-checkbox>\n')),Object(esm.b)("h2",{id:"selected-disabled"},"Selected Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Selected Disabled",args:{label:"Selected Disabled",checked:!0,disabled:!0},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox checked disabled label="Selected Disabled"></scale-checkbox>\n')),Object(esm.b)("h2",{id:"indeterminate"},"Indeterminate"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Indeterminate",args:{label:"Indeterminate",indeterminate:!0},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox indeterminate label="Indeterminate"></scale-checkbox>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{label:"Helper Text",helperText:"Make sure to check this"},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox\n  label="Helper Text"\n  helper-text="Make sure to check this"\n></scale-checkbox>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{label:"Standard with error",invalid:!0,helperText:"This is the error message"},mdxType:"Story"},Checkbox_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox\n  label="Standard with error"\n  helper-text="This is the error message"\n  invalid\n></scale-checkbox>\n')),Object(esm.b)("h2",{id:"custom-label"},"Custom Label"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Label",args:{},mdxType:"Story"},(function(){return{template:'\n        <scale-checkbox>\n          <span style="display: flex; align-items: center">\n            Custom label &nbsp;<scale-icon-alert-imprint-dataprivacy></scale-icon-alert-imprint-dataprivacy>\n          </span>\n        </scale-checkbox>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-checkbox>\n  <span style="display: flex; align-items: center">\n    Custom label &nbsp;<scale-icon-alert-imprint-dataprivacy\n    ></scale-icon-alert-imprint-dataprivacy>\n  </span>\n</scale-checkbox>\n')))}MDXContent.isMDXComponent=!0;var standard=Checkbox_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Checkbox"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var standardDisabled=Checkbox_stories_Template.bind({});standardDisabled.storyName="Standard Disabled",standardDisabled.args={label:"Standard Disabled",disabled:!0},standardDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var selected=Checkbox_stories_Template.bind({});selected.storyName="Selected",selected.args={label:"Selected",checked:!0},selected.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var selectedDisabled=Checkbox_stories_Template.bind({});selectedDisabled.storyName="Selected Disabled",selectedDisabled.args={label:"Selected Disabled",checked:!0,disabled:!0},selectedDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var indeterminate=Checkbox_stories_Template.bind({});indeterminate.storyName="Indeterminate",indeterminate.args={label:"Indeterminate",indeterminate:!0},indeterminate.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var helperText=Checkbox_stories_Template.bind({});helperText.storyName="Helper Text",helperText.args={label:"Helper Text",helperText:"Make sure to check this"},helperText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var error=Checkbox_stories_Template.bind({});error.storyName="Error",error.args={label:"Standard with error",invalid:!0,helperText:"This is the error message"},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleCheckbox.props\n  },\n  template: `\n    <scale-checkbox\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :disabled="disabled"\n      :checked="checked"\n      :indeterminate="indeterminate"\n      :value="value"\n      :input-id="inputId"\n      :required="required"\n      @scaleChange="action(\'scaleChange\')($event)"\n      @scale-change="action(\'scale-change\')($event)"\n    ></scale-checkbox>\n  `,\n  methods: {\n    action\n  }\n})'}};var customLabel=function customLabel(){return{template:'\n        <scale-checkbox>\n          <span style="display: flex; align-items: center">\n            Custom label &nbsp;<scale-icon-alert-imprint-dataprivacy></scale-icon-alert-imprint-dataprivacy>\n          </span>\n        </scale-checkbox>\n      '}};customLabel.storyName="Custom Label",customLabel.args={},customLabel.parameters={storySource:{source:'() => ({\n  template: `\n        <scale-checkbox>\n          <span style="display: flex; align-items: center">\n            Custom label &nbsp;<scale-icon-alert-imprint-dataprivacy></scale-icon-alert-imprint-dataprivacy>\n          </span>\n        </scale-checkbox>\n      `\n})'}};var componentMeta={title:"Components/Checkbox",component:ScaleCheckbox,argTypes:{},includeStories:["standard","standardDisabled","selected","selectedDisabled","indeterminate","helperText","error","customLabel"]},mdxStoryNameToKey={Standard:"standard","Standard Disabled":"standardDisabled",Selected:"selected","Selected Disabled":"selectedDisabled",Indeterminate:"indeterminate","Helper Text":"helperText",Error:"error","Custom Label":"customLabel"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/chip/Chip.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Chip_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateIcon",(function(){return Chip_stories_TemplateIcon})),__webpack_require__.d(__webpack_exports__,"TemplateInteractive",(function(){return Chip_stories_TemplateInteractive})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"persistentStandard",(function(){return persistentStandard})),__webpack_require__.d(__webpack_exports__,"persistentStandardSelected",(function(){return persistentStandardSelected})),__webpack_require__.d(__webpack_exports__,"persistentStandardDisabled",(function(){return persistentStandardDisabled})),__webpack_require__.d(__webpack_exports__,"persistentStandardSelectedDisabled",(function(){return persistentStandardSelectedDisabled})),__webpack_require__.d(__webpack_exports__,"persistentOutline",(function(){return persistentOutline})),__webpack_require__.d(__webpack_exports__,"persistentOutlineSelected",(function(){return persistentOutlineSelected})),__webpack_require__.d(__webpack_exports__,"persistentOutlineDisabled",(function(){return persistentOutlineDisabled})),__webpack_require__.d(__webpack_exports__,"persistentOutlineSelectedDisabled",(function(){return persistentOutlineSelectedDisabled})),__webpack_require__.d(__webpack_exports__,"dynamicSuggestion",(function(){return dynamicSuggestion})),__webpack_require__.d(__webpack_exports__,"dynamicSelectionStandard",(function(){return dynamicSelectionStandard})),__webpack_require__.d(__webpack_exports__,"dynamicSelectionOutline",(function(){return dynamicSelectionOutline})),__webpack_require__.d(__webpack_exports__,"iconText",(function(){return iconText}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),chip_ScaleChipvue_type_script_lang_js_={props:{type:{type:0,default:"persistent"},variant:{type:0,default:"standard"},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},styles:{type:0,default:"switch"},ariaRoleTitle:{type:String},ariaCheckedState:{type:Boolean}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},scaleClose:function scaleClose($event){Object(addon_actions_dist_esm.action)("scaleClose"),this.$emit("scaleClose",$event)},"scale-close":function scaleClose($event){Object(addon_actions_dist_esm.action)("scale-close"),this.$emit("scale-close",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(chip_ScaleChipvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-chip",{attrs:{type:_vm.type,variant:_vm.variant,selected:_vm.selected,"aria-checked-state":_vm.ariaCheckedState,"aria-role-title":_vm.ariaRoleTitle,disabled:_vm.disabled,styles:_vm.styles},on:{scaleChange:_vm.scaleChange,scaleClose:_vm.scaleClose}},[_vm._t("chip-icon"),_vm._v(" "),_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleChip=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleChip",description:"",tags:{},props:[{name:"type",type:{name:"'dynamic' | 'persistent'"},defaultValue:{func:!1,value:"'persistent'"}},{name:"variant",type:{name:"'standard' | 'outline'"},defaultValue:{func:!1,value:"'standard'"}},{name:"selected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"styles",type:{name:"'switch' | 'radio' | 'option' | 'menuitemreadio' | 'menuitemcheckbox' | 'checkbox'"},defaultValue:{func:!1,value:"'switch'"}},{name:"ariaRoleTitle",type:{name:"string"}},{name:"ariaCheckedState",type:{name:"boolean"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}},{name:"scaleClose",type:{names:["undefined"]}},{name:"scale-close",type:{names:["undefined"]}}],slots:[{name:"chip-icon"},{name:"default"}]};var Chip_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({label:String},ScaleChip.props),template:'\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  ',methods:{action:addon_actions_dist_esm.action}}},Chip_stories_TemplateIcon=function TemplateIcon(args,_ref2){_ref2.argTypes;return{props:Object.assign({label:String},ScaleChip.props),template:'\n    <scale-chip\n      :selected="selected"\n      :type="type"\n      :label="label"\n      :disabled="disabled"\n      :styles="styles"\n      >\n      {{label}}\n      <div slot="chip-icon">\n        <scale-icon-action-favorite accessibility-title="favorite" />\n      </div>\n    </scale-chip>\n  ',methods:{action:addon_actions_dist_esm.action}}},Chip_stories_TemplateInteractive=function TemplateInteractive(args,_ref3){_ref3.argTypes;return{template:'\n  <div>\n    <div style="height: 20px;">Please select one option:</div>\n      <ul aria-label="selection" style="display: flex; list-style: none; padding: 0;">\n        <li v-for="label in labels" :key="label" style="margin-right: 4px;">\n          <scale-chip\n            type="dynamic"\n            v-bind:label=label\n            @scaleChange="removeChip(label)"\n          >\n            {{label}}\n          </scale-chip>\n        </li>\n       \n      </ul>   \n    </div>\n  ',methods:{action:Object(addon_actions_dist_esm.action)("scaleChange"),removeChip:function removeChip(label){var _this=this;this.action(),this.labels=null,this.text=this.label,setTimeout((function(){_this.$el.querySelector("#root > ul > li > scale-chip")&&_this.$el.querySelector("#root > ul > li > scale-chip").shadowRoot.querySelector("span > button").focus()}))}},data:function data(){return{labels:["option 1","option 2","option 3","option 4"]}}}},layoutProps={Template:Chip_stories_Template,TemplateIcon:Chip_stories_TemplateIcon,TemplateInteractive:Chip_stories_TemplateInteractive};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Chip",component:ScaleChip,argTypes:{variant:{control:{type:"select",options:["standard","outline"]}},type:{control:{type:"select",options:["dynamic","persistent"]}},disabled:{description:"only valid for persistent type"}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Chip"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Label"},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --height: 32px;\n\n  --font-size: var(--telekom-typography-font-size-body);\n  --line-height: var(--telekom-typography-line-spacing-standard);\n  --font-weight: var(--telekom-typography-font-weight-bold);\n  --color-focus: var(--telekom-color-functional-focus-standard);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1);\n\n  /*standard selected*/\n  --background-standard-selected: var(--telekom-color-ui-extra-strong);\n  --color-standard-selected: var(\n    --telekom-color-text-and-icon-inverted-standard\n  );\n}\n")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip>{{label}}</scale-chip>\n")),Object(esm.b)("h2",{id:"persistent"},"Persistent"),Object(esm.b)("br",null),Object(esm.b)("h3",{id:"persistent-standard"},"Persistent Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Standard",args:{label:"Label"},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip>Label</scale-chip>\n")),Object(esm.b)("h3",{id:"persistent-standard-selected"},"Persistent Standard Selected"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Standard Selected",args:{label:"Label",selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip selected>Label</scale-chip>\n")),Object(esm.b)("h3",{id:"persistent-standard-disabled"},"Persistent Standard Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Standard Disabled",args:{label:"Label",disabled:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip disabled selected>Label</scale-chip>\n")),Object(esm.b)("h3",{id:"persistent-standard-selected-disabled"},"Persistent Standard Selected Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Standard Selected Disabled",args:{label:"Label",disabled:!0,selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip disabled selected>Label</scale-chip>\n")),Object(esm.b)("h3",{id:"persistent-outline"},"Persistent Outline"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Outline",args:{label:"Label",variant:"outline"},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip variant="outline">Label</scale-chip>\n')),Object(esm.b)("h3",{id:"persistent-outline-selected"},"Persistent Outline Selected"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Outline Selected",args:{label:"Label",variant:"outline",selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-chip selected>Label</scale-chip>\n")),Object(esm.b)("h3",{id:"persistent-outline-disabled"},"Persistent Outline Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Outline Disabled",args:{variant:"outlined",label:"Label",disabled:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip disabled variant="outline" selected>Label</scale-chip>\n')),Object(esm.b)("h3",{id:"persistent-outline-selected-disabled"},"Persistent Outline Selected Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Persistent Outline Selected Disabled",args:{variant:"outlined",label:"Label",disabled:!0,selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip disabled variant="outline" selected>Label</scale-chip>\n')),Object(esm.b)("h2",{id:"dynamic"},"Dynamic"),Object(esm.b)("h3",{id:"dynamic-suggestion"},"Dynamic Suggestion"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dynamic Suggestion",args:{label:"Label",type:"dynamic",variant:"standard"},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip type="dynamic" variant="standard">Label</scale-chip>\n')),Object(esm.b)("h3",{id:"dynamic-selection-standard"},"Dynamic Selection Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dynamic Selection Standard",args:{label:"Label",type:"dynamic",variant:"standard",selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip type="dynamic" variant="standard" selected>Label</scale-chip>\n')),Object(esm.b)("h3",{id:"dynamic-selection-outline"},"Dynamic Selection Outline"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dynamic Selection Outline",args:{label:"Label",type:"dynamic",variant:"outline",selected:!0},mdxType:"Story"},Chip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip type="dynamic" selected variant="outline">Label</scale-chip>\n')),Object(esm.b)("h2",{id:"icon--text"},"Icon + Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon+Text",args:{label:"Label"},mdxType:"Story"},Chip_stories_TemplateIcon.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-chip\n  >Label\n  <div slot="chip-icon">\n    <scale-icon-action-favorite accessibility-title="favorite" />\n  </div>\n</scale-chip>\n')))}MDXContent.isMDXComponent=!0;var standard=Chip_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Label"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentStandard=Chip_stories_Template.bind({});persistentStandard.storyName="Persistent Standard",persistentStandard.args={label:"Label"},persistentStandard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentStandardSelected=Chip_stories_Template.bind({});persistentStandardSelected.storyName="Persistent Standard Selected",persistentStandardSelected.args={label:"Label",selected:!0},persistentStandardSelected.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentStandardDisabled=Chip_stories_Template.bind({});persistentStandardDisabled.storyName="Persistent Standard Disabled",persistentStandardDisabled.args={label:"Label",disabled:!0},persistentStandardDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentStandardSelectedDisabled=Chip_stories_Template.bind({});persistentStandardSelectedDisabled.storyName="Persistent Standard Selected Disabled",persistentStandardSelectedDisabled.args={label:"Label",disabled:!0,selected:!0},persistentStandardSelectedDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentOutline=Chip_stories_Template.bind({});persistentOutline.storyName="Persistent Outline",persistentOutline.args={label:"Label",variant:"outline"},persistentOutline.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentOutlineSelected=Chip_stories_Template.bind({});persistentOutlineSelected.storyName="Persistent Outline Selected",persistentOutlineSelected.args={label:"Label",variant:"outline",selected:!0},persistentOutlineSelected.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentOutlineDisabled=Chip_stories_Template.bind({});persistentOutlineDisabled.storyName="Persistent Outline Disabled",persistentOutlineDisabled.args={variant:"outlined",label:"Label",disabled:!0},persistentOutlineDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var persistentOutlineSelectedDisabled=Chip_stories_Template.bind({});persistentOutlineSelectedDisabled.storyName="Persistent Outline Selected Disabled",persistentOutlineSelectedDisabled.args={variant:"outlined",label:"Label",disabled:!0,selected:!0},persistentOutlineSelectedDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var dynamicSuggestion=Chip_stories_Template.bind({});dynamicSuggestion.storyName="Dynamic Suggestion",dynamicSuggestion.args={label:"Label",type:"dynamic",variant:"standard"},dynamicSuggestion.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var dynamicSelectionStandard=Chip_stories_Template.bind({});dynamicSelectionStandard.storyName="Dynamic Selection Standard",dynamicSelectionStandard.args={label:"Label",type:"dynamic",variant:"standard",selected:!0},dynamicSelectionStandard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var dynamicSelectionOutline=Chip_stories_Template.bind({});dynamicSelectionOutline.storyName="Dynamic Selection Outline",dynamicSelectionOutline.args={label:"Label",type:"dynamic",variant:"outline",selected:!0},dynamicSelectionOutline.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n        <scale-chip\n            :variant="variant"\n            :type="type"\n            :selected="selected"\n            :disabled="disabled"\n            :styles="styles"\n        >\n        {{label}}\n        </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var iconText=Chip_stories_TemplateIcon.bind({});iconText.storyName="Icon+Text",iconText.args={label:"Label"},iconText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleChip.props\n  },\n  template: `\n    <scale-chip\n      :selected="selected"\n      :type="type"\n      :label="label"\n      :disabled="disabled"\n      :styles="styles"\n      >\n      {{label}}\n      <div slot="chip-icon">\n        <scale-icon-action-favorite accessibility-title="favorite" />\n      </div>\n    </scale-chip>\n  `,\n  methods: {\n    action\n  }\n})'}};var componentMeta={title:"Components/Chip",component:ScaleChip,argTypes:{variant:{control:{type:"select",options:["standard","outline"]}},type:{control:{type:"select",options:["dynamic","persistent"]}},disabled:{description:"only valid for persistent type"}},includeStories:["standard","persistentStandard","persistentStandardSelected","persistentStandardDisabled","persistentStandardSelectedDisabled","persistentOutline","persistentOutlineSelected","persistentOutlineDisabled","persistentOutlineSelectedDisabled","dynamicSuggestion","dynamicSelectionStandard","dynamicSelectionOutline","iconText"]},mdxStoryNameToKey={Standard:"standard","Persistent Standard":"persistentStandard","Persistent Standard Selected":"persistentStandardSelected","Persistent Standard Disabled":"persistentStandardDisabled","Persistent Standard Selected Disabled":"persistentStandardSelectedDisabled","Persistent Outline":"persistentOutline","Persistent Outline Selected":"persistentOutlineSelected","Persistent Outline Disabled":"persistentOutlineDisabled","Persistent Outline Selected Disabled":"persistentOutlineSelectedDisabled","Dynamic Suggestion":"dynamicSuggestion","Dynamic Selection Standard":"dynamicSelectionStandard","Dynamic Selection Outline":"dynamicSelectionOutline","Icon+Text":"iconText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/data-grid/DataGrid.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return DataGrid_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"actionsCell",(function(){return actionsCell})),__webpack_require__.d(__webpack_exports__,"checkboxCell",(function(){return checkboxCell})),__webpack_require__.d(__webpack_exports__,"emailCell",(function(){return emailCell})),__webpack_require__.d(__webpack_exports__,"dateCell",(function(){return dateCell})),__webpack_require__.d(__webpack_exports__,"graphCell",(function(){return graphCell})),__webpack_require__.d(__webpack_exports__,"htmlCell",(function(){return htmlCell})),__webpack_require__.d(__webpack_exports__,"linkCell",(function(){return linkCell})),__webpack_require__.d(__webpack_exports__,"numberCell",(function(){return numberCell})),__webpack_require__.d(__webpack_exports__,"selectCell",(function(){return selectCell})),__webpack_require__.d(__webpack_exports__,"tagsCell",(function(){return tagsCell})),__webpack_require__.d(__webpack_exports__,"telephoneCell",(function(){return telephoneCell})),__webpack_require__.d(__webpack_exports__,"textCell",(function(){return textCell})),__webpack_require__.d(__webpack_exports__,"freezeHeader",(function(){return freezeHeader})),__webpack_require__.d(__webpack_exports__,"heading",(function(){return heading})),__webpack_require__.d(__webpack_exports__,"hideExtras",(function(){return hideExtras})),__webpack_require__.d(__webpack_exports__,"numbered",(function(){return numbered})),__webpack_require__.d(__webpack_exports__,"pagination",(function(){return pagination})),__webpack_require__.d(__webpack_exports__,"selectionExport",(function(){return selectionExport})),__webpack_require__.d(__webpack_exports__,"columnStretch",(function(){return columnStretch})),__webpack_require__.d(__webpack_exports__,"showMore",(function(){return showMore}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),data_grid_ScaleDataGridvue_type_script_lang_js_={},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(data_grid_ScaleDataGridvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleDataGrid=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleDataGrid",description:"",tags:{}};var DataGrid_stories_Template=function Template(args,_ref){return function _objectDestructuringEmpty(obj){if(null==obj)throw new TypeError("Cannot destructure undefined")}(_ref),{components:{ScaleDataGrid:ScaleDataGrid},props:{unused:{}},template:""}},layoutProps={Template:DataGrid_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Data Grid",component:ScaleDataGrid,argTypes:{fields:{table:{type:{summary:"array"}},description:"(required) Input fields config array",control:{type:null}},rows:{table:{type:{summary:"array"}},description:"(required) Input data array",control:{type:null}},freezeHeader:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Freeze header row from scrolling",control:{type:null}},heading:{table:{type:{summary:"string"},defaultValue:{summary:""}},description:"(optional) Heading string",control:{type:null}},sortableColumnTitle:{table:{type:{summary:"string"},defaultValue:{summary:"Activate to sort column"}},description:"(optional) Title for sortable columns",control:{type:null}},height:{table:{type:{summary:"string"},defaultValue:{summary:"auto"}},description:"(optional) Set static table height, by default will auto-resize",control:{type:null}},hideBorder:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to remove border",control:{type:null}},hideHeader:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide header row",control:{type:null}},hideInfo:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to remove info footer block including pagination and selection status",control:{type:null}},hideMenu:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide settings menu",control:{type:null}},numbered:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to add numbers column",control:{type:null}},pageSize:{table:{type:{summary:"number"},defaultValue:{summary:1/0}},description:"(optional) Set number of rows to display per pagination page",control:{type:null}},selectable:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to add selection column",control:{type:null}},localization:{table:{type:{summary:"object"}},description:"(optional) localization object for sort by, toogle visibility and select/deselect all. The default value is English",control:{type:null}},shadeAlternate:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Shade every second row darker",control:{type:null}},styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},selection:{name:"[readonly] selection",table:{type:{summary:"array"}},description:"Read-only selection array - populated with raw data from selected rows. Note needs selectable set to true",control:{type:null}},eventScaleEditLegacy:{name:"[event] scaleEdit",table:{type:{summary:"event"}},description:"Event triggered every time the editable cells are changed, updating the original rows data",control:{type:null}},eventScaleEdit:{name:"[event] scale-edit",table:{type:{summary:"event"}},description:"Deprecated!: Event triggered every time the editable cells are changed, updating the original rows data",control:{type:null}},eventScaleSortLegacy:{name:"[event] scaleSort",table:{type:{summary:"event"}},description:"Deprecated!: Event triggered every time the data is sorted, changing original rows data",control:{type:null}},eventScaleSort:{name:"[event] scale-sort",table:{type:{summary:"event"}},description:"Event triggered every time the data is sorted, changing original rows data",control:{type:null}},slotMenu:{name:"[slot] menu",table:{type:{summary:"scale-menu-flyout-item"}},description:"Used for adding extra menu items within the settings menu. Note hideMenu must be false",control:{type:null}},slotDefault:{name:"[slot] default",table:{type:{summary:"scale-button"}},description:"Used for adding elements into the top section between the heading and the settings menu",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Data Grid"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h3",{id:"properties"},"Properties"),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",mdxType:"Story"},"<content>\n    <scale-data-grid heading=\"Default\" id=\"default-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#default-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'date',\n                label: 'Time',\n                stretchWeight: 1,\n            },\n        ];\n        dataGrid.rows = [\n            [1, 'John', '12:30'],\n            [2, 'Mary', '2:12'],\n            [3, 'Patek', '16:01'],\n            [4, 'Heidi', '3:15'],\n            [5, 'Muhammad', '21:45'],\n        ];\n        dataGrid.localization = {\n          sortBy: 'Sort By',\n          toggle: 'Toogle Visibility',\n          select: 'Select / Deselect All'\n        }\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"fields-structure"},"Fields Structure"),Object(esm.b)("p",null,"The ",Object(esm.b)("inlineCode",{parentName:"p"},"fields")," property is an array of field options. Each set of options defines the parameters for that field/column."),Object(esm.b)("p",null,"The field columns will display in the same order as this array."),Object(esm.b)("p",null,"The number of objects in the ",Object(esm.b)("inlineCode",{parentName:"p"},"fields")," array determines the number of items that must be in each row supplied to the ",Object(esm.b)("inlineCode",{parentName:"p"},"rows")," property."),Object(esm.b)("p",null,"The only required field option is ",Object(esm.b)("inlineCode",{parentName:"p"},"type"),". All common options are listed further down the page, as well as individual cell type options."),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"const fields = [ { type: 'number', label: 'ID', }, { type: 'text', label:\n'Name', }, { type: 'date', label: 'Time', }, ];\n")),Object(esm.b)("h2",{id:"rows-structure"},"Rows Structure"),Object(esm.b)("p",null,"The ",Object(esm.b)("inlineCode",{parentName:"p"},"rows")," property is an array of row data. Each row is a flat array that must match the length of the ",Object(esm.b)("inlineCode",{parentName:"p"},"fields")," property array."),Object(esm.b)("p",null,"Each item in the row contains the cell value for the associated field type, and must therefore match the expected format of the field options."),Object(esm.b)("p",null,"Eg. the first item in the fields example above is a ",Object(esm.b)("inlineCode",{parentName:"p"},"text")," field type, therefore the first item in each row must be a ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),". Each type's expected format is documented further down the page."),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"const rows = [ [1, 'John', '12:30'], [2, 'Mary', '2:12'], [3, 'Patek', '16:01'],\n[4, 'Heidi', '3:15'], [5, 'Muhammad', '21:45'], ];\n")),Object(esm.b)("h2",{id:"field-cell-types"},"Field Cell Types"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"actions")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"checkbox")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"email")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"date")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"graph")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"html")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"link")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"number")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"select")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"tags")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"telephone")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"text"))),Object(esm.b)("h2",{id:"field-options"},"Field Options"),Object(esm.b)("h5",{id:"common-options-and-their-defaults"},"Common options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"type: string")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"label?: string")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"maxWidth?: number = Infinity")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"minWidth?: number = 20")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"mobileTitle?: boolean = false")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"resizable?: boolean = true")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"sortable?: boolean = false")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"sortBy?: 'number' | 'text' = 'text'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"textAlign?: 'left' | 'center' | 'right' = 'left'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"stretchWeight?: 'number'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"visible?: boolean = true")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"width?: number"))),Object(esm.b)("h2",{id:"cell-type-options"},"Cell Type Options"),Object(esm.b)("h2",{id:"actions-cell"},"Actions Cell"),Object(esm.b)("p",null,"Expected format: an array of objects, e.g. ",Object(esm.b)("inlineCode",{parentName:"p"},"[{ label: 'Edit', onClick: () => { /* ... */ }]")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"label: string = '' | object = { __html: '' }")),Object(esm.b)("li",{parentName:"ul"},"any ",Object(esm.b)("inlineCode",{parentName:"li"},"scale-button")," attributes")),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Actions Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"actions-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#actions-example');\n        dataGrid.fields = [\n            {\n                type: 'actions',\n                label: 'Actions (secondary)',\n            },\n        ];\n        dataGrid.rows = [\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ],\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ]\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"checkbox-cell"},"Checkbox Cell"),Object(esm.b)("p",null,"Expected format: ",Object(esm.b)("inlineCode",{parentName:"p"},"boolean"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"true")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-1"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"style?: 'checkbox' | 'switch' = 'checkbox'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"editable?: boolean = false"))),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Checkbox Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"checkbox-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#checkbox-example');\n        dataGrid.fields = [\n            {\n                type: 'checkbox',\n                label: 'Checkbox',\n                style: 'checkbox',\n            },\n            {\n                type: 'checkbox',\n                label: 'Switch',\n                style: 'switch',\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Checkbox',\n                style: 'checkbox',\n                editable: true,\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Switch',\n                style: 'switch',\n                editable: true,\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            [true, false, true, true],\n            [true, true, true, false],\n            [false, true, false, false],\n            [false, false, false, true]\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"email-cell"},"Email Cell"),Object(esm.b)("p",null,"Expected format: a email ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg: ",Object(esm.b)("inlineCode",{parentName:"p"},"'mailto:example@domain.org'")),Object(esm.b)("p",null,"Email label is partially beautified by automatically removing the protocol (",Object(esm.b)("inlineCode",{parentName:"p"},"mailto:"),")"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Email Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"email-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#email-example');\n        dataGrid.fields = [\n            {\n                type: 'email',\n                label: 'Email',\n            }\n        ];\n        dataGrid.rows = [\n            ['mailto:testuser_1@domain.org'],\n            ['mailto:testuser_2@domain.org',]\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"date-cell"},"Date Cell"),Object(esm.b)("p",null,"Expected format: date/time ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"'10:23:00'")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-2"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"format?: string = 'MM.dd.yyyy'"))),Object(esm.b)("p",null,"to properly sort by date, the date string value is parsed according to this format. For more info and additional formatting options, e.g. ",Object(esm.b)("inlineCode",{parentName:"p"},"'dd/MM/yyyy'")," check the ",Object(esm.b)("a",{parentName:"p",href:"https://date-fns.org/v2.30.0/docs/parse",target:"_blank",rel:"nofollow noopener noreferrer"},"date-fn docs"),"."),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Date Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"date-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#date-example');\n        dataGrid.fields = [\n            {\n                type: 'date',\n                label: 'Time',\n            },\n            {\n                type: 'date',\n                label: 'Date',\n            },\n        ];\n        dataGrid.rows = [\n            ['00:00:20', 'Mon Aug 05'],\n            ['17:24', '12/10/2020'],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"graph-cell"},"Graph Cell"),Object(esm.b)("p",null,"Expected format: ",Object(esm.b)("inlineCode",{parentName:"p"},"number"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"10230.32")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-3"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"style?: 'progress' | 'bar' = 'progress'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"min?: number = 0")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"max?: number = 100"))),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Graph Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"graph-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#graph-example');\n        dataGrid.fields = [\n            {\n                type: 'graph',\n                label: 'Progress',\n            },\n            {\n                type: 'graph',\n                label: 'Bar',\n                style: 'bar',\n                max: 20000,\n            },\n        ];\n        dataGrid.rows = [\n            [87, 1020],\n            [100, 15034],\n            [12, 19209],\n            [34, 89],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"html-cell"},"HTML Cell"),Object(esm.b)("p",null,"Expected format: ",Object(esm.b)("inlineCode",{parentName:"p"},"HTMLElement")),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"HTML Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"html-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#html-example');\n        dataGrid.fields = [\n            {\n                type: 'html',\n                label: 'HTML',\n            },\n        ];\n        dataGrid.rows = [\n            [document.createElement('scale-icon-service-support')],\n            [document.createElement('scale-icon-service-settings')],\n            [document.createElement('scale-icon-service-services')],\n            [document.createElement('scale-icon-service-devices-service')],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"link-cell"},"Link Cell"),Object(esm.b)("p",null,"Expected format: a url ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg: ",Object(esm.b)("inlineCode",{parentName:"p"},"'https://sample.com'")),Object(esm.b)("p",null,"Link label is partially beautified by automatically removing the protocol (",Object(esm.b)("inlineCode",{parentName:"p"},"http://")," / ",Object(esm.b)("inlineCode",{parentName:"p"},"https://"),")"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Link Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"link-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#link-example');\n        dataGrid.fields = [\n            {\n                type: 'link',\n                label: 'Https link',\n            },\n            {\n                type: 'link',\n                label: 'Http link',\n            },\n        ];\n        dataGrid.rows = [\n            ['https://www.google.com', 'http://www.google.com'],\n            ['https://example.com', 'http://example.com'],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"number-cell"},"Number Cell"),Object(esm.b)("p",null,"Expected format: ",Object(esm.b)("inlineCode",{parentName:"p"},"number")," or ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"120.0")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-4"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"decimalSymbol?: string = '.'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"groupSymbol?: string = ''")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"precision?: number Infinity")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"prefix?: string")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"suffix?: string"))),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Number Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"number-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#number-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'Default',\n            },\n            {\n                type: 'number',\n                label: 'Precision',\n                precision: 2,\n            },\n            {\n                type: 'number',\n                label: 'Currency',\n                precision: 2,\n                decimalSymbol: ',',\n                groupSymbol: '.',\n                prefix: '$',\n                suffix: ' USD',\n            },\n        ];\n        dataGrid.rows = [\n            [11, 11, 11],\n            [126.3, 126.3, 126.3],\n            [0.032, 0.032, 0.032],\n            [123045, 123045, 123045],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"select-cell"},"Select Cell"),Object(esm.b)("p",null,"Expected format: string"),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-5"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"options: string[]")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"editable?: boolean = false"))),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Select Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"select-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#select-example');\n        dataGrid.fields = [\n            {\n                type: 'select',\n                label: 'Select',\n                options: ['Apple', 'Orange', 'Banana'],\n            },\n            {\n                type: 'select',\n                label: 'Options',\n                options: ['Apple', 'Orange', 'Banana'],\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple', 'Orange'],\n            ['Orange', 'Apple'],\n            ['Banana', 'Banana'],\n            ['Apple', 'Orange']\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"tags-cell"},"Tags Cell"),Object(esm.b)("p",null,"Expected format: comma delimited ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"'one, two, three'")," or array of objects with content and color keys, e.g. ",Object(esm.b)("inlineCode",{parentName:"p"},"{content: 'Apple', color: 'red'}")),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Tags Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"tags-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#tags-example');\n        dataGrid.fields = [\n            {\n                type: 'tags',\n                label: 'Fruits',\n            },\n            {\n                type: 'tags',\n                label: 'Vegetables',\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple, Banana', 'Tomato, Cucumber'],\n            ['Strawberry', 'Aubergine, Carrot, Celery'],\n            ['Orange, Lemon, Watermelon', 'Pizza'],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"telephone-cell"},"Telephone Cell"),Object(esm.b)("p",null,"Expected format: a telephone ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg: ",Object(esm.b)("inlineCode",{parentName:"p"},"'tel: +0011122223333'")),Object(esm.b)("p",null,"telephone label is partially beautified by automatically removing the protocol (",Object(esm.b)("inlineCode",{parentName:"p"},"tel:"),")"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Telephone Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"telephone-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#telephone-example');\n        dataGrid.fields = [\n            {\n                type: 'telephone',\n                label: 'Telephone Number',\n            }\n        ];\n        dataGrid.rows = [\n            ['tel:+0011122223333'],\n            ['tel:+0011122223333',]\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"text-cell"},"Text Cell"),Object(esm.b)("p",null,"Expected format: unformatted ",Object(esm.b)("inlineCode",{parentName:"p"},"string"),", eg ",Object(esm.b)("inlineCode",{parentName:"p"},"'this is a string'")),Object(esm.b)("h5",{id:"unique-options-and-their-defaults-6"},"Unique options, and their defaults"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"variant?: 'body' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'body'")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"iconPrefix?: scale-icon-string (eg 'action-download')")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"iconSuffix?: scale-icon-string (eg 'action-download')")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"editable?: boolean = false"))),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Text Cell",mdxType:"Story"},"<content>\n    <scale-data-grid id=\"text-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#text-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Title h5 + Prefix',\n                variant: 'h5',\n                iconPrefix: 'action-logout',\n            },\n            {\n                type: 'text',\n                label: 'Body + Suffix',\n                iconSuffix: 'action-mute',\n            },\n            {\n                type: 'text',\n                label: 'Sortable',\n                sortable: true,\n            },\n            {\n                type: 'text',\n                label: 'Editable',\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Row lorem title', 'Lorem ipsum dolor sit amet', 'Row lorem title', 'Lorem ipsum dolor sit amet'],\n            ['Dolor sit amet', 'Quasi architecto beatae vitae', 'Dolor sit amet', 'Quasi architecto beatae vitae'],\n            ['Sed quia non', 'Ut enim ad minima veniam', 'Sed quia non', 'Ut enim ad minima veniam'],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"component-properties"},"Component Properties"),Object(esm.b)("h2",{id:"freeze-header-and-height"},"Freeze Header And Height"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Freeze Header",mdxType:"Story"},"<content>\n    <scale-data-grid\n        id=\"freeze-header-example\"\n        hide-menu\n        height=\"300px\"\n        freeze-header\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#freeze-header-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n            ['Lucas Finley', false],\n            ['Adrian Grimes', true],\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"heading"},"Heading"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Heading",mdxType:"Story"},"<content>\n    <scale-data-grid\n        id=\"heading-example\"\n        heading=\"Data Grid Heading\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#heading-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"hide-extras"},"Hide Extras"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Hide Extras",mdxType:"Story"},"<content>\n    <scale-data-grid\n        id=\"hide-extras-example\"\n        hide-border\n        hide-header\n        hide-info\n        hide-menu\n        shade-alternate=\"false\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#hide-extras-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"numbered"},"Numbered"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Numbered",mdxType:"Story"},"<content>\n    <scale-data-grid\n        id=\"numbered-example\"\n        numbered\n        hide-menu\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#numbered-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"pagination"},"Pagination"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Pagination",mdxType:"Story"},"<content>\n    <scale-data-grid\n        id=\"pagination-example\"\n        heading=\"Pagination Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#pagination-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"selection-export"},"Selection Export"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Selection Export",mdxType:"Story"},"<content>\n    <div aria-live=\"polite\" id=\"aria-live\" style=\"margin-top:8px; text-align:center;\"></div>\n    <scale-data-grid\n        id=\"selection-export-example\"\n        heading=\"Selection Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    >\n        <scale-button id=\"export-btn\">\n            Export Selection!\n        </scale-button>\n    </scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#selection-export-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n        ];\n        document.getElementById(\"export-btn\").addEventListener('click', () => {\n            document.querySelector('#aria-live').innerText=document.querySelector('#selection-export-example').selection.length + ' rows selected for export'\n        });\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"column-stretch"},"Column Stretch"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Column Stretch",mdxType:"Story"},"<content>\n    <scale-data-grid heading=\"Column Stretch\" id=\"column-stretch-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#column-stretch-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                stretchWeight: 1,\n            },\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'date',\n                label: 'Time',\n            },\n        ];\n        dataGrid.rows = [\n            ['John', 1, '12:30'],\n            ['Mary', 2, '2:12'],\n            ['Patek', 3, '16:01'],\n            ['Heidi', 4, '3:15'],\n            ['Muhammad', 5, '21:45'],\n        ];\n    }\n    <\/script>\n</content>")),Object(esm.b)("h2",{id:"show-more"},"Show More"),Object(esm.b)(dist_esm.c,{withSource:"close",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Show More",mdxType:"Story"},"<content style=\"display: block;\">\n    <scale-data-grid\n        id=\"show-more-example\"\n        heading=\"Show More\"\n        numbered\n        hide-info\n    ></scale-data-grid>\n    <scale-button\n        id=\"show-more-example-button\"\n        size=\"small\"\n        style=\"display: block; width: 128px; margin: 20px auto;\"\n        variant=\"secondary\"\n    >Show More<scale-icon-navigation-collapse-down size=\"16\"></scale-icon-navigation-collapse-down></scale-button>\n      <div aria-live=\"polite\" id=\"aria-live\" style=\"position: absolute; left: -10000px; overflow: hidden;\"></div>\n    <script type=\"application/javascript\">\n    {\n        const data = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n        ];\n        const dataGrid = document.querySelector('#show-more-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        let showCount = 5;\n        dataGrid.rows = data.slice(0, showCount);\n        const showMorePrompt = document.querySelector('#show-more-example-button');\n        showMorePrompt.addEventListener('click', () => {\n            showCount = Math.min(showCount + 5, data.length);\n            dataGrid.rows = data.slice(0, showCount);\n            document.querySelector('#aria-live').innerText=\"5 more rows added, total \" + String(dataGrid.rows.length)\n        });\n    }\n    <\/script>\n</content>")))}MDXContent.isMDXComponent=!0;var standard=function standard(){return"<content>\n    <scale-data-grid heading=\"Default\" id=\"default-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#default-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'date',\n                label: 'Time',\n                stretchWeight: 1,\n            },\n        ];\n        dataGrid.rows = [\n            [1, 'John', '12:30'],\n            [2, 'Mary', '2:12'],\n            [3, 'Patek', '16:01'],\n            [4, 'Heidi', '3:15'],\n            [5, 'Muhammad', '21:45'],\n        ];\n        dataGrid.localization = {\n          sortBy: 'Sort By',\n          toggle: 'Toogle Visibility',\n          select: 'Select / Deselect All'\n        }\n    }\n    <\/script>\n</content>"};standard.storyName="Standard",standard.parameters={storySource:{source:"`<content>\n    <scale-data-grid heading=\"Default\" id=\"default-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#default-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'date',\n                label: 'Time',\n                stretchWeight: 1,\n            },\n        ];\n        dataGrid.rows = [\n            [1, 'John', '12:30'],\n            [2, 'Mary', '2:12'],\n            [3, 'Patek', '16:01'],\n            [4, 'Heidi', '3:15'],\n            [5, 'Muhammad', '21:45'],\n        ];\n        dataGrid.localization = {\n          sortBy: 'Sort By',\n          toggle: 'Toogle Visibility',\n          select: 'Select / Deselect All'\n        }\n    }\n    <\/script>\n</content>`"}};var actionsCell=function actionsCell(){return"<content>\n    <scale-data-grid id=\"actions-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#actions-example');\n        dataGrid.fields = [\n            {\n                type: 'actions',\n                label: 'Actions (secondary)',\n            },\n        ];\n        dataGrid.rows = [\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ],\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ]\n        ];\n    }\n    <\/script>\n</content>"};actionsCell.storyName="Actions Cell",actionsCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"actions-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#actions-example');\n        dataGrid.fields = [\n            {\n                type: 'actions',\n                label: 'Actions (secondary)',\n            },\n        ];\n        dataGrid.rows = [\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ],\n            [\n                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],\n            ]\n        ];\n    }\n    <\/script>\n</content>`"}};var checkboxCell=function checkboxCell(){return"<content>\n    <scale-data-grid id=\"checkbox-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#checkbox-example');\n        dataGrid.fields = [\n            {\n                type: 'checkbox',\n                label: 'Checkbox',\n                style: 'checkbox',\n            },\n            {\n                type: 'checkbox',\n                label: 'Switch',\n                style: 'switch',\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Checkbox',\n                style: 'checkbox',\n                editable: true,\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Switch',\n                style: 'switch',\n                editable: true,\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            [true, false, true, true],\n            [true, true, true, false],\n            [false, true, false, false],\n            [false, false, false, true]\n        ];\n    }\n    <\/script>\n</content>"};checkboxCell.storyName="Checkbox Cell",checkboxCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"checkbox-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#checkbox-example');\n        dataGrid.fields = [\n            {\n                type: 'checkbox',\n                label: 'Checkbox',\n                style: 'checkbox',\n            },\n            {\n                type: 'checkbox',\n                label: 'Switch',\n                style: 'switch',\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Checkbox',\n                style: 'checkbox',\n                editable: true,\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Editable Switch',\n                style: 'switch',\n                editable: true,\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            [true, false, true, true],\n            [true, true, true, false],\n            [false, true, false, false],\n            [false, false, false, true]\n        ];\n    }\n    <\/script>\n</content>`"}};var emailCell=function emailCell(){return"<content>\n    <scale-data-grid id=\"email-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#email-example');\n        dataGrid.fields = [\n            {\n                type: 'email',\n                label: 'Email',\n            }\n        ];\n        dataGrid.rows = [\n            ['mailto:testuser_1@domain.org'],\n            ['mailto:testuser_2@domain.org',]\n        ];\n    }\n    <\/script>\n</content>"};emailCell.storyName="Email Cell",emailCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"email-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#email-example');\n        dataGrid.fields = [\n            {\n                type: 'email',\n                label: 'Email',\n            }\n        ];\n        dataGrid.rows = [\n            ['mailto:testuser_1@domain.org'],\n            ['mailto:testuser_2@domain.org',]\n        ];\n    }\n    <\/script>\n</content>`"}};var dateCell=function dateCell(){return"<content>\n    <scale-data-grid id=\"date-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#date-example');\n        dataGrid.fields = [\n            {\n                type: 'date',\n                label: 'Time',\n            },\n            {\n                type: 'date',\n                label: 'Date',\n            },\n        ];\n        dataGrid.rows = [\n            ['00:00:20', 'Mon Aug 05'],\n            ['17:24', '12/10/2020'],\n        ];\n    }\n    <\/script>\n</content>"};dateCell.storyName="Date Cell",dateCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"date-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#date-example');\n        dataGrid.fields = [\n            {\n                type: 'date',\n                label: 'Time',\n            },\n            {\n                type: 'date',\n                label: 'Date',\n            },\n        ];\n        dataGrid.rows = [\n            ['00:00:20', 'Mon Aug 05'],\n            ['17:24', '12/10/2020'],\n        ];\n    }\n    <\/script>\n</content>`"}};var graphCell=function graphCell(){return"<content>\n    <scale-data-grid id=\"graph-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#graph-example');\n        dataGrid.fields = [\n            {\n                type: 'graph',\n                label: 'Progress',\n            },\n            {\n                type: 'graph',\n                label: 'Bar',\n                style: 'bar',\n                max: 20000,\n            },\n        ];\n        dataGrid.rows = [\n            [87, 1020],\n            [100, 15034],\n            [12, 19209],\n            [34, 89],\n        ];\n    }\n    <\/script>\n</content>"};graphCell.storyName="Graph Cell",graphCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"graph-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#graph-example');\n        dataGrid.fields = [\n            {\n                type: 'graph',\n                label: 'Progress',\n            },\n            {\n                type: 'graph',\n                label: 'Bar',\n                style: 'bar',\n                max: 20000,\n            },\n        ];\n        dataGrid.rows = [\n            [87, 1020],\n            [100, 15034],\n            [12, 19209],\n            [34, 89],\n        ];\n    }\n    <\/script>\n</content>`"}};var htmlCell=function htmlCell(){return"<content>\n    <scale-data-grid id=\"html-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#html-example');\n        dataGrid.fields = [\n            {\n                type: 'html',\n                label: 'HTML',\n            },\n        ];\n        dataGrid.rows = [\n            [document.createElement('scale-icon-service-support')],\n            [document.createElement('scale-icon-service-settings')],\n            [document.createElement('scale-icon-service-services')],\n            [document.createElement('scale-icon-service-devices-service')],\n        ];\n    }\n    <\/script>\n</content>"};htmlCell.storyName="HTML Cell",htmlCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"html-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#html-example');\n        dataGrid.fields = [\n            {\n                type: 'html',\n                label: 'HTML',\n            },\n        ];\n        dataGrid.rows = [\n            [document.createElement('scale-icon-service-support')],\n            [document.createElement('scale-icon-service-settings')],\n            [document.createElement('scale-icon-service-services')],\n            [document.createElement('scale-icon-service-devices-service')],\n        ];\n    }\n    <\/script>\n</content>`"}};var linkCell=function linkCell(){return"<content>\n    <scale-data-grid id=\"link-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#link-example');\n        dataGrid.fields = [\n            {\n                type: 'link',\n                label: 'Https link',\n            },\n            {\n                type: 'link',\n                label: 'Http link',\n            },\n        ];\n        dataGrid.rows = [\n            ['https://www.google.com', 'http://www.google.com'],\n            ['https://example.com', 'http://example.com'],\n        ];\n    }\n    <\/script>\n</content>"};linkCell.storyName="Link Cell",linkCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"link-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#link-example');\n        dataGrid.fields = [\n            {\n                type: 'link',\n                label: 'Https link',\n            },\n            {\n                type: 'link',\n                label: 'Http link',\n            },\n        ];\n        dataGrid.rows = [\n            ['https://www.google.com', 'http://www.google.com'],\n            ['https://example.com', 'http://example.com'],\n        ];\n    }\n    <\/script>\n</content>`"}};var numberCell=function numberCell(){return"<content>\n    <scale-data-grid id=\"number-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#number-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'Default',\n            },\n            {\n                type: 'number',\n                label: 'Precision',\n                precision: 2,\n            },\n            {\n                type: 'number',\n                label: 'Currency',\n                precision: 2,\n                decimalSymbol: ',',\n                groupSymbol: '.',\n                prefix: '$',\n                suffix: ' USD',\n            },\n        ];\n        dataGrid.rows = [\n            [11, 11, 11],\n            [126.3, 126.3, 126.3],\n            [0.032, 0.032, 0.032],\n            [123045, 123045, 123045],\n        ];\n    }\n    <\/script>\n</content>"};numberCell.storyName="Number Cell",numberCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"number-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#number-example');\n        dataGrid.fields = [\n            {\n                type: 'number',\n                label: 'Default',\n            },\n            {\n                type: 'number',\n                label: 'Precision',\n                precision: 2,\n            },\n            {\n                type: 'number',\n                label: 'Currency',\n                precision: 2,\n                decimalSymbol: ',',\n                groupSymbol: '.',\n                prefix: '$',\n                suffix: ' USD',\n            },\n        ];\n        dataGrid.rows = [\n            [11, 11, 11],\n            [126.3, 126.3, 126.3],\n            [0.032, 0.032, 0.032],\n            [123045, 123045, 123045],\n        ];\n    }\n    <\/script>\n</content>`"}};var selectCell=function selectCell(){return"<content>\n    <scale-data-grid id=\"select-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#select-example');\n        dataGrid.fields = [\n            {\n                type: 'select',\n                label: 'Select',\n                options: ['Apple', 'Orange', 'Banana'],\n            },\n            {\n                type: 'select',\n                label: 'Options',\n                options: ['Apple', 'Orange', 'Banana'],\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple', 'Orange'],\n            ['Orange', 'Apple'],\n            ['Banana', 'Banana'],\n            ['Apple', 'Orange']\n        ];\n    }\n    <\/script>\n</content>"};selectCell.storyName="Select Cell",selectCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"select-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#select-example');\n        dataGrid.fields = [\n            {\n                type: 'select',\n                label: 'Select',\n                options: ['Apple', 'Orange', 'Banana'],\n            },\n            {\n                type: 'select',\n                label: 'Options',\n                options: ['Apple', 'Orange', 'Banana'],\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple', 'Orange'],\n            ['Orange', 'Apple'],\n            ['Banana', 'Banana'],\n            ['Apple', 'Orange']\n        ];\n    }\n    <\/script>\n</content>`"}};var tagsCell=function tagsCell(){return"<content>\n    <scale-data-grid id=\"tags-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#tags-example');\n        dataGrid.fields = [\n            {\n                type: 'tags',\n                label: 'Fruits',\n            },\n            {\n                type: 'tags',\n                label: 'Vegetables',\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple, Banana', 'Tomato, Cucumber'],\n            ['Strawberry', 'Aubergine, Carrot, Celery'],\n            ['Orange, Lemon, Watermelon', 'Pizza'],\n        ];\n    }\n    <\/script>\n</content>"};tagsCell.storyName="Tags Cell",tagsCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"tags-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#tags-example');\n        dataGrid.fields = [\n            {\n                type: 'tags',\n                label: 'Fruits',\n            },\n            {\n                type: 'tags',\n                label: 'Vegetables',\n            },\n        ];\n        dataGrid.rows = [\n            ['Apple, Banana', 'Tomato, Cucumber'],\n            ['Strawberry', 'Aubergine, Carrot, Celery'],\n            ['Orange, Lemon, Watermelon', 'Pizza'],\n        ];\n    }\n    <\/script>\n</content>`"}};var telephoneCell=function telephoneCell(){return"<content>\n    <scale-data-grid id=\"telephone-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#telephone-example');\n        dataGrid.fields = [\n            {\n                type: 'telephone',\n                label: 'Telephone Number',\n            }\n        ];\n        dataGrid.rows = [\n            ['tel:+0011122223333'],\n            ['tel:+0011122223333',]\n        ];\n    }\n    <\/script>\n</content>"};telephoneCell.storyName="Telephone Cell",telephoneCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"telephone-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#telephone-example');\n        dataGrid.fields = [\n            {\n                type: 'telephone',\n                label: 'Telephone Number',\n            }\n        ];\n        dataGrid.rows = [\n            ['tel:+0011122223333'],\n            ['tel:+0011122223333',]\n        ];\n    }\n    <\/script>\n</content>`"}};var textCell=function textCell(){return"<content>\n    <scale-data-grid id=\"text-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#text-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Title h5 + Prefix',\n                variant: 'h5',\n                iconPrefix: 'action-logout',\n            },\n            {\n                type: 'text',\n                label: 'Body + Suffix',\n                iconSuffix: 'action-mute',\n            },\n            {\n                type: 'text',\n                label: 'Sortable',\n                sortable: true,\n            },\n            {\n                type: 'text',\n                label: 'Editable',\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Row lorem title', 'Lorem ipsum dolor sit amet', 'Row lorem title', 'Lorem ipsum dolor sit amet'],\n            ['Dolor sit amet', 'Quasi architecto beatae vitae', 'Dolor sit amet', 'Quasi architecto beatae vitae'],\n            ['Sed quia non', 'Ut enim ad minima veniam', 'Sed quia non', 'Ut enim ad minima veniam'],\n        ];\n    }\n    <\/script>\n</content>"};textCell.storyName="Text Cell",textCell.parameters={storySource:{source:"`<content>\n    <scale-data-grid id=\"text-example\" hide-menu></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#text-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Title h5 + Prefix',\n                variant: 'h5',\n                iconPrefix: 'action-logout',\n            },\n            {\n                type: 'text',\n                label: 'Body + Suffix',\n                iconSuffix: 'action-mute',\n            },\n            {\n                type: 'text',\n                label: 'Sortable',\n                sortable: true,\n            },\n            {\n                type: 'text',\n                label: 'Editable',\n                editable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Row lorem title', 'Lorem ipsum dolor sit amet', 'Row lorem title', 'Lorem ipsum dolor sit amet'],\n            ['Dolor sit amet', 'Quasi architecto beatae vitae', 'Dolor sit amet', 'Quasi architecto beatae vitae'],\n            ['Sed quia non', 'Ut enim ad minima veniam', 'Sed quia non', 'Ut enim ad minima veniam'],\n        ];\n    }\n    <\/script>\n</content>`"}};var freezeHeader=function freezeHeader(){return"<content>\n    <scale-data-grid\n        id=\"freeze-header-example\"\n        hide-menu\n        height=\"300px\"\n        freeze-header\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#freeze-header-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n            ['Lucas Finley', false],\n            ['Adrian Grimes', true],\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>"};freezeHeader.storyName="Freeze Header",freezeHeader.parameters={storySource:{source:"`<content>\n    <scale-data-grid\n        id=\"freeze-header-example\"\n        hide-menu\n        height=\"300px\"\n        freeze-header\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#freeze-header-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n            ['Lucas Finley', false],\n            ['Adrian Grimes', true],\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>`"}};var heading=function heading(){return"<content>\n    <scale-data-grid\n        id=\"heading-example\"\n        heading=\"Data Grid Heading\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#heading-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>"};heading.storyName="Heading",heading.parameters={storySource:{source:"`<content>\n    <scale-data-grid\n        id=\"heading-example\"\n        heading=\"Data Grid Heading\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#heading-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>`"}};var hideExtras=function hideExtras(){return"<content>\n    <scale-data-grid\n        id=\"hide-extras-example\"\n        hide-border\n        hide-header\n        hide-info\n        hide-menu\n        shade-alternate=\"false\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#hide-extras-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>"};hideExtras.storyName="Hide Extras",hideExtras.parameters={storySource:{source:"`<content>\n    <scale-data-grid\n        id=\"hide-extras-example\"\n        hide-border\n        hide-header\n        hide-info\n        hide-menu\n        shade-alternate=\"false\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#hide-extras-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>`"}};var numbered=function numbered(){return"<content>\n    <scale-data-grid\n        id=\"numbered-example\"\n        numbered\n        hide-menu\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#numbered-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>"};numbered.storyName="Numbered",numbered.parameters={storySource:{source:"`<content>\n    <scale-data-grid\n        id=\"numbered-example\"\n        numbered\n        hide-menu\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#numbered-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n            },\n        ];\n        dataGrid.rows = [\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n        ];\n    }\n    <\/script>\n</content>`"}};var pagination=function pagination(){return"<content>\n    <scale-data-grid\n        id=\"pagination-example\"\n        heading=\"Pagination Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#pagination-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>"};pagination.storyName="Pagination",pagination.parameters={storySource:{source:"`<content>\n    <scale-data-grid\n        id=\"pagination-example\"\n        heading=\"Pagination Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    ></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#pagination-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n            ['Hope Bass', false],\n            ['Hollee Gates', true],\n            ['Nathaniel Sherman', true],\n            ['Devin Mosley', false],\n            ['Candice Wynn', true],\n            ['Kaye Herman', false],\n            ['Patience Jacobs', false],\n            ['Philip Langley', true],\n            ['Ainsley Acosta', true],\n            ['Gary Rose', false],\n            ['Melissa Sawyer', true],\n            ['Rama Odom', false],\n            ['Malcolm Roth', true],\n            ['Sage Mullen', true],\n            ['Elton Frank', true],\n            ['Hilda Pearson', true],\n            ['Justine Stark', true],\n            ['Hasad Long', false],\n            ['Heather Watson', false],\n            ['Elliott Schwartz', true],\n            ['Hannah Hobbs', true],\n            ['Maisie Reid', true],\n            ['Yuli Kramer', false],\n            ['Signe Holmes', false],\n            ['George Terry', false],\n            ['Lacota Logan', false],\n            ['Carlos Franco', true],\n            ['Xandra Terry', false],\n            ['Myles Butler', true],\n            ['Hunter Salazar', false],\n        ];\n    }\n    <\/script>\n</content>`"}};var selectionExport=function selectionExport(){return"<content>\n    <div aria-live=\"polite\" id=\"aria-live\" style=\"margin-top:8px; text-align:center;\"></div>\n    <scale-data-grid\n        id=\"selection-export-example\"\n        heading=\"Selection Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    >\n        <scale-button id=\"export-btn\">\n            Export Selection!\n        </scale-button>\n    </scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#selection-export-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n        ];\n        document.getElementById(\"export-btn\").addEventListener('click', () => {\n            document.querySelector('#aria-live').innerText=document.querySelector('#selection-export-example').selection.length + ' rows selected for export'\n        });\n    }\n    <\/script>\n</content>"};selectionExport.storyName="Selection Export",selectionExport.parameters={storySource:{source:"`<content>\n    <div aria-live=\"polite\" id=\"aria-live\" style=\"margin-top:8px; text-align:center;\"></div>\n    <scale-data-grid\n        id=\"selection-export-example\"\n        heading=\"Selection Example\"\n        numbered\n        selectable\n        page-size=\"5\"\n    >\n        <scale-button id=\"export-btn\">\n            Export Selection!\n        </scale-button>\n    </scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#selection-export-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        dataGrid.rows = [\n            ['Hilel Hurley', false],\n            ['Holmes Thornton', true],\n            ['Irma Gonzales', false],\n            ['Molly Burgess', true],\n            ['Martha Walker', false],\n            ['Jenette Bass', true],\n            ['Kyra Fields', true],\n            ['Kareem Irwin', false],\n            ['Kirk Santos', false],\n            ['Warren Stokes', false],\n            ['Noelle Joseph', false],\n            ['Katelyn Hopper', true],\n            ['Cruz Rocha', true],\n            ['Armand Carrillo', true],\n            ['Travis Molina', false],\n            ['Adrienne Hopper', true],\n            ['Merritt Hardin', true],\n            ['Randall Copeland', false],\n        ];\n        document.getElementById(\"export-btn\").addEventListener('click', () => {\n            document.querySelector('#aria-live').innerText=document.querySelector('#selection-export-example').selection.length + ' rows selected for export'\n        });\n    }\n    <\/script>\n</content>`"}};var columnStretch=function columnStretch(){return"<content>\n    <scale-data-grid heading=\"Column Stretch\" id=\"column-stretch-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#column-stretch-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                stretchWeight: 1,\n            },\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'date',\n                label: 'Time',\n            },\n        ];\n        dataGrid.rows = [\n            ['John', 1, '12:30'],\n            ['Mary', 2, '2:12'],\n            ['Patek', 3, '16:01'],\n            ['Heidi', 4, '3:15'],\n            ['Muhammad', 5, '21:45'],\n        ];\n    }\n    <\/script>\n</content>"};columnStretch.storyName="Column Stretch",columnStretch.parameters={storySource:{source:"`<content>\n    <scale-data-grid heading=\"Column Stretch\" id=\"column-stretch-example\"></scale-data-grid>\n    <script type=\"application/javascript\">\n    {\n        const dataGrid = document.querySelector('#column-stretch-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                stretchWeight: 1,\n            },\n            {\n                type: 'number',\n                label: 'ID',\n            },\n            {\n                type: 'date',\n                label: 'Time',\n            },\n        ];\n        dataGrid.rows = [\n            ['John', 1, '12:30'],\n            ['Mary', 2, '2:12'],\n            ['Patek', 3, '16:01'],\n            ['Heidi', 4, '3:15'],\n            ['Muhammad', 5, '21:45'],\n        ];\n    }\n    <\/script>\n</content>`"}};var showMore=function showMore(){return"<content style=\"display: block;\">\n    <scale-data-grid\n        id=\"show-more-example\"\n        heading=\"Show More\"\n        numbered\n        hide-info\n    ></scale-data-grid>\n    <scale-button\n        id=\"show-more-example-button\"\n        size=\"small\"\n        style=\"display: block; width: 128px; margin: 20px auto;\"\n        variant=\"secondary\"\n    >Show More<scale-icon-navigation-collapse-down size=\"16\"></scale-icon-navigation-collapse-down></scale-button>\n      <div aria-live=\"polite\" id=\"aria-live\" style=\"position: absolute; left: -10000px; overflow: hidden;\"></div>\n    <script type=\"application/javascript\">\n    {\n        const data = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n        ];\n        const dataGrid = document.querySelector('#show-more-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        let showCount = 5;\n        dataGrid.rows = data.slice(0, showCount);\n        const showMorePrompt = document.querySelector('#show-more-example-button');\n        showMorePrompt.addEventListener('click', () => {\n            showCount = Math.min(showCount + 5, data.length);\n            dataGrid.rows = data.slice(0, showCount);\n            document.querySelector('#aria-live').innerText=\"5 more rows added, total \" + String(dataGrid.rows.length)\n        });\n    }\n    <\/script>\n</content>"};showMore.storyName="Show More",showMore.parameters={storySource:{source:"`<content style=\"display: block;\">\n    <scale-data-grid\n        id=\"show-more-example\"\n        heading=\"Show More\"\n        numbered\n        hide-info\n    ></scale-data-grid>\n    <scale-button\n        id=\"show-more-example-button\"\n        size=\"small\"\n        style=\"display: block; width: 128px; margin: 20px auto;\"\n        variant=\"secondary\"\n    >Show More<scale-icon-navigation-collapse-down size=\"16\"></scale-icon-navigation-collapse-down></scale-button>\n      <div aria-live=\"polite\" id=\"aria-live\" style=\"position: absolute; left: -10000px; overflow: hidden;\"></div>\n    <script type=\"application/javascript\">\n    {\n        const data = [\n            ['Graham Ross', true],\n            ['Ina Burks', true],\n            ['Lee Jackson', false],\n            ['Regina Cain', false],\n            ['Cameran Gordon', false],\n            ['Geoffrey Padilla', false],\n            ['Rajah Oliver', true],\n            ['Maggie Reid', true],\n            ['Dean Lawson', false],\n            ['Kylynn Weaver', false],\n            ['Justine Mcdowell', true],\n            ['Stephen Good', true],\n            ['Quyn Snow', false],\n            ['Hakeem Stephens', false],\n            ['Lyle Owen', true],\n            ['Isaac Mcfadden', false],\n            ['Cheyenne Jordan', true],\n            ['Brock Griffin', true],\n            ['Thor Riddle', false],\n            ['Calvin Bishop', false],\n            ['Deanna Daniels', false],\n            ['Alexander Chambers', false],\n            ['Orli Hurley', false],\n            ['Carson Ewing', false],\n            ['Gil Sweeney', false],\n            ['Lars Franks', true],\n            ['Kane Cortez', true],\n            ['Abbot Massey', false],\n            ['Jenette Gill', true],\n            ['Heather Greer', true],\n            ['Linus Mooney', false],\n            ['Illana Waters', true],\n            ['Ariel Foley', false],\n            ['Yolanda Alvarado', true],\n            ['Julie Brown', true],\n            ['Odessa Love', true],\n            ['Nehru Baird', false],\n            ['Paki Osborn', false],\n            ['Roary Shields', true],\n            ['Myles Hess', true],\n            ['Hannah Britt', false],\n            ['Eden Crane', false],\n            ['Dominique Anderson', false],\n            ['Cecilia Sawyer', false],\n            ['Lucas Daugherty', false],\n            ['Lee Wheeler', false],\n            ['Kimberly Gibbs', false],\n            ['Uta Hampton', false],\n            ['Kadeem Gillespie', false],\n            ['Ina Salas', false],\n        ];\n        const dataGrid = document.querySelector('#show-more-example');\n        dataGrid.fields = [\n            {\n                type: 'text',\n                label: 'Name',\n                sortable: true,\n            },\n            {\n                type: 'checkbox',\n                label: 'Toggle',\n                style: 'switch',\n                sortable: true,\n            },\n        ];\n        let showCount = 5;\n        dataGrid.rows = data.slice(0, showCount);\n        const showMorePrompt = document.querySelector('#show-more-example-button');\n        showMorePrompt.addEventListener('click', () => {\n            showCount = Math.min(showCount + 5, data.length);\n            dataGrid.rows = data.slice(0, showCount);\n            document.querySelector('#aria-live').innerText=\"5 more rows added, total \" + String(dataGrid.rows.length)\n        });\n    }\n    <\/script>\n</content>`"}};var componentMeta={title:"Components/Data Grid",component:ScaleDataGrid,argTypes:{fields:{table:{type:{summary:"array"}},description:"(required) Input fields config array",control:{type:null}},rows:{table:{type:{summary:"array"}},description:"(required) Input data array",control:{type:null}},freezeHeader:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Freeze header row from scrolling",control:{type:null}},heading:{table:{type:{summary:"string"},defaultValue:{summary:""}},description:"(optional) Heading string",control:{type:null}},sortableColumnTitle:{table:{type:{summary:"string"},defaultValue:{summary:"Activate to sort column"}},description:"(optional) Title for sortable columns",control:{type:null}},height:{table:{type:{summary:"string"},defaultValue:{summary:"auto"}},description:"(optional) Set static table height, by default will auto-resize",control:{type:null}},hideBorder:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to remove border",control:{type:null}},hideHeader:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide header row",control:{type:null}},hideInfo:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to remove info footer block including pagination and selection status",control:{type:null}},hideMenu:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide settings menu",control:{type:null}},numbered:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to add numbers column",control:{type:null}},pageSize:{table:{type:{summary:"number"},defaultValue:{summary:1/0}},description:"(optional) Set number of rows to display per pagination page",control:{type:null}},selectable:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to add selection column",control:{type:null}},localization:{table:{type:{summary:"object"}},description:"(optional) localization object for sort by, toogle visibility and select/deselect all. The default value is English",control:{type:null}},shadeAlternate:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) Shade every second row darker",control:{type:null}},styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},selection:{name:"[readonly] selection",table:{type:{summary:"array"}},description:"Read-only selection array - populated with raw data from selected rows. Note needs selectable set to true",control:{type:null}},eventScaleEditLegacy:{name:"[event] scaleEdit",table:{type:{summary:"event"}},description:"Event triggered every time the editable cells are changed, updating the original rows data",control:{type:null}},eventScaleEdit:{name:"[event] scale-edit",table:{type:{summary:"event"}},description:"Deprecated!: Event triggered every time the editable cells are changed, updating the original rows data",control:{type:null}},eventScaleSortLegacy:{name:"[event] scaleSort",table:{type:{summary:"event"}},description:"Deprecated!: Event triggered every time the data is sorted, changing original rows data",control:{type:null}},eventScaleSort:{name:"[event] scale-sort",table:{type:{summary:"event"}},description:"Event triggered every time the data is sorted, changing original rows data",control:{type:null}},slotMenu:{name:"[slot] menu",table:{type:{summary:"scale-menu-flyout-item"}},description:"Used for adding extra menu items within the settings menu. Note hideMenu must be false",control:{type:null}},slotDefault:{name:"[slot] default",table:{type:{summary:"scale-button"}},description:"Used for adding elements into the top section between the heading and the settings menu",control:{type:null}}},includeStories:["standard","actionsCell","checkboxCell","emailCell","dateCell","graphCell","htmlCell","linkCell","numberCell","selectCell","tagsCell","telephoneCell","textCell","freezeHeader","heading","hideExtras","numbered","pagination","selectionExport","columnStretch","showMore"]},mdxStoryNameToKey={Standard:"standard","Actions Cell":"actionsCell","Checkbox Cell":"checkboxCell","Email Cell":"emailCell","Date Cell":"dateCell","Graph Cell":"graphCell","HTML Cell":"htmlCell","Link Cell":"linkCell","Number Cell":"numberCell","Select Cell":"selectCell","Tags Cell":"tagsCell","Telephone Cell":"telephoneCell","Text Cell":"textCell","Freeze Header":"freezeHeader",Heading:"heading","Hide Extras":"hideExtras",Numbered:"numbered",Pagination:"pagination","Selection Export":"selectionExport","Column Stretch":"columnStretch","Show More":"showMore"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/date-picker/DatePicker.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return DatePicker_stories_Template})),__webpack_require__.d(__webpack_exports__,"RangeTemplate",(function(){return DatePicker_stories_RangeTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"withError",(function(){return withError})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"localization",(function(){return localization})),__webpack_require__.d(__webpack_exports__,"dateRangePicker",(function(){return dateRangePicker}));__webpack_require__("../../node_modules/core-js/modules/es.string.match.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),date_picker_ScaleDatePickervue_type_script_lang_js_={props:{name:{type:String},identifier:{type:String},role:{type:String},direction:{type:String},required:{type:Boolean},min:{type:String},max:{type:String},firstDayOfWeek:{type:String},localization:{type:Object},dateAdapter:{type:Object},value:{type:String},label:{type:String},helperText:{type:String},invalid:{type:Boolean},disabled:{type:Boolean},popupTitle:{type:String},styles:{type:String},placeholder:{type:String},size:{type:String}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},scaleFocus:function scaleFocus($event){Object(addon_actions_dist_esm.action)("scaleFocus"),this.$emit("scaleFocus",$event)},"scale-focus":function scaleFocus($event){Object(addon_actions_dist_esm.action)("scale-focus"),this.$emit("scale-focus",$event)},scaleBlur:function scaleBlur($event){Object(addon_actions_dist_esm.action)("scaleBlur"),this.$emit("scaleBlur",$event)},"scale-blur":function scaleBlur($event){Object(addon_actions_dist_esm.action)("scale-blur"),this.$emit("scale-blur",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(date_picker_ScaleDatePickervue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-date-picker",{attrs:{name:_vm.name,identifier:_vm.identifier,role:_vm.role,direction:_vm.direction,required:_vm.required,min:_vm.min,max:_vm.max,"first-day-of-week":_vm.firstDayOfWeek,localization:_vm.localization,"date-adapter":_vm.dateAdapter,value:_vm.value,disabled:_vm.disabled,size:_vm.size,label:_vm.label,"helper-text":_vm.helperText,invalid:_vm.invalid,"popup-title":_vm.popupTitle,placeholder:_vm.placeholder,styles:_vm.styles},on:{scaleChange:_vm.scaleChange,scaleFocus:_vm.scaleFocus,scaleBlur:_vm.scaleBlur}})}),[],!1,null,null,null).exports;var ScaleDatePicker=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleDatePicker",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"identifier",type:{name:"string"}},{name:"role",type:{name:"string"}},{name:"direction",type:{name:"string"}},{name:"required",type:{name:"boolean"}},{name:"min",type:{name:"string"}},{name:"max",type:{name:"string"}},{name:"firstDayOfWeek",type:{name:"string"}},{name:"localization",type:{name:"object"}},{name:"dateAdapter",type:{name:"object"}},{name:"value",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"disabled",type:{name:"boolean"}},{name:"popupTitle",type:{name:"string"}},{name:"styles",type:{name:"string"}},{name:"placeholder",type:{name:"string"}},{name:"size",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}},{name:"scaleFocus",type:{names:["undefined"]}},{name:"scale-focus",type:{names:["undefined"]}},{name:"scaleBlur",type:{names:["undefined"]}},{name:"scale-blur",type:{names:["undefined"]}}]};var DatePicker_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleDatePicker:ScaleDatePicker},props:ScaleDatePicker.props,template:'\n    <div style="height: 500px;">\n        <scale-date-picker\n            ref="picker"\n            :name="name"\n            :identifier="identifier"\n            :role="role"\n            :direction="direction"\n            :required="required"\n            :min="min"\n            :max="max"\n            :first-day-of-week="firstDayOfWeek"\n            :localization="localization"\n            :date-adapter="dateAdapter"\n            :value="value"\n            :disabled="disabled"\n            :label="label"\n            :helper-text="helperText"\n            :invalid="invalid"\n            :placeholder="placeholder"\n            @scaleChange="scaleChange"\n            @scale-change="scale-change"\n            @scaleFocus="scaleFocus"\n            @scale-focus="scale-focus"\n            @scaleBlur="scaleBlur"\n            @scale-blur="scale-blur"\n            ></scale-date-picker>\n    </div>\n  ',mounted:function mounted(){var DATE_FORMAT=/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;"de"===args.localization&&(this.$refs.picker.$el.dateAdapter={parse:function parse(){var value=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",createDate=arguments.length>1?arguments[1]:void 0,matches=value.match(DATE_FORMAT);if(matches)return createDate(matches[3],matches[2],matches[1])},format:function format(date){return date.getDate()+"."+(date.getMonth()+1)+"."+date.getFullYear()}},this.$refs.picker.$el.localization={buttonLabel:"Datum wählen",placeholder:"TT.MM.JJJJ",selectedDateMessage:"Gewähltes Datum",prevMonthLabel:"Vorheriger Monat",nextMonthLabel:"Nächster Monat",monthSelectLabel:"Monat",yearSelectLabel:"Jahr",closeLabel:"Fenster schließen",keyboardInstruction:"Sie können mit den Pfeiltasten vor und zurück navigieren",calendarHeading:"Datum wählen",dayNames:["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],monthNames:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],monthNamesShort:["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"],today:"heute",locale:"de-DE"})},methods:{scaleChange:function scaleChange(){Object(addon_actions_dist_esm.action)("scaleChange")()},scaleFocus:function scaleFocus(){Object(addon_actions_dist_esm.action)("scaleFocus")()},scaleBlur:function scaleBlur(){Object(addon_actions_dist_esm.action)("scaleBlur")()}}}},DatePicker_stories_RangeTemplate=function RangeTemplate(args,_ref2){_ref2.argTypes;return{components:{ScaleDatePicker:ScaleDatePicker},template:'\n    <div style="height: 500px;">\n        <scale-date-picker\n            ref="start"\n            identifier="start"\n            label="Start"\n            style="margin-right: 8px;"\n            :value="$data.start"\n            :max="$data.end"\n            @scaleChange="scaleChangeStart"\n        ></scale-date-picker>\n        <scale-date-picker\n            ref="end"\n            identifier="end"\n            label="End"\n            :value="$data.end"\n            :min="$data.start"\n            @scaleChange="scaleChangeEnd"\n        ></scale-date-picker>\n    </div>\n  ',methods:{scaleChangeStart:function scaleChangeStart(e){},scaleChangeEnd:function scaleChangeEnd(e){}},data:function data(){return{start:"",end:""}}}},layoutProps={Template:DatePicker_stories_Template,RangeTemplate:DatePicker_stories_RangeTemplate};function MDXContent(_ref3){var components=_ref3.components,props=_objectWithoutProperties(_ref3,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Date Picker",component:ScaleDatePicker,argTypes:{size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Date Picker"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{value:"2020-12-31",label:"Standard",placeholder:"Select date"},mdxType:"Story"},DatePicker_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",icon:"SVG-PATH",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-date-picker\n  label="Standard"\n  value="2020-12-31"\n  placeholder="Select date"\n  @scaleChange="handleChange"\n  @scaleFocus="handleFocus"\n  @scaleBlur="handleBlur"\n></scale-date-picker>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"duet-date-picker {\n  --duet-color-primary: var(--telekom-color-primary-standard);\n  --duet-color-text: var(--telekom-color-text-and-icon-standard);\n  --duet-color-overlay: var(--telekom-color-background-surface);\n  --duet-font: var(--telekom-typography-font-family-sans);\n  --duet-font-normal: var(--telekom-typography-font-weight-regular);\n  --duet-font-bold: var(--telekom-typography-font-weight-medium);\n  --duet-color-placeholder: var(--telekom-color-ui-regular);\n  --duet-radius: var(--telekom-radius-standard);\n  --duet-radius-toggle-focus: 6px;\n  --duet-color-text-active: var(--telekom-color-text-and-icon-white-standard);\n  --duet-color-button: var(--telekom-color-background-surface);\n  --duet-color-surface: var(--telekom-color-background-surface);\n  --duet-z-index: 600;\n  --duet-z-index-toggle: 2;\n\n  --spacing-x: var(--telekom-spacing-composition-space-05);\n\n  --spacing-heading: 0 0 var(--telekom-spacing-composition-space-06) 0;\n  --font-size-heading: var(--telekom-typography-font-size-body);\n  --radius-day: var(--telekom-radius-standard);\n  --font-size-day: var(--telekom-typography-font-size-body);\n  --font-size-table-header: var(--telekom-typography-font-size-caption);\n  --font-weight-table-header: var(--telekom-typography-font-weight-extra-bold);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n\n  --z-index-label: 10;\n}\n")),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{value:"2020-12-31",label:"Helper Text",helperText:"Make sure to fill this"},mdxType:"Story"},DatePicker_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-date-picker\n  helperText="Make sure to fill this"\n  label="Helper Text"\n  value="2020-12-31"\n></scale-date-picker>\n')),Object(esm.b)("h2",{id:"with-error"},"With Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Error",args:{label:"With Error",invalid:!0,helperText:"something is wrong",placeholder:"select date"},mdxType:"Story"},DatePicker_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-date-picker\n  label="With Error"\n  helper-text="something is wrong"\n  invalid\n  value="2020-12-31"\n  placeholder: \'select date\'\n></scale-date-picker>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",disabled:!0},mdxType:"Story"},DatePicker_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-date-picker label="Disabled" disabled></scale-date-picker>\n')),Object(esm.b)("h2",{id:"localization"},"Localization"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Localization",args:{label:"Localization",localization:"de"},mdxType:"Story"},DatePicker_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-date-picker label=\"Localization\"></scale-date-picker>\n\n<script>\n  const picker = document.querySelector('scale-date-picker');\n  picker.localization = {\n    buttonLabel: 'Datum wählen',\n    placeholder: 'TT.MM.JJJJ',\n    selectedDateMessage: 'Gewähltes Datum',\n    prevMonthLabel: 'Vorheriger Monat',\n    nextMonthLabel: 'Nächster Monat',\n    monthSelectLabel: 'Monat',\n    yearSelectLabel: 'Jahr',\n    closeLabel: 'Fenster schließen',\n    keyboardInstruction:\n      'Sie können mit den Pfeiltasten vor und zurück navigieren',\n    calendarHeading: 'Datum wählen',\n    dayNames: [\n      'Sonntag',\n      'Montag',\n      'Dienstag',\n      'Mittwoch',\n      'Donnerstag',\n      'Freitag',\n      'Samstag',\n    ],\n    monthNames: [\n      'Januar',\n      'Februar',\n      'März',\n      'April',\n      'Mai',\n      'Juni',\n      'Juli',\n      'August',\n      'September',\n      'Oktober',\n      'November',\n      'Dezember',\n    ],\n    monthNamesShort: [\n      'Jan',\n      'Feb',\n      'Mär',\n      'Apr',\n      'Mai',\n      'Jun',\n      'Jul',\n      'Aug',\n      'Sep',\n      'Okt',\n      'Nov',\n      'Dez',\n    ],\n    today: 'heute',\n    locale: 'de-DE',\n  };\n\n  const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n  picker.dateAdapter = {\n    parse(value = '', createDate) {\n      const matches = value.match(DATE_FORMAT);\n      if (matches) {\n        return createDate(matches[3], matches[2], matches[1]);\n      }\n    },\n    format(date) {\n      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n    },\n  };\n<\/script>\n")),Object(esm.b)("h2",{id:"date-range-picker"},"Date Range Picker"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Date Range Picker",mdxType:"Story"},DatePicker_stories_RangeTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-js"},'const RangeTemplate = (args, { argTypes }) => ({\n  components: { ScaleDatePicker },\n  template: `\n    <div style="height: 500px; display: inline-flex;">\n        <scale-date-picker\n            ref="start"\n            identifier="start"\n            label="Start"\n            style="margin-right: 8px;"\n            :value="$data.start"\n            :max="$data.end"\n            @scaleChange="scaleChangeStart"\n        ></scale-date-picker>\n        <scale-date-picker\n            ref="end"\n            identifier="end"\n            label="End"\n            :value="$data.end"\n            :min="$data.start"\n            @scaleChange="scaleChangeEnd"\n        ></scale-date-picker>\n    </div>\n  `,\n  //  optional: open enddate picker automatically after a custom timeout\n  //     methods: {\n  //     scaleChangeStart: function(e) {\n  //         this.$data.start = e.detail.value;\n  //         setTimeout(() => {\n  //             if(!this.$data.end) {\n  //                 this.$refs.end.$el.show()\n  //             }\n  //         }, 1000)\n  //     },\n  //     scaleChangeEnd: function(e) {\n  //         this.$data.end = e.detail.value;\n  //     },\n  //   },\n  //   data() {\n  //     return {\n  //         start: \'\',\n  //         end: \'\'\n  //     }\n  //   },\n});\n')),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-date-picker label=\"Start\" identifier=\"startDate\"></scale-date-picker>\n\n<scale-date-picker label=\"End\" identifier=\"endDate\"></scale-date-picker>\n\n<script>\n  const startPicker = document.getElementById('startDate');\n  const endPicker = document.getElementById('startDate');\n  let startDate, endDate;\n\n  // When the start date picker is changed, set end date's min to equal date\n  startPicker.addEventListener('duetChange', function (e) {\n    startDate = e.detail.valueAsDate;\n    endPicker.min = e.detail.value;\n\n    if (!endDate) {\n      endPicker.show();\n    }\n  });\n\n  // When the end date picker is changed, set start date's max to equal date\n  endPicker.addEventListener('duetChange', function (e) {\n    endDate = e.detail.valueAsDate;\n    startPicker.max = e.detail.value;\n  });\n<\/script>\n")))}MDXContent.isMDXComponent=!0;var standard=DatePicker_stories_Template.bind({});standard.storyName="Standard",standard.args={value:"2020-12-31",label:"Standard",placeholder:"Select date"},standard.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  props: ScaleDatePicker.props,\n  template: `\n    <div style=\"height: 500px;\">\n        <scale-date-picker\n            ref=\"picker\"\n            :name=\"name\"\n            :identifier=\"identifier\"\n            :role=\"role\"\n            :direction=\"direction\"\n            :required=\"required\"\n            :min=\"min\"\n            :max=\"max\"\n            :first-day-of-week=\"firstDayOfWeek\"\n            :localization=\"localization\"\n            :date-adapter=\"dateAdapter\"\n            :value=\"value\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :helper-text=\"helperText\"\n            :invalid=\"invalid\"\n            :placeholder=\"placeholder\"\n            @scaleChange=\"scaleChange\"\n            @scale-change=\"scale-change\"\n            @scaleFocus=\"scaleFocus\"\n            @scale-focus=\"scale-focus\"\n            @scaleBlur=\"scaleBlur\"\n            @scale-blur=\"scale-blur\"\n            ></scale-date-picker>\n    </div>\n  `,\n\n  mounted() {\n    const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n\n    if (args.localization === 'de') {\n      this.$refs.picker.$el.dateAdapter = {\n        parse(value = '', createDate) {\n          const matches = value.match(DATE_FORMAT);\n\n          if (matches) {\n            return createDate(matches[3], matches[2], matches[1]);\n          }\n        },\n\n        format(date) {\n          return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n        }\n\n      };\n      this.$refs.picker.$el.localization = {\n        buttonLabel: 'Datum wählen',\n        placeholder: 'TT.MM.JJJJ',\n        selectedDateMessage: 'Gewähltes Datum',\n        prevMonthLabel: 'Vorheriger Monat',\n        nextMonthLabel: 'Nächster Monat',\n        monthSelectLabel: 'Monat',\n        yearSelectLabel: 'Jahr',\n        closeLabel: 'Fenster schließen',\n        keyboardInstruction: 'Sie können mit den Pfeiltasten vor und zurück navigieren',\n        calendarHeading: 'Datum wählen',\n        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],\n        monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],\n        monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],\n        today: 'heute',\n        locale: 'de-DE'\n      };\n    }\n  },\n\n  methods: {\n    scaleChange: function () {\n      action('scaleChange')();\n    },\n    scaleFocus: function () {\n      action('scaleFocus')();\n    },\n    scaleBlur: function () {\n      action('scaleBlur')();\n    }\n  }\n})"}};var helperText=DatePicker_stories_Template.bind({});helperText.storyName="Helper Text",helperText.args={value:"2020-12-31",label:"Helper Text",helperText:"Make sure to fill this"},helperText.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  props: ScaleDatePicker.props,\n  template: `\n    <div style=\"height: 500px;\">\n        <scale-date-picker\n            ref=\"picker\"\n            :name=\"name\"\n            :identifier=\"identifier\"\n            :role=\"role\"\n            :direction=\"direction\"\n            :required=\"required\"\n            :min=\"min\"\n            :max=\"max\"\n            :first-day-of-week=\"firstDayOfWeek\"\n            :localization=\"localization\"\n            :date-adapter=\"dateAdapter\"\n            :value=\"value\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :helper-text=\"helperText\"\n            :invalid=\"invalid\"\n            :placeholder=\"placeholder\"\n            @scaleChange=\"scaleChange\"\n            @scale-change=\"scale-change\"\n            @scaleFocus=\"scaleFocus\"\n            @scale-focus=\"scale-focus\"\n            @scaleBlur=\"scaleBlur\"\n            @scale-blur=\"scale-blur\"\n            ></scale-date-picker>\n    </div>\n  `,\n\n  mounted() {\n    const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n\n    if (args.localization === 'de') {\n      this.$refs.picker.$el.dateAdapter = {\n        parse(value = '', createDate) {\n          const matches = value.match(DATE_FORMAT);\n\n          if (matches) {\n            return createDate(matches[3], matches[2], matches[1]);\n          }\n        },\n\n        format(date) {\n          return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n        }\n\n      };\n      this.$refs.picker.$el.localization = {\n        buttonLabel: 'Datum wählen',\n        placeholder: 'TT.MM.JJJJ',\n        selectedDateMessage: 'Gewähltes Datum',\n        prevMonthLabel: 'Vorheriger Monat',\n        nextMonthLabel: 'Nächster Monat',\n        monthSelectLabel: 'Monat',\n        yearSelectLabel: 'Jahr',\n        closeLabel: 'Fenster schließen',\n        keyboardInstruction: 'Sie können mit den Pfeiltasten vor und zurück navigieren',\n        calendarHeading: 'Datum wählen',\n        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],\n        monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],\n        monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],\n        today: 'heute',\n        locale: 'de-DE'\n      };\n    }\n  },\n\n  methods: {\n    scaleChange: function () {\n      action('scaleChange')();\n    },\n    scaleFocus: function () {\n      action('scaleFocus')();\n    },\n    scaleBlur: function () {\n      action('scaleBlur')();\n    }\n  }\n})"}};var withError=DatePicker_stories_Template.bind({});withError.storyName="With Error",withError.args={label:"With Error",invalid:!0,helperText:"something is wrong",placeholder:"select date"},withError.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  props: ScaleDatePicker.props,\n  template: `\n    <div style=\"height: 500px;\">\n        <scale-date-picker\n            ref=\"picker\"\n            :name=\"name\"\n            :identifier=\"identifier\"\n            :role=\"role\"\n            :direction=\"direction\"\n            :required=\"required\"\n            :min=\"min\"\n            :max=\"max\"\n            :first-day-of-week=\"firstDayOfWeek\"\n            :localization=\"localization\"\n            :date-adapter=\"dateAdapter\"\n            :value=\"value\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :helper-text=\"helperText\"\n            :invalid=\"invalid\"\n            :placeholder=\"placeholder\"\n            @scaleChange=\"scaleChange\"\n            @scale-change=\"scale-change\"\n            @scaleFocus=\"scaleFocus\"\n            @scale-focus=\"scale-focus\"\n            @scaleBlur=\"scaleBlur\"\n            @scale-blur=\"scale-blur\"\n            ></scale-date-picker>\n    </div>\n  `,\n\n  mounted() {\n    const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n\n    if (args.localization === 'de') {\n      this.$refs.picker.$el.dateAdapter = {\n        parse(value = '', createDate) {\n          const matches = value.match(DATE_FORMAT);\n\n          if (matches) {\n            return createDate(matches[3], matches[2], matches[1]);\n          }\n        },\n\n        format(date) {\n          return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n        }\n\n      };\n      this.$refs.picker.$el.localization = {\n        buttonLabel: 'Datum wählen',\n        placeholder: 'TT.MM.JJJJ',\n        selectedDateMessage: 'Gewähltes Datum',\n        prevMonthLabel: 'Vorheriger Monat',\n        nextMonthLabel: 'Nächster Monat',\n        monthSelectLabel: 'Monat',\n        yearSelectLabel: 'Jahr',\n        closeLabel: 'Fenster schließen',\n        keyboardInstruction: 'Sie können mit den Pfeiltasten vor und zurück navigieren',\n        calendarHeading: 'Datum wählen',\n        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],\n        monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],\n        monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],\n        today: 'heute',\n        locale: 'de-DE'\n      };\n    }\n  },\n\n  methods: {\n    scaleChange: function () {\n      action('scaleChange')();\n    },\n    scaleFocus: function () {\n      action('scaleFocus')();\n    },\n    scaleBlur: function () {\n      action('scaleBlur')();\n    }\n  }\n})"}};var disabled=DatePicker_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",disabled:!0},disabled.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  props: ScaleDatePicker.props,\n  template: `\n    <div style=\"height: 500px;\">\n        <scale-date-picker\n            ref=\"picker\"\n            :name=\"name\"\n            :identifier=\"identifier\"\n            :role=\"role\"\n            :direction=\"direction\"\n            :required=\"required\"\n            :min=\"min\"\n            :max=\"max\"\n            :first-day-of-week=\"firstDayOfWeek\"\n            :localization=\"localization\"\n            :date-adapter=\"dateAdapter\"\n            :value=\"value\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :helper-text=\"helperText\"\n            :invalid=\"invalid\"\n            :placeholder=\"placeholder\"\n            @scaleChange=\"scaleChange\"\n            @scale-change=\"scale-change\"\n            @scaleFocus=\"scaleFocus\"\n            @scale-focus=\"scale-focus\"\n            @scaleBlur=\"scaleBlur\"\n            @scale-blur=\"scale-blur\"\n            ></scale-date-picker>\n    </div>\n  `,\n\n  mounted() {\n    const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n\n    if (args.localization === 'de') {\n      this.$refs.picker.$el.dateAdapter = {\n        parse(value = '', createDate) {\n          const matches = value.match(DATE_FORMAT);\n\n          if (matches) {\n            return createDate(matches[3], matches[2], matches[1]);\n          }\n        },\n\n        format(date) {\n          return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n        }\n\n      };\n      this.$refs.picker.$el.localization = {\n        buttonLabel: 'Datum wählen',\n        placeholder: 'TT.MM.JJJJ',\n        selectedDateMessage: 'Gewähltes Datum',\n        prevMonthLabel: 'Vorheriger Monat',\n        nextMonthLabel: 'Nächster Monat',\n        monthSelectLabel: 'Monat',\n        yearSelectLabel: 'Jahr',\n        closeLabel: 'Fenster schließen',\n        keyboardInstruction: 'Sie können mit den Pfeiltasten vor und zurück navigieren',\n        calendarHeading: 'Datum wählen',\n        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],\n        monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],\n        monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],\n        today: 'heute',\n        locale: 'de-DE'\n      };\n    }\n  },\n\n  methods: {\n    scaleChange: function () {\n      action('scaleChange')();\n    },\n    scaleFocus: function () {\n      action('scaleFocus')();\n    },\n    scaleBlur: function () {\n      action('scaleBlur')();\n    }\n  }\n})"}};var localization=DatePicker_stories_Template.bind({});localization.storyName="Localization",localization.args={label:"Localization",localization:"de"},localization.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  props: ScaleDatePicker.props,\n  template: `\n    <div style=\"height: 500px;\">\n        <scale-date-picker\n            ref=\"picker\"\n            :name=\"name\"\n            :identifier=\"identifier\"\n            :role=\"role\"\n            :direction=\"direction\"\n            :required=\"required\"\n            :min=\"min\"\n            :max=\"max\"\n            :first-day-of-week=\"firstDayOfWeek\"\n            :localization=\"localization\"\n            :date-adapter=\"dateAdapter\"\n            :value=\"value\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :helper-text=\"helperText\"\n            :invalid=\"invalid\"\n            :placeholder=\"placeholder\"\n            @scaleChange=\"scaleChange\"\n            @scale-change=\"scale-change\"\n            @scaleFocus=\"scaleFocus\"\n            @scale-focus=\"scale-focus\"\n            @scaleBlur=\"scaleBlur\"\n            @scale-blur=\"scale-blur\"\n            ></scale-date-picker>\n    </div>\n  `,\n\n  mounted() {\n    const DATE_FORMAT = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;\n\n    if (args.localization === 'de') {\n      this.$refs.picker.$el.dateAdapter = {\n        parse(value = '', createDate) {\n          const matches = value.match(DATE_FORMAT);\n\n          if (matches) {\n            return createDate(matches[3], matches[2], matches[1]);\n          }\n        },\n\n        format(date) {\n          return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;\n        }\n\n      };\n      this.$refs.picker.$el.localization = {\n        buttonLabel: 'Datum wählen',\n        placeholder: 'TT.MM.JJJJ',\n        selectedDateMessage: 'Gewähltes Datum',\n        prevMonthLabel: 'Vorheriger Monat',\n        nextMonthLabel: 'Nächster Monat',\n        monthSelectLabel: 'Monat',\n        yearSelectLabel: 'Jahr',\n        closeLabel: 'Fenster schließen',\n        keyboardInstruction: 'Sie können mit den Pfeiltasten vor und zurück navigieren',\n        calendarHeading: 'Datum wählen',\n        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],\n        monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],\n        monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],\n        today: 'heute',\n        locale: 'de-DE'\n      };\n    }\n  },\n\n  methods: {\n    scaleChange: function () {\n      action('scaleChange')();\n    },\n    scaleFocus: function () {\n      action('scaleFocus')();\n    },\n    scaleBlur: function () {\n      action('scaleBlur')();\n    }\n  }\n})"}};var dateRangePicker=DatePicker_stories_RangeTemplate.bind({});dateRangePicker.storyName="Date Range Picker",dateRangePicker.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDatePicker\n  },\n  template: `\n    <div style="height: 500px;">\n        <scale-date-picker\n            ref="start"\n            identifier="start"\n            label="Start"\n            style="margin-right: 8px;"\n            :value="$data.start"\n            :max="$data.end"\n            @scaleChange="scaleChangeStart"\n        ></scale-date-picker>\n        <scale-date-picker\n            ref="end"\n            identifier="end"\n            label="End"\n            :value="$data.end"\n            :min="$data.start"\n            @scaleChange="scaleChangeEnd"\n        ></scale-date-picker>\n    </div>\n  `,\n  methods: {\n    scaleChangeStart: function (e) {\n      /* some custom functionality e.g.\n        this.$data.start = e.detail.value;\n        setTimeout(() => {\n            if(!this.$data.end) {\n                this.$refs.end.$el.show()\n            }\n        }, 1000) */\n    },\n    scaleChangeEnd: function (e) {\n      /* some custom functionality e.g.\n        this.$data.end = e.detail.value;\n        */\n    }\n  },\n\n  data() {\n    return {\n      start: \'\',\n      end: \'\'\n    };\n  }\n\n})'}};var componentMeta={title:"Components/Date Picker",component:ScaleDatePicker,argTypes:{size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},includeStories:["standard","helperText","withError","disabled","localization","dateRangePicker"]},mdxStoryNameToKey={Standard:"standard","Helper Text":"helperText","With Error":"withError",Disabled:"disabled",Localization:"localization","Date Range Picker":"dateRangePicker"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/divider/Divider.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ICON",(function(){return ICON})),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Divider_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"vertical",(function(){return vertical}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),divider_ScaleDividervue_type_script_lang_js_={props:{vertical:Boolean,styles:String}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(divider_ScaleDividervue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-divider",{attrs:{vertical:this.vertical,styles:this.styles}})}),[],!1,null,null,null).exports;var ScaleDivider=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleDivider",description:"",tags:{},props:[{name:"vertical",type:{name:"boolean"}},{name:"styles",type:{name:"string"}}]};var ICON="M16.471,8.321 L12.613594,0.502886112 L8.755,8.321 L0.126435258,9.57533801 L6.37,15.66 L4.89610548,24.2548735 L12.613,20.197 L20.3310826,24.2548735 L18.856,15.66 L25.1007528,9.57533801 L16.471,8.321 Z M9.41891527,9.23556376 L12.613,2.761 L15.8082728,9.23556376 L22.951,10.273 L17.7826928,15.3122039 L19.003,22.427 L12.613594,19.067774 L6.223,22.427 L7.44449521,15.3122039 L2.275,10.273 L9.41891527,9.23556376 Z",Divider_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleDivider:ScaleDivider},props:ScaleDivider.props,template:'\n    <scale-divider\n      :vertical="vertical"\n      :styles="styles"\n    >\n    </scale-divider>\n  '}},layoutProps={ICON:ICON,Template:Divider_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Divider",component:ScaleDivider,argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Divider"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},Divider_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 100%;\n  --height: 100%;\n  --spacing: var(--telekom-spacing-composition-space-05);\n  --color: var(--telekom-color-ui-faint);\n  --border-width: var(--telekom-spacing-composition-space-01);\n  --min-height-vertical: var(--telekom-spacing-composition-space-08);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"vertical"},"Vertical"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Vertical",args:{vertical:!0,styles:"\n        .divider--vertical {\n          height: 150px !important\n        }"},mdxType:"Story"},Divider_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-divider vertical></scale-divider>\n")))}MDXContent.isMDXComponent=!0;var standard=Divider_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDivider\n  },\n  props: ScaleDivider.props,\n  template: `\n    <scale-divider\n      :vertical="vertical"\n      :styles="styles"\n    >\n    </scale-divider>\n  `\n})'}};var vertical=Divider_stories_Template.bind({});vertical.storyName="Vertical",vertical.args={vertical:!0,styles:"\n        .divider--vertical {\n          height: 150px !important\n        }"},vertical.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDivider\n  },\n  props: ScaleDivider.props,\n  template: `\n    <scale-divider\n      :vertical="vertical"\n      :styles="styles"\n    >\n    </scale-divider>\n  `\n})'}};var componentMeta={title:"Components/Divider",component:ScaleDivider,argTypes:{},includeStories:["standard","vertical"]},mdxStoryNameToKey={Standard:"standard",Vertical:"vertical"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/dropdown-select/DropdownSelect.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return DropdownSelect_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"disabledItems",(function(){return disabledItems})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),dropdown_select_ScaleDropdownSelectvue_type_script_lang_js_={name:"Dropdown Select",props:{label:{type:String},helperText:{type:String},invalid:{type:Boolean},disabled:{type:Boolean},size:{type:String},value:{type:String},variant:{type:String},comboboxId:{type:String},hideLabelVisually:{type:Boolean,default:!1},floatingStrategy:{type:String}},methods:{"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},"scale-focus":function scaleFocus($event){Object(addon_actions_dist_esm.action)("scale-focus"),this.$emit("scale-focus",$event)},"scale-blur":function scaleBlur($event){Object(addon_actions_dist_esm.action)("scale-blur"),this.$emit("scale-blur",$event)},"scale-keydown":function scaleKeydown($event){Object(addon_actions_dist_esm.action)("scale-keydown"),this.$emit("scale-keydown",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(dropdown_select_ScaleDropdownSelectvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-dropdown-select",{attrs:{label:_vm.label,"helper-text":_vm.helperText,variant:_vm.variant,invalid:_vm.invalid,disabled:_vm.disabled,size:_vm.size,value:_vm.value,"combobox-id":_vm.comboboxId,"hide-label-visually":_vm.hideLabelVisually,"floating-strategy":_vm.floatingStrategy},on:{scaleChange:function($event){},scaleFocus:function($event){},scaleBlur:function($event){},scaleKeyDown:function($event){}}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleDropdownSelect=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={displayName:"Dropdown Select",exportName:"default",description:"",tags:{},props:[{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"disabled",type:{name:"boolean"}},{name:"size",type:{name:"string"}},{name:"value",type:{name:"string"}},{name:"variant",type:{name:"string"}},{name:"comboboxId",type:{name:"string"}},{name:"hideLabelVisually",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"floatingStrategy",type:{name:"string"}}],events:[{name:"scale-change",type:{names:["undefined"]}},{name:"scale-focus",type:{names:["undefined"]}},{name:"scale-blur",type:{names:["undefined"]}},{name:"scale-keydown",type:{names:["undefined"]}}],slots:[{name:"default"}]};var dropdown_select_ScaleDropdownSelectItemvue_type_script_lang_js_={name:"Dropdown Select Item",props:{value:{type:String},disabled:{type:Boolean},selected:{type:Boolean},focused:{type:Boolean}}};const ScaleDropdownSelectItem_vuedocgen_export_0=Object(componentNormalizer.a)(dropdown_select_ScaleDropdownSelectItemvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-dropdown-select-item",{attrs:{value:_vm.value,disabled:_vm.disabled,selected:_vm.selected,focused:_vm.focused}},[_vm._t("prefix"),_vm._v(" "),_vm._t("default"),_vm._v(" "),_vm._t("suffix")],2)}),[],!1,null,null,null).exports;var ScaleDropdownSelectItem=ScaleDropdownSelectItem_vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}ScaleDropdownSelectItem_vuedocgen_export_0.__docgenInfo={displayName:"Dropdown Select Item",exportName:"default",description:"",tags:{},props:[{name:"value",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"selected",type:{name:"boolean"}},{name:"focused",type:{name:"boolean"}}],slots:[{name:"prefix"},{name:"default"},{name:"suffix"}]};var DropdownSelect_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleDropdownSelect:ScaleDropdownSelect},props:Object.assign({itemProps:{default:{}}},ScaleDropdownSelect.props),data:function data(){return{items:[{value:"caspar",label:"Caspar"},{value:"cedric",label:"Cedric"},{value:"cem",label:"Cem"}]}},template:'\n    <div style="min-height: 350px;">\n    <scale-dropdown-select\n        :label="label"\n        :helper-text="helperText"\n        :invalid="invalid"\n        :variant="variant"\n        :disabled="disabled"\n        :size="size"\n        :value="value"\n        :combobox-id="comboboxId"\n        :hide-label-visually="hideLabelVisually"\n        :floating-strategy="floatingStrategy"\n        @scaleChange="[\'scale-change\']"\n        @scaleFocus="[\'scale-focus\']"\n        @scaleBlur="[\'scale-blur\']"\n        @scaleKeyDown="[\'scale-keydown\']"\n    >\n      <scale-dropdown-select-item\n        v-for="(item, index) in items"\n        :key="index"\n        :value="item.value"\n        :disabled="itemProps[index]?.disabled"\n      >{{ item.label }}</scale-dropdown-select-item>\n</scale-dropdown-select>\n</div>\n  ',methods:{"scale-change":Object(addon_actions_dist_esm.action)("scale-change"),"scale-focus":Object(addon_actions_dist_esm.action)("scale-focus"),"scale-blur":Object(addon_actions_dist_esm.action)("scale-blur"),"scale-keydown":Object(addon_actions_dist_esm.action)("scale-keydown")}}},layoutProps={Template:DropdownSelect_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Dropdown Select",component:ScaleDropdownSelect,subcomponents:{"Dropdown Select Item":ScaleDropdownSelectItem},argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Dropdown Select"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Select",value:"caspar"},mdxType:"Story"},DropdownSelect_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown-select label="select">\n  <scale-dropdown-select-item value="caspar">Caspar</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cedric">Cedric</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cem">Cem</scale-dropdown-select-item>\n</scale-dropdown-select>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --font-weight: var(--telekom-typography-font-weight-bold);\n  --height: var(--telekom-spacing-composition-space-13);\n  --color: var(--telekom-color-text-and-icon-standard);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-disabled: none;\n  --background-hover: var(--telekom-color-ui-state-fill-hovered);\n  --border: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);\n  --border-color-hover: var(--telekom-color-ui-border-hovered);\n  --border-color-focus: var(--telekom-color-ui-border-hovered);\n  --border-color-disabled: var(--telekom-color-ui-border-disabled);\n  --border-invalid: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-hovered);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --spacing-x: var(--telekom-spacing-composition-space-05);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --radius: var(--telekom-radius-standard);\n  --spacing-x-for-helper-text: var(--telekom-spacing-composition-space-03);\n\n  /*combobox*/\n  --transition-combobox: var(--transition);\n  --background-combobox: var(--telekom-color-ui-state-fill-standard);\n  /*\n    18px 32px 4px 12px\n    (subtracting 1px from border)\n  */\n  --spacing-combobox: 1.125rem\n    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem\n    calc(0.75rem - var(--telekom-spacing-composition-space-01));\n\n  /*meta*/\n  --spacing-y-meta: var(--telekom-spacing-composition-space-03);\n  --color-meta: var(--telekom-color-text-and-icon-standard);\n\n  /*icon*/\n  --height-icon: 20px;\n  --color-icon: var(--telekom-color-text-and-icon-standard);\n  --color-icon-hover: var(--telekom-color-text-and-icon-standard);\n  --color-icon-active: var(--telekom-color-text-and-icon-standard);\n  --transition-icon: var(--transition);\n\n  /*label*/\n  --color-label: var(--telekom-color-text-and-icon-additional);\n  --z-index-label: var(--scl-z-index-10);\n  --transition-label: var(--transition);\n  --transform-label: translate(var(--spacing-x), 0.875rem);\n  --transform-label-animated: translate(\n    var(--spacing-x),\n    calc(0.25rem + var(--telekom-spacing-composition-space-01))\n  );\n\n  /*listbox*/\n  --background-listbox: var(--telekom-color-background-surface);\n  --box-shadow-listbox: 0 2px 4px 0 rgba(0, 0, 0, 0.1),\n    0 4px 16px 0 rgba(0, 0, 0, 0.1);\n  --max-height-listbox: 300px;\n  --z-index-listbox: 99;\n}\n\n")),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)("h3",{id:"whole-dropdown-select-disabled"},"Whole Dropdown Select disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",disabled:!0},mdxType:"Story"},DropdownSelect_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown-select label="Disabled" disabled>\n  <scale-dropdown-select-item value="caspar">Caspar</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cedric">Cedric</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cem">Cem</scale-dropdown-select-item>\n</scale-dropdown-select>\n')),Object(esm.b)("h3",{id:"individual-items-disabled"},"Individual items disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled items",args:{label:"Individual items disabled",itemProps:{0:{disabled:!0},1:{disabled:!0}}},mdxType:"Story"},DropdownSelect_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown-select label="Disabled items">\n  <scale-dropdown-select-item value="caspar" disabled>Caspar</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cedric" disabled>Cedric</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cem">Cem</scale-dropdown-select-item>\n</scale-dropdown-select>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{label:"Error",invalid:!0,helperText:"Something went wrong..."},mdxType:"Story"},DropdownSelect_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown-select\n  label="Error"\n  invalid\n  helper-text="Something went wrong..."\n>\n  <scale-dropdown-select-item value="caspar">Caspar</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cedric">Cedric</scale-dropdown-select-item>\n  <scale-dropdown-select-item value="cem">Cem</scale-dropdown-select-item>\n</scale-dropdown-select>\n')))}MDXContent.isMDXComponent=!0;var standard=DropdownSelect_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Select",value:"caspar"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropdownSelect\n  },\n  props: {\n    itemProps: {\n      default: {}\n    },\n    ...ScaleDropdownSelect.props\n  },\n\n  data() {\n    return {\n      items: [{\n        value: \'caspar\',\n        label: \'Caspar\'\n      }, {\n        value: \'cedric\',\n        label: \'Cedric\'\n      }, {\n        value: \'cem\',\n        label: \'Cem\'\n      }]\n    };\n  },\n\n  template: `\n    <div style="min-height: 350px;">\n    <scale-dropdown-select\n        :label="label"\n        :helper-text="helperText"\n        :invalid="invalid"\n        :variant="variant"\n        :disabled="disabled"\n        :size="size"\n        :value="value"\n        :combobox-id="comboboxId"\n        :hide-label-visually="hideLabelVisually"\n        :floating-strategy="floatingStrategy"\n        @scaleChange="[\'scale-change\']"\n        @scaleFocus="[\'scale-focus\']"\n        @scaleBlur="[\'scale-blur\']"\n        @scaleKeyDown="[\'scale-keydown\']"\n    >\n      <scale-dropdown-select-item\n        v-for="(item, index) in items"\n        :key="index"\n        :value="item.value"\n        :disabled="itemProps[index]?.disabled"\n      >{{ item.label }}</scale-dropdown-select-item>\n</scale-dropdown-select>\n</div>\n  `,\n  methods: {\n    \'scale-change\': action(\'scale-change\'),\n    \'scale-focus\': action(\'scale-focus\'),\n    \'scale-blur\': action(\'scale-blur\'),\n    \'scale-keydown\': action(\'scale-keydown\')\n  }\n})'}};var disabled=DropdownSelect_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropdownSelect\n  },\n  props: {\n    itemProps: {\n      default: {}\n    },\n    ...ScaleDropdownSelect.props\n  },\n\n  data() {\n    return {\n      items: [{\n        value: \'caspar\',\n        label: \'Caspar\'\n      }, {\n        value: \'cedric\',\n        label: \'Cedric\'\n      }, {\n        value: \'cem\',\n        label: \'Cem\'\n      }]\n    };\n  },\n\n  template: `\n    <div style="min-height: 350px;">\n    <scale-dropdown-select\n        :label="label"\n        :helper-text="helperText"\n        :invalid="invalid"\n        :variant="variant"\n        :disabled="disabled"\n        :size="size"\n        :value="value"\n        :combobox-id="comboboxId"\n        :hide-label-visually="hideLabelVisually"\n        :floating-strategy="floatingStrategy"\n        @scaleChange="[\'scale-change\']"\n        @scaleFocus="[\'scale-focus\']"\n        @scaleBlur="[\'scale-blur\']"\n        @scaleKeyDown="[\'scale-keydown\']"\n    >\n      <scale-dropdown-select-item\n        v-for="(item, index) in items"\n        :key="index"\n        :value="item.value"\n        :disabled="itemProps[index]?.disabled"\n      >{{ item.label }}</scale-dropdown-select-item>\n</scale-dropdown-select>\n</div>\n  `,\n  methods: {\n    \'scale-change\': action(\'scale-change\'),\n    \'scale-focus\': action(\'scale-focus\'),\n    \'scale-blur\': action(\'scale-blur\'),\n    \'scale-keydown\': action(\'scale-keydown\')\n  }\n})'}};var disabledItems=DropdownSelect_stories_Template.bind({});disabledItems.storyName="Disabled items",disabledItems.args={label:"Individual items disabled",itemProps:{0:{disabled:!0},1:{disabled:!0}}},disabledItems.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropdownSelect\n  },\n  props: {\n    itemProps: {\n      default: {}\n    },\n    ...ScaleDropdownSelect.props\n  },\n\n  data() {\n    return {\n      items: [{\n        value: \'caspar\',\n        label: \'Caspar\'\n      }, {\n        value: \'cedric\',\n        label: \'Cedric\'\n      }, {\n        value: \'cem\',\n        label: \'Cem\'\n      }]\n    };\n  },\n\n  template: `\n    <div style="min-height: 350px;">\n    <scale-dropdown-select\n        :label="label"\n        :helper-text="helperText"\n        :invalid="invalid"\n        :variant="variant"\n        :disabled="disabled"\n        :size="size"\n        :value="value"\n        :combobox-id="comboboxId"\n        :hide-label-visually="hideLabelVisually"\n        :floating-strategy="floatingStrategy"\n        @scaleChange="[\'scale-change\']"\n        @scaleFocus="[\'scale-focus\']"\n        @scaleBlur="[\'scale-blur\']"\n        @scaleKeyDown="[\'scale-keydown\']"\n    >\n      <scale-dropdown-select-item\n        v-for="(item, index) in items"\n        :key="index"\n        :value="item.value"\n        :disabled="itemProps[index]?.disabled"\n      >{{ item.label }}</scale-dropdown-select-item>\n</scale-dropdown-select>\n</div>\n  `,\n  methods: {\n    \'scale-change\': action(\'scale-change\'),\n    \'scale-focus\': action(\'scale-focus\'),\n    \'scale-blur\': action(\'scale-blur\'),\n    \'scale-keydown\': action(\'scale-keydown\')\n  }\n})'}};var error=DropdownSelect_stories_Template.bind({});error.storyName="Error",error.args={label:"Error",invalid:!0,helperText:"Something went wrong..."},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropdownSelect\n  },\n  props: {\n    itemProps: {\n      default: {}\n    },\n    ...ScaleDropdownSelect.props\n  },\n\n  data() {\n    return {\n      items: [{\n        value: \'caspar\',\n        label: \'Caspar\'\n      }, {\n        value: \'cedric\',\n        label: \'Cedric\'\n      }, {\n        value: \'cem\',\n        label: \'Cem\'\n      }]\n    };\n  },\n\n  template: `\n    <div style="min-height: 350px;">\n    <scale-dropdown-select\n        :label="label"\n        :helper-text="helperText"\n        :invalid="invalid"\n        :variant="variant"\n        :disabled="disabled"\n        :size="size"\n        :value="value"\n        :combobox-id="comboboxId"\n        :hide-label-visually="hideLabelVisually"\n        :floating-strategy="floatingStrategy"\n        @scaleChange="[\'scale-change\']"\n        @scaleFocus="[\'scale-focus\']"\n        @scaleBlur="[\'scale-blur\']"\n        @scaleKeyDown="[\'scale-keydown\']"\n    >\n      <scale-dropdown-select-item\n        v-for="(item, index) in items"\n        :key="index"\n        :value="item.value"\n        :disabled="itemProps[index]?.disabled"\n      >{{ item.label }}</scale-dropdown-select-item>\n</scale-dropdown-select>\n</div>\n  `,\n  methods: {\n    \'scale-change\': action(\'scale-change\'),\n    \'scale-focus\': action(\'scale-focus\'),\n    \'scale-blur\': action(\'scale-blur\'),\n    \'scale-keydown\': action(\'scale-keydown\')\n  }\n})'}};var componentMeta={title:"Components/Dropdown Select",component:ScaleDropdownSelect,subcomponents:{"Dropdown Select Item":ScaleDropdownSelectItem},argTypes:{},includeStories:["standard","disabled","disabledItems","error"]},mdxStoryNameToKey={Standard:"standard",Disabled:"disabled","Disabled items":"disabledItems",Error:"error"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/dropdown/DropDown.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return DropDown_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"warning",(function(){return warning})),__webpack_require__.d(__webpack_exports__,"withCustomIcon",(function(){return withCustomIcon}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),dropdown_ScaleDropDownvue_type_script_lang_js_={props:{name:{type:String},label:{type:String},helperText:{type:String},invalid:{type:Boolean},variant:{type:String},disabled:{type:Boolean},required:{type:Boolean},value:{type:String},inputId:{type:String},visibleSize:{type:Number},controlled:{type:Boolean},styles:{type:String},size:{type:String}},methods:{scaleInput:function scaleInput($event){Object(addon_actions_dist_esm.action)("scaleInput"),this.$emit("scaleInput",$event)},"scale-input":function scaleInput($event){Object(addon_actions_dist_esm.action)("scale-input"),this.$emit("scale-input",$event)},scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},scaleFocus:function scaleFocus($event){Object(addon_actions_dist_esm.action)("scaleFocus"),this.$emit("scaleFocus",$event)},"scale-focus":function scaleFocus($event){Object(addon_actions_dist_esm.action)("scale-focus"),this.$emit("scale-focus",$event)},scaleBlur:function scaleBlur($event){Object(addon_actions_dist_esm.action)("scaleBlur"),this.$emit("scaleBlur",$event)},"scale-blur":function scaleBlur($event){Object(addon_actions_dist_esm.action)("scale-blur"),this.$emit("scale-blur",$event)},scaleKeyDown:function scaleKeyDown($event){Object(addon_actions_dist_esm.action)("scaleKeyDown"),this.$emit("scaleKeyDown",$event)},"scale-keydown":function scaleKeydown($event){Object(addon_actions_dist_esm.action)("scale-keydown"),this.$emit("scale-keydown",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(dropdown_ScaleDropDownvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-dropdown",{attrs:{name:_vm.name,label:_vm.label,"helper-text":_vm.helperText,invalid:_vm.invalid,variant:_vm.variant,disabled:_vm.disabled,required:_vm.required,value:_vm.value,size:_vm.size,"input-id":_vm.inputId,"visible-size":_vm.visibleSize,controlled:_vm.controlled},on:{scaleInput:_vm.scaleInput,scaleChange:_vm.scaleChange,scaleFocus:_vm.scaleFocus,scaleBlur:_vm.scaleBlur,scaleKeyDown:_vm.scaleKeyDown}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleDropDown=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleDropDown",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"variant",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"required",type:{name:"boolean"}},{name:"value",type:{name:"string"}},{name:"inputId",type:{name:"string"}},{name:"visibleSize",type:{name:"number"}},{name:"controlled",type:{name:"boolean"}},{name:"styles",type:{name:"string"}},{name:"size",type:{name:"string"}}],events:[{name:"scaleInput",type:{names:["undefined"]}},{name:"scale-input",type:{names:["undefined"]}},{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}},{name:"scaleFocus",type:{names:["undefined"]}},{name:"scale-focus",type:{names:["undefined"]}},{name:"scaleBlur",type:{names:["undefined"]}},{name:"scale-blur",type:{names:["undefined"]}},{name:"scaleKeyDown",type:{names:["undefined"]}},{name:"scale-keydown",type:{names:["undefined"]}}],slots:[{name:"default"}]};var DropDown_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleDropDown:ScaleDropDown},props:ScaleDropDown.props,template:'\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  ',methods:{scaleChange:Object(addon_actions_dist_esm.action)("scaleChange"),scaleFocus:Object(addon_actions_dist_esm.action)("scaleFocus"),scaleBlur:Object(addon_actions_dist_esm.action)("scaleBlur"),scaleKeyDown:Object(addon_actions_dist_esm.action)("scaleKeyDown")}}},layoutProps={Template:DropDown_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Dropdown",component:ScaleDropDown,argTypes:{size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Dropdown"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Select"},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown label="select">\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n</scale-dropdown>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --font-weight: var(--telekom-typography-font-weight-bold);\n  --height: var(--telekom-spacing-composition-space-13);\n  --spacing-x: var(--telekom-spacing-composition-space-05);\n  --spacing-dropdown: 18px var(--telekom-spacing-composition-space-12) 5px\n    calc(var(--spacing-x) - 1px);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --radius: var(--telekom-radius-standard);\n  --border: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);\n  --border-danger: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-standard);\n  --border-success: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-success-standard);\n  --border-warning: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-warning-standard);\n  --border-color-hover: var(--telekom-color-ui-border-hovered);\n  --border-color-focus: var(--telekom-color-ui-border-hovered);\n  --border-color-disabled: var(--telekom-color-ui-border-disabled);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-disabled: none;\n  --color: var(--telekom-color-text-and-icon-standard);\n  --background-color: var(--telekom-color-ui-state-fill-standard);\n  --margin-bottom-helper-text: var(--telekom-spacing-composition-space-03);\n\n  /*input*/\n  --transition-input: var(--transition);\n  --font-size-input: var(--telekom-typography-font-size-body);\n\n  /*meta*/\n  --spacing-y-meta: var(--telekom-spacing-composition-space-03);\n  --color-meta: var(--telekom-color-text-and-icon-standard);\n\n  /*icon*/\n  --height-icon: var(--telekom-spacing-composition-space-07);\n  --color-icon: var(--telekom-color-text-and-icon-standard);\n  --color-icon-hover: var(--telekom-color-text-and-icon-standard);\n  --color-icon-active: var(--telekom-color-text-and-icon-standard);\n  --transition-icon: var(--transition);\n\n  /*label*/\n  --color-label: var(--telekom-color-text-and-icon-additional);\n  --z-index-label: var(--scl-z-index-10);\n  --transition-label: var(--transition);\n  --font-size-label: var(--telekom-typography-font-size-body);\n  --font-weight-label: var(--telekom-typography-font-weight-medium);\n  --font-size-label-focus: var(--telekom-typography-font-size-small);\n  --font-weight-label-focus: var(--telekom-typography-font-weight-bold);\n}\n")),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)("p",null,"Known issues: The dropdown is ready for use. The component in disabled state is displayed incorrectly with white background in Firefox 85.0.2 (64-bit) in HCM (high contrast mode).\nThe display error is on the browser side."),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",disabled:!0},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown label="Disabled" disabled>\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n</scale-dropdown>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{label:"Error",invalid:!0,helperText:"Something went wrong..."},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown label="Error" invalid helper-text="Something went wrong...">\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n</scale-dropdown>\n')),Object(esm.b)("h2",{id:"success"},"Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Success",args:{label:"Success",variant:"success",helperText:"Something went successful..."},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown\n  label="Success"\n  variant="success"\n  helper-text="Something went successful..."\n>\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n</scale-dropdown>\n')),Object(esm.b)("h2",{id:"warning"},"Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Warning",args:{label:"Warning",variant:"warning",helperText:"Something with warning..."},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown\n  label="Warning"\n  variant="warning"\n  helper-text="Something with warning..."\n>\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n</scale-dropdown>\n')),Object(esm.b)("h2",{id:"with-custom-icon"},"With Custom Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Custom Icon",args:{label:"With Custom Icon"},mdxType:"Story"},DropDown_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-dropdown label="With Custom Icon">\n  <option value="1">item 1</option>\n  <option value="2" selected>item 2</option>\n  <option value="3">item 3</option>\n  <scale-icon-content-calendar size="20" slot="icon"></scale-icon-content-calendar>\n</scale-dropdown>\n')))}MDXContent.isMDXComponent=!0;var standard=DropDown_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Select"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var disabled=DropDown_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var error=DropDown_stories_Template.bind({});error.storyName="Error",error.args={label:"Error",invalid:!0,helperText:"Something went wrong..."},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var success=DropDown_stories_Template.bind({});success.storyName="Success",success.args={label:"Success",variant:"success",helperText:"Something went successful..."},success.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var warning=DropDown_stories_Template.bind({});warning.storyName="Warning",warning.args={label:"Warning",variant:"warning",helperText:"Something with warning..."},warning.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var withCustomIcon=DropDown_stories_Template.bind({});withCustomIcon.storyName="With Custom Icon",withCustomIcon.args={label:"With Custom Icon"},withCustomIcon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleDropDown\n  },\n  props: ScaleDropDown.props,\n  template: `\n    <scale-dropdown\n      :name="name"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :disabled="disabled"\n      :required="required"\n      :value="value"\n      :input-id="inputId"\n      :visible-size="visibleSize"\n      :controlled="controlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    >\n      <option value="1">Category 1</option>\n      <optgroup label="Category Group">\n        <option value="2">Category 2</option>\n      </optgroup>\n      <optgroup label="Category Group 2">\n        <option value="3">Category 3</option>\n      </optgroup>\n      <scale-icon-content-calendar v-if="label === \'With Custom Icon\'" slot="icon" size="20"></scale-icon-content-calendar>\n    </scale-dropdown>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var componentMeta={title:"Deprecated Components/Dropdown",component:ScaleDropDown,argTypes:{size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},includeStories:["standard","disabled","error","success","warning","withCustomIcon"]},mdxStoryNameToKey={Standard:"standard",Disabled:"disabled",Error:"error",Success:"success",Warning:"warning","With Custom Icon":"withCustomIcon"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/flyout-menu/MenuFlyout.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"standard",(function(){return MenuFlyout_stories_standard})),__webpack_require__.d(__webpack_exports__,"cascadingMenu",(function(){return MenuFlyout_stories_cascadingMenu})),__webpack_require__.d(__webpack_exports__,"checkedToggle",(function(){return MenuFlyout_stories_checkedToggle}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),flyout_menu_ScaleMenuFlyoutvue_type_script_lang_js_={props:{closeOnSelect:{type:Boolean,default:!0},direction:{type:String,default:"bottom-right"},styles:{type:String}},methods:{emit:function emit(){this.$emit("scale-open"),this.$emit("scale-close"),this.$emit("scale-select")}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(flyout_menu_ScaleMenuFlyoutvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("trigger"),this._v(" "),this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleMenuFlyout=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleMenuFlyout",description:"",tags:{},props:[{name:"closeOnSelect",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"direction",type:{name:"string"},defaultValue:{func:!1,value:"'bottom-right'"}},{name:"styles",type:{name:"string"}}],events:[{name:"scale-open"},{name:"scale-close"},{name:"scale-select"}],slots:[{name:"trigger"},{name:"default"}]};var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Flyout Menu",component:ScaleMenuFlyout,argTypes:{direction:{control:{type:"select",options:["bottom-right","bottom-left","top-right","top-left","right","left"]},description:"Set preference for where the menu appears, space permitting"},closeOnSelect:{control:{type:"boolean"},description:"Determines whether the dropdown should close when a menu item is selected"}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Flyout Menu"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",mdxType:"Story"},{props:Object.assign({},ScaleMenuFlyout.props),methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select")},template:'\n        <div style="display:flex; height:200px;">\n          <scale-menu-flyout\n            :direction="direction"\n            :close-on-select="String(closeOnSelect)"\n            @scale-open="handleOpen"\n            @scale-close="handleClose"\n            @scale-select="handleSelect"\n          >\n            <scale-button slot="trigger" variant="secondary" icon-only>\n              <scale-icon-service-settings accessibility-title="Open menu"></scale-icon-service-settings>\n            </scale-button>\n            <scale-menu-flyout-list>\n              <scale-menu-flyout-item>Menu Item 1</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 2</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 3</scale-menu-flyout-item>\n            </scale-menu-flyout-list>\n          </scale-menu-flyout>\n        </div>\n      '})),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout>\n  <scale-button slot="trigger" variant="secondary" icon-only>\n    <scale-icon-service-settings\n      accessibility-title="Open menu"\n    ></scale-icon-service-settings>\n  </scale-button>\n  <scale-menu-flyout-list>\n    <scale-menu-flyout-item>Menu Item 1</scale-menu-flyout-item>\n    <scale-menu-flyout-item>Menu Item 2</scale-menu-flyout-item>\n    <scale-menu-flyout-item>Menu Item 3</scale-menu-flyout-item>\n  </scale-menu-flyout-list>\n</scale-menu-flyout>\n')),Object(esm.b)("h2",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --spacing-y-list: 0;\n  --spacing-x-list: 0;\n}\n\n:host(menu-flyout-item) {\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);  \n}\n\n/* menu-flyout-divider */\n:host(scale-menu-flyout-divider) {\n  --color: var(--telekom-color-ui-faint);\n}\n")),Object(esm.b)("h2",{id:"breaking-changes-from-300-beta22"},"Breaking Changes from ",Object(esm.b)("inlineCode",{parentName:"h2"},"3.0.0-beta.22")),Object(esm.b)("h3",{id:"cascading-has-changed"},"Cascading has changed"),Object(esm.b)("p",null,"Before (you'd nest an entire ",Object(esm.b)("inlineCode",{parentName:"p"},"scale-menu-flyout")," in place of an item):"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout>\n  <scale-button slot="trigger" variant="secondary"> Menu </scale-button>\n  <scale-menu-flyout-list>\n    <scale-menu-flyout-item>Item 1</scale-menu-flyout-item>\n    <scale-menu-flyout-item>Item 2</scale-menu-flyout-item>\n    <scale-menu-flyout>\n      <scale-menu-flyout-item slot="trigger" cascade\n        >More Options</scale-menu-flyout-item\n      >\n      <scale-menu-flyout-list>\n        <scale-menu-flyout-item>Option 1</scale-menu-flyout-item>\n        <scale-menu-flyout-item>Option 2</scale-menu-flyout-item>\n        <scale-menu-flyout-item>Option 3</scale-menu-flyout-item>\n      </scale-menu-flyout-list>\n    </scale-menu-flyout>\n  </scale-menu-flyout-list>\n</scale-menu-flyout>\n')),Object(esm.b)("p",null,"After (you place a ",Object(esm.b)("inlineCode",{parentName:"p"},"scale-menu-flyout-list")," with ",Object(esm.b)("inlineCode",{parentName:"p"},'slot="sublist"')," inside of a ",Object(esm.b)("inlineCode",{parentName:"p"},"scale-menu-flyout-item"),"):"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout>\n  <scale-button slot="trigger" variant="secondary"> Menu </scale-button>\n  <scale-menu-flyout-list>\n    <scale-menu-flyout-item>Item 1</scale-menu-flyout-item>\n    <scale-menu-flyout-item>Item 2</scale-menu-flyout-item>\n    <scale-menu-flyout-item\n      >More Options\n      <scale-menu-flyout-list slot="sublist">\n        <scale-menu-flyout-item>Option 1</scale-menu-flyout-item>\n        <scale-menu-flyout-item>Option 2</scale-menu-flyout-item>\n        <scale-menu-flyout-item>Option 3</scale-menu-flyout-item>\n      </scale-menu-flyout-list>\n    </scale-menu-flyout-item>\n  </scale-menu-flyout-list>\n</scale-menu-flyout>\n')),Object(esm.b)("h3",{id:"checked-toogles-require-a-new-checkable-attribute"},"Checked toogles require a new ",Object(esm.b)("inlineCode",{parentName:"h3"},"checkable")," attribute"),Object(esm.b)("p",null,"With a value of either ",Object(esm.b)("inlineCode",{parentName:"p"},"checkbox")," or ",Object(esm.b)("inlineCode",{parentName:"p"},"radio"),". And then use ",Object(esm.b)("inlineCode",{parentName:"p"},"checked")," has a truly boolean attribute to mark these items has checked."),Object(esm.b)("p",null,"Before:"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout-list>\n  <scale-menu-flyout-item checked="false"\n    >Toggle option 1</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checked="true"\n    >Toggle option 2</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checked="false"\n    >Toggle option 3</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checked="false"\n    >Toggle option 4</scale-menu-flyout-item\n  >\n</scale-menu-flyout-list>\n')),Object(esm.b)("p",null,"After:"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout-list>\n  <scale-menu-flyout-item checkable="checkbox"\n    >Toggle option 1</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checkable="checkbox" checked\n    >Toggle option 2</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checkable="checkbox"\n    >Toggle option 3</scale-menu-flyout-item\n  >\n  <scale-menu-flyout-item checkable="checkbox"\n    >Toggle option 4</scale-menu-flyout-item\n  >\n</scale-menu-flyout-list>\n')),Object(esm.b)("h3",{id:"avoid-listening-for-click-events-in-items"},"Avoid listening for ",Object(esm.b)("inlineCode",{parentName:"h3"},"click")," events in items"),Object(esm.b)("p",null,"Use ",Object(esm.b)("inlineCode",{parentName:"p"},"scale-select")," which will be triggered by both mouse and keyboard input."),Object(esm.b)("h2",{id:"cascading-menu"},"Cascading Menu"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Cascading Menu",mdxType:"Story"},{methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select")},template:'\n      <div style="display:flex; height:400px;">\n        <scale-menu-flyout @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary" icon-only>\n            <scale-icon-action-filter accessibility-title="Open menu"></scale-icon-action-filter>\n          </scale-button>\n          <scale-menu-flyout-list>\n            <scale-menu-flyout-item>Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-item>Really Quite Long Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>Item With Suffix 1<span slot="suffix">⌘X</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item>Item With Suffix 2<span slot="suffix">⌘Y</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item disabled>Item With Suffix 3<span slot="suffix">⌘Z</span></scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>\n              Other Options\n              <scale-menu-flyout-list slot="sublist">\n                <scale-menu-flyout-item><scale-icon-action-cut-paste slot="prefix"></scale-icon-action-cut-paste>Item With Prefix 1</scale-menu-flyout-item>\n                <scale-menu-flyout-item>\n                  <scale-icon-action-loop slot="prefix"></scale-icon-action-loop>Item With Prefix 2\n                  <scale-menu-flyout-list slot="sublist">\n                    <scale-menu-flyout-item>Third Level Item 1</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 2</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 3</scale-menu-flyout-item>\n                  </scale-menu-flyout-list>\n                </scale-menu-flyout-item>\n                <scale-menu-flyout-item><scale-icon-action-more slot="prefix"></scale-icon-action-more>Item With Prefix 3</scale-menu-flyout-item>\n              </scale-menu-flyout-list>\n            </scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      </div>  \n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout>\n  <scale-button slot="trigger" variant="secondary" icon-only>\n    <scale-icon-action-filter\n      accessibility-title="Open menu"\n    ></scale-icon-action-filter>\n  </scale-button>\n  <scale-menu-flyout-list>\n    <scale-menu-flyout-item>Item Title</scale-menu-flyout-item>\n    <scale-menu-flyout-item\n      >Really Quite Long Item Title</scale-menu-flyout-item\n    >\n    <scale-menu-flyout-divider></scale-menu-flyout-divider>\n    <scale-menu-flyout-item\n      >Item With Suffix 1<span slot="suffix">⌘F</span></scale-menu-flyout-item\n    >\n    <scale-menu-flyout-item\n      >Item With Suffix 2<span slot="suffix">⌘H</span></scale-menu-flyout-item\n    >\n    <scale-menu-flyout-divider></scale-menu-flyout-divider>\n    <scale-menu-flyout-item>\n      Other Options\n      <scale-menu-flyout-list slot="sublist">\n        <scale-menu-flyout-item>\n          <scale-icon-action-cut-paste\n            slot="prefix"\n          ></scale-icon-action-cut-paste\n          >Item With Prefix 1\n        </scale-menu-flyout-item>\n        <scale-menu-flyout-item>\n          <scale-icon-action-loop slot="prefix"></scale-icon-action-loop>Item\n          With Prefix 2\n          <scale-menu-flyout-list slot="sublist">\n            <scale-menu-flyout-item>Third Level Item 1</scale-menu-flyout-item>\n            <scale-menu-flyout-item>Third Level Item 2</scale-menu-flyout-item>\n            <scale-menu-flyout-item>Third Level Item 3</scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout-item>\n        <scale-menu-flyout-item>\n          <scale-icon-action-more slot="prefix"></scale-icon-action-more>Item\n          With Prefix 3\n        </scale-menu-flyout-item>\n      </scale-menu-flyout-list>\n    </scale-menu-flyout-item>\n  </scale-menu-flyout-list>\n</scale-menu-flyout>\n')),Object(esm.b)("h3",{id:"accessibility-notice"},"Accessibility Notice"),Object(esm.b)("p",null,"There are two known issues with the JAWS2019 screen reader and Google Chrome, that may represent slight limitations. When nested submenus are present, (1) the focus will be placed on the second item of the menu, and (2) in submenus with submenus, the first item in the menu won't be read the first time it receives focus."),Object(esm.b)("h2",{id:"checked-toggle"},"Checked Toggle"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Checked Toggle",mdxType:"Story"},{methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select"),toggleChecked:function toggleChecked(event){event.target.checked=!event.target.checked}},template:'\n        <scale-menu-flyout close-on-select="false" @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary">\n            Options <scale-icon-navigation-collapse-down aria-hidden="true"></scale-icon-navigation-collapse-down>\n          </scale-button>\n          <scale-menu-flyout-list @scale-select="toggleChecked">\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 1</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox" checked>Toggle option 2</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 3</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 4</scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-menu-flyout close-on-select="false">\n  <scale-button slot="trigger" variant="secondary">\n    Options\n    <scale-icon-navigation-collapse-down\n      aria-hidden="true"\n    ></scale-icon-navigation-collapse-down>\n  </scale-button>\n  <scale-menu-flyout-list>\n    <scale-menu-flyout-item checkable="checkbox"\n      >Toggle option 1</scale-menu-flyout-item\n    >\n    <scale-menu-flyout-item checkable="checkbox" checked\n      >Toggle option 2</scale-menu-flyout-item\n    >\n    <scale-menu-flyout-item checkable="checkbox"\n      >Toggle option 3</scale-menu-flyout-item\n    >\n    <scale-menu-flyout-item checkable="checkbox"\n      >Toggle option 4</scale-menu-flyout-item\n    >\n  </scale-menu-flyout-list>\n</scale-menu-flyout>\n\n<script>\n  const list = document.querySelector(\'scale-menu-flyout-list\');\n\n  list.addEventListener(\'scale-select\', function (event) {\n    const item = event.target;\n    item.checked = !item.checked;\n  });\n<\/script>\n')))}MDXContent.isMDXComponent=!0;var MenuFlyout_stories_standard=function standard(){return{props:Object.assign({},ScaleMenuFlyout.props),methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select")},template:'\n        <div style="display:flex; height:200px;">\n          <scale-menu-flyout\n            :direction="direction"\n            :close-on-select="String(closeOnSelect)"\n            @scale-open="handleOpen"\n            @scale-close="handleClose"\n            @scale-select="handleSelect"\n          >\n            <scale-button slot="trigger" variant="secondary" icon-only>\n              <scale-icon-service-settings accessibility-title="Open menu"></scale-icon-service-settings>\n            </scale-button>\n            <scale-menu-flyout-list>\n              <scale-menu-flyout-item>Menu Item 1</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 2</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 3</scale-menu-flyout-item>\n            </scale-menu-flyout-list>\n          </scale-menu-flyout>\n        </div>\n      '}};MenuFlyout_stories_standard.storyName="Standard",MenuFlyout_stories_standard.parameters={storySource:{source:'{\n  props: { ...ScaleMenuFlyout.props\n  },\n  methods: {\n    handleOpen: action(\'scale-open\'),\n    handleClose: action(\'scale-close\'),\n    handleSelect: action(\'scale-select\')\n  },\n  template: `\n        <div style="display:flex; height:200px;">\n          <scale-menu-flyout\n            :direction="direction"\n            :close-on-select="String(closeOnSelect)"\n            @scale-open="handleOpen"\n            @scale-close="handleClose"\n            @scale-select="handleSelect"\n          >\n            <scale-button slot="trigger" variant="secondary" icon-only>\n              <scale-icon-service-settings accessibility-title="Open menu"></scale-icon-service-settings>\n            </scale-button>\n            <scale-menu-flyout-list>\n              <scale-menu-flyout-item>Menu Item 1</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 2</scale-menu-flyout-item>\n              <scale-menu-flyout-item>Menu Item 3</scale-menu-flyout-item>\n            </scale-menu-flyout-list>\n          </scale-menu-flyout>\n        </div>\n      `\n}'}};var MenuFlyout_stories_cascadingMenu=function cascadingMenu(){return{methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select")},template:'\n      <div style="display:flex; height:400px;">\n        <scale-menu-flyout @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary" icon-only>\n            <scale-icon-action-filter accessibility-title="Open menu"></scale-icon-action-filter>\n          </scale-button>\n          <scale-menu-flyout-list>\n            <scale-menu-flyout-item>Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-item>Really Quite Long Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>Item With Suffix 1<span slot="suffix">⌘X</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item>Item With Suffix 2<span slot="suffix">⌘Y</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item disabled>Item With Suffix 3<span slot="suffix">⌘Z</span></scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>\n              Other Options\n              <scale-menu-flyout-list slot="sublist">\n                <scale-menu-flyout-item><scale-icon-action-cut-paste slot="prefix"></scale-icon-action-cut-paste>Item With Prefix 1</scale-menu-flyout-item>\n                <scale-menu-flyout-item>\n                  <scale-icon-action-loop slot="prefix"></scale-icon-action-loop>Item With Prefix 2\n                  <scale-menu-flyout-list slot="sublist">\n                    <scale-menu-flyout-item>Third Level Item 1</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 2</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 3</scale-menu-flyout-item>\n                  </scale-menu-flyout-list>\n                </scale-menu-flyout-item>\n                <scale-menu-flyout-item><scale-icon-action-more slot="prefix"></scale-icon-action-more>Item With Prefix 3</scale-menu-flyout-item>\n              </scale-menu-flyout-list>\n            </scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      </div>  \n      '}};MenuFlyout_stories_cascadingMenu.storyName="Cascading Menu",MenuFlyout_stories_cascadingMenu.parameters={storySource:{source:'{\n  methods: {\n    handleOpen: action(\'scale-open\'),\n    handleClose: action(\'scale-close\'),\n    handleSelect: action(\'scale-select\')\n  },\n  template: `\n      <div style="display:flex; height:400px;">\n        <scale-menu-flyout @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary" icon-only>\n            <scale-icon-action-filter accessibility-title="Open menu"></scale-icon-action-filter>\n          </scale-button>\n          <scale-menu-flyout-list>\n            <scale-menu-flyout-item>Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-item>Really Quite Long Item Title</scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>Item With Suffix 1<span slot="suffix">⌘X</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item>Item With Suffix 2<span slot="suffix">⌘Y</span></scale-menu-flyout-item>\n            <scale-menu-flyout-item disabled>Item With Suffix 3<span slot="suffix">⌘Z</span></scale-menu-flyout-item>\n            <scale-menu-flyout-divider></scale-menu-flyout-divider>\n            <scale-menu-flyout-item>\n              Other Options\n              <scale-menu-flyout-list slot="sublist">\n                <scale-menu-flyout-item><scale-icon-action-cut-paste slot="prefix"></scale-icon-action-cut-paste>Item With Prefix 1</scale-menu-flyout-item>\n                <scale-menu-flyout-item>\n                  <scale-icon-action-loop slot="prefix"></scale-icon-action-loop>Item With Prefix 2\n                  <scale-menu-flyout-list slot="sublist">\n                    <scale-menu-flyout-item>Third Level Item 1</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 2</scale-menu-flyout-item>\n                    <scale-menu-flyout-item>Third Level Item 3</scale-menu-flyout-item>\n                  </scale-menu-flyout-list>\n                </scale-menu-flyout-item>\n                <scale-menu-flyout-item><scale-icon-action-more slot="prefix"></scale-icon-action-more>Item With Prefix 3</scale-menu-flyout-item>\n              </scale-menu-flyout-list>\n            </scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      </div>  \n      `\n}'}};var MenuFlyout_stories_checkedToggle=function checkedToggle(){return{methods:{handleOpen:Object(addon_actions_dist_esm.action)("scale-open"),handleClose:Object(addon_actions_dist_esm.action)("scale-close"),handleSelect:Object(addon_actions_dist_esm.action)("scale-select"),toggleChecked:function toggleChecked(event){event.target.checked=!event.target.checked}},template:'\n        <scale-menu-flyout close-on-select="false" @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary">\n            Options <scale-icon-navigation-collapse-down aria-hidden="true"></scale-icon-navigation-collapse-down>\n          </scale-button>\n          <scale-menu-flyout-list @scale-select="toggleChecked">\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 1</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox" checked>Toggle option 2</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 3</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 4</scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      '}};MenuFlyout_stories_checkedToggle.storyName="Checked Toggle",MenuFlyout_stories_checkedToggle.parameters={storySource:{source:'{\n  methods: {\n    handleOpen: action(\'scale-open\'),\n    handleClose: action(\'scale-close\'),\n    handleSelect: action(\'scale-select\'),\n    toggleChecked: function (event) {\n      event.target.checked = !event.target.checked;\n    }\n  },\n  template: `\n        <scale-menu-flyout close-on-select="false" @scale-open="handleOpen" @scale-close="handleClose" @scale-select="handleSelect">\n          <scale-button slot="trigger" variant="secondary">\n            Options <scale-icon-navigation-collapse-down aria-hidden="true"></scale-icon-navigation-collapse-down>\n          </scale-button>\n          <scale-menu-flyout-list @scale-select="toggleChecked">\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 1</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox" checked>Toggle option 2</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 3</scale-menu-flyout-item>\n            <scale-menu-flyout-item checkable="checkbox">Toggle option 4</scale-menu-flyout-item>\n          </scale-menu-flyout-list>\n        </scale-menu-flyout>\n      `\n}'}};var componentMeta={title:"Components/Flyout Menu",component:ScaleMenuFlyout,argTypes:{direction:{control:{type:"select",options:["bottom-right","bottom-left","top-right","top-left","right","left"]},description:"Set preference for where the menu appears, space permitting"},closeOnSelect:{control:{type:"boolean"},description:"Determines whether the dropdown should close when a menu item is selected"}},includeStories:["standard","cascadingMenu","checkedToggle"]},mdxStoryNameToKey={Standard:"standard","Cascading Menu":"cascadingMenu","Checked Toggle":"checkedToggle"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/icon/Icon.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"PATH",(function(){return PATH})),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Icon_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"withPathAttribute",(function(){return withPathAttribute})),__webpack_require__.d(__webpack_exports__,"withNameAttribute",(function(){return withNameAttribute})),__webpack_require__.d(__webpack_exports__,"iconLibrary",(function(){return Icon_stories_iconLibrary}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),icon_ScaleIconvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{name:String,path:String,size:{type:Number,default:24},fill:{type:String,default:"var(--icon-color, currentColor)"},stroke:{type:String,default:"transparent"},focusable:{type:Boolean,default:!1},decorative:{type:Boolean,default:!1},accessibilityTitle:{type:String},styles:{type:String}}}),componentNormalizer=(__webpack_require__("./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&"),__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"));const __vuedocgen_export_0=Object(componentNormalizer.a)(icon_ScaleIconvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",[_c("div",{staticClass:"visually-hidden"},[_c("svg",[_c("defs",[_c("g",{attrs:{id:"icon-profile"}},[_c("path",{attrs:{d:"M8.9 16.5l3.1 3.1 3.1-3.1h2.25c2.35 0 4.3 1.65 4.7 3.95l.15 1.05H1.8l.15-1.05c.4-2.3 2.35-3.95 4.7-3.95H8.9zM12 2c3.5 0 6 2.5 6 6 0 1.25-.35 2.55-.95 3.65-1 1.9-2.8 3.35-5.05 3.35s-4.05-1.45-5.05-3.35C6.35 10.55 6 9.25 6 8c0-3.5 2.5-6 6-6zm0 1.5C9.4 3.5 7.5 5.4 7.5 8c0 .85.2 1.75.55 2.55.7 1.65 2.15 2.95 3.95 2.95 1.8 0 3.25-1.3 3.95-2.95.35-.8.55-1.7.55-2.55 0-2.6-1.9-4.5-4.5-4.5z","fill-rule":"nonzero"}})]),_vm._v(" "),_c("g",{attrs:{id:"icon-search"}},[_c("path",{attrs:{d:"M10 2a8 8 0 016.472 12.703l4.912 4.913.06.065a1.25 1.25 0 01-1.726 1.794l-.102-.091-4.913-4.912A8 8 0 1110 2zm0 1.5A6.508 6.508 0 003.5 10c0 3.584 2.916 6.5 6.5 6.5s6.5-2.916 6.5-6.5-2.916-6.5-6.5-6.5z","fill-rule":"nonzero"}})]),_vm._v(" "),_c("g",{attrs:{id:"icon-shopping-bag"}},[_c("path",{attrs:{d:"M11.84 1.5a4.5 4.5 0 014.495 4.288l.004.212v.749l4.45.001.883 12.794a3 3 0 01-2.993 3.206H5a3 3 0 01-2.992-3.206L2.89 6.75h4.45V6l.002-.133A4.5 4.5 0 0111.84 1.5zm7.549 6.75h-15.1l-.785 11.397A1.5 1.5 0 005 21.25h13.68l.088-.003a1.5 1.5 0 001.407-1.6L19.39 8.25zM8.089 9.5a1 1 0 11.002 1.999A1 1 0 018.089 9.5zm7.5 0a1 1 0 11.002 1.999 1 1 0 01-.002-1.999zM11.84 3a3 3 0 00-2.994 2.824L8.839 6v.75l6-.001V6l-.002-.112A3 3 0 0011.84 3z","fill-rule":"nonzero"}})]),_vm._v(" "),_c("g",{attrs:{id:"icon-menu"}},[_c("path",{attrs:{d:"M20.5,16.5 L20.5,18.5 L3.5,18.5 L3.5,16.5 L20.5,16.5 Z M20.5,11 L20.5,13 L3.5,13 L3.5,11 L20.5,11 Z M20.5,5.5 L20.5,7.5 L3.5,7.5 L3.5,5.5 L20.5,5.5 Z","fill-rule":"nonzero"}})])])])]),_vm._v(" "),_c("scale-icon",{attrs:{name:_vm.name,path:_vm.path,size:_vm.size,fill:_vm.fill,stroke:_vm.stroke,focusable:_vm.focusable,decorative:_vm.decorative,"accessibility-title":_vm.accessibilityTitle,styles:_vm.styles}})],1)}),[],!1,null,"4083c6d8",null).exports;var ScaleIcon=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleIcon",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"path",type:{name:"string"}},{name:"size",type:{name:"number"},defaultValue:{func:!1,value:"24"}},{name:"fill",type:{name:"string"},defaultValue:{func:!1,value:"'var(--icon-color, currentColor)'"}},{name:"stroke",type:{name:"string"},defaultValue:{func:!1,value:"'transparent'"}},{name:"focusable",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"decorative",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"accessibilityTitle",type:{name:"string"}},{name:"styles",type:{name:"string"}}]};var icon_ScaleIconLibraryExamplevue_type_script_lang_js_={props:{fill:{type:String,default:"currentColor"},color:{type:String,default:"currentColor"},size:{type:Number,default:24},selected:{type:Boolean,default:!1},decorative:{type:Boolean,default:!1},accessibilityTitle:{type:String}}};const ScaleIconLibraryExample_vuedocgen_export_0=Object(componentNormalizer.a)(icon_ScaleIconLibraryExamplevue_type_script_lang_js_,(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("div",[_c("scale-icon-action-favorite",{attrs:{fill:this.fill,size:this.size,selected:this.selected,decorative:this.decorative,"accessibility-title":this.accessibilityTitle}})],1)}),[],!1,null,null,null).exports;var ScaleIconLibraryExample=ScaleIconLibraryExample_vuedocgen_export_0;ScaleIconLibraryExample_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleIconLibraryExample",description:"",tags:{},props:[{name:"fill",type:{name:"string"},defaultValue:{func:!1,value:"'currentColor'"}},{name:"color",type:{name:"string"},defaultValue:{func:!1,value:"'currentColor'"}},{name:"size",type:{name:"number"},defaultValue:{func:!1,value:"24"}},{name:"selected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"decorative",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"accessibilityTitle",type:{name:"string"}}]};var scale_icons=__webpack_require__("../components/dist/scale-components/components/icons/scale-icons.json");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var PATH="M12 1c5.8 0 10.5 4.7 10.45 10.55 0 5.8-4.7 10.5-10.5 10.5-1.05 0-2.1-.15-3.05-.45l-1.45 1.45c-.35.35-.75.5-1.2.5-.9 0-1.75-.7-1.75-1.75v-2.95c-1.85-1.9-3-4.5-3-7.35C1.5 5.7 6.2 1 12 1zm0 19.5c4.95 0 9-4.05 9-9s-4.05-9-9-9-9 4.05-9 9c0 2.35.9 4.6 2.6 6.3l.45.45v3.55c0 .25.25.25.25.25.05 0 .1-.05.15-.1l2.1-2.1.85.25c.85.25 1.7.4 2.6.4zM16.25 9c.45 0 .75.35.75.75s-.35.75-.75.75h-8.7c-.4 0-.75-.35-.75-.75S7.15 9 7.55 9h8.7zm0 3.5c.45 0 .75.35.75.75s-.35.75-.75.75h-8.7c-.4 0-.75-.35-.75-.75s.35-.75.75-.75h8.7z",Icon_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleIcon:ScaleIcon},props:Object.assign({label:String},ScaleIcon.props),template:'\n    <scale-icon\n      :name="name"\n      :path="path"\n      :size="size"\n      :fill="fill"\n      :stroke="stroke"\n      :focusable="String(focusable)"\n      :decorative="decorative"\n      :accessibility-title="accessibilityTitle"\n      :styles="styles"\n    />\n  '}},layoutProps={PATH:PATH,Template:Icon_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Icon",component:ScaleIcon,subcomponents:{"Icon Library":ScaleIconLibraryExample},argTypes:{size:{control:{type:"range",min:12,max:128,step:1}},name:{control:{type:"radio",options:["profile","search","shopping-bag","menu"]}},path:{control:{type:"select",options:["",PATH]}},fill:{control:{type:"color"}},stroke:{control:{type:"text"}},styles:{control:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Icon"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{name:"profile",accessibilityTitle:"profile"},mdxType:"Story"},Icon_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-icon {\n  --display: inline-flex;\n  --transition: all var(--telekom-motion-duration-transition) var(\n      --telekom-motion-easing-standard\n    );\n}\n")),Object(esm.b)("h2",{id:"with-path-attribute"},"With Path Attribute"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Path Attribute",args:{path:PATH,accessibilityTitle:"feedback message"},mdxType:"Story"},Icon_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-icon path="M12...75h8.7z"></scale-icon>\n')),Object(esm.b)("h2",{id:"with-name-attribute"},"With Name Attribute"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Name Attribute",args:{name:"shopping-bag",accessibilityTitle:"shopping bag"},mdxType:"Story"},Icon_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-icon name="shopping-bag" /></scale-icon>\n')),Object(esm.b)("p",null,"When using the ",Object(esm.b)("inlineCode",{parentName:"p"},"name")," attribute, the component assumes there is an object with a matching id defined elsewhere in the document:"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<svg>\n  <defs>\n    <g id="icon-shopping-bag">\n      <path\n        d="M11.84 1.5a4.5 4.5 0 014.495 4.288l.004.212v.749l4.45.001.883 12.794a3 3 0 01-2.993 3.206H5a3 3 0 01-2.992-3.206L2.89 6.75h4.45V6l.002-.133A4.5 4.5 0 0111.84 1.5zm7.549 6.75h-15.1l-.785 11.397A1.5 1.5 0 005 21.25h13.68l.088-.003a1.5 1.5 0 001.407-1.6L19.39 8.25zM8.089 9.5a1 1 0 11.002 1.999A1 1 0 018.089 9.5zm7.5 0a1 1 0 11.002 1.999 1 1 0 01-.002-1.999zM11.84 3a3 3 0 00-2.994 2.824L8.839 6v.75l6-.001V6l-.002-.112A3 3 0 0011.84 3z"\n        fill-rule="nonzero"\n      />\n    </g>\n  </defs>\n</svg>\n')),Object(esm.b)("h2",{id:"icon-library"},"Icon Library"),Object(esm.b)("h2",{id:"example"},"Example"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon Library",args:{fill:"#E20074",selected:!0,size:24,accessibilityTitle:"favorite",decorative:!1},mdxType:"Story"},(function(){return ScaleIconLibraryExample}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-icon-action-favorite\n  fill="#E20074"\n  size="24"\n  selected\n  accessibility-title="favorite"\n></scale-icon-action-favorite>\n')),Object(esm.b)("h3",{id:"full-list-grouped-by-category"},"Full list, grouped by category"),Object(esm.b)("div",{style:{marginTop:16}},scale_icons.map((function(category){return Object(esm.b)("div",{key:category.category},Object(esm.b)("h4",null,category.label),Object(esm.b)("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(240px, 1fr))",gap:16,marginTop:32}},category.items.map((function(item){var markup=function markup(){return{__html:"<scale-icon-"+category.category+"-"+item+' accessibility-title="'+item+'"/>'}};return Object(esm.b)("div",{key:item},Object(esm.b)("span",null,Object(esm.b)("span",{style:{color:"#7C7C7C"}},category.category,"-"),item),Object(esm.b)(dist_esm.c,{mdxSource:markup().__html,mdxType:"Canvas"},Object(esm.b)("span",{dangerouslySetInnerHTML:markup()})))}))))}))),Object(esm.b)("h3",{id:"full-list-of-selected-grouped-by-category"},"Full list of selected, grouped by category"),Object(esm.b)("div",{style:{marginTop:16}},scale_icons.map((function(category){return Object(esm.b)("div",{key:category.category},Object(esm.b)("h4",null,category.label),Object(esm.b)("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(240px, 1fr))",gap:16,marginTop:32}},category.items.map((function(item){var markup=function markup(){return{__html:"<scale-icon-"+category.category+"-"+item+' accessibility-title="'+item+'" selected/>'}};return Object(esm.b)("div",{key:item},Object(esm.b)("span",null,Object(esm.b)("span",{style:{color:"#7C7C7C"}},category.category,"-"),item),Object(esm.b)(dist_esm.c,{mdxSource:markup().__html,mdxType:"Canvas"},Object(esm.b)("span",{dangerouslySetInnerHTML:markup()})))}))))}))))}MDXContent.isMDXComponent=!0;var standard=Icon_stories_Template.bind({});standard.storyName="Standard",standard.args={name:"profile",accessibilityTitle:"profile"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleIcon\n  },\n  props: {\n    label: String,\n    ...ScaleIcon.props\n  },\n  template: `\n    <scale-icon\n      :name="name"\n      :path="path"\n      :size="size"\n      :fill="fill"\n      :stroke="stroke"\n      :focusable="String(focusable)"\n      :decorative="decorative"\n      :accessibility-title="accessibilityTitle"\n      :styles="styles"\n    />\n  `\n})'}};var withPathAttribute=Icon_stories_Template.bind({});withPathAttribute.storyName="With Path Attribute",withPathAttribute.args={path:PATH,accessibilityTitle:"feedback message"},withPathAttribute.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleIcon\n  },\n  props: {\n    label: String,\n    ...ScaleIcon.props\n  },\n  template: `\n    <scale-icon\n      :name="name"\n      :path="path"\n      :size="size"\n      :fill="fill"\n      :stroke="stroke"\n      :focusable="String(focusable)"\n      :decorative="decorative"\n      :accessibility-title="accessibilityTitle"\n      :styles="styles"\n    />\n  `\n})'}};var withNameAttribute=Icon_stories_Template.bind({});withNameAttribute.storyName="With Name Attribute",withNameAttribute.args={name:"shopping-bag",accessibilityTitle:"shopping bag"},withNameAttribute.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleIcon\n  },\n  props: {\n    label: String,\n    ...ScaleIcon.props\n  },\n  template: `\n    <scale-icon\n      :name="name"\n      :path="path"\n      :size="size"\n      :fill="fill"\n      :stroke="stroke"\n      :focusable="String(focusable)"\n      :decorative="decorative"\n      :accessibility-title="accessibilityTitle"\n      :styles="styles"\n    />\n  `\n})'}};var Icon_stories_iconLibrary=function iconLibrary(){return ScaleIconLibraryExample};Icon_stories_iconLibrary.storyName="Icon Library",Icon_stories_iconLibrary.args={fill:"#E20074",selected:!0,size:24,accessibilityTitle:"favorite",decorative:!1},Icon_stories_iconLibrary.parameters={storySource:{source:"() => ScaleIconLibraryExample"}};var componentMeta={title:"Components/Icon",component:ScaleIcon,subcomponents:{"Icon Library":ScaleIconLibraryExample},argTypes:{size:{control:{type:"range",min:12,max:128,step:1}},name:{control:{type:"radio",options:["profile","search","shopping-bag","menu"]}},path:{control:{type:"select",options:["",PATH]}},fill:{control:{type:"color"}},stroke:{control:{type:"text"}},styles:{control:{disable:!0}}},includeStories:["standard","withPathAttribute","withNameAttribute","iconLibrary"]},mdxStoryNameToKey={Standard:"standard","With Path Attribute":"withPathAttribute","With Name Attribute":"withNameAttribute","Icon Library":"iconLibrary"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleIcon_vue_vue_type_style_index_0_id_4083c6d8_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/icon/ScaleIcon.vue?vue&type=style&index=0&id=4083c6d8&scoped=true&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleIcon_vue_vue_type_style_index_0_id_4083c6d8_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/link/Link.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Link_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"withIcon",(function(){return withIcon})),__webpack_require__.d(__webpack_exports__,"noUnderline",(function(){return noUnderline}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),link_ScaleLinkvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{href:String,styles:String,iconPosition:{type:String,default:"after"},omitUnderline:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},download:{type:Boolean,default:!1},hreflang:{type:String,default:null},ping:{type:String,default:null},referrerpolicy:{type:String,default:null},rel:{type:String,default:null},target:{type:String,default:null},type:{type:String,default:null},innerTabindex:Number},render:function render(){return this.$slots.default}}),componentNormalizer=(__webpack_require__("./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&"),__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"));const __vuedocgen_export_0=Object(componentNormalizer.a)(link_ScaleLinkvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleLink=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleLink",description:"",tags:{},props:[{name:"href",type:{name:"string"}},{name:"styles",type:{name:"string"}},{name:"iconPosition",type:{name:"string"},defaultValue:{func:!1,value:"'after'"}},{name:"omitUnderline",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"download",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"hreflang",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"ping",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"referrerpolicy",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"rel",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"target",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"type",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"innerTabindex",type:{name:"number"}}],slots:[{name:"default"}]};var Link_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({label:String,withIcon:{type:Boolean,default:!1}},ScaleLink.props),template:'\n    <scale-link\n      :href="href"\n      :disabled="disabled"\n      :styles="styles"\n      :omit-underline="omitUnderline"\n      :icon-position="iconPosition"\n      :download="download"\n      :hreflang="hreflang"\n      :referrerpolicy="referrerpolicy"\n      :rel="rel"\n      :target="target"\n      :type="type"\n      :inner-tabindex="innerTabindex"\n    >\n      {{ label }}\n      <scale-icon-navigation-external-link\n        v-if="withIcon"\n        size="16"\n        slot="icon"\n        accessibility-title="open link in new tab"\n      ></scale-icon-navigation-external-link>\n    </scale-link>\n    '}},layoutProps={Template:Link_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Link",component:ScaleLink,argTypes:{label:{control:{type:"text"}},omitUnderline:{type:"boolean"},withIcon:{control:{type:"boolean"}},iconPosition:{options:["after","before"],control:{type:"radio"}},download:{type:"boolean"},href:{control:{type:"text"}},hreflang:{type:"string"},ping:{type:"string"},referrerpolicy:{type:"string"},rel:{type:"string"},target:{type:"string"},type:{type:"string"},styles:{control:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Link"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"A link",href:"#top",disabled:!1,omitUnderline:!1,withIcon:!1,iconPosition:"after",download:!1,hreflang:null,ping:null,referrerpolicy:null,rel:null,target:null,type:null},mdxType:"Story"},Link_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --font-weight: ;\n  --spacing-x-icon: var(--telekom-spacing-composition-space-03);\n  --line-offset: 0.0625em;\n\n  /* initial */\n  --color: var(--telekom-color-text-and-icon-link-standard);\n  --color-line-initial: var(--telekom-color-functional-interaction-subtle);\n  --line-thickness-initial: var(--telekom-line-weight-standard);\n  /* visited */\n  --color-visited: var(--telekom-color-text-and-icon-link-visited);\n  --color-line-visited: currentColor;\n  --line-thickness-visited: var(--line-thickness-initial);\n  /* hover */\n  --color-hover: var(--telekom-color-text-and-icon-link-hovered);\n  --color-line-hover: currentColor;\n  --line-thickness-hover: var(--telekom-line-weight-highlight);\n  /* focus */\n  --color-focus-outline: var(--telekom-color-functional-focus-standard);\n  --color-focus: var(--telekom-color-text-and-icon-link-standard);\n  --color-line-focus: transparent;\n  --line-thickness-focus: 0;\n  /* active */\n  --color-active: var(--telekom-color-text-and-icon-link-active);\n  --color-line-active: currentColor;\n  --line-thickness-active: var(--telekom-line-weight-highlight);\n  /* disabled */\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --color-line-disabled: transparent;\n  --line-thickness-disabled: var(--line-thickness-initial);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"A link, disabled",disabled:!0},mdxType:"Story"},Link_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-link disabled href="#top">A link, disabled</scale-link>\n')),Object(esm.b)("h2",{id:"with-icon"},"With Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Icon",args:{label:"A link, with an icon",href:"#top",withIcon:!0,target:"_blank"},mdxType:"Story"},Link_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-link target="_blank" href="#top">\n  A link, with an icon\n  <scale-icon-navigation-external-link\n    size="16"\n    accessibility-title="open link in new tab"\n    slot="icon"\n  ></scale-icon-navigation-external-link>\n</scale-link>\n')),Object(esm.b)("h2",{id:"no-underline"},"No underline"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"No underline",args:{label:"A link, without an underline",omitUnderline:!0,innerTabindex:0},mdxType:"Story"},Link_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-link omit-underline> A link, without underline </scale-link>\n")))}MDXContent.isMDXComponent=!0;var standard=Link_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"A link",href:"#top",disabled:!1,omitUnderline:!1,withIcon:!1,iconPosition:"after",download:!1,hreflang:null,ping:null,referrerpolicy:null,rel:null,target:null,type:null},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    withIcon: {\n      type: Boolean,\n      default: false\n    },\n    ...ScaleLink.props\n  },\n  template: `\n    <scale-link\n      :href="href"\n      :disabled="disabled"\n      :styles="styles"\n      :omit-underline="omitUnderline"\n      :icon-position="iconPosition"\n      :download="download"\n      :hreflang="hreflang"\n      :referrerpolicy="referrerpolicy"\n      :rel="rel"\n      :target="target"\n      :type="type"\n      :inner-tabindex="innerTabindex"\n    >\n      {{ label }}\n      <scale-icon-navigation-external-link\n        v-if="withIcon"\n        size="16"\n        slot="icon"\n        accessibility-title="open link in new tab"\n      ></scale-icon-navigation-external-link>\n    </scale-link>\n    `\n})'}};var disabled=Link_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"A link, disabled",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    withIcon: {\n      type: Boolean,\n      default: false\n    },\n    ...ScaleLink.props\n  },\n  template: `\n    <scale-link\n      :href="href"\n      :disabled="disabled"\n      :styles="styles"\n      :omit-underline="omitUnderline"\n      :icon-position="iconPosition"\n      :download="download"\n      :hreflang="hreflang"\n      :referrerpolicy="referrerpolicy"\n      :rel="rel"\n      :target="target"\n      :type="type"\n      :inner-tabindex="innerTabindex"\n    >\n      {{ label }}\n      <scale-icon-navigation-external-link\n        v-if="withIcon"\n        size="16"\n        slot="icon"\n        accessibility-title="open link in new tab"\n      ></scale-icon-navigation-external-link>\n    </scale-link>\n    `\n})'}};var withIcon=Link_stories_Template.bind({});withIcon.storyName="With Icon",withIcon.args={label:"A link, with an icon",href:"#top",withIcon:!0,target:"_blank"},withIcon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    withIcon: {\n      type: Boolean,\n      default: false\n    },\n    ...ScaleLink.props\n  },\n  template: `\n    <scale-link\n      :href="href"\n      :disabled="disabled"\n      :styles="styles"\n      :omit-underline="omitUnderline"\n      :icon-position="iconPosition"\n      :download="download"\n      :hreflang="hreflang"\n      :referrerpolicy="referrerpolicy"\n      :rel="rel"\n      :target="target"\n      :type="type"\n      :inner-tabindex="innerTabindex"\n    >\n      {{ label }}\n      <scale-icon-navigation-external-link\n        v-if="withIcon"\n        size="16"\n        slot="icon"\n        accessibility-title="open link in new tab"\n      ></scale-icon-navigation-external-link>\n    </scale-link>\n    `\n})'}};var noUnderline=Link_stories_Template.bind({});noUnderline.storyName="No underline",noUnderline.args={label:"A link, without an underline",omitUnderline:!0,innerTabindex:0},noUnderline.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    withIcon: {\n      type: Boolean,\n      default: false\n    },\n    ...ScaleLink.props\n  },\n  template: `\n    <scale-link\n      :href="href"\n      :disabled="disabled"\n      :styles="styles"\n      :omit-underline="omitUnderline"\n      :icon-position="iconPosition"\n      :download="download"\n      :hreflang="hreflang"\n      :referrerpolicy="referrerpolicy"\n      :rel="rel"\n      :target="target"\n      :type="type"\n      :inner-tabindex="innerTabindex"\n    >\n      {{ label }}\n      <scale-icon-navigation-external-link\n        v-if="withIcon"\n        size="16"\n        slot="icon"\n        accessibility-title="open link in new tab"\n      ></scale-icon-navigation-external-link>\n    </scale-link>\n    `\n})'}};var componentMeta={title:"Components/Link",component:ScaleLink,argTypes:{label:{control:{type:"text"}},omitUnderline:{type:"boolean"},withIcon:{control:{type:"boolean"}},iconPosition:{options:["after","before"],control:{type:"radio"}},download:{type:"boolean"},href:{control:{type:"text"}},hreflang:{type:"string"},ping:{type:"string"},referrerpolicy:{type:"string"},rel:{type:"string"},target:{type:"string"},type:{type:"string"},styles:{control:{disable:!0}}},includeStories:["standard","disabled","withIcon","noUnderline"]},mdxStoryNameToKey={Standard:"standard",Disabled:"disabled","With Icon":"withIcon","No underline":"noUnderline"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleLink_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/link/ScaleLink.vue?vue&type=style&index=0&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleLink_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/list/List.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return List_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateCustomIcon",(function(){return List_stories_TemplateCustomIcon})),__webpack_require__.d(__webpack_exports__,"ordered",(function(){return ordered})),__webpack_require__.d(__webpack_exports__,"unordered",(function(){return unordered})),__webpack_require__.d(__webpack_exports__,"unorderedWithCustomIcon",(function(){return unorderedWithCustomIcon}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),list_ScaleListvue_type_script_lang_js_={props:{ordered:{type:Boolean},styles:{type:String}},render:function render(){return this.$slots.default}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(list_ScaleListvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleList=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleList",description:"",tags:{},props:[{name:"ordered",type:{name:"boolean"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var list_ScaleListItemvue_type_script_lang_js_={props:{ordered:{type:Boolean,default:!1},marker:{type:Boolean,default:!0},styles:{type:String}}};const ScaleListItem_vuedocgen_export_0=Object(componentNormalizer.a)(list_ScaleListItemvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleListItem=ScaleListItem_vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}ScaleListItem_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleListItem",description:"",tags:{},props:[{name:"ordered",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"marker",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"styles",type:{name:"string"}}]};var List_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({},ScaleList.props),template:'\n    <scale-list :ordered="ordered">\n      <scale-list-item>Lorem ipsum dolor</scale-list-item>\n      <scale-list-item>Sit amet\n        <scale-list :ordered="ordered">\n          <scale-list-item>Elementum nibh</scale-list-item>\n          <scale-list-item>Penatibus et magnis\n            <scale-list :ordered="ordered">\n              <scale-list-item>Nulla facilisi</scale-list-item>\n              <scale-list-item>Aliquam etiam</scale-list-item>\n            </scale-list>\n          </scale-list-item>\n        </scale-list>\n      </scale-list-item>\n      <scale-list-item>Consetetur sadipscing</scale-list-item>\n    </scale-list>\n  '}},List_stories_TemplateCustomIcon=function TemplateCustomIcon(args){return{props:Object.assign({},ScaleList.props),template:'\n    <scale-list :ordered="ordered">\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Lorem ipsum dolor</scale-list-item>\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Sit amet</scale-list-item>\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Consetetur sadipscing</scale-list-item>\n    </scale-list>\n  '}},layoutProps={Template:List_stories_Template,TemplateCustomIcon:List_stories_TemplateCustomIcon};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/List",component:ScaleList,subcomponents:{ScaleListItem:ScaleListItem},argTypes:{ordered:{control:{type:"boolean"}},styles:{control:{type:"string",disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"List"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"ordered"},"Ordered"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Ordered",args:{ordered:!0},mdxType:"Story"},List_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Ordered",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-list ordered>\n  <scale-list-item>Lorem ipsum dolor</scale-list-item>\n  <scale-list-item\n    >Sit amet\n    <scale-list ordered>\n      <scale-list-item>Elementum nibh</scale-list-item>\n      <scale-list-item\n        >Penatibus et magnis\n        <scale-list ordered>\n          <scale-list-item>Nulla facilisi</scale-list-item>\n          <scale-list-item>Aliquam etiam</scale-list-item>\n        </scale-list>\n      </scale-list-item>\n    </scale-list>\n  </scale-list-item>\n  <scale-list-item>Consetetur sadipscing</scale-list-item>\n</scale-list>\n")),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --spacing-left: 0;\n  --spacing-left-nested: var(--telekom-spacing-composition-space-04);\n}\n\n/* scale-list-item */\n:host(scale-list-item) {\n  --display: block;\n  --font-size: var(--telekom-typography-font-size-body);\n  --line-height: var(--telekom-typography-line-spacing-standard);\n  --spacing-left: calc(0.5ch + var(--telekom-spacing-composition-space-07));\n  --spacing-left-nested: calc(\n    0.5ch + var(--telekom-spacing-composition-space-06)\n  );\n\n  --font-marker-ordered: var(--telekom-text-style-body);\n  --font-marker-ordered-nested: var(--telekom-text-style-small-bold);\n  --line-height-marker-ordered-nested: var(\n    --telekom-typography-line-spacing-standard\n  );\n  --spacing-top-marker-ordered-nested: calc(\n    var(--telekom-spacing-composition-space-06) -\n      var(--telekom-spacing-composition-space-05)\n  );\n\n  --spacing-right-no-marker: var(--telekom-spacing-composition-space-04);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"unordered"},"Unordered"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Unordered",args:{ordered:!1},mdxType:"Story"},List_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-list>\n  <scale-list-item>Lorem ipsum dolor</scale-list-item>\n  <scale-list-item\n    >Sit amet\n    <scale-list>\n      <scale-list-item>Elementum nibh</scale-list-item>\n      <scale-list-item\n        >Penatibus et magnis\n        <scale-list>\n          <scale-list-item>Nulla facilisi</scale-list-item>\n          <scale-list-item>Aliquam etiam</scale-list-item>\n        </scale-list>\n      </scale-list-item>\n    </scale-list>\n  </scale-list-item>\n  <scale-list-item>Consetetur sadipscing</scale-list-item>\n</scale-list>\n")),Object(esm.b)("h2",{id:"unordered-with-custom-icon"},"Unordered With Custom Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Unordered With Custom Icon",args:{ordered:!1},mdxType:"Story"},List_stories_TemplateCustomIcon.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-list>\n  <scale-list-item marker="false">\n    <scale-icon-navigation-right\n      size="16"\n      decorative\n    ></scale-icon-navigation-right>\n    Lorem ipsum dolor\n  </scale-list-item>\n  <scale-list-item marker="false">\n    <scale-icon-navigation-right\n      size="16"\n      decorative\n    ></scale-icon-navigation-right>\n    Sit amet\n  </scale-list-item>\n  <scale-list-item marker="false">\n    <scale-icon-navigation-right\n      size="16"\n      decorative\n    ></scale-icon-navigation-right>\n    Consetetur sadipscing\n  </scale-list-item>\n</scale-list>\n')))}MDXContent.isMDXComponent=!0;var ordered=List_stories_Template.bind({});ordered.storyName="Ordered",ordered.args={ordered:!0},ordered.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleList.props\n  },\n  template: `\n    <scale-list :ordered="ordered">\n      <scale-list-item>Lorem ipsum dolor</scale-list-item>\n      <scale-list-item>Sit amet\n        <scale-list :ordered="ordered">\n          <scale-list-item>Elementum nibh</scale-list-item>\n          <scale-list-item>Penatibus et magnis\n            <scale-list :ordered="ordered">\n              <scale-list-item>Nulla facilisi</scale-list-item>\n              <scale-list-item>Aliquam etiam</scale-list-item>\n            </scale-list>\n          </scale-list-item>\n        </scale-list>\n      </scale-list-item>\n      <scale-list-item>Consetetur sadipscing</scale-list-item>\n    </scale-list>\n  `\n})'}};var unordered=List_stories_Template.bind({});unordered.storyName="Unordered",unordered.args={ordered:!1},unordered.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleList.props\n  },\n  template: `\n    <scale-list :ordered="ordered">\n      <scale-list-item>Lorem ipsum dolor</scale-list-item>\n      <scale-list-item>Sit amet\n        <scale-list :ordered="ordered">\n          <scale-list-item>Elementum nibh</scale-list-item>\n          <scale-list-item>Penatibus et magnis\n            <scale-list :ordered="ordered">\n              <scale-list-item>Nulla facilisi</scale-list-item>\n              <scale-list-item>Aliquam etiam</scale-list-item>\n            </scale-list>\n          </scale-list-item>\n        </scale-list>\n      </scale-list-item>\n      <scale-list-item>Consetetur sadipscing</scale-list-item>\n    </scale-list>\n  `\n})'}};var unorderedWithCustomIcon=List_stories_TemplateCustomIcon.bind({});unorderedWithCustomIcon.storyName="Unordered With Custom Icon",unorderedWithCustomIcon.args={ordered:!1},unorderedWithCustomIcon.parameters={storySource:{source:'args => ({\n  props: { ...ScaleList.props\n  },\n  template: `\n    <scale-list :ordered="ordered">\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Lorem ipsum dolor</scale-list-item>\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Sit amet</scale-list-item>\n      <scale-list-item marker="false"><scale-icon-navigation-right size="16" decorative /> Consetetur sadipscing</scale-list-item>\n    </scale-list>\n  `\n})'}};var componentMeta={title:"Components/List",component:ScaleList,subcomponents:{ScaleListItem:ScaleListItem},argTypes:{ordered:{control:{type:"boolean"}},styles:{control:{type:"string",disable:!0}}},includeStories:["ordered","unordered","unorderedWithCustomIcon"]},mdxStoryNameToKey={Ordered:"ordered",Unordered:"unordered","Unordered With Custom Icon":"unorderedWithCustomIcon"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/loading-spinner/LoadingSpinner.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return LoadingSpinner_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"smallPrimaryHorizontal",(function(){return smallPrimaryHorizontal})),__webpack_require__.d(__webpack_exports__,"smallPrimaryVertical",(function(){return smallPrimaryVertical})),__webpack_require__.d(__webpack_exports__,"largePrimaryHorizontal",(function(){return largePrimaryHorizontal})),__webpack_require__.d(__webpack_exports__,"largePrimaryVertical",(function(){return largePrimaryVertical})),__webpack_require__.d(__webpack_exports__,"smallWhite",(function(){return smallWhite})),__webpack_require__.d(__webpack_exports__,"smallWhiteHorizontal",(function(){return smallWhiteHorizontal})),__webpack_require__.d(__webpack_exports__,"smallWhiteVertical",(function(){return smallWhiteVertical})),__webpack_require__.d(__webpack_exports__,"largeWhite",(function(){return largeWhite})),__webpack_require__.d(__webpack_exports__,"largeWhiteHorizontal",(function(){return largeWhiteHorizontal})),__webpack_require__.d(__webpack_exports__,"largeWhiteVertical",(function(){return largeWhiteVertical}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),loading_spinner_ScaleLoadingSpinnervue_type_script_lang_js_=(__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),{props:{variant:{type:0,default:"primary"},alignment:{type:0,default:"horizontal"},text:{type:String},accessibilityTitle:{type:String},size:{type:0,default:"small"}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(loading_spinner_ScaleLoadingSpinnervue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-loading-spinner",{attrs:{variant:this.variant,alignment:this.alignment,"accessibility-title":this.accessibilityTitle,text:this.text,size:this.size}})}),[],!1,null,null,null).exports;var ScaleLoadingSpinner=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleLoadingSpinner",description:"",tags:{},props:[{name:"variant",type:{name:"'white' | 'primary'"},defaultValue:{func:!1,value:"'primary'"}},{name:"alignment",type:{name:"'horizontal' | 'vertical'"},defaultValue:{func:!1,value:"'horizontal'"}},{name:"text",type:{name:"string"}},{name:"accessibilityTitle",type:{name:"string"}},{name:"size",type:{name:"'small' | 'large'"},defaultValue:{func:!1,value:"'small'"}}]};var LoadingSpinner_stories_Template=function Template(){return{components:{ScaleLoadingSpinner:ScaleLoadingSpinner},props:Object.assign({label:String},ScaleLoadingSpinner.props),template:"\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    "}},layoutProps={Template:LoadingSpinner_stories_Template};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Loading-Spinner",component:ScaleLoadingSpinner,argTypes:{variant:{control:{type:"select",options:["primary","white"]}},size:{control:{type:"select",options:["small","large","button"]}},alignment:{control:{type:"select",options:["vertical","horizontal"]}},accessibilityTitle:{control:{type:"text"}},text:{control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Loading-Spinner"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h2",{id:"small-size--horizontal-text-primary"},"Small Size & Horizontal Text (Primary)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Primary (horizontal)",args:{text:"Loading ..."},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner text="Loading ..."></scale-loading-spinner>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --size-outer-small: 24px;\n  --size-outer-large: 48px;\n  --size-inner-small: 24px;\n  --size-inner-large: 48px;\n\n  --line-height-size-small: 24px;\n  --line-height-size-large: 48px;\n\n  --font: var(--telekom-text-style-ui-bold);\n\n  --color-circle-primary: var(--telekom-color-primary-standard);\n  --color-circle-primary-inner: var(--telekom-color-ui-subtle);\n  --color-text-primary: var(--telekom-color-text-and-icon-additional);\n  --color-circle-white: var(--telekom-color-ui-base);\n  --color-circle-white-inner: var(--telekom-color-ui-regular);\n  --color-text-white: var(--telekom-color-text-and-icon-white-standard);\n\n  --spacing-vertical: var(--telekom-spacing-composition-space-05);\n  --spacing-horizontal: var(--telekom-spacing-composition-space-06);\n}\n")),Object(esm.b)("h2",{id:"small-size--vertical-text-primary"},"Small Size & Vertical Text (Primary)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Primary (vertical)",args:{text:"Loading ...",alignment:"vertical"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  text="Loading ..."\n  alignment="vertical"\n></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"large-size--horizontal-text-primary"},"Large Size & Horizontal Text (Primary)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large Primary (horizontal)",args:{size:"large",text:"Loading ..."},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner size="large" text="Loading ..."></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"large-size--vertical-text-primary"},"Large Size & Vertical Text (Primary)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large Primary (vertical)",args:{size:"large",text:"Loading ...",alignment:"vertical"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  size="large"\n  text="Loading ..."\n  alignment="vertical"\n></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"small-size-white"},"Small Size (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small White",args:{size:"small",variant:"white"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner size="small" variant="white"></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"small-size--horizontal-text-white"},"Small Size & Horizontal Text (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small White (horizontal)",args:{size:"small",text:"Loading ...",variant:"white"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  size="small"\n  text="Loading ..."\n  variant="white"\n></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"small-size--vertical-text-white"},"Small Size & Vertical Text (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small White (vertical)",args:{size:"small",text:"Loading ...",variant:"white",alignment:"vertical"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  size="small"\n  text="Loading ..."\n  variant="white"\n  alignment="vertical"\n></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"large-size-white"},"Large Size (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large White",args:{size:"large",variant:"white"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner size="large" variant="white"></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"large-size--horizontal-text-white"},"Large Size & Horizontal Text (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large White (horizontal)",args:{size:"large",text:"Loading ...",variant:"white"},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  size="large"\n  text="Loading ..."\n  variant="white"\n></scale-loading-spinner>\n')),Object(esm.b)("h2",{id:"large-size--vertical-text-white"},"Large Size & Vertical Text (White)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large White (vertical)",args:{size:"large",variant:"white",alignment:"vertical",text:"Loading ..."},mdxType:"Story"},LoadingSpinner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-loading-spinner\n  size="large"\n  variant="white"\n  alignment="vertical"\n  text="Loading ..."\n></scale-loading-spinner>\n')))}MDXContent.isMDXComponent=!0;var standard=LoadingSpinner_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var smallPrimaryHorizontal=LoadingSpinner_stories_Template.bind({});smallPrimaryHorizontal.storyName="Small Primary (horizontal)",smallPrimaryHorizontal.args={text:"Loading ..."},smallPrimaryHorizontal.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var smallPrimaryVertical=LoadingSpinner_stories_Template.bind({});smallPrimaryVertical.storyName="Small Primary (vertical)",smallPrimaryVertical.args={text:"Loading ...",alignment:"vertical"},smallPrimaryVertical.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var largePrimaryHorizontal=LoadingSpinner_stories_Template.bind({});largePrimaryHorizontal.storyName="Large Primary (horizontal)",largePrimaryHorizontal.args={size:"large",text:"Loading ..."},largePrimaryHorizontal.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var largePrimaryVertical=LoadingSpinner_stories_Template.bind({});largePrimaryVertical.storyName="Large Primary (vertical)",largePrimaryVertical.args={size:"large",text:"Loading ...",alignment:"vertical"},largePrimaryVertical.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var smallWhite=LoadingSpinner_stories_Template.bind({});smallWhite.storyName="Small White",smallWhite.args={size:"small",variant:"white"},smallWhite.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var smallWhiteHorizontal=LoadingSpinner_stories_Template.bind({});smallWhiteHorizontal.storyName="Small White (horizontal)",smallWhiteHorizontal.args={size:"small",text:"Loading ...",variant:"white"},smallWhiteHorizontal.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var smallWhiteVertical=LoadingSpinner_stories_Template.bind({});smallWhiteVertical.storyName="Small White (vertical)",smallWhiteVertical.args={size:"small",text:"Loading ...",variant:"white",alignment:"vertical"},smallWhiteVertical.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var largeWhite=LoadingSpinner_stories_Template.bind({});largeWhite.storyName="Large White",largeWhite.args={size:"large",variant:"white"},largeWhite.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var largeWhiteHorizontal=LoadingSpinner_stories_Template.bind({});largeWhiteHorizontal.storyName="Large White (horizontal)",largeWhiteHorizontal.args={size:"large",text:"Loading ...",variant:"white"},largeWhiteHorizontal.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var largeWhiteVertical=LoadingSpinner_stories_Template.bind({});largeWhiteVertical.storyName="Large White (vertical)",largeWhiteVertical.args={size:"large",variant:"white",alignment:"vertical",text:"Loading ..."},largeWhiteVertical.parameters={storySource:{source:"() => ({\n  components: {\n    ScaleLoadingSpinner\n  },\n  props: {\n    label: String,\n    ...ScaleLoadingSpinner.props\n  },\n  template: `\n    <div :style=\"variant==='primary' ? 'background: transparent;' : 'background: black;' + ' display: flex; padding: 2em; min-height: 50px; margin: -30px -20px;'\">\n        <scale-loading-spinner\n            :variant='variant'\n            :alignment='alignment'\n            :text='text'\n            :size='size'\n        >\n        </scale-loading-spinner>\n    </div>\n    `\n})"}};var componentMeta={title:"Components/Loading-Spinner",component:ScaleLoadingSpinner,argTypes:{variant:{control:{type:"select",options:["primary","white"]}},size:{control:{type:"select",options:["small","large","button"]}},alignment:{control:{type:"select",options:["vertical","horizontal"]}},accessibilityTitle:{control:{type:"text"}},text:{control:{type:"text"}}},includeStories:["standard","smallPrimaryHorizontal","smallPrimaryVertical","largePrimaryHorizontal","largePrimaryVertical","smallWhite","smallWhiteHorizontal","smallWhiteVertical","largeWhite","largeWhiteHorizontal","largeWhiteVertical"]},mdxStoryNameToKey={Standard:"standard","Small Primary (horizontal)":"smallPrimaryHorizontal","Small Primary (vertical)":"smallPrimaryVertical","Large Primary (horizontal)":"largePrimaryHorizontal","Large Primary (vertical)":"largePrimaryVertical","Small White":"smallWhite","Small White (horizontal)":"smallWhiteHorizontal","Small White (vertical)":"smallWhiteVertical","Large White":"largeWhite","Large White (horizontal)":"largeWhiteHorizontal","Large White (vertical)":"largeWhiteVertical"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/logo/Logo.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Logo_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"white",(function(){return white})),__webpack_require__.d(__webpack_exports__,"sizing",(function(){return sizing})),__webpack_require__.d(__webpack_exports__,"link",(function(){return Logo_stories_link}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),logo_ScaleLogovue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{variant:{type:0,default:"magenta"},transparent:{type:Boolean,default:!1},focusable:{type:Boolean,default:!1},scrollIntoViewOnFocus:{type:Boolean,default:!1},language:{type:0,default:"de"},size:{type:Number,default:38},href:{type:String},styles:{type:String},logoAriaDescribedBy:{type:String},logoTitle:{type:String},logoHideTitle:{type:Boolean}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(logo_ScaleLogovue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-logo",{attrs:{variant:_vm.variant,transparent:_vm.transparent,language:_vm.language,size:_vm.size,styles:_vm.styles,href:_vm.href,"logo-title":_vm.logoTitle,"logo-hide-title":_vm.logoHideTitle,"logo-aria-described-by":_vm.logoAriaDescribedBy,"accessibility-title":_vm.accessibilityTitle,focusable:_vm.focusable,"scroll-into-view-on-focus":_vm.scrollIntoViewOnFocus}})}),[],!1,null,null,null).exports;var ScaleLogo=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleLogo",description:"",tags:{},props:[{name:"variant",type:{name:"'magenta' | 'white'"},defaultValue:{func:!1,value:"'magenta'"}},{name:"transparent",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"focusable",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"scrollIntoViewOnFocus",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"language",type:{name:"'de' |\n'en' |\n'cz' |\n'hr' |\n'hu' |\n'me' |\n'mk_kyr' |\n'mk_lat' |\n'ro' |\n'sk' |\n''"},defaultValue:{func:!1,value:"'de'"}},{name:"size",type:{name:"number"},defaultValue:{func:!1,value:"38"}},{name:"href",type:{name:"string"}},{name:"styles",type:{name:"string"}},{name:"logoAriaDescribedBy",type:{name:"string"}},{name:"logoTitle",type:{name:"string"}},{name:"logoHideTitle",type:{name:"boolean"}}]};var addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Logo_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleLogo:ScaleLogo},props:Object.assign({label:String},ScaleLogo.props),template:'\n    <div :style="variant === \'white\' ? \'background: #e20074; padding: 12px;\' : \'\'">\n        <scale-logo\n            :variant="variant"\n            :transparent="transparent"\n            :language="language"\n            :size="size"\n            :href="href"\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :styles="styles"\n            @click-handler="clickHandler"\n        >\n        </scale-logo>\n    </div>\n    ',methods:{clickHandler:Object(addon_actions_dist_esm.action)("clickHandler")}}},layoutProps={Template:Logo_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Logo",component:ScaleLogo,argTypes:{variant:{control:{type:"select",options:["magenta","white"]}},language:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_kyr","mk_lat","ro","sk",""]},description:"DEPRECATED - localized brand claim is not shown anymore."}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Logo"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},Logo_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h2",{id:"white"},"White"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"White",args:{variant:"white"},mdxType:"Story"},Logo_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-logo variant="white"></scale-logo>\n')),Object(esm.b)("h2",{id:"sizing"},"Sizing"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Sizing",args:{size:100},mdxType:"Story"},Logo_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-logo size="100"></scale-logo>\n')),Object(esm.b)("h2",{id:"link"},"Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Link",args:{language:"de",href:"https://www.telekom.de/start",logoTitle:"Telekom Logo – Erleben, was verbindet – Zur Startseite"},mdxType:"Story"},Logo_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-logo\n  language="de"\n  href="https://www.telekom.de/start"\n  logo-title="Telekom Logo – Erleben, was verbindet – Zur Startseite"\n></scale-logo>\n')))}MDXContent.isMDXComponent=!0;var standard=Logo_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleLogo\n  },\n  props: {\n    label: String,\n    ...ScaleLogo.props\n  },\n  template: `\n    <div :style="variant === \'white\' ? \'background: #e20074; padding: 12px;\' : \'\'">\n        <scale-logo\n            :variant="variant"\n            :transparent="transparent"\n            :language="language"\n            :size="size"\n            :href="href"\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :styles="styles"\n            @click-handler="clickHandler"\n        >\n        </scale-logo>\n    </div>\n    `,\n  methods: {\n    clickHandler: action(\'clickHandler\')\n  }\n})'}};var white=Logo_stories_Template.bind({});white.storyName="White",white.args={variant:"white"},white.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleLogo\n  },\n  props: {\n    label: String,\n    ...ScaleLogo.props\n  },\n  template: `\n    <div :style="variant === \'white\' ? \'background: #e20074; padding: 12px;\' : \'\'">\n        <scale-logo\n            :variant="variant"\n            :transparent="transparent"\n            :language="language"\n            :size="size"\n            :href="href"\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :styles="styles"\n            @click-handler="clickHandler"\n        >\n        </scale-logo>\n    </div>\n    `,\n  methods: {\n    clickHandler: action(\'clickHandler\')\n  }\n})'}};var sizing=Logo_stories_Template.bind({});sizing.storyName="Sizing",sizing.args={size:100},sizing.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleLogo\n  },\n  props: {\n    label: String,\n    ...ScaleLogo.props\n  },\n  template: `\n    <div :style="variant === \'white\' ? \'background: #e20074; padding: 12px;\' : \'\'">\n        <scale-logo\n            :variant="variant"\n            :transparent="transparent"\n            :language="language"\n            :size="size"\n            :href="href"\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :styles="styles"\n            @click-handler="clickHandler"\n        >\n        </scale-logo>\n    </div>\n    `,\n  methods: {\n    clickHandler: action(\'clickHandler\')\n  }\n})'}};var Logo_stories_link=Logo_stories_Template.bind({});Logo_stories_link.storyName="Link",Logo_stories_link.args={language:"de",href:"https://www.telekom.de/start",logoTitle:"Telekom Logo – Erleben, was verbindet – Zur Startseite"},Logo_stories_link.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleLogo\n  },\n  props: {\n    label: String,\n    ...ScaleLogo.props\n  },\n  template: `\n    <div :style="variant === \'white\' ? \'background: #e20074; padding: 12px;\' : \'\'">\n        <scale-logo\n            :variant="variant"\n            :transparent="transparent"\n            :language="language"\n            :size="size"\n            :href="href"\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :styles="styles"\n            @click-handler="clickHandler"\n        >\n        </scale-logo>\n    </div>\n    `,\n  methods: {\n    clickHandler: action(\'clickHandler\')\n  }\n})'}};var componentMeta={title:"Components/Logo",component:ScaleLogo,argTypes:{variant:{control:{type:"select",options:["magenta","white"]}},language:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_kyr","mk_lat","ro","sk",""]},description:"DEPRECATED - localized brand claim is not shown anymore."}},includeStories:["standard","white","sizing","link"]},mdxStoryNameToKey={Standard:"standard",White:"white",Sizing:"sizing",Link:"link"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/modal/Modal.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Modal_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"standardSmall",(function(){return standardSmall})),__webpack_require__.d(__webpack_exports__,"standardLarge",(function(){return standardLarge})),__webpack_require__.d(__webpack_exports__,"noActions",(function(){return noActions})),__webpack_require__.d(__webpack_exports__,"withNoBody",(function(){return withNoBody})),__webpack_require__.d(__webpack_exports__,"scrollingWithActions",(function(){return scrollingWithActions}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),modal_ScaleModalvue_type_script_lang_js_=(Object(addon_actions_dist_esm.action)("scaleClose"),{props:{heading:{type:String,default:"Today is your lucky day"},size:String,variant:String,opened:Boolean,duration:{type:Number,default:200},closeButtonLabel:String,closeButtonTitle:String,omitCloseButton:{type:Boolean,default:!1},alignActions:{type:String,default:"right"},allowInjectingStyleToBody:Boolean,styles:{type:String}},methods:{scaleOpen:function scaleOpen($event){Object(addon_actions_dist_esm.action)("scaleOpen"),this.$emit("scaleOpen",$event)},"scale-open":function scaleOpen($event){Object(addon_actions_dist_esm.action)("scale-open"),this.$emit("scale-open",$event)},scaleBeforeClose:function scaleBeforeClose($event){Object(addon_actions_dist_esm.action)("scaleBeforeClose"),this.$emit("scaleBeforeClose",$event)},"scale-before-close":function scaleBeforeClose($event){Object(addon_actions_dist_esm.action)("scale-before-close"),this.$emit("scale-before-close",$event)},scaleClose:function scaleClose($event){Object(addon_actions_dist_esm.action)("scaleClose"),this.$emit("scaleClose",$event)},"scale-close":function scaleClose($event){Object(addon_actions_dist_esm.action)("scale-close"),this.$emit("scale-close",$event)}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(modal_ScaleModalvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-modal",{attrs:{heading:_vm.heading,size:_vm.size,variant:_vm.size,opened:_vm.opened,duration:_vm.duration,"close-button-label":_vm.closeButtonLabel,"close-button-title":_vm.closeButtonTitle,"omit-close-button":_vm.omitCloseButton,"align-actions":_vm.alignActions,styles:_vm.styles,"allow-injecting-style-to-body":_vm.allowInjectingStyleToBody},on:{scaleClose:_vm.scaleClose,scaleOpen:_vm.scaleOpen,scaleBeforeClose:_vm.scaleBeforeClose}},[_vm._t("close"),_vm._v(" "),_vm._t("default"),_vm._v(" "),_vm._t("actions")],2)}),[],!1,null,null,null).exports;var ScaleModal=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleModal",description:"",tags:{},props:[{name:"heading",type:{name:"string"},defaultValue:{func:!1,value:"'Today is your lucky day'"}},{name:"size",type:{name:"string"}},{name:"variant",type:{name:"string"}},{name:"opened",type:{name:"boolean"}},{name:"duration",type:{name:"number"},defaultValue:{func:!1,value:"200"}},{name:"closeButtonLabel",type:{name:"string"}},{name:"closeButtonTitle",type:{name:"string"}},{name:"omitCloseButton",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"alignActions",type:{name:"string"},defaultValue:{func:!1,value:"'right'"}},{name:"allowInjectingStyleToBody",type:{name:"boolean"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleOpen",type:{names:["undefined"]}},{name:"scale-open",type:{names:["undefined"]}},{name:"scaleBeforeClose",type:{names:["undefined"]}},{name:"scale-before-close",type:{names:["undefined"]}},{name:"scaleClose",type:{names:["undefined"]}},{name:"scale-close",type:{names:["undefined"]}}],slots:[{name:"close"},{name:"default"},{name:"actions"}]};var Modal_stories_Template=function Template(args,context){return{components:{ScaleModal:ScaleModal},props:Object.assign({showActions:Boolean,shortBody:Boolean,longBody:Boolean},ScaleModal.props),data:function data(){return{isOpen:args.opened}},methods:{scaleClose:function scaleClose(){this.isOpen=!1}},template:'\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  '}},layoutProps={Template:Modal_stories_Template};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Modal",component:ScaleModal,argTypes:{size:{control:{type:"select",options:["small","default","large"]}},alignActions:{control:{type:"select",options:["right","left"]}},opened:{control:{disable:!0}},showActions:{table:{disable:!0}},shortBody:{table:{disable:!0}},longBody:{table:{disable:!0}},scaleBeforeClose:{description:"@deprecated in v3 in favor of kebab-case event names."},"scale-before-close":{description:"It fires on every close attempt. Those events can be one of the event.detail.trigger, such as CLOSE_BUTTON, ESCAPE_KEY or BACKDROP, depending on the action that triggered the event. Calling `event.preventDefault()` will prevent the modal from closing."}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Modal"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{opened:!1,showActions:!0,shortBody:!0},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" id="modal">\n  <p>Hello. Welcome. What a pleasure it is to have you.</p>\n  <scale-button slot="action" variant="secondary" onclick="closeModal()">\n    Cancel\n  </scale-button>\n  <scale-button slot="action"> Primary Action </scale-button>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --spacing-x: var(--telekom-spacing-composition-space-06);\n  --background-overlay: var(\n    --telekom-color-background-backdrop,\n    rgba(108, 108, 108, 0.7)\n  );\n\n  --max-height-window: calc(\n    100vh - (2 * var(--telekom-spacing-composition-space-19))\n  );\n  --min-height-window: ; /* undefined by design */\n  --radius-window: var(--telekom-radius-large);\n  --box-shadow-window: var(--telekom-shadow-top);\n  --background-window: var(--telekom-color-background-surface);\n  --color-window: var(--telekom-color-text-and-icon-standard);\n\n  /*\n    we're rudimentarily creating a grid here\n    in the following modal--size-*,\n    with 6, 8 and 12 columns\n\n    -spacing-56 !== --telekom-spacing-unrelated-sm\n  */\n  --size-window-small: calc(\n    (6 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (5 * var(--telekom-spacing-composition-space-10))\n  );\n  --size-window-default: calc(\n    (8 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (7 * var(--telekom-spacing-composition-space-10))\n  );\n  --size-window-large: calc(\n    (12 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (11 * var(--telekom-spacing-composition-space-10))\n  );\n\n  --spacing-x-header: var(--telekom-spacing-composition-space-08);\n  --spacing-y-header: var(--telekom-spacing-composition-space-08);\n\n  --border-bottom-header-has-scroll: var(--telekom-line-weight-standard) solid\n    var(--telekom-color-ui-subtle);\n\n  --font-family-heading: var(--telekom-typography-font-family-sans);\n  --font-size-heading: var(--telekom-typography-font-size-callout);\n  --font-weight-heading: var(--telekom-typography-font-weight-extra-bold);\n\n  --spacing-close-button: var(--telekom-spacing-composition-space-04);\n  --radius-close-button: var(--telekom-radius-standard);\n  --transition-close-button: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --box-shadow-close-button-focus: 0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);\n  --color-close-button: var(--telekom-color-text-and-icon-standard);\n  --color-close-button-hover: var(--telekom-color-primary-hovered);\n  --color-close-button-active: var(--telekom-color-primary-pressed);\n\n  --spacing-x-body-wrapper: var(--telekom-spacing-composition-space-08);\n  --spacing-y-body: var(--telekom-spacing-composition-space-08);\n\n  --spacing-actions: var(--telekom-spacing-composition-space-06)\n    var(--telekom-spacing-composition-space-08)\n    var(--telekom-spacing-composition-space-08);\n\n  --spacing-x-actions-slotted: var(--telekom-spacing-composition-space-04);\n  --background-actions-has-scroll: var(\n    --telekom-color-background-surface-subtle\n  );  \n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"standard-small"},"Standard Small"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard Small",args:{opened:!1,size:"small",showActions:!0,shortBody:!0},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" size="small" id="modal">\n  <p>Hello. Welcome. What a pleasure it is to have you.</p>\n  <scale-button slot="action" variant="secondary" onclick="closeModal()">\n    Cancel\n  </scale-button>\n  <scale-button slot="action"> Primary Action </scale-button>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"standard-large"},"Standard Large"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard Large",args:{opened:!1,size:"large",showActions:!0,shortBody:!0},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" size="large" id="modal">\n  <p>Hello. Welcome. What a pleasure it is to have you.</p>\n  <scale-button slot="action" variant="secondary" onclick="closeModal()">\n    Cancel\n  </scale-button>\n  <scale-button slot="action"> Primary Action </scale-button>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"with-no-actions"},"With No Actions"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"No Actions",args:{opened:!1,size:"small",showActions:!1,shortBody:!0},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" size="small" id="modal">\n  <p>Hello. Welcome. What a pleasure it is to have you.</p>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"with-no-body"},"With No Body"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With No Body",args:{opened:!1,size:"small",showActions:!0,shortBody:!1},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" size="small" id="modal">\n  <scale-button slot="action" variant="secondary" onclick="closeModal()">\n    Cancel\n  </scale-button>\n  <scale-button slot="action"> Primary Action </scale-button>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"scrolling-with-actions"},"Scrolling With Actions"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Scrolling With Actions",args:{opened:!1,showActions:!0,longBody:!0},mdxType:"Story"},Modal_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-modal heading="Today is your lucky day" id="modal">\n  <p>Hello. Welcome. What a pleasure it is to have you.</p>\n  <p>...</p>\n  <p>...</p>\n  <p>...</p>\n  <p>...</p>\n  <scale-button slot="action" variant="secondary" onclick="closeModal()">\n    Cancel\n  </scale-button>\n  <scale-button slot="action"> Primary Action </scale-button>\n</scale-modal>\n\n<script>\n  const modal = document.getElementById(\'modal\');\n  function openModal() {\n    modal.opened = true;\n  }\n  function closeModal() {\n    modal.opened = false;\n  }\n<\/script>\n')))}MDXContent.isMDXComponent=!0;var standard=Modal_stories_Template.bind({});standard.storyName="Standard",standard.args={opened:!1,showActions:!0,shortBody:!0},standard.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var standardSmall=Modal_stories_Template.bind({});standardSmall.storyName="Standard Small",standardSmall.args={opened:!1,size:"small",showActions:!0,shortBody:!0},standardSmall.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var standardLarge=Modal_stories_Template.bind({});standardLarge.storyName="Standard Large",standardLarge.args={opened:!1,size:"large",showActions:!0,shortBody:!0},standardLarge.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var noActions=Modal_stories_Template.bind({});noActions.storyName="No Actions",noActions.args={opened:!1,size:"small",showActions:!1,shortBody:!0},noActions.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var withNoBody=Modal_stories_Template.bind({});withNoBody.storyName="With No Body",withNoBody.args={opened:!1,size:"small",showActions:!0,shortBody:!1},withNoBody.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var scrollingWithActions=Modal_stories_Template.bind({});scrollingWithActions.storyName="Scrolling With Actions",scrollingWithActions.args={opened:!1,showActions:!0,longBody:!0},scrollingWithActions.parameters={storySource:{source:'(args, context) => ({\n  components: {\n    ScaleModal\n  },\n  props: {\n    showActions: Boolean,\n    shortBody: Boolean,\n    longBody: Boolean,\n    ...ScaleModal.props\n  },\n\n  data() {\n    return {\n      isOpen: args.opened\n    };\n  },\n\n  methods: {\n    scaleClose() {\n      this.isOpen = false;\n    }\n\n  },\n  template: `\n    <div>\n      <scale-modal\n        :heading="heading"\n        :size="size"\n        :variant="size"\n        :opened="isOpen"\n        :duration="duration"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        :omit-close-button="omitCloseButton"\n        :align-actions="alignActions"\n        :styles="styles"\n        :allow-injecting-style-to-body="allowInjectingStyleToBody"\n        @scaleClose="scaleClose()"\n      >\n        <template v-if="shortBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n        </template>\n        <template v-if="longBody">\n          <p>Hello. Welcome. What a pleasure it is to have you.</p>\n          <scale-text-field id="text-field" label="Please enter your favorite color" helper-text="Any valid CSS value"></scale-text-field>\n          <p>It is not a disaster. It\'s not a disaster, alright? She\'s not going to the cops, she\'s not telling a living soul. You wanna know why? One word: blowback. If she blabs, it\'ll be a disaster - for her. That DEA brother-in-law? Screwed! You were right under his nose. He\'ll be lucky if they let him bust glue sniffers at the hobby shop. The kids? Paging Dr. Phil! \'My daddy\'s a drug dealer and my mommy turned him in!\' And the house? Gone! The feds will come in and RICO her and the kids out on the street. Good luck arguing with them on that, noooo. It\'s not gonna happen. She\'s bluffing. And she knows it.</p>\n          <p>Today\'s your lucky day. Look around, kiddo - it\'s all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look, hey... this is a squeaky clean, highly profitable (at least potentially), local institution. Look the bottom with favor by the chamber of commerce, better business bureau at three-hundred and twelve thousand dollars, it\'s a steal.</p>\n          <p>Don\'t you get it? On the outside it\'s a nail salon right, on the inside it\'s the best money laundering a growing boy could ask for. Wait, wait! Come back here. Sit. Come on, come on... humor me here for a second. You know you need to launder your money, right? Do you understand the basics of it - placement, layering, integration. Well, you wanna stay out of jail don\'t ya? You wanna keep your money and your freedom. Cause I got three little letters for ya, I - R - S. If they can get Capone, they can get you.</p>\n          <p>What am I eighth grade hall monitor? Current whereabouts? Let me tell you something, Mike. There are rules to this lawyer thing. Attorney client privilege, that\'s a big one. That\'s something I provide for you! If I give up Pinkman, then you\'re gonna be asking, old Saul gives \'em up pretty easy what\'s to keep him from giving me up? You see, so then, where\'s the trust?</p>\n          <p>Look, let\'s start with some tough love, alright? Ready for this? Here it goes: you two suck at peddling meth. Period. Good! \'Oh boo-hoo, I won\'t cook meth anymore!\' You\'re a crybaby! Who needs you?! Hey, I\'m unplugging the website, so no more money laundering! How do you like that?!</p>\n        </template>\n        <template #actions v-if="showActions">\n          <scale-button slot="action" variant="secondary" @click="scaleClose">\n            Cancel\n          </scale-button>\n          <scale-button slot="action" @click="scaleClose">\n            Primary Action\n          </scale-button>\n        </template>\n      </scale-modal>\n      \x3c!--  --\x3e\n      <scale-button @click="isOpen = true">\n        Open Modal\n      </scale-button>\n    </div>\n  `\n})'}};var componentMeta={title:"Components/Modal",component:ScaleModal,argTypes:{size:{control:{type:"select",options:["small","default","large"]}},alignActions:{control:{type:"select",options:["right","left"]}},opened:{control:{disable:!0}},showActions:{table:{disable:!0}},shortBody:{table:{disable:!0}},longBody:{table:{disable:!0}},scaleBeforeClose:{description:"@deprecated in v3 in favor of kebab-case event names."},"scale-before-close":{description:"It fires on every close attempt. Those events can be one of the event.detail.trigger, such as CLOSE_BUTTON, ESCAPE_KEY or BACKDROP, depending on the action that triggered the event. Calling `event.preventDefault()` will prevent the modal from closing."}},includeStories:["standard","standardSmall","standardLarge","noActions","withNoBody","scrollingWithActions"]},mdxStoryNameToKey={Standard:"standard","Standard Small":"standardSmall","Standard Large":"standardLarge","No Actions":"noActions","With No Body":"withNoBody","Scrolling With Actions":"scrollingWithActions"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/notification-badge/NotificationBadge.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"IconTemplate",(function(){return NotificationBadge_stories_IconTemplate})),__webpack_require__.d(__webpack_exports__,"TextTemplate",(function(){return NotificationBadge_stories_TextTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"icon",(function(){return icon})),__webpack_require__.d(__webpack_exports__,"text",(function(){return NotificationBadge_stories_text})),__webpack_require__.d(__webpack_exports__,"labelIcon",(function(){return labelIcon})),__webpack_require__.d(__webpack_exports__,"labelText",(function(){return labelText}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),notification_badge_ScaleNotificationBadgevue_type_script_lang_js_={props:{label:{type:String},type:{type:0,default:"icon"}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(notification_badge_ScaleNotificationBadgevue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-notification-badge",{attrs:{label:this.label,type:this.type}},[this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleNotificationBadge=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleNotificationBadge",description:"",tags:{},props:[{name:"label",type:{name:"string"}},{name:"type",type:{name:"'icon' | 'text'"},defaultValue:{func:!1,value:"'icon'"}}],slots:[{name:"default"}]};var addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var NotificationBadge_stories_IconTemplate=function IconTemplate(args,_ref){_ref.argTypes;return{props:Object.assign({label:String},ScaleNotificationBadge.props),template:'\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><scale-icon-user-file-user></scale-icon-user-file-user></scale-notification-badge>\n  ',methods:{action:addon_actions_dist_esm.action}}},NotificationBadge_stories_TextTemplate=function TextTemplate(args,_ref2){_ref2.argTypes;return{props:Object.assign({label:String},ScaleNotificationBadge.props),template:'\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><b>Service</b></scale-notification-badge>\n  ',methods:{action:addon_actions_dist_esm.action}}},layoutProps={IconTemplate:NotificationBadge_stories_IconTemplate,TextTemplate:NotificationBadge_stories_TextTemplate};function MDXContent(_ref3){var components=_ref3.components,props=_objectWithoutProperties(_ref3,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Beta Components/Notification Badge",component:ScaleNotificationBadge,argTypes:{userNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"},iconNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Notification Badge"),Object(esm.b)("img",{src:"assets/beta.png",alt:"Beta Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},NotificationBadge_stories_IconTemplate.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-notification-badge>\n  <scale-icon-user-file-user> </scale-icon-user-file-user>\n</scale-notification-badge>\n")),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  /*after-badge-slot*/\n  --padding-type-text-after-badge-slot: 0 0 0 12px;\n  --padding-type-icon-after-badge-slot: 0 0 0 7px;\n\n  /*notification-badge circle*/\n  --background-color-circle: var(--telekom-color-primary-standard);\n  --color-circle: var(--telekom-color-text-and-icon-inverted-standard);\n  --font-size-circle: var(--telekom-typography-font-size-badge);\n  --font-weight-circle: bold;\n  --border-radius-circle: var(--telekom-radius-circle);\n\n  /*border*/\n  --color-notification-badge-border-focus: var(\n    --telekom-color-functional-focus-standard\n  );\n  --color-notification-badge-border-hover: var(\n    --telekom-color-text-and-icon-primary-hovered\n  );\n  --line-width-notification-badge-border-focus: 2px;\n  --padding-notification-badge-border: 8px 5px 0 5px;\n  --margin-notification-badge-border: -8px -5px 0 -5px;\n}\n")),Object(esm.b)("h2",{id:"badge-without-label"},"Badge without Label"),Object(esm.b)("h3",{id:"icon"},"Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon",args:{type:"icon"},mdxType:"Story"},NotificationBadge_stories_IconTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-badge type="icon">\n  <scale-icon-user-file-user></scale-icon-user-file-user>\n</scale-notification-badge>\n')),Object(esm.b)("h3",{id:"text"},"Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Text",args:{type:"text"},mdxType:"Story"},NotificationBadge_stories_TextTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-badge type="text">\n  <b>Service</b>\n</scale-notification-badge>\n')),Object(esm.b)("h2",{id:"badge-with-label"},"Badge with Label"),Object(esm.b)("h3",{id:"icon-1"},"Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Label icon",args:{type:"icon",label:"1000000"},mdxType:"Story"},NotificationBadge_stories_IconTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-badge label="1000000" type="icon">\n  <scale-icon-user-file-user></scale-icon-user-file-user>\n</scale-notification-badge>\n')),Object(esm.b)("h3",{id:"text-1"},"Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Label text",args:{type:"text",label:"1000"},mdxType:"Story"},NotificationBadge_stories_TextTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-badge label="10000" type="text">\n  <b>Service</b>\n</scale-notification-badge>\n')))}MDXContent.isMDXComponent=!0;var standard=NotificationBadge_stories_IconTemplate.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleNotificationBadge.props\n  },\n  template: `\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><scale-icon-user-file-user></scale-icon-user-file-user></scale-notification-badge>\n  `,\n  methods: {\n    action\n  }\n})'}};var icon=NotificationBadge_stories_IconTemplate.bind({});icon.storyName="Icon",icon.args={type:"icon"},icon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleNotificationBadge.props\n  },\n  template: `\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><scale-icon-user-file-user></scale-icon-user-file-user></scale-notification-badge>\n  `,\n  methods: {\n    action\n  }\n})'}};var NotificationBadge_stories_text=NotificationBadge_stories_TextTemplate.bind({});NotificationBadge_stories_text.storyName="Text",NotificationBadge_stories_text.args={type:"text"},NotificationBadge_stories_text.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleNotificationBadge.props\n  },\n  template: `\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><b>Service</b></scale-notification-badge>\n  `,\n  methods: {\n    action\n  }\n})'}};var labelIcon=NotificationBadge_stories_IconTemplate.bind({});labelIcon.storyName="Label icon",labelIcon.args={type:"icon",label:"1000000"},labelIcon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleNotificationBadge.props\n  },\n  template: `\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><scale-icon-user-file-user></scale-icon-user-file-user></scale-notification-badge>\n  `,\n  methods: {\n    action\n  }\n})'}};var labelText=NotificationBadge_stories_TextTemplate.bind({});labelText.storyName="Label text",labelText.args={type:"text",label:"1000"},labelText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleNotificationBadge.props\n  },\n  template: `\n    <scale-notification-badge\n      :type="type"\n      :label="label"\n    ><b>Service</b></scale-notification-badge>\n  `,\n  methods: {\n    action\n  }\n})'}};var componentMeta={title:"Beta Components/Notification Badge",component:ScaleNotificationBadge,argTypes:{userNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"},iconNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"}},includeStories:["standard","icon","text","labelIcon","labelText"]},mdxStoryNameToKey={Standard:"standard",Icon:"icon",Text:"text","Label icon":"labelIcon","Label text":"labelText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/notification/Notification.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Notification_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return inline})),__webpack_require__.d(__webpack_exports__,"banner",(function(){return banner})),__webpack_require__.d(__webpack_exports__,"toast",(function(){return toast})),__webpack_require__.d(__webpack_exports__,"toastStack",(function(){return Notification_stories_toastStack})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"informational",(function(){return informational})),__webpack_require__.d(__webpack_exports__,"danger",(function(){return danger})),__webpack_require__.d(__webpack_exports__,"warning",(function(){return warning}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),notification_ScaleNotificationvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{heading:{type:String},type:{type:0,default:"inline"},variant:{type:0,default:"informational"},opened:{type:Boolean},dismissible:{type:Boolean},delay:{type:Number},innerAriaLive:{type:String},innerRole:{type:String,default:"alert"},closeButtonLabel:{type:String},closeButtonTitle:{type:String},styles:{type:String},ariaHeading:{type:String}},render:function render(){return this.$slots.default}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(notification_ScaleNotificationvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("text")],2)}),[],!1,null,null,null).exports;var ScaleNotification=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleNotification",description:"",tags:{},props:[{name:"heading",type:{name:"string"}},{name:"type",type:{name:"'inline' | 'banner' | 'toast'"},defaultValue:{func:!1,value:"'inline'"}},{name:"variant",type:{name:"'danger' | 'warning' | 'success' | 'informational'"},defaultValue:{func:!1,value:"'informational'"}},{name:"opened",type:{name:"boolean"}},{name:"dismissible",type:{name:"boolean"}},{name:"delay",type:{name:"number"}},{name:"innerAriaLive",type:{name:"string"}},{name:"innerRole",type:{name:"string"},defaultValue:{func:!1,value:"'alert'"}},{name:"closeButtonLabel",type:{name:"string"}},{name:"closeButtonTitle",type:{name:"string"}},{name:"styles",type:{name:"string"}},{name:"ariaHeading",type:{name:"string"}}],slots:[{name:"text"},{name:"default"}]};var Notification_stories_Template=function Template(args,context){return{props:Object.assign({text:String},ScaleNotification.props),template:'\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  ',methods:{emitOpen:Object(addon_actions_dist_esm.action)("scale-open"),emitBeforeClose:Object(addon_actions_dist_esm.action)("scale-before-close"),emitClose:Object(addon_actions_dist_esm.action)("scale-close")}}},layoutProps={Template:Notification_stories_Template};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Notification",component:ScaleNotification,argTypes:{heading:{control:{type:"text"}},type:{options:["inline","banner","toast"],control:{type:"select"}},variant:{options:["informational","warning","success","danger"],control:{type:"select"}},opened:{defaultValue:!0,control:{type:"boolean"}},dismissible:{defaultValue:!0,control:{type:"boolean"}},delay:{control:{type:"number"}},innerAriaLive:{control:{type:"text"},description:"Deprecated! innerAriaLive has been replaced by innerRole"},headingLevel:{control:{type:"number"}},ariaHeading:{defaultValue:"Information:",control:{type:"text"}},closeButtonLabel:{control:{type:"text"}},closeButtonTitle:{control:{type:"text"}},"scale-open":{description:"Fires after the notification has been opened",table:{category:"Events"}},"scale-before-close":{description:"Fires on every close attempt. Calling `event.preventDefault()` will prevent the modal from closing",table:{category:"Events"}},"scale-close":{description:"Fires after the notification has been closed",table:{category:"Events"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Notification"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{heading:"Info notification with icon, title, copytext and close",text:"Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore."},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Success notification with icon, title, copytext and close"\n  dismissible\n  opened\n>\n  <span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>\n</scale-notification>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 100%;\n  --width-toast: 25rem;\n  --radius: var(--telekom-radius-standard);\n  --spacing-y: var(--telekom-spacing-composition-space-06);\n  --spacing-y-inner: var(--telekom-spacing-composition-space-04);\n  --spacing-x-aside: var(--telekom-spacing-composition-space-14);\n\n  --duration-in: var(--telekom-motion-duration-transition);\n  --duration-out: var(--telekom-motion-duration-transition);\n  --easing-in: var(--telekom-motion-easing-enter);\n  --easing-out: var(--telekom-motion-easing-exit);\n  --translate-x: 0;\n  --translate-y: 0;\n  --translate-z: 0;\n}\n")),Object(esm.b)("h2",{id:"types"},"Types"),Object(esm.b)("h3",{id:"inline-default"},"Inline (default)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Inline",args:{heading:"Info notification with icon, title and close"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Info notification with icon, title and close"\n  opened\n></scale-notification>\n')),Object(esm.b)("h3",{id:"banner"},"Banner"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Banner",args:{heading:"Success notification with icon, title and close",type:"banner",variant:"success",ariaHeading:"Success:"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Success notification with icon, title and close"\n  type="banner"\n  variant="success"\n></scale-notification>\n')),Object(esm.b)("h3",{id:"toast"},"Toast"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Toast",args:{heading:"Warning toast headline",type:"toast",variant:"warning",text:"Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.",ariaHeading:"Warning:"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Warning toast headline"\n  type="toast"\n  variant="warning"\n  dismissible\n  opened\n>\n  <span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>\n</scale-notification>\n')),Object(esm.b)("h4",{id:"toast-stack"},"Toast Stack"),Object(esm.b)("p",null,'In order to "toast" a notification, append it to a div with the ',Object(esm.b)("inlineCode",{parentName:"p"},".scl-toast-stack")," class. Listen to the ",Object(esm.b)("inlineCode",{parentName:"p"},"scale-close")," event if you'd like to remove them from the DOM after being dismissed."),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Toast Stack",mdxType:"Story"},{data:function data(){return{count:1,delay:0,variants:["informational","warning","success","danger"],currentVariant:0}},computed:{variant:function variant(){var s=this.variants[this.currentVariant];return s.charAt(0).toUpperCase()+s.slice(1)}},template:'\n        <div>\n          <div ref="stack" class="scl-toast-stack"></div>\n          <div style="display: flex; gap: var(--telekom-spacing-unit-x12); align-items: center">\n            <scale-button variant="secondary" @click="create">Show</scale-button>\n            <scale-slider\n              @scale-change="$event => this.delay = $event.target.value"\n              label="Delay"\n              min="0"\n              max="10"\n              show-step-marks\n              unit="s"\n              helper-text="0 means no timeout."\n            ></scale-slider>\n          </div>\n        </div>\n      ',methods:{create:function create(){var _this=this,toast=Object.assign(document.createElement("scale-notification"),{heading:this.variant+" toast headline #"+this.count++,type:"toast",variant:this.variants[this.currentVariant],delay:0===this.delay?void 0:1e3*this.delay,dismissible:!0,opened:!1,innerHTML:'<span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>'});toast.addEventListener("scale-open",(function handleOpen(){_this.emitOpen(),toast.removeEventListener("scale-open",handleOpen)})),toast.addEventListener("scale-before-close",(function handleBeforeClose(event){_this.emitBeforeClose(),toast.removeEventListener("scale-before-close",handleBeforeClose)})),toast.addEventListener("scale-close",(function handleClose(){_this.emitClose(),toast.removeEventListener("scale-close",handleClose),toast.remove()})),this.$refs.stack.prepend(toast),toast.opened=!0,this.currentVariant=(this.currentVariant+1)%this.variants.length},emitOpen:Object(addon_actions_dist_esm.action)("scale-open"),emitClose:Object(addon_actions_dist_esm.action)("scale-close"),emitBeforeClose:Object(addon_actions_dist_esm.action)("scale-before-close")}})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div class="scl-toast-stack">\n  <scale-notification\n    heading="Informational toast headline"\n    type="toast"\n    dismissible\n    delay="10000"\n    opened\n  >\n    <span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>\n  </scale-notification>\n</div>\n')),Object(esm.b)("h2",{id:"variants"},"Variants"),Object(esm.b)("h3",{id:"success"},"Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Success",args:{heading:"Success notification with icon and title",variant:"success",dismissible:!1,ariaHeading:"Success:"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Success notification with icon and title"\n  variant="success"\n  opened\n></scale-notification>\n')),Object(esm.b)("h3",{id:"informational-default"},"Informational (default)"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Informational",args:{heading:"Informational notification with icon and title",variant:"informational",dismissible:!1},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Informational notification with icon and title"\n  variant="informational"\n  opened\n></scale-notification>\n')),Object(esm.b)("h3",{id:"danger"},"Danger"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Danger",args:{heading:"Danger notification with icon and title",variant:"danger",dismissible:!1,ariaHeading:"Danger:"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Danger notification with icon and title"\n  variant="danger"\n  opened\n></scale-notification>\n')),Object(esm.b)("h3",{id:"warning"},"Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Warning",args:{heading:"Warning notification with icon and title",variant:"warning",dismissible:!1,ariaHeading:"Warning:"},mdxType:"Story"},Notification_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification\n  heading="Warning notification with icon and title"\n  variant="warning"\n  opened\n></scale-notification>\n')))}MDXContent.isMDXComponent=!0;var standard=Notification_stories_Template.bind({});standard.storyName="Standard",standard.args={heading:"Info notification with icon, title, copytext and close",text:"Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore."},standard.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var inline=Notification_stories_Template.bind({});inline.storyName="Inline",inline.args={heading:"Info notification with icon, title and close"},inline.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var banner=Notification_stories_Template.bind({});banner.storyName="Banner",banner.args={heading:"Success notification with icon, title and close",type:"banner",variant:"success",ariaHeading:"Success:"},banner.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var toast=Notification_stories_Template.bind({});toast.storyName="Toast",toast.args={heading:"Warning toast headline",type:"toast",variant:"warning",text:"Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.",ariaHeading:"Warning:"},toast.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var Notification_stories_toastStack=function toastStack(){return{data:function data(){return{count:1,delay:0,variants:["informational","warning","success","danger"],currentVariant:0}},computed:{variant:function variant(){var s=this.variants[this.currentVariant];return s.charAt(0).toUpperCase()+s.slice(1)}},template:'\n        <div>\n          <div ref="stack" class="scl-toast-stack"></div>\n          <div style="display: flex; gap: var(--telekom-spacing-unit-x12); align-items: center">\n            <scale-button variant="secondary" @click="create">Show</scale-button>\n            <scale-slider\n              @scale-change="$event => this.delay = $event.target.value"\n              label="Delay"\n              min="0"\n              max="10"\n              show-step-marks\n              unit="s"\n              helper-text="0 means no timeout."\n            ></scale-slider>\n          </div>\n        </div>\n      ',methods:{create:function create(){var _this2=this,toast=Object.assign(document.createElement("scale-notification"),{heading:this.variant+" toast headline #"+this.count++,type:"toast",variant:this.variants[this.currentVariant],delay:0===this.delay?void 0:1e3*this.delay,dismissible:!0,opened:!1,innerHTML:'<span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>'});toast.addEventListener("scale-open",(function handleOpen(){_this2.emitOpen(),toast.removeEventListener("scale-open",handleOpen)})),toast.addEventListener("scale-before-close",(function handleBeforeClose(event){_this2.emitBeforeClose(),toast.removeEventListener("scale-before-close",handleBeforeClose)})),toast.addEventListener("scale-close",(function handleClose(){_this2.emitClose(),toast.removeEventListener("scale-close",handleClose),toast.remove()})),this.$refs.stack.prepend(toast),toast.opened=!0,this.currentVariant=(this.currentVariant+1)%this.variants.length},emitOpen:Object(addon_actions_dist_esm.action)("scale-open"),emitClose:Object(addon_actions_dist_esm.action)("scale-close"),emitBeforeClose:Object(addon_actions_dist_esm.action)("scale-before-close")}}};Notification_stories_toastStack.storyName="Toast Stack",Notification_stories_toastStack.parameters={storySource:{source:"{\n  data() {\n    return {\n      count: 1,\n      delay: 0,\n      variants: ['informational', 'warning', 'success', 'danger'],\n      currentVariant: 0\n    };\n  },\n\n  computed: {\n    variant() {\n      const s = this.variants[this.currentVariant];\n      return s.charAt(0).toUpperCase() + s.slice(1);\n    }\n\n  },\n  template: `\n        <div>\n          <div ref=\"stack\" class=\"scl-toast-stack\"></div>\n          <div style=\"display: flex; gap: var(--telekom-spacing-unit-x12); align-items: center\">\n            <scale-button variant=\"secondary\" @click=\"create\">Show</scale-button>\n            <scale-slider\n              @scale-change=\"$event => this.delay = $event.target.value\"\n              label=\"Delay\"\n              min=\"0\"\n              max=\"10\"\n              show-step-marks\n              unit=\"s\"\n              helper-text=\"0 means no timeout.\"\n            ></scale-slider>\n          </div>\n        </div>\n      `,\n  methods: {\n    create() {\n      const toast = Object.assign(document.createElement('scale-notification'), {\n        heading: `${this.variant} toast headline #${this.count++}`,\n        type: 'toast',\n        variant: this.variants[this.currentVariant],\n        delay: this.delay === 0 ? undefined : this.delay * 1000,\n        dismissible: true,\n        opened: false,\n        innerHTML: '<span slot=\"text\">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>'\n      });\n\n      const handleOpen = () => {\n        this.emitOpen();\n        toast.removeEventListener('scale-open', handleOpen);\n      };\n\n      const handleBeforeClose = event => {\n        this.emitBeforeClose();\n        toast.removeEventListener('scale-before-close', handleBeforeClose);\n      };\n\n      const handleClose = () => {\n        this.emitClose();\n        toast.removeEventListener('scale-close', handleClose);\n        toast.remove();\n      };\n\n      toast.addEventListener('scale-open', handleOpen);\n      toast.addEventListener('scale-before-close', handleBeforeClose);\n      toast.addEventListener('scale-close', handleClose);\n      this.$refs.stack.prepend(toast);\n      toast.opened = true;\n      this.currentVariant = (this.currentVariant + 1) % this.variants.length;\n    },\n\n    emitOpen: action('scale-open'),\n    emitClose: action('scale-close'),\n    emitBeforeClose: action('scale-before-close')\n  }\n}"}};var success=Notification_stories_Template.bind({});success.storyName="Success",success.args={heading:"Success notification with icon and title",variant:"success",dismissible:!1,ariaHeading:"Success:"},success.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var informational=Notification_stories_Template.bind({});informational.storyName="Informational",informational.args={heading:"Informational notification with icon and title",variant:"informational",dismissible:!1},informational.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var danger=Notification_stories_Template.bind({});danger.storyName="Danger",danger.args={heading:"Danger notification with icon and title",variant:"danger",dismissible:!1,ariaHeading:"Danger:"},danger.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var warning=Notification_stories_Template.bind({});warning.storyName="Warning",warning.args={heading:"Warning notification with icon and title",variant:"warning",dismissible:!1,ariaHeading:"Warning:"},warning.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    text: String,\n    ...ScaleNotification.props\n  },\n  template: `\n    <div>\n      <scale-notification\n        :heading="heading"\n        :type="type"\n        :variant="variant"\n        :opened="opened"\n        :dismissible="dismissible"\n        :aria-heading="ariaHeading"\n        :delay="delay"\n        :inner-aria-live="innerAriaLive"\n        :close-button-label="closeButtonLabel"\n        :close-button-title="closeButtonTitle"\n        @scale-open="emitOpen"\n        @scale-before-close="emitBeforeClose"\n        @scale-close="emitClose"\n      >\n        <span v-if="text" slot="text">{{ text }}</span>\n      </scale-notification>\n    </div>\n  `,\n  methods: {\n    emitOpen: action(\'scale-open\'),\n    emitBeforeClose: action(\'scale-before-close\'),\n    emitClose: action(\'scale-close\')\n  }\n})'}};var componentMeta={title:"Components/Notification",component:ScaleNotification,argTypes:{heading:{control:{type:"text"}},type:{options:["inline","banner","toast"],control:{type:"select"}},variant:{options:["informational","warning","success","danger"],control:{type:"select"}},opened:{defaultValue:!0,control:{type:"boolean"}},dismissible:{defaultValue:!0,control:{type:"boolean"}},delay:{control:{type:"number"}},innerAriaLive:{control:{type:"text"},description:"Deprecated! innerAriaLive has been replaced by innerRole"},headingLevel:{control:{type:"number"}},ariaHeading:{defaultValue:"Information:",control:{type:"text"}},closeButtonLabel:{control:{type:"text"}},closeButtonTitle:{control:{type:"text"}},"scale-open":{description:"Fires after the notification has been opened",table:{category:"Events"}},"scale-before-close":{description:"Fires on every close attempt. Calling `event.preventDefault()` will prevent the modal from closing",table:{category:"Events"}},"scale-close":{description:"Fires after the notification has been closed",table:{category:"Events"}}},includeStories:["standard","inline","banner","toast","toastStack","success","informational","danger","warning"]},mdxStoryNameToKey={Standard:"standard",Inline:"inline",Banner:"banner",Toast:"toast","Toast Stack":"toastStack",Success:"success",Informational:"informational",Danger:"danger",Warning:"warning"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/pagination/Pagination.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Pagination_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateEmbedded",(function(){return Pagination_stories_TemplateEmbedded})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"hiddenBorders",(function(){return hiddenBorders})),__webpack_require__.d(__webpack_exports__,"translatedAriaLabels",(function(){return translatedAriaLabels}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),pagination_ScalePaginationvue_type_script_lang_js_={props:{hideBorders:{type:Boolean,default:!1},hideBorder:{type:Boolean,default:!1},pageSize:{type:Number,default:10},startElement:{type:Number,default:0},totalElements:{type:Number,default:1},styles:{type:String},small:{type:Boolean,default:!1},size:{type:String,default:"large"},ariaLabelFirstPage:{type:String,default:"Go to first page"},ariaLabelLastPage:{type:String,default:"Go to last page"},ariaLabelPreviousPage:{type:String,default:"Go to previous page"},ariaLabelNextPage:{type:String,default:"Go to next page"}},methods:{scalePagination:function scalePagination($event){Object(addon_actions_dist_esm.action)("scalePagination"),this.$emit("scalePagination",$event)},"scale-pagination":function scalePagination($event){Object(addon_actions_dist_esm.action)("scale-pagination"),this.$emit("scale-pagination",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(pagination_ScalePaginationvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-pagination",{attrs:{"hide-borders":_vm.hideBorders,"hide-border":_vm.hideBorder,"page-size":_vm.pageSize,small:_vm.small,size:_vm.size,"start-element":_vm.startElement,"total-elements":_vm.totalElements,"aria-label-first-page":_vm.ariaLabelFirstPage,"aria-label-last-page":_vm.ariaLabelLastPage,"aria-label-previous-page":_vm.ariaLabelPreviousPage,"aria-label-next-page":_vm.ariaLabelNextPage,styles:_vm.styles},on:{scalePagination:_vm.scalePagination}})}),[],!1,null,null,null).exports;var ScalePagination=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScalePagination",description:"",tags:{},props:[{name:"hideBorders",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"hideBorder",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"pageSize",type:{name:"number"},defaultValue:{func:!1,value:"10"}},{name:"startElement",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"totalElements",type:{name:"number"},defaultValue:{func:!1,value:"1"}},{name:"styles",type:{name:"string"}},{name:"small",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'large'"}},{name:"ariaLabelFirstPage",type:{name:"string"},defaultValue:{func:!1,value:"'Go to first page'"}},{name:"ariaLabelLastPage",type:{name:"string"},defaultValue:{func:!1,value:"'Go to last page'"}},{name:"ariaLabelPreviousPage",type:{name:"string"},defaultValue:{func:!1,value:"'Go to previous page'"}},{name:"ariaLabelNextPage",type:{name:"string"},defaultValue:{func:!1,value:"'Go to next page'"}}],events:[{name:"scalePagination",type:{names:["undefined"]}},{name:"scale-pagination",type:{names:["undefined"]}}]};var Pagination_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScalePagination:ScalePagination},props:Object.assign({},ScalePagination.props),template:'\n    <scale-pagination\n    :hide-borders="hideBorders"\n    :hide-border="hideBorder"\n    :page-size="pageSize"\n    :start-element="startElement"\n    :total-elements="totalElements"\n    :aria-label-first-page="ariaLabelFirstPage"\n    :aria-label-last-page="ariaLabelLastPage"\n    :aria-label-previous-page="ariaLabelPreviousPage"\n    :aria-label-next-page="ariaLabelNextPage"\n    :styles="styles"\n  >\n  </scale-pagination>\n        '}},Pagination_stories_TemplateEmbedded=function TemplateEmbedded(args,_ref2){_ref2.argTypes;return{components:{ScalePagination:ScalePagination},props:Object.assign({},ScalePagination.props),template:'\n  <div style="border: 1px solid #000; display: flex; align-items: center;  overflow: auto;">\n    <scale-pagination\n        :hide-borders="hideBorders"\n        :hide-border="hideBorder"\n        :page-size="pageSize"\n        :start-element="startElement"\n        :total-elements="totalElements"\n        :styles="styles"\n    >\n    </scale-pagination>\n  </div>'}},layoutProps={Template:Pagination_stories_Template,TemplateEmbedded:Pagination_stories_TemplateEmbedded};function MDXContent(_ref3){var components=_ref3.components,props=_objectWithoutProperties(_ref3,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Pagination",component:ScalePagination,argTypes:{hideBorders:{table:{type:{summary:"Boolean"},defaultValue:{summary:!1}},description:"(optional) Deprecated; hideBorder should replace hideBorders",control:{type:"boolean"}},hideBorder:{table:{type:{summary:"Boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide top and bottom borders",control:{type:"boolean"}},pageSize:{table:{type:{summary:"number"},defaultValue:{summary:10}},description:"(optional) Set number of rows/elements to show per page",control:{type:null}},startElement:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Index of first element to display",control:{type:null}},totalElements:{table:{type:{summary:"number"},defaultValue:{summary:1}},description:"(optional) Total number of rows/elements used to calculate page displays",control:{type:null}},styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},small:{table:{type:{summary:"boolean"}},description:"(optional) DEPRECATED - css overwrite should replace small",control:{type:null}},size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED -  css overwrite should replace size",control:{type:null}},ariaLabelFirstPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to first page'",control:{type:null}},ariaLabelNextPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to next page'",control:{type:null}},ariaLabelPreviousPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to previous page'",control:{type:null}},ariaLabelLastPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to last page'",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Pagination"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{pageSize:10,startElement:100,totalElements:200},mdxType:"Story"},Pagination_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-pagination\n  page-size="10"\n  start-element="100"\n  total-elements="200"\n></scale-pagination>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --color: var(--telekom-color-text-and-icon-standard);\n  --radius: var(--telekom-radius-standard);\n  --font-size: var(--telekom-typography-font-size-small);\n  --border: 1px solid var(--telekom-color-ui-faint);\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --color-button: var(--telekom-color-ui-subtle);\n  --border-button: var(--border);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --radius-first-prompt: var(--radius) 0 0 var(--radius);\n  --radius-last-prompt: 0 var(--radius) var(--radius) 0;\n  --radius-first-prompt-stack: 0 0 0 var(--radius);\n  --radius-last-prompt-stack: 0 0 var(--radius) 0;\n  --stroke-svg: var(--telekom-color-ui-extra-strong);\n  --stroke-svg-high-contrast: #fff;\n  --width-button: 44px;\n  --padding-info: var(--telekom-spacing-composition-space-04);\n  --height-button: 44px;\n  --line-height-info: calc(var(--height-button) - 2px);\n}\n")),Object(esm.b)("h2",{id:"hidden-borders"},"Hidden Borders"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Hidden Borders",args:{pageSize:5,startElement:100,totalElements:200,hideBorder:!0},mdxType:"Story"},Pagination_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-pagination\n  page-size="5"\n  start-element="100"\n  total-elements="200"\n  hide-border\n></scale-pagination>\n')),Object(esm.b)("h2",{id:"translated-aria-labels"},"Translated Aria Labels"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Translated Aria Labels",args:{pageSize:10,startElement:100,totalElements:200,ariaLabelFirstPage:"Zur ersten Seite",ariaLabelLastPage:"Zur letzten Seite",ariaLabelPreviousPage:"Zur vorigen Seite",ariaLabelNextPage:"Zur nächsten Seite"},mdxType:"Story"},Pagination_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-pagination\n  page-size="10"\n  start-element="100"\n  total-elements="200"\n  aria-label-first-page="Zur ersten Seite"\n  aria-label-last-page="Zur nächsten Seite"\n  aria-label-previous-page="Zur vorigen Seite"\n  aria-label-next-page="Zur letzten Seite"\n></scale-pagination>\n')))}MDXContent.isMDXComponent=!0;var standard=Pagination_stories_Template.bind({});standard.storyName="Standard",standard.args={pageSize:10,startElement:100,totalElements:200},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScalePagination\n  },\n  props: { ...ScalePagination.props\n  },\n  template: `\n    <scale-pagination\n    :hide-borders="hideBorders"\n    :hide-border="hideBorder"\n    :page-size="pageSize"\n    :start-element="startElement"\n    :total-elements="totalElements"\n    :aria-label-first-page="ariaLabelFirstPage"\n    :aria-label-last-page="ariaLabelLastPage"\n    :aria-label-previous-page="ariaLabelPreviousPage"\n    :aria-label-next-page="ariaLabelNextPage"\n    :styles="styles"\n  >\n  </scale-pagination>\n        `\n})'}};var hiddenBorders=Pagination_stories_Template.bind({});hiddenBorders.storyName="Hidden Borders",hiddenBorders.args={pageSize:5,startElement:100,totalElements:200,hideBorder:!0},hiddenBorders.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScalePagination\n  },\n  props: { ...ScalePagination.props\n  },\n  template: `\n    <scale-pagination\n    :hide-borders="hideBorders"\n    :hide-border="hideBorder"\n    :page-size="pageSize"\n    :start-element="startElement"\n    :total-elements="totalElements"\n    :aria-label-first-page="ariaLabelFirstPage"\n    :aria-label-last-page="ariaLabelLastPage"\n    :aria-label-previous-page="ariaLabelPreviousPage"\n    :aria-label-next-page="ariaLabelNextPage"\n    :styles="styles"\n  >\n  </scale-pagination>\n        `\n})'}};var translatedAriaLabels=Pagination_stories_Template.bind({});translatedAriaLabels.storyName="Translated Aria Labels",translatedAriaLabels.args={pageSize:10,startElement:100,totalElements:200,ariaLabelFirstPage:"Zur ersten Seite",ariaLabelLastPage:"Zur letzten Seite",ariaLabelPreviousPage:"Zur vorigen Seite",ariaLabelNextPage:"Zur nächsten Seite"},translatedAriaLabels.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScalePagination\n  },\n  props: { ...ScalePagination.props\n  },\n  template: `\n    <scale-pagination\n    :hide-borders="hideBorders"\n    :hide-border="hideBorder"\n    :page-size="pageSize"\n    :start-element="startElement"\n    :total-elements="totalElements"\n    :aria-label-first-page="ariaLabelFirstPage"\n    :aria-label-last-page="ariaLabelLastPage"\n    :aria-label-previous-page="ariaLabelPreviousPage"\n    :aria-label-next-page="ariaLabelNextPage"\n    :styles="styles"\n  >\n  </scale-pagination>\n        `\n})'}};var componentMeta={title:"Components/Pagination",component:ScalePagination,argTypes:{hideBorders:{table:{type:{summary:"Boolean"},defaultValue:{summary:!1}},description:"(optional) Deprecated; hideBorder should replace hideBorders",control:{type:"boolean"}},hideBorder:{table:{type:{summary:"Boolean"},defaultValue:{summary:!1}},description:"(optional) Set to true to hide top and bottom borders",control:{type:"boolean"}},pageSize:{table:{type:{summary:"number"},defaultValue:{summary:10}},description:"(optional) Set number of rows/elements to show per page",control:{type:null}},startElement:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Index of first element to display",control:{type:null}},totalElements:{table:{type:{summary:"number"},defaultValue:{summary:1}},description:"(optional) Total number of rows/elements used to calculate page displays",control:{type:null}},styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},small:{table:{type:{summary:"boolean"}},description:"(optional) DEPRECATED - css overwrite should replace small",control:{type:null}},size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED -  css overwrite should replace size",control:{type:null}},ariaLabelFirstPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to first page'",control:{type:null}},ariaLabelNextPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to next page'",control:{type:null}},ariaLabelPreviousPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to previous page'",control:{type:null}},ariaLabelLastPage:{table:{type:{summary:"string"}},description:"(optional) translation to 'Go to last page'",control:{type:null}}},includeStories:["standard","hiddenBorders","translatedAriaLabels"]},mdxStoryNameToKey={Standard:"standard","Hidden Borders":"hiddenBorders","Translated Aria Labels":"translatedAriaLabels"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/progress-bar/ProgressBar.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return ProgressBar_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateInteractive",(function(){return ProgressBar_stories_TemplateInteractive})),__webpack_require__.d(__webpack_exports__,"TemplateCustomColor",(function(){return ProgressBar_stories_TemplateCustomColor})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"description",(function(){return description})),__webpack_require__.d(__webpack_exports__,"completed",(function(){return completed})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"interactive",(function(){return interactive}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),progress_bar_ScaleProgressBarvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{customColor:String,disabled:{type:Boolean,default:!1},label:String,hasError:Boolean,statusDescription:String,styles:String,showStatus:Boolean,percentage:Number,percentageStart:{type:Number,default:0}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(progress_bar_ScaleProgressBarvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-progress-bar",{attrs:{"custom-color":_vm.customColor,disabled:_vm.disabled,label:_vm.label,"has-error":_vm.hasError,"status-description":_vm.statusDescription,"show-status":_vm.showStatus,percentage:_vm.percentage,percentageStart:_vm.percentageStart,styles:_vm.styles}})}),[],!1,null,null,null).exports;var ScaleProgressBar=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleProgressBar",description:"",tags:{},props:[{name:"customColor",type:{name:"string"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"label",type:{name:"string"}},{name:"hasError",type:{name:"boolean"}},{name:"statusDescription",type:{name:"string"}},{name:"styles",type:{name:"string"}},{name:"showStatus",type:{name:"boolean"}},{name:"percentage",type:{name:"number"}},{name:"percentageStart",type:{name:"number"},defaultValue:{func:!1,value:"0"}}]};var ProgressBar_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleProgressBar:ScaleProgressBar},props:Object.assign({},ScaleProgressBar.props),template:'\n      <scale-progress-bar\n        :custom-color="customColor"\n        :disabled="disabled"\n        :label="label"\n        :has-error="hasError"\n        :status-description="statusDescription"\n        :show-status="showStatus"\n        :percentageStart="percentageStart"\n        :percentage="percentage"\n        :styles="styles"\n      >\n      </scale-progress-bar>\n  '}},ProgressBar_stories_TemplateInteractive=function TemplateInteractive(args,_ref2){_ref2.argTypes;return{components:{ScaleProgressBar:ScaleProgressBar},template:'\n      <div>\n          <scale-progress-bar\n            label="Download progress example"\n            :custom-color="$data[$data.state].customColor"\n            :has-error="$data[$data.state].hasError"\n            :status-description="$data[$data.state].statusDescription"\n            :show-status="$data[$data.state].showStatus"\n            :percentage="$data.percentage"\n          >\n          </scale-progress-bar>\n          <br/>\n          <scale-button variant="secondary" size="small" @click="startSuccess">Start Success</scale-button>\n          <scale-button variant="secondary" size="small" @click="startFailure">Start Failure</scale-button>\n          <scale-button variant="secondary" size="small" @click="reset">Reset</scale-button>\n      </div>\n  ',methods:{startSuccess:function startSuccess(){this.reset(),this.start("success")},startFailure:function startFailure(){this.reset(),this.start("failure")},start:function start(outcome){var _this=this,max="success"===outcome?100:42;this.interval=setInterval((function(){if(_this.$data.percentage===max)return clearInterval(_this.interval),_this.$data.state=outcome,void(_this.interval=null);_this.$data.percentage+=1}),40)},reset:function reset(){clearInterval(this.interval),this.interval=null,this.$data.state="initial",this.$data.percentage=0}},data:function data(){return{interval:null,success:{statusDescription:"Upload complete"},failure:{hasError:!0,statusDescription:"Upload failed"},initial:{showStatus:!0},percentage:0,state:"initial",busy:!1}}}},ProgressBar_stories_TemplateCustomColor=function TemplateCustomColor(args,_ref3){_ref3.argTypes;return{components:{ScaleProgressBar:ScaleProgressBar},props:Object.assign({},ScaleProgressBar.props),template:'\n      <scale-progress-bar style="--color-success: purple"\n        :disabled="disabled"\n        :label="label"\n        :has-error="hasError"\n        :status-description="statusDescription"\n        :show-status="showStatus"\n        :percentage="percentage"\n        :styles="styles"\n      >\n      </scale-progress-bar>\n  '}},layoutProps={Template:ProgressBar_stories_Template,TemplateCustomColor:ProgressBar_stories_TemplateCustomColor};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Progress Bar",component:ScaleProgressBar,parameters:{controls:{sort:"alpha"}},argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Progress Bar"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{percentage:20,label:"Standard"},mdxType:"Story"},ProgressBar_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --track-color: var(--telekom-color-ui-faint);\n  --bar-color: var(--telekom-color-primary-standard);\n\n  --icon-color-error: var(--telekom-color-text-and-icon-functional-danger);\n  --track-color-error: var(--telekom-color-functional-danger-subtle);\n  --bar-color-error: var(--telekom-color-functional-danger-standard);\n\n  --icon-color-success: var(--telekom-color-text-and-icon-functional-success);\n  --track-color-success: var(--telekom-color-functional-success-subtle);\n  --bar-color-success: var(--telekom-color-functional-success-standard);\n\n  --bar-color-disabled: var(--telekom-color-ui-disabled);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n\n  --progress-bar-outer-size: 6px;\n  --progress-bar-inner-size: var(--telekom-spacing-composition-space-03);\n  --font-label: var(--telekom-text-style-ui);\n  --color-label: var(--telekom-color-text-and-icon-standard);\n\n  --color-status-description: var(--telekom-color-text-and-icon-additional);\n  --font-status-description: var(--telekom-text-style-small-bold);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"description"},"Description"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Description",args:{percentage:40,label:"Description",statusDescription:"Progress status description text",showStatus:!0},mdxType:"Story"},ProgressBar_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-progress-bar\n  percentage="40"\n  label="Description"\n  status-description="Progress status description text"\n  show-status="true"\n></scale-progress-bar>\n')),Object(esm.b)("h2",{id:"completed"},"Completed"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Completed",args:{percentage:100,showStatus:!1,statusDescription:"Upload complete",label:"Completed"},mdxType:"Story"},ProgressBar_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-progress-bar\n  percentage="100"\n  label="Completed"\n  status-description="Upload complete"\n  show-status="true"\n>\n</scale-progress-bar>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{percentage:40,hasError:!0,showStatus:!0,statusDescription:"Upload failed",label:"Error"},mdxType:"Story"},ProgressBar_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-progress-bar\n  percentage="40"\n  label="Error"\n  status-description="Upload failed"\n  show-status="true"\n  has-error\n>\n</scale-progress-bar>\n')),Object(esm.b)("h2",{id:"interactive"},"Interactive"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Interactive",args:{percentage:0,label:"Interactive"},mdxType:"Story"},ProgressBar_stories_TemplateInteractive.bind({}))))}MDXContent.isMDXComponent=!0;var standard=ProgressBar_stories_Template.bind({});standard.storyName="Standard",standard.args={percentage:20,label:"Standard"},standard.parameters={storySource:{source:"Template.bind({})"}};var description=ProgressBar_stories_Template.bind({});description.storyName="Description",description.args={percentage:40,label:"Description",statusDescription:"Progress status description text",showStatus:!0},description.parameters={storySource:{source:"Template.bind({})"}};var completed=ProgressBar_stories_Template.bind({});completed.storyName="Completed",completed.args={percentage:100,showStatus:!1,statusDescription:"Upload complete",label:"Completed"},completed.parameters={storySource:{source:"Template.bind({})"}};var error=ProgressBar_stories_Template.bind({});error.storyName="Error",error.args={percentage:40,hasError:!0,showStatus:!0,statusDescription:"Upload failed",label:"Error"},error.parameters={storySource:{source:"Template.bind({})"}};var interactive=ProgressBar_stories_TemplateInteractive.bind({});interactive.storyName="Interactive",interactive.args={percentage:0,label:"Interactive"},interactive.parameters={storySource:{source:"TemplateInteractive.bind({})"}};var componentMeta={title:"Components/Progress Bar",parameters:{controls:{sort:"alpha"}},component:ScaleProgressBar,argTypes:{},includeStories:["standard","description","completed","error","interactive"]},mdxStoryNameToKey={Standard:"standard",Description:"description",Completed:"completed",Error:"error",Interactive:"interactive"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/radio-button-group/RadioButtonGroup.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return RadioButtonGroup_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),radio_button_group_ScaleRadioButtonGroupvue_type_script_lang_js_={name:"Radio Button Group",props:{helperText:{type:String},label:{type:String},invalid:{type:Boolean}},render:function render(){return this.$slots.default}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(radio_button_group_ScaleRadioButtonGroupvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleRadioButtonGroup=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={displayName:"Radio Button Group",exportName:"default",description:"",tags:{},props:[{name:"helperText",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}}],slots:[{name:"default"}]};var radio_button_group_ScaleRadioButtonvue_type_script_lang_js_={name:"Radio Button",props:{invalid:{type:Boolean},name:{type:String},label:{type:String},helperText:{type:String},disabled:{type:Boolean},checked:{type:Boolean},value:{type:String},inputId:{type:String},styles:{type:String}},methods:{fireEvents:function fireEvents(){this.$emit("scale-change")}},render:function render(){return this.$slots.default}};const ScaleRadioButton_vuedocgen_export_0=Object(componentNormalizer.a)(radio_button_group_ScaleRadioButtonvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleRadioButton=ScaleRadioButton_vuedocgen_export_0;ScaleRadioButton_vuedocgen_export_0.__docgenInfo={displayName:"Radio Button",exportName:"default",description:"",tags:{},props:[{name:"invalid",type:{name:"boolean"}},{name:"name",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"checked",type:{name:"boolean"}},{name:"value",type:{name:"string"}},{name:"inputId",type:{name:"string"}},{name:"styles",type:{name:"string"}}],events:[{name:"scale-change"}],slots:[{name:"default"}]};var addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var RadioButtonGroup_stories_Template=function Template(args,context){return{props:Object.assign({groupName:{default:"example"},itemProps:{default:{}}},ScaleRadioButtonGroup.props),data:function data(){return{items:Array.from({length:3},(function(_,i){return{id:"choice-"+i,label:"Radio Label",value:i}}))}},methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")},template:'\n    <scale-radio-button-group\n      :label="label"\n      :invalid="invalid"\n      :helper-text="helperText"\n      @scale-change="emitChange"\n    >\n      <scale-radio-button\n        v-for="(item, index) in items"\n        :key="item.id"\n        :input-id="item.id"\n        :name="groupName"\n        :value="item.value"\n        :label="item.label"\n        :checked="itemProps[index]?.checked"\n        :invalid="itemProps[index]?.invalid"\n        :helper-text="itemProps[index]?.helperText"\n        :disabled="itemProps[index]?.disabled"\n      ></scale-radio-button>\n    </scale-radio-button-group>\n  '}},layoutProps={Template:RadioButtonGroup_stories_Template};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Radio Button Group",component:ScaleRadioButtonGroup,subcomponents:{"Radio Button":ScaleRadioButton},argTypes:{},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Radio Button Group"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",parameters:{controls:{exclude:["groupName"]}},args:{label:"Group Label",groupName:"standard"},mdxType:"Story"},RadioButtonGroup_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  /*label*/\n  --font-weight-label: var(--telekom-typography-font-weight-medium);\n  --font-size-label: var(--telekom-typography-font-size-body);\n\n  /*helper-text*/\n  --font-size-helper-text: var(--telekom-typography-font-size-small);\n  --color-helper-text: var(\n    --telekom-color-text-and-icon-functional-informational\n  );\n  --padding-bottom-helper-text: var(--telekom-spacing-composition-space-04);\n  --margin-top-helper-text: var(--telekom-spacing-composition-space-03);\n  --font-size-helper-text: var(--telekom-typography-font-size-small);\n  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);\n\n  /*helper-text--status-error*/\n  --font-size-error-helper-text: var(--telekom-typography-font-size-small);\n  --color-error-helper-text: var(\n    --telekom-color-text-and-icon-functional-danger\n  );\n  --padding-bottom-error-helper-text: var(\n    --telekom-spacing-composition-space-04\n  );\n  --margin-top-error-helper-text: var(--telekom-spacing-composition-space-03);\n  --font-weight-error-helper-text: var(--telekom-typography-font-weight-medium);\n  --color-error-helper-text-hcm: var(\n    --telekom-color-text-and-icon-white-standard\n  );\n  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);\n\n  /*title*/\n  --font-size-title: var(--font-size-label);\n  --font-weight-title: var(--telekom-typography-font-weight-medium);\n  --padding-bottom-title: var(--telekom-spacing-composition-space-03);\n  --margin-left-title: var(--telekom-spacing-composition-space-02);\n\n  /*slotted items*/\n  --margin-top-slotted-item: var(--telekom-spacing-composition-space-05);\n}\n\nscale-radio-button {\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-disabled: var(--telekom-color-ui-disabled);\n  --color-error: var(--telekom-color-text-and-icon-functional-danger);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --color-primary: var(--telekom-color-text-and-icon-primary-standard);\n  --color-primary-hover: var(--telekom-color-text-and-icon-standard);\n  --color-primary-active: var(--telekom-color-text-and-icon-standard);\n  --color-focus: var(--telekom-color-functional-focus-standard);\n  --color-text: var(--telekom-color-text-and-icon-standard);\n\n  /*helper-text*/\n  --transition-helper-text: var(--transition);\n  --font-size-helper-text: var(--telekom-typography-font-size-small);\n  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);\n  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);\n  --color-helper-text: var(\n    --telekom-color-text-and-icon-functional-informational\n  );\n  --spacing-left-helper-text: calc(\n    var(--width-control) + var(--telekom-spacing-composition-space-04)\n  );\n  --spacing-top-helper-text: var(--telekom-spacing-composition-space-03);\n  --color-helper-text-error: var(\n    --telekom-color-text-and-icon-functional-danger\n  );\n  /*label*/\n  --transition-label: var(--transition);\n  --font-weight-label: var(--telekom-typography-font-weight-medium);\n  --color-label: var(--color-text);\n  --spacing-label: var(--telekom-spacing-composition-space-04);\n\n  /*control*/\n  --width-control: var(--telekom-spacing-composition-space-07);\n  --height-control: var(--telekom-spacing-composition-space-07);\n  --transition-control: var(--transition);\n  --background-color-control: var(--telekom-color-ui-base);\n  --border-control: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);\n  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);\n  --border-control-checked: calc(\n      0.25 * var(--telekom-spacing-composition-space-05)\n    )\n    solid var(--telekom-color-background-canvas);\n  --border-control-checked-disabled: calc(\n      0.5 * var(--telekom-spacing-composition-space-05)\n    )\n    solid var(--telekom-color-ui-border-disabled);\n  --background-control-checked-disabled: none;\n  --border-control-active: var(--telekom-spacing-composition-space-04) solid\n    var(--telekom-color-primary-pressed);\n  --border-control-disabled: 0 0 0 var(--telekom-spacing-composition-space-01)\n    var(--telekom-color-ui-border-disabled);\n  --border-control-error: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-standard);\n  --box-shadow-control-focus: 0 0 0 var(--telekom-spacing-composition-space-03)\n    var(--color-focus);\n}\n")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-radio-button-group label="Group Label">\n  <scale-radio-button\n    label="Radio Label"\n    name="standard"\n    input-id="choice-0"\n    value="0"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="standard"\n    input-id="choice-1"\n    value="1"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="standard"\n    input-id="choice-2"\n    value="2"\n  ></scale-radio-button>\n</scale-radio-button-group>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{label:"Group Label",groupName:"helper-text",helperText:"Make sure to fill this"},mdxType:"Story"},RadioButtonGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-radio-button-group label="Group Label" helper-text="Make sure to fill this">\n  <scale-radio-button\n    label="Radio Label"\n    name="helper-text"\n    input-id="choice-0"\n    value="0"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="helper-text"\n    input-id="choice-1"\n    value="1"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="helper-text"\n    input-id="choice-2"\n    value="2"\n  ></scale-radio-button>\n</scale-radio-button-group>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{label:"Group Label",groupName:"error",invalid:!0,helperText:"Something is wrong",itemProps:{0:{invalid:!0,checked:!0,helperText:"Error message"}}},mdxType:"Story"},RadioButtonGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-radio-button-group label="Group Label" invalid helper-text="Something is wrong">\n  <scale-radio-button\n    label="Radio Label"\n    name="error"\n    input-id="choice-0"\n    value="0"\n    invalid\n    checked\n    helper-text="Error message"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="error"\n    input-id="choice-1"\n    value="1"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="error"\n    input-id="choice-2"\n    value="2"\n  ></scale-radio-button>\n</scale-radio-button-group>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Group Label",groupName:"disabled",itemProps:{0:{disabled:!0}}},mdxType:"Story"},RadioButtonGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-radio-button-group label="Group Label">\n  <scale-radio-button\n    label="Radio Label"\n    name="disabled"\n    input-id="choice-0"\n    value="0"\n    disabled\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="disabled"\n    input-id="choice-1"\n    value="1"\n  ></scale-radio-button>\n  <scale-radio-button\n    label="Radio Label"\n    name="disabled"\n    input-id="choice-2"\n    value="2"\n  ></scale-radio-button>\n</scale-radio-button-group>\n')))}MDXContent.isMDXComponent=!0;var standard=RadioButtonGroup_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Group Label",groupName:"standard"},standard.parameters=Object.assign({storySource:{source:'(args, context) => ({\n  props: {\n    groupName: {\n      default: \'example\'\n    },\n    itemProps: {\n      default: {}\n    },\n    ...ScaleRadioButtonGroup.props\n  },\n\n  data() {\n    return {\n      items: Array.from({\n        length: 3\n      }, (_, i) => ({\n        id: `choice-${i}`,\n        label: \'Radio Label\',\n        value: i\n      }))\n    };\n  },\n\n  methods: {\n    emitChange: action(\'scale-change\')\n  },\n  template: `\n    <scale-radio-button-group\n      :label="label"\n      :invalid="invalid"\n      :helper-text="helperText"\n      @scale-change="emitChange"\n    >\n      <scale-radio-button\n        v-for="(item, index) in items"\n        :key="item.id"\n        :input-id="item.id"\n        :name="groupName"\n        :value="item.value"\n        :label="item.label"\n        :checked="itemProps[index]?.checked"\n        :invalid="itemProps[index]?.invalid"\n        :helper-text="itemProps[index]?.helperText"\n        :disabled="itemProps[index]?.disabled"\n      ></scale-radio-button>\n    </scale-radio-button-group>\n  `\n})'}},{controls:{exclude:["groupName"]}});var helperText=RadioButtonGroup_stories_Template.bind({});helperText.storyName="Helper Text",helperText.args={label:"Group Label",groupName:"helper-text",helperText:"Make sure to fill this"},helperText.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    groupName: {\n      default: \'example\'\n    },\n    itemProps: {\n      default: {}\n    },\n    ...ScaleRadioButtonGroup.props\n  },\n\n  data() {\n    return {\n      items: Array.from({\n        length: 3\n      }, (_, i) => ({\n        id: `choice-${i}`,\n        label: \'Radio Label\',\n        value: i\n      }))\n    };\n  },\n\n  methods: {\n    emitChange: action(\'scale-change\')\n  },\n  template: `\n    <scale-radio-button-group\n      :label="label"\n      :invalid="invalid"\n      :helper-text="helperText"\n      @scale-change="emitChange"\n    >\n      <scale-radio-button\n        v-for="(item, index) in items"\n        :key="item.id"\n        :input-id="item.id"\n        :name="groupName"\n        :value="item.value"\n        :label="item.label"\n        :checked="itemProps[index]?.checked"\n        :invalid="itemProps[index]?.invalid"\n        :helper-text="itemProps[index]?.helperText"\n        :disabled="itemProps[index]?.disabled"\n      ></scale-radio-button>\n    </scale-radio-button-group>\n  `\n})'}};var error=RadioButtonGroup_stories_Template.bind({});error.storyName="Error",error.args={label:"Group Label",groupName:"error",invalid:!0,helperText:"Something is wrong",itemProps:{0:{invalid:!0,checked:!0,helperText:"Error message"}}},error.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    groupName: {\n      default: \'example\'\n    },\n    itemProps: {\n      default: {}\n    },\n    ...ScaleRadioButtonGroup.props\n  },\n\n  data() {\n    return {\n      items: Array.from({\n        length: 3\n      }, (_, i) => ({\n        id: `choice-${i}`,\n        label: \'Radio Label\',\n        value: i\n      }))\n    };\n  },\n\n  methods: {\n    emitChange: action(\'scale-change\')\n  },\n  template: `\n    <scale-radio-button-group\n      :label="label"\n      :invalid="invalid"\n      :helper-text="helperText"\n      @scale-change="emitChange"\n    >\n      <scale-radio-button\n        v-for="(item, index) in items"\n        :key="item.id"\n        :input-id="item.id"\n        :name="groupName"\n        :value="item.value"\n        :label="item.label"\n        :checked="itemProps[index]?.checked"\n        :invalid="itemProps[index]?.invalid"\n        :helper-text="itemProps[index]?.helperText"\n        :disabled="itemProps[index]?.disabled"\n      ></scale-radio-button>\n    </scale-radio-button-group>\n  `\n})'}};var disabled=RadioButtonGroup_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Group Label",groupName:"disabled",itemProps:{0:{disabled:!0}}},disabled.parameters={storySource:{source:'(args, context) => ({\n  props: {\n    groupName: {\n      default: \'example\'\n    },\n    itemProps: {\n      default: {}\n    },\n    ...ScaleRadioButtonGroup.props\n  },\n\n  data() {\n    return {\n      items: Array.from({\n        length: 3\n      }, (_, i) => ({\n        id: `choice-${i}`,\n        label: \'Radio Label\',\n        value: i\n      }))\n    };\n  },\n\n  methods: {\n    emitChange: action(\'scale-change\')\n  },\n  template: `\n    <scale-radio-button-group\n      :label="label"\n      :invalid="invalid"\n      :helper-text="helperText"\n      @scale-change="emitChange"\n    >\n      <scale-radio-button\n        v-for="(item, index) in items"\n        :key="item.id"\n        :input-id="item.id"\n        :name="groupName"\n        :value="item.value"\n        :label="item.label"\n        :checked="itemProps[index]?.checked"\n        :invalid="itemProps[index]?.invalid"\n        :helper-text="itemProps[index]?.helperText"\n        :disabled="itemProps[index]?.disabled"\n      ></scale-radio-button>\n    </scale-radio-button-group>\n  `\n})'}};var componentMeta={title:"Components/Radio Button Group",component:ScaleRadioButtonGroup,subcomponents:{"Radio Button":ScaleRadioButton},argTypes:{},includeStories:["standard","helperText","error","disabled"]},mdxStoryNameToKey={Standard:"standard","Helper Text":"helperText",Error:"error",Disabled:"disabled"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/rating-stars/RatingStars.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return RatingStars_stories_Template})),__webpack_require__.d(__webpack_exports__,"infoTextAndCustomLabel",(function(){return infoTextAndCustomLabel})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"small",(function(){return small})),__webpack_require__.d(__webpack_exports__,"ariaLabelTranslation",(function(){return ariaLabelTranslation})),__webpack_require__.d(__webpack_exports__,"hiddenLabel",(function(){return hiddenLabel})),__webpack_require__.d(__webpack_exports__,"readonly",(function(){return readonly}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),rating_stars_ScaleRatingStarsvue_type_script_lang_js_={props:{maxRating:{type:Number,default:5},max:{type:Number,default:5},minRating:{type:Number,default:0},rating:{type:Number,default:3},starSize:{type:String,default:"large"},size:{type:String,default:"large"},disabled:{type:Boolean,default:!1},ariaLabelTranslation:{type:String},label:{type:String,default:"Rating"},infoText:{type:String},hideLabel:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(rating_stars_ScaleRatingStarsvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-rating-stars",{attrs:{"max-rating":_vm.maxRating,max:_vm.max,"min-rating":_vm.minRating,rating:_vm.rating,"star-size":_vm.starSize,size:_vm.size,disabled:_vm.disabled,"aria-label-translation":_vm.ariaLabelTranslation,label:_vm.label,readonly:_vm.readonly,"info-text":_vm.infoText,"hide-label":_vm.hideLabel},on:{scaleChange:_vm.scaleChange}})}),[],!1,null,null,null).exports;var ScaleRatingStars=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleRatingStars",description:"",tags:{},props:[{name:"maxRating",type:{name:"number"},defaultValue:{func:!1,value:"5"}},{name:"max",type:{name:"number"},defaultValue:{func:!1,value:"5"}},{name:"minRating",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"rating",type:{name:"number"},defaultValue:{func:!1,value:"3"}},{name:"starSize",type:{name:"string"},defaultValue:{func:!1,value:"'large'"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'large'"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"ariaLabelTranslation",type:{name:"string"}},{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"'Rating'"}},{name:"infoText",type:{name:"string"}},{name:"hideLabel",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"readonly",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}]};var RatingStars_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleRatingStars:ScaleRatingStars},props:Object.assign({label:String},ScaleRatingStars.props),template:'\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    '}},layoutProps={Template:RatingStars_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Rating Stars",component:ScaleRatingStars,argTypes:{starSize:{table:{type:{summary:"string"},defaultValue:{summary:"large"}},description:"(optional) Deprecated; size should be used instead of starSize",control:{type:"select",options:["large","small"]}},size:{table:{type:{summary:"string"},defaultValue:{summary:"large"}},description:"(optional) size of the stars. Overwritten by deprecated starSize",control:{type:"select",options:["large","small"]}},minRating:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Deprecated; minimum rating value. Will be dropped on next release",control:{type:"number"}},maxRating:{table:{type:{summary:"number"},defaultValue:{summary:5}},description:"(optional) Deprecated; max should be used instead of maxRating",control:{type:"number"}},max:{table:{type:{summary:"number"},defaultValue:{summary:5}},description:"(optional) The upper limit of the rating. Overwritten by deprecated maxRating",control:{type:"number"}},rating:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Represents the current value of the rating",control:{type:"number"}},readonly:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) makes the rating non-interactive (but still accessible)",control:{type:"boolean"}},disabled:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) disables input",control:{type:"boolean"}},ariaLabelTranslation:{table:{type:{summary:"string"},defaultValue:{summary:"$rating out of $max stars"}},description:"(optional) a11y text for getting meaningful value.",control:{type:"text"}},label:{table:{type:{summary:"string"},defaultValue:{summary:"rating label"}},description:"(optional) rating label",control:{type:"text"}},infoText:{table:{type:{summary:"string"}},description:"(optional) info text",control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Rating Stars"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard-with-info-text-and-custom-label"},"Standard with Info Text and custom Label"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Info Text and custom Label",args:{rating:3,label:"Custom Rating Label"},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Info Text and custom Label",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"  :host {\n    --stars-color: var(--telekom-color-text-and-icon-primary-standard);\n    --stars-hover-color: var(--telekom-color-text-and-icon-primary-hovered);\n    --stars-active-color: var(--telekom-color-text-and-icon-primary-pressed);\n    --stars-inactive-color: transparent;\n    --stars-placeholder-color: var(--telekom-color-ui-border-standard);\n    --stars-placeholder-hover-color: var(--telekom-color-ui-border-hovered);\n    --stars-disabled-color: var(--telekom-color-text-and-icon-disabled);\n    --stars-spacing: var(--telekom-spacing-composition-space-02);\n    --stars-transition: color var(--telekom-motion-duration-immediate);\n    --stars-size: 24px;\n    --label-font: var(--telekom-text-style-ui);\n    --infotext-font: var(--telekom-text-style-body);\n    --infotext-font-small: var(--telekom-text-style-body);\n    --infotext-color: var(--telekom-color-text-and-icon-additional);\n    --focus-outline: var(--telekom-line-weight-highlight) solid\n      var(--telekom-color-functional-focus-standard);\n  }\n")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-rating-stars\n  rating="3"\n  label="Custom Rating Label"\n></scale-rating-stars>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{disabled:!0,rating:2},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-rating-stars rating="2" disabled></scale-rating-stars>\n')),Object(esm.b)("h2",{id:"small"},"Small"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small",args:{rating:4,size:"small"},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'\x3c!--\n  deprecated:\n  <scale-rating-stars rating="4" star-size="small" info-text="Info Text"></scale-rating-stars>\n--\x3e\n<scale-rating-stars\n  rating="4"\n  size="small"\n></scale-rating-stars>\n')),Object(esm.b)("h2",{id:"aria-label-translation"},"Aria Label Translation"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Aria Label Translation",args:{rating:1,ariaLabelTranslation:"$rating out of $maxRating stars"},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-rating-stars\n  rating="1"\n  aria-label-translation="$rating out of $max stars"\n></scale-rating-stars>\n\x3c!--  e.g. German\n  <scale-rating-stars\n  rating="1"\n  aria-label-translation="$rating von $max Sternen"\n></scale-rating-stars>\n  --\x3e\n')),Object(esm.b)("h2",{id:"hidden-label"},"Hidden Label"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Hidden Label",args:{rating:4,hideLabel:!0},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-rating-stars rating="4" hideLabel></scale-rating-stars>\n')),Object(esm.b)("h2",{id:"readonly"},"Readonly"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Readonly",args:{rating:3,readonly:!0},mdxType:"Story"},RatingStars_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-rating-stars rating="3" readonly></scale-rating-stars>\n')))}MDXContent.isMDXComponent=!0;var infoTextAndCustomLabel=RatingStars_stories_Template.bind({});infoTextAndCustomLabel.storyName="Info Text and custom Label",infoTextAndCustomLabel.args={rating:3,label:"Custom Rating Label"},infoTextAndCustomLabel.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var disabled=RatingStars_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={disabled:!0,rating:2},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var small=RatingStars_stories_Template.bind({});small.storyName="Small",small.args={rating:4,size:"small"},small.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var ariaLabelTranslation=RatingStars_stories_Template.bind({});ariaLabelTranslation.storyName="Aria Label Translation",ariaLabelTranslation.args={rating:1,ariaLabelTranslation:"$rating out of $maxRating stars"},ariaLabelTranslation.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var hiddenLabel=RatingStars_stories_Template.bind({});hiddenLabel.storyName="Hidden Label",hiddenLabel.args={rating:4,hideLabel:!0},hiddenLabel.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var readonly=RatingStars_stories_Template.bind({});readonly.storyName="Readonly",readonly.args={rating:3,readonly:!0},readonly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleRatingStars\n  },\n  props: {\n    label: String,\n    ...ScaleRatingStars.props\n  },\n  template: `\n  <scale-rating-stars\n    :max-rating="maxRating"\n    :max="max"\n    :min-rating="minRating"\n    :rating="rating"\n    :star-size="starSize"\n    :size="size"\n    :disabled="disabled"\n    :aria-label-translation="ariaLabelTranslation"\n    :label="label"\n    :readonly="readonly"\n    :info-text="infoText"\n    :hide-label="hideLabel"\n    custom-styles\n  >\n  </scale-rating-stars>\n    `\n})'}};var componentMeta={title:"Components/Rating Stars",component:ScaleRatingStars,argTypes:{starSize:{table:{type:{summary:"string"},defaultValue:{summary:"large"}},description:"(optional) Deprecated; size should be used instead of starSize",control:{type:"select",options:["large","small"]}},size:{table:{type:{summary:"string"},defaultValue:{summary:"large"}},description:"(optional) size of the stars. Overwritten by deprecated starSize",control:{type:"select",options:["large","small"]}},minRating:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Deprecated; minimum rating value. Will be dropped on next release",control:{type:"number"}},maxRating:{table:{type:{summary:"number"},defaultValue:{summary:5}},description:"(optional) Deprecated; max should be used instead of maxRating",control:{type:"number"}},max:{table:{type:{summary:"number"},defaultValue:{summary:5}},description:"(optional) The upper limit of the rating. Overwritten by deprecated maxRating",control:{type:"number"}},rating:{table:{type:{summary:"number"},defaultValue:{summary:0}},description:"(optional) Represents the current value of the rating",control:{type:"number"}},readonly:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) makes the rating non-interactive (but still accessible)",control:{type:"boolean"}},disabled:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"(optional) disables input",control:{type:"boolean"}},ariaLabelTranslation:{table:{type:{summary:"string"},defaultValue:{summary:"$rating out of $max stars"}},description:"(optional) a11y text for getting meaningful value.",control:{type:"text"}},label:{table:{type:{summary:"string"},defaultValue:{summary:"rating label"}},description:"(optional) rating label",control:{type:"text"}},infoText:{table:{type:{summary:"string"}},description:"(optional) info text",control:{type:"text"}}},includeStories:["infoTextAndCustomLabel","disabled","small","ariaLabelTranslation","hiddenLabel","readonly"]},mdxStoryNameToKey={"Info Text and custom Label":"infoTextAndCustomLabel",Disabled:"disabled",Small:"small","Aria Label Translation":"ariaLabelTranslation","Hidden Label":"hiddenLabel",Readonly:"readonly"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/segmented-button/SegmentedButton.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return SegmentedButton_stories_Template})),__webpack_require__.d(__webpack_exports__,"MultiSelectTemplate",(function(){return SegmentedButton_stories_MultiSelectTemplate})),__webpack_require__.d(__webpack_exports__,"IconOnlyTemplate",(function(){return SegmentedButton_stories_IconOnlyTemplate})),__webpack_require__.d(__webpack_exports__,"IconTextTemplate",(function(){return SegmentedButton_stories_IconTextTemplate})),__webpack_require__.d(__webpack_exports__,"DisabledTemplate",(function(){return SegmentedButton_stories_DisabledTemplate})),__webpack_require__.d(__webpack_exports__,"DisabledSegmentTemplate",(function(){return SegmentedButton_stories_DisabledSegmentTemplate})),__webpack_require__.d(__webpack_exports__,"InvalidTemplate",(function(){return SegmentedButton_stories_InvalidTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"multiSelect",(function(){return multiSelect})),__webpack_require__.d(__webpack_exports__,"disabledSegment",(function(){return disabledSegment})),__webpack_require__.d(__webpack_exports__,"disabledButton",(function(){return disabledButton})),__webpack_require__.d(__webpack_exports__,"iconOnly",(function(){return iconOnly})),__webpack_require__.d(__webpack_exports__,"iconAndText",(function(){return iconAndText})),__webpack_require__.d(__webpack_exports__,"invalid",(function(){return invalid}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),segmented_button_ScaleSegmentedButtonvue_type_script_lang_js_={props:{size:{type:String,default:"small"},disabled:{type:Boolean,default:!1},multiSelect:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},label:{type:String},helperText:{type:String},fullWidth:{type:Boolean,default:!1},styles:{type:String}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(segmented_button_ScaleSegmentedButtonvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-segmented-button",{attrs:{size:_vm.size,disabled:_vm.disabled,"multi-select":_vm.multiSelect,invalid:_vm.invalid,label:_vm.label,"helper-text":_vm.helperText,"full-width":_vm.fullWidth,styles:_vm.styles},on:{scaleChange:_vm.scaleChange}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleSegmentedButton=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleSegmentedButton",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'small'"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"multiSelect",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"invalid",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"fullWidth",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}],slots:[{name:"default"}]};var SegmentedButton_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n      :full-width="fullWidth"\n      :label="label"\n    >\n      <scale-segment selected>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_MultiSelectTemplate=function MultiSelectTemplate(args,_ref2){_ref2.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected>Apple</scale-segment>\n      <scale-segment selected>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_IconOnlyTemplate=function IconOnlyTemplate(args,_ref3){_ref3.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected><scale-icon-weather-cloudy slot="segment-icon"></scale-icon-weather-cloudy></scale-segment>\n      <scale-segment><scale-icon-weather-rain slot="segment-icon"></scale-icon-weather-rain></scale-segment>\n      <scale-segment><scale-icon-weather-sunny slot="segment-icon"></scale-icon-weather-sunny></scale-segment>\n      <scale-segment><scale-icon-weather-heavy-snow slot="segment-icon"></scale-icon-weather-heavy-snow></scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_IconTextTemplate=function IconTextTemplate(args,_ref4){_ref4.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Apple</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>One+</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Samsung</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_DisabledTemplate=function DisabledTemplate(args,_ref5){_ref5.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String,disabled:"true"},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :disabled="disabled"\n      :size="size"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n    >\n      <scale-segment>Apple</scale-segment>\n      <scale-segment selected>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_DisabledSegmentTemplate=function DisabledSegmentTemplate(args,_ref6){_ref6.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String,disabled:!0},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n    >\n      <scale-segment disabled>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},SegmentedButton_stories_InvalidTemplate=function InvalidTemplate(args,_ref7){_ref7.argTypes;return{components:{ScaleSegmentedButton:ScaleSegmentedButton},props:Object.assign({label:String,icon:String,invalid:Boolean},ScaleSegmentedButton.props),template:'\n    <scale-segmented-button\n      :invalid="invalid"\n      :helper-text="helperText"\n      :label="label"\n    >\n      <scale-segment>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  '}},layoutProps={Template:SegmentedButton_stories_Template,MultiSelectTemplate:SegmentedButton_stories_MultiSelectTemplate,IconOnlyTemplate:SegmentedButton_stories_IconOnlyTemplate,IconTextTemplate:SegmentedButton_stories_IconTextTemplate,DisabledTemplate:SegmentedButton_stories_DisabledTemplate,DisabledSegmentTemplate:SegmentedButton_stories_DisabledSegmentTemplate,InvalidTemplate:SegmentedButton_stories_InvalidTemplate};function MDXContent(_ref8){var components=_ref8.components,props=_objectWithoutProperties(_ref8,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Beta Components/Segmented Button",component:ScaleSegmentedButton,argTypes:{size:{control:{type:"select",options:["small","medium","large"]}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Segmented Button"),Object(esm.b)("img",{src:"assets/beta.png",alt:"Beta Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Group Label"},mdxType:"Story"},SegmentedButton_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-segmented-button>\n  <scale-segment selected>Apple</scale-segment>\n  <scale-segment>One+</scale-segment>\n  <scale-segment>Samsung</scale-segment>\n  <scale-segment>Huawei</scale-segment>\n</scale-segmented-button>\n")),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --background-color: var(--telekom-color-ui-faint);\n  --radius: var(--telekom-radius-standard);\n  --height: 32px;\n\n  /* medium styles */\n  --height-medium: 40px;\n\n  /* large styles */\n  --height-large: 44px;\n}\n\n:host(scale-segmented) {\n  /* not selected */\n  --background-color-selected: var(--telekom-color-ui-base);\n  --button-radius: 6px;\n  --padding-top-bottom: var(--telekom-spacing-composition-space-03);\n  --height: 28px;\n  --font: var(--telekom-text-style-caption-bold);\n  --label-disabled: var(--telekom-color-text-and-icon-disabled);\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --color: var(--telekom-color-text-and-icon-standard);\n\n  --color-selected: var(--telekom-color-text-and-icon-primary-standard);\n\n  /* medium styles */\n  --font-medium: var(--telekom-text-style-ui-bold);\n  --height-medium: 36px;\n\n  /* large styles */\n  --font-large: var(--telekom-text-style-ui-bold);\n  --height-large: 40px;\n\n  /* hover styles */\n  --background-color-hover: var(--telekom-color-ui-state-fill-hovered);\n\n  /* active styles */\n  --background-color-active: var(--telekom-color-ui-state-fill-pressed);\n}\n")),Object(esm.b)("h2",{id:"multi-select"},"Multi Select"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"MultiSelect",args:{multiSelect:!0,label:"Group Label"},mdxType:"Story"},SegmentedButton_stories_MultiSelectTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-segmented-button multi-select>\n  <scale-segment selected>Apple</scale-segment>\n  <scale-segment selected>One+</scale-segment>\n  <scale-segment>Samsung</scale-segment>\n  <scale-segment>Huawei</scale-segment>\n</scale-segmented-button>\n")),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)("h3",{id:"disabled-segment"},"Disabled Segment"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled Segment",args:{label:"Label"},mdxType:"Story"},SegmentedButton_stories_DisabledSegmentTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-segmented-button>\n  <scale-segment disabled>Apple</scale-segment>\n  <scale-segment>One+</scale-segment>\n  <scale-segment>Samsung</scale-segment>\n  <scale-segment>Huawei</scale-segment>\n</scale-segmented-button>\n")),Object(esm.b)("h3",{id:"disabled-button"},"Disabled Button"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled Button",args:{label:"Label",disabled:!0},mdxType:"Story"},SegmentedButton_stories_DisabledTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-segmented-button disabled>\n  <scale-segment>Apple</scale-segment>\n  <scale-segment selected>One+</scale-segment>\n  <scale-segment>Samsung</scale-segment>\n  <scale-segment>Huawei</scale-segment>\n</scale-segmented-button>\n")),Object(esm.b)("h2",{id:"icon-only"},"Icon only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon only",args:{label:"Group Label"},mdxType:"Story"},SegmentedButton_stories_IconOnlyTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-segmented-button>\n  <scale-segment selected>\n    <scale-icon-weather-cloudy slot="segment-icon"> </scale-icon-weather-cloudy>\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-weather-rain slot="segment-icon"> </scale-icon-weather-rain>\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-weather-sunny slot="segment-icon"> </scale-icon-weather-sunny>\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-weahter-heavy-snow slot="segment-icon">\n    </scale-icon-weahter-heavy-snow>\n  </scale-segment>\n</scale-segmented-button>\n')),Object(esm.b)("h2",{id:"icon-and-text"},"Icon and Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon and Text",args:{label:"Group Label"},mdxType:"Story"},SegmentedButton_stories_IconTextTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-segmented-button>\n  <scale-segment selected>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Apple\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    One+\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Samsung\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Huawei\n  </scale-segment>\n</scale-segmented-button>\n')),Object(esm.b)("h2",{id:"invalid"},"Invalid"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"invalid",args:{invalid:!0},mdxType:"Story"},SegmentedButton_stories_InvalidTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-segmented-button invalid>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Apple\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    One+\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Samsung\n  </scale-segment>\n  <scale-segment>\n    <scale-icon-device-device-phone slot="segment-icon">\n    </scale-icon-device-device-phone>\n    Huawei\n  </scale-segment>\n</scale-segmented-button>\n')))}MDXContent.isMDXComponent=!0;var standard=SegmentedButton_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Group Label"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n      :full-width="fullWidth"\n      :label="label"\n    >\n      <scale-segment selected>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var multiSelect=SegmentedButton_stories_MultiSelectTemplate.bind({});multiSelect.storyName="MultiSelect",multiSelect.args={multiSelect:!0,label:"Group Label"},multiSelect.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected>Apple</scale-segment>\n      <scale-segment selected>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var disabledSegment=SegmentedButton_stories_DisabledSegmentTemplate.bind({});disabledSegment.storyName="Disabled Segment",disabledSegment.args={label:"Label"},disabledSegment.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    disabled: true,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n    >\n      <scale-segment disabled>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var disabledButton=SegmentedButton_stories_DisabledTemplate.bind({});disabledButton.storyName="Disabled Button",disabledButton.args={label:"Label",disabled:!0},disabledButton.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    disabled: \'true\',\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :disabled="disabled"\n      :size="size"\n      :multi-select="multiSelect"\n      :styles="styles"\n      :invalid="invalid"\n      :helper-text="helperText"\n    >\n      <scale-segment>Apple</scale-segment>\n      <scale-segment selected>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var iconOnly=SegmentedButton_stories_IconOnlyTemplate.bind({});iconOnly.storyName="Icon only",iconOnly.args={label:"Group Label"},iconOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected><scale-icon-weather-cloudy slot="segment-icon"></scale-icon-weather-cloudy></scale-segment>\n      <scale-segment><scale-icon-weather-rain slot="segment-icon"></scale-icon-weather-rain></scale-segment>\n      <scale-segment><scale-icon-weather-sunny slot="segment-icon"></scale-icon-weather-sunny></scale-segment>\n      <scale-segment><scale-icon-weather-heavy-snow slot="segment-icon"></scale-icon-weather-heavy-snow></scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var iconAndText=SegmentedButton_stories_IconTextTemplate.bind({});iconAndText.storyName="Icon and Text",iconAndText.args={label:"Group Label"},iconAndText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :size="size"\n      :disabled="disabled"\n      :multi-select="multiSelect"\n      :styles="styles"\n    >\n      <scale-segment selected><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Apple</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>One+</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Samsung</scale-segment>\n      <scale-segment><scale-icon-device-device-phone slot="segment-icon"></scale-icon-device-device-phone>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var invalid=SegmentedButton_stories_InvalidTemplate.bind({});invalid.storyName="invalid",invalid.args={invalid:!0},invalid.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSegmentedButton\n  },\n  props: {\n    label: String,\n    icon: String,\n    invalid: Boolean,\n    ...ScaleSegmentedButton.props\n  },\n  template: `\n    <scale-segmented-button\n      :invalid="invalid"\n      :helper-text="helperText"\n      :label="label"\n    >\n      <scale-segment>Apple</scale-segment>\n      <scale-segment>One+</scale-segment>\n      <scale-segment>Samsung</scale-segment>\n      <scale-segment>Huawei</scale-segment>\n    </scale-segmented-button>\n  `\n})'}};var componentMeta={title:"Beta Components/Segmented Button",component:ScaleSegmentedButton,argTypes:{size:{control:{type:"select",options:["small","medium","large"]}}},includeStories:["standard","multiSelect","disabledSegment","disabledButton","iconOnly","iconAndText","invalid"]},mdxStoryNameToKey={Standard:"standard",MultiSelect:"multiSelect","Disabled Segment":"disabledSegment","Disabled Button":"disabledButton","Icon only":"iconOnly","Icon and Text":"iconAndText",invalid:"invalid"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/sidebar-navigation/SidebarNav.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return SidebarNav_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"activeOnLevel1",(function(){return activeOnLevel1})),__webpack_require__.d(__webpack_exports__,"activeOnLevel2",(function(){return activeOnLevel2})),__webpack_require__.d(__webpack_exports__,"activeOnLevel3",(function(){return activeOnLevel3})),__webpack_require__.d(__webpack_exports__,"customMediaQuery",(function(){return customMediaQuery}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),sidebar_navigation_SidebarNavvue_type_script_lang_js_={name:"scale-sidebar-nav",props:{ariaLabel:{type:String},collapsible:{type:Boolean,default:!1},collapsibleMediaQuery:{type:String},collapsibleLabel:{type:String,default:"Menu"},styles:{type:String}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(sidebar_navigation_SidebarNavvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var SidebarNav=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={displayName:"scale-sidebar-nav",exportName:"default",description:"",tags:{},props:[{name:"ariaLabel",type:{name:"string"}},{name:"collapsible",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"collapsibleMediaQuery",type:{name:"string"}},{name:"collapsibleLabel",type:{name:"string"},defaultValue:{func:!1,value:"'Menu'"}},{name:"styles",type:{name:"string"}}]};__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js");var sidebar_navigation_SidebarNavCollapsiblevue_type_script_lang_js_={name:"SidebarNavCollapsible",props:{tag:{type:String,default:"li"},label:{type:String},href:{type:String,default:"#"},expanded:{type:Boolean,default:!1},active:{type:Boolean,default:!1},bold:{type:Boolean,default:!1},condensed:{type:Boolean,default:!1},nestingLevel:{type:Number},styles:{type:String}}};const SidebarNavCollapsible_vuedocgen_export_0=Object(componentNormalizer.a)(sidebar_navigation_SidebarNavCollapsiblevue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var SidebarNavCollapsible=SidebarNavCollapsible_vuedocgen_export_0;SidebarNavCollapsible_vuedocgen_export_0.__docgenInfo={displayName:"SidebarNavCollapsible",exportName:"default",description:"",tags:{},props:[{name:"tag",type:{name:"string"},defaultValue:{func:!1,value:"'li'"}},{name:"label",type:{name:"string"}},{name:"href",type:{name:"string"},defaultValue:{func:!1,value:"'#'"}},{name:"expanded",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"active",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"bold",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"condensed",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"nestingLevel",type:{name:"number"}},{name:"styles",type:{name:"string"}}]};var sidebar_navigation_SidebarNavItemvue_type_script_lang_js_={name:"SidebarNavItem",props:{condensed:{type:Boolean,default:!1},bold:{type:Boolean,default:!1},active:{type:Boolean,default:!1},current:{type:[String,null],default:null},nestingLevel:{type:Number},styles:{type:String}}};const SidebarNavItem_vuedocgen_export_0=Object(componentNormalizer.a)(sidebar_navigation_SidebarNavItemvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var SidebarNavItem=SidebarNavItem_vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}SidebarNavItem_vuedocgen_export_0.__docgenInfo={displayName:"SidebarNavItem",exportName:"default",description:"",tags:{},props:[{name:"condensed",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"bold",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"active",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"current",type:{name:"string|null"},defaultValue:{func:!1,value:"null"}},{name:"nestingLevel",type:{name:"number"}},{name:"styles",type:{name:"string"}}]};var SidebarNav_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({width:{type:String}},SidebarNav.props),computed:{wrapperStyles:function wrapperStyles(){return{maxWidth:this.width}}},template:'\n    <div :style="wrapperStyles">\n      <scale-sidebar-nav\n        :arial-label="ariaLabel"\n        :collapsible="collapsible"\n        :collapsible-label="collapsibleLabel"\n        :collapsible-media-query="collapsibleMediaQuery"\n        :styles="styles"\n      >\n        <scale-sidebar-nav-item>\n          <a href="#">Overview</a>\n        </scale-sidebar-nav-item>\n        <scale-sidebar-nav-collapsible label="Reference" expanded>\n          <scale-sidebar-nav-collapsible label="Function A" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Endpoint 1</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 2</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 3</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-collapsible label="Function B">\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 4</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 5</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 6</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-collapsible label="Etcetera">\n          <scale-sidebar-nav-item>\n            <a href="#">Some foo</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">More bar</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Links baz</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-item>\n          <a href="#">Console</a>\n        </scale-sidebar-nav-item>\n      </scale-sidebar-nav>\n    </div>\n  '}},layoutProps={Template:SidebarNav_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Sidebar Navigation",component:SidebarNav,subcomponents:{"scale-sidebar-nav-collapsible":SidebarNavCollapsible,"scale-sidebar-nav-item":SidebarNavItem},argTypes:{styles:{control:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Sidebar Navigation"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{collapsibleLabel:"Explore this topic"},mdxType:"Story"},SidebarNav_stories_Template.bind())),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-sidebar-nav collapsible-label="Explore this topic">\n  <scale-sidebar-nav-item>\n    <a href="#">Overview</a>\n  </scale-sidebar-nav-item>\n  <scale-sidebar-nav-collapsible label="Reference" expanded>\n    <scale-sidebar-nav-collapsible label="Function A" expanded>\n      <scale-sidebar-nav-item current active>\n        <a href="#">Endpoint 1</a>\n      </scale-sidebar-nav-item>\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 2</a>\n      </scale-sidebar-nav-item>\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 3</a>\n      </scale-sidebar-nav-item>\n    </scale-sidebar-nav-collapsible>\n    <scale-sidebar-nav-collapsible label="Function B">\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 4</a>\n      </scale-sidebar-nav-item>\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 5</a>\n      </scale-sidebar-nav-item>\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 6</a>\n      </scale-sidebar-nav-item>\n    </scale-sidebar-nav-collapsible>\n  </scale-sidebar-nav-collapsible>\n  <scale-sidebar-nav-collapsible label="Etcetera">\n    <scale-sidebar-nav-item>\n      <a href="#">Some foo</a>\n    </scale-sidebar-nav-item>\n    <scale-sidebar-nav-item>\n      <a href="#">More bar</a>\n    </scale-sidebar-nav-item>\n    <scale-sidebar-nav-item>\n      <a href="#">Links baz</a>\n    </scale-sidebar-nav-item>\n  </scale-sidebar-nav-collapsible>\n  <scale-sidebar-nav-item>\n    <a href="#">Console</a>\n  </scale-sidebar-nav-item>\n</scale-sidebar-nav>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"/* sidebar-nav */\n:host {\n  --max-width: 15rem;\n  --spacing-indent: var(--telekom-spacing-composition-space-08);\n  --spacing-collapsible: var(--telekom-spacing-composition-space-06);\n  --opacity-chevron: 0;\n  --left-current-border: 0;\n\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --color-toggle-button: var(--telekom-color-ui-regular);\n  --border-y-toggle-button: 1px solid var(--telekom-color-ui-faint);\n  --radius-toggle-button: var(--telekom-radius-small);\n}\n\n/* sidebar-nav-collapsible */\n:host {\n  --opacity-chevron: 1;\n  --border-bottom-color: var(--telekom-color-ui-faint);\n  --border-left-color-third-nesting: var(--telekom-color-ui-strong);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-primary: var(--telekom-color-text-and-icon-primary-standard);\n  --background-color-before-active: var(--color-primary);\n  --font-weight-bold: var(--telekom-typography-font-weight-bold);\n  --box-shadow-focus: inset 0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);\n}\n\n/* sidebar-nav-item */\n:host {\n  --border-bottom-color: var(--telekom-color-ui-faint);\n  --border-left-color-third-nesting: var(--telekom-color-ui-strong);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-primary: var(--telekom-color-text-and-icon-primary-standard);\n  --background-color-before-active: var(--color-primary);\n  --font-bold: var(--telekom-text-style-ui-bold);\n  --box-shadow-focus: inset 0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"active-on-level-1"},"Active on Level 1"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Active on Level 1",mdxType:"Story"},{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item current active>\n            <a href="#">Resources</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-sidebar-nav>\n  <scale-sidebar-nav-item>\n    <a href="#">Overview</a>\n  </scale-sidebar-nav-item>\n  <scale-sidebar-nav-item current active>\n    <a href="#">Resources</a>\n  </scale-sidebar-nav-item>\n  <scale-sidebar-nav-item>\n    <a href="#">Console</a>\n  </scale-sidebar-nav-item>\n</scale-sidebar-nav>\n')),Object(esm.b)("h2",{id:"active-on-level-2"},"Active on Level 2"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Active on Level 2",mdxType:"Story"},{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Day</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Night</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-sidebar-nav>\n  <scale-sidebar-nav-item>\n    <a href="#">Overview</a>\n  </scale-sidebar-nav-item>\n  <scale-sidebar-nav-collapsible label="Reference" expanded>\n    <scale-sidebar-nav-item current active>\n      <a href="#">Day</a>\n    </scale-sidebar-nav-item>\n    <scale-sidebar-nav-item>\n      <a href="#">Night</a>\n    </scale-sidebar-nav-item>\n  </scale-sidebar-nav-collapsible>\n  <scale-sidebar-nav-item>\n    <a href="#">Console</a>\n  </scale-sidebar-nav-item>\n</scale-sidebar-nav>\n')),Object(esm.b)("h2",{id:"active-on-level-3"},"Active on Level 3"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Active on Level 3",mdxType:"Story"},{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-collapsible label="Function A" expanded>\n              <scale-sidebar-nav-item current active>\n                <a href="#">Endpoint 1</a>\n              </scale-sidebar-nav-item>\n              <scale-sidebar-nav-item>\n                <a href="#">Endpoint 2</a>\n              </scale-sidebar-nav-item>\n            </scale-sidebar-nav-collapsible>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-sidebar-nav>\n  <scale-sidebar-nav-collapsible label="Reference" expanded>\n    <scale-sidebar-nav-collapsible label="Function A" expanded>\n      <scale-sidebar-nav-item current active>\n        <a href="#">Endpoint 1</a>\n      </scale-sidebar-nav-item>\n      <scale-sidebar-nav-item>\n        <a href="#">Endpoint 2</a>\n      </scale-sidebar-nav-item>\n    </scale-sidebar-nav-collapsible>\n  </scale-sidebar-nav-collapsible>\n</scale-sidebar-nav>\n')),Object(esm.b)("h2",{id:"custom-media-query"},"Custom Media Query"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Media Query",args:{collapsibleLabel:"Menu",collapsibleMediaQuery:"(max-width: 44em)"},mdxType:"Story"},SidebarNav_stories_Template.bind())),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-sidebar-nav\n  collapsible-label="Menu"\n  collapsible-media-query="(max-width: 44em)"\n>\n  <scale-sidebar-nav-item>\n    <a href="#">Overview</a>\n  </scale-sidebar-nav-item>\n  \x3c!-- ... --\x3e\n  <scale-sidebar-nav-item>\n    <a href="#">Console</a>\n  </scale-sidebar-nav-item>\n</scale-sidebar-nav>\n')))}MDXContent.isMDXComponent=!0;var standard=SidebarNav_stories_Template.bind();standard.storyName="Standard",standard.args={collapsibleLabel:"Explore this topic"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    width: {\n      type: String\n    },\n    ...ScaleSidebarNav.props\n  },\n  computed: {\n    wrapperStyles() {\n      return {\n        maxWidth: this.width\n      };\n    }\n\n  },\n  template: `\n    <div :style="wrapperStyles">\n      <scale-sidebar-nav\n        :arial-label="ariaLabel"\n        :collapsible="collapsible"\n        :collapsible-label="collapsibleLabel"\n        :collapsible-media-query="collapsibleMediaQuery"\n        :styles="styles"\n      >\n        <scale-sidebar-nav-item>\n          <a href="#">Overview</a>\n        </scale-sidebar-nav-item>\n        <scale-sidebar-nav-collapsible label="Reference" expanded>\n          <scale-sidebar-nav-collapsible label="Function A" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Endpoint 1</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 2</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 3</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-collapsible label="Function B">\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 4</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 5</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 6</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-collapsible label="Etcetera">\n          <scale-sidebar-nav-item>\n            <a href="#">Some foo</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">More bar</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Links baz</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-item>\n          <a href="#">Console</a>\n        </scale-sidebar-nav-item>\n      </scale-sidebar-nav>\n    </div>\n  `\n})'}};var activeOnLevel1=function activeOnLevel1(){return{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item current active>\n            <a href="#">Resources</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      '}};activeOnLevel1.storyName="Active on Level 1",activeOnLevel1.parameters={storySource:{source:'{\n  template: `\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item current active>\n            <a href="#">Resources</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      `\n}'}};var activeOnLevel2=function activeOnLevel2(){return{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Day</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Night</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      '}};activeOnLevel2.storyName="Active on Level 2",activeOnLevel2.parameters={storySource:{source:'{\n  template: `\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-item>\n            <a href="#">Overview</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Day</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Night</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-item>\n            <a href="#">Console</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav>\n      `\n}'}};var activeOnLevel3=function activeOnLevel3(){return{template:'\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-collapsible label="Function A" expanded>\n              <scale-sidebar-nav-item current active>\n                <a href="#">Endpoint 1</a>\n              </scale-sidebar-nav-item>\n              <scale-sidebar-nav-item>\n                <a href="#">Endpoint 2</a>\n              </scale-sidebar-nav-item>\n            </scale-sidebar-nav-collapsible>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav>\n      '}};activeOnLevel3.storyName="Active on Level 3",activeOnLevel3.parameters={storySource:{source:'{\n  template: `\n        <scale-sidebar-nav>\n          <scale-sidebar-nav-collapsible label="Reference" expanded>\n            <scale-sidebar-nav-collapsible label="Function A" expanded>\n              <scale-sidebar-nav-item current active>\n                <a href="#">Endpoint 1</a>\n              </scale-sidebar-nav-item>\n              <scale-sidebar-nav-item>\n                <a href="#">Endpoint 2</a>\n              </scale-sidebar-nav-item>\n            </scale-sidebar-nav-collapsible>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav>\n      `\n}'}};var customMediaQuery=SidebarNav_stories_Template.bind();customMediaQuery.storyName="Custom Media Query",customMediaQuery.args={collapsibleLabel:"Menu",collapsibleMediaQuery:"(max-width: 44em)"},customMediaQuery.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    width: {\n      type: String\n    },\n    ...ScaleSidebarNav.props\n  },\n  computed: {\n    wrapperStyles() {\n      return {\n        maxWidth: this.width\n      };\n    }\n\n  },\n  template: `\n    <div :style="wrapperStyles">\n      <scale-sidebar-nav\n        :arial-label="ariaLabel"\n        :collapsible="collapsible"\n        :collapsible-label="collapsibleLabel"\n        :collapsible-media-query="collapsibleMediaQuery"\n        :styles="styles"\n      >\n        <scale-sidebar-nav-item>\n          <a href="#">Overview</a>\n        </scale-sidebar-nav-item>\n        <scale-sidebar-nav-collapsible label="Reference" expanded>\n          <scale-sidebar-nav-collapsible label="Function A" expanded>\n            <scale-sidebar-nav-item current active>\n              <a href="#">Endpoint 1</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 2</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 3</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n          <scale-sidebar-nav-collapsible label="Function B">\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 4</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 5</a>\n            </scale-sidebar-nav-item>\n            <scale-sidebar-nav-item>\n              <a href="#">Endpoint 6</a>\n            </scale-sidebar-nav-item>\n          </scale-sidebar-nav-collapsible>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-collapsible label="Etcetera">\n          <scale-sidebar-nav-item>\n            <a href="#">Some foo</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">More bar</a>\n          </scale-sidebar-nav-item>\n          <scale-sidebar-nav-item>\n            <a href="#">Links baz</a>\n          </scale-sidebar-nav-item>\n        </scale-sidebar-nav-collapsible>\n        <scale-sidebar-nav-item>\n          <a href="#">Console</a>\n        </scale-sidebar-nav-item>\n      </scale-sidebar-nav>\n    </div>\n  `\n})'}};var componentMeta={title:"Components/Sidebar Navigation",component:SidebarNav,subcomponents:{"scale-sidebar-nav-collapsible":SidebarNavCollapsible,"scale-sidebar-nav-item":SidebarNavItem},argTypes:{styles:{control:{disable:!0}}},includeStories:["standard","activeOnLevel1","activeOnLevel2","activeOnLevel3","customMediaQuery"]},mdxStoryNameToKey={Standard:"standard","Active on Level 1":"activeOnLevel1","Active on Level 2":"activeOnLevel2","Active on Level 3":"activeOnLevel3","Custom Media Query":"customMediaQuery"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/slider/Slider.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Slider_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"range",(function(){return range})),__webpack_require__.d(__webpack_exports__,"stepMarks",(function(){return stepMarks})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"platformIOs",(function(){return platformIOs})),__webpack_require__.d(__webpack_exports__,"platformAndroid",(function(){return platformAndroid}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),slider_ScaleSlidervue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{label:{type:String},value:{type:Number,default:0},range:{type:Boolean,default:!1},valueFrom:{type:Number,default:0},valueTo:{type:Number,default:0},min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},showStepMarks:{type:Boolean,default:!1},unit:{type:String,default:""},unitPosition:{type:0,default:"after"},decimals:{type:Number,default:0},disabled:{type:Boolean,default:!1},showValue:{type:Boolean,default:!0},name:{type:String},sliderId:{type:String},helperText:String,platform:{type:0},styles:{type:String}},render:function render(){return this.$slots.default}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(slider_ScaleSlidervue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleSlider=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleSlider",description:"",tags:{},props:[{name:"label",type:{name:"string"}},{name:"value",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"range",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"valueFrom",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"valueTo",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"min",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"max",type:{name:"number"},defaultValue:{func:!1,value:"100"}},{name:"step",type:{name:"number"},defaultValue:{func:!1,value:"1"}},{name:"showStepMarks",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"unit",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"unitPosition",type:{name:"'before' | 'after'"},defaultValue:{func:!1,value:"'after'"}},{name:"decimals",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"showValue",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"name",type:{name:"string"}},{name:"sliderId",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"platform",type:{name:"'ios' | 'android'"}},{name:"styles",type:{name:"string"}}],slots:[{name:"default"}]};var addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Slider_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({},ScaleSlider.props),template:'\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  ',methods:{handleScaleChange:Object(addon_actions_dist_esm.action)("scale-change"),handleScaleInput:Object(addon_actions_dist_esm.action)("scale-input")}}},layoutProps={Template:Slider_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Slider",component:ScaleSlider,argTypes:{platform:{control:{type:"text"}},styles:{control:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Slider"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Standard",value:42},mdxType:"Story"},Slider_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 368px;\n  --height-track: 6px;\n  --background-track: var(--telekom-color-ui-faint);\n  --radius-track: var(--telekom-radius-pill);\n  --spacing-track: var(--telekom-spacing-composition-space-07) 0\n    var(--telekom-spacing-composition-space-06);\n  --spacing-x-inner-track: 10px;\n  --background-bar: var(--telekom-color-primary-standard);\n  --radius-thumb: var(--telekom-radius-circle);\n  --size-thumb: 24px;\n  --border-color-thumb: rgba(0, 0, 0, 0.05);\n  --background-thumb: var(--telekom-color-ui-white);\n  --shadow-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24),\n    0 4px 12px 0 rgba(0, 0, 0, 0.26);\n  --color-focus: var(--telekom-color-functional-focus-standard);\n  --spacing-x-step-marks: 8px;\n  --color-step-mark: var(--telekom-color-text-and-icon-additional);\n  --radius-step-mark: var(--telekom-radius-circle);\n  --size-step-mark: 4px;\n  --font-label: var(--telekom-text-style-ui);\n  --font-helper-text: var(--telekom-text-style-small-bold);\n  --color-helper-text: var(--telekom-color-text-and-icon-additional);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"range"},"Range"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Range",args:{label:"Temperature",range:!0,valueFrom:180,valueTo:330,max:500,unit:"ºC"},mdxType:"Story"},Slider_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-slider\n  label="Temperature"\n  range\n  valueFrom="100"\n  valueTo="300"\n  max="500"\n  unit="ºC">\n</scale-slider>\n')),Object(esm.b)("h2",{id:"step-marks"},"Step Marks"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Step Marks",args:{label:"Step Marks",step:25,showStepMarks:!0,value:50,max:200},mdxType:"Story"},Slider_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-slider\n  label="Step Marks"\n  step="25"\n  show-step-marks\n  value="50"\n  max="200">\n</scale-slider>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{label:"Alpha",value:.66,step:.01,decimals:2,max:1,helperText:"Between 0 and 1"},mdxType:"Story"},Slider_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-slider\n  label="Alpha"\n  value="0.66"\n  step="0.01"\n  max="1"\n  helper-text="Between 0 and 1">\n</scale-slider>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",value:13,disabled:!0},mdxType:"Story"},Slider_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-slider\n  label="Disabled"\n  value="13"\n  disabled>\n</scale-slider>\n')),Object(esm.b)("h2",{id:"platform-ios"},"Platform iOS"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Platform iOS",mdxType:"Story"},{template:'\n        <scale-slider label="iOS" value="25" platform="ios"></scale-slider>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-slider label="Apple" value="25" platform="ios"></scale-slider>\n')),Object(esm.b)("h2",{id:"platform-android"},"Platform Android"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Platform Android",mdxType:"Story"},{template:'\n        <scale-slider label="Android" value="75" platform="android"></scale-slider>\n      '})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'\x3c!-- attribute data-platform="android" in parent element works in Chrome --\x3e\n<body data-platform="android">\n  <scale-slider label="Android" value="75"></scale-slider>\n</body>\n')))}MDXContent.isMDXComponent=!0;var standard=Slider_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Standard",value:42},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleSlider.props\n  },\n  template: `\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  `,\n  methods: {\n    handleScaleChange: action(\'scale-change\'),\n    handleScaleInput: action(\'scale-input\')\n  }\n})'}};var range=Slider_stories_Template.bind({});range.storyName="Range",range.args={label:"Temperature",range:!0,valueFrom:180,valueTo:330,max:500,unit:"ºC"},range.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleSlider.props\n  },\n  template: `\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  `,\n  methods: {\n    handleScaleChange: action(\'scale-change\'),\n    handleScaleInput: action(\'scale-input\')\n  }\n})'}};var stepMarks=Slider_stories_Template.bind({});stepMarks.storyName="Step Marks",stepMarks.args={label:"Step Marks",step:25,showStepMarks:!0,value:50,max:200},stepMarks.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleSlider.props\n  },\n  template: `\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  `,\n  methods: {\n    handleScaleChange: action(\'scale-change\'),\n    handleScaleInput: action(\'scale-input\')\n  }\n})'}};var helperText=Slider_stories_Template.bind({});helperText.storyName="Helper Text",helperText.args={label:"Alpha",value:.66,step:.01,decimals:2,max:1,helperText:"Between 0 and 1"},helperText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleSlider.props\n  },\n  template: `\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  `,\n  methods: {\n    handleScaleChange: action(\'scale-change\'),\n    handleScaleInput: action(\'scale-input\')\n  }\n})'}};var disabled=Slider_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",value:13,disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleSlider.props\n  },\n  template: `\n    <scale-slider\n      :label="label"\n      :value="value"\n      :range="range"\n      :value-from="valueFrom"\n      :value-to="valueTo"\n      :min="min"\n      :max="max"\n      :step="step"\n      :show-step-marks="showStepMarks"\n      :unit="unit"\n      :unit-position="unitPosition"\n      :decimals="decimals"\n      :disabled="disabled"\n      :show-value="String(showValue)"\n      :name="name"\n      :slider-id="sliderId"\n      :helper-text="helperText"\n      :platform="platform"\n      @scale-change="handleScaleChange"\n      @scale-input="handleScaleInput"\n      >\n    </scale-slider>\n  `,\n  methods: {\n    handleScaleChange: action(\'scale-change\'),\n    handleScaleInput: action(\'scale-input\')\n  }\n})'}};var platformIOs=function platformIOs(){return{template:'\n        <scale-slider label="iOS" value="25" platform="ios"></scale-slider>\n      '}};platformIOs.storyName="Platform iOS",platformIOs.parameters={storySource:{source:'{\n  template: `\n        <scale-slider label="iOS" value="25" platform="ios"></scale-slider>\n      `\n}'}};var platformAndroid=function platformAndroid(){return{template:'\n        <scale-slider label="Android" value="75" platform="android"></scale-slider>\n      '}};platformAndroid.storyName="Platform Android",platformAndroid.parameters={storySource:{source:'{\n  template: `\n        <scale-slider label="Android" value="75" platform="android"></scale-slider>\n      `\n}'}};var componentMeta={title:"Components/Slider",component:ScaleSlider,argTypes:{platform:{control:{type:"text"}},styles:{control:{disable:!0}}},includeStories:["standard","range","stepMarks","helperText","disabled","platformIOs","platformAndroid"]},mdxStoryNameToKey={Standard:"standard",Range:"range","Step Marks":"stepMarks","Helper Text":"helperText",Disabled:"disabled","Platform iOS":"platformIOs","Platform Android":"platformAndroid"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/switch/switch.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return switch_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"small",(function(){return small})),__webpack_require__.d(__webpack_exports__,"standardDisabled",(function(){return standardDisabled})),__webpack_require__.d(__webpack_exports__,"selected",(function(){return selected})),__webpack_require__.d(__webpack_exports__,"selectedDisabled",(function(){return selectedDisabled})),__webpack_require__.d(__webpack_exports__,"android",(function(){return switch_stories_android})),__webpack_require__.d(__webpack_exports__,"androidDisabled",(function(){return switch_stories_androidDisabled})),__webpack_require__.d(__webpack_exports__,"androidSelected",(function(){return switch_stories_androidSelected})),__webpack_require__.d(__webpack_exports__,"androidSelectedDisabled",(function(){return switch_stories_androidSelectedDisabled}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),switch_ScaleSwitchvue_type_script_lang_js_={props:{disabled:{type:Boolean,default:!1},inputId:{type:String},checked:{type:Boolean,default:!1},label:String,size:String,name:String},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(switch_ScaleSwitchvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-switch",{staticStyle:{"--color-on":"blue"},attrs:{name:this.name,label:this.label,disabled:this.disabled,"input-id":this.inputId,checked:this.checked,size:this.size},on:{scaleChange:this.scaleChange}})}),[],!1,null,null,null).exports;var ScaleSwitch=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleSwitch",description:"",tags:{},props:[{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"inputId",type:{name:"string"}},{name:"checked",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"label",type:{name:"string"}},{name:"size",type:{name:"string"}},{name:"name",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}]};var switch_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleSwitch:ScaleSwitch},props:ScaleSwitch.props,template:'\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  ',methods:{scaleChange:Object(addon_actions_dist_esm.action)("scaleChange")}}},layoutProps={Template:switch_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Switch",component:ScaleSwitch,mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Switch"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Standard"},mdxType:"Story"},switch_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 42px;\n  --height: 24px;\n  --offset: 2px;\n  --radius: 1em;\n  --transition-duration: var(--telekom-motion-duration-immediate);\n  --transition-easing: var(--telekom-motion-easing-standard);\n  --shadow-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24),\n    0 4px 12px 0 rgba(0, 0, 0, 0.26);\n  --spacing-x-label: var(--telekom-spacing-composition-space-04);\n  --font-label: var(--telekom-text-style-ui);\n  --font-io-text: var(--telekom-text-style-small-bold);\n  --color-label: var(--telekom-color-text-and-icon-standard);\n}\n")),Object(esm.b)("h2",{id:"small"},"Small"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small",args:{label:"Small",size:"small"},mdxType:"Story"},switch_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-switch size="small" label="Standard disabled"></scale-switch>\n')),Object(esm.b)("h2",{id:"standard-disabled"},"Standard disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard disabled",args:{disabled:!0,label:"Standard disabled"},mdxType:"Story"},switch_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-switch disabled label="Standard disabled"></scale-switch>\n')),Object(esm.b)("h2",{id:"selected"},"Selected"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Selected",args:{checked:!0,label:"Selected"},mdxType:"Story"},switch_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-switch checked label="Selected"></scale-switch>\n')),Object(esm.b)("h2",{id:"selected-disabled"},"Selected disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Selected disabled",args:{disabled:!0,checked:!0,label:"Selected disabled"},mdxType:"Story"},switch_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-switch disabled checked label="Selected disabled"></scale-switch>\n')),Object(esm.b)("h2",{id:"android"},"Android"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Android",mdxType:"Story"},{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div data-platform="android">\n  <scale-switch label="Platform Android"></scale-switch>\n</div>\n')),Object(esm.b)("h2",{id:"android-disabled"},"Android Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Android Disabled",mdxType:"Story"},{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div data-platform="android">\n  <scale-switch disabled label="Platform Android"></scale-switch>\n</div>\n')),Object(esm.b)("h2",{id:"android-selected"},"Android Selected"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Android Selected",mdxType:"Story"},{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div data-platform="android">\n  <scale-switch checked label="Platform Android"></scale-switch>\n</div>\n')),Object(esm.b)("h2",{id:"android-selected-disabled"},"Android Selected Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Android Selected Disabled",mdxType:"Story"},{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}})),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<div data-platform="android">\n  <scale-switch disabled checked label="Platform Android"></scale-switch>\n</div>\n')))}MDXContent.isMDXComponent=!0;var standard=switch_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Standard"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSwitch\n  },\n  props: ScaleSwitch.props,\n  template: `\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\')\n  }\n})'}};var small=switch_stories_Template.bind({});small.storyName="Small",small.args={label:"Small",size:"small"},small.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSwitch\n  },\n  props: ScaleSwitch.props,\n  template: `\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\')\n  }\n})'}};var standardDisabled=switch_stories_Template.bind({});standardDisabled.storyName="Standard disabled",standardDisabled.args={disabled:!0,label:"Standard disabled"},standardDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSwitch\n  },\n  props: ScaleSwitch.props,\n  template: `\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\')\n  }\n})'}};var selected=switch_stories_Template.bind({});selected.storyName="Selected",selected.args={checked:!0,label:"Selected"},selected.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSwitch\n  },\n  props: ScaleSwitch.props,\n  template: `\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\')\n  }\n})'}};var selectedDisabled=switch_stories_Template.bind({});selectedDisabled.storyName="Selected disabled",selectedDisabled.args={disabled:!0,checked:!0,label:"Selected disabled"},selectedDisabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleSwitch\n  },\n  props: ScaleSwitch.props,\n  template: `\n    <scale-switch\n      :disabled="disabled"\n      :input-id="inputId"\n      :checked="checked"\n      :label="label"\n      :size="size"\n      :name="name"\n      @scaleChange="scaleChange"\n    >\n    </scale-switch>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\')\n  }\n})'}};var switch_stories_android=function android(){return{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}}};switch_stories_android.storyName="Android",switch_stories_android.parameters={storySource:{source:'{\n  template: `\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      `,\n  methods: {\n    emitChange: action(\'scale-change\')\n  }\n}'}};var switch_stories_androidDisabled=function androidDisabled(){return{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}}};switch_stories_androidDisabled.storyName="Android Disabled",switch_stories_androidDisabled.parameters={storySource:{source:'{\n  template: `\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      `,\n  methods: {\n    emitChange: action(\'scale-change\')\n  }\n}'}};var switch_stories_androidSelected=function androidSelected(){return{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}}};switch_stories_androidSelected.storyName="Android Selected",switch_stories_androidSelected.parameters={storySource:{source:'{\n  template: `\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      `,\n  methods: {\n    emitChange: action(\'scale-change\')\n  }\n}'}};var switch_stories_androidSelectedDisabled=function androidSelectedDisabled(){return{template:'\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      ',methods:{emitChange:Object(addon_actions_dist_esm.action)("scale-change")}}};switch_stories_androidSelectedDisabled.storyName="Android Selected Disabled",switch_stories_androidSelectedDisabled.parameters={storySource:{source:'{\n  template: `\n        <div data-platform="android">\n          <scale-switch\n            label="Platform Android"\n            name="android"\n            disabled\n            checked\n            @scale-change="emitChange"\n          >\n          </scale-switch>\n        </div>\n      `,\n  methods: {\n    emitChange: action(\'scale-change\')\n  }\n}'}};var componentMeta={title:"Components/Switch",component:ScaleSwitch,includeStories:["standard","small","standardDisabled","selected","selectedDisabled","android","androidDisabled","androidSelected","androidSelectedDisabled"]},mdxStoryNameToKey={Standard:"standard",Small:"small","Standard disabled":"standardDisabled",Selected:"selected","Selected disabled":"selectedDisabled",Android:"android","Android Disabled":"androidDisabled","Android Selected":"androidSelected","Android Selected Disabled":"androidSelectedDisabled"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleTabNav_vue_vue_type_style_index_0_id_1349bb3e_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaleTabNav_vue_vue_type_style_index_0_id_1349bb3e_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/tab-navigation/TabNav.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return TabNav_stories_Template})),__webpack_require__.d(__webpack_exports__,"textIcon",(function(){return textIcon})),__webpack_require__.d(__webpack_exports__,"textOnly",(function(){return textOnly})),__webpack_require__.d(__webpack_exports__,"disabledTabs",(function(){return disabledTabs})),__webpack_require__.d(__webpack_exports__,"largeTextIcon",(function(){return largeTextIcon})),__webpack_require__.d(__webpack_exports__,"largeTextOnly",(function(){return largeTextOnly}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),tab_navigation_ScaleTabNavvue_type_script_lang_js_={props:{styles:{type:String},disabled:{type:Boolean,default:!1},withIcon:{type:Boolean,default:!0},size:{type:String,default:"small"}}},componentNormalizer=(__webpack_require__("./stories/components/tab-navigation/ScaleTabNav.vue?vue&type=style&index=0&id=1349bb3e&scoped=true&lang=css&"),__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"));const __vuedocgen_export_0=Object(componentNormalizer.a)(tab_navigation_ScaleTabNavvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-tab-nav",{attrs:{size:_vm.size}},[_c("scale-tab-header",{attrs:{slot:"tab",disabled:!!_vm.disabled},slot:"tab"},[_vm.withIcon?_c("scale-icon-home-home"):_vm._e(),_vm._v(" General\n  ")],1),_vm._v(" "),_c("scale-tab-panel",{attrs:{slot:"panel"},slot:"panel"},[_c("p",{staticClass:"scl-font-variant-body"},[_vm._v("\n      Freegan kinfolk farm-to-table humblebrag cred, hammock bespoke small\n      batch pabst. 90's tumblr whatever direct trade, organic master cleanse\n      copper mug schlitz palo santo bushwick ethical pop-up chambray portland.\n      Sartorial austin iceland street art, pug asymmetrical marfa mustache\n      mumblecore. Shoreditch raclette knausgaard, swag enamel pin food truck\n      everyday carry 3 wolf moon.\n    ")])]),_vm._v(" "),_c("scale-tab-header",{attrs:{slot:"tab"},slot:"tab"},[_vm.withIcon?_c("scale-icon-user-file-analytics"):_vm._e(),_vm._v(" Usage\n  ")],1),_vm._v(" "),_c("scale-tab-panel",{attrs:{slot:"panel"},slot:"panel"},[_c("p",{staticClass:"scl-font-variant-body"},[_vm._v("\n      Bespoke austin pork belly yuccie pop-up. Before they sold out YOLO\n      kickstarter scenester meggings echo park aesthetic. Thundercats\n      post-ironic wayfarers microdosing etsy hashtag seitan photo booth\n      bitters.\n    ")])]),_vm._v(" "),_c("scale-tab-header",{attrs:{slot:"tab"},slot:"tab"},[_vm.withIcon?_c("scale-icon-content-heart"):_vm._e(),_vm._v(" Style\n  ")],1),_vm._v(" "),_c("scale-tab-panel",{attrs:{slot:"panel"},slot:"panel"},[_c("p",{staticClass:"scl-font-variant-body"},[_vm._v("\n      Biodiesel chia af hoodie tumeric bespoke letterpress man bun fashion axe\n      helvetica brunch godard cray viral prism. Street art tattooed bitters,\n      ugh four loko selfies you probably haven't heard of them locavore\n      bushwick. Tattooed 90's kinfolk, banh mi umami banjo palo santo cliche.\n      Cray wolf godard skateboard celiac taxidermy tacos offal.\n    ")])]),_vm._v(" "),_c("scale-tab-header",{attrs:{slot:"tab"},slot:"tab"},[_vm.withIcon?_c("scale-icon-action-random"):_vm._e(),_vm._v(" Code\n  ")],1),_vm._v(" "),_c("scale-tab-panel",{attrs:{slot:"panel"},slot:"panel"},[_c("p",{staticClass:"scl-font-variant-body"},[_vm._v("\n      Asymmetrical tattooed chia, banh mi blog microdosing edison bulb\n      meditation readymade drinking vinegar brunch irony. Whatever humblebrag\n      3 wolf moon kinfolk selvage. Listicle mumblecore forage paleo.\n      Asymmetrical hella crucifix ethical.\n    ")])])],1)}),[],!1,null,"1349bb3e",null).exports;var ScaleTabNav=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTabNav",description:"",tags:{},props:[{name:"styles",type:{name:"string"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"withIcon",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'small'"}}]};var tab_navigation_TabPanelvue_type_script_lang_js_={name:"Tab Panel",props:{styles:{type:String},tabbable:{type:Boolean,default:"true",argTypes:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}}}}};const TabPanel_vuedocgen_export_0=Object(componentNormalizer.a)(tab_navigation_TabPanelvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var TabPanel=TabPanel_vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}TabPanel_vuedocgen_export_0.__docgenInfo={displayName:"Tab Panel",exportName:"default",description:"",tags:{},props:[{name:"styles",type:{name:"string"}},{name:"tabbable",type:{name:"boolean"},defaultValue:{func:!1,value:"'true'"}}]};var TabNav_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleTabNav:ScaleTabNav},props:ScaleTabNav.props,template:'\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  '}},layoutProps={Template:TabNav_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Tab Navigation",component:ScaleTabNav,subcomponents:{"Scale Tab Panel":TabPanel},argTypes:{styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},size:{table:{type:{summary:"string"}},description:"(optional) size",control:{type:"select",options:["large","small"]}},small:{table:{type:{summary:"Boolean"}},description:"(optional) DEPRECATED - size should replace small",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Tab Navigation"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"text--icon"},"Text & Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Text & Icon",args:{size:"small"},mdxType:"Story"},TabNav_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Text & Icon",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tab-nav>\n  <scale-tab-header slot="tab">\n    <scale-icon-home-home></scale-icon-home-home> General\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Freegan kinfolk farm-to-table humblebrag cred…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-user-file-analytics></scale-icon-user-file-analytics> Usage\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Bespoke austin pork belly yuccie pop-up. Before they sold out…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-content-heart></scale-icon-content-heart> Style\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Biodiesel chia af hoodie tumeric bespoke letterpress…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-action-random></scale-icon-action-random> Code\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Asymmetrical tattooed chia, banh mi blog microdosing…\n  </scale-tab-panel>\n</scale-tab-nav>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --tab-height: 3rem;\n  --tab-spacing-horizontal: var(--telekom-spacing-composition-space-05);\n  --tab-spacing-vertical: var(--telekom-spacing-composition-space-06);\n  --tab-radius: var(--telekom-radius-small);\n  --tab-border-size: var(--telekom-line-weight-standard);\n  --tab-border-size-selected: var(--telekom-line-weight-highlight);\n  --tab-border-size-selected: 3px;\n\n  --tab-border-color: var(--telekom-color-ui-subtle);\n\n  --tab-height-large: 3.25rem;\n\n  --tab-spacing-horizontal-large: var(--telekom-spacing-composition-space-06);\n  --tab-spacing-vertical-large: 0.875rem;\n}\n\n/* tab-header */\n:host {\n  --font: var(--telekom-text-style-ui-bold);\n  --color: var(--telekom-color-text-and-icon-standard);\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --color-selected: var(--telekom-color-text-and-icon-primary-standard);\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --spacing-right-slotted: var(--telekom-spacing-composition-space-04);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --radius: var(--telekom-radius-standard);\n  --font-size-large: var(--telekom-typography-font-size-callout);\n}\n\n/* tab-panel */\n:host {\n  --spacing-top: var(--telekom-spacing-composition-space-08);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"text-only"},"Text Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Text Only",args:{withIcon:!1,size:"small"},mdxType:"Story"},TabNav_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tab-nav>\n  <scale-tab-header slot="tab">General</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Freegan kinfolk farm-to-table humblebrag cred…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Usage</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Bespoke austin pork belly yuccie pop-up. Before they sold out…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Style</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Biodiesel chia af hoodie tumeric bespoke letterpress…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Code</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Asymmetrical tattooed chia, banh mi blog microdosing…\n  </scale-tab-panel>\n</scale-tab-nav>\n')),Object(esm.b)("h2",{id:"disabled-tabs"},"Disabled Tabs"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled Tabs",args:{disabled:!0,withIcon:!1,size:"small"},mdxType:"Story"},TabNav_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tab-nav>\n  <scale-tab-header disabled slot="tab">General</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Freegan kinfolk farm-to-table humblebrag cred…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Usage</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Bespoke austin pork belly yuccie pop-up. Before they sold out…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Style</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Biodiesel chia af hoodie tumeric bespoke letterpress…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Code</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Asymmetrical tattooed chia, banh mi blog microdosing…\n  </scale-tab-panel>\n</scale-tab-nav>\n')),Object(esm.b)("h2",{id:"large-text--icon"},"Large, Text & Icon"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large, Text & Icon",args:{size:"large"},mdxType:"Story"},TabNav_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tab-nav size="large">\n  <scale-tab-header slot="tab">\n    <scale-icon-home-home></scale-icon-home-home> General\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Freegan kinfolk farm-to-table humblebrag cred…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-user-file-analytics></scale-icon-user-file-analytics> Usage\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Bespoke austin pork belly yuccie pop-up. Before they sold out…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-content-heart></scale-icon-content-heart> Style\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Biodiesel chia af hoodie tumeric bespoke letterpress…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">\n    <scale-icon-action-random></scale-icon-action-random> Code\n  </scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Asymmetrical tattooed chia, banh mi blog microdosing…\n  </scale-tab-panel>\n</scale-tab-nav>\n')),Object(esm.b)("h2",{id:"large-text-only"},"Large, Text Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Large, Text Only",args:{size:"large",withIcon:!1},mdxType:"Story"},TabNav_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tab-nav size="large">\n  <scale-tab-header slot="tab">General</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Freegan kinfolk farm-to-table humblebrag cred…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Usage</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Bespoke austin pork belly yuccie pop-up. Before they sold out…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Style</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Biodiesel chia af hoodie tumeric bespoke letterpress…\n  </scale-tab-panel>\n  <scale-tab-header slot="tab">Code</scale-tab-header>\n  <scale-tab-panel slot="panel">\n    Asymmetrical tattooed chia, banh mi blog microdosing…\n  </scale-tab-panel>\n</scale-tab-nav>\n')))}MDXContent.isMDXComponent=!0;var textIcon=TabNav_stories_Template.bind({});textIcon.storyName="Text & Icon",textIcon.args={size:"small"},textIcon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTabNav\n  },\n  props: ScaleTabNav.props,\n  template: `\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  `\n})'}};var textOnly=TabNav_stories_Template.bind({});textOnly.storyName="Text Only",textOnly.args={withIcon:!1,size:"small"},textOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTabNav\n  },\n  props: ScaleTabNav.props,\n  template: `\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  `\n})'}};var disabledTabs=TabNav_stories_Template.bind({});disabledTabs.storyName="Disabled Tabs",disabledTabs.args={disabled:!0,withIcon:!1,size:"small"},disabledTabs.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTabNav\n  },\n  props: ScaleTabNav.props,\n  template: `\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  `\n})'}};var largeTextIcon=TabNav_stories_Template.bind({});largeTextIcon.storyName="Large, Text & Icon",largeTextIcon.args={size:"large"},largeTextIcon.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTabNav\n  },\n  props: ScaleTabNav.props,\n  template: `\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  `\n})'}};var largeTextOnly=TabNav_stories_Template.bind({});largeTextOnly.storyName="Large, Text Only",largeTextOnly.args={size:"large",withIcon:!1},largeTextOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTabNav\n  },\n  props: ScaleTabNav.props,\n  template: `\n    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>\n  `\n})'}};var componentMeta={title:"Components/Tab Navigation",component:ScaleTabNav,subcomponents:{"Scale Tab Panel":TabPanel},argTypes:{styles:{table:{type:{summary:"string"}},description:"(optional) Injected styles",control:{type:null}},size:{table:{type:{summary:"string"}},description:"(optional) size",control:{type:"select",options:["large","small"]}},small:{table:{type:{summary:"Boolean"}},description:"(optional) DEPRECATED - size should replace small",control:{type:null}}},includeStories:["textIcon","textOnly","disabledTabs","largeTextIcon","largeTextOnly"]},mdxStoryNameToKey={"Text & Icon":"textIcon","Text Only":"textOnly","Disabled Tabs":"disabledTabs","Large, Text & Icon":"largeTextIcon","Large, Text Only":"largeTextOnly"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/table/Table.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ICON",(function(){return ICON})),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Table_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"withSortingIcons",(function(){return withSortingIcons})),__webpack_require__.d(__webpack_exports__,"withStripedRows",(function(){return withStripedRows}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.find-index.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),table_ScaleTablevue_type_script_lang_js_={props:{showSort:Boolean,size:String,striped:Boolean}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(table_ScaleTablevue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-table",{attrs:{"show-sort":this.showSort,size:this.size,striped:!!this.striped}},[this._t("default")],2)}),[],!1,null,null,null).exports;var ScaleTable=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTable",description:"",tags:{},props:[{name:"showSort",type:{name:"boolean"}},{name:"size",type:{name:"string"}},{name:"striped",type:{name:"boolean"}}],slots:[{name:"default"}]};var ICON="M16.471,8.321 L12.613594,0.502886112 L8.755,8.321 L0.126435258,9.57533801 L6.37,15.66 L4.89610548,24.2548735 L12.613,20.197 L20.3310826,24.2548735 L18.856,15.66 L25.1007528,9.57533801 L16.471,8.321 Z M9.41891527,9.23556376 L12.613,2.761 L15.8082728,9.23556376 L22.951,10.273 L17.7826928,15.3122039 L19.003,22.427 L12.613594,19.067774 L6.223,22.427 L7.44449521,15.3122039 L2.275,10.273 L9.41891527,9.23556376 Z",Table_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleTable:ScaleTable},props:Object.assign({label:String},ScaleTable.props),template:'\n    <scale-table\n      :show-sort="showSort"\n      :striped="striped ? true : false"\n    >\n      <table id="sortable-table">\n        <caption class="sr-only">All sortable columns are focusable</caption>\n        <thead>\n          <tr>\n            <th scope="col" width="13%" title="sortable" :tabindex="showSort ? 0 : -1" aria-sort="descending" @click="showSort && sortTable(\'title\')" @keyup="showSort && handleKeyUp($event, \'title\')" class="title">Title</th>\n            <th scope="col" width="28%" aria-disabled="true" class="tags">Tags</th>\n            <th scope="col" width="23%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'stats\')" @keyup="showSort && handleKeyUp($event, \'stats\')" class="stats">Stats</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'time\')" @keyup="showSort && handleKeyUp($event, \'time\')" class="time" style="text-align: right;">Time</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'euros\')" @keyup="showSort && handleKeyUp($event, \'euros\')" class="euros" style="text-align: right;">\n              Euros\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Jane</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" style="margin-right: 8px;" type="strong"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">9.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="90"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:20</td>\n            <td style="text-align: right; font-weight: 200;">100.245,10</td>\n          </tr>\n          <tr>\n            <td>Jack</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">3.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="30"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:30</td>\n            <td style="text-align: right; font-weight: 200;">100.345,10</td>\n          </tr>\n          <tr>\n            <td>John</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">6.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="60"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:40</td>\n            <td style="text-align: right; font-weight: 200;">100.445,10</td>\n          </tr>\n        </tbody>\n        <tfoot>\n          <tr>\n            <td>Total</td>\n            <td />\n            <td />\n            <td style="text-align: right;">00:00:20</td>\n            <td style="text-align: right;">100.245,10</td>\n          </tr>\n        </tfoot>\n      </table>\n    </scale-table>\n  ',methods:{handleKeyUp:function handleKeyUp(e,th){["Space","Enter"].includes(e.code)&&this.sortTable(th)},sortTable:function sortTable(className){var table,rows,switching,i,x,y,shouldSwitch,ths=document.getElementsByClassName(className),th=Array.from(ths).filter((function(x){return"0"===x.getAttribute("tabindex")}))[0],nextSort=function getNextSort(sort){return"ascending"===sort?"descending":"ascending"}(th.getAttribute("aria-sort")),tableHeaders=Array.from(document.getElementsByTagName("TH")),columnIndex=tableHeaders.findIndex((function(x){return x===th}));tableHeaders.forEach((function(tableHeader){tableHeader.setAttribute("aria-sort","none")})),th.setAttribute("aria-sort",nextSort),table=document.getElementById("sortable-table"),switching=!0;try{for(;switching;){for(switching=!1,rows=table.rows,i=1;i<rows.length-1&&(shouldSwitch=!1,x=rows[i].getElementsByTagName("TD")[columnIndex],y=rows[i+1].getElementsByTagName("TD")[columnIndex],["ascending","descending"].includes(nextSort)&&"TFOOT"!==x.parentElement.parentElement.tagName&&"TFOOT"!==y.parentElement.parentElement.tagName);i++)if(("descending"===nextSort?y:x).innerHTML.toLowerCase()>("descending"===nextSort?x:y).innerHTML.toLowerCase()){shouldSwitch=!0;break}shouldSwitch&&(rows[i].parentNode.insertBefore(rows[i+1],rows[i]),switching=!0)}}catch(error){}}}}},layoutProps={ICON:ICON,Template:Table_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Table",component:ScaleTable,argTypes:{size:{table:{type:"select"},description:"(optional) DEPRECATED - size should replace small",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Table"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},Table_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-table {\n  --radius: var(--telekom-radius-standard) var(--telekom-radius-standard) 0 0;\n  --background: var(--telekom-color-ui-state-fill-standard);\n  --color: var(--telekom-color-text-and-icon-standard);\n  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);\n  --color-active: var(--telekom-color-text-and-icon-primary-pressed);\n  --font-size: var(--telekom-typography-font-size-small);\n  --font-weight: var(--telekom-typography-font-weight-bold);\n\n  --spacing-tbody-td: var(--telekom-spacing-composition-space-06)\n    var(--telekom-spacing-composition-space-04);\n  --border-bottom-tbody-td: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-faint);\n  --background-tbody: var(--telekom-color-ui-state-fill-standard);\n  --background-tbody-tr-hover: var(--telekom-color-ui-state-fill-hovered);\n  --background-tfoot: var(--telekom-color-ui-state-fill-standard);\n  --border-bottom-tfoot-td: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-extra-strong);\n\n  --spacing-th-sortable: 0 var(--telekom-spacing-composition-space-04) 0 0;\n  --background-th-sortable-hover: var(--telekom-color-ui-subtle);\n  --background-th-sortable-active: var(--telekom-color-ui-faint);\n  --box-shadow-th-sortable-focus: inset 0 0 0\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-color-functional-focus-standard);\n  --background-tr-striped: var(--telekom-color-ui-subtle);\n  --padding: var(--telekom-spacing-composition-space-00)\n    var(--telekom-spacing-composition-space-04);\n}\n")),Object(esm.b)("h2",{id:"with-sorting-icons"},"With Sorting Icons"),Object(esm.b)("p",null,"Please switch to the Canvas view for a working example"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Sorting Icons",args:{showSort:!0},mdxType:"Story"},Table_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-table show-sort>\n  <table>\n    <caption>\n      Table title\n    </caption>\n    <thead>\n      <tr>\n        \x3c!-- aria-sort can be descending or ascending --\x3e\n        <th\n          tabindex="0"\n          aria-sort="descending"\n          onkeyup="handleKeyUp(event, \'title\')"\n          onclick="sortTable(\'title\')"\n          id="title"\n        >\n          Title\n        </th>\n        \x3c!-- aria-disabled="true" disables sorting --\x3e\n        <th aria-disabled="true">Tags</th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'stats\')"\n          onclick="sortTable(\'stats\')"\n          id="stats"\n        >\n          Stats\n        </th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'time\')"\n          onclick="sortTable(\'time\')"\n          id="time"\n        >\n          Time\n        </th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'euros\')"\n          onclick="sortTable(\'euros\')"\n          id="euros"\n        >\n          Euros\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      ...\n    </tbody>\n    <tfoot>\n      <tr>\n        <td>Total</td>\n        <td></td>\n        <td></td>\n        <td>00:00:20</td>\n        <td>100.245,10</td>\n      </tr>\n    </tfoot>\n  </table>\n</scale-table>\n\n<script>\n  function handleKeyUp(event, id) {\n    /* ... */\n  }\n  function sortTable(id) {\n    /* ... */\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"with-striped-rows"},"With Striped Rows"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Striped Rows",args:{striped:!0},mdxType:"Story"},Table_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-table striped>\n  <table>\n    <caption>\n      Table title\n    </caption>\n    <thead>\n      <tr>\n        \x3c!-- aria-sort can be descending or ascending --\x3e\n        <th\n          tabindex="0"\n          aria-sort="descending"\n          onkeyup="handleKeyUp(event, \'title\')"\n          onclick="sortTable(\'title\')"\n          id="title"\n        >\n          Title\n        </th>\n        \x3c!-- aria-disabled="true" disables sorting --\x3e\n        <th aria-disabled="true">Tags</th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'stats\')"\n          onclick="sortTable(\'stats\')"\n          id="stats"\n        >\n          Stats\n        </th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'time\')"\n          onclick="sortTable(\'time\')"\n          id="time"\n        >\n          Time\n        </th>\n        <th\n          tabindex="0"\n          onkeyup="handleKeyUp(event, \'euros\')"\n          onclick="sortTable(\'euros\')"\n          id="euros"\n        >\n          Euros\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      ...\n    </tbody>\n    <tfoot>\n      <tr>\n        <td>Total</td>\n        <td></td>\n        <td></td>\n        <td>00:00:20</td>\n        <td>100.245,10</td>\n      </tr>\n    </tfoot>\n  </table>\n</scale-table>\n')))}MDXContent.isMDXComponent=!0;var standard=Table_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTable\n  },\n  props: {\n    label: String,\n    ...ScaleTable.props\n  },\n  template: `\n    <scale-table\n      :show-sort="showSort"\n      :striped="striped ? true : false"\n    >\n      <table id="sortable-table">\n        <caption class="sr-only">All sortable columns are focusable</caption>\n        <thead>\n          <tr>\n            <th scope="col" width="13%" title="sortable" :tabindex="showSort ? 0 : -1" aria-sort="descending" @click="showSort && sortTable(\'title\')" @keyup="showSort && handleKeyUp($event, \'title\')" class="title">Title</th>\n            <th scope="col" width="28%" aria-disabled="true" class="tags">Tags</th>\n            <th scope="col" width="23%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'stats\')" @keyup="showSort && handleKeyUp($event, \'stats\')" class="stats">Stats</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'time\')" @keyup="showSort && handleKeyUp($event, \'time\')" class="time" style="text-align: right;">Time</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'euros\')" @keyup="showSort && handleKeyUp($event, \'euros\')" class="euros" style="text-align: right;">\n              Euros\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Jane</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" style="margin-right: 8px;" type="strong"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">9.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="90"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:20</td>\n            <td style="text-align: right; font-weight: 200;">100.245,10</td>\n          </tr>\n          <tr>\n            <td>Jack</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">3.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="30"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:30</td>\n            <td style="text-align: right; font-weight: 200;">100.345,10</td>\n          </tr>\n          <tr>\n            <td>John</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">6.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="60"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:40</td>\n            <td style="text-align: right; font-weight: 200;">100.445,10</td>\n          </tr>\n        </tbody>\n        <tfoot>\n          <tr>\n            <td>Total</td>\n            <td />\n            <td />\n            <td style="text-align: right;">00:00:20</td>\n            <td style="text-align: right;">100.245,10</td>\n          </tr>\n        </tfoot>\n      </table>\n    </scale-table>\n  `,\n  methods: {\n    handleKeyUp: function (e, th) {\n      if ([\'Space\', \'Enter\'].includes(e.code)) {\n        this.sortTable(th);\n      }\n    },\n    sortTable: function (className) {\n      const getNextSort = sort => {\n        if (sort === \'ascending\') {\n          return \'descending\';\n        }\n\n        return \'ascending\';\n      };\n\n      const ths = document.getElementsByClassName(className);\n      const th = Array.from(ths).filter(x => x.getAttribute(\'tabindex\') === \'0\')[0];\n      const currentSort = th.getAttribute(\'aria-sort\');\n      const nextSort = getNextSort(currentSort);\n      const tableHeaders = Array.from(document.getElementsByTagName(\'TH\'));\n      const columnIndex = tableHeaders.findIndex(x => x === th);\n      tableHeaders.forEach(tableHeader => {\n        tableHeader.setAttribute(\'aria-sort\', \'none\');\n      });\n      th.setAttribute(\'aria-sort\', nextSort);\n      var table, rows, switching, i, x, y, shouldSwitch;\n      table = document.getElementById(\'sortable-table\');\n      switching = true;\n\n      try {\n        while (switching) {\n          switching = false;\n          rows = table.rows;\n\n          for (i = 1; i < rows.length - 1; i++) {\n            shouldSwitch = false;\n            x = rows[i].getElementsByTagName(\'TD\')[columnIndex];\n            y = rows[i + 1].getElementsByTagName(\'TD\')[columnIndex];\n\n            if (![\'ascending\', \'descending\'].includes(nextSort) || x.parentElement.parentElement.tagName === \'TFOOT\' || y.parentElement.parentElement.tagName === \'TFOOT\') {\n              break;\n            }\n\n            if ((nextSort === \'descending\' ? y : x).innerHTML.toLowerCase() > (nextSort === \'descending\' ? x : y).innerHTML.toLowerCase()) {\n              shouldSwitch = true;\n              break;\n            }\n          }\n\n          if (shouldSwitch) {\n            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);\n            switching = true;\n          }\n        }\n      } catch (error) {}\n    }\n  }\n})'}};var withSortingIcons=Table_stories_Template.bind({});withSortingIcons.storyName="With Sorting Icons",withSortingIcons.args={showSort:!0},withSortingIcons.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTable\n  },\n  props: {\n    label: String,\n    ...ScaleTable.props\n  },\n  template: `\n    <scale-table\n      :show-sort="showSort"\n      :striped="striped ? true : false"\n    >\n      <table id="sortable-table">\n        <caption class="sr-only">All sortable columns are focusable</caption>\n        <thead>\n          <tr>\n            <th scope="col" width="13%" title="sortable" :tabindex="showSort ? 0 : -1" aria-sort="descending" @click="showSort && sortTable(\'title\')" @keyup="showSort && handleKeyUp($event, \'title\')" class="title">Title</th>\n            <th scope="col" width="28%" aria-disabled="true" class="tags">Tags</th>\n            <th scope="col" width="23%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'stats\')" @keyup="showSort && handleKeyUp($event, \'stats\')" class="stats">Stats</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'time\')" @keyup="showSort && handleKeyUp($event, \'time\')" class="time" style="text-align: right;">Time</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'euros\')" @keyup="showSort && handleKeyUp($event, \'euros\')" class="euros" style="text-align: right;">\n              Euros\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Jane</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" style="margin-right: 8px;" type="strong"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">9.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="90"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:20</td>\n            <td style="text-align: right; font-weight: 200;">100.245,10</td>\n          </tr>\n          <tr>\n            <td>Jack</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">3.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="30"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:30</td>\n            <td style="text-align: right; font-weight: 200;">100.345,10</td>\n          </tr>\n          <tr>\n            <td>John</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">6.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="60"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:40</td>\n            <td style="text-align: right; font-weight: 200;">100.445,10</td>\n          </tr>\n        </tbody>\n        <tfoot>\n          <tr>\n            <td>Total</td>\n            <td />\n            <td />\n            <td style="text-align: right;">00:00:20</td>\n            <td style="text-align: right;">100.245,10</td>\n          </tr>\n        </tfoot>\n      </table>\n    </scale-table>\n  `,\n  methods: {\n    handleKeyUp: function (e, th) {\n      if ([\'Space\', \'Enter\'].includes(e.code)) {\n        this.sortTable(th);\n      }\n    },\n    sortTable: function (className) {\n      const getNextSort = sort => {\n        if (sort === \'ascending\') {\n          return \'descending\';\n        }\n\n        return \'ascending\';\n      };\n\n      const ths = document.getElementsByClassName(className);\n      const th = Array.from(ths).filter(x => x.getAttribute(\'tabindex\') === \'0\')[0];\n      const currentSort = th.getAttribute(\'aria-sort\');\n      const nextSort = getNextSort(currentSort);\n      const tableHeaders = Array.from(document.getElementsByTagName(\'TH\'));\n      const columnIndex = tableHeaders.findIndex(x => x === th);\n      tableHeaders.forEach(tableHeader => {\n        tableHeader.setAttribute(\'aria-sort\', \'none\');\n      });\n      th.setAttribute(\'aria-sort\', nextSort);\n      var table, rows, switching, i, x, y, shouldSwitch;\n      table = document.getElementById(\'sortable-table\');\n      switching = true;\n\n      try {\n        while (switching) {\n          switching = false;\n          rows = table.rows;\n\n          for (i = 1; i < rows.length - 1; i++) {\n            shouldSwitch = false;\n            x = rows[i].getElementsByTagName(\'TD\')[columnIndex];\n            y = rows[i + 1].getElementsByTagName(\'TD\')[columnIndex];\n\n            if (![\'ascending\', \'descending\'].includes(nextSort) || x.parentElement.parentElement.tagName === \'TFOOT\' || y.parentElement.parentElement.tagName === \'TFOOT\') {\n              break;\n            }\n\n            if ((nextSort === \'descending\' ? y : x).innerHTML.toLowerCase() > (nextSort === \'descending\' ? x : y).innerHTML.toLowerCase()) {\n              shouldSwitch = true;\n              break;\n            }\n          }\n\n          if (shouldSwitch) {\n            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);\n            switching = true;\n          }\n        }\n      } catch (error) {}\n    }\n  }\n})'}};var withStripedRows=Table_stories_Template.bind({});withStripedRows.storyName="With Striped Rows",withStripedRows.args={striped:!0},withStripedRows.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTable\n  },\n  props: {\n    label: String,\n    ...ScaleTable.props\n  },\n  template: `\n    <scale-table\n      :show-sort="showSort"\n      :striped="striped ? true : false"\n    >\n      <table id="sortable-table">\n        <caption class="sr-only">All sortable columns are focusable</caption>\n        <thead>\n          <tr>\n            <th scope="col" width="13%" title="sortable" :tabindex="showSort ? 0 : -1" aria-sort="descending" @click="showSort && sortTable(\'title\')" @keyup="showSort && handleKeyUp($event, \'title\')" class="title">Title</th>\n            <th scope="col" width="28%" aria-disabled="true" class="tags">Tags</th>\n            <th scope="col" width="23%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'stats\')" @keyup="showSort && handleKeyUp($event, \'stats\')" class="stats">Stats</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'time\')" @keyup="showSort && handleKeyUp($event, \'time\')" class="time" style="text-align: right;">Time</th>\n            <th scope="col" width="18%" title="sortable" :tabindex="showSort ? 0 : -1" @click="showSort && sortTable(\'euros\')" @keyup="showSort && handleKeyUp($event, \'euros\')" class="euros" style="text-align: right;">\n              Euros\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Jane</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" style="margin-right: 8px;" type="strong"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">9.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="90"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:20</td>\n            <td style="text-align: right; font-weight: 200;">100.245,10</td>\n          </tr>\n          <tr>\n            <td>Jack</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">3.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="30"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:30</td>\n            <td style="text-align: right; font-weight: 200;">100.345,10</td>\n          </tr>\n          <tr>\n            <td>John</td>\n            <td>\n              <ul style="list-style: none; display: flex; padding-left: 0; margin: 0;">\n                  <li>\n                    <scale-tag size="small" type="strong" style="margin-right: 8px;"\n                      >Other</scale-tag\n                    >\n                  </li>\n                  <li><scale-tag size="small" type="strong" style="margin-right: 8px;">N/A</scale-tag></li>\n                  <li><scale-tag size="small" type="strong">Demo</scale-tag></li>\n              </ul>\n            </td>\n            <td>\n              <div style="display: inline-flex; align-items: center;">\n                <span style="margin-right: 8px;">6.356</span>\n                <scale-progress-bar\n                  variant="info"\n                  style="width: 120px"\n                  stroke-width="6"\n                  percentage="60"\n                  show-status="false"\n                />\n              </div>\n            </td>\n            <td style="text-align: right; font-weight: 200;">00:00:40</td>\n            <td style="text-align: right; font-weight: 200;">100.445,10</td>\n          </tr>\n        </tbody>\n        <tfoot>\n          <tr>\n            <td>Total</td>\n            <td />\n            <td />\n            <td style="text-align: right;">00:00:20</td>\n            <td style="text-align: right;">100.245,10</td>\n          </tr>\n        </tfoot>\n      </table>\n    </scale-table>\n  `,\n  methods: {\n    handleKeyUp: function (e, th) {\n      if ([\'Space\', \'Enter\'].includes(e.code)) {\n        this.sortTable(th);\n      }\n    },\n    sortTable: function (className) {\n      const getNextSort = sort => {\n        if (sort === \'ascending\') {\n          return \'descending\';\n        }\n\n        return \'ascending\';\n      };\n\n      const ths = document.getElementsByClassName(className);\n      const th = Array.from(ths).filter(x => x.getAttribute(\'tabindex\') === \'0\')[0];\n      const currentSort = th.getAttribute(\'aria-sort\');\n      const nextSort = getNextSort(currentSort);\n      const tableHeaders = Array.from(document.getElementsByTagName(\'TH\'));\n      const columnIndex = tableHeaders.findIndex(x => x === th);\n      tableHeaders.forEach(tableHeader => {\n        tableHeader.setAttribute(\'aria-sort\', \'none\');\n      });\n      th.setAttribute(\'aria-sort\', nextSort);\n      var table, rows, switching, i, x, y, shouldSwitch;\n      table = document.getElementById(\'sortable-table\');\n      switching = true;\n\n      try {\n        while (switching) {\n          switching = false;\n          rows = table.rows;\n\n          for (i = 1; i < rows.length - 1; i++) {\n            shouldSwitch = false;\n            x = rows[i].getElementsByTagName(\'TD\')[columnIndex];\n            y = rows[i + 1].getElementsByTagName(\'TD\')[columnIndex];\n\n            if (![\'ascending\', \'descending\'].includes(nextSort) || x.parentElement.parentElement.tagName === \'TFOOT\' || y.parentElement.parentElement.tagName === \'TFOOT\') {\n              break;\n            }\n\n            if ((nextSort === \'descending\' ? y : x).innerHTML.toLowerCase() > (nextSort === \'descending\' ? x : y).innerHTML.toLowerCase()) {\n              shouldSwitch = true;\n              break;\n            }\n          }\n\n          if (shouldSwitch) {\n            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);\n            switching = true;\n          }\n        }\n      } catch (error) {}\n    }\n  }\n})'}};var componentMeta={title:"Components/Table",component:ScaleTable,argTypes:{size:{table:{type:"select"},description:"(optional) DEPRECATED - size should replace small",control:{type:null}}},includeStories:["standard","withSortingIcons","withStripedRows"]},mdxStoryNameToKey={Standard:"standard","With Sorting Icons":"withSortingIcons","With Striped Rows":"withStripedRows"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/tag/Tag.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Tag_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateInteractive",(function(){return Tag_stories_TemplateInteractive})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"dismissableTag",(function(){return dismissableTag})),__webpack_require__.d(__webpack_exports__,"smallTag",(function(){return smallTag})),__webpack_require__.d(__webpack_exports__,"smallDismissableTag",(function(){return smallDismissableTag})),__webpack_require__.d(__webpack_exports__,"disabledDismissableTag",(function(){return disabledDismissableTag})),__webpack_require__.d(__webpack_exports__,"colors",(function(){return colors})),__webpack_require__.d(__webpack_exports__,"colorStandardTag",(function(){return colorStandardTag})),__webpack_require__.d(__webpack_exports__,"colorStrongTag",(function(){return colorStrongTag}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),tag_ScaleTagvue_type_script_lang_js_={props:{disabled:{type:Boolean,default:!1},dismissable:{type:Boolean,default:!1},href:String,dismissText:String,size:String,target:{type:String,default:"_self"},color:{type:0,default:"standard"},type:{type:0,default:"standard"},styles:String},methods:{scaleClose:function scaleClose($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-close":function scaleClose($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(tag_ScaleTagvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var ScaleTag=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTag",description:"",tags:{},props:[{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"dismissable",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"href",type:{name:"string"}},{name:"dismissText",type:{name:"string"}},{name:"size",type:{name:"string"}},{name:"target",type:{name:"string"},defaultValue:{func:!1,value:"'_self'"}},{name:"color",type:{name:"'cyan' |\n'yellow' |\n'green' |\n'orange' |\n'red' |\n'violet' |\n'brown' |\n'olive' |\n'teal' |\n'standard'"},defaultValue:{func:!1,value:"'standard'"}},{name:"type",type:{name:"'strong' | 'standard'"},defaultValue:{func:!1,value:"'standard'"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}]};var Tag_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({label:String},ScaleTag.props),template:'\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  ',methods:{action:addon_actions_dist_esm.action}}},Tag_stories_TemplateInteractive=function TemplateInteractive(args,_ref2){_ref2.argTypes;return{template:'\n      <ul aria-label="colors" style="display: flex; list-style: none; padding: 0;">\n          <li v-for="color in colors" :key="color" style="margin-right: 4px;">\n            <scale-tag\n                dismissable="true"\n                type="strong"\n                v-bind:color=color\n                v-bind:dismiss-text="\'Remove \' + color + \' from the list\'"\n                @scaleClose="removeColor(color)"\n            >\n                {{color}}\n            </scale-tag>\n            <div style="height: 10px"/>\n             <scale-tag\n                dismissable="true"\n                type="standard"\n                v-bind:color=color\n                v-bind:dismiss-text="\'Remove \' + color + \' from the list\'"\n                @scaleClose="removeColor(color)"\n            >\n                {{color}}\n            </scale-tag>\n          </li>\n      </ul>\n  ',methods:{action:Object(addon_actions_dist_esm.action)("scaleClose"),removeColor:function removeColor(color){var _this=this;this.action(),this.colors=this.colors.filter((function(x){return x!==color})),setTimeout((function(){_this.$el.querySelector("#root > ul > li > scale-tag")&&_this.$el.querySelector("#root > ul > li > scale-tag").shadowRoot.querySelector("span > button").focus()}))}},data:function data(){return{colors:["standard","cyan","yellow","green","orange","red","violet","brown","olive","teal"]}}}},layoutProps={Template:Tag_stories_Template,TemplateInteractive:Tag_stories_TemplateInteractive};function MDXContent(_ref3){var components=_ref3.components,props=_objectWithoutProperties(_ref3,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Tag",component:ScaleTag,argTypes:{size:{control:{type:"select",options:["default","small"]}},label:{control:{type:"text"}},color:{control:{type:"select",options:["cyan","yellow","green","orange","red","violet","brown","olive","teal","standard"]}},type:{control:{type:"select",options:["strong","standard"]}},styles:{control:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Tag"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"A tag"},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --background: var(--telekom-color-ui-faint);\n  --color: var(--telekom-color-text-and-icon-standard);\n  --font: var(--telekom-text-style-caption-bold);\n  --radius: 2px;\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n\n  --icon-color: var(--telekom-color-text-and-icon-additional);\n  --icon-color-hover: var(--color);\n\n  --background-disabled: var(--telekom-color-ui-faint);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n\n  --spacing-dismissable: var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-03);\n  --spacing-dismissable-small: var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-03);\n\n  --height: 24px;\n  --height-small: 20px;\n\n  --border-button-dismissable-focus: 1px solid transparent;\n  --box-shadow-button-dismissable-focus: var(--box-shadow-focus);\n  --background-button-dismissable-hover: var(\n    --telekom-color-ui-state-fill-hovered\n  );\n  --background-button-standard-strong-dismissible-hover: var(\n    --telekom-color-ui-state-fill-hovered-inverted\n  );\n  --background-button-standard-dismissible-hover: var(\n    --telekom-color-ui-state-fill-hovered\n  );\n  --background-button-dismissable-active: var(\n    --telekom-color-ui-state-fill-pressed\n  );\n\n  --height-button-dismissable: 20px;\n  --width-button-dismissable: 20px;\n  --height-button-dismissable-small: 16px;\n  --width-button-dismissable-small: 16px;\n\n  --spacing-small: 0 var(--telekom-spacing-composition-space-04);\n  --font-size-small: var(--telekom-typography-font-size-small);\n  --line-height-small: var(--telekom-typography-line-spacing-loose);\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"dismissable-tag"},"Dismissable tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dismissable tag",args:{label:"Dismissable tag",dismissable:!0},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-tag dismissable>A dismissable tag</scale-tag>\n")),Object(esm.b)("h2",{id:"small-tag"},"Small tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small tag",args:{label:"Small tag",size:"small"},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tag size="small">A small tag</scale-tag>\n')),Object(esm.b)("h2",{id:"small-dismissable-tag"},"Small dismissable tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small dismissable tag",args:{label:"Small dismissable tag",size:"small",dismissable:!0},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tag size="small" dismissable>A small dismissable tag</scale-tag>\n')),Object(esm.b)("h2",{id:"disabled-dismissable-tag"},"Disabled dismissable tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled dismissable tag",args:{label:"Disabled dismissable tag",disabled:!0,dismissable:!0},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-tag disabled dismissable>Disabled dismissable tag</scale-tag>\n")),Object(esm.b)("h2",{id:"colors"},"Colors"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Colors",mdxType:"Story"},Tag_stories_TemplateInteractive.bind({}))),Object(esm.b)("h2",{id:"color-standard-tag"},"Color standard tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Color standard tag",args:{label:"Color standard tag",color:"red"},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tag color="red" type="standard">Color tag</scale-tag>\n')),Object(esm.b)("h2",{id:"color-strong-tag"},"Color strong tag"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Color strong tag",args:{label:"Color strong tag",color:"red",type:"strong"},mdxType:"Story"},Tag_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tag color="red" type="strong">Color tag</scale-tag>\n')))}MDXContent.isMDXComponent=!0;var standard=Tag_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"A tag"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var dismissableTag=Tag_stories_Template.bind({});dismissableTag.storyName="Dismissable tag",dismissableTag.args={label:"Dismissable tag",dismissable:!0},dismissableTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var smallTag=Tag_stories_Template.bind({});smallTag.storyName="Small tag",smallTag.args={label:"Small tag",size:"small"},smallTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var smallDismissableTag=Tag_stories_Template.bind({});smallDismissableTag.storyName="Small dismissable tag",smallDismissableTag.args={label:"Small dismissable tag",size:"small",dismissable:!0},smallDismissableTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var disabledDismissableTag=Tag_stories_Template.bind({});disabledDismissableTag.storyName="Disabled dismissable tag",disabledDismissableTag.args={label:"Disabled dismissable tag",disabled:!0,dismissable:!0},disabledDismissableTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var colors=Tag_stories_TemplateInteractive.bind({});colors.storyName="Colors",colors.parameters={storySource:{source:"(args, {\n  argTypes\n}) => ({\n  template: `\n      <ul aria-label=\"colors\" style=\"display: flex; list-style: none; padding: 0;\">\n          <li v-for=\"color in colors\" :key=\"color\" style=\"margin-right: 4px;\">\n            <scale-tag\n                dismissable=\"true\"\n                type=\"strong\"\n                v-bind:color=color\n                v-bind:dismiss-text=\"'Remove ' + color + ' from the list'\"\n                @scaleClose=\"removeColor(color)\"\n            >\n                {{color}}\n            </scale-tag>\n            <div style=\"height: 10px\"/>\n             <scale-tag\n                dismissable=\"true\"\n                type=\"standard\"\n                v-bind:color=color\n                v-bind:dismiss-text=\"'Remove ' + color + ' from the list'\"\n                @scaleClose=\"removeColor(color)\"\n            >\n                {{color}}\n            </scale-tag>\n          </li>\n      </ul>\n  `,\n  methods: {\n    action: action('scaleClose'),\n\n    removeColor(color) {\n      this.action();\n      this.colors = this.colors.filter(x => x !== color);\n      setTimeout(() => {\n        this.$el.querySelector('#root > ul > li > scale-tag') && this.$el.querySelector('#root > ul > li > scale-tag').shadowRoot.querySelector('span > button').focus();\n      });\n    }\n\n  },\n  data: () => ({\n    colors: ['standard', 'cyan', 'yellow', 'green', 'orange', 'red', 'violet', 'brown', 'olive', 'teal']\n  })\n})"}};var colorStandardTag=Tag_stories_Template.bind({});colorStandardTag.storyName="Color standard tag",colorStandardTag.args={label:"Color standard tag",color:"red"},colorStandardTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var colorStrongTag=Tag_stories_Template.bind({});colorStrongTag.storyName="Color strong tag",colorStrongTag.args={label:"Color strong tag",color:"red",type:"strong"},colorStrongTag.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: {\n    label: String,\n    ...ScaleTag.props\n  },\n  template: `\n    <scale-tag\n      :disabled="disabled"\n      :dismissable="dismissable"\n      :href="href"\n      :size="size"\n      :target="target"\n      :color="color"\n      :type="type"\n      @scaleClose="action(\'scaleClose\')($event)"\n    >\n    {{ label }}\n    </scale-tag>\n  `,\n  methods: {\n    action\n  }\n})'}};var componentMeta={title:"Components/Tag",component:ScaleTag,argTypes:{size:{control:{type:"select",options:["default","small"]}},label:{control:{type:"text"}},color:{control:{type:"select",options:["cyan","yellow","green","orange","red","violet","brown","olive","teal","standard"]}},type:{control:{type:"select",options:["strong","standard"]}},styles:{control:{disable:!0}}},includeStories:["standard","dismissableTag","smallTag","smallDismissableTag","disabledDismissableTag","colors","colorStandardTag","colorStrongTag"]},mdxStoryNameToKey={Standard:"standard","Dismissable tag":"dismissableTag","Small tag":"smallTag","Small dismissable tag":"smallDismissableTag","Disabled dismissable tag":"disabledDismissableTag",Colors:"colors","Color standard tag":"colorStandardTag","Color strong tag":"colorStrongTag"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_SlotFunctions_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_SlotFunctions_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_SlotFunctionsSlim_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_SlotFunctionsSlim_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return TelekomBrandHeader_stories_Template})),__webpack_require__.d(__webpack_exports__,"standardHeader",(function(){return standardHeader})),__webpack_require__.d(__webpack_exports__,"applicationName",(function(){return applicationName})),__webpack_require__.d(__webpack_exports__,"megaMenu",(function(){return megaMenu})),__webpack_require__.d(__webpack_exports__,"slimHeader",(function(){return slimHeader})),__webpack_require__.d(__webpack_exports__,"subtleHeader",(function(){return subtleHeader})),__webpack_require__.d(__webpack_exports__,"dataApi",(function(){return TelekomBrandHeader_stories_dataApi}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),telekom_brand_header_navigation_TelekomHeadervue_type_script_lang_js_={props:{appName:String,appNameLink:String,appNameClick:Function,logoHref:String,logoTitle:String,logoHideTitle:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_TelekomHeadervue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-telekom-header",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink,"app-name-click":_vm.appNameClick,"logo-ref":_vm.logoHref,"logo-title":_vm.logoTitle,"logo-hide-title":_vm.logoHideTitle,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_vm._t("logo"),_vm._v(" "),_vm._t("meta-nav-external"),_vm._v(" "),_vm._t("meta-nav"),_vm._v(" "),_vm._t("lang-switcher"),_vm._v(" "),_vm._t("main-nav"),_vm._v(" "),_vm._t("functions")],2)}),[],!1,null,null,null).exports;var TelekomHeader=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"TelekomHeader",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"appNameClick",type:{name:"func"}},{name:"logoHref",type:{name:"string"}},{name:"logoTitle",type:{name:"string"}},{name:"logoHideTitle",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}],slots:[{name:"logo"},{name:"meta-nav-external"},{name:"meta-nav"},{name:"lang-switcher"},{name:"main-nav"},{name:"functions"}]};var telekom_brand_header_navigation_TelekomHeaderDataBackCompatvue_type_script_lang_js_={props:{appNameClick:Function,appNameTitle:String,appName:String,mainNavigation:String,iconNavigation:String,sectorNavigation:String,userNavigation:String,addonNavigation:String,activeRouteId:String}};const TelekomHeaderDataBackCompat_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_TelekomHeaderDataBackCompatvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-telekom-header-data-back-compat",{attrs:{"app-name-click":_vm.appNameClick,"app-name-title":_vm.appNameTitle,"app-name":_vm.appName,"main-navigation":_vm.mainNavigation,"icon-navigation":_vm.iconNavigation,"sector-navigation":_vm.sectorNavigation,"addon-navigation":_vm.addonNavigation,"user-navigation":_vm.userNavigation,"active-route-id":_vm.activeRouteId}},[_vm._t("meta-nav-ext"),_vm._v(" "),_vm._t("meta-nav"),_vm._v(" "),_vm._t("language-switch"),_vm._v(" "),_vm._t("main-nav"),_vm._v(" "),_vm._t("functions")],2)}),[],!1,null,null,null).exports;var TelekomHeaderDataBackCompat=TelekomHeaderDataBackCompat_vuedocgen_export_0;TelekomHeaderDataBackCompat_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"TelekomHeaderDataBackCompat",description:"",tags:{},props:[{name:"appNameClick",type:{name:"func"}},{name:"appNameTitle",type:{name:"string"}},{name:"appName",type:{name:"string"}},{name:"mainNavigation",type:{name:"string"}},{name:"iconNavigation",type:{name:"string"}},{name:"sectorNavigation",type:{name:"string"}},{name:"userNavigation",type:{name:"string"}},{name:"addonNavigation",type:{name:"string"}},{name:"activeRouteId",type:{name:"string"}}],slots:[{name:"meta-nav-ext"},{name:"meta-nav"},{name:"language-switch"},{name:"main-nav"},{name:"functions"}]};const SlotMetaNavExternal_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"meta-nav-external",variant:"meta-nav-external","aria-label":"External Navigation"},slot:"meta-nav-external"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"External navigation link"}},[_c("a",{attrs:{href:"#"}},[this._v("\n      Metalink external\n      "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Second external navigation link"}},[_c("a",{attrs:{href:"#"}},[this._v("\n      Metalink external\n      "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)])],1)}),[],!1,null,null,null).exports;var SlotMetaNavExternal=SlotMetaNavExternal_vuedocgen_export_0;SlotMetaNavExternal_vuedocgen_export_0.__docgenInfo={displayName:"SlotMetaNavExternal",description:"",tags:{}};const SlotMetaNav_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"meta-nav",variant:"meta-nav","aria-label":"Meta Navigation"},slot:"meta-nav"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"First internal navigation link"}},[_c("a",{attrs:{href:"#"}},[this._v("Metalink internal")])]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Second internal navigation link"}},[_c("a",{attrs:{href:"#"}},[this._v("Metalink internal")])])],1)}),[],!1,null,null,null).exports;var SlotMetaNav=SlotMetaNav_vuedocgen_export_0;SlotMetaNav_vuedocgen_export_0.__docgenInfo={displayName:"SlotMetaNav",description:"",tags:{}};const SlotMainNav_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"main-nav",variant:"main-nav","aria-label":"Main navigation links"},slot:"main-nav"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Topic One"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic One")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Two"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Two")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Three"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Three")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Four"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Four")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Five"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Five")])])],1)}),[],!1,null,null,null).exports;var SlotMainNav=SlotMainNav_vuedocgen_export_0;SlotMainNav_vuedocgen_export_0.__docgenInfo={displayName:"SlotMainNav",description:"",tags:{}};const SlotLangSwitcher_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"lang-switcher",variant:"lang-switcher",alignment:"right","aria-label":"Language switcher"},slot:"lang-switcher"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Switch to English"}},[_c("a",{attrs:{href:"#",title:"English"}},[this._v("EN")])]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to German"}},[_c("a",{attrs:{href:"#",title:"German"}},[this._v("DE")])]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to Hungarian"}},[_c("a",{attrs:{href:"#",title:"Hungarian"}},[this._v("HU")])])],1)}),[],!1,null,null,null).exports;var SlotLangSwitcher=SlotLangSwitcher_vuedocgen_export_0;SlotLangSwitcher_vuedocgen_export_0.__docgenInfo={displayName:"SlotLangSwitcher",description:"",tags:{}};var telekom_brand_header_navigation_SlotMobileFlyoutCanvasvue_type_script_lang_js_={props:{appName:String,appNameLink:String}};const SlotMobileFlyoutCanvas_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotMobileFlyoutCanvasvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-mobile-flyout-canvas",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}},[_c("scale-telekom-nav-list",{attrs:{slot:"mobile-before-main-nav",variant:"lang-switcher",alignment:"left","aria-label":"Language Switcher"},slot:"mobile-before-main-nav"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Switch to English"}},[_c("a",{attrs:{href:"#",title:"English"}},[_vm._v("EN")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to Hungarian"}},[_c("a",{attrs:{href:"#",title:"Hungarian"}},[_vm._v("HU")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to German"}},[_c("a",{attrs:{href:"#",title:"German"}},[_vm._v("DE")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu",{attrs:{slot:"mobile-main-nav"},slot:"mobile-main-nav"},[_c("scale-telekom-mobile-menu-item",{attrs:{active:""}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic One")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children",active:""},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1)],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Two")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1)],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Three")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Four")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Five")])])],1),_vm._v(" "),_c("scale-telekom-nav-list",{staticStyle:{"--flex-direction":"column"},attrs:{slot:"mobile-meta-nav-external",variant:"meta-nav-external",alignment:"left"},slot:"mobile-meta-nav-external"},[_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])])],1)],1)}),[],!1,null,null,null).exports;var SlotMobileFlyoutCanvas=SlotMobileFlyoutCanvas_vuedocgen_export_0;SlotMobileFlyoutCanvas_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotMobileFlyoutCanvas",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_SlotFunctionsvue_type_script_lang_js_={components:{SlotMobileFlyoutCanvas:SlotMobileFlyoutCanvas},props:{appName:String,appNameLink:String}};__webpack_require__("./stories/components/telekom-brand-header-navigation/SlotFunctions.vue?vue&type=style&index=0&lang=css&");const SlotFunctions_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotFunctionsvue_type_script_lang_js_,(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"functions",variant:"functions",alignment:"right","aria-label":"Functions Menu"},slot:"functions"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"Search"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{"no-dot":"",label:"Search"}},[_c("scale-icon-action-search")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Cart"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{count:"1",label:"Cart","aria-label-translation":"$label - $count item in shopping cart"}},[_c("scale-icon-action-shopping-cart")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Login"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{"no-dot":"",label:"Login"}},[_c("scale-icon-user-file-user")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"hide-on-desktop":"","aria-label":"Menu"}},[_c("button",[_c("scale-badge",[_c("scale-icon-action-menu")],1)],1),this._v(" "),_c("scale-telekom-nav-flyout",{attrs:{variant:"mobile"}},[_c("SlotMobileFlyoutCanvas",{attrs:{"app-name":this.appName,"app-name-link":this.appNameLink}})],1)],1)],1)}),[],!1,null,null,null).exports;var SlotFunctions=SlotFunctions_vuedocgen_export_0;SlotFunctions_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotFunctions",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_StoryStandardvue_type_script_lang_js_={components:{SlotMetaNavExternal:SlotMetaNavExternal,SlotMetaNav:SlotMetaNav,SlotMainNav:SlotMainNav,SlotLangSwitcher:SlotLangSwitcher,SlotFunctions:SlotFunctions},props:{appName:String,appNameLink:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}};const StoryStandard_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_StoryStandardvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-header",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_c("SlotMetaNavExternal"),_vm._v(" "),_c("SlotMetaNav"),_vm._v(" "),_c("SlotLangSwitcher"),_vm._v(" "),_c("SlotMainNav"),_vm._v(" "),_c("SlotFunctions",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}})],1)}),[],!1,null,null,null).exports;var StoryStandard=StoryStandard_vuedocgen_export_0;StoryStandard_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"StoryStandard",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}]};const SlotMainNavWithFlyout_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"main-nav",variant:"main-nav","aria-label":"Main navigation links"},slot:"main-nav"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Topic One"}},[_c("button",[_vm._v("Topic One")]),_vm._v(" "),_c("scale-telekom-nav-flyout",{attrs:{hover:""}},[_c("scale-telekom-mega-menu",[_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1)],1)],1)],1),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Two"}},[_c("button",[_vm._v("Topic Two")]),_vm._v(" "),_c("scale-telekom-nav-flyout",{attrs:{hover:""}},[_c("scale-telekom-mega-menu",[_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1),_vm._v(" "),_c("scale-telekom-mega-menu-column",[_c("scale-icon-home-home",{attrs:{slot:"icon"},slot:"icon"}),_vm._v(" "),_c("a",{attrs:{slot:"heading",href:"https://example.com"},slot:"heading"},[_vm._v("Second Level")]),_vm._v(" "),_c("ul",[_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://example.com"}},[_vm._v("Third Level")])])])],1)],1)],1)],1),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Three"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Three")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Four"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Four")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Topic Five"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Five")])])],1)}),[],!1,null,null,null).exports;var SlotMainNavWithFlyout=SlotMainNavWithFlyout_vuedocgen_export_0;SlotMainNavWithFlyout_vuedocgen_export_0.__docgenInfo={displayName:"SlotMainNavWithFlyout",description:"",tags:{}};var telekom_brand_header_navigation_StoryMegaMenuvue_type_script_lang_js_={components:{SlotMetaNavExternal:SlotMetaNavExternal,SlotMetaNav:SlotMetaNav,SlotMainNavWithFlyout:SlotMainNavWithFlyout,SlotLangSwitcher:SlotLangSwitcher,SlotFunctions:SlotFunctions},props:{appName:String,appNameLink:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}};const StoryMegaMenu_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_StoryMegaMenuvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-header",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_c("SlotMetaNavExternal"),_vm._v(" "),_c("SlotMetaNav"),_vm._v(" "),_c("SlotLangSwitcher"),_vm._v(" "),_c("SlotMainNavWithFlyout"),_vm._v(" "),_c("SlotFunctions",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}})],1)}),[],!1,null,null,null).exports;var StoryMegaMenu=StoryMegaMenu_vuedocgen_export_0;StoryMegaMenu_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"StoryMegaMenu",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}]};const SlotDropdown_vuedocgen_export_0=Object(componentNormalizer.a)({},(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"main-nav","aria-label":"Main Navigation"},slot:"main-nav"},[_c("scale-menu-flyout",[_c("scale-telekom-nav-item",{attrs:{slot:"trigger","aria-label":"Topic One"},slot:"trigger"},[_c("button",[_vm._v("Topic One")])]),_vm._v(" "),_c("scale-menu-flyout-list",{attrs:{"brand-header-dropdown":""}},[_c("scale-menu-flyout-item",[_vm._v("Item 1")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("\n          More Options\n          "),_c("scale-menu-flyout-list",{attrs:{slot:"sublist","brand-header-dropdown":""},slot:"sublist"},[_c("scale-menu-flyout-item",[_vm._v("\n              Item 1\n            ")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("\n              Even More\n              "),_c("scale-menu-flyout-list",{attrs:{slot:"sublist","brand-header-dropdown":""},slot:"sublist"},[_c("scale-menu-flyout-item",[_vm._v("Item 1")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v(" Item 2")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("Item 3")])],1)],1),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("\n              Item 3\n            ")])],1)],1),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("Item 3")])],1)],1),_vm._v(" "),_c("scale-menu-flyout",[_c("scale-telekom-nav-item",{attrs:{slot:"trigger","aria-label":"Topic Two"},slot:"trigger"},[_c("button",[_vm._v("Topic Two")])]),_vm._v(" "),_c("scale-menu-flyout-list",{attrs:{"brand-header-dropdown":""}},[_c("scale-menu-flyout-item",[_vm._v("Menu Item 1")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("Menu Item 2")]),_vm._v(" "),_c("scale-menu-flyout-item",[_vm._v("Menu Item 3")])],1)],1)],1)}),[],!1,null,null,null).exports;var SlotDropdown=SlotDropdown_vuedocgen_export_0;SlotDropdown_vuedocgen_export_0.__docgenInfo={displayName:"SlotDropdown",description:"",tags:{}};var telekom_brand_header_navigation_SlotMobileDropdownvue_type_script_lang_js_={components:{SlotMobileFlyoutCanvas:SlotMobileFlyoutCanvas},props:{appName:String,appNameLink:String}};const SlotMobileDropdown_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotMobileDropdownvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"functions",variant:"functions",alignment:"right","aria-label":"Mobile Navigation"},slot:"functions"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"Search"}},[_c("a",{attrs:{href:"#"}},[_c("scale-icon-action-search")],1)]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_c("scale-icon-content-credit-card")],1)]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Shopping cart"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{count:"1",label:"Cart","label-visually-hidden":""}},[_c("scale-icon-action-shopping-cart")],1)],1)]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"User"}},[_c("a",{attrs:{href:"#"}},[_c("scale-icon-user-file-user")],1)]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"hide-on-desktop":"","aria-label":"Menu"}},[_c("button",[_c("scale-badge",[_c("scale-icon-action-menu")],1)],1),_vm._v(" "),_c("scale-telekom-nav-flyout",{attrs:{variant:"mobile"}},[_c("scale-telekom-mobile-flyout-canvas",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}},[_c("scale-telekom-nav-list",{attrs:{slot:"mobile-before-main-nav",variant:"lang-switcher",alignment:"left","aria-label":"Language switcher"},slot:"mobile-before-main-nav"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Switch to English"}},[_c("a",{attrs:{href:"#",title:"English"}},[_vm._v("EN")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to German"}},[_c("a",{attrs:{href:"#",title:"German"}},[_vm._v("DE")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to Hungarian"}},[_c("a",{attrs:{href:"#",title:"Hungarian"}},[_vm._v("HU")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu",{attrs:{slot:"mobile-main-nav"},slot:"mobile-main-nav"},[_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic One")]),_vm._v(" "),_c("a",{attrs:{href:"#"}},[_vm._v("Topic One")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item 1")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("More Options")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item 1")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Even More")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item ")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item 2")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item 3")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Item 3")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Three")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Two")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Menu Item 1")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Menu Item 2")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Menu Item 3")])])],1)],1),_vm._v(" "),_c("scale-telekom-nav-list",{staticStyle:{"--flex-direction":"column"},attrs:{slot:"mobile-meta-nav-external",variant:"meta-nav-external",alignment:"left"},slot:"mobile-meta-nav-external"},[_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])]),_vm._v(" "),_c("scale-telekom-nav-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])])],1)],1)],1)],1)],1)}),[],!1,null,null,null).exports;var SlotMobileDropdown=SlotMobileDropdown_vuedocgen_export_0;SlotMobileDropdown_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotMobileDropdown",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_StoryDropdownvue_type_script_lang_js_={components:{SlotMetaNavExternal:SlotMetaNavExternal,SlotMetaNav:SlotMetaNav,SlotLangSwitcher:SlotLangSwitcher,SlotDropdown:SlotDropdown,SlotMobileDropdown:SlotMobileDropdown},props:{appName:String,appNameLink:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}};const StoryDropdown_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_StoryDropdownvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-header",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_c("SlotMetaNavExternal"),_vm._v(" "),_c("SlotMetaNav"),_vm._v(" "),_c("SlotLangSwitcher"),_vm._v(" "),_c("SlotDropdown"),_vm._v(" "),_c("SlotMobileDropdown",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}})],1)}),[],!1,null,null,null).exports;var StoryDropdown=StoryDropdown_vuedocgen_export_0;StoryDropdown_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"StoryDropdown",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}]};var telekom_brand_header_navigation_SlotMobileFlyoutCanvasSlimvue_type_script_lang_js_={props:{appName:String,appNameLink:String}};const SlotMobileFlyoutCanvasSlim_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotMobileFlyoutCanvasSlimvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-mobile-flyout-canvas",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}},[_c("scale-telekom-mobile-menu",{attrs:{slot:"mobile-main-nav"},slot:"mobile-main-nav"},[_c("scale-telekom-mobile-menu-item",{attrs:{active:""}},[_c("a",{attrs:{href:"#"}},[_vm._v("Topic One")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children",active:""},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1)],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Two")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Second Level")]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",{attrs:{slot:"children"},slot:"children"},[_c("a",{attrs:{href:"#"}},[_vm._v("Third Level")])])],1)],1),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Three")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Four")])]),_vm._v(" "),_c("scale-telekom-mobile-menu-item",[_c("a",{attrs:{href:"#"}},[_vm._v("Topic Five")])])],1)],1)}),[],!1,null,null,null).exports;var SlotMobileFlyoutCanvasSlim=SlotMobileFlyoutCanvasSlim_vuedocgen_export_0;SlotMobileFlyoutCanvasSlim_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotMobileFlyoutCanvasSlim",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_SlotFunctionsSlimvue_type_script_lang_js_={components:{SlotMobileFlyoutCanvasSlim:SlotMobileFlyoutCanvasSlim},props:{appName:String,appNameLink:String}};__webpack_require__("./stories/components/telekom-brand-header-navigation/SlotFunctionsSlim.vue?vue&type=style&index=0&lang=css&");const SlotFunctionsSlim_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotFunctionsSlimvue_type_script_lang_js_,(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"functions",variant:"functions",alignment:"right","aria-label":"Functions Menu"},slot:"functions"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"Search"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{"no-dot":"",label:"Search",search:""}},[_c("scale-icon-action-search")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Cart"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{count:"1",label:"Cart",cart:""}},[_c("scale-icon-action-shopping-cart")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Login"}},[_c("a",{attrs:{href:"#"}},[_c("scale-badge",{attrs:{"no-dot":"",label:"Login",user:""}},[_c("scale-icon-user-file-user")],1)],1)]),this._v(" "),_c("scale-telekom-nav-item",{attrs:{"hide-on-desktop":"","aria-label":"Menu"}},[_c("button",[_c("scale-badge",[_c("scale-icon-action-menu")],1)],1),this._v(" "),_c("scale-telekom-nav-flyout",{attrs:{variant:"mobile"}},[_c("SlotMobileFlyoutCanvasSlim",{attrs:{"app-name":this.appName,"app-name-link":this.appNameLink}})],1)],1)],1)}),[],!1,null,null,null).exports;var SlotFunctionsSlim=SlotFunctionsSlim_vuedocgen_export_0;SlotFunctionsSlim_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotFunctionsSlim",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_StorySlimvue_type_script_lang_js_={components:{SlotMetaNavExternal:SlotMetaNavExternal,SlotMainNavWithFlyout:SlotMainNavWithFlyout,SlotLangSwitcher:SlotLangSwitcher,SlotFunctionsSlim:SlotFunctionsSlim},props:{appName:String,appNameLink:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}};const StorySlim_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_StorySlimvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-header",{attrs:{type:"slim","app-name":_vm.appName,"app-name-link":_vm.appNameLink,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_c("SlotMetaNavExternal"),_vm._v(" "),_c("SlotLangSwitcher"),_vm._v(" "),_c("SlotMainNavWithFlyout"),_vm._v(" "),_c("SlotFunctionsSlim",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}})],1)}),[],!1,null,null,null).exports;var StorySlim=StorySlim_vuedocgen_export_0;StorySlim_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"StorySlim",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}]};var telekom_brand_header_navigation_SlotMobileFlyoutCanvasSubtlevue_type_script_lang_js_={props:{appName:String,appNameLink:String}};const SlotMobileFlyoutCanvasSubtle_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotMobileFlyoutCanvasSubtlevue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-mobile-flyout-canvas",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink,type:"subtle"}},[_c("scale-telekom-nav-list",{attrs:{slot:"mobile-before-main-nav",variant:"lang-switcher",alignment:"left","aria-label":"Language switcher"},slot:"mobile-before-main-nav"},[_c("scale-telekom-nav-item",{attrs:{active:"","aria-label":"Switch to English"}},[_c("a",{attrs:{href:"#",title:"English"}},[_vm._v("EN")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to Hungarian"}},[_c("a",{attrs:{href:"#",title:"Hungarian"}},[_vm._v("HU")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Switch to German"}},[_c("a",{attrs:{href:"#",title:"German"}},[_vm._v("DE")])])],1),_vm._v(" "),_c("scale-telekom-mobile-menu",{attrs:{slot:"mobile-main-nav"},slot:"mobile-main-nav"}),_vm._v(" "),_c("scale-telekom-nav-list",{staticStyle:{"--flex-direction":"column"},attrs:{slot:"mobile-meta-nav-external",variant:"meta-nav-external",alignment:"left","aria-label":"Metanavigation"},slot:"mobile-meta-nav-external"},[_c("scale-telekom-nav-item",{attrs:{"aria-label":"External link"}},[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Second external link"}},[_c("a",{attrs:{href:"#"}},[_vm._v("\n        Metanavigation external\n        "),_c("scale-icon-navigation-external-link",{attrs:{size:"11"}})],1)]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Internal link"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])]),_vm._v(" "),_c("scale-telekom-nav-item",{attrs:{"aria-label":"Second internal link"}},[_c("a",{attrs:{href:"#"}},[_vm._v("Metanavigation internal")])])],1)],1)}),[],!1,null,null,null).exports;var SlotMobileFlyoutCanvasSubtle=SlotMobileFlyoutCanvasSubtle_vuedocgen_export_0;SlotMobileFlyoutCanvasSubtle_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotMobileFlyoutCanvasSubtle",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_SlotFunctionsSubtlevue_type_script_lang_js_={components:{SlotMobileFlyoutCanvasSubtle:SlotMobileFlyoutCanvasSubtle},props:{appName:String,appNameLink:String}};const SlotFunctionsSubtle_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_SlotFunctionsSubtlevue_type_script_lang_js_,(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("scale-telekom-nav-list",{attrs:{slot:"functions",variant:"functions",alignment:"right","aria-label":"Functions Menu"},slot:"functions"},[_c("scale-telekom-nav-item",{attrs:{"hide-on-desktop":"","aria-label":"Menu"}},[_c("button",[_c("scale-badge",[_c("scale-icon-action-menu")],1)],1),this._v(" "),_c("scale-telekom-nav-flyout",{attrs:{variant:"mobile"}},[_c("SlotMobileFlyoutCanvasSubtle",{attrs:{"app-name":this.appName,"app-name-link":this.appNameLink}})],1)],1)],1)}),[],!1,null,null,null).exports;var SlotFunctionsSubtle=SlotFunctionsSubtle_vuedocgen_export_0;SlotFunctionsSubtle_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"SlotFunctionsSubtle",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}}]};var telekom_brand_header_navigation_StorySubtlevue_type_script_lang_js_={components:{SlotMetaNavExternal:SlotMetaNavExternal,SlotMetaNav:SlotMetaNav,SlotMainNavWithFlyout:SlotMainNavWithFlyout,SlotLangSwitcher:SlotLangSwitcher,SlotFunctionsSubtle:SlotFunctionsSubtle},props:{appName:String,appNameLink:String,metaNavAriaLabel:String,metaNavExternalAriaLabel:String,langSwitcherAriaLabel:String,mainNavAriaLabel:String}};const StorySubtle_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_StorySubtlevue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-header",{attrs:{type:"subtle","app-name":_vm.appName,"app-name-link":_vm.appNameLink,"meta-nav-aria-label":_vm.metaNavAriaLabel,"meta-nav-external-aria-label":_vm.metaNavExternalAriaLabel,"lang-switcher-aria-label":_vm.langSwitcherAriaLabel,"main-nav-aria-label":_vm.mainNavAriaLabel}},[_c("SlotMetaNavExternal"),_vm._v(" "),_c("SlotMetaNav"),_vm._v(" "),_c("SlotLangSwitcher"),_vm._v(" "),_c("SlotFunctionsSubtle",{attrs:{"app-name":_vm.appName,"app-name-link":_vm.appNameLink}})],1)}),[],!1,null,null,null).exports;var StorySubtle=StorySubtle_vuedocgen_export_0;StorySubtle_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"StorySubtle",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"metaNavAriaLabel",type:{name:"string"}},{name:"metaNavExternalAriaLabel",type:{name:"string"}},{name:"langSwitcherAriaLabel",type:{name:"string"}},{name:"mainNavAriaLabel",type:{name:"string"}}]};var telekom_brand_header_navigation_TelekomHeaderTemplatevue_type_script_lang_js_={components:{StoryStandard:StoryStandard,StoryMegaMenu:StoryMegaMenu,StoryDropdown:StoryDropdown,StorySlim:StorySlim,StorySubtle:StorySubtle},props:{appName:String,appNameLink:String,appNameClick:Function,logoHref:String,logoTitle:String,logoHideTitle:String,storyName:String}};__webpack_require__("./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&");const TelekomHeaderTemplate_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_brand_header_navigation_TelekomHeaderTemplatevue_type_script_lang_js_,(function(){var _h=this.$createElement,_c=this._self._c||_h;return _c("div",{staticClass:"wrapper"},[_c("scale-telekom-app-shell",[_c(this.storyName,{tag:"component",attrs:{slot:"header","app-name":this.appName,"app-name-link":this.appNameLink,"logo-href":this.logoHref,"logo-title":this.logoTitle,"logo-hide-title":this.logoHideTitle},slot:"header"})],1)],1)}),[],!1,null,null,null).exports;var TelekomHeaderTemplate=TelekomHeaderTemplate_vuedocgen_export_0;TelekomHeaderTemplate_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"TelekomHeaderTemplate",description:"",tags:{},props:[{name:"appName",type:{name:"string"}},{name:"appNameLink",type:{name:"string"}},{name:"appNameClick",type:{name:"func"}},{name:"logoHref",type:{name:"string"}},{name:"logoTitle",type:{name:"string"}},{name:"logoHideTitle",type:{name:"string"}},{name:"storyName",type:{name:"string"}}]};var addonNavigation=[{name:"Telekom Shops",id:"Telekom Shops",href:"#telekom-shops"},{name:"Contact",id:"Contact",href:"#contact"}],userNavigation=[{type:"userInfo",shortName:"Alexander",name:"Alexander Dreyer",email:"alexander.dreyer@t-online.de"},{type:"divider"},{type:"item",name:"Customer Care",id:"customer-care",href:"https://www.telekom.de/kundencenter/startseite",onClick:function onClick(){},icon:"t-product-measure-internet-speed",iconPosition:"prefix"},{type:"item",name:"Login Settings",id:"login-settings",href:"https://account.idm.telekom.com/account-manager/index.xhtml",onClick:function onClick(){},icon:"service-settings",iconPosition:"prefix"},{type:"divider"},{type:"item",name:"Optional Link",id:"optional-link",href:"#optional-link",onClick:function onClick(){}},{type:"divider"},{type:"button",name:"Logout",id:"logout",onClick:function onClick(){console.log("button click")},href:"https://accounts.login.idm.telekom.com/sessionmessage/logout",variant:"secondary"}],mainNavigation=[{name:"Topic One",id:"Topic One",children:[{name:"Second Level",id:"Second Level 3",children:[{name:"Third Level",id:"Third Level 4",href:"#third-level"},{name:"Third Level",id:"Third Level 5",href:"#third-level"},{name:"Third Level",id:"Third Level 6",href:"#third-level"},{name:"Third Level",id:"Third Level 7",href:"#third-level"},{name:"Third Level",id:"Third Level 8",href:"#third-level"},{name:"Third Level",id:"Third Level 9",href:"#third-level"},{name:"Third Level",id:"Third Level 10",href:"#third-level"}]},{name:"Second Level",id:"Second Level 4",children:[{name:"Third Level",id:"Third Level 11",href:"#third-level"},{name:"Third Level",id:"Third Level 12",href:"#third-level"},{name:"Third Level",id:"Third Level 13",href:"#third-level"},{name:"Third Level",id:"Third Level 14",href:"#third-level"},{name:"Third Level",id:"Third Level 15",href:"#third-level"},{name:"Third Level",id:"Third Level 16",href:"#third-level"},{name:"Third Level",id:"Third Level 17",href:"#third-level"}]},{name:"Second Level",id:"Second Level 5",children:[{name:"Third Level",id:"Third Level 18",href:"#third-level"},{name:"Third Level",id:"Third Level 19",href:"#third-level"},{name:"Third Level",id:"Third Level 20",href:"#third-level"},{name:"Third Level",id:"Third Level 21",href:"#third-level"},{name:"Third Level",id:"Third Level 22",href:"#third-level"},{name:"Third Level",id:"Third Level 23",href:"#third-level"},{name:"Third Level",id:"Third Level 24",href:"#third-level"}]},{name:"Second Level",id:"Second Level 6",children:[{name:"Third Level",id:"Third Level 25",href:"#third-level"},{name:"Third Level",id:"Third Level 26",href:"#third-level"},{name:"Third Level",id:"Third Level 27",href:"#third-level"},{name:"Third Level",id:"Third Level 28",href:"#third-level"},{name:"Third Level",id:"Third Level 29",href:"#third-level"},{name:"Third Level",id:"Third Level 30",href:"#third-level"}]}]},{name:"Topic Two",id:"Topic Two",children:[{name:"Second Level",id:"Second Level 1",children:[{name:"Third Level",id:"Third Level 1",href:"#third-level"},{name:"Third Level",id:"Third Level 2",href:"#third-level"}]},{name:"Second Level",id:"Second Level 2",children:[{name:"Third Level",id:"Third Level 3",href:"#third-level"}]}]},{name:"Topic Three",id:"Topic Three",href:"#topic-three"},{name:"Topic Four",id:"Topic Four",href:"#topic-four"},{name:"Topic Five",id:"Topic Five",href:"#topic-five"}],iconNavigation=[{name:"Search",id:"Search35",href:"#search",icon:"action-search"},{name:"Cart",id:"Cart36",href:"#cart",icon:"action-shopping-cart",badge:!0,badgeLabel:"Cart",labelVisuallyHidden:!0,badgeCount:3,ariaLabelTranslation:"$badgeLabel - $badgeCount item"},{id:"menu",defaultName:"Menu",openedName:"Close"}],sectorNavigation=[{name:"Business",id:"Business39",href:"#business"}];function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var TelekomBrandHeader_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{TelekomHeaderTemplate:TelekomHeaderTemplate},props:Object.assign({},TelekomHeaderTemplate.props,{storyName:String,mainNavAriaLabel:"Main Navigation",metaNavAriaLabel:"Meta Navigation",metaNavExternalAriaLabel:"External Meta Navigation",langSwitcherAriaLabel:"Language Switcher"}),template:'\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  '}},layoutProps={Template:TelekomBrandHeader_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Telekom Brand Header & Navigation",component:TelekomHeader,argTypes:{appNameLink:{control:{type:"text"}},appName:{control:{type:"text"}},appNameClick:{control:{type:"disabled"},description:"app name click event handler custom function"},storyName:{table:{disable:!0}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Telekom Brand Header & Navigation"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard-header"},"Standard Header"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard Header",args:{storyName:"StoryStandard"},inline:!1,height:500,mdxType:"Story"},TelekomBrandHeader_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard Header",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"main-components"},"Main components"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-app-shell",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-app-shell"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-header",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-header")))),Object(esm.b)("h3",{id:"subcomponents"},"Subcomponents"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-nav-list",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-nav-list"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-nav-item",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-nav-item"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-nav-flyout",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-nav-flyout"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-mega-menu",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-mega-menu"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-mega-menu",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-mega-menu-column"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-mobile-flyout-canvas",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-mobile-flyout-canvas"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-mobile-menu",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-mobile-menu"))),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"https://github.com/telekom/scale/tree/main/packages/components/src/components/telekom/telekom-mobile-menu-item",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("inlineCode",{parentName:"a"},"scale-telekom-mobile-menu-item")))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header>\n  <scale-telekom-nav-list slot="main-nav" aria-label="Main Navigation Links">\n    <scale-telekom-nav-item aria-label="Topic One">\n      <a href="#">Topic One</a>\n    </scale-telekom-nav-item>\n    \x3c!-- … --\x3e\n  </scale-telekom-nav-list>\n</scale-telekom-header>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-telekom-header {\n  --shadow: 0px 2px 9px rgba(0, 0, 0, 0.15);\n  --background: var(--telekom-color-background-surface);\n  --background-logo: var(--telekom-color-primary-standard);\n  --transition-common-scrolled: height var(--telekom-motion-duration-immediate)\n      var(--telekom-motion-easing-standard),\n    width var(--telekom-motion-duration-immediate),\n    margin var(--telekom-motion-duration-immediate);\n  --font-size-app-name: var(--telekom-typography-font-size-body);\n  --line-height-app-name: var(--telekom-typography-line-spacing-tight);\n  --font-weight-app-name: var(--telekom-typography-font-weight-extra-bold);\n}\n\nscale-telekom-nav-list {\n  --width: 100%;\n  --height: 100%;\n  --spacing-x-start: 0;\n  --flex-direction: row;\n}\n\nscale-telekom-nav-item {\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --color: var(--telekom-color-text-and-icon-standard);\n}\n")),Object(esm.b)("h2",{id:"application-name"},"Application Name"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Application Name",args:{storyName:"StoryStandard",appName:"Application Name"},inline:!1,height:500,mdxType:"Story"},TelekomBrandHeader_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header\n  app-name="Application Name"\n  app-name-link="https://example.com"\n  meta-nav-aria-label="Meta navigation section"\n  meta-nav-external-aria-label="External navigation section"\n  lang-switcher-aria-label="Language switcher section"\n  main-nav-aria-label="Main navigation"\n  section\n>\n  \x3c!-- … --\x3e\n</scale-telekom-header>\n')),Object(esm.b)("h2",{id:"mega-menu"},"Mega Menu"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Mega Menu",args:{storyName:"StoryMegaMenu",appName:"Application Name"},inline:!1,height:500,mdxType:"Story"},TelekomBrandHeader_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header\n  meta-nav-aria-label="Meta navigation section"\n  meta-nav-external-aria-label="External navigation section"\n  lang-switcher-aria-label="Language switcher section"\n  main-nav-aria-label="Main navigation section"\n>\n  <scale-telekom-nav-list slot="main-nav" aria-label="Main Navigation Links">\n    <scale-telekom-nav-item aria-label="Topic one">\n      <button>Topic One</button>\n      <scale-telekom-nav-flyout hover>\n        <div>Flyout content</div>\n      </scale-telekom-nav-flyout>\n    </scale-telekom-nav-item>\n    \x3c!-- … --\x3e\n  </scale-telekom-nav-list>\n</scale-telekom-header>\n')),Object(esm.b)("h3",{id:"mega-menu-1"},"Mega Menu"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-mega-menu>\n  <scale-telekom-mega-menu-column>\n    <scale-icon-home-home slot="icon" size="20"></scale-icon-home-home>\n    <a href="https://example.com" slot="heading">Second Level</a>\n    <ul>\n      <li><a href="https://example.com">Third Level</a></li>\n      <li><a href="https://example.com">Third Level</a></li>\n      \x3c!-- … --\x3e\n    </ul>\n  </scale-telekom-mega-menu-column>\n</scale-telekom-mega-menu>\n')),Object(esm.b)("h2",{id:"slim-header"},"Slim Header"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Slim Header",args:{storyName:"StorySlim",appName:"Application Name"},inline:!1,height:500,mdxType:"Story"},TelekomBrandHeader_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header\n  app-name="Application Name"\n  app-name-link="https://example.com"\n  meta-nav-aria-label="Meta navigation section"\n  meta-nav-external-aria-label="External navigation section"\n  lang-switcher-aria-label="Language switcher section"\n  main-nav-aria-label="Main navigation section"\n>\n  \x3c!-- … --\x3e\n</scale-telekom-header>\n')),Object(esm.b)("h2",{id:"subtle-header"},"Subtle Header"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Subtle Header",args:{storyName:"StorySubtle",appName:"Application Name"},inline:!1,height:500,mdxType:"Story"},TelekomBrandHeader_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header\n  app-name="Application Name"\n  app-name-link="https://example.com"\n  meta-nav-aria-label="Meta navigation section"\n  meta-nav-external-aria-label="External navigation section"\n  lang-switcher-aria-label="Language switcher section"\n  main-nav-aria-label="Main navigation section"\n>\n  \x3c!-- … --\x3e\n</scale-telekom-header>\n')),Object(esm.b)("h2",{id:"data-api-backward-compatibility"},"Data API (Backward compatibility)"),Object(esm.b)("blockquote",null,Object(esm.b)("p",{parentName:"blockquote"},"This scale-telekom-header-data-back-compat component is only meant to make it easier to migrate from a ",Object(esm.b)("a",{parentName:"p",href:"?path=/usage/components-brand-header-navigation--standard"},"previous version of the Brand Header"),". If you do not need to migrate, please avoid it. Learn more about the ",Object(esm.b)("a",{parentName:"p",href:"https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/telekom-header-navigation/fixtures.js",target:"_blank",rel:"nofollow noopener noreferrer"},"expected data shape"),".")),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Data API",inline:!1,height:500,args:{mainNavigation:JSON.stringify(mainNavigation),iconNavigation:JSON.stringify(iconNavigation),addonNavigation:JSON.stringify(addonNavigation),sectorNavigation:JSON.stringify(sectorNavigation),userNavigation:JSON.stringify(userNavigation),activeRouteId:"Third Level 24",appName:"Application Name"},mdxType:"Story"},(function(){return{components:{TelekomHeaderDataBackCompat:TelekomHeaderDataBackCompat},props:TelekomHeaderDataBackCompat.props,template:'\n        <div class="brand-header-spacing">\n          <scale-telekom-header-data-back-compat\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :app-name="appName"\n          >\n          </scale-telekom-header-data-back-compat>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-header-data-back-compat\n  app-name="Application Name"\n  app-name-link="https://example.com"\n  active-route-id="id"\n></scale-telekom-header-data-back-compat>\n\n<script>\n  const header = window.document.querySelector(\n    \'scale-telekom-header-data-back-compat\'\n  );\n  header.mainNavigation = [...[]];\n  header.iconNavigation = [...[]];\n  header.sectorNavigation = [...[]];\n  header.addonNavigation = [...[]];\n<\/script>\n')))}MDXContent.isMDXComponent=!0;var standardHeader=TelekomBrandHeader_stories_Template.bind({});standardHeader.storyName="Standard Header",standardHeader.args={storyName:"StoryStandard"},standardHeader.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomHeaderTemplate\n  },\n  props: { ...TelekomHeaderTemplate.props,\n    storyName: String,\n    // TODO remove these from here since they\'re included already in TelekomHeaderTemplate\n    mainNavAriaLabel: \'Main Navigation\',\n    metaNavAriaLabel: \'Meta Navigation\',\n    metaNavExternalAriaLabel: \'External Meta Navigation\',\n    langSwitcherAriaLabel: \'Language Switcher\'\n  },\n  template: `\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  `\n})'}};var applicationName=TelekomBrandHeader_stories_Template.bind({});applicationName.storyName="Application Name",applicationName.args={storyName:"StoryStandard",appName:"Application Name"},applicationName.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomHeaderTemplate\n  },\n  props: { ...TelekomHeaderTemplate.props,\n    storyName: String,\n    // TODO remove these from here since they\'re included already in TelekomHeaderTemplate\n    mainNavAriaLabel: \'Main Navigation\',\n    metaNavAriaLabel: \'Meta Navigation\',\n    metaNavExternalAriaLabel: \'External Meta Navigation\',\n    langSwitcherAriaLabel: \'Language Switcher\'\n  },\n  template: `\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  `\n})'}};var megaMenu=TelekomBrandHeader_stories_Template.bind({});megaMenu.storyName="Mega Menu",megaMenu.args={storyName:"StoryMegaMenu",appName:"Application Name"},megaMenu.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomHeaderTemplate\n  },\n  props: { ...TelekomHeaderTemplate.props,\n    storyName: String,\n    // TODO remove these from here since they\'re included already in TelekomHeaderTemplate\n    mainNavAriaLabel: \'Main Navigation\',\n    metaNavAriaLabel: \'Meta Navigation\',\n    metaNavExternalAriaLabel: \'External Meta Navigation\',\n    langSwitcherAriaLabel: \'Language Switcher\'\n  },\n  template: `\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  `\n})'}};var slimHeader=TelekomBrandHeader_stories_Template.bind({});slimHeader.storyName="Slim Header",slimHeader.args={storyName:"StorySlim",appName:"Application Name"},slimHeader.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomHeaderTemplate\n  },\n  props: { ...TelekomHeaderTemplate.props,\n    storyName: String,\n    // TODO remove these from here since they\'re included already in TelekomHeaderTemplate\n    mainNavAriaLabel: \'Main Navigation\',\n    metaNavAriaLabel: \'Meta Navigation\',\n    metaNavExternalAriaLabel: \'External Meta Navigation\',\n    langSwitcherAriaLabel: \'Language Switcher\'\n  },\n  template: `\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  `\n})'}};var subtleHeader=TelekomBrandHeader_stories_Template.bind({});subtleHeader.storyName="Subtle Header",subtleHeader.args={storyName:"StorySubtle",appName:"Application Name"},subtleHeader.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomHeaderTemplate\n  },\n  props: { ...TelekomHeaderTemplate.props,\n    storyName: String,\n    // TODO remove these from here since they\'re included already in TelekomHeaderTemplate\n    mainNavAriaLabel: \'Main Navigation\',\n    metaNavAriaLabel: \'Meta Navigation\',\n    metaNavExternalAriaLabel: \'External Meta Navigation\',\n    langSwitcherAriaLabel: \'Language Switcher\'\n  },\n  template: `\n    <TelekomHeaderTemplate\n      :story-name="storyName"\n      :app-name="appName"\n      :app-name-link="appNameLink"\n      :logo-href="logoHref"\n      :logo-title="logoTitle"\n      :logo-hide-title="logoHideTitle"\n      :meta-nav-aria-label="metaNavAriaLabel" \n      :meta-nav-external-aria-label="metaNavExternalAriaLabel"\n      :lang-switcher-aria-label="langSwitcherAriaLabel"\n      :main-nav-aria-label="mainNavAriaLabel"\n    />\n  `\n})'}};var TelekomBrandHeader_stories_dataApi=function dataApi(){return{components:{TelekomHeaderDataBackCompat:TelekomHeaderDataBackCompat},props:TelekomHeaderDataBackCompat.props,template:'\n        <div class="brand-header-spacing">\n          <scale-telekom-header-data-back-compat\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :app-name="appName"\n          >\n          </scale-telekom-header-data-back-compat>\n        </div>\n      '}};TelekomBrandHeader_stories_dataApi.storyName="Data API",TelekomBrandHeader_stories_dataApi.args={mainNavigation:JSON.stringify(mainNavigation),iconNavigation:JSON.stringify(iconNavigation),addonNavigation:JSON.stringify(addonNavigation),sectorNavigation:JSON.stringify(sectorNavigation),userNavigation:JSON.stringify(userNavigation),activeRouteId:"Third Level 24",appName:"Application Name"},TelekomBrandHeader_stories_dataApi.parameters={storySource:{source:'() => ({\n  components: {\n    TelekomHeaderDataBackCompat\n  },\n  props: TelekomHeaderDataBackCompat.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-telekom-header-data-back-compat\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :app-name="appName"\n          >\n          </scale-telekom-header-data-back-compat>\n        </div>\n      `\n})'}};var componentMeta={title:"Components/Telekom Brand Header & Navigation",component:TelekomHeader,argTypes:{appNameLink:{control:{type:"text"}},appName:{control:{type:"text"}},appNameClick:{control:{type:"disabled"},description:"app name click event handler custom function"},storyName:{table:{disable:!0}}},includeStories:["standardHeader","applicationName","megaMenu","slimHeader","subtleHeader","dataApi"]},mdxStoryNameToKey={"Standard Header":"standardHeader","Application Name":"applicationName","Mega Menu":"megaMenu","Slim Header":"slimHeader","Subtle Header":"subtleHeader","Data API":"dataApi"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&":function(module,__webpack_exports__,__webpack_require__){"use strict";var _node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_TelekomHeaderTemplate_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/vue-docgen-loader/lib/index.js?!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!../../node_modules/vue-loader/lib/index.js?!./stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue?vue&type=style&index=0&lang=css&");__webpack_require__.n(_node_modules_vue_docgen_loader_lib_index_js_ref_13_node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_ref_10_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_storybook_builder_webpack4_node_modules_postcss_loader_dist_cjs_js_ref_10_2_node_modules_vue_loader_lib_index_js_vue_loader_options_TelekomHeaderTemplate_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__).a},"./stories/components/telekom-footer/TelekomFooter.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return TelekomFooter_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateMinimal",(function(){return TelekomFooter_stories_TemplateMinimal})),__webpack_require__.d(__webpack_exports__,"ExtendedTemplate",(function(){return TelekomFooter_stories_ExtendedTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"minimal",(function(){return minimal})),__webpack_require__.d(__webpack_exports__,"extended",(function(){return extended})),__webpack_require__.d(__webpack_exports__,"dataApi",(function(){return TelekomFooter_stories_dataApi}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),telekom_footer_Footervue_type_script_lang_js_={props:{type:{type:String,default:"standard"}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(telekom_footer_Footervue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("scale-telekom-footer",{attrs:{type:_vm.type}},[_c("scale-telekom-footer-content",[_c("span",{attrs:{slot:"notice"},slot:"notice"},[_vm._v(" © Deutsche Telekom AG ")]),_vm._v(" "),_c("ul",{attrs:{slot:"navigation"},slot:"navigation"},[_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Imprint \n        ")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Data privacy \n        ")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Terms and conditions\n        ")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Consumer protection\n        ")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Product information sheet\n        ")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"#"}},[_vm._v("\n          Youth protection\n        ")])])])])],1)}),[],!1,null,null,null).exports;var Footer=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"Footer",description:"",tags:{},props:[{name:"type",type:{name:"string"},defaultValue:{func:!1,value:"'standard'"}}]};var telekom_footer_TelekomFooterDataBackCompatvue_type_script_lang_js_={props:{footerNavigation:String,copyright:String,type:{type:String,default:"standard"}}};const TelekomFooterDataBackCompat_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_footer_TelekomFooterDataBackCompatvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("scale-telekom-footer-data-back-compat",{attrs:{"footer-navigation":this.footerNavigation,type:this.type,copyright:this.copyright}})}),[],!1,null,null,null).exports;var TelekomFooterDataBackCompat=TelekomFooterDataBackCompat_vuedocgen_export_0;TelekomFooterDataBackCompat_vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"TelekomFooterDataBackCompat",description:"",tags:{},props:[{name:"footerNavigation",type:{name:"string"}},{name:"copyright",type:{name:"string"}},{name:"type",type:{name:"string"},defaultValue:{func:!1,value:"'standard'"}}]};var footerNavigation=[{name:"Contact",id:"Contact",href:"#contact"},{name:"Terms and conditions",id:"Terms and conditions",href:"#terms-and-conditions"},{name:"Legal notice",id:"Legal notice",href:"#legal-notice"},{name:"Data privacy",id:"Data privacy",href:"#data-privacy",icon:"alert-imprint-dataprivacy"}],telekom_footer_FooterContentvue_type_script_lang_js_={name:"FooterContent",props:{logoHref:{type:String,default:""},logoTitle:{type:String,default:"Telekom Logo"},logoHideTitle:{type:Boolean,default:!1}}};const FooterContent_vuedocgen_export_0=Object(componentNormalizer.a)(telekom_footer_FooterContentvue_type_script_lang_js_,undefined,undefined,!1,null,null,null).exports;var FooterContent=FooterContent_vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}FooterContent_vuedocgen_export_0.__docgenInfo={displayName:"FooterContent",exportName:"default",description:"",tags:{},props:[{name:"logoHref",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"logoTitle",type:{name:"string"},defaultValue:{func:!1,value:"'Telekom Logo'"}},{name:"logoHideTitle",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}]};var TelekomFooter_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{TelekomFooter:Footer},props:Footer.props,template:'\n    <scale-telekom-footer \n        :type="type"\n    >\n      <scale-telekom-footer-content>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#">\n              Imprint\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Data privacy\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Terms and conditions\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Consumer protection\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Product information sheet\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Youth protection\n            </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer> \n  '}},TelekomFooter_stories_TemplateMinimal=function TemplateMinimal(args,_ref2){_ref2.argTypes;return{components:{TelekomFooter:Footer},props:Footer.props,template:'\n  <div style="position: relative; height: 100%;">\n    <scale-telekom-footer \n        :type="type"\n        style="position:absolute; bottom: 0;  width: 100%;"\n    >\n      <scale-telekom-footer-content>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#">\n              Imprint\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Data privacy\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Terms and conditions\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Consumer protection\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Product information sheet\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Youth protection\n            </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer> \n    </div>\n  '}},TelekomFooter_stories_ExtendedTemplate=function ExtendedTemplate(args,_ref3){_ref3.argTypes;return{components:{TelekomFooter:Footer},props:Footer.props,template:'\n    <scale-telekom-footer\n      :type="type"\n    >\n      <scale-telekom-footer-content>\n        <scale-telekom-footer-extended-navigation slot="extended-navigation">\n          <scale-telekom-footer-extended-navigation-column heading="Topic One">\n            <ul>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column heading="Topic Two">\n            <ul>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column\n            heading="Topic Three"\n          >\n            <ul>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column heading="Topic Four">\n            <ul>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n        </scale-telekom-footer-extended-navigation>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#"> Imprint </a>\n          </li>\n          <li>\n            <a href="#"> Data privacy </a>\n          </li>\n          <li>\n            <a href="#"> Terms and conditions </a>\n          </li>\n          <li>\n            <a href="#"> Consumer protection </a>\n          </li>\n          <li>\n            <a href="#"> Product information sheet </a>\n          </li>\n          <li>\n            <a href="#"> Youth protection </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer>\n  '}},layoutProps={Template:TelekomFooter_stories_Template,TemplateMinimal:TelekomFooter_stories_TemplateMinimal,ExtendedTemplate:TelekomFooter_stories_ExtendedTemplate};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Telekom Footer",component:Footer,subcomponents:{"Telekom Footer Content":FooterContent},argTypes:{type:{control:{type:"select"},options:["minimal","standard"],defaultValue:"standard"}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Telekom Footer"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",height:400,mdxType:"Story"},TelekomFooter_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --font-size: var(--telekom-typography-font-size-caption);\n  --font-color: var(--telekom-color-text-and-icon-white-standard);\n\n  --font-large: var(--telekom-text-style-ui);\n  --background-footer: var(--telekom-color-ui-black);\n  --background-footer-minimal: var(--telekom-color-background-canvas);\n}\n")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-footer>\n  <scale-telekom-footer-content>\n    <span slot="notice"> © Deutsche Telekom AG </span>\n    <ul slot="navigation">\n      <li>\n        <a href="#"> Imprint </a>\n      </li>\n      <li>\n        <a href="#"> Data privacy </a>\n      </li>\n      <li>\n        <a href="#"> Terms and conditions </a>\n      </li>\n      <li>\n        <a href="#"> Consumer protection </a>\n      </li>\n      <li>\n        <a href="#"> Product information sheet </a>\n      </li>\n      <li>\n        <a href="#"> Youth protection </a>\n      </li>\n    </ul>\n  </scale-telekom-footer-content>\n</scale-telekom-footer>\n')),Object(esm.b)("h2",{id:"minimal"},"Minimal"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Minimal",args:{type:"minimal"},mdxType:"Story"},TelekomFooter_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-footer type="minimal">\n  \x3c!-- … --\x3e\n</scale-telekom-footer>\n')),Object(esm.b)("h2",{id:"extended"},"Extended"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Extended",height:600,mdxType:"Story"},TelekomFooter_stories_ExtendedTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-footer>\n  <scale-telekom-footer-content>\n    <scale-telekom-footer-extended-navigation slot="extended-navigation">\n      <scale-telekom-footer-extended-navigation-column heading="Topic One">\n        <ul>\n          <li>\n            <a href="#">Topic One</a>\n          </li>\n          <li>\n            <a href="#">Topic One</a>\n          </li>\n          <li>\n            <a href="#">Topic One</a>\n          </li>\n          <li>\n            <a href="#">Topic One</a>\n          </li>\n        </ul>\n      </scale-telekom-footer-extended-navigation-column>\n      \x3c!-- … --\x3e\n    </scale-telekom-footer-extended-navigation>\n    \x3c!-- … --\x3e\n  </scale-telekom-footer-content>\n</scale-telekom-footer>\n')),Object(esm.b)("h2",{id:"data-api-backward-compatibility"},"Data API (Backward compatibility)"),Object(esm.b)("blockquote",null,Object(esm.b)("p",{parentName:"blockquote"},"This scale-telekom-footer-data-back-compat component is only meant to make it easier to migrate from a ",Object(esm.b)("a",{parentName:"p",href:"?path=/usage/components-footer--standard"},"previous version of the Brand Footer"),". If you do not need to migrate, please avoid it. Learn more about the ",Object(esm.b)("a",{parentName:"p",href:"https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/telekom-brand-header-navigation/fixtures.js",target:"_blank",rel:"nofollow noopener noreferrer"},"expected data shape"),".")),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Data API",inline:!1,height:500,args:{footerNavigation:JSON.stringify(footerNavigation),type:"minimal"},mdxType:"Story"},(function(){return{components:{TelekomFooterDataBackCompat:TelekomFooterDataBackCompat},props:TelekomFooterDataBackCompat.props,template:'\n        <scale-telekom-footer-data-back-compat\n          :footer-navigation="footerNavigation"\n          :type="type"\n          :copyright="copyright"\n        >\n        </scale-telekom-footer-data-back-compat>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-telekom-footer-data-back-compat\n  type="minimal"\n  copyright="© Deutsche Telekom AG"\n></scale-telekom-footer-data-back-compat>\n\n<script>\n  const footer = window.document.querySelector(\n    \'scale-telekom-footer-data-back-compat\'\n  );\n  footer.footerNavigation = [...[]];\n<\/script>\n')))}MDXContent.isMDXComponent=!0;var standard=TelekomFooter_stories_Template.bind({});standard.storyName="Standard",standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomFooter\n  },\n  props: TelekomFooter.props,\n  template: `\n    <scale-telekom-footer \n        :type="type"\n    >\n      <scale-telekom-footer-content>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#">\n              Imprint\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Data privacy\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Terms and conditions\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Consumer protection\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Product information sheet\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Youth protection\n            </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer> \n  `\n})'}};var minimal=TelekomFooter_stories_Template.bind({});minimal.storyName="Minimal",minimal.args={type:"minimal"},minimal.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomFooter\n  },\n  props: TelekomFooter.props,\n  template: `\n    <scale-telekom-footer \n        :type="type"\n    >\n      <scale-telekom-footer-content>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#">\n              Imprint\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Data privacy\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Terms and conditions\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Consumer protection\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Product information sheet\n            </a>\n          </li>\n          <li>\n            <a href="#">\n              Youth protection\n            </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer> \n  `\n})'}};var extended=TelekomFooter_stories_ExtendedTemplate.bind({});extended.storyName="Extended",extended.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    TelekomFooter\n  },\n  props: TelekomFooter.props,\n  template: `\n    <scale-telekom-footer\n      :type="type"\n    >\n      <scale-telekom-footer-content>\n        <scale-telekom-footer-extended-navigation slot="extended-navigation">\n          <scale-telekom-footer-extended-navigation-column heading="Topic One">\n            <ul>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n              <li>\n                <a href="#">Topic One</a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column heading="Topic Two">\n            <ul>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n              <li>\n                <a href="#">Topic Two</a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column\n            heading="Topic Three"\n          >\n            <ul>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n              <li>\n                <a href="#">Topic Three </a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n          <scale-telekom-footer-extended-navigation-column heading="Topic Four">\n            <ul>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n              <li>\n                <a href="#">Topic Four </a>\n              </li>\n            </ul>\n          </scale-telekom-footer-extended-navigation-column>\n        </scale-telekom-footer-extended-navigation>\n        <span slot="notice"> © Deutsche Telekom AG </span>\n        <ul slot="navigation">\n          <li>\n            <a href="#"> Imprint </a>\n          </li>\n          <li>\n            <a href="#"> Data privacy </a>\n          </li>\n          <li>\n            <a href="#"> Terms and conditions </a>\n          </li>\n          <li>\n            <a href="#"> Consumer protection </a>\n          </li>\n          <li>\n            <a href="#"> Product information sheet </a>\n          </li>\n          <li>\n            <a href="#"> Youth protection </a>\n          </li>\n        </ul>\n      </scale-telekom-footer-content>\n    </scale-telekom-footer>\n  `\n})'}};var TelekomFooter_stories_dataApi=function dataApi(){return{components:{TelekomFooterDataBackCompat:TelekomFooterDataBackCompat},props:TelekomFooterDataBackCompat.props,template:'\n        <scale-telekom-footer-data-back-compat\n          :footer-navigation="footerNavigation"\n          :type="type"\n          :copyright="copyright"\n        >\n        </scale-telekom-footer-data-back-compat>\n      '}};TelekomFooter_stories_dataApi.storyName="Data API",TelekomFooter_stories_dataApi.args={footerNavigation:JSON.stringify(footerNavigation),type:"minimal"},TelekomFooter_stories_dataApi.parameters={storySource:{source:'() => ({\n  components: {\n    TelekomFooterDataBackCompat\n  },\n  props: TelekomFooterDataBackCompat.props,\n  template: `\n        <scale-telekom-footer-data-back-compat\n          :footer-navigation="footerNavigation"\n          :type="type"\n          :copyright="copyright"\n        >\n        </scale-telekom-footer-data-back-compat>\n      `\n})'}};var componentMeta={title:"Components/Telekom Footer",component:Footer,subcomponents:{"Telekom Footer Content":FooterContent},argTypes:{type:{control:{type:"select"},options:["minimal","standard"],defaultValue:"standard"}},includeStories:["standard","minimal","extended","dataApi"]},mdxStoryNameToKey={Standard:"standard",Minimal:"minimal",Extended:"extended","Data API":"dataApi"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/text-area/TextArea.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return TextArea_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"placeholder",(function(){return placeholder})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"withError",(function(){return withError})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"readOnly",(function(){return readOnly})),__webpack_require__.d(__webpack_exports__,"maxLengthWithCounter",(function(){return maxLengthWithCounter})),__webpack_require__.d(__webpack_exports__,"moreRows",(function(){return moreRows}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),text_area_ScaleTextAreavue_type_script_lang_js_={props:{name:{type:String},label:{type:String},rows:{type:Number},cols:{type:Number},helperText:{type:String},invalid:{type:Boolean},maxLength:{type:Number},minLength:{type:Number},placeholder:{type:String},disabled:{type:Boolean},readonly:{type:Boolean},required:{type:Boolean},counter:{type:Boolean},resize:{type:String},value:{type:String},inputId:{type:String},transparent:{type:Boolean},inputAutofocus:{type:Boolean},styles:{type:String}},methods:{scaleInput:function scaleInput($event){Object(addon_actions_dist_esm.action)("scaleInput"),this.$emit("scaleInput",$event)},"scale-input":function scaleInput($event){Object(addon_actions_dist_esm.action)("scale-input"),this.$emit("scale-input",$event)},scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},scaleFocus:function scaleFocus($event){Object(addon_actions_dist_esm.action)("scaleFocus"),this.$emit("scaleFocus",$event)},"scale-focus":function scaleFocus($event){Object(addon_actions_dist_esm.action)("scale-focus"),this.$emit("scale-focus",$event)},scaleBlur:function scaleBlur($event){Object(addon_actions_dist_esm.action)("scaleBlur"),this.$emit("scaleBlur",$event)},"scale-blur":function scaleBlur($event){Object(addon_actions_dist_esm.action)("scale-blur"),this.$emit("scale-blur",$event)},scaleKeyDown:function scaleKeyDown($event){Object(addon_actions_dist_esm.action)("scaleKeyDown"),this.$emit("scaleKeyDown",$event)},"scale-keydown":function scaleKeydown($event){Object(addon_actions_dist_esm.action)("scale-keydown"),this.$emit("scale-keydown",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(text_area_ScaleTextAreavue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-input",{attrs:{name:_vm.name,label:_vm.label,rows:_vm.rows,cols:_vm.cols,"helper-text":_vm.helperText,invalid:_vm.invalid,"max-length":_vm.maxLength,"min-length":_vm.minLength,placeholder:_vm.placeholder,disabled:_vm.disabled,readonly:_vm.readonly,required:_vm.required,counter:_vm.counter,resize:_vm.resize,value:_vm.value,"input-id":_vm.inputId,transparent:_vm.transparent,"input-autofocus":_vm.inputAutofocus},on:{scaleInput:_vm.scaleInput,scaleChange:_vm.scaleChange,scaleFocus:_vm.scaleFocus,scaleBlur:_vm.scaleBlur,scaleKeyDown:_vm.scaleKeyDown}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleTextArea=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTextArea",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"rows",type:{name:"number"}},{name:"cols",type:{name:"number"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"maxLength",type:{name:"number"}},{name:"minLength",type:{name:"number"}},{name:"placeholder",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"readonly",type:{name:"boolean"}},{name:"required",type:{name:"boolean"}},{name:"counter",type:{name:"boolean"}},{name:"resize",type:{name:"string"}},{name:"value",type:{name:"string"}},{name:"inputId",type:{name:"string"}},{name:"transparent",type:{name:"boolean"}},{name:"inputAutofocus",type:{name:"boolean"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleInput",type:{names:["undefined"]}},{name:"scale-input",type:{names:["undefined"]}},{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}},{name:"scaleFocus",type:{names:["undefined"]}},{name:"scale-focus",type:{names:["undefined"]}},{name:"scaleBlur",type:{names:["undefined"]}},{name:"scale-blur",type:{names:["undefined"]}},{name:"scaleKeyDown",type:{names:["undefined"]}},{name:"scale-keydown",type:{names:["undefined"]}}],slots:[{name:"default"}]};var TextArea_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleTextArea:ScaleTextArea},props:ScaleTextArea.props,template:'\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  ',methods:{scaleChange:Object(addon_actions_dist_esm.action)("scaleChange"),scaleFocus:Object(addon_actions_dist_esm.action)("scaleFocus"),scaleBlur:Object(addon_actions_dist_esm.action)("scaleBlur"),scaleKeyDown:Object(addon_actions_dist_esm.action)("scaleKeyDown")}}},layoutProps={Template:TextArea_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Text Area",component:ScaleTextArea,argTypes:{resize:{control:{type:"select",options:["unset","none","vertical","horizontal"]}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Text Area"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"Textarea",rows:3,resize:"vertical"},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea label="Textarea" rows="3" resize="vertical"></scale-textarea>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-textarea {\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --radius: var(--telekom-radius-standard);\n  --border: var(--telekom-line-weight-standard) solid\n    var(--telekom-color-ui-border-standard);\n  --border-error: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-danger-standard);\n  --border-color-hover: var(--telekom-color-ui-border-hovered);\n  --border-color-focus: var(--telekom-color-ui-border-hovered);\n  --border-color-disabled: var(--telekom-color-ui-border-disabled);\n  --background-color-hover: var(--telekom-color-ui-state-fill-hovered);\n  --background-color-disabled: none;\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --spacing-x-control: var(--telekom-spacing-composition-space-05);\n  --spacing-bottom-control: var(--telekom-spacing-composition-space-05);\n  --spacing-top-control: calc(\n    1.125rem - var(--telekom-spacing-composition-space-01)\n  );\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-disabled: transparent;\n  --border-color-readonly: transparent;\n  --background-readonly: var(--telekom-color-ui-disabled);\n\n  /*meta*/\n  --font-weight-meta: var(--telekom-typography-font-weight-bold);\n  --font-size-meta: var(--telekom-typography-font-size-small);\n  --line-height-meta: var(--telekom-typography-line-spacing-standard);\n  --spacing-y-meta: var(--telekom-spacing-composition-space-03);\n  --color-meta: var(--telekom-color-text-and-icon-standard);\n  --color-meta-error: var(--telekom-color-text-and-icon-functional-danger);\n\n  /*control*/\n  /*\n    18px 32px 4px 12px\n    (subtracting 1px from border)\n  */\n  --spacing-control: 0 calc(2rem - var(--telekom-spacing-composition-space-01))\n    0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));\n  --transition-control: var(--transition);\n  --background-control: var(--telekom-color-ui-state-fill-standard);\n\n  /*counter*/\n  --transition-counter: var(--transition);\n  --color-counter-error: var(--color-meta-error);\n\n  /*placeholder*/\n  --transition-placeholder: var(--transition);\n  --color-placeholder: var(--telekom-color-text-and-icon-additional);\n\n  /*label*/\n  --color-label: var(--telekom-color-text-and-icon-additional);\n  --color-label-readonly: var(--telekom-color-text-and-icon-standard);\n  --z-index-label: var(--scl-z-index-10);\n  --transition-label: var(--transition);\n}\n")),Object(esm.b)("h2",{id:"placeholder"},"Placeholder"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Placeholder",args:{label:"Placeholder",placeholder:"this is the placeholder"},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea\n  label="Placeholder"\n  placeholder="this is the placeholder"\n></scale-textarea>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{helperText:"Make sure to fill this",label:"Helper Text"},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea\n  label="Helper Text"\n  helper-text="Make sure to fill this"\n></scale-textarea>\n')),Object(esm.b)("h2",{id:"with-error"},"With Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Error",args:{label:"With Error",invalid:!0,helperText:"Something is wrong"},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea\n  label="With Error"\n  helper-text="Something is wrong"\n  invalid="true"\n></scale-textarea>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",disabled:!0},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea label="Disabled" disabled></scale-textarea>\n')),Object(esm.b)("h2",{id:"read-only"},"Read Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Read Only",args:{label:"Read only",readonly:!0,value:"This cannot be changed"},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea label="Read only" value="This cannot be changed" readonly></scale-textarea>\n')),Object(esm.b)("h2",{id:"max-length-with-counter"},"Max Length With Counter"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Max Length With Counter",args:{label:"Max Length With Counter",maxLength:10,counter:!0},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea\n  label="Max Length With Counter"\n  max-length="10"\n  counter\n></scale-textarea>\n')),Object(esm.b)("h2",{id:"more-rows"},"More rows"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"More rows",args:{label:"More rows",rows:10},mdxType:"Story"},TextArea_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-textarea label="More rows" rows="10"></scale-textarea>\n')))}MDXContent.isMDXComponent=!0;var standard=TextArea_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"Textarea",rows:3,resize:"vertical"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var placeholder=TextArea_stories_Template.bind({});placeholder.storyName="Placeholder",placeholder.args={label:"Placeholder",placeholder:"this is the placeholder"},placeholder.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var helperText=TextArea_stories_Template.bind({});helperText.storyName="Helper Text",helperText.args={helperText:"Make sure to fill this",label:"Helper Text"},helperText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var withError=TextArea_stories_Template.bind({});withError.storyName="With Error",withError.args={label:"With Error",invalid:!0,helperText:"Something is wrong"},withError.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var disabled=TextArea_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var readOnly=TextArea_stories_Template.bind({});readOnly.storyName="Read Only",readOnly.args={label:"Read only",readonly:!0,value:"This cannot be changed"},readOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var maxLengthWithCounter=TextArea_stories_Template.bind({});maxLengthWithCounter.storyName="Max Length With Counter",maxLengthWithCounter.args={label:"Max Length With Counter",maxLength:10,counter:!0},maxLengthWithCounter.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var moreRows=TextArea_stories_Template.bind({});moreRows.storyName="More rows",moreRows.args={label:"More rows",rows:10},moreRows.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextArea\n  },\n  props: ScaleTextArea.props,\n  template: `\n    <scale-textarea\n      :name="name"\n      :label="label"\n      :rows="rows"\n      :cols="cols"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :min-length="minLength"\n      :max-length="maxLength"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :resize="resize"\n      :value="value"\n      :input-id="inputId"\n      :transparent="transparent"\n      :input-autofocus="inputAutofocus"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-textarea>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var componentMeta={title:"Components/Text Area",component:ScaleTextArea,argTypes:{resize:{control:{type:"select",options:["unset","none","vertical","horizontal"]}}},includeStories:["standard","placeholder","helperText","withError","disabled","readOnly","maxLengthWithCounter","moreRows"]},mdxStoryNameToKey={Standard:"standard",Placeholder:"placeholder","Helper Text":"helperText","With Error":"withError",Disabled:"disabled","Read Only":"readOnly","Max Length With Counter":"maxLengthWithCounter","More rows":"moreRows"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/text-field/TextField.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ICON",(function(){return ICON})),__webpack_require__.d(__webpack_exports__,"Template",(function(){return TextField_stories_Template})),__webpack_require__.d(__webpack_exports__,"StorySectionsTemplate",(function(){return TextField_stories_StorySectionsTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"textWithEvents",(function(){return textWithEvents})),__webpack_require__.d(__webpack_exports__,"placeholder",(function(){return placeholder})),__webpack_require__.d(__webpack_exports__,"helperText",(function(){return helperText})),__webpack_require__.d(__webpack_exports__,"withError",(function(){return withError})),__webpack_require__.d(__webpack_exports__,"withWarning",(function(){return withWarning})),__webpack_require__.d(__webpack_exports__,"withSuccess",(function(){return withSuccess})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"readOnly",(function(){return readOnly})),__webpack_require__.d(__webpack_exports__,"maxLengthWithCounter",(function(){return maxLengthWithCounter}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),text_field_ScaleTextFieldvue_type_script_lang_js_={props:{name:{type:String},type:{type:String},inputModeType:{type:String},label:{type:String},helperText:{type:String},invalid:{type:Boolean},variant:{type:String},maxLength:{type:Number},minLength:{type:Number},max:{type:Number},min:{type:Number},placeholder:{type:String},disabled:{type:Boolean},readonly:{type:Boolean},required:{type:Boolean},counter:{type:Boolean},size:{type:String},value:{type:String},ariaDetailedId:{type:String},inputId:{type:String},inputAutofocus:{type:Boolean},inputAutocomplete:{type:String},experimentalControlled:{type:Boolean},hideLabelVisually:{type:Boolean,default:!1},styles:{type:String}},methods:{scaleInput:function scaleInput($event){Object(addon_actions_dist_esm.action)("scaleInput"),this.$emit("scaleInput",$event)},"scale-input":function scaleInput($event){Object(addon_actions_dist_esm.action)("scale-input"),this.$emit("scale-input",$event)},scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)},scaleFocus:function scaleFocus($event){Object(addon_actions_dist_esm.action)("scaleFocus"),this.$emit("scaleFocus",$event)},"scale-focus":function scaleFocus($event){Object(addon_actions_dist_esm.action)("scale-focus"),this.$emit("scale-focus",$event)},scaleBlur:function scaleBlur($event){Object(addon_actions_dist_esm.action)("scaleBlur"),this.$emit("scaleBlur",$event)},"scale-blur":function scaleBlur($event){Object(addon_actions_dist_esm.action)("scale-blur"),this.$emit("scale-blur",$event)},scaleKeyDown:function scaleKeyDown($event){Object(addon_actions_dist_esm.action)("scaleKeyDown"),this.$emit("scaleKeyDown",$event)},"scale-keydown":function scaleKeydown($event){Object(addon_actions_dist_esm.action)("scale-keydown"),this.$emit("scale-keydown",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(text_field_ScaleTextFieldvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-text-field",{attrs:{name:_vm.name,type:_vm.type,"input-mode-type":_vm.inputModeType,label:_vm.label,"helper-text":_vm.helperText,invalid:_vm.invalid,variant:_vm.variant,"max-length":_vm.maxLength,"min-length":_vm.minLength,max:_vm.max,min:_vm.min,placeholder:_vm.placeholder,disabled:_vm.disabled,readonly:_vm.readonly,required:_vm.required,counter:_vm.counter,size:_vm.size,value:_vm.value,"aria-detailed-id":_vm.ariaDetailedId,"input-id":_vm.inputId,"input-autofocus":_vm.inputAutofocus,"input-autocomplete":_vm.inputAutocomplete,"experimental-controlled":_vm.experimentalControlled,"hide-label-visually":_vm.hideLabelVisually},on:{scaleInput:_vm.scaleInput,scaleChange:_vm.scaleChange,scaleFocus:_vm.scaleFocus,scaleBlur:_vm.scaleBlur,scaleKeyDown:_vm.scaleKeyDown}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleTextField=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTextField",description:"",tags:{},props:[{name:"name",type:{name:"string"}},{name:"type",type:{name:"string"}},{name:"inputModeType",type:{name:"string"}},{name:"label",type:{name:"string"}},{name:"helperText",type:{name:"string"}},{name:"invalid",type:{name:"boolean"}},{name:"variant",type:{name:"string"}},{name:"maxLength",type:{name:"number"}},{name:"minLength",type:{name:"number"}},{name:"max",type:{name:"number"}},{name:"min",type:{name:"number"}},{name:"placeholder",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"readonly",type:{name:"boolean"}},{name:"required",type:{name:"boolean"}},{name:"counter",type:{name:"boolean"}},{name:"size",type:{name:"string"}},{name:"value",type:{name:"string"}},{name:"ariaDetailedId",type:{name:"string"}},{name:"inputId",type:{name:"string"}},{name:"inputAutofocus",type:{name:"boolean"}},{name:"inputAutocomplete",type:{name:"string"}},{name:"experimentalControlled",type:{name:"boolean"}},{name:"hideLabelVisually",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleInput",type:{names:["undefined"]}},{name:"scale-input",type:{names:["undefined"]}},{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}},{name:"scaleFocus",type:{names:["undefined"]}},{name:"scale-focus",type:{names:["undefined"]}},{name:"scaleBlur",type:{names:["undefined"]}},{name:"scale-blur",type:{names:["undefined"]}},{name:"scaleKeyDown",type:{names:["undefined"]}},{name:"scale-keydown",type:{names:["undefined"]}}],slots:[{name:"default"}]};var ICON="M16.471,8.321 L12.613594,0.502886112 L8.755,8.321 L0.126435258,9.57533801 L6.37,15.66 L4.89610548,24.2548735 L12.613,20.197 L20.3310826,24.2548735 L18.856,15.66 L25.1007528,9.57533801 L16.471,8.321 Z M9.41891527,9.23556376 L12.613,2.761 L15.8082728,9.23556376 L22.951,10.273 L17.7826928,15.3122039 L19.003,22.427 L12.613594,19.067774 L6.223,22.427 L7.44449521,15.3122039 L2.275,10.273 L9.41891527,9.23556376 Z",TextField_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleTextField:ScaleTextField},props:Object.assign({label:String},ScaleTextField.props),template:'\n  <div style="padding: 20px 0 20px 0;">\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :aria-detailed-id="ariaDetailedId"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      :hide-label-visually="hideLabelVisually"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n    </div>\n  ',methods:{scaleChange:Object(addon_actions_dist_esm.action)("scaleChange"),scaleFocus:Object(addon_actions_dist_esm.action)("scaleFocus"),scaleBlur:Object(addon_actions_dist_esm.action)("scaleBlur"),scaleKeyDown:Object(addon_actions_dist_esm.action)("scaleKeyDown")}}},TextField_stories_StorySectionsTemplate=function StorySectionsTemplate(args,_ref2){_ref2.argTypes;return{components:{ScaleTextField:ScaleTextField},props:Object.assign({label:String},ScaleTextField.props),template:'\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  ',methods:{scaleChange:Object(addon_actions_dist_esm.action)("scaleChange"),scaleFocus:Object(addon_actions_dist_esm.action)("scaleFocus"),scaleBlur:Object(addon_actions_dist_esm.action)("scaleBlur"),scaleKeyDown:Object(addon_actions_dist_esm.action)("scaleKeyDown")}}},layoutProps={ICON:ICON,Template:TextField_stories_Template,StorySectionsTemplate:TextField_stories_StorySectionsTemplate};function MDXContent(_ref3){var components=_ref3.components,props=_objectWithoutProperties(_ref3,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Text Field",component:ScaleTextField,argTypes:{resize:{control:{type:"select",options:["unset","none","vertical","horizontal"]}},type:{control:{type:"select",options:["email","hidden","number","password","tel","text","date","month","week","time","datetime-local"]}},inputModeType:{control:{type:"select",options:["none","text","decimal","numeric","tel","search","email","url"]}},size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Text Field"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{label:"An input"},mdxType:"Story"},TextField_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},"scale-text-field {\n  --transition: all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);\n  --radius: var(--telekom-radius-standard);\n  --border: var(--telekom-spacing-composition-space-01) solid\n    var(--telekom-color-ui-border-standard);\n  --border-error: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-danger-standard);\n  --border-success: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-success-standard);\n  --border-warning: var(--telekom-spacing-composition-space-02) solid\n    var(--telekom-color-functional-warning-standard);\n  --border-color-hover: var(--telekom-color-ui-border-hovered);\n  --border-color-focus: var(--telekom-color-ui-border-hovered);\n  --border-color-disabled: var(--telekom-color-ui-border-disabled);\n  --background-color-hover: var(--telekom-color-ui-state-fill-hovered);\n  --background-color-disabled: none;\n  --focus-outline: var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);\n  --height: 44px;\n  --spacing-x: var(--telekom-spacing-composition-space-05);\n  --color-disabled: var(--telekom-color-text-and-icon-disabled);\n  --background-disabled: none;\n  --border-color-readonly: var(--telekom-color-ui-border-disabled);\n  --background-readonly: var(--telekom-color-ui-disabled);\n\n  /* meta */\n  --font-weight-meta: var(--telekom-line-weight-bold);\n  --font-size-meta: var(--telekom-typography-font-size-small);\n  --line-height-meta: var(--telekom-typography-line-spacing-standard);\n  --spacing-y-meta: var(--telekom-spacing-composition-space-03);\n  --color-meta: var(--telekom-color-text-and-icon-standard);\n  --color-meta-error: var(--telekom-color-text-and-icon-functional-danger);\n\n  /* control */\n  --spacing-control: 1.125rem\n    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem\n    calc(0.75rem - var(--telekom-spacing-composition-space-01));\n  --transition-control: var(--transition);\n  --background-control: var(--telekom-color-ui-state-fill-standard);\n  --margin-bottom-control: var(--telekom-spacing-composition-space-03);\n\n  /* counter */\n  --transition-counter: var(--transition);\n  --color-counter-error: var(--color-meta-error);\n\n  /* helper-text */\n  --font-size-helper-text: var(--telekom-typography-font-size-small);\n  --line-height-helper-text: 1.35;\n  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);\n  --color-helper-text: var(\n    --telekom-color-text-and-icon-functional-informational\n  );\n  --color-helper-text-error: var(--color-meta-error);\n  --color-helper-text-success: var(\n    --telekom-color-text-and-icon-functional-success\n  );\n  --color-helper-text-warning: var(\n    --telekom-color-text-and-icon-functional-warning\n  );\n  --color-helper-text-neutral: var(--telekom-color-text-and-icon-additional);\n  --helper-text-icon-size: 11px;\n\n  /* placeholder */\n  --transition-placeholder: var(--transition);\n  --color-placeholder: var(--telekom-color-text-and-icon-additional);\n\n  /* label */\n  --color-label: var(--telekom-color-text-and-icon-additional);\n  --color-label-readonly: var(--telekom-color-text-and-icon-standard);\n  --z-index-label: var(--scl-z-index-10);\n  --transition-label: var(--transition);\n}\n")),Object(esm.b)("h2",{id:"text-with-events"},"Text With Events"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Text With Events",args:{label:"Text With Events"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-text-field id=\"text-field\" label=\"Text With Events\"></scale-text-field>\n\n<script>\n  const textField = document.getElementById('text-field');\n  textField.addEventListener('scale-change', (event) => {\n    /* ... */\n  });\n  textField.addEventListener('scale-blur', (event) => {\n    /* ... */\n  });\n  textField.addEventListener('scale-focus', (event) => {\n    /* ... */\n  });\n  textField.addEventListener('scale-keydown', (event) => {\n    /* ... */\n  });\n<\/script>\n")),Object(esm.b)("h2",{id:"placeholder"},"Placeholder"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Placeholder",args:{label:"Placeholder",placeholder:"this is the placeholder"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="Placeholder"\n  placeholder="this is the placeholder"\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"helper-text"},"Helper Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Helper Text",args:{label:"Helper Text",helperText:"Make sure to fill this"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="Helper Text"\n  helper-text="Make sure to fill this"\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"with-error"},"With Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Error",args:{label:"With Error",invalid:!0,helperText:"Something is wrong"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="With Error"\n  helper-text="Something is wrong"\n  invalid\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"with-warning"},"With Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Warning",args:{label:"With Warning",variant:"warning",helperText:"Something with warning"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="With Error"\n  helper-text="Something with warning"\n  variant="warning"\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"with-success"},"With Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Success",args:{label:"With Success",variant:"success",helperText:"Something is successful"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="With Success"\n  helper-text="Something is successful"\n  variant="success"\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{label:"Disabled",disabled:!0},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field label="Disabled" disabled></scale-text-field>\n')),Object(esm.b)("h2",{id:"read-only"},"Read Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Read Only",args:{label:"Read only",readonly:!0,value:"This cannot be changed"},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="Read only"\n  value="This cannot be changed"\n  readonly\n></scale-text-field>\n')),Object(esm.b)("h2",{id:"max-length-with-counter"},"Max Length With Counter"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Max Length With Counter",args:{label:"Max Length With Counter",maxLength:10,counter:!0},mdxType:"Story"},TextField_stories_StorySectionsTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-text-field\n  label="Max Length With Counter"\n  max-length="10"\n  counter\n></scale-text-field>\n')))}MDXContent.isMDXComponent=!0;var standard=TextField_stories_Template.bind({});standard.storyName="Standard",standard.args={label:"An input"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n  <div style="padding: 20px 0 20px 0;">\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :aria-detailed-id="ariaDetailedId"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      :hide-label-visually="hideLabelVisually"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n    </div>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var textWithEvents=TextField_stories_StorySectionsTemplate.bind({});textWithEvents.storyName="Text With Events",textWithEvents.args={label:"Text With Events"},textWithEvents.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var placeholder=TextField_stories_StorySectionsTemplate.bind({});placeholder.storyName="Placeholder",placeholder.args={label:"Placeholder",placeholder:"this is the placeholder"},placeholder.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var helperText=TextField_stories_StorySectionsTemplate.bind({});helperText.storyName="Helper Text",helperText.args={label:"Helper Text",helperText:"Make sure to fill this"},helperText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var withError=TextField_stories_StorySectionsTemplate.bind({});withError.storyName="With Error",withError.args={label:"With Error",invalid:!0,helperText:"Something is wrong"},withError.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var withWarning=TextField_stories_StorySectionsTemplate.bind({});withWarning.storyName="With Warning",withWarning.args={label:"With Warning",variant:"warning",helperText:"Something with warning"},withWarning.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var withSuccess=TextField_stories_StorySectionsTemplate.bind({});withSuccess.storyName="With Success",withSuccess.args={label:"With Success",variant:"success",helperText:"Something is successful"},withSuccess.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var disabled=TextField_stories_StorySectionsTemplate.bind({});disabled.storyName="Disabled",disabled.args={label:"Disabled",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var readOnly=TextField_stories_StorySectionsTemplate.bind({});readOnly.storyName="Read Only",readOnly.args={label:"Read only",readonly:!0,value:"This cannot be changed"},readOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var maxLengthWithCounter=TextField_stories_StorySectionsTemplate.bind({});maxLengthWithCounter.storyName="Max Length With Counter",maxLengthWithCounter.args={label:"Max Length With Counter",maxLength:10,counter:!0},maxLengthWithCounter.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTextField\n  },\n  props: {\n    label: String,\n    ...ScaleTextField.props\n  },\n  template: `\n    <scale-text-field\n      :name="name"\n      :type="type"\n      :input-mode-type="inputModeType"\n      :label="label"\n      :helper-text="helperText"\n      :invalid="invalid"\n      :variant="variant"\n      :max-length="maxLength"\n      :min-length="minLength"\n      :max="max"\n      :min="min"\n      :placeholder="placeholder"\n      :disabled="disabled"\n      :readonly="readonly"\n      :required="required"\n      :counter="counter"\n      :value="value"\n      :input-id="inputId"\n      :input-autofocus="inputAutofocus"\n      :input-autocomplete="inputAutocomplete"\n      :experimental-controlled="experimentalControlled"\n      @scaleChange="scaleChange"\n      @scaleFocus="scaleFocus"\n      @scaleBlur="scaleBlur"\n      @scaleKeyDown="scaleKeyDown"\n    ></scale-text-field>\n  `,\n  methods: {\n    scaleChange: action(\'scaleChange\'),\n    scaleFocus: action(\'scaleFocus\'),\n    scaleBlur: action(\'scaleBlur\'),\n    scaleKeyDown: action(\'scaleKeyDown\')\n  }\n})'}};var componentMeta={title:"Components/Text Field",component:ScaleTextField,argTypes:{resize:{control:{type:"select",options:["unset","none","vertical","horizontal"]}},type:{control:{type:"select",options:["email","hidden","number","password","tel","text","date","month","week","time","datetime-local"]}},inputModeType:{control:{type:"select",options:["none","text","decimal","numeric","tel","search","email","url"]}},size:{table:{type:{summary:"string"}},description:"(optional) DEPRECATED - css overwrite should replace size",control:{type:null}}},includeStories:["standard","textWithEvents","placeholder","helperText","withError","withWarning","withSuccess","disabled","readOnly","maxLengthWithCounter"]},mdxStoryNameToKey={Standard:"standard","Text With Events":"textWithEvents",Placeholder:"placeholder","Helper Text":"helperText","With Error":"withError","With Warning":"withWarning","With Success":"withSuccess",Disabled:"disabled","Read Only":"readOnly","Max Length With Counter":"maxLengthWithCounter"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/components/tooltip/Tooltip.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Tooltip_stories_Template})),__webpack_require__.d(__webpack_exports__,"SlotTemplate",(function(){return SlotTemplate})),__webpack_require__.d(__webpack_exports__,"FocusTemplate",(function(){return FocusTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"placementLeft",(function(){return placementLeft})),__webpack_require__.d(__webpack_exports__,"placementRight",(function(){return placementRight})),__webpack_require__.d(__webpack_exports__,"placementBelow",(function(){return placementBelow})),__webpack_require__.d(__webpack_exports__,"trigger",(function(){return trigger})),__webpack_require__.d(__webpack_exports__,"slot",(function(){return slot})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),tooltip_ScaleTooltipvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{content:{type:String},placement:{type:String},disabled:{type:Boolean},distance:{type:Number},opened:{type:Boolean},trigger:{type:String},flip:{type:Boolean},styles:String},methods:{"scale-show":function scaleShow($event){action("scale-show"),this.$emit("scale-show",$event)},"scale-before-show":function scaleBeforeShow($event){action("scale-before-show"),this.$emit("scale-before-show",$event)},"scale-before-hide":function scaleBeforeHide($event){action("scale-before-hide"),this.$emit("scale-before-hide",$event)},"scale-hide":function scaleHide($event){action("scale-hide"),this.$emit("scale-hide",$event)}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(tooltip_ScaleTooltipvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",{staticStyle:{padding:"30px 30px 30px 70px"}},[_c("scale-tooltip",{attrs:{content:_vm.content,placement:_vm.placement,disabled:_vm.disabled,distance:_vm.distance,opened:_vm.opened,trigger:_vm.trigger,flip:_vm.flip}},[_vm._t("content"),_vm._v(" "),_c("scale-button",{attrs:{disabled:_vm.disabled}},[_vm._v("Hover me")])],2)],1)}),[],!1,null,null,null).exports;var ScaleTooltip=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleTooltip",description:"",tags:{},props:[{name:"content",type:{name:"string"}},{name:"placement",type:{name:"string"}},{name:"disabled",type:{name:"boolean"}},{name:"distance",type:{name:"number"}},{name:"opened",type:{name:"boolean"}},{name:"trigger",type:{name:"string"}},{name:"flip",type:{name:"boolean"}},{name:"styles",type:{name:"string"}}],events:[{name:"scale-show",type:{names:["undefined"]}},{name:"scale-before-show",type:{names:["undefined"]}},{name:"scale-before-hide",type:{names:["undefined"]}},{name:"scale-hide",type:{names:["undefined"]}}],slots:[{name:"content"}]};var Tooltip_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleTooltip:ScaleTooltip},props:Object.assign({},ScaleTooltip.props),template:'\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  '}},SlotTemplate=function SlotTemplate(args,_ref2){_ref2.argTypes;return{template:'\n    <div style="padding: 30px 30px 30px 70px">\n      <scale-tooltip trigger="click">\n        <span slot="content">\n          I\'m a HTML-tooltip\n          <scale-link href="https://github.com/telekom/scale"\n          >with a link</scale-link\n          >\n        </span>\n        <scale-button>Click me</scale-button>\n      </scale-tooltip>\n    </div>\n  '}},FocusTemplate=function FocusTemplate(args,_ref3){_ref3.argTypes;return{template:'\n    <div style="padding: 30px 30px 30px 70px">\n      <scale-tooltip trigger="focus" content="Tooltip">\n        <scale-button>Focus me</scale-button>\n      </scale-tooltip>\n    </div>\n  '}},layoutProps={Template:Tooltip_stories_Template,SlotTemplate:SlotTemplate,FocusTemplate:FocusTemplate};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Components/Tooltip",component:ScaleTooltip,argTypes:{content:{control:{type:"text"}},placement:{control:{defaultValue:"top",type:"select",options:["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]}},disabled:{defaultValue:!1,control:{type:"boolean"}},distance:{control:{type:"text"}},opened:{defaultValue:!1,control:{type:"boolean"}},trigger:{defaultValue:"hover focus",control:{type:"text"}},flip:{defaultValue:!0,control:{type:"boolean"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Tooltip"),Object(esm.b)("img",{src:"assets/aa.png",alt:"Accessible AA"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{content:"Tooltip"},mdxType:"Story"},Tooltip_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip">\n  <scale-button>Hover me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  /* tooltip */\n  --radius: var(--telekom-radius-small);\n  --background: var(--telekom-color-background-surface-highlight);\n  --color: var(--telekom-color-text-and-icon-white-standard);\n  --font-weight: var(--telekom-typography-font-weight-regular);\n  --font-size: var(--telekom-typography-font-size-body);\n  --line-height: var(--telekom-typography-line-spacing-standard);\n  --spacing: var(--telekom-spacing-composition-space-02)\n    var(--telekom-spacing-composition-space-04);\n  --width: auto;\n\n  /* arrow */\n  --arrow-size: 12px;\n\n  /* tooltip hide */\n  --transition-delay-hide: var(--telekom-motion-duration-instant);\n  --transition-duration-hide: var(--telekom-motion-duration-immediate);\n  --transition-timing-function-hide: var(--telekom-motion-easing-standard);\n\n  /* tooltip show */\n  --transition-duration-show: var(--telekom-motion-duration-immediate);\n  --transition-timing-function-show: var(--telekom-motion-easing-standard);\n  --z-index: var(--scl-z-index-70);  \n}\n")),Object(esm.b)("h2",{id:"placement"},"Placement"),Object(esm.b)("h3",{id:"left"},"Left"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Placement-Left",args:{content:"Tooltip",placement:"left"},mdxType:"Story"},Tooltip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip" placement="left">\n  <scale-button>Hover me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h3",{id:"right"},"Right"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Placement-Right",args:{content:"Tooltip",placement:"right"},mdxType:"Story"},Tooltip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip" placement="right">\n  <scale-button>Hover me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h3",{id:"below"},"Below"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Placement-Below",args:{content:"Tooltip",placement:"bottom"},mdxType:"Story"},Tooltip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip" placement="bottom">\n  <scale-button>Hover me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h2",{id:"trigger"},"Trigger"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Trigger",args:{content:"Tooltip",trigger:"focus"},mdxType:"Story"},FocusTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip" trigger="focus">\n  <scale-button>Focus me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h2",{id:"slot"},"Slot"),Object(esm.b)("h3",{id:"link-example"},"Link Example"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Slot",args:{},mdxType:"Story"},SlotTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip trigger="click">\n  <span slot="content">\n    I\'m a HTML-tooltip\n    <scale-link href="https://github.com/telekom/scale">with a link</scale-link>\n  </span>\n  <scale-button>Click me</scale-button>\n</scale-tooltip>\n')),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{content:"Tooltip",disabled:!0},mdxType:"Story"},Tooltip_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-tooltip content="Tooltip" disabled="true">\n  <scale-button disabled>Hover me</scale-button>\n</scale-tooltip>\n')))}MDXContent.isMDXComponent=!0;var standard=Tooltip_stories_Template.bind({});standard.storyName="Standard",standard.args={content:"Tooltip"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTooltip\n  },\n  props: { ...ScaleTooltip.props\n  },\n  template: `\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  `\n})'}};var placementLeft=Tooltip_stories_Template.bind({});placementLeft.storyName="Placement-Left",placementLeft.args={content:"Tooltip",placement:"left"},placementLeft.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTooltip\n  },\n  props: { ...ScaleTooltip.props\n  },\n  template: `\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  `\n})'}};var placementRight=Tooltip_stories_Template.bind({});placementRight.storyName="Placement-Right",placementRight.args={content:"Tooltip",placement:"right"},placementRight.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTooltip\n  },\n  props: { ...ScaleTooltip.props\n  },\n  template: `\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  `\n})'}};var placementBelow=Tooltip_stories_Template.bind({});placementBelow.storyName="Placement-Below",placementBelow.args={content:"Tooltip",placement:"bottom"},placementBelow.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTooltip\n  },\n  props: { ...ScaleTooltip.props\n  },\n  template: `\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  `\n})'}};var trigger=FocusTemplate.bind({});trigger.storyName="Trigger",trigger.args={content:"Tooltip",trigger:"focus"},trigger.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  template: `\n    <div style="padding: 30px 30px 30px 70px">\n      <scale-tooltip trigger="focus" content="Tooltip">\n        <scale-button>Focus me</scale-button>\n      </scale-tooltip>\n    </div>\n  `\n})'}};var slot=SlotTemplate.bind({});slot.storyName="Slot",slot.args={},slot.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  template: `\n    <div style="padding: 30px 30px 30px 70px">\n      <scale-tooltip trigger="click">\n        <span slot="content">\n          I\'m a HTML-tooltip\n          <scale-link href="https://github.com/telekom/scale"\n          >with a link</scale-link\n          >\n        </span>\n        <scale-button>Click me</scale-button>\n      </scale-tooltip>\n    </div>\n  `\n})'}};var disabled=Tooltip_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={content:"Tooltip",disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleTooltip\n  },\n  props: { ...ScaleTooltip.props\n  },\n  template: `\n    <scale-tooltip\n      :content="content"\n      :placement="placement"\n      :disabled="disabled"\n      :distance="distance"\n      :opened="opened"\n      :trigger="trigger"\n      :flip="flip"\n      :styles="styles"\n    >\n    <scale-button></scale-button>\n    </scale-tooltip>\n  `\n})'}};var componentMeta={title:"Components/Tooltip",component:ScaleTooltip,argTypes:{content:{control:{type:"text"}},placement:{control:{defaultValue:"top",type:"select",options:["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]}},disabled:{defaultValue:!1,control:{type:"boolean"}},distance:{control:{type:"text"}},opened:{defaultValue:!1,control:{type:"boolean"}},trigger:{defaultValue:"hover focus",control:{type:"text"}},flip:{defaultValue:!0,control:{type:"boolean"}}},includeStories:["standard","placementLeft","placementRight","placementBelow","trigger","slot","disabled"]},mdxStoryNameToKey={Standard:"standard","Placement-Left":"placementLeft","Placement-Right":"placementRight","Placement-Below":"placementBelow",Trigger:"trigger",Slot:"slot",Disabled:"disabled"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/contact/Contributing.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Contributing_en='# Contributing to Scale\n\nScale enables the Telekom developer community to share their skills. Whether you fix a bug, improve usability or build entire new components: Contribution is what makes Scale an invaluable asset to the Telekom product ecosystem.\n\n## Open Source, Open Beta\n\nOur open-source design system is currently an open beta and it is growing and evolving every day.\n\n## How You Can Contribute\n\n- Report an issue in our [repository](https://github.com/telekom/scale/issues)\n- Fix a bug and send a [pull request](https://github.com/telekom/scale/pulls)\n- If you want to contribute design work and new components, send an e-mail to <a href="mailto:contact@brand-design.telekom.com">contact@brand-design.telekom.com</a>\n\nPlease refer to the [Contribution Guidelines](https://github.com/telekom/scale/blob/master/CONTRIBUTING.md) on GitHub and follow the [Code of Conduct](https://github.com/telekom/scale/blob/master/CODE_OF_CONDUCT.md).\n\n## Development Workflow for Contributions\n\n### Pull Requests\n\nWhen opening a new MR it is advised to branch off the latest `master` branch. We loosely follow the `Git flow` standards for branch naming e.g. `feat|feature`, `fix`, `chore`, `test` etc. All pull requests are then merged into `master` and released through the `CI` pipeline via the `release` branch.\n\n### Tests\n\nWhen developing new features or components it is required to provide `unit tests` and `end to end` tests if appropriate and aim at 100% test coverage. In addition we use `screenshot tests` for components via `jest-image-snapshot`. Stencil uses `Jest` as the testing framework, please take a look at the existing components as an example or visit the official documentation:\n\n- https://stenciljs.com/docs/testing-overview\n- https://jestjs.io/\n\n### Tooling\n\nWe strongly recommend you use the `VSCode text editor` since most of our code is written in `Typescript` and it offers amazing support for the language.\n',Contributing_de='# An Scale mitwirken\n\nScale ermöglicht es der Telekom Entwickler-Community ihre Fähigkeiten zu teilen. Ob du einen Fehler behebst, die Benutzbarkeit verbesserst oder neue Komponenten entwickelst: Diese Beiträge machen Scale zu einem wertvollen Asset im Produkt-Ökosystem der Telekom.\n\n## Open-source, Open Beta\n\nUnser open-source Designsystem ist derzeit eine Open Beta und entwickelt sich stetig weiter.\n\n## Wie du zu Scale beiträgst\n\n- Sende ein Issue in unserem [Repository](https://github.com/telekom/scale/issues)\n- Behebe einen Fehler und sende uns einen [Pull request](https://github.com/telekom/scale/pulls)\n- Wenn du Design-Verbesserungen und neue Komponenten beitragen willst, wende Dich an <a href="mailto:contact@brand-design.telekom.com">contact@brand-design.telekom.com</a>\n\nBeachte die [Contribution Guidelines](https://github.com/telekom/scale/blob/master/CONTRIBUTING.md) und halte Dich an unseren [Code of Conduct](https://github.com/telekom/scale/blob/master/CODE_OF_CONDUCT.md).\n\n## Unser Arbeits-Ablauf für Beiträge\n\n### Pull Requests\n\nWenn du einen neuen Pull Request öffnest, starte mit dem aktuellen `master` Branch. Wir folgen wenn möglich den `Git flow` Standards für Benamung: z.B. `feat|feature`, `fix`, `chore`, `test` etc. Alle Pull-Requests werden in `master` gemerged und durch die `CI` Pipeline im `release` -Branch veröffentlicht.\n\n### Tests\n\nWenn neue Features und Komponenten entwickelt werden, benötigen wir `unit tests` und `end to end` Tests. Wir zielen auf 100% Test-Abdeckung. Zusätzlich nutzen wir `screenshot tests` für Komponenten in `jest-image-snapshot`. Stencil nutz `Jest` als Test-Framework. Bitte sieh Dir die existierenden Komponenten als Beispiele an und lies die offizielle Dokumentation:\n\n- https://stenciljs.com/docs/testing-overview\n- https://jestjs.io/\n\n### Tooling\n\nWir empfehlen die Nutzung des `VSCode text editor` da er `Typescript` optimal unterstützt.\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Contact/Contributing to Scale",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Contributing_en:Contributing_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Contact/Contributing to Scale",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Contributing_en:Contributing_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/contact/Feedback.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Feedback_en='# Your Feedback to Scale\n\nThe Scale design system is always evolving. To be better we need your feedback:\n\n## How to Provide Feedback\n\n- Leave a comment on [our repository](https://github.com/telekom/scale)\n- Open an issue on [our repository](https://github.com/telekom/scale/issues)\n- For feedback about design and design requirements, send an e-mail to <a href="mailto:contact@brand-design.telekom.com">contact@brand-design.telekom.com</a>\n',Feedback_de='# Dein Feedback zu Scale\n\nDas Scale Design System entwickelt sich ständig weiter. Um uns ständig zu verbessern, brauchen wir dein Feedback:\n\n## Wie gebe ich Feedback zu Scale?\n\n- Hinterlasse Kommentare zu [unserem Repository](https://github.com/telekom/scale)\n- Eröffne ein Issue in [unserem Repository](https://github.com/telekom/scale/issues)\n- Für Feedback zu Design und Design-Anforderungen, sende eine E-Mail an <a href="mailto:contact@brand-design.telekom.com">contact@brand-design.telekom.com</a>\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Contact/Your Feedback",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Feedback_en:Feedback_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Contact/Your Feedback",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Feedback_en:Feedback_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/brand-header-navigation/BrandHeader.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"standard",(function(){return BrandHeader_stories_standard})),__webpack_require__.d(__webpack_exports__,"customMainNavigation",(function(){return BrandHeader_stories_customMainNavigation})),__webpack_require__.d(__webpack_exports__,"customIconNavigation",(function(){return BrandHeader_stories_customIconNavigation})),__webpack_require__.d(__webpack_exports__,"customSectorNavigation",(function(){return BrandHeader_stories_customSectorNavigation})),__webpack_require__.d(__webpack_exports__,"customAddonNavigation",(function(){return BrandHeader_stories_customAddonNavigation})),__webpack_require__.d(__webpack_exports__,"customLogo",(function(){return BrandHeader_stories_customLogo})),__webpack_require__.d(__webpack_exports__,"customMobileMenu",(function(){return BrandHeader_stories_customMobileMenu})),__webpack_require__.d(__webpack_exports__,"standaloneHeader",(function(){return BrandHeader_stories_standaloneHeader}));__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),fixtures=__webpack_require__("./stories/deprecated/brand-header-navigation/fixtures.js"),brand_header_navigation_AppShellvue_type_script_lang_js_={props:{logoTitle:String,logoHideTitle:Boolean,logoHref:String,logoAriaDescribedBy:String,logoClick:Function,portalName:String,claimLang:String,mainNavigation:String,iconNavigation:String,sectorNavigation:String,userNavigation:String,addonNavigation:String,activeRouteId:String,activeSectorId:String,userMenuAriaLabel:String}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(brand_header_navigation_AppShellvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-app-shell",{attrs:{"logo-click":_vm.logoClick,"logo-title":_vm.logoTitle,"logo-hide-title":_vm.logoHideTitle,"logo-href":_vm.logoHref,"logo-aria-described-by":_vm.logoAriaDescribedBy,"portal-name":_vm.portalName,"claim-lang":_vm.claimLang,"main-navigation":_vm.mainNavigation,"icon-navigation":_vm.iconNavigation,"sector-navigation":_vm.sectorNavigation,"addon-navigation":_vm.addonNavigation,"user-navigation":_vm.userNavigation,"active-route-id":_vm.activeRouteId,"active-sector-id":_vm.activeRouteId,"user-menu-aria-label":_vm.userMenuAriaLabel}},[_vm._t("default"),_vm._v(" "),_vm._t("header"),_vm._v(" "),_vm._t("footer")],2)}),[],!1,null,null,null).exports;var AppShell=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"AppShell",description:"",tags:{},props:[{name:"logoTitle",type:{name:"string"}},{name:"logoHideTitle",type:{name:"boolean"}},{name:"logoHref",type:{name:"string"}},{name:"logoAriaDescribedBy",type:{name:"string"}},{name:"logoClick",type:{name:"func"}},{name:"portalName",type:{name:"string"}},{name:"claimLang",type:{name:"string"}},{name:"mainNavigation",type:{name:"string"}},{name:"iconNavigation",type:{name:"string"}},{name:"sectorNavigation",type:{name:"string"}},{name:"userNavigation",type:{name:"string"}},{name:"addonNavigation",type:{name:"string"}},{name:"activeRouteId",type:{name:"string"}},{name:"activeSectorId",type:{name:"string"}},{name:"userMenuAriaLabel",type:{name:"string"}}],slots:[{name:"default"},{name:"header"},{name:"footer"}]};var setColorMode=function setColorMode(){try{document.body.dataset.mode=JSON.parse(window.localStorage.getItem("persistedColorMode"))}catch(e){}},layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Brand Header & Navigation",component:AppShell,argTypes:{activeRouteId:{control:{type:"text"}},activeSectorId:{control:{type:"text"}},logoTitle:{control:{type:"text"}},logoHideTitle:{control:{type:"boolean"}},logoHref:{control:{type:"text"}},logoAriaDescribedBy:{control:{type:"text"}},logoClick:{control:{type:"disabled"},description:"logo click event handler custom function"},mainNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},iconNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},sectorNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},addonNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},userNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"},portalName:{control:{type:"text"},description:"optionally replaces the sectorNavigation with a single bold title"},claimLang:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_lat","mk_kyr","ro","sk"]}},userMenuAriaLabel:{control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Brand Header & Navigation"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("div",{class:"Notification"},Object(esm.b)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(esm.b)("g",{fill:"currentColor"},Object(esm.b)("g",null,Object(esm.b)("path",{"fill-rule":"evenodd",d:"M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"})))),Object(esm.b)("span",null,"There is a newer version of the Brand Header available: ",Object(esm.b)("a",{href:"?path=/docs/components-telekom-brand-header-navigation--standard-header"},"Telekom Brand Header & Navigation"))),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),userNavigation:JSON.stringify(fixtures.f),activeRouteId:"Third Level 24",activeSectorId:"Personal38",logoTitle:"Custom Logo Title",logoHref:"#custom-href"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-shell claim-lang="de" logo-title="App Name" logo-href="/">\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll to test header behavior\n  </div>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll more to test header behavior\n  </div>\n</scale-app-shell>\n')),Object(esm.b)("h2",{id:"using-scale-app-shell-over-scale-header"},"Using scale-app-shell over scale-header"),Object(esm.b)("p",null,"Using scale-app-shell provides the page with the common region ",Object(esm.b)("inlineCode",{parentName:"p"},"content"),", which helps you fulfill accessibility requirements. The scale-app-shell component includes both the Header and optionally the ",Object(esm.b)("a",{href:"?path=/docs/components-footer--standard"},"Footer")," component. However, there is a story ",Object(esm.b)("a",{href:"?path=/docs/components-brand-header-navigation--standalone-header"},"demonstrating the standalone mode of the Header")," for special cases."),Object(esm.b)("h2",{id:"dropdown-navigation-beta"},"Dropdown Navigation Beta"),Object(esm.b)("p",null,"You can find code examples where the Flyout Menu Beta component is implemented in the ",Object(esm.b)("a",{href:"?path=/story/beta-components-flyout-menu--brand-header-primary-navigation"},"Primary navigation")," and the ",Object(esm.b)("a",{href:"?path=/story/beta-components-flyout-menu--brand-header-user-menu"},"User menu"),"."),Object(esm.b)("h2",{id:"custom-main-navigation"},"Custom Main Navigation"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Main Navigation",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,methods:{handleOpen:function handleOpen(){this.$refs.header.isMegaMenuVisible=!0,this.$refs.navMainWithMegaMenu.isMegaMenuVisible=!0,this.$refs.header.megaMenuVisible=!0,this.$refs.navMainWithMegaMenu.megaMenuVisible=!0},handleClose:function handleClose(){this.$refs.header.isMegaMenuVisible=!1,this.$refs.navMainWithMegaMenu.isMegaMenuVisible=!1,this.$refs.header.megaMenuVisible=!1,this.$refs.navMainWithMegaMenu.megaMenuVisible=!1}},template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                ref="header"\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n                @keydown="$event.key === \'Escape\' && handleClose()"\n            >\n                <div slot="menu-main">\n                  <scale-nav-main name="Custom Item #1"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #2" id="nav-main-with-mega-menu" ref="navMainWithMegaMenu" @mouseenter="handleOpen" @mouseleave="handleClose" @keydown="$event.key === \'Enter\' && handleOpen()">\n                    <app-mega-menu>\n                      <div slot="custom-body"><pre>custom-body</pre></div>\n                    </app-mega-menu></scale-nav-main>\n                  <scale-nav-main active name="Custom Item #3"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #4"></scale-nav-main>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<body>\n  <scale-app-shell>\n    <scale-app-header slot="header" id="header">\n      <div slot="menu-main">\n        <scale-nav-main name="Custom Item #1"></scale-nav-main>\n        <scale-nav-main name="Custom Item #2" id="nav-main-with-mega-menu">\n          <app-mega-menu>\n            <div slot="custom-body"><pre>custom-body</pre></div>\n          </app-mega-menu>\n        </scale-nav-main>\n        \x3c!--\n          Deprecated:\n          <scale-nav-main is-active name="Custom Item #3"></scale-nav-main>\n        --\x3e\n        <scale-nav-main active name="Custom Item #3"></scale-nav-main>\n        <scale-nav-main name="Custom Item #4"></scale-nav-main>\n      </div>\n    </scale-app-header>\n    <div style="height: 800px; padding: 48px 0;">\n      Scroll to test header behavior\n    </div>\n    <div style="height: 800px; padding: 48px 0;">\n      Scroll more to test header behavior\n    </div>\n  </scale-app-shell>\n  <script>\n    const header = document.getElementById(\'header\');\n    header.mainNavigation = [\n      /* ... */\n    ];\n    header.iconNavigation = [\n      /* ... */\n    ];\n    header.addonNavigation = [\n      /* ... */\n    ];\n    header.sectionNavigation = [\n      /* ... */\n    ];\n    const navMainWithMegaMenu = document.getElementById(\n      \'nav-main-with-mega-menu\'\n    );\n    header.addEventListener(\'keydown\', function (event) {\n      if (event.key === \'Escape\') {\n        // Deprecated\n        navMainWithMegaMenu.isMegaMenuVisible = false;\n        // Deprecated\n        header.isMegaMenuVisible = false;\n        navMainWithMegaMenu.megaMenuVisible = false;\n        header.megaMenuVisible = false;\n      }\n    });\n    navMainWithMegaMenu.addEventListener(\'mouseenter\', function () {\n      // Deprecated\n      navMainWithMegaMenu.isMegaMenuVisible = true;\n      // Deprecated\n      header.isMegaMenuVisible = true;\n      navMainWithMegaMenu.megaMenuVisible = true;\n      header.megaMenuVisible = true;\n    });\n    navMainWithMegaMenu.addEventListener(\'mouseleave\', function () {\n      // Deprecated\n      navMainWithMegaMenu.isMegaMenuVisible = false;\n      // Deprecated\n      header.isMegaMenuVisible = false;\n      navMainWithMegaMenu.megaMenuVisible = false;\n      header.megaMenuVisible = false;\n    });\n    navMainWithMegaMenu.addEventListener(\'keydown\', function (event) {\n      if (event.key === \'Enter\') {\n        // Deprecated\n        navMainWithMegaMenu.isMegaMenuVisible = true;\n        // Deprecated\n        header.isMegaMenuVisible = true;\n        navMainWithMegaMenu.megaMenuVisible = true;\n        header.megaMenuVisible = true;\n      }\n    });\n  <\/script>\n</body>\n')),Object(esm.b)("h2",{id:"custom-icon-navigation"},"Custom Icon Navigation"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Icon Navigation",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-icon">\n                  <scale-nav-icon icon="action-mute">\n                    Mute\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-play">\n                    Play\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-pause">\n                    Pause\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-fast-forward">\n                    Forward\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-favorite">\n                    Favorite\n                  </scale-nav-icon>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-shell>\n  <scale-app-header slot="header" id="header">\n    <div slot="menu-icon">\n      <scale-nav-icon icon="action-mute"> Mute </scale-nav-icon>\n      <scale-nav-icon icon="action-play"> Play </scale-nav-icon>\n      <scale-nav-icon icon="action-pause"> Pause </scale-nav-icon>\n      <scale-nav-icon icon="action-fast-forward"> Forward </scale-nav-icon>\n      <scale-nav-icon icon="action-favorite"> Favorite </scale-nav-icon>\n    </div>\n  </scale-app-header>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll to test header behavior\n  </div>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll more to test header behavior\n  </div>\n</scale-app-shell>\n')),Object(esm.b)("h2",{id:"custom-sector-navigation"},"Custom Sector Navigation"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Sector Navigation",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-sector">\n                  <scale-nav-segment active="true" href="#custom-sector-1">\n                    Custom Sector #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-sector-2">\n                    Custom Sector #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-shell>\n  <scale-app-header slot="header" id="header">\n    <div slot="menu-sector">\n      \x3c!--\n        Deprecated:\n        <scale-nav-segment\n        is-active="true"\n        ...\n      >\n      --\x3e\n      <scale-nav-segment\n        active="true"\n        href="#custom-sector-1"\n        onclick="handleClick()"\n      >\n        Custom Sector #1\n      </scale-nav-segment>\n      <scale-nav-segment href="#custom-sector-2" onclick="handleClick()">\n        Custom Sector #2\n      </scale-nav-segment>\n    </div>\n  </scale-app-header>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll to test header behavior\n  </div>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll more to test header behavior\n  </div>\n</scale-app-shell>\n\n<script>\n  function handleClick() {\n    /* ... */\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"custom-addon-navigation"},"Custom Addon Navigation"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Addon Navigation",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-addon">\n                  <scale-nav-segment active="true" href="#custom-addon-1">\n                    Custom Addon #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-addon-2">\n                    Custom Addon #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-shell>\n  <scale-app-header slot="header" id="header">\n    <div slot="menu-addon">\n      \x3c!--\n        Deprecated:\n        <scale-nav-segment\n        is-active="true"\n        ...\n      >\n      --\x3e\n      <scale-nav-segment\n        active="true"\n        href="#custom-addon-1"\n        onclick="handleClick()"\n      >\n        Custom Addon #1\n      </scale-nav-segment>\n      <scale-nav-segment href="#custom-addon-2" onclick="handleClick()">\n        Custom Addon #2\n      </scale-nav-segment>\n    </div>\n  </scale-app-header>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll to test header behavior\n  </div>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll more to test header behavior\n  </div>\n</scale-app-shell>\n\n<script>\n  function handleClick() {\n    /* ... */\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"custom-logo"},"Custom Logo"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Logo",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :claim-lang="claimLang"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n                <div slot="logo">\n                    <scale-logo transparent variant="white" language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n                <div slot="logo-inverse">\n                    <scale-logo transparent language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-shell>\n  <scale-app-header slot="header" id="header">\n    <div slot="logo">\n      <scale-logo\n        transparent\n        variant="white"\n        language="en"\n        href="#custom"\n        logo-title="Custom"\n        styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"\n      ></scale-logo>\n    </div>\n    <div slot="logo-inverse">\n      <scale-logo\n        transparent\n        language=""\n        href="#custom"\n        logo-title="Custom"\n        styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"\n      ></scale-logo>\n    </div>\n  </scale-app-header>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll to test header behavior\n  </div>\n  <div style="height: 800px; padding: 48px 0;">\n    Scroll more to test header behavior\n  </div>\n</scale-app-shell>\n\n<script>\n  function handleClick() {\n    /* ... */\n  }\n<\/script>\n')),Object(esm.b)("h2",{id:"custom-mobile-menu"},"Custom Mobile Menu"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Mobile Menu",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                ref="header"\n                :main-navigation="mainNavigation"\n                :claim-lang="claimLang"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n              <div slot="menu-mobile"><pre>menu-mobile</pre></div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      ',mounted:function mounted(){var _this=this;document.body.addEventListener("keydown",(function(event){["Escape","Esc"].includes(event.key)&&(event.preventDefault(),_this.$refs.header&&_this.$refs.header.dispatchEvent(new Event("closeMenu")))}))}}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<body>\n  <scale-app-shell>\n    <scale-app-header slot=\"header\" id=\"header\">\n      <div slot=\"menu-mobile\"><pre>menu-mobile</pre></div>\n    </scale-app-header>\n    <div style=\"height: 800px; padding: 48px 0;\">\n      Scroll to test header behavior\n    </div>\n    <div style=\"height: 800px; padding: 48px 0;\">\n      Scroll more to test header behavior\n    </div>\n  </scale-app-shell>\n  <script>\n    const header = document.getElementById('header');\n    document.body.addEventListener('keydown', function (event) {\n      if (['Escape', 'Esc'].includes(event.key)) {\n        event.preventDefault();\n        header.dispatchEvent(new Event('closeMenu'));\n      }\n    });\n  <\/script>\n</body>\n")),Object(esm.b)("h2",{id:"standalone-header"},"Standalone Header"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standalone Header",inline:!1,height:500,args:{portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38",logoTitle:"Custom Logo Title",logoHref:"#custom-href"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-header\n            :logo-title="logoTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n          </scale-app-header>\n        </div>\n      '}}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-header claim-lang="en" logo-title="App Name" logo-href="/">\n</scale-app-header>\n')))}MDXContent.isMDXComponent=!0;var BrandHeader_stories_standard=function standard(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_standard.storyName="Standard",BrandHeader_stories_standard.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),userNavigation:JSON.stringify(fixtures.f),activeRouteId:"Third Level 24",activeSectorId:"Personal38",logoTitle:"Custom Logo Title",logoHref:"#custom-href"},BrandHeader_stories_standard.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell\n            :logo-title="logoTitle"\n            :logo-hide-title="logoHideTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :user-navigation="userNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customMainNavigation=function customMainNavigation(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,methods:{handleOpen:function handleOpen(){this.$refs.header.isMegaMenuVisible=!0,this.$refs.navMainWithMegaMenu.isMegaMenuVisible=!0,this.$refs.header.megaMenuVisible=!0,this.$refs.navMainWithMegaMenu.megaMenuVisible=!0},handleClose:function handleClose(){this.$refs.header.isMegaMenuVisible=!1,this.$refs.navMainWithMegaMenu.isMegaMenuVisible=!1,this.$refs.header.megaMenuVisible=!1,this.$refs.navMainWithMegaMenu.megaMenuVisible=!1}},template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                ref="header"\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n                @keydown="$event.key === \'Escape\' && handleClose()"\n            >\n                <div slot="menu-main">\n                  <scale-nav-main name="Custom Item #1"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #2" id="nav-main-with-mega-menu" ref="navMainWithMegaMenu" @mouseenter="handleOpen" @mouseleave="handleClose" @keydown="$event.key === \'Enter\' && handleOpen()">\n                    <app-mega-menu>\n                      <div slot="custom-body"><pre>custom-body</pre></div>\n                    </app-mega-menu></scale-nav-main>\n                  <scale-nav-main active name="Custom Item #3"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #4"></scale-nav-main>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_customMainNavigation.storyName="Custom Main Navigation",BrandHeader_stories_customMainNavigation.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customMainNavigation.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  methods: {\n    handleOpen: function () {\n      // Deprecated\n      this.$refs.header.isMegaMenuVisible = true; // Deprecated\n\n      this.$refs.navMainWithMegaMenu.isMegaMenuVisible = true;\n      this.$refs.header.megaMenuVisible = true;\n      this.$refs.navMainWithMegaMenu.megaMenuVisible = true;\n    },\n    handleClose: function () {\n      // Deprecated\n      this.$refs.header.isMegaMenuVisible = false; // Deprecated\n\n      this.$refs.navMainWithMegaMenu.isMegaMenuVisible = false;\n      this.$refs.header.megaMenuVisible = false;\n      this.$refs.navMainWithMegaMenu.megaMenuVisible = false;\n    }\n  },\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                ref="header"\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n                @keydown="$event.key === \'Escape\' && handleClose()"\n            >\n                <div slot="menu-main">\n                  <scale-nav-main name="Custom Item #1"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #2" id="nav-main-with-mega-menu" ref="navMainWithMegaMenu" @mouseenter="handleOpen" @mouseleave="handleClose" @keydown="$event.key === \'Enter\' && handleOpen()">\n                    <app-mega-menu>\n                      <div slot="custom-body"><pre>custom-body</pre></div>\n                    </app-mega-menu></scale-nav-main>\n                  <scale-nav-main active name="Custom Item #3"></scale-nav-main>\n                  <scale-nav-main name="Custom Item #4"></scale-nav-main>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customIconNavigation=function customIconNavigation(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-icon">\n                  <scale-nav-icon icon="action-mute">\n                    Mute\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-play">\n                    Play\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-pause">\n                    Pause\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-fast-forward">\n                    Forward\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-favorite">\n                    Favorite\n                  </scale-nav-icon>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_customIconNavigation.storyName="Custom Icon Navigation",BrandHeader_stories_customIconNavigation.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customIconNavigation.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-icon">\n                  <scale-nav-icon icon="action-mute">\n                    Mute\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-play">\n                    Play\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-pause">\n                    Pause\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-fast-forward">\n                    Forward\n                  </scale-nav-icon>\n                  <scale-nav-icon icon="action-favorite">\n                    Favorite\n                  </scale-nav-icon>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customSectorNavigation=function customSectorNavigation(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-sector">\n                  <scale-nav-segment active="true" href="#custom-sector-1">\n                    Custom Sector #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-sector-2">\n                    Custom Sector #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_customSectorNavigation.storyName="Custom Sector Navigation",BrandHeader_stories_customSectorNavigation.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customSectorNavigation.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :addon-navigation="addonNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-sector">\n                  <scale-nav-segment active="true" href="#custom-sector-1">\n                    Custom Sector #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-sector-2">\n                    Custom Sector #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customAddonNavigation=function customAddonNavigation(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-addon">\n                  <scale-nav-segment active="true" href="#custom-addon-1">\n                    Custom Addon #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-addon-2">\n                    Custom Addon #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_customAddonNavigation.storyName="Custom Addon Navigation",BrandHeader_stories_customAddonNavigation.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customAddonNavigation.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n                :claim-lang="claimLang"\n            >\n                <div slot="menu-addon">\n                  <scale-nav-segment active="true" href="#custom-addon-1">\n                    Custom Addon #1\n                  </scale-nav-segment>\n                  <scale-nav-segment href="#custom-addon-2">\n                    Custom Addon #2\n                  </scale-nav-segment>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customLogo=function customLogo(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :claim-lang="claimLang"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n                <div slot="logo">\n                    <scale-logo transparent variant="white" language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n                <div slot="logo-inverse">\n                    <scale-logo transparent language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      '}};BrandHeader_stories_customLogo.storyName="Custom Logo",BrandHeader_stories_customLogo.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customLogo.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                :claim-lang="claimLang"\n                :main-navigation="mainNavigation"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n                <div slot="logo">\n                    <scale-logo transparent variant="white" language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n                <div slot="logo-inverse">\n                    <scale-logo transparent language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1039px) { :host {--logo-size: 26px;} }"></scale-logo>\n                </div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `\n})'}};var BrandHeader_stories_customMobileMenu=function customMobileMenu(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                ref="header"\n                :main-navigation="mainNavigation"\n                :claim-lang="claimLang"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n              <div slot="menu-mobile"><pre>menu-mobile</pre></div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      ',mounted:function mounted(){var _this2=this;document.body.addEventListener("keydown",(function(event){["Escape","Esc"].includes(event.key)&&(event.preventDefault(),_this2.$refs.header&&_this2.$refs.header.dispatchEvent(new Event("closeMenu")))}))}}};BrandHeader_stories_customMobileMenu.storyName="Custom Mobile Menu",BrandHeader_stories_customMobileMenu.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38"},BrandHeader_stories_customMobileMenu.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-shell>\n            <scale-app-header\n                slot="header"\n                id="header"\n                ref="header"\n                :main-navigation="mainNavigation"\n                :claim-lang="claimLang"\n                :icon-navigation="iconNavigation"\n                :sector-navigation="sectorNavigation"\n                :active-route-id="activeRouteId"\n                :active-sector-id="activeSectorId"\n            >\n              <div slot="menu-mobile"><pre>menu-mobile</pre></div>\n            </scale-app-header>\n            <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>\n            <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>\n          </scale-app-shell>\n        </div>\n      `,\n\n  mounted() {\n    document.body.addEventListener(\'keydown\', event => {\n      if ([\'Escape\', \'Esc\'].includes(event.key)) {\n        event.preventDefault();\n        this.$refs.header && this.$refs.header.dispatchEvent(new Event(\'closeMenu\'));\n      }\n    });\n  }\n\n})'}};var BrandHeader_stories_standaloneHeader=function standaloneHeader(){return setColorMode(),{components:{AppShell:AppShell},props:AppShell.props,template:'\n        <div class="brand-header-spacing">\n          <scale-app-header\n            :logo-title="logoTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n          </scale-app-header>\n        </div>\n      '}};BrandHeader_stories_standaloneHeader.storyName="Standalone Header",BrandHeader_stories_standaloneHeader.args={portalName:"",claimLang:"en",mainNavigation:JSON.stringify(fixtures.d),iconNavigation:JSON.stringify(fixtures.c),addonNavigation:JSON.stringify(fixtures.a),sectorNavigation:JSON.stringify(fixtures.e),activeRouteId:"Third Level 24",activeSectorId:"Personal38",logoTitle:"Custom Logo Title",logoHref:"#custom-href"},BrandHeader_stories_standaloneHeader.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppShell\n  },\n  props: AppShell.props,\n  template: `\n        <div class="brand-header-spacing">\n          <scale-app-header\n            :logo-title="logoTitle"\n            :logo-href="logoHref"\n            :logo-click="logoClick"\n            :portal-name="portalName"\n            :claim-lang="claimLang"\n            :main-navigation="mainNavigation"\n            :icon-navigation="iconNavigation"\n            :sector-navigation="sectorNavigation"\n            :addon-navigation="addonNavigation"\n            :active-route-id="activeRouteId"\n            :active-sector-id="activeSectorId"\n          >\n          </scale-app-header>\n        </div>\n      `\n})'}};var componentMeta={title:"Deprecated Components/Brand Header & Navigation",component:AppShell,argTypes:{activeRouteId:{control:{type:"text"}},activeSectorId:{control:{type:"text"}},logoTitle:{control:{type:"text"}},logoHideTitle:{control:{type:"boolean"}},logoHref:{control:{type:"text"}},logoAriaDescribedBy:{control:{type:"text"}},logoClick:{control:{type:"disabled"},description:"logo click event handler custom function"},mainNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},iconNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},sectorNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},addonNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},userNavigation:{control:{type:"text"},description:"each item and button takes an optional onClick handler"},portalName:{control:{type:"text"},description:"optionally replaces the sectorNavigation with a single bold title"},claimLang:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_lat","mk_kyr","ro","sk"]}},userMenuAriaLabel:{control:{type:"text"}}},includeStories:["standard","customMainNavigation","customIconNavigation","customSectorNavigation","customAddonNavigation","customLogo","customMobileMenu","standaloneHeader"]},mdxStoryNameToKey={Standard:"standard","Custom Main Navigation":"customMainNavigation","Custom Icon Navigation":"customIconNavigation","Custom Sector Navigation":"customSectorNavigation","Custom Addon Navigation":"customAddonNavigation","Custom Logo":"customLogo","Custom Mobile Menu":"customMobileMenu","Standalone Header":"standaloneHeader"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/brand-header-navigation/fixtures.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return addonNavigation})),__webpack_require__.d(__webpack_exports__,"f",(function(){return userNavigation})),__webpack_require__.d(__webpack_exports__,"d",(function(){return mainNavigation})),__webpack_require__.d(__webpack_exports__,"c",(function(){return iconNavigation})),__webpack_require__.d(__webpack_exports__,"e",(function(){return sectorNavigation})),__webpack_require__.d(__webpack_exports__,"b",(function(){return footerNavigation}));var addonNavigation=[{name:"Telekom Shops",id:"Telekom Shops",href:"#telekom-shops"},{name:"Contact",id:"Contact",href:"#contact"}],userNavigation=[{type:"userInfo",shortName:"Alexander",name:"Alexander Dreyer",email:"alexander.dreyer@t-online.de"},{type:"divider"},{type:"item",name:"Customer Care",id:"customer-care",href:"https://www.telekom.de/kundencenter/startseite",onClick:function onClick(){},icon:"t-product-measure-internet-speed",iconPosition:"prefix"},{type:"item",name:"Login Settings",id:"login-settings",href:"https://account.idm.telekom.com/account-manager/index.xhtml",onClick:function onClick(){},icon:"service-settings",iconPosition:"prefix"},{type:"divider"},{type:"item",name:"Optional Link",id:"optional-link",href:"#optional-link",onClick:function onClick(){}},{type:"divider"},{type:"button",name:"Logout",id:"logout",onClick:function onClick(){console.log("button click")},href:"https://accounts.login.idm.telekom.com/sessionmessage/logout",variant:"secondary"}],mainNavigation=[{name:"Topic One",id:"Topic One",children:[{name:"Second Level",id:"Second Level 3",children:[{name:"Third Level",id:"Third Level 4",href:"#third-level"},{name:"Third Level",id:"Third Level 5",href:"#third-level"},{name:"Third Level",id:"Third Level 6",href:"#third-level"},{name:"Third Level",id:"Third Level 7",href:"#third-level"},{name:"Third Level",id:"Third Level 8",href:"#third-level"},{name:"Third Level",id:"Third Level 9",href:"#third-level"},{name:"Third Level",id:"Third Level 10",href:"#third-level"}]},{name:"Second Level",id:"Second Level 4",children:[{name:"Third Level",id:"Third Level 11",href:"#third-level"},{name:"Third Level",id:"Third Level 12",href:"#third-level"},{name:"Third Level",id:"Third Level 13",href:"#third-level"},{name:"Third Level",id:"Third Level 14",href:"#third-level"},{name:"Third Level",id:"Third Level 15",href:"#third-level"},{name:"Third Level",id:"Third Level 16",href:"#third-level"},{name:"Third Level",id:"Third Level 17",href:"#third-level"}]},{name:"Second Level",id:"Second Level 5",children:[{name:"Third Level",id:"Third Level 18",href:"#third-level"},{name:"Third Level",id:"Third Level 19",href:"#third-level"},{name:"Third Level",id:"Third Level 20",href:"#third-level"},{name:"Third Level",id:"Third Level 21",href:"#third-level"},{name:"Third Level",id:"Third Level 22",href:"#third-level"},{name:"Third Level",id:"Third Level 23",href:"#third-level"},{name:"Third Level",id:"Third Level 24",href:"#third-level"}]},{name:"Second Level",id:"Second Level 6",children:[{name:"Third Level",id:"Third Level 25",href:"#third-level"},{name:"Third Level",id:"Third Level 26",href:"#third-level"},{name:"Third Level",id:"Third Level 27",href:"#third-level"},{name:"Third Level",id:"Third Level 28",href:"#third-level"},{name:"Third Level",id:"Third Level 29",href:"#third-level"},{name:"Third Level",id:"Third Level 30",href:"#third-level"}]},{name:"Second Level",id:"Second Level 7"}]},{name:"Topic Two",id:"Topic Two",children:[{name:"Second Level",id:"Second Level 1",children:[{name:"Third Level",id:"Third Level 1",href:"#third-level"},{name:"Third Level",id:"Third Level 2",href:"#third-level"}]},{name:"Second Level",id:"Second Level 2",children:[{name:"Third Level",id:"Third Level 3",href:"#third-level"}]}]},{name:"Topic Three",id:"Topic Three",href:"#topic-three"},{name:"Topic Four",id:"Topic Four",href:"#topic-four"},{name:"Topic Five",id:"Topic Five",href:"#topic-five"}],iconNavigation=[{name:"Search",id:"Search35",href:"#search",icon:"action-search"},{name:"Cart",id:"Cart36",href:"#cart",icon:"action-shopping-cart",badge:!0,badgeLabel:3,labelVisuallyHidden:!1,badgeCount:3,ariaLabelTranslation:"$badgeLabel - $badgeCount item"},{id:"menu",defaultName:"Menu",openedName:"Close"}],sectorNavigation=[{name:"Personal",id:"Personal38",href:"#personal"},{name:"Business",id:"Business39",href:"#business"}],footerNavigation=[{name:"Contact",id:"Contact",href:"#contact"},{name:"Terms and conditions",id:"Terms and conditions",href:"#terms-and-conditions"},{name:"Legal notice",id:"Legal notice",href:"#legal-notice"},{name:"Data privacy",id:"Data privacy",href:"#data-privacy",icon:"alert-imprint-dataprivacy"}]},"./stories/deprecated/footer/Footer.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Footer_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"minimal",(function(){return minimal})),__webpack_require__.d(__webpack_exports__,"customSlots",(function(){return Footer_stories_customSlots}));__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),fixtures=__webpack_require__("./stories/deprecated/brand-header-navigation/fixtures.js"),footer_AppFootervue_type_script_lang_js_={props:{claimLang:String,footerNavigation:String,variant:String,copyright:String,logoTitle:String,logoHref:String,logoAriaDescribedBy:String,logoClick:Function}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(footer_AppFootervue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-app-footer",{attrs:{"claim-lang":_vm.claimLang,"footer-navigation":_vm.footerNavigation,variant:_vm.variant,copyright:_vm.copyright,"logo-title":_vm.logoTitle,"logo-href":_vm.logoHref,"logo-aria-described-by":_vm.logoAriaDescribedBy},on:{"logo-click":_vm.logoClick}},[_vm._t("logo"),_vm._v(" "),_vm._t("navigation")],2)}),[],!1,null,null,null).exports;var AppFooter=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"AppFooter",description:"",tags:{},props:[{name:"claimLang",type:{name:"string"}},{name:"footerNavigation",type:{name:"string"}},{name:"variant",type:{name:"string"}},{name:"copyright",type:{name:"string"}},{name:"logoTitle",type:{name:"string"}},{name:"logoHref",type:{name:"string"}},{name:"logoAriaDescribedBy",type:{name:"string"}},{name:"logoClick",type:{name:"func"}}],slots:[{name:"logo"},{name:"navigation"}]};var setColorMode=function setColorMode(){try{document.body.dataset.mode=JSON.parse(window.localStorage.getItem("persistedColorMode"))}catch(e){}},Footer_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{AppFooter:AppFooter},props:AppFooter.props,template:'\n    <div style="margin: -1rem;">\n      <scale-app-footer\n        :footer-navigation="footerNavigation"\n        :variant="variant"\n        :copyright="copyright"\n      >\n      </scale-app-footer>\n    </div>\n  '}},layoutProps={Template:Footer_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Footer",component:AppFooter,argTypes:{footerNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},claimLang:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_lat","mk_kyr","ro","sk"]}},variant:{control:{type:"select",options:["angular","standard","minimal"]}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Footer"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("div",{class:"Notification"},Object(esm.b)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(esm.b)("g",{fill:"currentColor"},Object(esm.b)("g",null,Object(esm.b)("path",{"fill-rule":"evenodd",d:"M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"})))),Object(esm.b)("span",null,"There is a newer version of the Brand Footer available: ",Object(esm.b)("a",{href:"?path=/docs/components-telekom-footer--standard"},"Telekom Footer"))),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",inline:!1,height:500,args:{claimLang:"en",footerNavigation:JSON.stringify(fixtures.b)},mdxType:"Story"},(setColorMode(),Footer_stories_Template.bind({})))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-footer claim-lang="en"></scale-app-footer>\n')),Object(esm.b)("h3",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --background: var(--telekom-color-background-surface-highlight);\n  --color: var(--telekom-color-text-and-icon-white-standard);\n  --spacing-top: var(--telekom-spacing-unit-x8);\n  --spacing-bottom: var(--telekom-spacing-unit-x6);\n  --spacing-x: var(--telekom-spacing-unit-x6);\n  --background-container: var(--telekom-color-background-canvas);\n  --radius: var(--telekom-radius-large);\n  --max-width: inherit;\n\n  --border-top-minimal: var(--telekom-spacing-unit-x025) solid var(\n      --telekom-color-ui-faint\n    );\n  --color-minimal: var(--telekom-color-text-and-icon-additional);\n  --background-minimal: var(--telekom-color-background-surface);\n\n  --spacing-angular: var(--telekom-spacing-unit-x6);\n  --spacing-minimal: var(--telekom-spacing-unit-x6);\n\n  --background-mask: var(--telekom-color-background-canvas);\n  --radius-mask: 0 0 var(--telekom-radius-large) var(--telekom-radius-large);\n\n  --height-logo: var(--telekom-spacing-unit-x6);\n  --font-size-copyright: var(--telekom-typography-font-size-caption);\n  --color-link-standard: var(--telekom-color-text-and-icon-white-standard);\n  --color-link-minimal: var(--telekom-color-text-and-icon-additional);\n\n  --font-size-navigation-standard: var(--telekom-typography-font-size-caption);\n  --font-family-navigation-standard: var(--telekom-typography-font-family-sans);\n  --font-weight-navigation-standard: var(\n    --telekom-typography-font-weight-extra-bold\n  );\n  --font-weight-navigation-minimal: var(\n    --telekom-typography-font-weight-medium\n  );\n\n  --spacing-navigation-standard: var(--telekom-spacing-unit-x2);\n  --color-navigation-standard-hover: var(\n    --telekom-color-text-and-icon-white-standard\n  );\n  --color-navigation-minimal-hover: var(\n    --telekom-color-text-and-icon-primary-hovered\n  );\n  --color-navigation-active-focus: var(\n    --telekom-color-text-and-icon-primary-pressed\n  );\n  --box-shadow-navigation-focus: 0 0 0 var(--telekom-spacing-unit-x05) var(\n      --telekom-color-functional-focus\n    );\n  --border-color-standard-hover: var(\n    --telekom-color-text-and-icon-white-standard\n  );\n}\n")),Object(esm.b)("p",null,"For Shadow Parts, please inspect the element's #shadow."),Object(esm.b)("h2",{id:"minimal"},"Minimal"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Minimal",inline:!1,height:500,args:{claimLang:"en",footerNavigation:JSON.stringify(fixtures.b),variant:"minimal"},mdxType:"Story"},(setColorMode(),Footer_stories_Template.bind({})))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-app-footer id=\"footer\" claim-lang=\"en\" variant=\"minimal\">\n</scale-app-footer>\n\n<script>\n  const footer = document.getElementById('footer');\n  footer.footerNavigation = [\n    { name: 'Contact', id: 'Contact', href: '#contact' },\n    {\n      name: 'Terms and conditions',\n      id: 'Terms and conditions',\n      href: '#terms-and-conditions',\n    },\n    { name: 'Legal notice', id: 'Legal notice', href: '#legal-notice' },\n    {\n      name: 'Data privacy',\n      id: 'Data privacy',\n      href: '#data-privacy',\n      icon: 'alert-imprint-dataprivacy',\n    },\n  ];\n<\/script>\n")),Object(esm.b)("h2",{id:"custom-slots"},"Custom Slots"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Custom Slots",inline:!1,height:500,args:{claimLang:"en"},mdxType:"Story"},(function(){return setColorMode(),{components:{AppFooter:AppFooter},props:AppFooter.props,template:'\n        <div style="margin: -1rem;">\n          <scale-app-footer\n            \n            :variant="variant"\n            :copyright="copyright"\n          >\n            <div slot="navigation">\n              <span>custom navigation placeholder</span>\n            </div>\n            <div slot="logo">\n              <span>custom logo placeholder</span>\n            </div>\n          </scale-app-footer>\n        </div>\n      '}}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-app-footer :variant="variant" :copyright="copyright">\n  <div slot="navigation">\n    <span>custom navigation placeholder</span>\n  </div>\n  <div slot="logo">\n    <span>custom logo placeholder</span>\n  </div>\n</scale-app-footer>\n')))}MDXContent.isMDXComponent=!0;var standard=(setColorMode(),Footer_stories_Template.bind({}));standard.storyName="Standard",standard.args={claimLang:"en",footerNavigation:JSON.stringify(fixtures.b)},standard.parameters={storySource:{source:"(() => {\n  setColorMode();\n  return Template.bind({});\n})()"}};var minimal=(setColorMode(),Footer_stories_Template.bind({}));minimal.storyName="Minimal",minimal.args={claimLang:"en",footerNavigation:JSON.stringify(fixtures.b),variant:"minimal"},minimal.parameters={storySource:{source:"(() => {\n  setColorMode();\n  return Template.bind({});\n})()"}};var Footer_stories_customSlots=function customSlots(){return setColorMode(),{components:{AppFooter:AppFooter},props:AppFooter.props,template:'\n        <div style="margin: -1rem;">\n          <scale-app-footer\n            \n            :variant="variant"\n            :copyright="copyright"\n          >\n            <div slot="navigation">\n              <span>custom navigation placeholder</span>\n            </div>\n            <div slot="logo">\n              <span>custom logo placeholder</span>\n            </div>\n          </scale-app-footer>\n        </div>\n      '}};Footer_stories_customSlots.storyName="Custom Slots",Footer_stories_customSlots.args={claimLang:"en"},Footer_stories_customSlots.parameters={storySource:{source:'() => (setColorMode(), {\n  components: {\n    AppFooter\n  },\n  props: AppFooter.props,\n  template: `\n        <div style="margin: -1rem;">\n          <scale-app-footer\n            \n            :variant="variant"\n            :copyright="copyright"\n          >\n            <div slot="navigation">\n              <span>custom navigation placeholder</span>\n            </div>\n            <div slot="logo">\n              <span>custom logo placeholder</span>\n            </div>\n          </scale-app-footer>\n        </div>\n      `\n})'}};var componentMeta={title:"Deprecated Components/Footer",component:AppFooter,argTypes:{footerNavigation:{control:{type:"text"},description:"each item takes an optional onClick handler"},claimLang:{control:{type:"select",options:["de","en","cz","hr","hu","me","mk_lat","mk_kyr","ro","sk"]}},variant:{control:{type:"select",options:["angular","standard","minimal"]}}},includeStories:["standard","minimal","customSlots"]},mdxStoryNameToKey={Standard:"standard",Minimal:"minimal","Custom Slots":"customSlots"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/notification-banner/NotificationBanner.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return NotificationBanner_stories_Template})),__webpack_require__.d(__webpack_exports__,"TextTemplate",(function(){return NotificationBanner_stories_TextTemplate})),__webpack_require__.d(__webpack_exports__,"LinkTemplate",(function(){return NotificationBanner_stories_LinkTemplate})),__webpack_require__.d(__webpack_exports__,"LinkTextTemplate",(function(){return NotificationBanner_stories_LinkTextTemplate})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"warning",(function(){return warning})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"informational",(function(){return informational})),__webpack_require__.d(__webpack_exports__,"dismissible",(function(){return dismissible})),__webpack_require__.d(__webpack_exports__,"timeout",(function(){return timeout})),__webpack_require__.d(__webpack_exports__,"withText",(function(){return withText})),__webpack_require__.d(__webpack_exports__,"withLink",(function(){return withLink})),__webpack_require__.d(__webpack_exports__,"withLinkAndText",(function(){return withLinkAndText}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),notification_banner_ScaleNotificationBannervue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{variant:{type:0,default:"informational"},dismissible:{type:Boolean,default:!1},opened:{type:Boolean},autoHide:{type:Boolean,default:!1},autoHideDuration:{type:Number,default:3e3},closeButtonLabel:{type:String,default:"close"},closeButtonTitle:{type:String,default:"close"}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(notification_banner_ScaleNotificationBannervue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("text"),this._v(" "),this._t("link")],2)}),[],!1,null,null,null).exports;var ScaleNotificationBanner=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleNotificationBanner",description:"",tags:{},props:[{name:"variant",type:{name:"'error' | 'warning' | 'success' | 'informational'"},defaultValue:{func:!1,value:"'informational'"}},{name:"dismissible",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"opened",type:{name:"boolean"}},{name:"autoHide",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"autoHideDuration",type:{name:"number"},defaultValue:{func:!1,value:"3000"}},{name:"closeButtonLabel",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}},{name:"closeButtonTitle",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}}],slots:[{name:"text"},{name:"link"}]};var NotificationBanner_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({},ScaleNotificationBanner.props,{heading:String,text:String,link:String}),template:'\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  '}},NotificationBanner_stories_TextTemplate=function TextTemplate(args,_ref2){_ref2.argTypes;return{props:Object.assign({},ScaleNotificationBanner.props),template:'\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p slot="text">Here you can add some more text.</p>\n    </scale-notification-banner>\n  '}},NotificationBanner_stories_LinkTemplate=function LinkTemplate(args,_ref3){_ref3.argTypes;return{props:Object.assign({},ScaleNotificationBanner.props,{text:String}),template:'\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p v-if="text">{{ text }}</p>\n      <p slot="link">Link text</p>\n    </scale-notification-banner>\n  '}},NotificationBanner_stories_LinkTextTemplate=function LinkTextTemplate(args,_ref4){_ref4.argTypes;return{props:Object.assign({},ScaleNotificationBanner.props,{text:String}),template:'\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p slot="text">Here you can add some more text</p>\n      <p slot="link">Link text</p>\n    </scale-notification-banner>\n  '}},layoutProps={Template:NotificationBanner_stories_Template,TextTemplate:NotificationBanner_stories_TextTemplate,LinkTemplate:NotificationBanner_stories_LinkTemplate,LinkTextTemplate:NotificationBanner_stories_LinkTextTemplate};function MDXContent(_ref5){var components=_ref5.components,props=_objectWithoutProperties(_ref5,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Notification Banner",component:ScaleNotificationBanner,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Notification Banner"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{opened:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-notification-banner opened\n  >Notification text goes here</scale-notification-banner\n>\n")),Object(esm.b)("h2",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 100%;\n  --radius: var(--telekom-radius-standard);\n\n  --background-error: var(--telekom-color-functional-danger-subtle);\n  --background-warning: var(--telekom-color-functional-warning-subtle);\n  --background-informational: var(\n    --telekom-color-functional-informational-subtle\n  );\n  --background-success: var(--telekom-color-functional-success-subtle);\n}\n")),Object(esm.b)("h2",{id:"variants"},"Variants"),Object(esm.b)("h3",{id:"warning"},"Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Warning",args:{opened:!0,variant:"warning",heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner variant="warning" opened>\n  Notification text goes here\n</scale-notification-banner>\n')),Object(esm.b)("h3",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{opened:!0,variant:"error",heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner variant="error" opened>\n  Notification text goes here\n</scale-notification-banner>\n')),Object(esm.b)("h3",{id:"success"},"Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Success",args:{opened:!0,variant:"success",heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner variant="success" opened>\n  Notification text goes here\n</scale-notification-banner>\n')),Object(esm.b)("h3",{id:"informational"},"Informational"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Informational",args:{opened:!0,variant:"informational",heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner variant="informational" opened>\n  Notification text goes here\n</scale-notification-banner>\n')),Object(esm.b)("h2",{id:"dismissible"},"Dismissible"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dismissible",args:{opened:!0,dismissible:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-notification-banner dismissible opened>\n  Notification text goes here\n</scale-notification-banner>\n")),Object(esm.b)("h2",{id:"timeout"},"Timeout"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Timeout",args:{opened:!0,autoHideDuration:4e3,autoHide:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationBanner_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner auto-hide auto-hide-duration="4000" opened>\n  Notification text goes here\n</scale-notification-banner>\n')),Object(esm.b)("h2",{id:"with-text"},"With Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Text",args:{opened:!0},mdxType:"Story"},NotificationBanner_stories_TextTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner opened>\n  Notification text goes here.\n  <p slot="text">Here you can add some more text.</p>\n</scale-notification-banner>\n')),Object(esm.b)("h2",{id:"with-link"},"With Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Link",args:{opened:!0},mdxType:"Story"},NotificationBanner_stories_LinkTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner opened>\n  Notification text goes here.\n  <p slot="link">Link Text</p>\n</scale-notification-banner>\n')),Object(esm.b)("h2",{id:"with-link-and-text"},"With Link and Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Link and Text",args:{opened:!0},mdxType:"Story"},NotificationBanner_stories_LinkTextTemplate.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-banner opened>\n  Notification text goes here.\n  <p slot="text">Here you can add some more text.</p>\n  <p slot="link">Link Text</p>\n</scale-notification-banner>\n')))}MDXContent.isMDXComponent=!0;var standard=NotificationBanner_stories_Template.bind({});standard.storyName="Standard",standard.args={opened:!0,heading:"Notification text goes here"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var warning=NotificationBanner_stories_Template.bind({});warning.storyName="Warning",warning.args={opened:!0,variant:"warning",heading:"Notification text goes here"},warning.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var error=NotificationBanner_stories_Template.bind({});error.storyName="Error",error.args={opened:!0,variant:"error",heading:"Notification text goes here"},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var success=NotificationBanner_stories_Template.bind({});success.storyName="Success",success.args={opened:!0,variant:"success",heading:"Notification text goes here"},success.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var informational=NotificationBanner_stories_Template.bind({});informational.storyName="Informational",informational.args={opened:!0,variant:"informational",heading:"Notification text goes here"},informational.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var dismissible=NotificationBanner_stories_Template.bind({});dismissible.storyName="Dismissible",dismissible.args={opened:!0,dismissible:!0,heading:"Notification text goes here"},dismissible.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var timeout=NotificationBanner_stories_Template.bind({});timeout.storyName="Timeout",timeout.args={opened:!0,autoHideDuration:4e3,autoHide:!0,heading:"Notification text goes here"},timeout.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    heading: String,\n    text: String,\n    link: String\n  },\n  template: `\n    <scale-notification-banner   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n      <p v-if="link">{{ link }}</p>\n    </scale-notification-banner>\n  `\n})'}};var withText=NotificationBanner_stories_TextTemplate.bind({});withText.storyName="With Text",withText.args={opened:!0},withText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props\n  },\n  template: `\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p slot="text">Here you can add some more text.</p>\n    </scale-notification-banner>\n  `\n})'}};var withLink=NotificationBanner_stories_LinkTemplate.bind({});withLink.storyName="With Link",withLink.args={opened:!0},withLink.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    text: String\n  },\n  template: `\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p v-if="text">{{ text }}</p>\n      <p slot="link">Link text</p>\n    </scale-notification-banner>\n  `\n})'}};var withLinkAndText=NotificationBanner_stories_LinkTextTemplate.bind({});withLinkAndText.storyName="With Link and Text",withLinkAndText.args={opened:!0},withLinkAndText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationBanner.props,\n    text: String\n  },\n  template: `\n    <scale-notification-banner opened>\n      Notification text goes here.\n      <p slot="text">Here you can add some more text</p>\n      <p slot="link">Link text</p>\n    </scale-notification-banner>\n  `\n})'}};var componentMeta={title:"Deprecated Components/Notification Banner",component:ScaleNotificationBanner,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}}},includeStories:["standard","warning","error","success","informational","dismissible","timeout","withText","withLink","withLinkAndText"]},mdxStoryNameToKey={Standard:"standard",Warning:"warning",Error:"error",Success:"success",Informational:"informational",Dismissible:"dismissible",Timeout:"timeout","With Text":"withText","With Link":"withLink","With Link and Text":"withLinkAndText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/notification-message/NotificationMessage.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return NotificationMessage_stories_Template})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"warning",(function(){return warning})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"informational",(function(){return informational})),__webpack_require__.d(__webpack_exports__,"dismissible",(function(){return dismissible})),__webpack_require__.d(__webpack_exports__,"timeout",(function(){return timeout})),__webpack_require__.d(__webpack_exports__,"withText",(function(){return withText}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),notification_message_ScaleNotificationMessagevue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{variant:{type:0,default:"informational"},dismissible:{type:Boolean,default:!1},opened:{type:Boolean},autoHideDuration:{type:Number,default:3e3},autoHide:{type:Boolean,default:!1},closeButtonLabel:{type:String,default:"close"},closeButtonTitle:{type:String,default:"close"}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(notification_message_ScaleNotificationMessagevue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("text")],2)}),[],!1,null,null,null).exports;var ScaleNotificationMessage=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleNotificationMessage",description:"",tags:{},props:[{name:"variant",type:{name:"'error' | 'warning' | 'success' | 'informational'"},defaultValue:{func:!1,value:"'informational'"}},{name:"dismissible",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"opened",type:{name:"boolean"}},{name:"autoHideDuration",type:{name:"number"},defaultValue:{func:!1,value:"3000"}},{name:"autoHide",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"closeButtonLabel",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}},{name:"closeButtonTitle",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}}],slots:[{name:"text"}]};var NotificationMessage_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({},ScaleNotificationMessage.props,{heading:String,text:String}),template:'\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  '}},layoutProps={Template:NotificationMessage_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Notification Message",component:ScaleNotificationMessage,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Notification Message"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{opened:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-notification-message opened\n  >Notification text goes here</scale-notification-message\n>\n")),Object(esm.b)("h2",{id:"scoped-css-variables"},"Scoped CSS variables"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-css"},":host {\n  --width: 100%;\n  --radius: var(--telekom-radius-standard);\n  --border: var(--telekom-line-weight-standard) solid transparent;\n\n  --background-error: var(--telekom-color-functional-danger-subtle);\n  --background-warning: var(--telekom-color-functional-warning-subtle);\n  --background-informational: var(\n    --telekom-color-functional-informational-subtle\n  );\n  --background-success: var(--telekom-color-functional-success-subtle);\n}\n")),Object(esm.b)("h2",{id:"variants"},"Variants"),Object(esm.b)("h3",{id:"warning"},"Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Warning",args:{opened:!0,variant:"warning",heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message variant="warning" opened>\n  Notification text goes here\n</scale-notification-message>\n')),Object(esm.b)("h3",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{opened:!0,variant:"error",heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message variant="error" opened>\n  Notification text goes here\n</scale-notification-message>\n')),Object(esm.b)("h3",{id:"success"},"Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Success",args:{opened:!0,variant:"success",heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message variant="success" opened>\n  Notification text goes here\n</scale-notification-message>\n')),Object(esm.b)("h3",{id:"informational"},"Informational"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Informational",args:{opened:!0,variant:"informational",heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message variant="informational" opened>\n  Notification text goes here\n</scale-notification-message>\n')),Object(esm.b)("h2",{id:"dismissible"},"Dismissible"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Dismissible",args:{opened:!0,dismissible:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-notification-message dismissible opened>\n  Notification text goes here\n</scale-notification-message>\n")),Object(esm.b)("h2",{id:"timeout"},"Timeout"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Timeout",args:{opened:!0,autoHideDuration:4e3,autoHide:!0,heading:"Notification text goes here"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message auto-hide-duration="4000" auto-hide opened>\n  Notification text goes here\n</scale-notification-message>\n')),Object(esm.b)("h2",{id:"with-text"},"With Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Text",args:{opened:!0,heading:"Notification text goes here",text:"Here you can add some more text"},mdxType:"Story"},NotificationMessage_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-message opened>\n  Notification text goes here.\n  <p slot="text">Here you can add some more text.</p>\n</scale-notification-message>\n')))}MDXContent.isMDXComponent=!0;var standard=NotificationMessage_stories_Template.bind({});standard.storyName="Standard",standard.args={opened:!0,heading:"Notification text goes here"},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var warning=NotificationMessage_stories_Template.bind({});warning.storyName="Warning",warning.args={opened:!0,variant:"warning",heading:"Notification text goes here"},warning.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var error=NotificationMessage_stories_Template.bind({});error.storyName="Error",error.args={opened:!0,variant:"error",heading:"Notification text goes here"},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var success=NotificationMessage_stories_Template.bind({});success.storyName="Success",success.args={opened:!0,variant:"success",heading:"Notification text goes here"},success.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var informational=NotificationMessage_stories_Template.bind({});informational.storyName="Informational",informational.args={opened:!0,variant:"informational",heading:"Notification text goes here"},informational.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var dismissible=NotificationMessage_stories_Template.bind({});dismissible.storyName="Dismissible",dismissible.args={opened:!0,dismissible:!0,heading:"Notification text goes here"},dismissible.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var timeout=NotificationMessage_stories_Template.bind({});timeout.storyName="Timeout",timeout.args={opened:!0,autoHideDuration:4e3,autoHide:!0,heading:"Notification text goes here"},timeout.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var withText=NotificationMessage_stories_Template.bind({});withText.storyName="With Text",withText.args={opened:!0,heading:"Notification text goes here",text:"Here you can add some more text"},withText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationMessage.props,\n    heading: String,\n    text: String\n  },\n  template: `\n    <scale-notification-message   \n      :variant="variant"\n      :dismissible="dismissible"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :opened="opened"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n    >\n      {{ heading }} \n      <p v-if="text">{{ text }}</p>\n    </scale-notification-message>\n  `\n})'}};var componentMeta={title:"Deprecated Components/Notification Message",component:ScaleNotificationMessage,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}}},includeStories:["standard","warning","error","success","informational","dismissible","timeout","withText"]},mdxStoryNameToKey={Standard:"standard",Warning:"warning",Error:"error",Success:"success",Informational:"informational",Dismissible:"dismissible",Timeout:"timeout","With Text":"withText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/notification-toast/NotificationToast.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return NotificationToast_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateText",(function(){return NotificationToast_stories_TemplateText})),__webpack_require__.d(__webpack_exports__,"TemplateLink",(function(){return NotificationToast_stories_TemplateLink})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"warning",(function(){return warning})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"informational",(function(){return informational})),__webpack_require__.d(__webpack_exports__,"timeout",(function(){return timeout})),__webpack_require__.d(__webpack_exports__,"withText",(function(){return withText})),__webpack_require__.d(__webpack_exports__,"withLink",(function(){return withLink}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),notification_toast_ScaleNotificationToastvue_type_script_lang_js_=(__webpack_require__("../../node_modules/core-js/modules/es.number.constructor.js"),{props:{variant:{type:0,default:"informational"},alignment:{type:0,default:"top-right"},opened:{type:Boolean,default:!1},animated:{type:Boolean,default:!0},positionVertical:{type:Number,default:12},positionHorizontal:{type:Number,default:12},fadeDuration:{type:Number,default:500},autoHideDuration:{type:Number,default:3e3},autoHide:{type:Boolean,default:!1},styles:{type:String},closeButtonLabel:{type:String,default:"close"},closeButtonTitle:{type:String,default:"close"}},methods:{"scale-close":function scaleClose($event){action("scale-close"),this.$emit("scale-close",$event)},"scale-closing":function scaleClosing($event){action("scale-closing"),this.$emit("scale-closing",$event)}}}),componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(notification_toast_ScaleNotificationToastvue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("div",[this._t("header"),this._v(" "),this._t("body"),this._v(" "),this._t("link")],2)}),[],!1,null,null,null).exports;var ScaleNotificationToast=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleNotificationToast",description:"",tags:{},props:[{name:"variant",type:{name:"'error' | 'warning' | 'success' | 'informational'"},defaultValue:{func:!1,value:"'informational'"}},{name:"alignment",type:{name:"'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'"},defaultValue:{func:!1,value:"'top-right'"}},{name:"opened",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"animated",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"positionVertical",type:{name:"number"},defaultValue:{func:!1,value:"12"}},{name:"positionHorizontal",type:{name:"number"},defaultValue:{func:!1,value:"12"}},{name:"fadeDuration",type:{name:"number"},defaultValue:{func:!1,value:"500"}},{name:"autoHideDuration",type:{name:"number"},defaultValue:{func:!1,value:"3000"}},{name:"autoHide",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"styles",type:{name:"string"}},{name:"closeButtonLabel",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}},{name:"closeButtonTitle",type:{name:"string"},defaultValue:{func:!1,value:"'close'"}}],events:[{name:"scale-close",type:{names:["undefined"]}},{name:"scale-closing",type:{names:["undefined"]}}],slots:[{name:"header"},{name:"body"},{name:"link"}]};var NotificationToast_stories_Template=function Template(args,_ref){_ref.argTypes;return{props:Object.assign({},ScaleNotificationToast.props),template:'<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  '}},NotificationToast_stories_TemplateText=function TemplateText(args,_ref2){_ref2.argTypes;return{props:Object.assign({},ScaleNotificationToast.props),template:'<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :variant="variant"\n      :opened="opened"\n      ><p slot="header">Informational toast headline</p>\n      <p slot="body">Subheadline goes here.</p>\n    </scale-notification-toast>\n    </div>\n  '}},NotificationToast_stories_TemplateLink=function TemplateLink(args,_ref3){_ref3.argTypes;return{props:Object.assign({},ScaleNotificationToast.props),template:'<div style="height: 100px">\n    <scale-notification-toast \n      story \n      :variant="variant"\n      :opened="opened"\n      ><p slot="header">Informational toast headline</p>\n      <p slot="link">Link Text</p>\n    </scale-notification-toast>\n    </div>\n  '}},layoutProps={Template:NotificationToast_stories_Template,TemplateText:NotificationToast_stories_TemplateText,TemplateLink:NotificationToast_stories_TemplateLink};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Notification Toast",component:ScaleNotificationToast,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}},alignment:{defaultValue:"top-right",options:["bottom-right","bottom-left","top-right","top-left"],control:{type:"select"}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Notification Toast"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{opened:!0},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast opened>\n  <p slot="header">Informational toast headline</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"warning"},"Warning"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Warning",args:{opened:!0,variant:"warning"},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast variant="warning" opened>\n  <p slot="header">Informational toast headline</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"error"},"Error"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Error",args:{opened:!0,variant:"error"},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast variant="error" opened>\n  <p slot="header">Informational toast headline</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"success"},"Success"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Success",args:{opened:!0,variant:"success"},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast variant="success" opened>\n  <p slot="header">Informational toast headline</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"informational"},"Informational"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Informational",args:{opened:!0,variant:"informational"},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast variant="informational" opened>\n  <p slot="header">Informational toast headline</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"timeout"},"Timeout"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Timeout",args:{opened:!0,autoHide:!0,autHideDuration:"4000"},mdxType:"Story"},NotificationToast_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast opened>\n  <p slot="header" auto-hide auto-hide-duration="4000">\n    Informational toast headline\n  </p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"with-text"},"With Text"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Text",args:{opened:!0},mdxType:"Story"},NotificationToast_stories_TemplateText.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast>\n  <p slot="header">Informational toast headline</p>\n  <p slot="body">Subheadline goes here.</p>\n</scale-notification-toast>\n')),Object(esm.b)("h2",{id:"with-link"},"With Link"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"With Link",args:{opened:!0},mdxType:"Story"},NotificationToast_stories_TemplateLink.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-notification-toast variant="success" opened>\n  <p slot="header">Informational toast headline</p>\n  <p slot="link">Link Text</p>\n</scale-notification-toast>\n')))}MDXContent.isMDXComponent=!0;var standard=NotificationToast_stories_Template.bind({});standard.storyName="Standard",standard.args={opened:!0},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var warning=NotificationToast_stories_Template.bind({});warning.storyName="Warning",warning.args={opened:!0,variant:"warning"},warning.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var error=NotificationToast_stories_Template.bind({});error.storyName="Error",error.args={opened:!0,variant:"error"},error.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var success=NotificationToast_stories_Template.bind({});success.storyName="Success",success.args={opened:!0,variant:"success"},success.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var informational=NotificationToast_stories_Template.bind({});informational.storyName="Informational",informational.args={opened:!0,variant:"informational"},informational.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var timeout=NotificationToast_stories_Template.bind({});timeout.storyName="Timeout",timeout.args={opened:!0,autoHide:!0,autHideDuration:"4000"},timeout.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :position-vertical="positionVertical"\n      :position-horizontal="positionHorizontal"\n      :variant="variant" \n      :alignment="alignment"\n      :opened="opened"\n      :auto-hide-duration="autoHideDuration"\n      :auto-hide="autoHide"\n      :close-button-label="closeButtonLabel"\n      :close-button-title="closeButtonTitle"\n      ><p slot="header">Informational toast headline</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var withText=NotificationToast_stories_TemplateText.bind({});withText.storyName="With Text",withText.args={opened:!0},withText.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story\n      :variant="variant"\n      :opened="opened"\n      ><p slot="header">Informational toast headline</p>\n      <p slot="body">Subheadline goes here.</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var withLink=NotificationToast_stories_TemplateLink.bind({});withLink.storyName="With Link",withLink.args={opened:!0},withLink.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  props: { ...ScaleNotificationToast.props\n  },\n  template: `<div style="height: 100px">\n    <scale-notification-toast \n      story \n      :variant="variant"\n      :opened="opened"\n      ><p slot="header">Informational toast headline</p>\n      <p slot="link">Link Text</p>\n    </scale-notification-toast>\n    </div>\n  `\n})'}};var componentMeta={title:"Deprecated Components/Notification Toast",component:ScaleNotificationToast,argTypes:{variant:{defaultValue:"informational",options:["error","warning","success","informational"],control:{type:"select"}},alignment:{defaultValue:"top-right",options:["bottom-right","bottom-left","top-right","top-left"],control:{type:"select"}}},includeStories:["standard","warning","error","success","informational","timeout","withText","withLink"]},mdxStoryNameToKey={Standard:"standard",Warning:"warning",Error:"error",Success:"success",Informational:"informational",Timeout:"timeout","With Text":"withText","With Link":"withLink"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/deprecated/toggle-group/ToggleGroup.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return ToggleGroup_stories_Template})),__webpack_require__.d(__webpack_exports__,"TemplateAriaTranslation",(function(){return ToggleGroup_stories_TemplateAriaTranslation})),__webpack_require__.d(__webpack_exports__,"TemplateIcons",(function(){return ToggleGroup_stories_TemplateIcons})),__webpack_require__.d(__webpack_exports__,"standard",(function(){return standard})),__webpack_require__.d(__webpack_exports__,"monochromeVariant",(function(){return monochromeVariant})),__webpack_require__.d(__webpack_exports__,"greyBackground",(function(){return greyBackground})),__webpack_require__.d(__webpack_exports__,"noBorder",(function(){return noBorder})),__webpack_require__.d(__webpack_exports__,"smallSize",(function(){return smallSize})),__webpack_require__.d(__webpack_exports__,"fullWidth",(function(){return fullWidth})),__webpack_require__.d(__webpack_exports__,"singleSelect",(function(){return singleSelect})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"accessibilityGerman",(function(){return accessibilityGerman})),__webpack_require__.d(__webpack_exports__,"iconBefore",(function(){return iconBefore})),__webpack_require__.d(__webpack_exports__,"iconOnly",(function(){return iconOnly}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_actions_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),toggle_group_ScaleToggleGroupvue_type_script_lang_js_={props:{size:{type:String,default:"regular"},background:{type:String,default:"white"},fullWidth:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideBorder:{type:Boolean,default:!1},singleSelect:{type:Boolean,default:!1},ariaLabelTranslation:{type:String,default:"toggle button group with $slottedButtons buttons"},variant:{type:String,default:"color"},styles:{type:String}},methods:{scaleChange:function scaleChange($event){Object(addon_actions_dist_esm.action)("scaleChange"),this.$emit("scaleChange",$event)},"scale-change":function scaleChange($event){Object(addon_actions_dist_esm.action)("scale-change"),this.$emit("scale-change",$event)}}},componentNormalizer=__webpack_require__("../../node_modules/vue-loader/lib/runtime/componentNormalizer.js");const __vuedocgen_export_0=Object(componentNormalizer.a)(toggle_group_ScaleToggleGroupvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("scale-toggle-group",{attrs:{size:_vm.size,background:_vm.background,"full-width":_vm.fullWidth,disabled:_vm.disabled,"hide-border":_vm.hideBorder,"single-select":_vm.singleSelect,"aria-label-translation":_vm.ariaLabelTranslation,variant:_vm.variant,styles:_vm.styles},on:{scaleChange:_vm.scaleChange}},[_vm._t("default")],2)}),[],!1,null,null,null).exports;var ScaleToggleGroup=__vuedocgen_export_0;function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__vuedocgen_export_0.__docgenInfo={exportName:"default",displayName:"ScaleToggleGroup",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'regular'"}},{name:"background",type:{name:"string"},defaultValue:{func:!1,value:"'white'"}},{name:"fullWidth",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"hideBorder",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"singleSelect",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"ariaLabelTranslation",type:{name:"string"},defaultValue:{func:!1,value:"'toggle button group with $slottedButtons buttons'"}},{name:"variant",type:{name:"string"},defaultValue:{func:!1,value:"'color'"}},{name:"styles",type:{name:"string"}}],events:[{name:"scaleChange",type:{names:["undefined"]}},{name:"scale-change",type:{names:["undefined"]}}],slots:[{name:"default"}]};var ToggleGroup_stories_Template=function Template(args,_ref){_ref.argTypes;return{components:{ScaleToggleGroup:ScaleToggleGroup},props:Object.assign({label:String,icon:String},ScaleToggleGroup.props),template:'\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  '}},ToggleGroup_stories_TemplateAriaTranslation=function TemplateAriaTranslation(args,_ref2){_ref2.argTypes;return{components:{ScaleToggleGroup:ScaleToggleGroup},props:Object.assign({label:String,icon:String},ScaleToggleGroup.props),template:'\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert">Label\n      </scale-toggle-button>\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert">Label\n      </scale-toggle-button>\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert"\n        selected\n        >Label\n      </scale-toggle-button>\n    </scale-toggle-group>\n  '}},ToggleGroup_stories_TemplateIcons=function TemplateIcons(args,_ref3){_ref3.argTypes;return{components:{ScaleToggleGroup:ScaleToggleGroup},props:Object.assign({label:String,iconBefore:Boolean},ScaleToggleGroup.props),template:'\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button v-if="iconBefore" aria-label-toggle-button="Label">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n    </scale-toggle-group>\n  '}},layoutProps={Template:ToggleGroup_stories_Template,TemplateAriaTranslation:ToggleGroup_stories_TemplateAriaTranslation,TemplateIcons:ToggleGroup_stories_TemplateIcons};function MDXContent(_ref4){var components=_ref4.components,props=_objectWithoutProperties(_ref4,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Deprecated Components/Toggle Group",component:ScaleToggleGroup,argTypes:{background:{control:{type:"select",options:["white","grey"]}},size:{control:{type:"select",options:["xs","small","regular","large"]}},fullWidth:{control:{type:"boolean"}},ariaLabelTranslation:{control:{type:"text"}},colorScheme:{description:"Deprecated; variant should replace colorScheme"},variant:{control:{type:"select",options:["color","monochrome"]}}},mdxType:"Meta"}),Object(esm.b)("div",{style:{display:"inline-flex",alignItems:"center",justifyContent:"space-between",width:"100%"}},Object(esm.b)("h1",null,"Toggle Group"),Object(esm.b)("img",{src:"assets/deprecated.png",alt:"Deprecated Component"})),Object(esm.b)("h2",{id:"standard"},"Standard"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Standard",args:{},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)(dist_esm.b,{story:"Standard",mdxType:"ArgsTable"}),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"monochrome-variant"},"Monochrome Variant"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Monochrome Variant",args:{variant:"monochrome"},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'\x3c!-- Deprecated: <scale-toggle-group color-scheme="monochrome"> --\x3e\n<scale-toggle-group variant="monochrome">\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n')),Object(esm.b)("h2",{id:"grey-background"},"Grey Background"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Grey Background",args:{background:"grey"},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-toggle-group background="grey">\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n')),Object(esm.b)("h2",{id:"no-border"},"No Border"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"No Border",args:{hideBorder:!0},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group hide-border>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"small-size"},"Small Size"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Small Size",args:{size:"small"},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-toggle-group size="small">\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n')),Object(esm.b)("h2",{id:"full-width"},"Full Width"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Full Width",args:{fullWidth:!0},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group full-width>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"single-select"},"Single Select"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Single Select",args:{singleSelect:!0},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group single-select>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"disabled"},"Disabled"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Disabled",args:{disabled:!0},mdxType:"Story"},ToggleGroup_stories_Template.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group disabled>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button>Label</scale-toggle-button>\n  <scale-toggle-button selected>Label</scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"accessibility-german"},"Accessibility German"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Accessibility German",args:{ariaLabelTranslation:"wechsel schalter gruppe mit $slottedButtons schaltern"},mdxType:"Story"},ToggleGroup_stories_TemplateAriaTranslation.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-toggle-group\n  aria-label-translation="wechsel schalter gruppe mit $slottedButtons schaltern"\n>\n  <scale-toggle-button\n    aria-label-toggle-button="Drück mich"\n    aria-lang-selected="selektiert"\n    aria-lang-deselected="deselektiert"\n    >Label\n  </scale-toggle-button>\n  <scale-toggle-button\n    aria-label-toggle-button="Drück mich"\n    aria-lang-selected="selektiert"\n    aria-lang-deselected="deselektiert"\n    >Label\n  </scale-toggle-button>\n  <scale-toggle-button\n    aria-label-toggle-button="Drück mich"\n    aria-lang-selected="selektiert"\n    aria-lang-deselected="deselektiert"\n    selected\n    >Label\n  </scale-toggle-button>\n</scale-toggle-group>\n')),Object(esm.b)("h2",{id:"icon-before"},"Icon Before"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon Before",args:{iconBefore:!0},mdxType:"Story"},ToggleGroup_stories_TemplateIcons.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},"<scale-toggle-group>\n  <scale-toggle-button>\n    Label <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n  <scale-toggle-button>\n    Label <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n  <scale-toggle-button selected>\n    Label <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n</scale-toggle-group>\n")),Object(esm.b)("h2",{id:"icon-only"},"Icon Only"),Object(esm.b)(dist_esm.c,{withSource:"none",mdxType:"Canvas"},Object(esm.b)(dist_esm.g,{name:"Icon Only",args:{iconBefore:!1},mdxType:"Story"},ToggleGroup_stories_TemplateIcons.bind({}))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<scale-toggle-group>\n  <scale-toggle-button icon-only aria-label-toggle-button="search">\n    <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n  <scale-toggle-button icon-only aria-label-toggle-button="search">\n    <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n  <scale-toggle-button icon-only aria-label-toggle-button="search" selected>\n    <scale-icon-action-search></scale-icon-action-search>\n  </scale-toggle-button>\n</scale-toggle-group>\n')))}MDXContent.isMDXComponent=!0;var standard=ToggleGroup_stories_Template.bind({});standard.storyName="Standard",standard.args={},standard.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var monochromeVariant=ToggleGroup_stories_Template.bind({});monochromeVariant.storyName="Monochrome Variant",monochromeVariant.args={variant:"monochrome"},monochromeVariant.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var greyBackground=ToggleGroup_stories_Template.bind({});greyBackground.storyName="Grey Background",greyBackground.args={background:"grey"},greyBackground.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var noBorder=ToggleGroup_stories_Template.bind({});noBorder.storyName="No Border",noBorder.args={hideBorder:!0},noBorder.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var smallSize=ToggleGroup_stories_Template.bind({});smallSize.storyName="Small Size",smallSize.args={size:"small"},smallSize.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var fullWidth=ToggleGroup_stories_Template.bind({});fullWidth.storyName="Full Width",fullWidth.args={fullWidth:!0},fullWidth.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var singleSelect=ToggleGroup_stories_Template.bind({});singleSelect.storyName="Single Select",singleSelect.args={singleSelect:!0},singleSelect.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var disabled=ToggleGroup_stories_Template.bind({});disabled.storyName="Disabled",disabled.args={disabled:!0},disabled.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label">Label</scale-toggle-button>\n      <scale-toggle-button aria-label-toggle-button="Label" selected>Label</scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var accessibilityGerman=ToggleGroup_stories_TemplateAriaTranslation.bind({});accessibilityGerman.storyName="Accessibility German",accessibilityGerman.args={ariaLabelTranslation:"wechsel schalter gruppe mit $slottedButtons schaltern"},accessibilityGerman.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    icon: String,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert">Label\n      </scale-toggle-button>\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert">Label\n      </scale-toggle-button>\n      <scale-toggle-button \n        aria-label-toggle-button="Drück mich"\n        aria-lang-selected="selektiert"\n        aria-lang-deselected="deselektiert"\n        selected\n        >Label\n      </scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var iconBefore=ToggleGroup_stories_TemplateIcons.bind({});iconBefore.storyName="Icon Before",iconBefore.args={iconBefore:!0},iconBefore.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    iconBefore: Boolean,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button v-if="iconBefore" aria-label-toggle-button="Label">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var iconOnly=ToggleGroup_stories_TemplateIcons.bind({});iconOnly.storyName="Icon Only",iconOnly.args={iconBefore:!1},iconOnly.parameters={storySource:{source:'(args, {\n  argTypes\n}) => ({\n  components: {\n    ScaleToggleGroup\n  },\n  props: {\n    label: String,\n    iconBefore: Boolean,\n    ...ScaleToggleGroup.props\n  },\n  template: `\n    <scale-toggle-group\n      :size="size"\n      :background="background"\n      :full-width="fullWidth"\n      :disabled="disabled"\n      :hide-border="hideBorder"\n      :single-select="singleSelect"\n      :aria-label-translation="ariaLabelTranslation"\n      :variant="variant"\n      :styles="styles"\n    >\n      <scale-toggle-button v-if="iconBefore" aria-label-toggle-button="Label">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n      <scale-toggle-button v-if="iconBefore">\n        <scale-icon-action-search /> Label\n      </scale-toggle-button>\n      <scale-toggle-button v-if="!iconBefore" icon-only="true" aria-label-toggle-button="search">\n        <scale-icon-action-search />\n      </scale-toggle-button>\n    </scale-toggle-group>\n  `\n})'}};var componentMeta={title:"Deprecated Components/Toggle Group",component:ScaleToggleGroup,argTypes:{background:{control:{type:"select",options:["white","grey"]}},size:{control:{type:"select",options:["xs","small","regular","large"]}},fullWidth:{control:{type:"boolean"}},ariaLabelTranslation:{control:{type:"text"}},colorScheme:{description:"Deprecated; variant should replace colorScheme"},variant:{control:{type:"select",options:["color","monochrome"]}}},includeStories:["standard","monochromeVariant","greyBackground","noBorder","smallSize","fullWidth","singleSelect","disabled","accessibilityGerman","iconBefore","iconOnly"]},mdxStoryNameToKey={Standard:"standard","Monochrome Variant":"monochromeVariant","Grey Background":"greyBackground","No Border":"noBorder","Small Size":"smallSize","Full Width":"fullWidth","Single Select":"singleSelect",Disabled:"disabled","Accessibility German":"accessibilityGerman","Icon Before":"iconBefore","Icon Only":"iconOnly"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Colors.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@telekom/design-tokens/dist/telekom/docs-json/telekom-design-tokens.light.json"),_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_dark_json__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@telekom/design-tokens/dist/telekom/docs-json/telekom-design-tokens.dark.json"),_storybook_core_events__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("../../node_modules/@storybook/core-events/dist/esm/index.js"),_storybook_addons__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("../../node_modules/@storybook/addons/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_13__.f,{title:"Guidelines/Colors",parameters:{docs:{container:function container(_ref2){var item,borderItem,contrastSections,context=_ref2.context,locale=context&&context.globals&&context.globals.locale,colorMode=context&&context.globals&&context.globals.colorMode,allTokens="light"===colorMode?_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__:_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_dark_json__WEBPACK_IMPORTED_MODULE_15__,darkMode="light"!==colorMode,channel=_storybook_addons__WEBPACK_IMPORTED_MODULE_17__.a.getChannel(),pathStringItem=[],levelStringItem=[],cleared=!1;function getItemPathByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].path[3]?allTokens.tokens[i].path[2]+" / "+allTokens.tokens[i].path[3]:allTokens.tokens[i].path[2]}function getItemColorByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].value}function getLevelByPath(path){for(var i=0;i<levelStringItem.length;i++){var splittedItem=levelStringItem[i].split("/");if(splittedItem[0]===path)return splittedItem[1]}}function getItemByPathString(pathString){for(var i=0;i<allTokens.tokens.length;i++){var currentItem=allTokens.tokens[i];if(currentItem.pathString===pathString)return currentItem}}function getAllSections(items){var currentSection,itemPaths=[],sections=[];items.map((function(path){return itemPaths.push(getItemPathByPath(path))}));for(var i=0;i<itemPaths.length;i++)itemPaths[i].includes("/")&&(0==sections.length?(currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/")),sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/")))):currentSection!==itemPaths[i].substr(0,itemPaths[i].indexOf("/"))&&(sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/"))),currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/"))));contrastSections=sections}function hasContrastWithoutSlash(items){var itemPaths=[];items.map((function(item){itemPaths.push(getItemPathByPath(item))}));for(var i=0;i<itemPaths.length;i++)if(!itemPaths[i].includes("/"))return!0}function setContrastStates(){item.contrastChecks&&item.contrastChecks.map((function(contrastCkeckItem){pathStringItem.push(contrastCkeckItem.path),levelStringItem.push(contrastCkeckItem.path+"/"+contrastCkeckItem.level)}))}function clearContrastStates(){pathStringItem.length=0,levelStringItem.length=0,cleared=!0}function generateTableColorRow(itemPathString,commentStringGerman,commentStringEnglish,additionalColor){return additionalColor?function setAdditionalColorSettings(){allTokens=_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__}():function resetAdditionalColorSettings(){allTokens="light"===colorMode?_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__:_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_dark_json__WEBPACK_IMPORTED_MODULE_15__}(),(item=getItemByPathString(itemPathString))?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",{style:{backgroundColor:"var(--telekom-color-background-canvas)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",padding:"4px 4px 4px 0"}},clearContrastStates(),cleared?setContrastStates():null,item.contrastChecks?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x1)",marginBottom:"var(--telekom-spacing-unit-x1)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",minWidth:"400px",minHeight:"120px"}},0!==pathStringItem.length?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingTop:"var(--telekom-spacing-unit-x1)",passingBottom:"var(--telekom-spacing-unit-x1)"}},"en"===locale?"Recommended colors for text and icons":"Empfohlene Farben für Text & Icons"):null,hasContrastWithoutSlash(pathStringItem)?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{padding:"4px 4px 4px 0",border:"none",width:"140px"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,getAllSections(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",padding:"4px 4px 4px 0",width:"200px"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600,marginRight:"10px"}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))})))})):null):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"20px",marginTop:"var(--telekom-spacing-unit-x1)",marginBottom:"var(--telekom-spacing-unit-x1)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",width:"400px",minHeight:"120px"}})),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},item.name)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},"en"===locale?commentStringEnglish:commentStringGerman)))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)",width:"330px",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"css"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.cssVariableName),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("button",{id:""+item.cssVariableName,className:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.jsPathName),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("button",{id:""+item.jsPathName,className:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:500,fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.value)))):null}function generateUIOutlinedTableColorRow(itemPathString,borderItemPathString,itemTextColorLight,borderItemColorLight,itemTextColorDark,borderItemColorDark){var _ref3;return item=getItemByPathString(itemPathString),borderItem=getItemByPathString(borderItemPathString),item&&borderItem?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",{style:{backgroundColor:darkMode?"#000":"#fff"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"0px"}},clearContrastStates(),cleared?setContrastStates():null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+borderItem.value,paddingTop:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x2)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px 4px 0px 0px",minWidth:"380px",minHeight:"80px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{padding:"var(--telekom-spacing-unit-x5)",color:""+(darkMode?borderItemColorDark:borderItemColorLight),fontSize:"12px"}},"Border color")),item.contrastChecks?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"0px 0px 4px 4px",minWidth:"380px",minHeight:"120px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:(_ref3={color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingBottom:"var(--telekom-spacing-unit-x1)"},_ref3.color=""+(darkMode?itemColorDark:itemColorLight),_ref3)},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"12px"}},"Fill color ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null)),"Recommended colors for text & icons"),hasContrastWithoutSlash(pathStringItem)?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{padding:"4px 4px 4px 0",border:"none"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"11px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,getAllSections(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",padding:"4px 4px 4px 0"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"11px",fontWeight:600}},getItemPathByPath(path),"("+getLevelByPath(path)+")"))})))})):null):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"0px 0px 4px 4px",width:"400px",minHeight:"110px",color:"var(--telekom-color-text-and-icon-standard)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"12px"}},"Fill color"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},borderItem.name)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},borderItem.comment)))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x2)",paddingLeft:"var(--telekom-spacing-unit-x5)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"css"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.cssVariableName," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.cssVariableName)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.jsPathName," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.jsPathName)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.value," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.value)))):null}function generateTableHead(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("thead",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",backgroundColor:"transparent",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Example"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Description"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",width:"342px"}},"Token")))}function generateSectionTitle(sectionTitleGerman,sectionTitleEnglish){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x12)",marginBottom:"var(--telekom-spacing-unit-x6)",fontWeight:800,fontSize:"32px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionTitleEnglish:sectionTitleGerman)}function generateSectionSubTitle(sectionSubTitleGerman,sectionSubTitleEnglish,hasFollowingText){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x6)",marginBottom:hasFollowingText?"var(--telekom-spacing-unit-x6)":"var(--telekom-spacing-unit-x8)",fontWeight:"bold",fontSize:"21px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionSubTitleEnglish:sectionSubTitleGerman)}function generateSectionDescription(sectionSubTitleGerman,sectionSubTitleEnglish){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x5)",marginBottom:"var(--telekom-spacing-unit-x5)",fontWeight:"normal",fontSize:"16px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionSubTitleEnglish:sectionSubTitleGerman))}return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_13__.e,{context:context,mdxType:"DocsContainer"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("h1",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?"Colors":"Farben"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?"Color design is one of the decisive factors for our overall visual appearance and brand recognition. With our brand color, Magenta, Deutsche Telekom is one of the few companies that can be recognized internationally by its color alone. This is why Magenta is always the dominant color in our visual appearance. To create a lively and interesting visual appearance, we can add more colors – as long as they harmonize with Magenta.":"Die Farbgestaltung ist einer der entscheidenden Faktoren für die visuelle Gesamterscheinung und Wiedererkennung unserer Marke. Mit unserer Markenfarbe Magenta ist die Deutsche Telekom eines der wenigen Unternehmen, das man international allein über seine Farbe erkennt. Deswegen ist Magenta in unserem Auftritt immer die dominante Farbe. Um einen lebendigen und interessanten Auftritt zu schaffen, können wir weitere Farben hinzufügen – solange sie mit Magenta harmonieren."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{role:"button",style:{cursor:"pointer",paddingLeft:"var(--telekom-spacing-unit-x2)"},onClick:function onClick(){!function changeModeLink(){var toggleMode=darkMode?"light":"dark";channel.emit(_storybook_core_events__WEBPACK_IMPORTED_MODULE_16__.UPDATE_GLOBALS,{globals:{colorMode:toggleMode}})}()}},function generateColorModeLinkText(){return"en"===locale?"Show "+(darkMode?"light":"dark")+" mode color palette":"Farbpalette des "+(darkMode?"Light":"Dark")+" Modes anzeigen"}()),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,"To make it as easy as possible for you to apply our color tokens, we use semantic names for the colors. If you change scale components or develop new components, pay attention to the correct use of the color tokens. This is the only way to ensure that future updates can be easily transferred to your designs at the push of a button. Only then can dark mode be implemented without additional effort. You can learn more about this concept in the guideline for"," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"?path=/story/guidelines-design-tokens--page&globals=locale:en;colorMode:dark"},"Design Tokens")):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,"Damit die Anwendung unserer Farb-Tokens möglichst einfach für dich ist, verwenden wir semantische Bezeichnungen für die Farben. Solltest du Scale Komponenten ändern oder neue Komponenten entwickeln, achte auf die korrekte Anwendung der Farb-Tokens. Nur dann ist gewährleistet, dass du künftige Updates einfach per Knopfdruck in deine Designs übertragen kannst. Auch der Dark Mode lässt sich nur dann ohne Mehraufwand umsetzen. In der Guideline"," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"?path=/story/guidelines-design-tokens--page&globals=locale:en;colorMode:dark"},"Design-Tokens"," ")," ","erfährst du mehr über das Konzept der Tokens im Design."," ")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("table",{className:"colors-table",style:{backgroundColor:darkMode?"#000":"#fff"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("thead",null,darkMode?generateSectionTitle("Primäre Farben im Dark Mode","Dark Mode Primary Colors"):generateSectionTitle("Primäre Farben im Light Mode","Light mode primary colors"),darkMode?generateSectionDescription("Unsere Markenfarbe Magenta sowie Schwarz und Grau sind die primären Farben für User Interfaces im Dark Mode.","The primary colors for user interfaces in dark mode are our brand color, Magenta, as well as black and gray."):generateSectionDescription("Unsere Markenfarbe Magenta sowie Weiß und Schwarz sind die primären Farben für User Interfaces im Light Mode. Die grundlegende Tonalität unserer Webseiten und digitalen Produkte wirkt dadurch freundlich, offen und hell.","The primary colors for user interfaces in light mode are our brand color, Magenta, as well as white and black. This makes the basic tonality of our websites and digital products friendly, open, and bright.")),generateTableHead(),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.primary.standard","Markenfarbe Magenta","Brand color, Magenta"),generateTableColorRow("color.background.canvas","Für den Hintergrund deiner Webseite oder App.","For the background of your website or app."),generateTableColorRow("color.background.surface-highlight","Für den Hintergrund von Komponenten oder Flächen, die hervorgehoben werden sollen (bspw. der Footer).","For the background of components or areas that should be highlighted (e.g., the footer).")),generateSectionTitle("Textfarben Standard","Text color standard"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.standard","Für alle Standardtexte.","For all standard text."),generateTableColorRow("color.text-&-icon.additional","Für Texte mit ergänzenden Informationen.","For text with additional information."),generateTableColorRow("color.text-&-icon.disabled","Nur für Texte im „disabled State“.","Only for text in a disabled state.")),generateSectionSubTitle("Weitere Farben für spezielle Anwendungsfälle","More colors for special use cases"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.inverted.standard","Inverted/Standard ist der umgekehrte Zustand der Standard-Textfarbe. Für Texte, die im jeweils anderen Modus invertiert dargestellt werden (Farbe Weiß im hellen Modus und Dunkelgrau im dunklen Modus).","Inverted / standard is the inverse state of the default text color. For text displayed as inverted in the other mode (white in light mode and dark gray in dark mode)."),generateTableColorRow("color.text-&-icon.inverted.additional","Inverted/Additional ist der umgekehrte Zustand der Additional-Textfarbe. Für Texte, die im jeweils anderen Modus invertiert dargestellt werden (ein dunkleres Grau im hellen Modus und ein helleres Grau im dunklen Modus).","Inverted / additional is the inverse state of the additional text color. For text displayed as inverted in the other mode (a darker gray in light mode and a lighter gray in dark mode)."),generateTableColorRow("color.text-&-icon.white.standard","Für Standardtexte, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi identisch sind, so zum Beispiel beim Primary Button.","For standard text displayed in white in both light and dark mode. This is mostly used when text is on a colored area that is identical in both modes, such as the primary button."),generateTableColorRow("color.text-&-icon.white.additional","Für ergänzende Texte, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi identisch sind, so zum Beispiel beim Primary Button.","For supplementary text displayed in white in both light and dark mode. This is mostly used when text is on a colored area that is identical in both modes, such as the primary button."),generateTableColorRow("color.text-&-icon.black.standard","Für Standardtexte, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi hell sind.","For standard text displayed in black in both light and dark mode. This is mostly used when text is on a colored area that is light in both modes."),generateTableColorRow("color.text-&-icon.black.additional","Für ergänzende Texte, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi hell sind.","For standard text displayed in black in both light and dark mode. This is mostly used when text is on a colored area that is light in both modes.")),generateSectionTitle("Textfarbe Funktion","Text color function"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard","Für unterstützende Informationen sowie für Funktionen wie Synchronisieren, Sortieren und Hinzufügen.","For supporting information as well as for functions like synchronize, sort, and add."),generateTableColorRow("color.text-&-icon.functional.success","Für Funktionen wie Senden, Anrufen und Aktivieren und zur Bestätigung einer erfolgreich durchgeführten Aktion.","For confirming a successfully performed action or for functions like send, call, and activate."),generateTableColorRow("color.text-&-icon.functional.danger","Für Fehlermeldungen oder Funktionen wie Beenden und Löschen.","For error messages or functions like exit and delete."),generateTableColorRow("color.text-&-icon.functional.warning","Für Warnungen vor möglicherweise unerwünschten Ergebnissen.","For warnings of potentially undesirable results."),generateTableColorRow("color.text-&-icon.functional.informational","Für unterstützende Informationen.","For supporting information.")),generateSectionTitle("Hintergrund Standard","Background standard"),generateTableHead(),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.background.canvas","Für den Hintergrund deiner Webseite oder App.","For the background of your website or app."),generateTableColorRow("color.background.canvas-subtle","Für den Hintergrund deiner Webseite oder App, bspw. wenn du ein card-basiertes Layout anlegst.","For the background of your website or app (e.g., when you create a card-based layout)."),generateTableColorRow("color.background.surface","Für die Hintergrundfläche von Komponenten wie Header oder Cards.","For the background area of components like headers or cards."),generateTableColorRow("color.background.surface-subtle","Für die Hintergrundfläche von Komponenten, die sich etwas vom weißen Hintergrund abheben sollen.","For the background area of components that should stand out somewhat against a white background."),generateTableColorRow("color.background.backdrop","Für die Abdunklung des Contents unter Dialogen.","For darkening the content under dialogs."),generateTableColorRow("color.background.surface-highlight","Für Hintergründe von Komponenten, die sich vom restlichen Inhalt abheben sollen, wie bspw. der Footer.","For backgrounds of components that should stand out from the rest of the content, such as the footer.")),generateSectionTitle("Background Funktion","Background function"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.success.standard","Für Hintergründe von Komponenten, die eine erfolgreiche Aktion bestätigen, wie bspw. eine Success Notification oder für Funktionen wie Senden, Anrufen und Aktivieren.","For backgrounds of components that confirm a successful action, such as a success notification, or for functions such as send, call, and activate."),generateTableColorRow("color.functional.success.subtle","Für Hintergründe von Komponenten, die eine erfolgreiche Aktion bestätigen, wie bspw. eine Success Notification.","For backgrounds of components that confirm a successful action, such as a success notification."),generateTableColorRow("color.functional.informational.standard","Für Hintergründe von Komponenten, die zusätzliche und hilfreiche Informationen bereitstellen, wie bspw. eine Informational Notification oder für Funktionen wie Speichern.","For backgrounds of components that provide additional and helpful information, such as an informational notification, or functions such as save."),generateTableColorRow("color.functional.informational.subtle","Für Hintergründe von Komponenten, die zusätzliche und hilfreiche Informationen bereitstellen, wie bspw. eine Success Notification.","For backgrounds of components that provide additional and helpful information, such as a success notification."),generateTableColorRow("color.functional.warning.standard","Für Hintergründe von Komponenten, die vor möglicherweise unerwünschten Ergebnissen warnen, wie bspw. die Warning Notification.","For backgrounds of components that warn of potentially undesirable results, such as a warning notification."),generateTableColorRow("color.functional.warning.subtle","Für Hintergründe von Komponenten, die vor möglicherweise unerwünschten Ergebnissen warnen, wie bspw. die Warning Notification.","For backgrounds of components that warn of potentially undesirable results, such as a warning notification."),generateTableColorRow("color.functional.danger.standard","Für Hintergründe von Komponenten, die über eine fehlgeschlagene Aktion oder einen Fehler informieren, wie bspw. die Error Notification, oder Funktionen wie Löschen.","For backgrounds of components that inform about a failed action or error, such as the error notification, or functions like delete."),generateTableColorRow("color.functional.danger.subtle","Für Hintergründe von Komponenten, die über eine fehlgeschlagene Aktion oder einen Fehler informieren, wie bspw. die Error Notification.","For backgrounds of components that inform about a failed action or error, such as error notification.")),generateSectionTitle("UI","UI"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.ui.base","","",!0),generateTableColorRow("color.ui.subtle"),generateTableColorRow("color.ui.light"),generateTableColorRow("color.ui.regular"),generateTableColorRow("color.ui.strong"),generateTableColorRow("color.ui.extra-strong"),generateTableColorRow("color.ui.black","Für Elemente, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden.","Use for elements that are displayed in black in both light and dark mode."),generateTableColorRow("color.ui.white","Für Elemente, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden.","Use for elements that are displayed in white in both light and dark mode.")),generateSectionSubTitle("UI Border","UI border"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.ui.border.standard","Für Outlines von Komponenten ohne sichtbare Füllung.","For outlines of components without visible filling.")),generateSectionTitle("Agent States","Agent states"),generateSectionDescription("Z. B. Primary Button","e.g., Primary Button"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.primary.standard","Markenfarbe Magenta","Brand color, Magenta"),generateTableColorRow("color.text-&-icon.primary.hovered"),generateTableColorRow("color.text-&-icon.primary.pressed")),generateSectionSubTitle("Text-Link","Text link"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard"),generateTableColorRow("color.text-&-icon.link.hovered"),generateTableColorRow("color.text-&-icon.link.visited"),generateTableColorRow("color.text-&-icon.link.active")),generateSectionSubTitle("Funktionale Elemente","Functional elements"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.success.standard"),generateTableColorRow("color.functional.success.hovered"),generateTableColorRow("color.functional.success.pressed")),generateSectionSubTitle("Border Focus State","Border focus state"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.focus")),generateSectionSubTitle("UI Outlined","UI outlined elements"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateUIOutlinedTableColorRow("color.ui.state-fill.standard","color.ui.border.standard",0,"#fff",0,"#fff"),generateUIOutlinedTableColorRow("color.ui.state-fill.hovered","color.ui.border.hovered",0,"#fff",0,"#fff"),generateUIOutlinedTableColorRow("color.ui.state-fill.pressed","color.ui.border.pressed",0,"#fff",0,"#000"),generateUIOutlinedTableColorRow("color.ui.state-fill.standard","color.ui.border.disabled",0,"#000",0,"#fff")),generateSectionTitle("Additional","Additional"),generateSectionDescription("Für Farbakzente und Datenvisualisierungen empfehlen wir diese zusätzlichen Farben:","For color accents and data visualizations, we recommend these additional colors:"),generateSectionSubTitle("Violett","Violet"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.violet.0","","",!0),generateTableColorRow("color.additional.violet.100","","",!0),generateTableColorRow("color.additional.violet.200","","",!0),generateTableColorRow("color.additional.violet.300","","",!0),generateTableColorRow("color.additional.violet.400","","",!0),generateTableColorRow("color.additional.violet.500","","",!0),generateTableColorRow("color.additional.violet.600","","",!0),generateTableColorRow("color.additional.violet.700","","",!0),generateTableColorRow("color.additional.violet.800","","",!0),generateTableColorRow("color.additional.violet.900","","",!0)),generateSectionSubTitle("Blau","Blue"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.blue.0","","",!0),generateTableColorRow("color.additional.blue.100","","",!0),generateTableColorRow("color.additional.blue.200","","",!0),generateTableColorRow("color.additional.blue.300","","",!0),generateTableColorRow("color.additional.blue.400","","",!0),generateTableColorRow("color.additional.blue.500","","",!0),generateTableColorRow("color.additional.blue.600","","",!0),generateTableColorRow("color.additional.blue.700","","",!0),generateTableColorRow("color.additional.blue.800","","",!0),generateTableColorRow("color.additional.blue.900","","",!0)),generateSectionSubTitle("Türkis","Cyan"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.cyan.0","","",!0),generateTableColorRow("color.additional.cyan.100","","",!0),generateTableColorRow("color.additional.cyan.200","","",!0),generateTableColorRow("color.additional.cyan.300","","",!0),generateTableColorRow("color.additional.cyan.400","","",!0),generateTableColorRow("color.additional.cyan.500","","",!0),generateTableColorRow("color.additional.cyan.600","","",!0),generateTableColorRow("color.additional.cyan.700","","",!0),generateTableColorRow("color.additional.cyan.800","","",!0),generateTableColorRow("color.additional.cyan.900","","",!0)),generateSectionSubTitle("Teal","Teal"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.teal.0","","",!0),generateTableColorRow("color.additional.teal.100","","",!0),generateTableColorRow("color.additional.teal.200","","",!0),generateTableColorRow("color.additional.teal.300","","",!0),generateTableColorRow("color.additional.teal.400","","",!0),generateTableColorRow("color.additional.teal.500","","",!0),generateTableColorRow("color.additional.teal.600","","",!0),generateTableColorRow("color.additional.teal.700","","",!0),generateTableColorRow("color.additional.teal.800","","",!0),generateTableColorRow("color.additional.teal.900","","",!0)),generateSectionSubTitle("Grün","Green"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.green.0","","",!0),generateTableColorRow("color.additional.green.100","","",!0),generateTableColorRow("color.additional.green.200","","",!0),generateTableColorRow("color.additional.green.300","","",!0),generateTableColorRow("color.additional.green.400","","",!0),generateTableColorRow("color.additional.green.500","","",!0),generateTableColorRow("color.additional.green.600","","",!0),generateTableColorRow("color.additional.green.700","","",!0),generateTableColorRow("color.additional.green.800","","",!0),generateTableColorRow("color.additional.green.900","","",!0)),generateSectionSubTitle("Olive","Olive"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.olive.0","","",!0),generateTableColorRow("color.additional.olive.100","","",!0),generateTableColorRow("color.additional.olive.200","","",!0),generateTableColorRow("color.additional.olive.300","","",!0),generateTableColorRow("color.additional.olive.400","","",!0),generateTableColorRow("color.additional.olive.500","","",!0),generateTableColorRow("color.additional.olive.600","","",!0),generateTableColorRow("color.additional.olive.700","","",!0),generateTableColorRow("color.additional.olive.800","","",!0),generateTableColorRow("color.additional.olive.900","","",!0)),generateSectionSubTitle("Braun","Brown"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.brown.0","","",!0),generateTableColorRow("color.additional.brown.100","","",!0),generateTableColorRow("color.additional.brown.200","","",!0),generateTableColorRow("color.additional.brown.300","","",!0),generateTableColorRow("color.additional.brown.400","","",!0),generateTableColorRow("color.additional.brown.500","","",!0),generateTableColorRow("color.additional.brown.600","","",!0),generateTableColorRow("color.additional.brown.700","","",!0),generateTableColorRow("color.additional.brown.800","","",!0),generateTableColorRow("color.additional.brown.900","","",!0)),generateSectionSubTitle("Gelb","Yellow"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.yellow.0","","",!0),generateTableColorRow("color.additional.yellow.100","","",!0),generateTableColorRow("color.additional.yellow.200","","",!0),generateTableColorRow("color.additional.yellow.300","","",!0),generateTableColorRow("color.additional.yellow.400","","",!0),generateTableColorRow("color.additional.yellow.500","","",!0),generateTableColorRow("color.additional.yellow.600","","",!0),generateTableColorRow("color.additional.yellow.700","","",!0),generateTableColorRow("color.additional.yellow.800","","",!0),generateTableColorRow("color.additional.yellow.900","","",!0)),generateSectionSubTitle("Orange","Orange"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.orange.0","","",!0),generateTableColorRow("color.additional.orange.100","","",!0),generateTableColorRow("color.additional.orange.200","","",!0),generateTableColorRow("color.additional.orange.300","","",!0),generateTableColorRow("color.additional.orange.400","","",!0),generateTableColorRow("color.additional.orange.500","","",!0),generateTableColorRow("color.additional.orange.600","","",!0),generateTableColorRow("color.additional.orange.700","","",!0),generateTableColorRow("color.additional.orange.800","","",!0),generateTableColorRow("color.additional.orange.900","","",!0)),generateSectionSubTitle("Rot","Red"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.red.0","","",!0),generateTableColorRow("color.additional.red.100","","",!0),generateTableColorRow("color.additional.red.200","","",!0),generateTableColorRow("color.additional.red.300","","",!0),generateTableColorRow("color.additional.red.400","","",!0),generateTableColorRow("color.additional.red.500","","",!0),generateTableColorRow("color.additional.red.600","","",!0),generateTableColorRow("color.additional.red.700","","",!0),generateTableColorRow("color.additional.red.800","","",!0),generateTableColorRow("color.additional.red.900","","",!0))))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Colors",parameters:{docs:{container:function container(_ref4){var item,borderItem,contrastSections,context=_ref4.context,locale=context&&context.globals&&context.globals.locale,colorMode=context&&context.globals&&context.globals.colorMode,allTokens="light"===colorMode?_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__:_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_dark_json__WEBPACK_IMPORTED_MODULE_15__,darkMode="light"!==colorMode,channel=_storybook_addons__WEBPACK_IMPORTED_MODULE_17__.a.getChannel(),pathStringItem=[],levelStringItem=[],cleared=!1;function getItemPathByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].path[3]?allTokens.tokens[i].path[2]+" / "+allTokens.tokens[i].path[3]:allTokens.tokens[i].path[2]}function getItemColorByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].value}function getLevelByPath(path){for(var i=0;i<levelStringItem.length;i++){var splittedItem=levelStringItem[i].split("/");if(splittedItem[0]===path)return splittedItem[1]}}function getItemByPathString(pathString){for(var i=0;i<allTokens.tokens.length;i++){var currentItem=allTokens.tokens[i];if(currentItem.pathString===pathString)return currentItem}}function getAllSections(items){var currentSection,itemPaths=[],sections=[];items.map((function(path){return itemPaths.push(getItemPathByPath(path))}));for(var i=0;i<itemPaths.length;i++)itemPaths[i].includes("/")&&(0==sections.length?(currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/")),sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/")))):currentSection!==itemPaths[i].substr(0,itemPaths[i].indexOf("/"))&&(sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/"))),currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/"))));contrastSections=sections}function hasContrastWithoutSlash(items){var itemPaths=[];items.map((function(item){itemPaths.push(getItemPathByPath(item))}));for(var i=0;i<itemPaths.length;i++)if(!itemPaths[i].includes("/"))return!0}function setContrastStates(){item.contrastChecks&&item.contrastChecks.map((function(contrastCkeckItem){pathStringItem.push(contrastCkeckItem.path),levelStringItem.push(contrastCkeckItem.path+"/"+contrastCkeckItem.level)}))}function clearContrastStates(){pathStringItem.length=0,levelStringItem.length=0,cleared=!0}function generateTableColorRow(itemPathString,commentStringGerman,commentStringEnglish,additionalColor){return additionalColor?function setAdditionalColorSettings(){allTokens=_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__}():function resetAdditionalColorSettings(){allTokens="light"===colorMode?_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_light_json__WEBPACK_IMPORTED_MODULE_14__:_telekom_design_tokens_dist_telekom_docs_json_telekom_design_tokens_dark_json__WEBPACK_IMPORTED_MODULE_15__}(),(item=getItemByPathString(itemPathString))?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",{style:{backgroundColor:"var(--telekom-color-background-canvas)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",padding:"4px 4px 4px 0"}},clearContrastStates(),cleared?setContrastStates():null,item.contrastChecks?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x1)",marginBottom:"var(--telekom-spacing-unit-x1)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",minWidth:"400px",minHeight:"120px"}},0!==pathStringItem.length?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingTop:"var(--telekom-spacing-unit-x1)",passingBottom:"var(--telekom-spacing-unit-x1)"}},"en"===locale?"Recommended colors for text and icons":"Empfohlene Farben für Text & Icons"):null,hasContrastWithoutSlash(pathStringItem)?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{padding:"4px 4px 4px 0",border:"none",width:"140px"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,getAllSections(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",padding:"4px 4px 4px 0",width:"200px"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600,marginRight:"10px"}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))})))})):null):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"20px",marginTop:"var(--telekom-spacing-unit-x1)",marginBottom:"var(--telekom-spacing-unit-x1)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",width:"400px",minHeight:"120px"}})),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},item.name)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},"en"===locale?commentStringEnglish:commentStringGerman)))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)",width:"330px",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"css"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.cssVariableName),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("button",{id:""+item.cssVariableName,className:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.jsPathName),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("button",{id:""+item.jsPathName,className:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:500,fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.value)))):null}function generateUIOutlinedTableColorRow(itemPathString,borderItemPathString,itemTextColorLight,borderItemColorLight,itemTextColorDark,borderItemColorDark){var _ref5;return item=getItemByPathString(itemPathString),borderItem=getItemByPathString(borderItemPathString),item&&borderItem?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",{style:{backgroundColor:darkMode?"#000":"#fff"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"0px"}},clearContrastStates(),cleared?setContrastStates():null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+borderItem.value,paddingTop:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x2)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px 4px 0px 0px",minWidth:"380px",minHeight:"80px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{padding:"var(--telekom-spacing-unit-x5)",color:""+(darkMode?borderItemColorDark:borderItemColorLight),fontSize:"12px"}},"Border color")),item.contrastChecks?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"0px 0px 4px 4px",minWidth:"380px",minHeight:"120px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:(_ref5={color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingBottom:"var(--telekom-spacing-unit-x1)"},_ref5.color=""+(darkMode?itemColorDark:itemColorLight),_ref5)},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"12px"}},"Fill color ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null)),"Recommended colors for text & icons"),hasContrastWithoutSlash(pathStringItem)?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{padding:"4px 4px 4px 0",border:"none"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"11px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,getAllSections(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{border:"none",padding:"4px 4px 4px 0"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"#"+path},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"11px",fontWeight:600}},getItemPathByPath(path),"("+getLevelByPath(path)+")"))})))})):null):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"0px 0px 4px 4px",width:"400px",minHeight:"110px",color:"var(--telekom-color-text-and-icon-standard)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"12px"}},"Fill color"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},borderItem.name)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},borderItem.comment)))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x2)",paddingLeft:"var(--telekom-spacing-unit-x5)"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"css"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.cssVariableName," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.cssVariableName)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.jsPathName," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.jsPathName)),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"60px",backgroundColor:darkMode?"#38393b":"#f0f1f1"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("span",{style:{display:"inline-block",fontSize:"11px",paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},"border: ",borderItem.value," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),"fill: ",item.value)))):null}function generateTableHead(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("thead",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tr",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",backgroundColor:"transparent",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Example"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Description"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",width:"342px"}},"Token")))}function generateSectionTitle(sectionTitleGerman,sectionTitleEnglish){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x12)",marginBottom:"var(--telekom-spacing-unit-x6)",fontWeight:800,fontSize:"32px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionTitleEnglish:sectionTitleGerman)}function generateSectionSubTitle(sectionSubTitleGerman,sectionSubTitleEnglish,hasFollowingText){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x6)",marginBottom:hasFollowingText?"var(--telekom-spacing-unit-x6)":"var(--telekom-spacing-unit-x8)",fontWeight:"bold",fontSize:"21px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionSubTitleEnglish:sectionSubTitleGerman)}function generateSectionDescription(sectionSubTitleGerman,sectionSubTitleEnglish){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x5)",marginBottom:"var(--telekom-spacing-unit-x5)",fontWeight:"normal",fontSize:"16px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionSubTitleEnglish:sectionSubTitleGerman))}return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_13__.e,{context:context},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("h1",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?"Colors":"Farben"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?"Color design is one of the decisive factors for our overall visual appearance and brand recognition. With our brand color, Magenta, Deutsche Telekom is one of the few companies that can be recognized internationally by its color alone. This is why Magenta is always the dominant color in our visual appearance. To create a lively and interesting visual appearance, we can add more colors – as long as they harmonize with Magenta.":"Die Farbgestaltung ist einer der entscheidenden Faktoren für die visuelle Gesamterscheinung und Wiedererkennung unserer Marke. Mit unserer Markenfarbe Magenta ist die Deutsche Telekom eines der wenigen Unternehmen, das man international allein über seine Farbe erkennt. Deswegen ist Magenta in unserem Auftritt immer die dominante Farbe. Um einen lebendigen und interessanten Auftritt zu schaffen, können wir weitere Farben hinzufügen – solange sie mit Magenta harmonieren."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{role:"button",style:{cursor:"pointer",paddingLeft:"var(--telekom-spacing-unit-x2)"},onClick:function onClick(){!function changeModeLink(){var toggleMode=darkMode?"light":"dark";channel.emit(_storybook_core_events__WEBPACK_IMPORTED_MODULE_16__.UPDATE_GLOBALS,{globals:{colorMode:toggleMode}})}()}},function generateColorModeLinkText(){return"en"===locale?"Show "+(darkMode?"light":"dark")+" mode color palette":"Farbpalette des "+(darkMode?"Light":"Dark")+" Modes anzeigen"}()),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("br",null),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("div",{style:{paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,"To make it as easy as possible for you to apply our color tokens, we use semantic names for the colors. If you change scale components or develop new components, pay attention to the correct use of the color tokens. This is the only way to ensure that future updates can be easily transferred to your designs at the push of a button. Only then can dark mode be implemented without additional effort. You can learn more about this concept in the guideline for"," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"?path=/story/guidelines-design-tokens--page&globals=locale:en;colorMode:dark"},"Design Tokens")):Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("p",null,"Damit die Anwendung unserer Farb-Tokens möglichst einfach für dich ist, verwenden wir semantische Bezeichnungen für die Farben. Solltest du Scale Komponenten ändern oder neue Komponenten entwickeln, achte auf die korrekte Anwendung der Farb-Tokens. Nur dann ist gewährleistet, dass du künftige Updates einfach per Knopfdruck in deine Designs übertragen kannst. Auch der Dark Mode lässt sich nur dann ohne Mehraufwand umsetzen. In der Guideline"," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("a",{href:"?path=/story/guidelines-design-tokens--page&globals=locale:en;colorMode:dark"},"Design-Tokens"," ")," ","erfährst du mehr über das Konzept der Tokens im Design."," ")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("table",{className:"colors-table",style:{backgroundColor:darkMode?"#000":"#fff"}},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("thead",null,darkMode?generateSectionTitle("Primäre Farben im Dark Mode","Dark Mode Primary Colors"):generateSectionTitle("Primäre Farben im Light Mode","Light mode primary colors"),darkMode?generateSectionDescription("Unsere Markenfarbe Magenta sowie Schwarz und Grau sind die primären Farben für User Interfaces im Dark Mode.","The primary colors for user interfaces in dark mode are our brand color, Magenta, as well as black and gray."):generateSectionDescription("Unsere Markenfarbe Magenta sowie Weiß und Schwarz sind die primären Farben für User Interfaces im Light Mode. Die grundlegende Tonalität unserer Webseiten und digitalen Produkte wirkt dadurch freundlich, offen und hell.","The primary colors for user interfaces in light mode are our brand color, Magenta, as well as white and black. This makes the basic tonality of our websites and digital products friendly, open, and bright.")),generateTableHead(),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.primary.standard","Markenfarbe Magenta","Brand color, Magenta"),generateTableColorRow("color.background.canvas","Für den Hintergrund deiner Webseite oder App.","For the background of your website or app."),generateTableColorRow("color.background.surface-highlight","Für den Hintergrund von Komponenten oder Flächen, die hervorgehoben werden sollen (bspw. der Footer).","For the background of components or areas that should be highlighted (e.g., the footer).")),generateSectionTitle("Textfarben Standard","Text color standard"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.standard","Für alle Standardtexte.","For all standard text."),generateTableColorRow("color.text-&-icon.additional","Für Texte mit ergänzenden Informationen.","For text with additional information."),generateTableColorRow("color.text-&-icon.disabled","Nur für Texte im „disabled State“.","Only for text in a disabled state.")),generateSectionSubTitle("Weitere Farben für spezielle Anwendungsfälle","More colors for special use cases"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.inverted.standard","Inverted/Standard ist der umgekehrte Zustand der Standard-Textfarbe. Für Texte, die im jeweils anderen Modus invertiert dargestellt werden (Farbe Weiß im hellen Modus und Dunkelgrau im dunklen Modus).","Inverted / standard is the inverse state of the default text color. For text displayed as inverted in the other mode (white in light mode and dark gray in dark mode)."),generateTableColorRow("color.text-&-icon.inverted.additional","Inverted/Additional ist der umgekehrte Zustand der Additional-Textfarbe. Für Texte, die im jeweils anderen Modus invertiert dargestellt werden (ein dunkleres Grau im hellen Modus und ein helleres Grau im dunklen Modus).","Inverted / additional is the inverse state of the additional text color. For text displayed as inverted in the other mode (a darker gray in light mode and a lighter gray in dark mode)."),generateTableColorRow("color.text-&-icon.white.standard","Für Standardtexte, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi identisch sind, so zum Beispiel beim Primary Button.","For standard text displayed in white in both light and dark mode. This is mostly used when text is on a colored area that is identical in both modes, such as the primary button."),generateTableColorRow("color.text-&-icon.white.additional","Für ergänzende Texte, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi identisch sind, so zum Beispiel beim Primary Button.","For supplementary text displayed in white in both light and dark mode. This is mostly used when text is on a colored area that is identical in both modes, such as the primary button."),generateTableColorRow("color.text-&-icon.black.standard","Für Standardtexte, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi hell sind.","For standard text displayed in black in both light and dark mode. This is mostly used when text is on a colored area that is light in both modes."),generateTableColorRow("color.text-&-icon.black.additional","Für ergänzende Texte, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden. Dies findet meist Anwendung, wenn Texte auf Farbflächen stehen, die in beiden Modi hell sind.","For standard text displayed in black in both light and dark mode. This is mostly used when text is on a colored area that is light in both modes.")),generateSectionTitle("Textfarbe Funktion","Text color function"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard","Für unterstützende Informationen sowie für Funktionen wie Synchronisieren, Sortieren und Hinzufügen.","For supporting information as well as for functions like synchronize, sort, and add."),generateTableColorRow("color.text-&-icon.functional.success","Für Funktionen wie Senden, Anrufen und Aktivieren und zur Bestätigung einer erfolgreich durchgeführten Aktion.","For confirming a successfully performed action or for functions like send, call, and activate."),generateTableColorRow("color.text-&-icon.functional.danger","Für Fehlermeldungen oder Funktionen wie Beenden und Löschen.","For error messages or functions like exit and delete."),generateTableColorRow("color.text-&-icon.functional.warning","Für Warnungen vor möglicherweise unerwünschten Ergebnissen.","For warnings of potentially undesirable results."),generateTableColorRow("color.text-&-icon.functional.informational","Für unterstützende Informationen.","For supporting information.")),generateSectionTitle("Hintergrund Standard","Background standard"),generateTableHead(),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.background.canvas","Für den Hintergrund deiner Webseite oder App.","For the background of your website or app."),generateTableColorRow("color.background.canvas-subtle","Für den Hintergrund deiner Webseite oder App, bspw. wenn du ein card-basiertes Layout anlegst.","For the background of your website or app (e.g., when you create a card-based layout)."),generateTableColorRow("color.background.surface","Für die Hintergrundfläche von Komponenten wie Header oder Cards.","For the background area of components like headers or cards."),generateTableColorRow("color.background.surface-subtle","Für die Hintergrundfläche von Komponenten, die sich etwas vom weißen Hintergrund abheben sollen.","For the background area of components that should stand out somewhat against a white background."),generateTableColorRow("color.background.backdrop","Für die Abdunklung des Contents unter Dialogen.","For darkening the content under dialogs."),generateTableColorRow("color.background.surface-highlight","Für Hintergründe von Komponenten, die sich vom restlichen Inhalt abheben sollen, wie bspw. der Footer.","For backgrounds of components that should stand out from the rest of the content, such as the footer.")),generateSectionTitle("Background Funktion","Background function"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.success.standard","Für Hintergründe von Komponenten, die eine erfolgreiche Aktion bestätigen, wie bspw. eine Success Notification oder für Funktionen wie Senden, Anrufen und Aktivieren.","For backgrounds of components that confirm a successful action, such as a success notification, or for functions such as send, call, and activate."),generateTableColorRow("color.functional.success.subtle","Für Hintergründe von Komponenten, die eine erfolgreiche Aktion bestätigen, wie bspw. eine Success Notification.","For backgrounds of components that confirm a successful action, such as a success notification."),generateTableColorRow("color.functional.informational.standard","Für Hintergründe von Komponenten, die zusätzliche und hilfreiche Informationen bereitstellen, wie bspw. eine Informational Notification oder für Funktionen wie Speichern.","For backgrounds of components that provide additional and helpful information, such as an informational notification, or functions such as save."),generateTableColorRow("color.functional.informational.subtle","Für Hintergründe von Komponenten, die zusätzliche und hilfreiche Informationen bereitstellen, wie bspw. eine Success Notification.","For backgrounds of components that provide additional and helpful information, such as a success notification."),generateTableColorRow("color.functional.warning.standard","Für Hintergründe von Komponenten, die vor möglicherweise unerwünschten Ergebnissen warnen, wie bspw. die Warning Notification.","For backgrounds of components that warn of potentially undesirable results, such as a warning notification."),generateTableColorRow("color.functional.warning.subtle","Für Hintergründe von Komponenten, die vor möglicherweise unerwünschten Ergebnissen warnen, wie bspw. die Warning Notification.","For backgrounds of components that warn of potentially undesirable results, such as a warning notification."),generateTableColorRow("color.functional.danger.standard","Für Hintergründe von Komponenten, die über eine fehlgeschlagene Aktion oder einen Fehler informieren, wie bspw. die Error Notification, oder Funktionen wie Löschen.","For backgrounds of components that inform about a failed action or error, such as the error notification, or functions like delete."),generateTableColorRow("color.functional.danger.subtle","Für Hintergründe von Komponenten, die über eine fehlgeschlagene Aktion oder einen Fehler informieren, wie bspw. die Error Notification.","For backgrounds of components that inform about a failed action or error, such as error notification.")),generateSectionTitle("UI","UI"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.ui.base","","",!0),generateTableColorRow("color.ui.subtle"),generateTableColorRow("color.ui.light"),generateTableColorRow("color.ui.regular"),generateTableColorRow("color.ui.strong"),generateTableColorRow("color.ui.extra-strong"),generateTableColorRow("color.ui.black","Für Elemente, die sowohl im hellen als auch im dunklen Modus in schwarzer Farbe dargestellt werden.","Use for elements that are displayed in black in both light and dark mode."),generateTableColorRow("color.ui.white","Für Elemente, die sowohl im hellen als auch im dunklen Modus in weißer Farbe dargestellt werden.","Use for elements that are displayed in white in both light and dark mode.")),generateSectionSubTitle("UI Border","UI border"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.ui.border.standard","Für Outlines von Komponenten ohne sichtbare Füllung.","For outlines of components without visible filling.")),generateSectionTitle("Agent States","Agent states"),generateSectionDescription("Z. B. Primary Button","e.g., Primary Button"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.primary.standard","Markenfarbe Magenta","Brand color, Magenta"),generateTableColorRow("color.text-&-icon.primary.hovered"),generateTableColorRow("color.text-&-icon.primary.pressed")),generateSectionSubTitle("Text-Link","Text link"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard"),generateTableColorRow("color.text-&-icon.link.hovered"),generateTableColorRow("color.text-&-icon.link.visited"),generateTableColorRow("color.text-&-icon.link.active")),generateSectionSubTitle("Funktionale Elemente","Functional elements"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.success.standard"),generateTableColorRow("color.functional.success.hovered"),generateTableColorRow("color.functional.success.pressed")),generateSectionSubTitle("Border Focus State","Border focus state"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.functional.focus")),generateSectionSubTitle("UI Outlined","UI outlined elements"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateUIOutlinedTableColorRow("color.ui.state-fill.standard","color.ui.border.standard",0,"#fff",0,"#fff"),generateUIOutlinedTableColorRow("color.ui.state-fill.hovered","color.ui.border.hovered",0,"#fff",0,"#fff"),generateUIOutlinedTableColorRow("color.ui.state-fill.pressed","color.ui.border.pressed",0,"#fff",0,"#000"),generateUIOutlinedTableColorRow("color.ui.state-fill.standard","color.ui.border.disabled",0,"#000",0,"#fff")),generateSectionTitle("Additional","Additional"),generateSectionDescription("Für Farbakzente und Datenvisualisierungen empfehlen wir diese zusätzlichen Farben:","For color accents and data visualizations, we recommend these additional colors:"),generateSectionSubTitle("Violett","Violet"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.violet.0","","",!0),generateTableColorRow("color.additional.violet.100","","",!0),generateTableColorRow("color.additional.violet.200","","",!0),generateTableColorRow("color.additional.violet.300","","",!0),generateTableColorRow("color.additional.violet.400","","",!0),generateTableColorRow("color.additional.violet.500","","",!0),generateTableColorRow("color.additional.violet.600","","",!0),generateTableColorRow("color.additional.violet.700","","",!0),generateTableColorRow("color.additional.violet.800","","",!0),generateTableColorRow("color.additional.violet.900","","",!0)),generateSectionSubTitle("Blau","Blue"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.blue.0","","",!0),generateTableColorRow("color.additional.blue.100","","",!0),generateTableColorRow("color.additional.blue.200","","",!0),generateTableColorRow("color.additional.blue.300","","",!0),generateTableColorRow("color.additional.blue.400","","",!0),generateTableColorRow("color.additional.blue.500","","",!0),generateTableColorRow("color.additional.blue.600","","",!0),generateTableColorRow("color.additional.blue.700","","",!0),generateTableColorRow("color.additional.blue.800","","",!0),generateTableColorRow("color.additional.blue.900","","",!0)),generateSectionSubTitle("Türkis","Cyan"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.cyan.0","","",!0),generateTableColorRow("color.additional.cyan.100","","",!0),generateTableColorRow("color.additional.cyan.200","","",!0),generateTableColorRow("color.additional.cyan.300","","",!0),generateTableColorRow("color.additional.cyan.400","","",!0),generateTableColorRow("color.additional.cyan.500","","",!0),generateTableColorRow("color.additional.cyan.600","","",!0),generateTableColorRow("color.additional.cyan.700","","",!0),generateTableColorRow("color.additional.cyan.800","","",!0),generateTableColorRow("color.additional.cyan.900","","",!0)),generateSectionSubTitle("Teal","Teal"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.teal.0","","",!0),generateTableColorRow("color.additional.teal.100","","",!0),generateTableColorRow("color.additional.teal.200","","",!0),generateTableColorRow("color.additional.teal.300","","",!0),generateTableColorRow("color.additional.teal.400","","",!0),generateTableColorRow("color.additional.teal.500","","",!0),generateTableColorRow("color.additional.teal.600","","",!0),generateTableColorRow("color.additional.teal.700","","",!0),generateTableColorRow("color.additional.teal.800","","",!0),generateTableColorRow("color.additional.teal.900","","",!0)),generateSectionSubTitle("Grün","Green"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.green.0","","",!0),generateTableColorRow("color.additional.green.100","","",!0),generateTableColorRow("color.additional.green.200","","",!0),generateTableColorRow("color.additional.green.300","","",!0),generateTableColorRow("color.additional.green.400","","",!0),generateTableColorRow("color.additional.green.500","","",!0),generateTableColorRow("color.additional.green.600","","",!0),generateTableColorRow("color.additional.green.700","","",!0),generateTableColorRow("color.additional.green.800","","",!0),generateTableColorRow("color.additional.green.900","","",!0)),generateSectionSubTitle("Olive","Olive"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.olive.0","","",!0),generateTableColorRow("color.additional.olive.100","","",!0),generateTableColorRow("color.additional.olive.200","","",!0),generateTableColorRow("color.additional.olive.300","","",!0),generateTableColorRow("color.additional.olive.400","","",!0),generateTableColorRow("color.additional.olive.500","","",!0),generateTableColorRow("color.additional.olive.600","","",!0),generateTableColorRow("color.additional.olive.700","","",!0),generateTableColorRow("color.additional.olive.800","","",!0),generateTableColorRow("color.additional.olive.900","","",!0)),generateSectionSubTitle("Braun","Brown"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.brown.0","","",!0),generateTableColorRow("color.additional.brown.100","","",!0),generateTableColorRow("color.additional.brown.200","","",!0),generateTableColorRow("color.additional.brown.300","","",!0),generateTableColorRow("color.additional.brown.400","","",!0),generateTableColorRow("color.additional.brown.500","","",!0),generateTableColorRow("color.additional.brown.600","","",!0),generateTableColorRow("color.additional.brown.700","","",!0),generateTableColorRow("color.additional.brown.800","","",!0),generateTableColorRow("color.additional.brown.900","","",!0)),generateSectionSubTitle("Gelb","Yellow"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.yellow.0","","",!0),generateTableColorRow("color.additional.yellow.100","","",!0),generateTableColorRow("color.additional.yellow.200","","",!0),generateTableColorRow("color.additional.yellow.300","","",!0),generateTableColorRow("color.additional.yellow.400","","",!0),generateTableColorRow("color.additional.yellow.500","","",!0),generateTableColorRow("color.additional.yellow.600","","",!0),generateTableColorRow("color.additional.yellow.700","","",!0),generateTableColorRow("color.additional.yellow.800","","",!0),generateTableColorRow("color.additional.yellow.900","","",!0)),generateSectionSubTitle("Orange","Orange"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.orange.0","","",!0),generateTableColorRow("color.additional.orange.100","","",!0),generateTableColorRow("color.additional.orange.200","","",!0),generateTableColorRow("color.additional.orange.300","","",!0),generateTableColorRow("color.additional.orange.400","","",!0),generateTableColorRow("color.additional.orange.500","","",!0),generateTableColorRow("color.additional.orange.600","","",!0),generateTableColorRow("color.additional.orange.700","","",!0),generateTableColorRow("color.additional.orange.800","","",!0),generateTableColorRow("color.additional.orange.900","","",!0)),generateSectionSubTitle("Rot","Red"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)("tbody",null,generateTableColorRow("color.additional.red.0","","",!0),generateTableColorRow("color.additional.red.100","","",!0),generateTableColorRow("color.additional.red.200","","",!0),generateTableColorRow("color.additional.red.300","","",!0),generateTableColorRow("color.additional.red.400","","",!0),generateTableColorRow("color.additional.red.500","","",!0),generateTableColorRow("color.additional.red.600","","",!0),generateTableColorRow("color.additional.red.700","","",!0),generateTableColorRow("color.additional.red.800","","",!0),generateTableColorRow("color.additional.red.900","","",!0))))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_13__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_12__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./stories/guidelines/DesignTokens.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),DesignTokens_en="# Telekom Design Tokens\n\n## What are design tokens?\n\nDesign tokens are the variables of our designs. They centrally store the values for colors, typography, spacing, or radii – in contrast to hard-coded values. As a result, they help establish consistent product development. Handing designs off for development is less prone to errors because developers can select the right token from a predefined package. And tokens can update globally and change automatically for all projects.\n\n## How does Scale implement design tokens in practice?\n\nThe design tokens are created in a JSON format and converted into formats that can be used in Sketch, Figma, CSS, or Javascript by a program called Style Dictionary. The Sketch & Figma libraries are created by using the respective outputs from Style Dictionary. The Scale code components use the design token package as well. As a developer, you can pull the design tokens directly from GitHub into your project. This assures that everyone at Deutsche Telekom works with the same design principles to create a consistent, high-quality experience for our customers.\n\n## How designers work with design tokens\n\nWe have converted the design tokens into color, text, and shadow styles for Sketch and Figma. As a designer, you can work like you always have, using styles for your designs. Using semantic token names like Text & Icon or Link will make it easier to understand and remember what to use specific styles for. With the help of the tokens, you can also easily change the designs from light to dark mode to make sure that dark mode works well too. When we update the tokens, you just need to accept the update, and everything will update automatically.\n\n## How developers work with design tokens\n\nAs a developer, you can include the tokens as CSS variables or Javascript objects. This way, you can easily implement the styles you receive from the designers. By using the correct tokens, no extra implementation is needed for dark mode. Whenever a token needs to update, all you have to do is pull in the latest changes from GitHub or npm, and your code will update automatically. You can find the core and semantics tokens in the @telekom/design-tokens repo (folder: src). By using Scale or the design tokens repository, you only need to take care of the semantic tokens.\n\n[Color Tokens](.?path=/docs/guidelines-colors--page)\n\n[Shadows](./?path=/docs/guidelines-shadows--page)\n\n## Light and dark mode\n\nDesign tokens are the basis for an intuitive light and dark mode. In this guideline, you will learn more about the advantages of dark mode and how to implement it:\n[Light and dark mode](./?path=/docs/guidelines-light-and-dark-mode--page)\n\n## The advantages at a glance\n\n- You automatically design in a brand-compliant and consistent way.\n- Your interfaces are accessible, and you save time in the approval process.\n- You can automatically update your product with upcoming changes.\n- You automatically have the option to offer dark mode without additional effort.\n- Design tokens enable much more customization, so that Scale will be able to grow with the needs of your projects.\n- Product theming is easy to carry out (e.g., for third party products).\n",DesignTokens_de="# Telekom Design Tokens\n\n## Was sind Design Tokens?\n\nDesign Tokens sind die Variablen unseres Designs. Sie speichern die Werte für Farben, Typografie, Abstände oder Radien zentral ab – im Gegensatz zu fest codierten Werten. Dadurch erleichtern sie eine konsistente Produktentwicklung. Die Übergabe von Designs in die Entwicklung ist weniger fehleranfällig, da die Entwickler\\*innen den richtigen Token aus einem vordefinierten Paket auswählen können. Zudem ist es möglich, Tokens global zu aktualisieren – das passiert dann ganz automatisch in allen Projekten.\n\n## Wie setzt Scale Design Tokens in der Praxis um?\n\nDie Design Tokens liegen in Form einer JSON-Datei auf GitHub. Ein Programm namens Style Dictionary wandelt sie in Formate um, die in Sketch, Figma, CSS oder Javascript verwendet werden können. Unsere Sketch- und Figma-Bibliotheken beinhalten das jeweilige Ausgabeformat. Auch die Scale Code-Komponenten arbeiten mit dem Design Token Package. Als Entwickler*in kannst du die Design Tokens direkt von GitHub oder NPM in dein Projekt laden. Das stellt sicher, dass jeder bei der Deutschen Telekom mit den gleichen Designgrundlagen arbeitet und wir eine konsistente, qualitativ hochwertige Nutzungserfahrung für unsere Kund*innen schaffen.\n\n## So arbeiten Designer\\*innen mit Design Tokens\n\nWir haben die Design Tokens in Farb-, Text- und Schattenstile für Sketch und Figma konvertiert. Du kannst wie bisher arbeiten und diese Stile anwenden. Durch die Verwendung semantischer Token-Namen wie Text & Icon oder Link erkennst du leichter, welcher Stil für welches Element gedacht ist. Mit Hilfe der Tokens kannst du die Designs auch leicht vom Light in den Dark Mode ändern, um sicherzustellen, dass auch der Dark Mode gut funktioniert. Wenn wir die Tokens aktualisieren, brauchst du nur das Update zulassen, und alles wird automatisch aktualisiert.\n\n## So arbeiten Entwickler\\*innen mit Design Tokens\n\nAls Entwickler*in bindest du die Tokens in Form von CSS-Variablen oder Javascript-Objekten ein. So kannst du die Stile, die du von den Designer*innen erhältst, leicht umsetzen. Für den Dark Mode ist keine zusätzliche Implementierung erforderlich. Wann immer ein Token aktualisiert werden muss, spielst du einfach die neuesten Updates von GitHub oder NPM ein und dein Code wird automatisch aktualisiert. Du findest die Core- und Semantik-Tokens im @telekom/design-tokens Repo (Ordner: src). Als Benutzer\\*in von Scale oder dem Design-Token-Repository musst du dich nur um die semantischen Tokens kümmern.\n\n[Farben](.?path=/docs/guidelines-colors--page)\n\n[Schatten](./?path=/docs/guidelines-shadows--page)\n\n## Light und Dark Mode\n\nDesign Tokens bilden die Grundlage für einen intuitiven Light und Dark Mode. In dieser Guideline erfährst du mehr darüber, welche Vorteile der Dark Mode bietet und wie du diesen implementieren kannst.\n\n[Light and Dark Mode](./?path=/docs/guidelines-light-and-dark-mode--page)\n\n## Die Vorteile im Überblick\n\n- Du gestaltest automatisch brand-konform und konsistent.\n- Deine Interfaces sind barrierefrei und du sparst Zeit im Approval-Prozess.\n- Bei künftigen Änderungen kannst du dein Produkt automatisch aktualisieren.\n- Du hast die Möglichkeit, den Dark Mode anzubieten, ohne dass es dich zusätzlich Zeit kostet.\n- Die große Anpassungsfähigkeit ermöglicht, dass Scale mit den Anforderungen von Telekom Projekten wachsen kann.\n- Das Theming von Produkten ist leicht umsetzbar (bspw. für Third-Party-Produkte).\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Design Tokens",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?DesignTokens_en:DesignTokens_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Design Tokens",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?DesignTokens_en:DesignTokens_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Grid.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Grid_en="# Grid\n\nThe grid is the geometric foundation of all our visual elements - from typography to columns, boxes, icons, and illustrations. It provides structure and guidance for all creative decision-making.\n\n## Base unit\n\nThe basic unit of our grid is the eight-pixel square base unit. Multiples of base units compose the dimensions of columns, rows, and boxes, along with their margins and padding. The base unit adapts to your content while maintaining a consistent visual rhythm.\n\n![Image Name](assets/2_guidelines/1_grid/Grid01.png)\n\n## Spacing types\n\n![Image Name](assets/2_guidelines/1_grid/Grid02.png)\n\n**Margin - fixed (1)**\n\n**Columns - dynamic (2)**\n\n**Gutter - fixed (3)**\n\n## Breakpoints\n\n| Breakpoint | Range in px  | Margin in px | Column Amount | Column in px | Gutter in px |\n| ---------- | ------------ | ------------ | ------------- | ------------ | ------------ |\n| S          | 320 - 639    | 16           | 4             | Dynamic      | 32           |\n| M          | 640 - 1039   | 16           | 8             | Dynamic      | 32           |\n| L          | 1040 - 1295  | 24           | 16            | Dynamic      | 32           |\n| XL         | 1296 - 1679  | 24           | 16            | Dynamic      | 32           |\n| XXL        | 1680 & above | Dynamic      | 16            | 64           | 32           |\n\n### Small\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-s_.png)\n\n### Medium\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-m_.png)\n\n### Large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-l_.png)\n\n### X-large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-xl_.png)\n\n### XX-large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-xxl_.png)\n",Grid_de="# Gestaltungsraster\n\nDas Gestaltungsraster ist die Basis für jedes Design. Es ist die geometrische Grundlage aller visuellen Elemente: Von Typografie über Icon bis zur Illustration. Es gibt Struktur und Hilfestellung bei all deinen kreativen Entscheidungen.\n\n## Basiseinheit\n\nDie Basiseinheit des Gestaltungsrasters ist 8 x 8 Pixel groß. Mehrere Basiseinheiten bilden zusammen die Spalten, Zeilen und Blöcke mit ihren Randabständen und Paddings. Die Menge der Flächen kann variieren, wobei die Basiseinheit an sich immer gleich groß bleibt.\n\n![Image Name](assets/2_guidelines/1_grid/Grid01.png)\n\n## Abstände und Größen\n\n![Image Name](assets/2_guidelines/1_grid/Grid02.png)\n\n**Randabstand - fest (1)**\n\n**Layout-Spalte - dynamisch (2)**\n\n**Spaltenabstand - fest (3)**\n\n## Breakpoints\n\n| Breakpoint | Bereich in px | Randabstand in px | Anzahl der Spalten | Spalte in px | Spaltenabstand in px |\n| ---------- | ------------- | ----------------- | ------------------ | ------------ | -------------------- |\n| S          | 320 - 639     | 16                | 4                  | Dynamisch    | 32                   |\n| M          | 640 - 1039    | 16                | 8                  | Dynamisch    | 32                   |\n| L          | 1040 - 1295   | 24                | 16                 | Dynamisch    | 32                   |\n| XL         | 1296 - 1679   | 24                | 16                 | Dynamisch    | 32                   |\n| XXL        | 1680 & above  | Dynamisch         | 16                 | 64           | 32                   |\n\n### Small\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-s_.png)\n\n### Medium\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-m_.png)\n\n### Large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-l_.png)\n\n### X-large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-xl_.png)\n\n### XX-large\n\n![Image Name](assets/2_guidelines/1_grid/image-grid-xxl_.png)\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Grid",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Grid_en:Grid_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Grid",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Grid_en:Grid_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/LightAndDarkMode.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),LightAndDarkMode_en='# Light and Dark Mode\n\n**Light and dark mode are directed at different user groups and different use cases. This is not only about aesthetics, but also about avoiding eye strain. Be it due to ambient light or, for example, visual impairments such as cataracts.**\n\nWith the help of our components, dark mode can be implemented with almost no additional effort. Both in the design and in the code.\n\n![Dark mode example modal](assets/dark-mode-example-modal.png)\n\n## Light mode\n\nMost general users without visual impairments prefer light mode, especially in a well-lit environment. As such, we recommend light mode as default, unless there are special reasons not to. However, there are also exceptions, such as Magenta TV – this platform is offered exclusively in dark mode.\n\n## Dark mode\n\nDark mode is especially beneficial for users with certain visual impairments, as it makes it easier to distinguish between elements and text. Some users also benefit from the lower contrast in dark mode. Most users, even without visual impairments, prefer dark mode at night and in dimly-lit environments. This helps avoid eye strain and fatigue.\n\n## Switching modes\n\nEach color of a component is replaced by a matching color from the other mode. This allows designers and developers to change modes with almost no additional effort.\n\n![Dark mode example shapes](assets/dark-mode-example-shapes.png)\n\n## An optimized color palette\n\nWe’ve optimized the Scale color palette so that it provides a consistent look and feel across both modes. Of course, all colors in our components are\ncertified for accessibility. To learn more, [check out an overview of the new color palette](./?path=/docs/guidelines-colors--page)\n\n![Dark mode example palette](assets/img_color.png)\n\n## Let your users decide\n\nSince there are many personal reasons for choosing a mode, it’s ideal to let your users decide which mode they want to use. If you can detect user preferences from the operating system (like via `prefers-color-scheme` on the web), select the preferred mode automatically. To offer a manual change, you can offer a button or switch that toggles between light and dark mode – e.g., in the settings of your product.\n\n## For designers\n\nScale allows you to design in either light or dark mode. Switching is possible at any time at the press of a button, so you can view your design in the other mode. But even without additional designs, the development team can activate the other mode.\n\n### Sketch\n\n- Go to <a href="./?path=/docs/setup-info-getting-started-for-designers--page">Getting Started for Designers</a> and import the libraries for light and dark mode.\n- Design your interface with the library of your choice.\n- To change the mode, go to Preferences > Libraries and select the other library. When asked, select "Replace". Close the preferences window.\n- In Sketch, click the notification icon (bell) in the upper-right corner and select "Component updates available".\n- Select "Update components".\n- Now your design will appear in the other mode.\n\n![Dark mode sketch modes](assets/dark-mode-sketch-modes-en.png)\n\n## Information for developers\n\n### Implementing dark mode\n\nDark mode is included starting with Scale version `3.0.0-beta.100`. It leverages CSS variables to allow switching modes.\n\nBy default, the mode is set to match the operating system preferences, via the `prefers-color-scheme` media query.\n\nAlternatively, you can set the mode via the `data-mode` attribute. The value must be either `light` or `dark`. It\'s recommended to do this in the body, e.g. `<body data-mode="light">`, although it\'s also possible to only switch a specific part of the page.\n\nSetting the `data-mode` attribute will override the system preferences.\n\nIn order to have your app switch modes entirely (not only the Scale components), use the following tokens for the canvas and text colors:\n\n```css\nbody {\n  background-color: var(--telekom-color-background-canvas);\n  color: var(--telekom-color-text-and-icon-standard);\n}\n```\n\nThere are more color tokens at your disposal for different use cases. Please make sure to check our guideline on [Colors](./?path=/docs/guidelines-colors--page).\n\n### Disabling automatic switching\n\nIf you want your app to be in either light or dark mode regardless of the user\'s system preferences, set the data-mode attribute to the desired mode:\n\n```html\n<body data-mode="light"></body>\n```\n\n### Changing modes manually\n\nYou can build a switch into the UI with a bit of JavaScript, to set the `data-mode` attribute accordingly. The following snippet should serve as an illustration:\n\n```js\nconst element = document.querySelector(\'.mode-switch\');\n\nelement.addEventListener(\'click\', function switchMode() {\n  const isDark = document.body.dataset.mode === \'dark\';\n  document.body.dataset.mode = isDark ? \'light\' : \'dark\';\n});\n```\n\nIn JavaScript, you can check and monitor the system preference via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia" target="_blank" rel="noopener noreferrer">window.matchMedia</a> method.\n\n```js\nconst mq = window.matchMedia(\'(prefers-color-scheme: dark)\');\nconst isDark = mq.matches;\n```\n',LightAndDarkMode_de='# Light und Dark Mode\n\n**Light und Dark Mode richten sich an unterschiedliche Nutzungsgruppen und -szenarien. Dabei geht es nicht nur um Ästhetik, sondern oft auch darum, eine Überanstrengung der Augen zu vermeiden. Sei es aufgrund des Umgebungslichts oder bspw. bei Sehbehinderungen, wie dem Grauen Star.**\n\nMithilfe unserer Komponenten lässt sich der Dark Mode nahezu ohne zusätzlichen Aufwand implementieren. Sowohl im Design als auch im Code.\n\n![Dark mode example modal](assets/dark-mode-example-modal.png)\n\n## Light Mode\n\nDie meisten Nutzer\\*innen mit normaler Sehkraft bevorzugen den hellen Modus, insbesondere in einer gut beleuchteten Umgebung. Daher empfehlen wir den hellen Modus als Standard, sofern keine besonderen Gründe dagegensprechen. Es gibt aber auch Ausnahmen, wie bspw. MagentaTV – diese Plattform ist ausschließlich im Dark Mode umgesetzt.\n\n## Dark Mode\n\nDer dunkle Modus ist besonders für Nutzer*innen mit bestimmten Sehschwächen von Vorteil, da er die Unterscheidung von Elementen und Texten erleichtert. Einige Nutzer*innen profitieren auch von dem geringeren Kontrast im dunklen Modus. Die meisten Nutzer\\*innen, auch mit normaler Sehkraft, ziehen den dunklen Modus bei Nacht und in schwach beleuchteter Umgebung vor. Dies hilft, Überanstrengung und Müdigkeit der Augen zu vermeiden.\n\n## Den Modus wechseln\n\nJede Farbe einer Komponente wird durch eine passende Farbe aus dem jeweils anderen Modus ersetzt. So ist der Wechsel des Modus für Designer*innen und Entwickler*innen nahezu ohne zusätzlichen Aufwand möglich.\n\n![Dark mode example shapes](assets/dark-mode-example-shapes.png)\n\n## Optimierte Farbpalette\n\nWir haben die Farbpalette angepasst, sodass sie für beide Modi ein konsistentes Erscheinungsbild bietet. Selbstverständlich sind alle Farben in unseren Komponenten auf Barrierefreiheit geprüft. Eine Übersicht der neuen Farbpalette mit Nutzungshinweisen findest du [hier](./?path=/docs/guidelines-colors--page).\n\n![Dark mode example palette](assets/img_color.png)\n\n## Lass die Nutzer\\*innen entscheiden\n\nDa es viele persönliche Gründe für die Auswahl des Modus gibt, lasse deine Nutzer\\*innen im Idealfall selbst entscheiden, in welchem Modus sie dein Produkt nutzen möchten. Können die Benutzungspräferenzen vom Betriebssystem abgeleitet werden, bspw. über Prefers Color Scheme im Web, sollte der bevorzugte Modus automatisch ausgewählt und als Default angeboten werden. Für einen manuellen Wechsel kannst du auch einen Button, Switch oder Toggle Button anbieten – bspw. in den Nutzungseinstellungen deines Produkts.\n\n## Hinweis Für Designer\\*innen\n\nScale erlaubt es, entweder im hellen oder dunklen Modus zu gestalten. Ein Wechsel ist jederzeit per Knopfdruck möglich, sodass du die Wirkung im jeweils anderen Modus beurteilen kannst. Aber auch ohne zusätzliche Designs kann das Entwicklungsteam den anderen Modus aktivieren.\n\nWenn du bereits eine ältere Version unserer Sketch Library nutzt, lese dir bitte zunächst unsere Aktualisierungshinweise durch und lade im Anschluss das Update.\n\n### Sketch\n\n- Gehe auf die Seite „<a href="./?path=/docs/setup-info-getting-started-for-designers--page">Erste Schritte für Designer\\*innen</a>“ und importiere die Libraries für den hellen und dunklen Modus.\n- Gestalte mit der Library deiner Wahl dein Interface.\n- Um den Modus zu wechseln, gehe in die „Preferences“ > „Libraries“ und wähle die andere Library aus. Dort wirst du gefragt, ob die zu Anfang genutzte Library ersetzt werden soll. Bitte bestätige das und schließe dann das Einstellungsfenster.\n- Klicke in Sketch auf das Benachrichtigungssymbol (Glocke) in der rechten oberen Ecke und wähle „Component Updates Available".\n- Wähle „Update Components“.\n- Nun wird dein Design im jeweils anderen Modus angezeigt.\n\n![Dark mode sketch modes](assets/dark-mode-sketch-modes-de.png)\n\n## Hinweis für Entwickler\\*innen\n\n### Dark Mode implementieren\n\nDer Dark Mode ist in Scale ab Version `3.0.0-beta.100` enthalten. Er nutzt CSS-Variablen, um einen Wechsel des Modus zu ermöglichen.\n\nStandardmäßig wird der Modus so eingestellt, dass er den Einstellungen des Betriebssystems entspricht, und zwar über die Medienabfrage `prefers-color-scheme`.\n\nAlternativ können die Modi auch über das `data-mode`-Attribut festgelegt werden. Der Wert muss entweder `light` oder `dark` sein. Es wird empfohlen, dies im Body Text zu tun, z. B. `<body data-mode="light">`, obwohl es auch möglich ist, nur einen bestimmten Teil der Seite umzuschalten.\n\nDas Setzen des `data-mode`-Attributs setzt die Systemeinstellungen außer Kraft.\n\nDamit deine Anwendung komplett zwischen den Modi wechselt und nicht nur die Scale Komponenten, verwende die folgenden Tokens für den Hintergrund und die Texte.\n\n```css\nbody {\n  background-color: var(--telekom-color-background-canvas);\n  color: var(--telekom-color-text-and-icon-standard);\n}\n```\n\nMehr Informationen zu weiteren Farb-Tokens findest du in der Guideline [Colors](./?path=/docs/guidelines-colors--page).\n\n### Deaktivieren der automatischen Umschaltung\n\nSoll sich die Anwendung unabhängig von den Systemeinstellungen der Nutzer\\*innen entweder im hellen oder im dunklen Modus befinden, setze das Attribut data-mode auf den gewünschten Modus:\n\n```html\n<body data-mode="light"></body>\n```\n\n### Modus manuell wechseln\n\nMit ein wenig JavaScript kann ein Switch in die Benutzungsoberfläche eingebaut werden, um das Attribut data-mode entsprechend zu setzen. Der folgende Ausschnitt soll zur Veranschaulichung dienen:\n\n```js\nconst element = document.querySelector(\'.mode-switch\');\n\nelement.addEventListener(\'click\', function switchMode() {\n  const isDark = document.body.dataset.mode === \'dark\';\n  document.body.dataset.mode = isDark ? \'light\' : \'dark\';\n});\n```\n\nIn JavaScript kannst du die Systemeinstellung mit der Methode <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia" target="_blank" rel="noopener noreferrer">window.matchMedia</a> prüfen und überwachen.\n\n```js\nconst mq = window.matchMedia(\'(prefers-color-scheme: dark)\');\nconst isDark = mq.matches;\n```\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Light and Dark Mode",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?LightAndDarkMode_en:LightAndDarkMode_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Light and Dark Mode",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?LightAndDarkMode_en:LightAndDarkMode_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Shadows.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Shadows_en="# Scale Shadows\n\nShadows make the visual level clear where components and elements are located. They help users quickly understand the UI. As such, it’s important to use the right shadow for a specific use case.\n\n## Raised\n\nFor elements that are visually elevated.\n\n![raised shadows](assets/shadows-raised.png)\n\n## Floating\n\nFor floating elements like notifications or action buttons (not yet included).\n\n![floating shadows](assets/shadows-floating.png)\n\n## Top\n\nFor elements that are positioned above the main content, like navigations, bottomsheets, etc.\n\n![top](assets/shadows-top.png)\n\n## Overlay\n\nFor elements that are temporarily positioned above everything else. Use this for modals, dialogs, or something similar.\n\n![overlay](assets/shadows-overlay.png)\n\n## App bar top\n\n> Available soon\n\nThe app bar top shadow tokens are for headers and app bars at the top.\n\n## App bar bottom\n\n> Available soon\n\nThe app bar bottom shadow tokens are for bottom bars and other elements that are stuck to the bottom.\n",Shadows_de="# Scale Shadows\n\nSchatten verdeutlichen, auf welcher visuellen Ebene Komponenten und Elemente liegen. Sie helfen Nutzer\\*innen, die Benutzungsoberfläche schnell zu verstehen. Daher ist es wichtig, für jeden Anwendungsfall den richtigen Schatten zu verwenden.\n\n## Raised\n\nFür Komponenten, die visuell angehoben werden.\n\n![raised shadows](assets/shadows-raised.png)\n\n## Floating\n\nFür Komponenten, die oberhalb des Inhalts liegen, wie bspw. eine Notification oder ein Action Button (noch nicht enthalten).\n\n![floating shadows](assets/shadows-floating.png)\n\n## Top\n\nFür Komponenten auf oberster Ebene, wie bspw. die Navigation.\n\n![top](assets/shadows-top.png)\n\n## Overlay\n\nFür Komponenten, die den gesamten Inhalt temporär überlagern, wie bspw. das Modal.\n\n![overlay](assets/shadows-overlay.png)\n\n## App Bar Top\n\n> Diese Funktion ist bald verfügbar.\n\nDie App Bar Top Shadow Tokens für den oberen Schatten sind für Kopfzeilen und App-Bars im oberen Bereich gedacht.\n\n## App Bar Bottom\n\n> Diese Funktion ist bald verfügbar.\n\nDie App Bar Bottom Shadow Tokens sind für Bottom Bars und andere Elemente, die persistent am unteren Viewport sitzen.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Shadows",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Shadows_en:Shadows_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Shadows",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Shadows_en:Shadows_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Spacing.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Spacing_en='# Spacing\n\nSpacing is an important — and often overlooked — part of visual design. Scale takes a lot of the guesswork out of spacing to help designers deliver clear, functional layouts.\n\n## Spacing scale\n\nUse the spacing units when building individual components. They include small increments needed to create appropriate spatial relationships for detail-level designs.\n\n| variable name    | px  | rem    | example                                                    |\n| ---------------- | --- | ------ | ---------------------------------------------------------- |\n| --scl-spacing-1  | 1   | 0.0625 | <scale-sb-spacing style="width: 1px;"></scale-sb-spacing>  |\n| --scl-spacing-2  | 2   | 0.125  | <scale-sb-spacing style="width: 2px;"></scale-sb-spacing>  |\n| --scl-spacing-4  | 4   | 0.25   | <scale-sb-spacing style="width: 4px;"></scale-sb-spacing>  |\n| --scl-spacing-8  | 8   | 0.5    | <scale-sb-spacing style="width: 8px;"></scale-sb-spacing>  |\n| --scl-spacing-12 | 12  | 0.75   | <scale-sb-spacing style="width: 12px;"></scale-sb-spacing> |\n| --scl-spacing-16 | 16  | 1      | <scale-sb-spacing style="width: 16px;"></scale-sb-spacing> |\n| --scl-spacing-24 | 24  | 1.5    | <scale-sb-spacing style="width: 24px;"></scale-sb-spacing> |\n| --scl-spacing-32 | 32  | 2      | <scale-sb-spacing style="width: 32px;"></scale-sb-spacing> |\n\n## Layout scale\n\nThe layout units arrange components and other UI parts into a full-page layout. Their larger increments control the density of a design. Use the smaller spacing tokens to create dense compositions and direct relationships. Use the larger tokens to increase the amount of white space and to separate sections.\n\n| variable name    | px  | rem | example                                                    |\n| ---------------- | --- | --- | ---------------------------------------------------------- |\n| --scl-spacing-16 | 16  | 1   | <scale-sb-spacing style="width: 16px;"></scale-sb-spacing> |\n| --scl-spacing-24 | 24  | 1.5 | <scale-sb-spacing style="width: 24px;"></scale-sb-spacing> |\n| --scl-spacing-32 | 32  | 2   | <scale-sb-spacing style="width: 32px;"></scale-sb-spacing> |\n| --scl-spacing-40 | 40  | 2.5 | <scale-sb-spacing style="width: 40px;"></scale-sb-spacing> |\n| --scl-spacing-48 | 48  | 3   | <scale-sb-spacing style="width: 48px;"></scale-sb-spacing> |\n| --scl-spacing-64 | 64  | 4   | <scale-sb-spacing style="width: 64px;"></scale-sb-spacing> |\n| --scl-spacing-80 | 80  | 5   | <scale-sb-spacing style="width: 80px;"></scale-sb-spacing> |\n\n## Designing with space\n\nEvery part of a UI — including the empty space between elements — should be intentional. The amount of space between items creates relationships and hierarchy.\n\n### Creating relationships\n\nUsers consider elements that are near each other to be meaningfully related. As the space between elements increases, their perceived relationship weakens.\n\nPatterns in spacing can also create relationships. Users see elements with the same spacing pattern as related pieces that have equal weight.\n\nSpace can also denote groups of associated information. This creates content sections on a page without having to use lines or other graphical elements as a divider.\n\n### Creating hierarchy\n\nElements with more space tend to convey a greater importance than elements with less space. Take this page for instance: The top-level headers have more space around them, which gives them focus and prominence. Then, as the headers descend in importance, they receive less space, which signals that they are subordinate.\n\nUsers can easily overlook elements that are close to each other. While users may be aware of the grouping, they may not process each individual item. Therefore, if a page has content or an element of high importance, consider giving it extra surrounding space to help it attract focus.\n\n### White space\n\nEmpty space — also known as white space — is important in design. It can break up sections on a page or help add focus to certain elements. White space also helps with information processing, since too much dense information can be disorienting or overwhelming for a user. Individual sections of a UI are allowed to be dense, but the whole page should never be crowded; there should always be white space to give the user’s eye some rest.\n',Spacing_de='# Abstände\n\nDer Umgang mit Abständen ist ein wichtiger, aber oft vernachlässigter Aspekt bei der Gestaltung des visuellen Designs. Scale legt hierfür Normen zugrunde, die dir helfen, klare und funktionale Layouts zu erstellen.\n\n## Abstandseinheiten\n\nVerwende die folgenden Einheiten bei der Konstruktion von Komponenten. Sie enthalten kleine Abstufungen, mit denen du eine geeignete räumliche Beziehung auf der Detailebene schaffen kannst.\n\n| Variablen Name   | px  | rem    | Beispiel                                                   |\n| ---------------- | --- | ------ | ---------------------------------------------------------- |\n| --scl-spacing-1  | 1   | 0.0625 | <scale-sb-spacing style="width: 1px;"></scale-sb-spacing>  |\n| --scl-spacing-2  | 2   | 0.125  | <scale-sb-spacing style="width: 2px;"></scale-sb-spacing>  |\n| --scl-spacing-4  | 4   | 0.25   | <scale-sb-spacing style="width: 4px;"></scale-sb-spacing>  |\n| --scl-spacing-8  | 8   | 0.5    | <scale-sb-spacing style="width: 8px;"></scale-sb-spacing>  |\n| --scl-spacing-12 | 12  | 0.75   | <scale-sb-spacing style="width: 12px;"></scale-sb-spacing> |\n| --scl-spacing-16 | 16  | 1      | <scale-sb-spacing style="width: 16px;"></scale-sb-spacing> |\n| --scl-spacing-24 | 24  | 1.5    | <scale-sb-spacing style="width: 24px;"></scale-sb-spacing> |\n| --scl-spacing-32 | 32  | 2      | <scale-sb-spacing style="width: 32px;"></scale-sb-spacing> |\n\n## Layout-Einheiten\n\nMit Layout-Einheiten kannst du einzelne Komponenten und andere UI-Elemente eines User Interfaces in einem ganzseitigen Layout sinnvoll anordnen. Verwende die größeren Einheiten, um die Dichte eines Layouts zu verringern, Weißraum zu erzeugen oder Abschnitte voneinander zu trennen. Mit den kleineren Einheiten verdichtest du dein Layout und schaffst direkte Beziehungen.\n\n| Variablen Name   | px  | rem | Beispiel                                                   |\n| ---------------- | --- | --- | ---------------------------------------------------------- |\n| --scl-spacing-16 | 16  | 1   | <scale-sb-spacing style="width: 16px;"></scale-sb-spacing> |\n| --scl-spacing-24 | 24  | 1.5 | <scale-sb-spacing style="width: 24px;"></scale-sb-spacing> |\n| --scl-spacing-32 | 32  | 2   | <scale-sb-spacing style="width: 32px;"></scale-sb-spacing> |\n| --scl-spacing-40 | 40  | 2.5 | <scale-sb-spacing style="width: 40px;"></scale-sb-spacing> |\n| --scl-spacing-48 | 48  | 3   | <scale-sb-spacing style="width: 48px;"></scale-sb-spacing> |\n| --scl-spacing-64 | 64  | 4   | <scale-sb-spacing style="width: 64px;"></scale-sb-spacing> |\n| --scl-spacing-80 | 80  | 5   | <scale-sb-spacing style="width: 80px;"></scale-sb-spacing> |\n\n## Mit Weißraum gestalten\n\nJeder Teil eines User Interfaces – auch der leere Raum zwischen den Elementen – sollte bewusst gestaltet sein. Je nach Größe der Abstände kannst du Zusammenhänge oder Hierarchien zwischen Elementen erzeugen.\n\n### Zusammenhänge herstellen\n\nElemente, die nahe beieinander liegen, erkennen Nutzer\\*innen als zusammengehörig. Je größer der Abstand zwischen Elementen ist, desto schwächer erscheint die Beziehung.\n\nDurch Abstände erzeugte Muster können ebenfalls Beziehungen herstellen. Elemente, die im gleichen Abstandsmuster angeordnet sind, werden als zusammengehörige, gleichwertige Teile wahrgenommen.\n\nDu kannst Weißraum auch dazu verwenden, um die Zusammengehörigkeit von Informationen zu verdeutlichen. Damit erzeugst du Inhaltsabschnitte auf einer Seite, ohne dass du Linien oder andere grafischen Elemente als Trenner verwenden musst.\n\n### Hierarchie erzeugen\n\nJe mehr Weißraum ein Element umgibt, desto wichtiger wirkt es. Das lässt sich an diesem Beispiel verdeutlichen: Die Überschrift der ersten Ebene einer Webseite besitzt immer den größten umgebenden Leerraum. Das verleiht ihr die größte Aufmerksamkeit und vermittelt Wichtigkeit. Alle darauffolgenden Überschriften erhalten weniger Platz – das signalisiert, dass sie untergeordnet sind.\n\nBitte beachte, dass Elemente, die nahe beieinander liegen auch leichter übersehen werden können. Während die Nutzer\\*innen die Gruppierung wahrnehmen, verarbeiten sie möglicherweise nicht jedes einzelne Element. Wenn du also wichtige Inhalte hervorheben möchtest, umgib sie einfach mit zusätzlichem Weißraum.\n\n### Weißraum\n\nDer Leerraum ist in der Gestaltung auch als Weißraum bekannt. Du kannst ihn verwenden, um Abschnitte auf einer Seite aufzuteilen oder um den Fokus auf bestimmte Elemente zu lenken. Weißraum hilft auch bei der Informationsverarbeitung: Er erhöht die Lesbarkeit einer Seite und gibt dem Auge Ruhe. Zu viele Informationen sind unübersichtlich und überfordern die Nutzer\\*innen. Einzelne Abschnitte dürfen zwar kompakt sein, die gesamte Seite sollte jedoch nicht überfüllt wirken.\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Spacing",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Spacing_en:Spacing_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Spacing",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Spacing_en:Spacing_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Theming.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Theming_en="# Customization and Themes\n\nMost Scale components use the shadow DOM to encapsulate styles, so you can't modify their styles by targeting them with a plain CSS selector. To allow for customization, however, each component exposes a set of **scoped CSS variables** and **shadow parts**.\n\nCustomization is possible at different levels. For instance, you can:\n\n- customize a single instance of a component,\n- _extend_ or create a new \"variant\" of a component, or\n- create a theme that groups a set of customizations.\n\nBy default, components are styled using Scale's design tokens. These are CSS variables defined in `:root` in the `scale-components.css` file. When customizing elements, always try and use a limited set of design tokens – either the system's, your own, or both – to keep your UI consistent.\n\nTo learn more about CSS custom properties (also called variables) and shadow parts, please refer to:\n\n- [Using CSS custom properties (variables) on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\n- [A user's guide to CSS variables by Lea Verou](https://increment.com/frontend/a-users-guide-to-css-variables/)\n- [::part on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)\n- [CSS Shadow Parts spec draft at W3C](https://drafts.csswg.org/css-shadow-parts-1/#part)\n\n## Customization options\n\n### Component-scoped variables\n\nYou can overwrite a component's variables in your CSS.\n\n```css\nscale-button {\n  --radius: 0;\n}\n```\n\nCreating variants is also possible by grouping overwrites in a CSS selector, like a class or an attribute.\n\n```html\n<style>\n  scale-button.squared {\n    --radius: 0;\n  }\n</style>\n\n<scale-button class=\"squared\">Sign in</scale-button>\n```\n\nAn attribute doesn't need to exist in the component for you to use it as a selector; you can use anything as long as it's a valid CSS selector.\n\n```html\n<style>\n  scale-button[variant='squared'] {\n    --radius: 0;\n  }\n</style>\n\n<scale-button variant=\"squared\">Sign in</scale-button>\n```\n\nIf you need to customize a single instance, you can inline it:\n\n```html\n<scale-button style=\"--radius: 0\">Sign out</scale-button>\n```\n\n### Shadow Parts\n\nShadow parts make it possible to target internal elements of a component directly via the [`::part` pseudo-element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).\n\n```css\nscale-button::part(base) {\n  border-radius: 0;\n}\n```\n\nIt's possible to apply the same idea of a variant.\n\n```css\nscale-button[variant='squared']::part(base) {\n  border-radius: 0;\n  background: var(--telekom-color-additional-teal-600);\n}\n\nscale-button[variant='squared']::part(base):hover {\n  background: var(--telekom-color-additional-teal-900);\n}\n```\n\nBear in mind that the `::part` selector is limited exclusively to a single element; you can’t target descendants and siblings or chain it.\n\n### Themes\n\nWhen we group a set of style customization under the scope of a CSS class, we create a theme we can activate as easily as adding that class to the body of the document.\n\nAs an example:\n\n```css\n<style>\n  .theme-example {\n    --telekom-color-primary-standard: limegreen;\n    --telekom-color-primary-hovered: seagreen;\n    --telekom-color-primary-pressed: green;\n  }\n\n  .theme-example scale-button,\n  .theme-example scale-tag,\n  .theme-example scale-card {\n    --radius: 2em;\n  }\n\n  .theme-example scale-button[variant=\"plain\"]::part(base) {\n    background: transparent;\n    border: 2px solid currentColor;\n  }\n</style>\n\n<body class=\"theme-example\">\n```\n",Theming_de='# Anpassungen und Themes\n\nDie meisten Scale Komponenten nutzen das Shadow DOM, um vorgeschriebene Stylings zu kapseln. Dadurch lassen sich Styles auch dann nicht verändern, wenn sie über einen einfachen CSS Selector angesteuert werden. Um dennoch individuell gestalten zu können, bietet jede Komponente eine Sammlung von **scoped CSS variables** und **shadow parts**.\n\nAnpassungen sind auf verschiedenen Ebenen möglich. Du kannst zum Beispiel:\n\n- eine einzelne Instanz einer Komponente anpassen,\n- eine Komponente erweitern oder eine neue „Variante“ anlegen,\n- ein Theme erstellen, das eine Reihe von Anpassungen kombiniert.\n\nStandardmäßig werden die Komponenten mit den Design-Tokens von Scale gestaltet. Das sind CSS-Variablen, die über `:root` in der Datei `scale-components.css` definiert sind. Versuch beim Anpassen von Elementen eine möglichst kleine Zahl von Design-Tokens zu benutzen: entweder die vom System, die eigenen oder eine Kombination aus beiden. So sorgst du für ein konsistentes User Interface.\n\nHier erfährst du mehr über individuelle CSS-Eigenschaften (Variablen) und Shadow Parts:\n\n- [Using CSS custom properties (variables) on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\n- [A user\'s guide to CSS variables by Lea Verou](https://increment.com/frontend/a-users-guide-to-css-variables/)\n- [::part on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)\n- [CSS Shadow Parts spec draft at W3C](https://drafts.csswg.org/css-shadow-parts-1/#part)\n\n## Anpassungsmöglichkeiten\n\n### Komponentenbezogene Variablen\n\nDu kannst die Variablen einer Komponente in deinem CSS überschreiben.\n\n```css\nscale-button {\n  --radius: 0;\n}\n```\n\nNeue Varianten lassen sich auch durch das Gruppieren von zu überschreibenden Werten, wie einer Klasse oder einem Attribut, erstellen.\n\n```html\n<style>\n  scale-button.squared {\n    --radius: 0;\n  }\n</style>\n\n<scale-button class="squared">Sign in</scale-button>\n```\n\nEin Attribut muss nicht in der jeweiligen Komponente vorhanden sein, um es als Selector zu benutzen. Es reicht, wenn es sich um einen gültigen CSS Selector handelt.\n\n```html\n<style>\n  scale-button[variant=\'squared\'] {\n    --radius: 0;\n  }\n</style>\n\n<scale-button variant="squared">Sign in</scale-button>\n```\n\nWenn du nur ein einzelnes Element einer Komponente anpassen möchtest, kannst du es einfach inline einbinden:\n\n```html\n<scale-button style="--radius: 0">Sign out</scale-button>\n```\n\n### Shadow Parts\n\nMit Shadow Parts ist es möglich, interne Elemente einer Komponente gezielt anzusteuern über [`::part` pseudo-element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).\n\n```css\nscale-button::part(base) {\n  border-radius: 0;\n}\n```\n\nDiese Herangehensweise lässt sich auch auf eigene Varianten anwenden.\n\n```css\nscale-button[variant=\'squared\']::part(base) {\n  border-radius: 0;\n  background: var(--telekom-color-additional-teal-600);\n}\n\nscale-button[variant=\'squared\']::part(base):hover {\n  background: var(--telekom-color-additional-teal-900);\n}\n```\n\nBeachte, dass der `::part` Selector auf ein Element beschränkt ist. Damit lässt sich weder auf nachfolgende oder verwandte Elemente zugreifen noch kann es verknüpft werden.\n\n### Theming\n\nDu kannst eine Reihe von Stilanpassungen im Bereich einer CSS-Klasse zusammenfassen. Als Ergebnis erhältst du ein Theme, das sich so einfach aktivieren lässt wie das Hinzufügen dieser Klasse zum Dokument.\n\nEin möglichst aussagekräftiges Beispiel sagt mehr als tausend Worte:\n\n```css\n<style>\n  .theme-example {\n    --telekom-color-primary-standard: limegreen;\n    --telekom-color-primary-hovered: seagreen;\n    --telekom-color-primary-pressed: green;\n  }\n\n  .theme-example scale-button,\n  .theme-example scale-tag,\n  .theme-example scale-card {\n    --radius: 2em;\n  }\n\n  .theme-example scale-button[variant="plain"]::part(base) {\n    background: transparent;\n    border: 2px solid currentColor;\n  }\n</style>\n\n<body class="theme-example">\n```\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Customization and Themes",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Theming_en:Theming_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Customization and Themes",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Theming_en:Theming_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/guidelines/Typography.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Typography_1_de="# Typografie\n\nDie Typografie hat großen Einfluss auf die Nutzbarkeit und Funktionalität unserer Interfaces. Sie ist ein wirksames Gestaltungselement, mit dem wir Nutzer\\*innen durch unsere Produkte und Services führen.\n\n## Allgemein\n\nNeben Farbe und Logo ist die Schrift TeleNeo ein zentrales Gestaltungselement für die Wiedererkennung unserer Marke. Verwende unsere Hausschrift in allen Produkten und Services, um das Nutzungserlebnis nachhaltig zu prägen.\n\nDas [Liquid Brand Design Konzept](https://www.brand-design.telekom.com/artikel/l/liquid-brand-design-konzept/) gibt uns die Freiheit und Flexibilität, die Schrift an Zielgruppe und Kontext anzupassen. Detaillierte Informationen zur Schrift TeleNeo inklusive aller Formate, sowie zu allgemeinen Nutzungsprinzipien, Zeichensatz und Funktionsumfang findest du im Artikel [Typografie](https://www.brand-design.telekom.com/artikel/t/typografie/).\n\n## Schriftschnitte der TeleNeo\n\nDie TeleNeo verfügt über fünf gleichmäßig im Schriftgewicht abgestufte Schriftschnitte. Gut aufeinander abgestimmt bewirken diese eine Betonung und Differenzierung der Inhaltshierarchie. Jeder Schriftschnitt ist auch in einer kursiven Version verfügbar. Verwende den kursiven Schnitt nur in Ausnahmefällen, bspw. für Quellenangaben bei Zitaten.\n\n![Image Name](assets/2_guidelines/3_typography/schriftschnitte.png)\n\n### Schriftschnitte und CSS Variablen\n\n| Schnitt   | Variable                                    | CSS Wert |\n| --------- | ------------------------------------------- | -------- |\n| extrabold | --telekom-typography-font-weight-extra-bold | 800      |\n| bold      | --telekom-typography-font-weight-bold       | 700      |\n| medium    | --telekom-typography-font-weight-medium     | 500      |\n| regular   | --telekom-typography-font-weight-regular    | 400      |\n| thin      | --telekom-typography-font-weight-thin       | 200      |\n\n## Schriftformate für User Interfaces\n\nScale verwendet eine ausgewählte Kombination von Schriftformaten, um klare und fokussierte Interfaces zu erzeugen. Für die Ausgestaltung deiner Inhalte eignet sich eine Auswahl der folgenden Schriftformate.\n\n![Image Name](assets/2_guidelines/3_typography/font-formats-DE.png)\n\n## Farben\n\nAchte bei der Auswahl von Textfarben auf die Lesbarkeit. Der Mindestkontrast bei kleinen Texten liegt bei 4,5 zu 1.\nScale enthält Standardfarben für Texte, Text-Links sowie Nutzerfeedback wie Fehler- und Erfolgsmeldungen.\n",Typography_2_de="## Sprache, Schreibweise und Tonalität\n\nHinweise zu Stil, Sprache und Tonalität der Telekom findest du im Artikel [Markentypisch schreiben](https://www.brand-design.telekom.com/artikel/markentypisch-schreiben/).\n",Typography_1_en="# Typography\n\nTypography has a huge influence on the usability and functionality of our interfaces. It helps us guide users through a product or service.\n\n## General\n\nIn addition to our color and logo, the TeleNeo font is a central design element for our brand recognition. To make a lasting impact on the customer experience, use our corporate font for the written word in all our products and services.\n\nThe [Liquid Design Brand Concept](https://www.brand-design.telekom.com/en/articles/l/liquid-brand-design-concept/) gives us the freedom and flexibility to adapt our font to the particular target group and context. You can find detailed information about TeleNeo, including formats, best practices, character sets, and range of functionality, in the article [Typography](https://www.brand-design.telekom.com/en/articles/t/typography/).\n\n## TeleNeo font styles\n\nTeleNeo has five font styles that are evenly graded in terms of weight. When used properly, they emphasize and clarify the content hierarchy. Each font style is also available as italics. Use the italic style only as an exception, e.g., for references in quotations or something similar.\n\n![Image Name](assets/2_guidelines/3_typography/schriftschnitte.png)\n\n### Font weights and CSS variables\n\n| weight    | variable name                               | CSS value |\n| --------- | ------------------------------------------- | --------- |\n| extrabold | --telekom-typography-font-weight-extra-bold | 800       |\n| bold      | --telekom-typography-font-weight-bold       | 700       |\n| medium    | --telekom-typography-font-weight-medium     | 500       |\n| regular   | --telekom-typography-font-weight-regular    | 400       |\n| thin      | --telekom-typography-font-weight-thin       | 200       |\n\n## Font formats for user interfaces\n\nScale uses a selected combination of font formats to create clear and focused interfaces. A selection from the following font formats is well suited for designing your content.\n\n![Image Name](assets/2_guidelines/3_typography/font-formats-EN.png)\n\n## Colors\n\nWhen choosing text colors, it’s most important to consider legibility. The minimum contrast for small texts is 4.5 to 1.\nScale contains standard colors for texts, text links, and user feedback like error and success messages.\n",Typography_2_en="## Language, style, and tone\n\nYou can find information on Telekom's style, language, and tone in the article [Brand-Specific Writing](https://www.brand-design.telekom.com/en/articles/brand-specific-writing/).\n",telekom_design_tokens_light=__webpack_require__("./node_modules/@telekom/design-tokens/dist/telekom/docs-json/telekom-design-tokens.light.json"),telekom_design_tokens_dark=__webpack_require__("./node_modules/@telekom/design-tokens/dist/telekom/docs-json/telekom-design-tokens.dark.json"),core_events_dist_esm=__webpack_require__("../../node_modules/@storybook/core-events/dist/esm/index.js"),addons_dist_esm=__webpack_require__("../../node_modules/@storybook/addons/dist/esm/index.js");function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Guidelines/Typography",parameters:{docs:{container:function container(_ref2){var item,contrastSections,context=_ref2.context,locale=context&&context.globals&&context.globals.locale,colorMode=context&&context.globals&&context.globals.colorMode,allTokens="light"===colorMode?telekom_design_tokens_light:telekom_design_tokens_dark,darkMode="light"!==colorMode,pathStringItem=[],levelStringItem=[],cleared=!1,channel=addons_dist_esm.a.getChannel();function getItemPathByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].path[3]?allTokens.tokens[i].path[2]+" / "+allTokens.tokens[i].path[3]:allTokens.tokens[i].path[2]}function getItemColorByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].value}function getLevelByPath(path){for(var i=0;i<levelStringItem.length;i++){var splittedItem=levelStringItem[i].split("/");if(splittedItem[0]===path)return splittedItem[1]}}function generateTableColorRow(itemPathString,commentStringGerman,commentStringEnglish,additionalColor){return additionalColor?function setAdditionalColorSettings(){allTokens=telekom_design_tokens_light}():function resetAdditionalColorSettings(){allTokens="light"===colorMode?telekom_design_tokens_light:telekom_design_tokens_dark}(),(item=function getItemByPathString(pathString){for(var i=0;i<allTokens.tokens.length;i++){var currentItem=allTokens.tokens[i];if(currentItem.pathString===pathString)return currentItem}}(itemPathString))?Object(esm.b)("tr",{style:{backgroundColor:"var(--telekom-color-background-canvas)"}},Object(esm.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",padding:"4px 4px 4px 0"}},function clearContrastStates(){pathStringItem.length=0,levelStringItem.length=0,cleared=!0}(),cleared?function setContrastStates(){item.contrastChecks&&item.contrastChecks.map((function(contrastCkeckItem){pathStringItem.push(contrastCkeckItem.path),levelStringItem.push(contrastCkeckItem.path+"/"+contrastCkeckItem.level)}))}():null,item.contrastChecks?Object(esm.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",minWidth:"380px",minHeight:"120px"}},Object(esm.b)("div",{style:{color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingTop:"var(--telekom-spacing-unit-x1)",passingBottom:"var(--telekom-spacing-unit-x1)"}},"en"===locale?"Recommended colors for text & icons":"Empfohlene Farben für Text & Icons"),function hasContrastWithoutSlash(items){var itemPaths=[];items.map((function(item){itemPaths.push(getItemPathByPath(item))}));for(var i=0;i<itemPaths.length;i++)if(!itemPaths[i].includes("/"))return!0}(pathStringItem)?Object(esm.b)("td",{style:{paddingRight:"var(--telekom-spacing-unit-x4)",border:"none",width:"140px"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(esm.b)("a",{href:"#"+path},Object(esm.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,function getAllSections(items){var currentSection,itemPaths=[],sections=[];items.map((function(path){return itemPaths.push(getItemPathByPath(path))}));for(var i=0;i<itemPaths.length;i++)itemPaths[i].includes("/")&&(0==sections.length?(currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/")),sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/")))):currentSection!==itemPaths[i].substr(0,itemPaths[i].indexOf("/"))&&(sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/"))),currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/"))));contrastSections=sections}(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(esm.b)("td",{style:{border:"none",paddingRight:"var(--telekom-spacing-unit-x4)",width:"200px"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(esm.b)("a",{href:"#"+path},Object(esm.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))})))})):null):Object(esm.b)("div",{style:{backgroundColor:""+item.value,padding:"20px",marginTop:"4px",marginLeft:"8px",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",width:"380px",minHeight:"120px"}})),Object(esm.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(esm.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(esm.b)("div",null,Object(esm.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},item.name)),Object(esm.b)("div",null,Object(esm.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},"en"===locale?commentStringEnglish:commentStringGerman)))),Object(esm.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)"}},Object(esm.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)",width:"330px",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"css"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.cssVariableName),Object(esm.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(esm.b)("button",{id:""+item.cssVariableName,class:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(esm.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(esm.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.jsPathName),Object(esm.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(esm.b)("button",{id:""+item.jsPathName,class:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(esm.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(esm.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:500,fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.value)))):null}function generateTableHead(){return Object(esm.b)("thead",null,Object(esm.b)("tr",null,Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Example"),Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Description"),Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",width:"342px"}},"Token")))}function generateSectionTitle(sectionTitleGerman,sectionTitleEnglish){return Object(esm.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x12)",marginBottom:"var(--telekom-spacing-unit-x6)",fontWeight:800,fontSize:"32px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionTitleEnglish:sectionTitleGerman)}return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)("div",null,Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Typography_1_en:Typography_1_de,mdxType:"Description"}),Object(esm.b)("a",{role:"button",style:{cursor:"pointer"},onClick:function onClick(){!function changeModeLink(){var toggleMode=darkMode?"light":"dark";channel.emit(core_events_dist_esm.UPDATE_GLOBALS,{globals:{colorMode:toggleMode}})}()}},function generateColorModeLinkText(){return"en"===locale?"To the "+(darkMode?"light":"dark")+" mode color palette":"Zur Farbpalette des "+(darkMode?"Light":"Dark")+" Modes"}()),Object(esm.b)("div",null,Object(esm.b)("table",{style:{backgroundColor:darkMode?"#000":"#fff"}},Object(esm.b)("div",null,generateSectionTitle("Textfarben Standard","Textcolor Standard"),generateTableHead(),Object(esm.b)("tbody",null,generateTableColorRow("color.text-&-icon.standard","Für alle Standard Texte.","For all standard texts."),generateTableColorRow("color.text-&-icon.additional","Für Texte mit ergänzenden Informationen.","For texts with additional information."),generateTableColorRow("color.text-&-icon.disabled","Nur für Texte im disabled State.","Only for texts in disabled state.")),generateSectionTitle("Textfarbe Funktion","Textcolor Function"),generateTableHead(),Object(esm.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard","Für unterstützende Informationen sowie für Funktionen wie synchronisieren, sortieren und hinzufügen.","For supporting information as well as for functions like synchronize, sort and add."),generateTableColorRow("color.text-&-icon.functional.success","Bestätigt eine erfolgreich durchgeführte Aktion oder für Funktion wie senden, anrufen und aktivieren.",""),generateTableColorRow("color.text-&-icon.functional.danger","Für Fehlermeldungen oder Funktionen wie beenden und löschen.","Confirms a successfully performed action or for function like send, call and activate."),generateTableColorRow("color.text-&-icon.functional.warning","Für Warnungen vor möglicherweise unerwünschten Ergebnissen.","For warnings of potentially undesirable results."),generateTableColorRow("color.text-&-icon.functional.informational","Für unterstützende Informationen.","For supporting information."))))),Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Typography_2_en:Typography_2_de,mdxType:"Description"})))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Guidelines/Typography",parameters:{docs:{container:function container(_ref3){var item,contrastSections,context=_ref3.context,locale=context&&context.globals&&context.globals.locale,colorMode=context&&context.globals&&context.globals.colorMode,allTokens="light"===colorMode?telekom_design_tokens_light:telekom_design_tokens_dark,darkMode="light"!==colorMode,pathStringItem=[],levelStringItem=[],cleared=!1,channel=addons_dist_esm.a.getChannel();function getItemPathByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].path[3]?allTokens.tokens[i].path[2]+" / "+allTokens.tokens[i].path[3]:allTokens.tokens[i].path[2]}function getItemColorByPath(path){for(var i=0;i<allTokens.tokens.length;i++)if(allTokens.tokens[i].pathString===path)return allTokens.tokens[i].value}function getLevelByPath(path){for(var i=0;i<levelStringItem.length;i++){var splittedItem=levelStringItem[i].split("/");if(splittedItem[0]===path)return splittedItem[1]}}function generateTableColorRow(itemPathString,commentStringGerman,commentStringEnglish,additionalColor){return additionalColor?function setAdditionalColorSettings(){allTokens=telekom_design_tokens_light}():function resetAdditionalColorSettings(){allTokens="light"===colorMode?telekom_design_tokens_light:telekom_design_tokens_dark}(),(item=function getItemByPathString(pathString){for(var i=0;i<allTokens.tokens.length;i++){var currentItem=allTokens.tokens[i];if(currentItem.pathString===pathString)return currentItem}}(itemPathString))?Object(esm.b)("tr",{style:{backgroundColor:"var(--telekom-color-background-canvas)"}},Object(esm.b)("td",{style:{border:"none",verticalAlign:"top",width:"200px",padding:"4px 4px 4px 0"}},function clearContrastStates(){pathStringItem.length=0,levelStringItem.length=0,cleared=!0}(),cleared?function setContrastStates(){item.contrastChecks&&item.contrastChecks.map((function(contrastCkeckItem){pathStringItem.push(contrastCkeckItem.path),levelStringItem.push(contrastCkeckItem.path+"/"+contrastCkeckItem.level)}))}():null,item.contrastChecks?Object(esm.b)("div",{style:{backgroundColor:""+item.value,padding:"var(--telekom-spacing-unit-x5)",marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",marginLeft:"var(--telekom-spacing-unit-x2)",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",minWidth:"380px",minHeight:"120px"}},Object(esm.b)("div",{style:{color:""+getItemColorByPath(pathStringItem[0]),fontSize:"11px",fontWeight:500,paddingTop:"var(--telekom-spacing-unit-x1)",passingBottom:"var(--telekom-spacing-unit-x1)"}},"en"===locale?"Recommended colors for text & icons":"Empfohlene Farben für Text & Icons"),function hasContrastWithoutSlash(items){var itemPaths=[];items.map((function(item){itemPaths.push(getItemPathByPath(item))}));for(var i=0;i<itemPaths.length;i++)if(!itemPaths[i].includes("/"))return!0}(pathStringItem)?Object(esm.b)("td",{style:{paddingRight:"var(--telekom-spacing-unit-x4)",border:"none",width:"140px"}},pathStringItem.filter((function(path){return!getItemPathByPath(path).includes("/")})).map((function(path){return Object(esm.b)("a",{href:"#"+path},Object(esm.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))}))):null,function getAllSections(items){var currentSection,itemPaths=[],sections=[];items.map((function(path){return itemPaths.push(getItemPathByPath(path))}));for(var i=0;i<itemPaths.length;i++)itemPaths[i].includes("/")&&(0==sections.length?(currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/")),sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/")))):currentSection!==itemPaths[i].substr(0,itemPaths[i].indexOf("/"))&&(sections.push(itemPaths[i].substr(0,itemPaths[i].indexOf("/"))),currentSection=itemPaths[i].substr(0,itemPaths[i].indexOf("/"))));contrastSections=sections}(pathStringItem),contrastSections?contrastSections.map((function(item,i){return Object(esm.b)("td",{style:{border:"none",paddingRight:"var(--telekom-spacing-unit-x4)",width:"200px"}},pathStringItem.filter((function(path){return getItemPathByPath(path).includes(""+contrastSections[i])})).map((function(path){return Object(esm.b)("a",{href:"#"+path},Object(esm.b)("div",{style:{color:""+getItemColorByPath(path),fontSize:"13px",fontWeight:600}},getItemPathByPath(path)," ("+getLevelByPath(path)+")"))})))})):null):Object(esm.b)("div",{style:{backgroundColor:""+item.value,padding:"20px",marginTop:"4px",marginLeft:"8px",border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",width:"380px",minHeight:"120px"}})),Object(esm.b)("td",{style:{verticalAlign:"top",width:"100px",height:"inherit",border:"none"}},Object(esm.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x2)",marginBottom:"var(--telekom-spacing-unit-x2)",width:"380px"}},Object(esm.b)("div",null,Object(esm.b)("span",{style:{fontWeight:"bolder",fontSize:"18px",color:"var(--telekom-color-text-and-icon-standard)"}},item.name)),Object(esm.b)("div",null,Object(esm.b)("span",{style:{fontSize:"14px",color:"var(--telekom-color-text-and-icon-standard)"}},"en"===locale?commentStringEnglish:commentStringGerman)))),Object(esm.b)("td",{style:{verticalAlign:"top",border:"none",paddingTop:"var(--telekom-spacing-unit-x1)",paddingBottom:"var(--telekom-spacing-unit-x1)"}},Object(esm.b)("div",{style:{fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)",width:"330px",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"css"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.cssVariableName),Object(esm.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(esm.b)("button",{id:""+item.cssVariableName,class:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(esm.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(esm.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:"500",fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"js"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.jsPathName),Object(esm.b)("div",{style:{margin:"0",position:"absolute",top:"50%",right:"5px",msTransform:"translateY(-50%)",transform:"translateY(-50%)"}},Object(esm.b)("button",{id:""+item.jsPathName,class:darkMode?"color_token_copy-paste-button_dark":"color_token_copy-paste-button",style:{border:darkMode?"1px solid #38393b":"1px solid #f0f1f1",borderRadius:"4px",padding:"var(--telekom-spacing-unit-x1)",cursor:"pointer",backgroundColor:darkMode?"#38393b":"#f0f1f1"},onClick:function onClick(event){navigator.clipboard.writeText(event.target.id)}},Object(esm.b)("scale-icon-action-copy-paste",{size:15,"accessibility-title":"copy-paste",style:{pointerEvents:"none"}})))),Object(esm.b)("div",{style:{paddingTop:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",fontWeight:500,fontSize:"13px",color:"var(--telekom-color-text-and-icon-standard)"}},"hex"),Object(esm.b)("div",{style:{textAlign:"start",position:"relative",width:"320px",height:"30px",backgroundColor:darkMode?"#38393b":"#f0f1f1",marginLeft:"var(--telekom-spacing-unit-x2)"}},Object(esm.b)("span",{style:{fontSize:"11px",lineHeight:"30px",padding:"var(--telekom-spacing-unit-x5)",color:darkMode?"#fff":"#6A6A6A"},id:item.pathString},item.value)))):null}function generateTableHead(){return Object(esm.b)("thead",null,Object(esm.b)("tr",null,Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Example"),Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",borderRight:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"Description"),Object(esm.b)("th",{style:{textAlign:"left",color:darkMode?"#fff":"#6A6A6A",fontSize:"13px",borderColor:"var(--telekom-color-background-canvas)",borderBottom:darkMode?"1px solid hsla(0, 0%, 100%, 36%)":"1px solid #E7E8E9",paddingTop:"var(--telekom-spacing-unit-x1)",paddingRight:"var(--telekom-spacing-unit-x2)",paddingBottom:"var(--telekom-spacing-unit-x1)",paddingLeft:"var(--telekom-spacing-unit-x2)",width:"342px"}},"Token")))}function generateSectionTitle(sectionTitleGerman,sectionTitleEnglish){return Object(esm.b)("div",{style:{marginTop:"var(--telekom-spacing-unit-x12)",marginBottom:"var(--telekom-spacing-unit-x6)",fontWeight:800,fontSize:"32px",color:"var(--telekom-color-text-and-icon-standard)",paddingLeft:"var(--telekom-spacing-unit-x2)"}},"en"===locale?sectionTitleEnglish:sectionTitleGerman)}return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)("div",null,Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Typography_1_en:Typography_1_de}),Object(esm.b)("a",{role:"button",style:{cursor:"pointer"},onClick:function onClick(){!function changeModeLink(){var toggleMode=darkMode?"light":"dark";channel.emit(core_events_dist_esm.UPDATE_GLOBALS,{globals:{colorMode:toggleMode}})}()}},function generateColorModeLinkText(){return"en"===locale?"To the "+(darkMode?"light":"dark")+" mode color palette":"Zur Farbpalette des "+(darkMode?"Light":"Dark")+" Modes"}()),Object(esm.b)("div",null,Object(esm.b)("table",{style:{backgroundColor:darkMode?"#000":"#fff"}},Object(esm.b)("div",null,generateSectionTitle("Textfarben Standard","Textcolor Standard"),generateTableHead(),Object(esm.b)("tbody",null,generateTableColorRow("color.text-&-icon.standard","Für alle Standard Texte.","For all standard texts."),generateTableColorRow("color.text-&-icon.additional","Für Texte mit ergänzenden Informationen.","For texts with additional information."),generateTableColorRow("color.text-&-icon.disabled","Nur für Texte im disabled State.","Only for texts in disabled state.")),generateSectionTitle("Textfarbe Funktion","Textcolor Function"),generateTableHead(),Object(esm.b)("tbody",null,generateTableColorRow("color.text-&-icon.link.standard","Für unterstützende Informationen sowie für Funktionen wie synchronisieren, sortieren und hinzufügen.","For supporting information as well as for functions like synchronize, sort and add."),generateTableColorRow("color.text-&-icon.functional.success","Bestätigt eine erfolgreich durchgeführte Aktion oder für Funktion wie senden, anrufen und aktivieren.",""),generateTableColorRow("color.text-&-icon.functional.danger","Für Fehlermeldungen oder Funktionen wie beenden und löschen.","Confirms a successfully performed action or for function like send, call and activate."),generateTableColorRow("color.text-&-icon.functional.warning","Für Warnungen vor möglicherweise unerwünschten Ergebnissen.","For warnings of potentially undesirable results."),generateTableColorRow("color.text-&-icon.functional.informational","Für unterstützende Informationen.","For supporting information."))))),Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Typography_2_en:Typography_2_de})))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/new_release/SketchLibrary.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),SketchLibrary_en='# New: Scale Figma Libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Figma.png" alt={alt} style={{ width: \'100%\' }} />\n\nWe now also provide Figma libraries for all designers who already work with Figma.\n\n<p><a href="https://www.figma.com/file/3xCcfn6sawB7EcfUjpr7OE/%E2%98%80%EF%B8%8F-Telekom-Scale-Beta-Light-1.0.0?type=design&node-id=11505%3A145418&mode=design&t=nAdhrYOpRNgurAwy-1" rel="nofollow" class="matomo_download">Telekom Scale Components Light </a></p>\n\n<p><a href="https://www.figma.com/file/tdmMhhu1FbA0GTapn3cGb1/%F0%9F%8C%92Telekom-Scale-Beta-Dark-1.0.0?type=design&node-id=13102%3A157996&mode=design&t=ne7mjHvtsCeTlqjL-1" rel="nofollow" class="matomo_download">Telekom Scale Components Dark </a></p>\n\n## Light and dark mode\n\nScale contains its own library for light and dark mode. This way, you can design your interface in either light or dark mode. It’s possible to change this anytime at the push of a button, so you can assess a given effect in the other mode. But even without additional designs, the development team can activate the other mode.\n\n## Prototype\n\nEach interactive component is already built with prototype functionality. This helps test prototypes and your product even faster.\n\n## Documentation\n\nEach component includes a short description and a link to the detailed documentation on the respective usage page of the Scale website.\n\n## Updates\n\nWith a Pro license from Figma, you will automatically receive future updates. To get this, go to “Getting started” in the library and leave your email address in the space provided. We will then invite you to the library.\n',SketchLibrary_de='# New: Scale Figma Libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Figma.png" alt={alt} style={{ width: \'100%\' }} />\n\nFür alle Designer\\*innen, die bereits mit Figma arbeiten, stellen wir nun auch Figma Libraries zur Verfügung.\n\n<p><a href="https://www.figma.com/file/3xCcfn6sawB7EcfUjpr7OE/%E2%98%80%EF%B8%8F-Telekom-Scale-Beta-Light-1.0.0?type=design&node-id=11505%3A145418&mode=design&t=nAdhrYOpRNgurAwy-1" rel="nofollow" class="matomo_download">Telekom Scale Components Light </a></p>\n\n<p><a href="https://www.figma.com/file/tdmMhhu1FbA0GTapn3cGb1/%F0%9F%8C%92Telekom-Scale-Beta-Dark-1.0.0?type=design&node-id=13102%3A157996&mode=design&t=ne7mjHvtsCeTlqjL-1" rel="nofollow" class="matomo_download">Telekom Scale Components Dark </a></p>\n\n## Light und Dark Mode\n\nScale beinhaltet für Light und Dark Mode jeweils eine eigene Library. So kannst du dein Interface entweder im hellen oder dunklen Modus gestalten. Ein Wechsel ist jederzeit per Knopfdruck möglich, sodass du die Wirkung im jeweils anderen Modus beurteilen kannst. Aber auch ohne zusätzliche Designs kann das Entwicklungsteam den anderen Modus aktivieren.\n\n## Prototype\n\nJede interaktive Komponente ist bereits mit Prototyp-Funktion gebaut. So kannst du noch schneller Prototypen erstellen und dein Produkt testen.\n\n## Dokumentation\n\nJede Komponente beinhaltet eine Kurzbeschreibung und einen Link zur ausführlicheren Dokumentation auf der jeweiligen Usage Page der Scale Website.\n\n## Updates\n\nMit einer Pro Lizenz von Figma erhältst du sogar ganz automatisch künftige Updates. Gehe dafür in die Library zur Seite “Getting started” und hinterlasse deine E-Mail Adresse in dem dafür vorgesehenen Bereich. Wir laden dich dann zur Library ein.\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"New Release/Sketch Library Update",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?SketchLibrary_en:SketchLibrary_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"New Release/Sketch Library Update",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?SketchLibrary_en:SketchLibrary_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/Accessibility.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Accessibility_en="# Accessibility\n\n## Serving everyone\n\nWe aim at making inclusive products and experiences that serve everyone.\nTherefore, Scale components meet the Telekom accessibility requirements as well as the [Web Content Accessibility Guidelines (WCAG) version 2.1](https://www.w3.org/TR/WCAG21/), level AA criteria.\n\n## Crucial testing\n\n![AA Tag](assets/1_setup/3_scale-for-developers/aa_tag.png)\n\nComponents marked with the green label Accessible AA (pictured above) fulfill AA Accessibility requirements for the following setup:\n\n**Operating system:** Microsoft Windows 10\n\n**Browser:** Google Chrome version 85.0.4183.121 (official build) (64 bit)\n\n**Screenreader:** JAWS2019\n\n**High-contrast mode is tested on:**\n\n**Browser:** Mozilla Firefox ESR52.9.0 (64 bit)\n\n## How to achieve full compliance\n\nWhile Scale components and the standard theme support accessible experiences, many other factors determine full compliance with all mandatory accessibility requirements of your product as a whole.\nTherefore, please have your particular product reviewed by an accessibility consultant to find out how to use the Scale components in the best possible way.\n\n## Suggestions are always welcome\n\nOur goal is to make Scale as accessible as possible. If you have any comments or suggestions on how we can make it better for users with disabilities, please reach out on our Git Repo or contact support.\n",Accessibility_de="# Barrierefreiheit\n\n## Produkte und Services für alle\n\nUnser Ziel ist es, inklusive Produkte und Erlebnisse zu schaffen, die allen Menschen zugänglich sind.\nDaher erfüllen die Scale Komponenten die Anforderungen der Telekom für Barrierefreiheit sowie die Kriterien der [Web Content Accessibility Guidelines (WCAG) Version 2.1](https://www.w3.org/TR/WCAG21/), Stufe AA.\n\n## Technische Kriterien\n\n![AA Tag](assets/1_setup/3_scale-for-developers/aa_tag.png)\n\nKomponenten, die mit dem grünen Label Accessible AA (siehe Abbildung) gekennzeichnet sind, erfüllen die Anforderungen an die Barrierefreiheit AA bei den folgenden Anwendungen:\n\n**Betriebssystem:** Microsoft Windows 10\n\n**Browser:** Google Chrome Version 85.0.4183.121 (64 bit)\n\n**Screen Reader:** JAWS2019\n\n**Modus für hohen Kontrast aktiviert bei:**\n\n**Browser:** Mozilla Firefox ESR52.9.0 (64 bit)\n\n## Alle Anforderungen kennen\n\nDie Scale Komponenten und das Standard Theme erfüllen bereits die Basis der Anforderungen für ein barrierefreies Nutzungserlebnis. Es gibt aber noch eine Reihe anderer wichtiger Faktoren, um die vollständige Barrierefreiheit deines Produkts oder Services zu gewährleisten.\nWende dich dafür an die Berater\\*innen für Barrierefreiheit, um zu erfahren, wie du die Scale Komponenten bestmöglich einsetzt.\n\n## Deine Ideen\n\nDu hast Feedback oder Vorschläge, wie wir die Plattform für Menschen mit Einschränkungen noch zugänglicher machen können? Erstelle bitte ein Ticket im Git Repo oder kontaktiere unseren Support.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Accessibility",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Accessibility_en:Accessibility_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Accessibility",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Accessibility_en:Accessibility_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/Browser_Support.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Browser_Support_en="# Browser Support\n\n## We focus on the evergreens.\n\n![Browser Support](assets/1_setup/3_scale-for-developers/Browser-support-scale.png)\n\nAll of our components are tested to support the most important (evergreen) browsers. Currently, that's a total of 11 browsers.\nPlease refer to the table above for more information on the exact browser types and versions, as well as the details regarding future or other forms of support.\n",Browser_Support_de="# Unterstützte Internet-Browser\n\n## Wir setzen auf Evergreens.\n\n![Browser Support](assets/1_setup/3_scale-for-developers/Browser-support-scale.png)\n\nAlle unsere Komponenten funktionieren mit den gängigsten Internet-Browsern – derzeit sind es insgesamt 11.\nWeitere Details zu den jeweiligen Typen und Versionen der Browser sowie Informationen zu zukünftigen oder anderen unterstützten Formaten findest du in der oben abgebildeten Tabelle.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Browser Support",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Browser_Support_en:Browser_Support_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Browser Support",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Browser_Support_en:Browser_Support_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/GettingStartedForDesigners.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),GettingStartedForDesigners_en='# Getting started for designers\n\nWith Scale, you can develop brand-compliant, intuitive, and accessible products and services – in a simple and efficient way. The component library contains everything you need to do this.\n\n## 1. Install TeleNeo\n\nThe following font is part of the Telekom brand and design assets. It is not open source and may not be used freely. The express consent of Deutsche Telekom is required for commercial use.\n\n[Download TeleNeo](https://www.brand-design.telekom.com/asset/font-0-teleneo/)\n\n## 2. Activate the component libraries in your design tool\n\n<br/>\n\n### Light and dark mode\n\nr\nScale contains its own library for light and dark mode. This way, you can design your interface in either light or dark mode. It’s possible to change this anytime at the push of a button, so you can assess a given effect in the other mode. But even without additional designs, the development team can activate the other mode.\n\n### Figma libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Figma.png" alt={alt} style={{ width: \'100%\' }} />\n\n<p><a href="https://www.figma.com/file/3xCcfn6sawB7EcfUjpr7OE/%E2%98%80%EF%B8%8F-Telekom-Scale-Beta-Light-1.0.0?type=design&node-id=11505%3A145418&mode=design&t=nAdhrYOpRNgurAwy-1" rel="nofollow" class="matomo_download">Telekom Scale Components Light </a></p>\n\n<p><a href="https://www.figma.com/file/tdmMhhu1FbA0GTapn3cGb1/%F0%9F%8C%92Telekom-Scale-Beta-Dark-1.0.0?type=design&node-id=13102%3A157996&mode=design&t=ne7mjHvtsCeTlqjL-1" rel="nofollow" class="matomo_download">Telekom Scale Components Dark </a></p>\n\nBy the way, with a Pro license from Figma, you will automatically receive future updates. To get this, go to “Getting started” in the library and leave your email address in the space provided. We will then invite you to the library.\n\n<br/>\n\n### Sketch libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Sketch.png" alt={alt} style={{ width: \'100%\' }} />\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-light.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Light)</a></p>\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-dark.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Dark)</a></p>\n\nImportant note: the latest release doesn’t include an update of the Sketch library.\n\n<br/>\n\n### Legal notes\n\nDeutsche Telekom reserves all rights to the Telekom brand. The Telekom theme must be completely replaced for any usage that is not explicitly intended for the Telekom.\n\n## Design documentation\n\nFor each component, there is detailed information on its usage as well as on the different variants. To access this, simply go to the desired component in the left sidebar and select the Usage tab (1).\n\n![Scale for Designers](assets/1_setup/2_scale-for-designers/storybook-Usage-tab.png)\n\n<br/>\n\n# Your feedback is welcome!\n\nWith your feedback, we can make Scale even better. You can also share your designs with us so everyone can benefit from them.\nFeel free to reach out to the Scale team at [contact@brand-design.telekom.com](mailto:contact@brand-design.telekom.com).\n',GettingStartedForDesigners_de='# Erste Schritte für Designer\\*innen\n\nMit Scale entwickelst du markenkonforme, intuitive und barrierefreie Produkte und Services – einfach und effizient. Die Komponenten-Library enthält alles, was du dafür benötigst.\n\n## 1. Installiere TeleNeo\n\nDie folgende Schrift gehört zu den Marken- und Design-Assets der Telekom. Sie ist nicht Open Source und darf nicht frei verwendet werden. Für eine kommerzielle Nutzung ist die ausdrückliche Zustimmung der Deutschen Telekom erforderlich.\n\n[Download TeleNeo](https://www.brand-design.telekom.com/asset/font-0-teleneo/)\n\n## 2. Aktiviere die Komponenten-Libraries in deinem Design Tool\n\n<br/>\n\n### Light und Dark Mode\n\nScale beinhaltet für Light und Dark Mode jeweils eine eigene Library. So kannst du dein Interface entweder im hellen oder dunklen Modus gestalten. Ein Wechsel ist jederzeit per Knopfdruck möglich, sodass du die Wirkung im jeweils anderen Modus beurteilen kannst. Aber auch ohne zusätzliche Designs kann das Entwicklungsteam den anderen Modus aktivieren.\n\n### Figma Libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Figma.png" alt={alt} style={{ width: \'100%\' }} />\n\n<p><a href="https://www.figma.com/file/3xCcfn6sawB7EcfUjpr7OE/%E2%98%80%EF%B8%8F-Telekom-Scale-Beta-Light-1.0.0?type=design&node-id=11505%3A145418&mode=design&t=nAdhrYOpRNgurAwy-1" rel="nofollow" class="matomo_download">Telekom Scale Components Light </a></p>\n<p><a href="https://www.figma.com/file/tdmMhhu1FbA0GTapn3cGb1/%F0%9F%8C%92Telekom-Scale-Beta-Dark-1.0.0?type=design&node-id=13102%3A157996&mode=design&t=ne7mjHvtsCeTlqjL-1" rel="nofollow" class="matomo_download">Telekom Scale Components Dark </a></p>\n\nÜbrigens: Mit einer Pro Lizenz von Figma erhältst du sogar ganz automatisch künftige Updates. Gehe dafür in die Library zur Seite “Getting started” und hinterlasse deine E-Mail Adresse in dem dafür vorgesehenen Bereich. Wir laden dich dann zur Library ein.\n\n<br/>\n\n### Sketch Libraries\n\n<img src="assets/1_setup/2_scale-for-designers/Sketch.png" alt={alt} style={{ width: \'100%\' }} />\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-light.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Light)</a></p>\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-dark.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Dark)</a></p>\n\nWichtiger Hinweis: das aktuellste Release beinhaltet kein Update der Sketch Library.\n\n<br/>\n\n### Rechtliche Hinweise\n\nDie Deutsche Telekom behält sich alle Rechte an der Marke Telekom vor. Für jede Nutzung, die nicht explizit für die Telekom bestimmt ist, muss das Telekom Theme komplett ersetzt werden.\n\n## Designdokumentationen\n\nZu jeder Komponente gibt es ausführliche Informationen zur Verwendung sowie zu den unterschiedlichen Varianten. Gehe dazu einfach in der linken Seitenleiste zur gewünschten Komponente und wähle dort die Registerkarte „Usage“ (1) aus.\n\n![Scale for Designers](assets/1_setup/2_scale-for-designers/storybook-Usage-tab.png)\n\n<br/>\n\n# Dein Feedback ist willkommen!\n\nMit deinem Feedback können wir Scale noch besser machen. Du kannst auch deine Designs mit uns teilen, damit alle davon profitieren können.\u2028Du erreichst das Scale Team unter [contact@brand-design.telekom.com](mailto:contact@brand-design.telekom.com).\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Getting Started For Designers",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?GettingStartedForDesigners_en:GettingStartedForDesigners_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Getting Started For Designers",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?GettingStartedForDesigners_en:GettingStartedForDesigners_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/GettingStartedForDevelopers.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),GettingStartedForDevelopers_en='# Setup for Developers\n\nScale provides frontend developers and engineers with a collection of reusable web components to build websites and user interfaces in major frontend frameworks like Vue, React, Angular, and HTML.\n\nAdopting the Scale design system enables developers to use consistent markup, styles, and behavior in prototype and production work.\n\n## Setting things up\n\nInstall the component library in your project with `npm` or `yarn`:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\n> To install the <a href="https://github.com/telekom/scale/releases/tag/v3.0.0-beta.53" target="_blank" rel="noopener noreferrer">version prior to dark mode</a>, do `npm install @telekom/scale-components` (without `@next`)\n\nTo use the components, you need to load a CSS file and some JavaScript. The CSS file includes the fonts and the design tokens.\n\n### Plain HTML\n\n```html\n<link\n  rel="stylesheet"\n  href="node_modules/@telekom/scale-components/dist/scale-components/scale-components.css"\n/>\n<script\n  type="module"\n  src="node_modules/@telekom/scale-components/dist/scale-components/scale-components.esm.js"\n><\/script>\n```\n\n### With a bundler or ES modules\n\n```js\nimport \'@telekom/scale-components/dist/scale-components/scale-components.css\';\nimport {\n  applyPolyfills,\n  defineCustomElements,\n} from \'@telekom/scale-components/loader\';\n\napplyPolyfills().then(() => {\n  defineCustomElements(window);\n});\n```\n\nAlternatively, if you wish to only load the component you need, for example, the button component, you can load the component in the following way:\n\n```js\nimport \'@telekom/scale-components/dist/scale-components/scale-components.css\';\nimport { defineCustomElementScaleButton } from \'@telekom/scale-components\';\n\ndefineCustomElementScaleButton();\n```\n\n### NPM Packages\n\n| Package Name                        | Description                                 |\n| ----------------------------------- | ------------------------------------------- |\n| @telekom/scale-components           | Web components                              |\n| @telekom/scale-components-react     | Wrapper package for React (autogenerated)   |\n| @telekom/scale-components-vue\\*     | Wrapper package for Vue (autogenerated)     |\n| @telekom/scale-components-angular\\* | Wrapper package for Angular (autogenerated) |\n| @telekom/scale-design-tokens\\*\\*    | Scale Design Tokens                         |\n| @telekom/design-tokens              | Telekom Design Tokens                       |\n\n> \\*deprecated since `v3.0.0-beta.X`  \n> \\*\\*deprecated since `v3.0.0-beta.100`\n\n## Frameworks\n\n[Scale and Vue](./?path=/docs/setup-info-scale-and-vue--page)<br/>\n[Scale and Angular](./?path=/docs/setup-info-scale-and-angular--page)<br/>\n[Scale and React](./?path=/docs/setup-info-scale-and-react--page)\n\n## Source Code on GitHub\n\nHere you find <a href="https://github.com/telekom/scale" target="_blank">Telekom Scale on GitHub</a>\n',GettingStartedForDevelopers_de='# Setup für Entwickler\\*innen\n\nMit Scale erhältst du wiederverwendbare Web-Komponenten zur Produktion von Webseiten und anderen digitalen User Interfaces. Du kannst sie problemlos in den wichtigsten Frameworks einsetzen, wie Vue, React und Angular – oder einfach in HTML. Durch Scale schaffst du Konsistenz bei Markups, Styles und beim Verhalten deiner Anwendungen.\n\n## Einrichtung\n\nInstalliere die Komponenten-Library mit `npm` oder `yarn` in dein Projekt:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\n> To install the <a href="https://github.com/telekom/scale/releases/tag/v3.0.0-beta.53" target="_blank" rel="noopener noreferrer">version prior to dark mode</a>, do `npm install @telekom/scale-components` (without `@next`)\n\nUm die Komponenten zu verwenden, lade die CSS-Datei sowie JavaScript. Die CSS-Datei enthält die Schriftarten und die Design-Tokens.\n\n### Plain HTML\n\n```html\n<link\n  rel="stylesheet"\n  href="node_modules/@telekom/scale-components/dist/scale-components/scale-components.css"\n/>\n<script\n  type="module"\n  src="node_modules/@telekom/scale-components/dist/scale-components/scale-components.esm.js"\n><\/script>\n```\n\n### Mit Bundler oder ES-Modulen\n\n```js\nimport \'@telekom/scale-components/dist/scale-components/scale-components.css\';\nimport {\n  applyPolyfills,\n  defineCustomElements,\n} from \'@telekom/scale-components/loader\';\n\napplyPolyfills().then(() => {\n  defineCustomElements(window);\n});\n```\n\nFalls Sie nur eine spezifische Komponente laden möchten, z.B. die Komponente Button, können Sie diese Komponente auch auf folgende Art laden:\n\n```js\nimport \'@telekom/scale-components/dist/scale-components/scale-components.css\';\nimport { defineCustomElementScaleButton } from \'@telekom/scale-components\';\n\ndefineCustomElementScaleButton();\n```\n\n### NPM Packages\n\n| Package Name                        | Description                                 |\n| ----------------------------------- | ------------------------------------------- |\n| @telekom/scale-components           | Web components                              |\n| @telekom/scale-components-react     | Wrapper package for React (autogenerated)   |\n| @telekom/scale-components-vue\\*     | Wrapper package for Vue (autogenerated)     |\n| @telekom/scale-components-angular\\* | Wrapper package for Angular (autogenerated) |\n| @telekom/scale-design-tokens\\*\\*    | Scale Design Tokens                         |\n| @telekom/design-tokens              | Telekom Design Tokens                       |\n\n> \\*deprecated since `v3.0.0-beta.X`  \n> \\*\\*deprecated since `v3.0.0-beta.100`\n\n## Frameworks\n\n[Scale und Vue](./?path=/docs/setup-info-scale-and-vue--page)<br/>\n[Scale und Angular](./?path=/docs/setup-info-scale-and-angular--page)<br/>\n[Scale und React](./?path=/docs/setup-info-scale-and-react--page)\n\n## Quellcode auf GitHub\n\nHier findest du <a href="https://github.com/telekom/scale" target="_blank">Telekom Scale auf GitHub</a>\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Getting Started For Developers",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?GettingStartedForDevelopers_en:GettingStartedForDevelopers_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Getting Started For Developers",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?GettingStartedForDevelopers_en:GettingStartedForDevelopers_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/ScaleAndAngular.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),ScaleAndAngular_en="# Scale and Angular\n\nAngular fully supports web components.\n\nYou can find an example boilerplate app in the \"examples\" folder in the [GitHub repo](https://github.com/telekom/scale/tree/main/examples/angular-boilerplate).\n\n## Setup\n\nFirst, install the package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nThen load the component library in `main.ts`:\n\n```ts\n// src/main.ts\nimport { defineCustomElements } from '@telekom/scale-components/loader';\n\n// ...\n\ndefineCustomElements();\n```\n\nAfter that, load the CSS in the `angular.json` config file:\n\n```json\n// angular.json\n{\n  \"build\": {\n    \"styles\": [\n      \"node_modules/@telekom/scale-components/dist/scale-components/scale-components.css\"\n    ]\n  }\n}\n```\n\nIn order for Angular to handle non-Angular element names, include the [`CUSTOM_ELEMENTS_SCHEMA`](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA) in `src/app/app.module.ts`:\n\n```ts\n// src/app/app.module.ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n  // ...\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppModule {}\n```\n\nIf you use routing, also include it in `src/app/app-routing.module.ts`:\n\n```ts\n// src/app/app-routing.module.ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n  // ..\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppRoutingModule {}\n```\n\nYou should now be able to use Scale components in your templates:\n\n```html\n<div>\n  <scale-button>Click!</scale-button>\n</div>\n```\n\n## Events in Angular\n\nIn order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation on these custom events on the respective component pages in the \"docs\" section.\n\nYou can bind to `scale`-prefixed events with the regular Angular syntax:\n\n```html\n<scale-slider (scaleInput)=\"setValue($event)\"></scale-slider>\n```\n\n## Reactive Forms\n\nIf you're working with Reactive Forms, you will notice that the form controls in Scale —text field, checkbox, etc.— do not work out of the box. Only native form control elements like `input` and `textarea` do.\n\nWriting custom Control Value Accessors can be hard, so we provide a series of working examples to get you started.\n\nTo try it out, please manually add the directives found in the [example project](https://github.com/telekom/scale/tree/main/examples/angular-reactive-forms/src/directives) to your project and load it in `app.module.ts`:\n\n```ts\n// src/app/app.module.ts\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { TextValueAccessorDirective } from 'src/directives/text-value-accessor';\nimport { CheckedValueAccessorDirective } from 'src/directives/checked-value-accessor';\nimport { NumberValueAccessorDirective } from 'src/directives/number-value-accessor';\n\n@NgModule({\n  declarations: [\n    // ...\n    TextValueAccessorDirective,\n    CheckedValueAccessorDirective,\n    NumberValueAccessorDirective,\n  ],\n  imports: [\n    // don't forget to import the `ReactiveFormsModule`\n    ReactiveFormsModule,\n  ],\n})\nexport class AppModule {}\n```\n\n## Proxy Package\n\nThe automatically generated proxy packages will be removed in v4:\n\n- `@telekom/scale-components-angular`\n- `@telekom/scale-components-angular-neutral`\n\nPlease use `@telekom/scale-components` directly, support for custom elements is already great.\n",ScaleAndAngular_de="# Scale und Angular\n\nAngular unterstützt problemlos Web Components.\n\nEin Beispiel für eine Boilerplate-App findest du im [GitHub Repository](https://github.com/telekom/scale/tree/main/examples/angular-boilerplate).\n\n## Setup\n\nInstalliere zuerst das Package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nLade danach die Komponenten-Bibliothek in `main.ts`:\n\n```ts\n// src/main.ts\nimport { defineCustomElements } from '@telekom/scale-components/loader';\n\n// ...\n\ndefineCustomElements();\n```\n\nLade anschließend das CSS in die Konfigurationsdatei `angular.json`:\n\n```json\n// angular.json\n{\n  \"build\": {\n    \"styles\": [\n      \"node_modules/@telekom/scale-components/dist/scale-components/scale-components.css\"\n    ]\n  }\n}\n```\n\nUm Angular den Umgang mit Non-Angular-Elementnamen zu ermöglichen, füge das `CUSTOM_ELEMENTS_SCHEMA` in `src/app/app.module.ts` ein:\n\n```ts\n// src/app/app.module.ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n  // ...\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppModule {}\n```\n\nWenn du Routing verwendest, füge es auch in `src/app/app-routing.module.ts` ein:\n\n```ts\n// src/app/app-routing.module.ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n  // ..\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppRoutingModule {}\n```\n\nNun solltest du in der Lage sein, Scale-Komponenten in deinen Templates zu verwenden:\n\n```html\n<div>\n  <scale-button>Click!</scale-button>\n</div>\n```\n\n## Events in Angular\n\nUm Konflikte mit Standard-Events zu vermeiden und für beste Kompatibilität mit anderen Libraries und Frameworks, sind die Custom Events, die von einigen Scale-Komponenten ausgegeben werden, mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z. B. scaleChange). Die Dokumentation zu Custom Events findest du auf den jeweiligen Komponentenseiten im Abschnitt \"docs\".\n\nAn Events mit dem Prefix `scale` kannst du reguläre Angular-Syntax anbinden:\n\n```html\n<scale-slider (scaleInput)=\"setValue($event)\"></scale-slider>\n```\n\n## Reactive Forms\n\nWenn du mit Reactive Forms arbeitest, wirst du feststellen, dass die Formularelemente in Scale —Textfield, Checkbox, etc.— nicht direkt funktionieren. Nur native Formularsteuerelemente wie `input` und `textarea` funktionieren.\n\nDas Schreiben von benutzerdefinierten Control Value Accessors kann Schwierigkeiten mit sich bringen. Um den Einstieg zu erleichtern, stellen wir daher eine Reihe von Arbeitsbeispielen zur Verfügung.\n\nUm es auszuprobieren, füge bitte die Directives aus [dem Beispielprojekt](https://github.com/telekom/scale/tree/main/examples/angular-reactive-forms/src/directives) manuell in dein Projekt ein und lade sie in `app.module.ts`:\n\n```ts\n// src/app/app.module.ts\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { TextValueAccessorDirective } from 'src/directives/text-value-accessor';\nimport { CheckedValueAccessorDirective } from 'src/directives/checked-value-accessor';\nimport { NumberValueAccessorDirective } from 'src/directives/number-value-accessor';\n\n@NgModule({\n  declarations: [\n    // ...\n    TextValueAccessorDirective,\n    CheckedValueAccessorDirective,\n    NumberValueAccessorDirective,\n  ],\n  imports: [\n    // don't forget to import the `ReactiveFormsModule`\n    ReactiveFormsModule,\n  ],\n})\nexport class AppModule {}\n```\n\n## Proxy Package\n\nDie automatisch generierten Proxy Packages werden in v4 entfernt:\n\n- `@telekom/scale-components-angular`\n- `@telekom/scale-components-angular-neutral`\n\nBitte nutze `@telekom/scale-components` direkt. Custom Elements werden bereits super unterstützt.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Scale and Angular",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndAngular_en:ScaleAndAngular_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Scale and Angular",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndAngular_en:ScaleAndAngular_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/ScaleAndReact.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),ScaleAndReact_en="# Scale and React\n\nReact supports web components, but there are a couple of limitations to be aware of, listed below. Fortunately, it's possible to work around them.\n\nYou can find an example boilerplate app in the \"examples\" folder in the [GitHub repo](https://github.com/telekom/scale/tree/main/examples).\n\n## Setup\n\nFirst, install the package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nThen load the component library and the CSS in `index.js`:\n\n```js\nimport { defineCustomElements } from '@telekom/scale-components/loader';\nimport '@telekom/scale-components/dist/scale-components/scale-components.css';\n\n// ...\n\ndefineCustomElements();\n```\n\nYou should now be able to use Scale components without having to import them:\n\n```jsx\nimport React from 'react';\n\nconst App = () => (\n  <div>\n    <scale-button>Click</scale-button>\n  </div>\n);\n\nexport default App;\n```\n\nIf you use our automatically generated proxy package `@telekom/scale-components-react` (don't forget to install it first `npm install @telekom/scale-components-react@next`):\n\n```jsx\nimport React from 'react';\nimport { ScaleButton } from '@telekom/scale-components-react';\n\nconst App = () => (\n  <div>\n    <ScaleButton>Click</ScaleButton>\n  </div>\n);\n\nexport default App;\n```\n\n> In the first snippet, the custom element (aka web component) is used directly (`<scale-button>`); in the second, a React component (`ScaleButton`) is wrapping the actual web component. This wrapper is useful to work around the framework limitations.\n\n## Limitations\n\n### Data Binding\n\nReact passes all data to custom elements not as props but as HTML attributes which can only be strings, so objects or arrays will be stringified and you'll end up with `some-attr=\"[object Object]\"`. You can read more about it in this [GitHub issue](https://github.com/facebook/react/issues/11347).\n\n### Custom Events\n\nReact has its own [synthetic event system](https://reactjs.org/docs/handling-events.html), which makes it impossible to declaratively bind to custom events. That means `<scale-button onScaleChange={handleChange}>` won't work.\n\nWorking around these limitations without help is possible but can be cumbersome and requires some imperative code. So we recommend using a wrapper or interop layer to make things easier.\n\n- [reactify-wc](https://github.com/BBKolton/reactify-wc) — Turn web components into React components\n- [@skatejs/val](https://github.com/skatejs/val) — A generic wrapper for better VDOM/DOM integration\n- [@telekom/scale-components-react](https://www.npmjs.com/package/@telekom/scale-components-react) — Our own automatically generated proxy package\n\nAn example using `reactify-wc` would look like this:\n\n```jsx\nimport React from 'react';\nimport reactifyWc from 'reactify-wc';\n\nconst ScaleSlider = reactifyWc('scale-slider');\n\nconst App = () => {\n  const handleInput = (event) => {\n    // it works!\n  };\n  return <ScaleSlider label=\"Example\" onScaleInput={handleInput}></ScaleSlider>;\n};\n\nexport default App;\n```\n\nPlease note that when using any custom events from scale in a wrapper, it is important to include \"on\" before the event name. For example, \"scaleChange\" should be written as \"onScaleChange.\n\n## Events in React\n\nIn order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation for these custom events on the respective component pages in the \"docs\" section.\n\nDue to React's [synthetic events](https://reactjs.org/docs/handling-events.html), binding to custom events requires some extra work. You can use an interop layer like the ones listed above, or alternatively use [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) to bind imperatively with `addEventListener`.\n\n## Styles\n\nIt's important to remember that most Scale components leverage the Shadow DOM, so it's not possible to apply styles directly from the outside.\n\nPlease refer to our [Customization and Themes](./?path=/docs/guidelines-customization-and-themes--page) page for guidance.\n\n`styled-components`-type of techniques will not work. However, it's possible to inline scoped variables overwrites:\n\n```jsx\n// ..\n\nconst Slider = (\n  <ScaleSlider\n    label=\"Example\"\n    track-small\n    style={{\n      '--background-track': 'tomato',\n      '--color-display-value': 'limegreen',\n    }}\n  ></ScaleSlider>\n);\n```\n\n## Proxy Package\n\nThe automatically generated proxy packages **might** be deprecated in v4:\n\n- `@telekom/scale-components-react`\n- `@telekom/scale-components-react-neutral`\n\nSupport for custom elements landed in React in the `@experimental` dist. Please try it out, any feedback is appreciated. See https://github.com/facebook/react/issues/11347#issuecomment-988970952\n",ScaleAndReact_de="# Scale und React\n\nReact unterstützt Web Components. Bestehende Einschränkungen und wie du sie umgehen kannst, listen wir im Folgenden auf.\n\nEin Beispiel für eine Boilerplate App findest du im Ordner _Examples_ in unserem [GitHub Repository](https://github.com/telekom/scale/tree/main/examples).\n\n## Setup\n\nInstalliere zuerst das Package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nLade danach die Komponenten und das CSS in `index.js`:\n\n```js\nimport { defineCustomElements } from '@telekom/scale-components/loader';\nimport '@telekom/scale-components/dist/scale-components/scale-components.css';\n\n// ...\n\ndefineCustomElements();\n```\n\nJetzt kannst du die Scale-Komponenten ohne zusätzlichen Import nutzen:\n\n```jsx\nimport React from 'react';\n\nconst App = () => (\n  <div>\n    <scale-button>Click</scale-button>\n  </div>\n);\n\nexport default App;\n```\n\nWenn du unser automatisch generiertes Proxy Package `@telekom/scale-components-react` nutzt (vergiss nicht, es zu installieren `npm install @telekom/scale-components-react@next`):\n\n```jsx\nimport React from 'react';\nimport { ScaleButton } from '@telekom/scale-components-react';\n\nconst App = () => (\n  <div>\n    <ScaleButton>Click</ScaleButton>\n  </div>\n);\n\nexport default App;\n```\n\n> Das erste Beispiel nutzt die Web Component `<scale-button>` direkt, das zweite ruft sie innerhalb der React-Komponente `ScaleButton` auf. Die zweite Variante ist besonders nützlich, um Einschränkungen des Frameworks zu umgehen.\n\n## Einschränkungen\n\n### Data Binding\n\nReact übermittelt Daten zu Custom Elements nicht als Properties, sondern als HTML-Attribute, die nur aus Strings bestehen dürfen. Objekte und Arrays werden in Strings konvertiert. Das produziert `some-attr=\"[object Object]\"`. Weitere Informationen findest du in diesem [GitHub Issue](https://github.com/facebook/react/issues/11347).\n\n### Custom Events\n\nReact hat sein eigenes [Synthetic Event System](https://reactjs.org/docs/handling-events.html), weshalb Custom Events nicht deklarativ angebunden werden können. `<scale-button onScaleChange={handleChange}>` wird nicht funktionieren.\n\nDiese Einschränkung ohne Hilfe zu umgehen, kann aufwändig sein und erfordert imperativen Code. Wir empfehlen die Verwendung eines Wrappers oder Interop Layers.\n\n- [reactify-wc](https://github.com/BBKolton/reactify-wc) — Konvertiere Web Components in React Components\n- [@skatejs/val](https://github.com/skatejs/val) — Generischer Wrapper für bessere VDOM/DOM-Integration\n- [@telekom/scale-components-react](https://www.npmjs.com/package/@telekom/scale-components-react) — Unser automatisch generiertes Proxy Package\n\nEin Beispiel mit `reactify-wc` sieht wie folgt aus:\n\n```jsx\nimport React from 'react';\nimport reactifyWc from 'reactify-wc';\n\nconst ScaleSlider = reactifyWc('scale-slider');\n\nconst App = () => {\n  const handleInput = (event) => {\n    // it works!\n  };\n  return <ScaleSlider label=\"Example\" onScaleInput={handleInput}></ScaleSlider>;\n};\n\nexport default App;\n```\n\nBitte beachten Sie, dass es wichtig ist, das Wort \"on\" vor dem Ereignisnamen zu verwenden, wenn Sie benutzerdefinierte Ereignisse von einer Skala in einem Wrapper verwenden. \"scaleChange\" sollte zum Beispiel als \"onScaleChange\" geschrieben werden.\n\n## Events in React\n\nUm Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z.B. `scaleChange`) Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt \"Docs\".\n\nAufgrund von Reacts [Synthetic Events](https://reactjs.org/docs/handling-events.html), bedarf das Binding von Custom Events etwas Mehraufwand. Nutze wie oben beschrieben einen Interop Layer oder alternativ [`ref`](https://reactjs.org/docs/refs-and-the-dom.html), um `addEventListener` imperativ anzuwenden.\n\n## Styles\n\nDie meisten Scale-Komponenten nutzen das Shadow-DOM. So kannst du Styles direkt von ausserhalb der Komponente anwenden. Unter [Anpassungen und Themes](./?path=/docs/guidelines-customization-and-themes--page) findest du mehr Informationen.\n\nDie `styled-components`-Techniken werden nicht funktionieren. Es ist möglich, Overwrites für Scoped Variables inline anzuwenden:\n\n```jsx\n// ..\n\nconst Slider = (\n  <ScaleSlider\n    label=\"Example\"\n    track-small\n    style={{\n      '--background-track': 'tomato',\n      '--color-display-value': 'limegreen',\n    }}\n  ></ScaleSlider>\n);\n```\n\n## Proxy Package\n\nDie automatisch generierten Proxy Packages könnten in v4 auslaufen:\n\n- `@telekom/scale-components-react`\n- `@telekom/scale-components-react-neutral`\n\nReact bietet nun Support für Custom Elements in der `@experimental` Distribution. Probiere es aus! Wir freuen uns auf jegliches Feedback. Siehe https://github.com/facebook/react/issues/11347#issuecomment-988970952\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Scale and React",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndReact_en:ScaleAndReact_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Scale and React",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndReact_en:ScaleAndReact_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/setup_and_info/ScaleAndVue.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),ScaleAndVue_en="# Scale and Vue\n\nVue fully supports web components.\n\nYou can find an example boilerplate app in the \"examples\" folder in the [GitHub repo](https://github.com/telekom/scale/tree/main/examples).\n\n## Setup\n\nFirst, install the package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nThen load the component library and the CSS in `main.js`:\n\n```js\nimport { defineCustomElements } from '@telekom/scale-components/loader';\nimport '@telekom/scale-components/dist/scale-components/scale-components.css';\n\n// ...\n\ndefineCustomElements();\n```\n\nIn order to instruct Vue to treat Scale components as custom elements, [a bit of configuration is needed](https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements).\n\nFor **Vue v2**:\n\n```js\n// main.js\nVue.config.ignoredElements = [/scale-\\w*/];\n```\n\nFor **Vue v3**, set `compilerOptions.isCustomElement`:\n\n```js\n// in vue.config.js (vue-cli)\nchainWebpack: (config) => {\n  config.module\n    .rule('vue')\n    .use('vue-loader')\n    .tap((options) => {\n      // https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements\n      options.compilerOptions = {\n        isCustomElement: (tag) => tag.startsWith('scale-'),\n      };\n      return options;\n    });\n};\n\n// in webpack config\nrules: [\n  {\n    test: /\\.vue$/,\n    use: 'vue-loader',\n    options: {\n      compilerOptions: {\n        isCustomElement: (tag) => tag.startsWith('scale-'),\n      },\n    },\n  },\n  // ...\n];\n\n// in vite.config.js\ndefineConfig({\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          isCustomElement: (tag) => tag.startsWith('scale-'),\n        },\n      },\n    }),\n  ],\n});\n\n// or in main.js (on-the-fly template compilation)\nconst app = Vue.createApp({});\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-');\n```\n\nIf your project is using ESLint with `eslint-plugin-vue`, you should also deactivate the rule `vue/no-deprecated-slot-attribute`.\n\n```js\n// In .eslintrc.js or in package.json\nrules: {\n  \"vue/no-deprecated-slot-attribute\": \"off\",\n},\n```\n\nYou should now be able to use Scale components in your templates:\n\n```html\n<div>\n  <scale-button>Click!</scale-button>\n</div>\n```\n\n## Events in Vue\n\nIn order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation for these custom events on the respective component pages in the \"docs\" section.\n\nYou can bind to `scale`-prefixed events with the regular Vue syntax:\n\n```html\n<scale-slider @scaleInput=\"handleInput\"></scale-slider>\n```\n\n## Form Input Bindings\n\nThe `v-model` directive does not work with custom elements. Only native form control elements like `input` and `textarea` do.\n\nYou can achieve the same results quite easily:\n\n```html\n<scale-text-field\n  :value=\"example\"\n  @scaleChange=\"example = $event.target.value\"\n></scale-text-field>\n```\n\n## Proxy Package\n\nThe automatically generated proxy packages will be removed in v4:\n\n- `@telekom/scale-components-vue`\n- `@telekom/scale-components-vue-neutral`\n\nPlease use `@telekom/scale-components` directly, support for custom elements is already great.\n",ScaleAndVue_de="# Scale und Vue\n\nVue unterstützt problemlos Web Components.\n\nEin Beispiel für eine Boilerplate-App findest du im [GitHub Repository](https://github.com/telekom/scale/tree/main/examples).\n\n## Setup\n\nInstalliere zuerst das Package:\n\n```bash\nnpm install @telekom/scale-components@next\n```\n\nLade danach die Komponenten-Bibliothek und das CSS in `main.js`:\n\n```ts\nimport { defineCustomElements } from '@telekom/scale-components/loader';\nimport '@telekom/scale-components/dist/scale-components/scale-components.css';\n\n// ...\n\ndefineCustomElements();\n```\n\nUm Vue den Umgang mit Custom Elements zu erleichtern, [ist etwas Konfiguration nötig](https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements).\n\nFür **Vue v2**:\n\n```js\n// main.js\nVue.config.ignoredElements = [/scale-\\w*/];\n```\n\nFür **Vue v3**, setze `compilerOptions.isCustomElement`:\n\n```js\n// in vue.config.js (vue-cli)\nchainWebpack: (config) => {\n  config.module\n    .rule('vue')\n    .use('vue-loader')\n    .tap((options) => {\n      // https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements\n      options.compilerOptions = {\n        isCustomElement: (tag) => tag.startsWith('scale-'),\n      };\n      return options;\n    });\n};\n\n// in webpack config\nrules: [\n  {\n    test: /\\.vue$/,\n    use: 'vue-loader',\n    options: {\n      compilerOptions: {\n        isCustomElement: (tag) => tag.startsWith('scale-'),\n      },\n    },\n  },\n  // ...\n];\n\n// in vite.config.js\ndefineConfig({\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          isCustomElement: (tag) => tag.startsWith('scale-'),\n        },\n      },\n    }),\n  ],\n});\n\n// or in main.js (on-the-fly template compilation)\nconst app = Vue.createApp({});\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-');\n```\n\nFalls in dem Projekt ESLint mit `eslint-plugin-vue` verwendet wird, sollte zusätzlich die Regel `vue/no-deprecated-slot-attribute` deaktiviert werden.\n\n```js\n// In .eslintrc.js or in package.json\nrules: {\n  \"vue/no-deprecated-slot-attribute\": \"off\",\n},\n```\n\nNun solltest du in der Lage sein, Scale-Komponenten in deinen Templates zu verwenden:\n\n```html\n<div>\n  <scale-button>Click!</scale-button>\n</div>\n```\n\n## Events in Vue\n\nUm Konflikte mit Standard-Events zu vermeiden und für beste Kompatibilität mit anderen Libraries und Frameworks, sind die Custom Events, die von einigen Scale-Komponenten ausgegeben werden, mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z. B. scaleChange). Die Dokumentation zu Custom Events findest du auf den jeweiligen Komponentenseiten im Abschnitt \"Docs\".\n\nAn Events mit dem Prefix `scale` kannst du reguläre Vue-Syntax anbinden:\n\n```html\n<scale-slider @scaleInput=\"handleInput\"></scale-slider>\n```\n\n## Form Input Bindings\n\nDie `v-model`-Directive wird mit Custom Elements nicht funktionieren; es funktionieren nur native Formularsteuerelemente wie `input` und `textarea`.\n\nDu kannst ganz einfach die gleichen Ergebnisse erzielen:\n\n```html\n<scale-text-field\n  :value=\"example\"\n  @scaleChange=\"example = $event.target.value\"\n></scale-text-field>\n```\n\n## Proxy Package\n\nDie automatisch generierten Proxy Packages werden in v4 entfernt:\n\n- `@telekom/scale-components-vue`\n- `@telekom/scale-components-vue-neutral`\n\nBitte nutze `@telekom/scale-components` direkt. Custom Elements werden bereits super unterstützt.\n";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Setup & Info/Scale and Vue",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndVue_en:ScaleAndVue_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Setup & Info/Scale and Vue",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?ScaleAndVue_en:ScaleAndVue_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/update_history/Design.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Design_en='# Design Updates\n\nThis page documents updates to the visual appearance of Scale.\n\n## Ghost Button Update\n\n30.11.2023\n\nWe have changed the color of the Ghost Button to optimize accessibility in dark mode.\n\n## Type Update\n\n06.04.2023\n\nFont format “Footnote” has been removed from our type scale.\n\n## Additional basic types of the Telekom Brand Header\n\n20.03.2023\n\nThe beta component “Telekom Brand Header & Navigation” released in January is extended by two new basic types - “Slim Header” and “Subtle Header”. You can find more information in the Usage Text of the [new Brand Header](./?path=/docs/beta-components-telekom-brand-header-navigation--standard).\n\n## New Brand Footer\n\n17.02.2023\n\nRelease of the new brand footer as a beta version. This will replace the current component once quality control is complete and WCAG accessibility certification is in place.\n\n## New Brand Header\n\n31.01.2023\n\nRelease of the new brand header as a beta version. This will replace the current component once quality control is complete and WCAG accessibility certification is in place. Until then, we\'d love to hear <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">your feedback</a> on the new component.\n\n## New Beta Components\n\n25.01.2023\n\n- Release of the new beta components Segmented Button and Chip.\n- The Segmented Button replaces the beta component Toggle Group.\n- New category Deprecated Components. This lists components we no longer support.\n\n<br>\n\n## Component Update (Optimized Mobile and Visual Design)\n\n27.10.2022\n\n**Visual and functionality changes**\n\n- Slider: optimized the design and expanded on the overall functionality\n- Radio Buttons: optimized the selected interactive state\n- Tags: optimized the current colors and added predefined colors\n- Switch: revised the design and added a variant for Android\n- Tab Navigation: optimized the visual design\n\n<br>\n\n**Optimized for touch-screen devices**\n\nThe following components have been resized to make them easier to use on touch screens:\n\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Removed small variants**\n\nThe following components have been adjusted in height and are now only available in one size on Scale. If you need a different size, you can change the components with CSS overwrite.\n\n- Text Field\n- Dropdown\n- Dropdown Select\n- Date Picker\n- Pagination\n\nWe continue to support the small and large button sizes. The height of the large button was also adjusted.\n\n<br>\n\n**Accessibility**\n\nInformation text now contains icons to support people with color vision deficiency (often referred to as color blindness). These are the updated components:\n\n- Text Field\n- Text Area\n- Dropdown\n- Dropdown Select\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Sketch library**\n\nThe changes above have also been applied to our Sketch library. In addition, we’ve optimized the icons for the following components:\n\n- Buttons\n- Text Field\n- Text Area\n- Rating Stars\n- Switch\n- Dropdown\n- Text List\n- Table\n\nPlease note: some small variants are no longer supported or available in the library. If you use such variants, you can replace them with the new standard size by clicking Layer ➔ Replace With. Here is an overview of the removed components:\n\n| Component       | Previous variant size | New variant name | Replaced with |\n| --------------- | --------------------- | ---------------- | ------------- |\n| Text Field      | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Dropdown        | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Dropdown Select | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Date Picker     | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Pagination      | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Table           | Small                 | Standard         | –             |\n|                 | Large                 | ❌               | Standard      |\n\n**Color tokens**\n\nThe new UI colors white and black are well suited when the color is identical in dark and light mode.\n\n## New dropdown select beta component\n\n02.08.22\n\nThe dropdown menu is now an integrated part and is no longer generated by the browser as in the [current version](./?path=/docs/components-dropdown--standard). This makes the component less error-prone. In particular, errors that could occur when switching between light and dark modes are now avoided.\n\nWe aim to deprecate the [Dropdown](./?path=/docs/components-dropdown--standard) component in favour of the newly released beta [Dropdown Select](./?path=/docs/beta-components-dropdown-select--standard) as soon as new component gets our of the beta phase.\n\n## Simplification of UI color tokens\n\n11.07.22\n\nWe have simplified the structure of UI colors and removed duplications. You can find <a href="https://github.com/telekom/design-tokens/pull/192#issuecomment-1178815001" target="_blank" rel="noopener noreferrer">a detailed overview of the changes here</a>.\n\n## Refinements to the Color Palette\n\n23.06.22\n\nColor updates:\n\n- New color category (on-subtle) for texts on colored backgrounds of the gradation Subtle\n- New color scale Yellow\n- New color scale Cyan\n- New color scale Green\n- New color scale Red\n- New color scale Orange\n- New color scale Blue\n\nColor value changes:\n\n- Updated text color function\n- Updated background color function\n- Updated Brown scale\n- Updated Violet scale\n- Updated Teal scale\n- Updated Olive scale\n- Updated gray value for Disabled in dark mode\n\nRemoved colors:\n\n- The Interaction category was removed due to duplication. If you want to use these colors, you can use the Blue color scale\n\nAffected content:\n\n- All error states and notifications, as well as warning and success messages of the respective components\n- These components: Notification Banner, Notification Message, and Notification Toast\n- Color tokens (color updates, color value changes)\n\n## Light and dark mode\n\n19.04.22\n\n- The Scale components are now also available in dark mode.\n- The color palette has been optimized.\n- The design token concept has been optimized and extended with semantic tokens.\n- The text styles have been optimized.\n\nAffected content:\n\nAll components\n\n> Please note that the following components make use of Telekom brand and design assets — including but not limited to the logos, the color magenta, the typeface and icons, as well as the footer and header components — and are **not open source** and **not available for free use**. They require Deutsche Telekom\'s express permission for use in commerce.\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-light.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Light)</a><br /><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-dark.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Dark)</a></p>\n\n[Release Notes](./?path=/docs/new-release-release-notes--page)<br>\n[Sketch Library Update](./?path=/docs/new-release-sketch-library-update--page)<br>\n[Design Tokens](./?path=/docs/guidelines-design-tokens--page)<br>\n[Typography](./?path=/docs/guidelines-typography--page)<br>\n[Colors](./?path=/docs/guidelines-colors--page)<br>\n[Shadows](./?path=/docs/guidelines-shadows--page)<br>\n\n## Roundings\n\n11.11.2021\n\n- Element roundings have been harmonized for better visual appearance.  \n  <br>\n  Affected Content: <br>\n  [Brand Header](./?path=/docs/components-brand-header-navigation--standard)  \n  [Card](./?path=/docs/components-card--standard)  \n  [Data Grid](./?path=/docs/components-data-grid--standard)  \n  [Date Picker](./?path=/docs/components-date-picker--standard)  \n  [Dropdown](./?path=/docs/components-dropdown--standard)  \n  [Flyout Menu](./?path=/docs/components-flyout-menu--standard)  \n  [Footer](./?path=/docs/components-footer--standard)  \n  [Modal](./?path=/docs/components-modal--standard)  \n  [Pagination](./?path=/docs/components-pagination--standard)  \n  [Table](./?path=/docs/components-table--standard)  \n  [Tag](./?path=/docs/components-tag--standard)  \n  [Text Area](./?path=/docs/components-text-area--standard)  \n  [Text Field](./?path=/docs/components-text-field--standard)\n\n## Link color & underline\n\n13.9.2021\n\n- The default link color has been updated to blue-60. This way we ensure better contrasts and accessibility.\n- The option to use a link without underline has been added.  \n  <br>\n  Affected Content: <br>\n  [Link](./?path=/docs/components-link--standard)\n',Design_de='# Design Updates\n\nDiese Seite dokumentiert Updates der visuellen Erscheinung von Scale\n\n## Aktualisierung des Ghost Buttons\n\n30.11.2023\n\nWir haben die Farbe des Ghost Buttons geändert, um die Barrierefreiheit im Dark Mode zu optimieren.\n\n## Typografie-Update\n\n06.04.2023\n\nDas Schriftformat “Footnote” wurde aus der Typografie-Skala entfernt.\n\n## Weitere Basistypen des Telekom Brand Headers\n\n20.03.2023\n\nDie im Januar veröffentlichte Beta-Komponente “Telekom Brand Header & Navigation” wird um zwei neue Basistypen ergänzt – “Slim Header” und “Subtle Header”. Mehr Informationen findest du im Usage Text des [neuen Brand Headers](./?path=/docs/beta-components-telekom-brand-header-navigation--standard).\n\n## Neuer Brand Footer\n\n17.02.2023\n\nVeröffentlichung des neuen Brand Footers als Beta-Version. Dieser ersetzt die aktuelle Komponente, wenn die Qualitätskontrolle abgeschlossen ist und die WCAG-Zertifizierung für Barrierefreiheit vorliegt.\n\n## Neuer Brand Header\n\n31.01.2023\n\nVeröffentlichung des neuen Brand Headers als Beta-Version. Dieser ersetzt die aktuelle Komponente, wenn die Qualitätskontrolle abgeschlossen ist und die WCAG-Zertifizierung für Barrierefreiheit vorliegt. Bis dahin freuen wir uns über <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">euer Feedback</a> zur neuen Komponente.\n\n## Neue Beta-Komponenten\n\n25.01.2023\n\n- Veröffentlichung der neuen Beta-Komponenten Segmented Button und Chip.\n- Der Segmented Button ersetzt die Beta-Komponente Toggle Group.\n- Neue Kategorie „Deprecated Components“. Hier sind Komponenten aufgelistet, die wir nicht weiter unterstützen.\n\n<br>\n\n## Komponenten-Update (Optimierung von Mobile und Visual Design)\n\n27.10.2022\n\n**Visuelle und funktionale Änderungen**\n\n- Slider: Visuelle Optimierung und funktionale Erweiterung\n- Radio Buttons: Optimierung des Interactive States „Selected“\n- Tags: Farbliche Optimierung und Erweiterung um vordefinierte Farben\n- Switch: Visuelle Überarbeitung und eine neue Variante für Android\n- Tab Navigation: Visuelle Optimierung\n\n<br>\n\n**Optimierung für Geräte mit Touchscreen**\n\nDie Größe der folgenden Komponenten ist angepasst und vereinfacht die Nutzung auf Touchscreens:\n\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Entfernte Varianten „Small“**\n\nDie folgenden Komponenten sind in ihrer Höhe angepasst und ab sofort nur noch in einer Größe auf Scale verfügbar. Wenn du für deinen Anwendungsfall eine andere Größe brauchst, kannst du die Komponenten per CSS-Overwrite ändern.\n\n- Textfield\n- Dropdown\n- Dropdown Select\n- Date Picker\n- Pagination\n\nDen Button unterstützen wir weiterhin in den Größen „Small“ und „Large“.\nDie Höhe des „Large Button“ ist ebenfalls angepasst.\n\n<br>\n\n**Barierrefreiheit**\n\nInformationstexte enthalten ab sofort Icons, um Menschen mit Farbfehlsichtigkeit in ihrer Nutzung zu unterstützen. Das sind die geänderten Komponenten:\n\n- Text Field\n- Text Area\n- Dropdown\n- Dropdown Select\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Sketch Library**\n\nDie oben genannten Änderungen wurden auch in unserer Sketch-Library angepasst. Zusätzlich haben wir die Symbole der folgenden Komponenten optimiert:\n\n- Buttons\n- Text-Field\n- Text-Area\n- Rating Stars\n- Switch\n- Dropdown\n- Text List\n- Table\n\nBitte beachte: Einige „Small“-Varianten werden nicht mehr unterstützt und sind in der Library nicht mehr verfügbar. Solltest du in deinem Layout solche Varianten verwenden, kannst du sie über „Layer“ ➔ „Replace with“ durch die neue Standardgröße ersetzen. Hier eine Übersicht der entfernten Komponenten:\n\n| Komponente      | Alte Variantengröße | Neuer Variantenname | Ersetzen durch |\n| --------------- | ------------------- | ------------------- | -------------- |\n| Textfield       | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Dropdown        | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Dropdown Select | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Date Picker     | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Pagination      | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Table           | Small               | Standard            | –              |\n|                 | Large               | ❌                  | Standard       |\n\n**Farbtokens**\n\nDie neuen UI-Farben „White“ und „Black“ sind für Anwendungsfälle geeignet, bei denen die Farbe im Dark und Light Mode identisch ist.\n\n## Neue Dropdown Select Beta-Komponente\n\n02.08.2022\n\nDas Dropdown-Menü ist nun ein integrierter Bestandteil der Komponente und wird nicht mehr wie in der [bestehenden Version](./?path=/docs/components-dropdown--standard) vom Browser generiert. Dadurch ist die Komponente weniger fehleranfällig. Insbesondere Fehler, die beim Switch zwischen Light- und Dark Mode entstehen konnten, werden nun vermieden.\n\nWir planen, die bestehende [Dropdown-Komponente](./?path=/docs/components-dropdown--standard) zugunsten der neu veröffentlichten Beta-Version von [Dropdown Select](./?path=/docs/beta-components-dropdown-select--standard) zu verwerfen, sobald die neue Komponente die Beta-Phase verlassen hat.\n\n## Vereinfachung der UI-Farbtokens\n\n11.07.22\n\nWir habe die Struktur der UI-Farben vereinfacht und Dopplungen entfernt. Eine <a href="https://github.com/telekom/design-tokens/pull/192#issuecomment-1178815001" target="_blank" rel="noopener noreferrer">detaillierte Übersicht der Änderungen findest du hier</a>.\n\n## Überarbeitung der Farbpalette\n\n23.06.22\n\nFarbergänzungen:\n\n- Neue Farbkategorie („on-subtle”) für Texte auf farbigen Hintergründen der Abstufung „Subtle”\n- Neue Farbskala „Yellow“\n- Neue Farbskala „Cyan“\n- Neue Farbskala „Green“\n- Neue Farbskala „Red“\n- Neue Farbskala „Orange“\n- Neue Farbskala „Blue“\n\nFarbwertänderungen:\n\n- Anpassung der „Textfarben Funktion“\n- Anpassung der „Hintergrundfarben Funktion“\n- Anpassung der Skala „Brown“\n- Anpassung der Skala „Violet“\n- Anpassung der Skala „Teal“\n- Anpassung der Skala „Olive“\n- Anpassung des Grauwerts für „Disabled“ im Dark Mode\n\nEntfernte Farben:\n\n- Die Kategorie „Interaction“ wurde aufgrund von Dopplungen entfernt. Wer diese Farben nutzen möchte, kann auf die Farbskala „Blue“ zurückgreifen\n\nBetroffene Inhalte:\n\n- Alle Error-States, Benachrichtigungen sowie Warn- und Erfolgsmeldungen der jeweiligen Komponenten\n- Die Komponenten „Notification Banner”, „Notification Message” und „Notification Toast”\n- Farbtokens (Farbergänzungen, Farbwertänderungen)\n\n## Dark and Light Mode\n\n19.04.22\n\n- Die Scale Komponenten sind nun auch im Dark Mode verfügbar\n- Die Farbpalette wurde optimiert\n- Das Design Token Konzept wurde optimiert und um semantische Tokens erweitert\n- Die Textstile wurden optimiert\n\nBetroffene Inhalte:\n\nAlle Komponenten\n\n> Bitte beachte: Die folgenden Komponenten enthalten Marken- und Design-Assets der Telekom – beispielsweise Logos, die Farbe Magenta, die Schrift, Icons sowie Footer und Header. Die Komponenten sind **nicht Open Source** und dürfen **nicht frei verwendet werden**. Für eine kommerzielle Nutzung ist die ausdrückliche Zustimmung der Deutschen Telekom erforderlich.\n\n<p><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-light.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Light)</a><br /><a href="sketch://add-library?url=https%3A%2F%2Fwww.brand-design.telekom.com%2Fsketch-dark.rss" rel="nofollow" class="matomo_download">Telekom Scale Components (Dark)</a></p>\n\n[Hinweise zum Release](./?path=/docs/new-release-release-notes--page)<br>\n[Sketch Library Update](./?path=/docs/new-release-sketch-library-update--page)<br>\n[Design Tokens](./?path=/docs/guidelines-design-tokens--page)<br>\n[Typografie](./?path=/docs/guidelines-typography--page)<br>\n[Farben](./?path=/docs/guidelines-colors--page)<br>\n[Schatten](./?path=/docs/guidelines-shadows--page)<br>\n\n## Rundungen\n\n11.11.2021\n\n- Die Rundungen der Elemente wurden angepasst. Dadurch verbessern wir den visuellen Zusammenhalt der Elemente  \n   <br>\n  Betroffene Inhalte: <br>\n  [Brand Header](./?path=/docs/components-brand-header-navigation--standard)  \n  [Card](./?path=/docs/components-card--standard)  \n  [Data Grid](./?path=/docs/components-data-grid--standard)  \n  [Date Picker](./?path=/docs/components-date-picker--standard)  \n  [Dropdown](./?path=/docs/components-dropdown--standard)  \n  [Flyout Menu](./?path=/docs/components-flyout-menu--standard)  \n  [Footer](./?path=/docs/components-footer--standard)  \n  [Modal](./?path=/docs/components-modal--standard)  \n  [Pagination](./?path=/docs/components-pagination--standard)  \n  [Table](./?path=/docs/components-table--standard)  \n  [Tag](./?path=/docs/components-tag--standard)  \n  [Text Area](./?path=/docs/components-text-area--standard)  \n  [Text Field](./?path=/docs/components-text-field--standard)\n\n## Link Farbe und Unterstreichung\n\n13.9.2021\n\n- Die Standardfarbe für Links ist jetzt „blue-60“. Dadurch stellen wir bessere Kontrastverhältnisse sicher und verbessern die Barrierefreiheit\n- Die Option „Link ohne Unterstreichung“ wurde hinzugefügt.  \n   <br>\n  Betroffene Inhalte: <br>\n  [Link](./?path=/docs/components-link--standard)\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Update History/Design",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Design_en:Design_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Update History/Design",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Design_en:Design_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./stories/update_history/Development.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js");var esm=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),Development_en='# Code Updates\n\nThis page documents updates in `@telekom/scale-components` and related packages.\n\n## Visual Design Updates\n\n21.06.2023\n\nMinor bug fixes and optimizations of the visual design of the following components:\n\n- Accordion\n- Breadcrumb\n- Button\n- Checkbox Group\n- Card\n- Data Grid\n- Date Picker\n- Dropdown Select\n- Footer\n- Flyout Menu\n- Link\n- List\n- Loading Spinner\n- Modal\n- Notification\n- Radio Button Group\n- Rating Stars\n- Sidebar Navigation\n- Switch\n- Tab Navigation\n- Table\n- Tag\n- Telekom Brand Header\n- Text Area\n- Text Field\n\n**Further changes:**\n\nThe beta components Notification Banner, Messager, and Toast have been merged into a component named "Notification."\n\nThe logo variants with a claim have been removed from Scale as they are not intended for digital applications. The logo with a claim can still be downloaded via the [Brand & Design portal](https://www.brand-design.telekom.com/en/asset/logo-0-t-logo-with-claim/).\n\n## Additional basic types of the Telekom Brand Header\n\n20.03.2023\n\nThe beta component “Telekom Brand Header & Navigation” released in January is extended by two new basic types - “Slim Header” and “Subtle Header”. You can find more information in the Usage Text of the [new Brand Header](./?path=/docs/beta-components-telekom-brand-header-navigation--standard).\n\n## New Brand Footer\n\n17.02.2023\n\nRelease of the new brand footer as a beta version. This will replace the current component once quality control is complete and WCAG accessibility certification is in place.\n\n## New Brand Header\n\n31.01.2023\n\nRelease of the new brand header as a beta version. This will replace the current component once quality control is complete and WCAG accessibility certification is in place. Until then, we\'d love to hear <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">your feedback</a> on the new component.\n\n## New Beta Components\n\n25.01.2023\n\n- Release of the new beta components Segmented Button and Chip.\n- The Segmented Button replaces the beta component Toggle Group.\n- New category Deprecated Components. This lists components we no longer support.\n\n<br>\n\n## Component Update (Optimized Mobile and Visual Design)\n\n27.10.2022\n\n**Visual and functionality changes**\n\n- Slider: optimized the design and expanded on the overall functionality\n- Radio Buttons: optimized the selected interactive state\n- Tags: optimized the current colors and added predefined colors\n- Switch: revised the design and added a variant for Android\n- Tab Navigation: optimized the visual design\n\n<br>\n\n**Optimized for touch-screen devices**\n\nThe following components have been resized to make them easier to use on touch screens:\n\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Removed small variants**\n\nThe following components have been adjusted in height and are now only available in one size on Scale. If you need a different size, you can change the components with CSS overwrite.\n\n- Text Field\n- Dropdown\n- Dropdown Select\n- Date Picker\n- Pagination\n\nWe continue to support the small and large button sizes. The height of the large button was also adjusted.\n\n<br>\n\n**Accessibility**\n\nInformation text now contains icons to support people with color vision deficiency (often referred to as color blindness). These are the updated components:\n\n- Text Field\n- Text Area\n- Dropdown\n- Dropdown Select\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Sketch library**\n\nThe changes above have also been applied to our Sketch library. In addition, we’ve optimized the icons for the following components:\n\n- Buttons\n- Text Field\n- Text Area\n- Rating Stars\n- Switch\n- Dropdown\n- Text List\n- Table\n\nPlease note: some small variants are no longer supported or available in the library. If you use such variants, you can replace them with the new standard size by clicking Layer ➔ Replace With. Here is an overview of the removed components:\n\n| Component       | Previous variant size | New variant name | Replaced with |\n| --------------- | --------------------- | ---------------- | ------------- |\n| Text Field      | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Dropdown        | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Dropdown Select | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Date Picker     | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Pagination      | Small                 | ❌               | Standard      |\n|                 | Large                 | Standard         | –             |\n| Table           | Small                 | Standard         | –             |\n|                 | Large                 | ❌               | Standard      |\n\n**Color tokens**\n\nThe new UI colors white and black are well suited when the color is identical in dark and light mode.\n\n## New dropdown select beta component\n\n02.08.22\n\nThe dropdown menu is now an integrated part and is no longer generated by the browser as in the [current version](./?path=/docs/components-dropdown--standard). This makes the component less error-prone. In particular, errors that could occur when switching between light and dark modes are now avoided.\n\nWe aim to deprecate the [Dropdown](./?path=/docs/components-dropdown--standard) component in favour of the newly released beta [Dropdown Select](./?path=/docs/beta-components-dropdown-select--standard) as soon as new component gets our of the beta phase.\n\n## Dark and light mode (`v3.0.0-beta.100`)\n\n- The Scale components are now also available in Dark Mode\n- The color palette was optimized\n- The design token concept was optimized and extended by semantic tokens\n- The text styles have been optimized\n- CSS variables prefixed with `--scl` are deprecated in favor of the new `--telekom` ones.\n\nRead more about <a href="https://github.com/telekom/scale/blob/main/docs/dark-mode-v3-beta-100.md" target="_blank" rel="noopener noreferrer">the changes on GitHub</a>.\n\n### Affected content\n\nAll components  \n[Release Notes](./?path=/docs/new-release-release-notes--page)  \n[Sketch Library Update](./?path=/docs/new-release-sketch-library-update--page)  \n[Design Tokens](./?path=/docs/guidelines-design-tokens--page)  \n[Typography](./?path=/docs/guidelines-typography--page)  \n[Colors](./?path=/docs/guidelines-colors--page)  \n[Shadows](./?path=/docs/guidelines-shadows--page)\n\n## v1 to v2 Migration\n\nFind the guide <a href="https://github.com/telekom/scale/blob/main/docs/archive/v1-to-v2-migration-guide.md" target="_blank" rel="noopener noreferrer">on GitHub</a>.\n',Development_de='# Code Updates\n\nDiese Seite dokumentiert Aktualisierungen in `@telekom/scale-components` und verwandten Paketen.\n\n## Visual Design Updates\n\n21.06.2023\n\nKleinere Bugfixes und Optimierungen des Visual Designs folgender Komponenten:\n\n- Accordion\n- Breadcrump\n- Button\n- Checkbox Group\n- Card\n- Data Grid\n- Date Picker\n- Dropdown Select\n- Footer\n- Flyout Menu\n- Link\n- List\n- Loading Spinner\n- Modal\n- Notification\n- Radio Button Group\n- Rating Stars\n- Sidebar Navigation\n- Switch\n- Tab Navigation\n- Table\n- Tag\n- Telekom Brand Header\n- Text Area\n- Text Field\n\n**Weitere Änderungen:**\n\nDie Beta-Komponenten Notification Banner, Messager und Toast wurden zu einer Komponente namens "Notification" zusammengefasst.\n\nDie Logovarianten mit Claim wurden aus Scale entfernt, da sie nicht für digitale Anwendungen vorgesehen sind. Das Logo mit Claim kann weiterhin über das Brand & Design-Portal heruntergeladen werden.\n\n## Weitere Basistypen des Telekom Brand Headers\n\n20.03.2023\n\nDie im Januar veröffentlichte Beta-Komponente “Telekom Brand Header & Navigation” wird um zwei neue Basistypen ergänzt – “Slim Header” und “Subtle Header”. Mehr Informationen findest du im Usage Text des [neuen Brand Headers](./?path=/docs/beta-components-telekom-brand-header-navigation--standard).\n\n## Neuer Brand Footer\n\n17.02.2023\n\nVeröffentlichung des neuen Brand Footers als Beta-Version. Dieser ersetzt die aktuelle Komponente, wenn die Qualitätskontrolle abgeschlossen ist und die WCAG-Zertifizierung für Barrierefreiheit vorliegt.\n\n## Neuer Brand Header\n\n31.01.2023\n\nVeröffentlichung des neuen Brand Headers als Beta-Version. Dieser ersetzt die aktuelle Komponente, wenn die Qualitätskontrolle abgeschlossen ist und die WCAG-Zertifizierung für Barrierefreiheit vorliegt. Bis dahin freuen wir uns über <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">euer Feedback</a> zur neuen Komponente.\n\n## Neue Beta-Komponenten\n\n25.01.2023\n\n- Veröffentlichung der neuen Beta-Komponenten Segmented Button und Chip.\n- Der Segmented Button ersetzt die Beta-Komponente Toggle Group.\n- Neue Kategorie „Deprecated Components“. Hier sind Komponenten aufgelistet, die wir nicht weiter unterstützen.\n\n<br>\n\n## Komponenten-Update (Optimierung von Mobile und Visual Design)\n\n27.10.2022\n\n**Visuelle und funktionale Änderungen**\n\n- Slider: Visuelle Optimierung und funktionale Erweiterung\n- Radio Buttons: Optimierung des Interactive States „Selected“\n- Tags: Farbliche Optimierung und Erweiterung um vordefinierte Farben\n- Switch: Visuelle Überarbeitung und eine neue Variante für Android\n- Tab Navigation: Visuelle Optimierung\n\n<br>\n\n**Optimierung für Geräte mit Touchscreen**\n\nDie Größe der folgenden Komponenten ist angepasst und vereinfacht die Nutzung auf Touchscreens:\n\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Entfernte Varianten „Small“**\n\nDie folgenden Komponenten sind in ihrer Höhe angepasst und ab sofort nur noch in einer Größe auf Scale verfügbar. Wenn du für deinen Anwendungsfall eine andere Größe brauchst, kannst du die Komponenten per CSS-Overwrite ändern.\n\n- Textfield\n- Dropdown\n- Dropdown Select\n- Date Picker\n- Pagination\n\nDen Button unterstützen wir weiterhin in den Größen „Small“ und „Large“.\nDie Höhe des „Large Button“ ist ebenfalls angepasst.\n\n<br>\n\n**Barierrefreiheit**\n\nInformationstexte enthalten ab sofort Icons, um Menschen mit Farbfehlsichtigkeit in ihrer Nutzung zu unterstützen. Das sind die geänderten Komponenten:\n\n- Text Field\n- Text Area\n- Dropdown\n- Dropdown Select\n- Radio Button\n- Radio Button Group\n- Checkbox\n- Checkbox Group\n\n<br>\n\n**Sketch Library**\n\nDie oben genannten Änderungen wurden auch in unserer Sketch-Library angepasst. Zusätzlich haben wir die Symbole der folgenden Komponenten optimiert:\n\n- Buttons\n- Text-Field\n- Text-Area\n- Rating Stars\n- Switch\n- Dropdown\n- Text List\n- Table\n\nBitte beachte: Einige „Small“-Varianten werden nicht mehr unterstützt und sind in der Library nicht mehr verfügbar. Solltest du in deinem Layout solche Varianten verwenden, kannst du sie über „Layer“ ➔ „Replace with“ durch die neue Standardgröße ersetzen. Hier eine Übersicht der entfernten Komponenten:\n\n| Komponente      | Alte Variantengröße | Neuer Variantenname | Ersetzen durch |\n| --------------- | ------------------- | ------------------- | -------------- |\n| Textfield       | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Dropdown        | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Dropdown Select | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Date Picker     | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Pagination      | Small               | ❌                  | Standard       |\n|                 | Large               | Standard            | –              |\n| Table           | Small               | Standard            | –              |\n|                 | Large               | ❌                  | Standard       |\n\n**Farbtokens**\n\nDie neuen UI-Farben „White“ und „Black“ sind für Anwendungsfälle geeignet, bei denen die Farbe im Dark und Light Mode identisch ist.\n\n## Neue Dropdown Select Beta-Komponente\n\n02.08.2022\n\nDas Dropdown-Menü ist nun ein integrierter Bestandteil der Komponente und wird nicht mehr wie in der [bestehenden Version](./?path=/docs/components-dropdown--standard) vom Browser generiert. Dadurch ist die Komponente weniger fehleranfällig. Insbesondere Fehler, die beim Switch zwischen Light- und Dark Mode entstehen konnten, werden nun vermieden.\n\nWir planen, die bestehende [Dropdown-Komponente](./?path=/docs/components-dropdown--standard) zugunsten der neu veröffentlichten Beta-Version von [Dropdown Select](./?path=/docs/beta-components-dropdown-select--standard) zu verwerfen, sobald die neue Komponente die Beta-Phase verlassen hat.\n\n## Dark mode (`v3.0.0-beta.100`)\n\n- Die Scale Komponenten sind nun auch im Dark Mode verfügbar\n- Die Farbpalette wurde optimiert\n- Das Design Token Konzept wurde optimiert und um semantische Tokens erweitert\n- Die Text Stile wurden optimiert\n- CSS-Variablen mit dem Präfix `--scl` werden nicht weiter genutzt. Der neue Präfix ist `--telekom`.\n\nMehr zu den Änderungen findest du <a href="https://github.com/telekom/scale/blob/main/docs/dark-mode-v3-beta-100.md" target="_blank" rel="noopener noreferrer">auf GitHub</a>.\n\n### Betroffene Inhalte:\n\nAlle Komponenten  \n[Hinweise zum Release](./?path=/docs/new-release-release-notes--page)  \n[Sketch Library Update](./?path=/docs/new-release-sketch-library-update--page)  \n[Design Tokens](./?path=/docs/guidelines-design-tokens--page)  \n[Typografie](./?path=/docs/guidelines-typography--page)  \n[Farben](./?path=/docs/guidelines-colors--page)  \n[Schatten](./?path=/docs/guidelines-shadows--page)\n\n## v1 zu v2 Migration\n\nFinde die Migrationsleitung <a href="https://github.com/telekom/scale/blob/main/docs/archive/v1-to-v2-migration-guide.md" target="_blank" rel="noopener noreferrer">auf GitHub</a>.\n';function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(dist_esm.f,{title:"Update History/Development",parameters:{docs:{container:function container(_ref2){var context=_ref2.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context,mdxType:"DocsContainer"},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Development_en:Development_de,mdxType:"Description"}))}}},mdxType:"Meta"}))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Update History/Development",parameters:{docs:{container:function container(_ref3){var context=_ref3.context,locale=context&&context.globals&&context.globals.locale;return Object(esm.b)(dist_esm.e,{context:context},locale&&Object(esm.b)(dist_esm.d,{markdown:"en"===locale?Development_en:Development_de}))}}},includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./storybook-init-framework-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__("./node_modules/@storybook/vue/dist/esm/client/index.js")},0:function(module,exports,__webpack_require__){__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/polyfills.js"),__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/globals.js"),__webpack_require__("./storybook-init-framework-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/vue/dist/esm/client/preview/config-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js"),__webpack_require__("./.storybook/preview.js-generated-config-entry.js"),module.exports=__webpack_require__("./generated-stories-entry.js")},1:function(module,exports){},2:function(module,exports){}},[[0,410,411]]]);
\ No newline at end of file
diff --git a/runtime~main.bc15a3ff.iframe.bundle.js b/runtime~main.fb412144.iframe.bundle.js
similarity index 96%
rename from runtime~main.bc15a3ff.iframe.bundle.js
rename to runtime~main.fb412144.iframe.bundle.js
index 76804aa041..49341bca49 100644
--- a/runtime~main.bc15a3ff.iframe.bundle.js
+++ b/runtime~main.fb412144.iframe.bundle.js
@@ -1 +1 @@
-!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={410:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.e=function requireEnsure(chunkId){var promises=[],installedChunkData=installedChunks[chunkId];if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else{var promise=new Promise((function(resolve,reject){installedChunkData=installedChunks[chunkId]=[resolve,reject]}));promises.push(installedChunkData[2]=promise);var onScriptComplete,script=document.createElement("script");script.charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.src=function jsonpScriptSrc(chunkId){return __webpack_require__.p+""+({408:"polyfills-core-js",409:"polyfills-dom"}[chunkId]||chunkId)+"."+{0:"94068a87",1:"57d874d9",2:"27f6e1da",3:"9d87c2d4",4:"433b77b8",5:"8efd72a3",6:"b062a1a0",7:"ecde5ad7",8:"d00805e6",9:"ceae9fc3",10:"08ae06d8",11:"e67db442",12:"d52cb189",13:"c400807b",14:"31b8b04b",15:"23a835d8",16:"4d7d6bb5",17:"fcd38cc6",18:"ed40c940",19:"441b0294",20:"34012878",21:"14db7687",22:"ea896cd8",23:"c3f02ba7",24:"46af6fde",25:"adad6f3a",26:"46f352ae",27:"e21d2f07",28:"85806c32",29:"f8831396",30:"dd39afef",31:"457199ae",32:"e5672086",33:"7cd840dd",34:"b9ee6464",35:"82777aa1",36:"352c0c88",37:"6a0f30c6",38:"4f21af2e",39:"98fbd534",40:"70e384bd",41:"05f31bce",42:"d88be446",43:"e93812a9",44:"678092b3",45:"0a474a2f",46:"7569502e",47:"59aa6abc",48:"3c4e629b",49:"8b36ff64",50:"f0207eea",51:"5619a97f",52:"7890956b",53:"5e2bedcb",54:"25b24701",55:"9fe52726",56:"279b6293",57:"ee6de853",58:"2165cc33",59:"946bce3c",60:"ad08a68c",61:"6b486980",62:"30a40cc7",63:"d3a60a35",64:"2868ce6c",65:"d447b28b",66:"d67202d4",67:"f4cc3185",68:"1bd50c5a",69:"88c3ac18",70:"baf10ca4",71:"d218c9bc",72:"346391c1",73:"4a4f6d34",74:"df871802",75:"e58015d4",76:"a64ad13c",77:"31208db2",78:"58d895e9",79:"ec826d2f",80:"eb477cc8",81:"67a94858",82:"4c95600e",83:"4887699c",84:"8b338114",85:"97914817",86:"577f48ad",87:"81b976a1",88:"71c22d3e",89:"638d7552",90:"396e1708",91:"1d2ca33f",92:"99b39f21",93:"d4a28ce1",94:"e869f03a",95:"90b8879f",96:"30a0490e",97:"6afda87c",98:"4439ad40",99:"178f2433",100:"89bf2ffd",101:"b5b58d12",102:"a34c7ce1",103:"63610f26",104:"26f23af6",105:"8009f615",106:"b8a32509",107:"35bc2fde",108:"30ec838a",109:"dd889dc0",110:"fc95ca53",111:"e7b3691c",112:"c50329ae",113:"5789969c",114:"298057d6",115:"89802fe4",116:"13d39589",117:"28afe2f2",118:"6a606c88",119:"5293c3af",120:"5b11b706",121:"5a13c3c9",122:"4bc5e097",123:"5a10dda5",124:"f23903d3",125:"6598c179",126:"5e516580",127:"7df4c2a2",128:"72fa25bc",129:"11a0cd77",130:"e82b7a82",131:"298e507d",132:"81424b77",133:"d37b2e37",134:"4bb483c1",135:"fd63749f",136:"4cd08b0a",137:"8bd76ea3",138:"c54dbad6",139:"307bad41",140:"444d06be",141:"4dc2c23a",142:"e94ebfee",143:"47b71dce",144:"9492ad0a",145:"8ec87096",146:"2cb95c46",147:"24608e7e",148:"a5c4b532",149:"f76ae4ea",150:"e0656ea3",151:"5dff3b72",152:"0d3369e3",153:"e2f99310",154:"9860eb2c",155:"024fc459",156:"3064ccb0",157:"2bbfb226",158:"7b7db420",159:"8c049a53",160:"595d35c4",161:"4afa6b92",162:"d5e972a6",163:"8e9a6d9e",164:"1034a41e",165:"06e43585",166:"3432af5e",167:"cb229872",168:"39ce9904",169:"f5f6a6cb",170:"5150022b",171:"ed0187f5",172:"a80d497a",173:"b6ccf4d5",174:"9fc156d0",175:"47b11ae3",176:"ce9adef0",177:"2399dd21",178:"a2ed6c23",179:"71f14a06",180:"f3c87e34",181:"43788e3b",182:"c5a9ff91",183:"e650ce82",184:"31270e90",185:"7c150709",186:"09e66cf1",187:"6aa4ba80",188:"6ec8b034",189:"49548d87",190:"45a506db",191:"e5dbdc5c",192:"62df6bf6",193:"a9871c37",194:"868adb2a",195:"2234e8a4",196:"645e0247",197:"68cd4692",198:"68a01a2a",199:"793f86ea",200:"06e54486",201:"89b2dafe",202:"a20b83fe",203:"9e303710",204:"398b14c3",205:"c49967d7",206:"7bf80c08",207:"cea82fc4",208:"5f504a70",209:"caecad18",210:"7a481897",211:"4dd55a9b",212:"ba3cd483",213:"860b0313",214:"95268e55",215:"75ecb779",216:"6b88588b",217:"b2dcc60b",218:"37292654",219:"b0df7d37",220:"1c758264",221:"9e5e2d61",222:"e62f3c36",223:"e9cf9411",224:"68f5c671",225:"347b2aae",226:"0fddbedf",227:"5e549ff0",228:"22a28db0",229:"01680bda",230:"3c8c7c5f",231:"cca72ec8",232:"9012f318",233:"49d4b88e",234:"f64359e7",235:"e9628798",236:"56956ab1",237:"3151c735",238:"6d16b1d5",239:"00a1e285",240:"0b69d796",241:"dc5e9146",242:"8ec0b919",243:"8610ac92",244:"f119347f",245:"b6b71389",246:"7699aacc",247:"5e0379ff",248:"2fa9ffb7",249:"b402719f",250:"62d061b4",251:"aecbe432",252:"adbefb0b",253:"032cc1bb",254:"1c09b6aa",255:"ad345cda",256:"e53ef5b3",257:"f0f54bc0",258:"b02716d4",259:"29e844c7",260:"8e3f1546",261:"b7a0cdf1",262:"a23f6e22",263:"5a083d25",264:"a985f0e4",265:"55b84127",266:"b7755b98",267:"0a1cc84f",268:"0866f522",269:"36d1f658",270:"53b58530",271:"6e8e1bd1",272:"d8226802",273:"bda6212f",274:"35589966",275:"8a1ae4fb",276:"e1c5c8c9",277:"af123cfc",278:"0f87054b",279:"fe79774e",280:"84a4d392",281:"c9083cec",282:"668bf6bf",283:"ed89b68a",284:"f87e8962",285:"fd3f611e",286:"d2ef1e97",287:"80cc8a39",288:"f6a9f8a8",289:"ba352195",290:"227d2655",291:"2ded4329",292:"b6edfb23",293:"1d1b90e6",294:"3432d928",295:"28db8e84",296:"74074a06",297:"55c64c3e",298:"41aaa100",299:"65452f2a",300:"469525b6",301:"13d3e222",302:"a1720f3b",303:"135ea973",304:"e6b513b5",305:"30f19bc2",306:"cb0c80d4",307:"84b0a51b",308:"69816aec",309:"99380f50",310:"5922b4d9",311:"abf378bb",312:"8346025c",313:"ac51ca3d",314:"bd531908",315:"0c9c3a1d",316:"9435a268",317:"103fab45",318:"d8174b35",319:"4f3ee83b",320:"4c682917",321:"d9c7be52",322:"8873f32e",323:"2c314a1a",324:"39be22a4",325:"aa4852d8",326:"bb59c1bd",327:"43a37abc",328:"781722fa",329:"235b8a6a",330:"5e59c679",331:"5105b4d3",332:"1ea6ef2b",333:"258633d6",334:"9d2e3ec9",335:"80a88526",336:"bfde45f7",337:"8ce47ed3",338:"99a46f9e",339:"776c17b5",340:"1969c8ea",341:"ba33cef6",342:"9ed8db59",343:"3b7cd46b",344:"cf520454",345:"79a2b12e",346:"f4a065be",347:"5cfb3c44",348:"3bf7196b",349:"4e032d0a",350:"81a6672c",351:"4c0accf9",352:"a6141e4d",353:"d828ebcd",354:"e55c61b1",355:"38ee37f1",356:"51103177",357:"0af78091",358:"b9a79f8d",359:"7d6d70ae",360:"2ec8d8ff",361:"29cac7f4",362:"9899d64c",363:"743e0ec3",364:"44db6227",365:"a135c75d",366:"1ffe11db",367:"8b0a19c8",368:"3aaf1d49",369:"91382302",370:"9142601a",371:"550d7635",372:"92ac64b5",373:"f4c5911f",374:"007b1490",375:"5b1b4660",376:"d7a73d2e",377:"a2292a74",378:"cc202952",379:"9753f4d4",380:"bd381dff",381:"c58778b3",382:"c0304d23",383:"804d4204",384:"400ad76c",385:"c2e918b0",386:"c4fec99d",387:"ad7926b4",388:"3785a8de",389:"1ae7f56f",390:"277ce87b",391:"27c19289",392:"60d2472f",393:"b5d2e2b0",394:"e77227f2",395:"14f884ca",396:"43990ec4",397:"1b744e1f",398:"240e605a",399:"0e1f22b8",400:"b7f6a58f",401:"e87b123f",402:"fd92dc21",403:"15587efe",404:"b9615687",405:"5e3f46ac",406:"d4e65436",408:"cc79baee",409:"e25be067",412:"b5a85152",413:"d4719bd0",414:"800491da",415:"699ed992",416:"c35ad783"}[chunkId]+".iframe.bundle.js"}(chunkId);var error=new Error;onScriptComplete=function(event){script.onerror=script.onload=null,clearTimeout(timeout);var chunk=installedChunks[chunkId];if(0!==chunk){if(chunk){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,chunk[1](error)}installedChunks[chunkId]=void 0}};var timeout=setTimeout((function(){onScriptComplete({type:"timeout",target:script})}),12e4);script.onerror=script.onload=onScriptComplete,document.head.appendChild(script)}return Promise.all(promises)},__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__.oe=function(err){throw console.error(err),err};var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
\ No newline at end of file
+!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={410:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.e=function requireEnsure(chunkId){var promises=[],installedChunkData=installedChunks[chunkId];if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else{var promise=new Promise((function(resolve,reject){installedChunkData=installedChunks[chunkId]=[resolve,reject]}));promises.push(installedChunkData[2]=promise);var onScriptComplete,script=document.createElement("script");script.charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.src=function jsonpScriptSrc(chunkId){return __webpack_require__.p+""+({408:"polyfills-core-js",409:"polyfills-dom"}[chunkId]||chunkId)+"."+{0:"94068a87",1:"57d874d9",2:"27f6e1da",3:"9d87c2d4",4:"25209701",5:"8efd72a3",6:"b062a1a0",7:"ecde5ad7",8:"d00805e6",9:"ceae9fc3",10:"08ae06d8",11:"e67db442",12:"d52cb189",13:"c400807b",14:"31b8b04b",15:"23a835d8",16:"4d7d6bb5",17:"fcd38cc6",18:"ed40c940",19:"441b0294",20:"34012878",21:"14db7687",22:"aea24da8",23:"e35fb606",24:"fb94a1bc",25:"1d2be920",26:"a10c5b97",27:"b98b7b21",28:"7f1fa39e",29:"0667ce4d",30:"f906ea1f",31:"8a31389e",32:"5f1e238f",33:"999d48ff",34:"2d48b0e5",35:"d8aef789",36:"349e1fe7",37:"ffa26d95",38:"8618c2b2",39:"f8ecdf25",40:"df867ae9",41:"2ba0fc83",42:"d88be446",43:"e93812a9",44:"678092b3",45:"0a474a2f",46:"7569502e",47:"59aa6abc",48:"3c4e629b",49:"8b36ff64",50:"f0207eea",51:"5619a97f",52:"7890956b",53:"5e2bedcb",54:"25b24701",55:"9fe52726",56:"279b6293",57:"ee6de853",58:"2165cc33",59:"946bce3c",60:"ad08a68c",61:"6b486980",62:"30a40cc7",63:"d3a60a35",64:"2868ce6c",65:"d447b28b",66:"d67202d4",67:"f4cc3185",68:"1bd50c5a",69:"88c3ac18",70:"baf10ca4",71:"d218c9bc",72:"346391c1",73:"4a4f6d34",74:"df871802",75:"e58015d4",76:"a64ad13c",77:"31208db2",78:"58d895e9",79:"ec826d2f",80:"eb477cc8",81:"67a94858",82:"4c95600e",83:"4887699c",84:"8b338114",85:"97914817",86:"577f48ad",87:"81b976a1",88:"71c22d3e",89:"638d7552",90:"396e1708",91:"1d2ca33f",92:"99b39f21",93:"d4a28ce1",94:"e869f03a",95:"90b8879f",96:"30a0490e",97:"6afda87c",98:"4439ad40",99:"178f2433",100:"89bf2ffd",101:"b5b58d12",102:"a34c7ce1",103:"63610f26",104:"26f23af6",105:"8009f615",106:"b8a32509",107:"35bc2fde",108:"30ec838a",109:"dd889dc0",110:"fc95ca53",111:"e7b3691c",112:"c50329ae",113:"5789969c",114:"298057d6",115:"89802fe4",116:"13d39589",117:"28afe2f2",118:"6a606c88",119:"5293c3af",120:"5b11b706",121:"5a13c3c9",122:"4bc5e097",123:"5a10dda5",124:"f23903d3",125:"6598c179",126:"5e516580",127:"7df4c2a2",128:"72fa25bc",129:"11a0cd77",130:"e82b7a82",131:"298e507d",132:"81424b77",133:"d37b2e37",134:"4bb483c1",135:"fd63749f",136:"4cd08b0a",137:"8bd76ea3",138:"c54dbad6",139:"307bad41",140:"444d06be",141:"4dc2c23a",142:"e94ebfee",143:"47b71dce",144:"9492ad0a",145:"8ec87096",146:"2cb95c46",147:"24608e7e",148:"a5c4b532",149:"f76ae4ea",150:"e0656ea3",151:"5dff3b72",152:"0d3369e3",153:"e2f99310",154:"9860eb2c",155:"024fc459",156:"3064ccb0",157:"2bbfb226",158:"7b7db420",159:"8c049a53",160:"595d35c4",161:"4afa6b92",162:"d5e972a6",163:"8e9a6d9e",164:"1034a41e",165:"06e43585",166:"3432af5e",167:"cb229872",168:"39ce9904",169:"f5f6a6cb",170:"5150022b",171:"ed0187f5",172:"a80d497a",173:"b6ccf4d5",174:"9fc156d0",175:"47b11ae3",176:"ce9adef0",177:"2399dd21",178:"a2ed6c23",179:"71f14a06",180:"f3c87e34",181:"43788e3b",182:"c5a9ff91",183:"e650ce82",184:"31270e90",185:"7c150709",186:"09e66cf1",187:"6aa4ba80",188:"6ec8b034",189:"49548d87",190:"45a506db",191:"e5dbdc5c",192:"62df6bf6",193:"a9871c37",194:"868adb2a",195:"2234e8a4",196:"645e0247",197:"68cd4692",198:"68a01a2a",199:"793f86ea",200:"06e54486",201:"89b2dafe",202:"a20b83fe",203:"9e303710",204:"398b14c3",205:"c49967d7",206:"7bf80c08",207:"cea82fc4",208:"5f504a70",209:"caecad18",210:"7a481897",211:"4dd55a9b",212:"ba3cd483",213:"860b0313",214:"95268e55",215:"75ecb779",216:"6b88588b",217:"b2dcc60b",218:"37292654",219:"b0df7d37",220:"1c758264",221:"9e5e2d61",222:"e62f3c36",223:"e9cf9411",224:"68f5c671",225:"347b2aae",226:"0fddbedf",227:"5e549ff0",228:"22a28db0",229:"01680bda",230:"3c8c7c5f",231:"cca72ec8",232:"9012f318",233:"49d4b88e",234:"f64359e7",235:"e9628798",236:"56956ab1",237:"3151c735",238:"6d16b1d5",239:"00a1e285",240:"0b69d796",241:"dc5e9146",242:"8ec0b919",243:"8610ac92",244:"f119347f",245:"b6b71389",246:"7699aacc",247:"5e0379ff",248:"2fa9ffb7",249:"b402719f",250:"62d061b4",251:"aecbe432",252:"adbefb0b",253:"032cc1bb",254:"1c09b6aa",255:"ad345cda",256:"e53ef5b3",257:"f0f54bc0",258:"b02716d4",259:"29e844c7",260:"8e3f1546",261:"b7a0cdf1",262:"a23f6e22",263:"5a083d25",264:"a985f0e4",265:"55b84127",266:"b7755b98",267:"0a1cc84f",268:"0866f522",269:"36d1f658",270:"53b58530",271:"6e8e1bd1",272:"d8226802",273:"bda6212f",274:"35589966",275:"8a1ae4fb",276:"e1c5c8c9",277:"af123cfc",278:"0f87054b",279:"fe79774e",280:"84a4d392",281:"c9083cec",282:"668bf6bf",283:"ed89b68a",284:"f87e8962",285:"fd3f611e",286:"d2ef1e97",287:"80cc8a39",288:"f6a9f8a8",289:"ba352195",290:"227d2655",291:"2ded4329",292:"b6edfb23",293:"1d1b90e6",294:"3432d928",295:"28db8e84",296:"74074a06",297:"55c64c3e",298:"41aaa100",299:"65452f2a",300:"469525b6",301:"13d3e222",302:"a1720f3b",303:"135ea973",304:"e6b513b5",305:"30f19bc2",306:"cb0c80d4",307:"84b0a51b",308:"69816aec",309:"99380f50",310:"5922b4d9",311:"abf378bb",312:"8346025c",313:"ac51ca3d",314:"bd531908",315:"0c9c3a1d",316:"9435a268",317:"103fab45",318:"d8174b35",319:"4f3ee83b",320:"4c682917",321:"d9c7be52",322:"8873f32e",323:"2c314a1a",324:"39be22a4",325:"aa4852d8",326:"bb59c1bd",327:"43a37abc",328:"781722fa",329:"235b8a6a",330:"5e59c679",331:"5105b4d3",332:"1ea6ef2b",333:"258633d6",334:"9d2e3ec9",335:"80a88526",336:"bfde45f7",337:"8ce47ed3",338:"99a46f9e",339:"776c17b5",340:"1969c8ea",341:"ba33cef6",342:"9ed8db59",343:"3b7cd46b",344:"cf520454",345:"79a2b12e",346:"f4a065be",347:"5cfb3c44",348:"3bf7196b",349:"4e032d0a",350:"81a6672c",351:"4c0accf9",352:"a6141e4d",353:"d828ebcd",354:"e55c61b1",355:"38ee37f1",356:"51103177",357:"0af78091",358:"b9a79f8d",359:"7d6d70ae",360:"2ec8d8ff",361:"29cac7f4",362:"9899d64c",363:"743e0ec3",364:"44db6227",365:"a135c75d",366:"1ffe11db",367:"8b0a19c8",368:"3aaf1d49",369:"91382302",370:"9142601a",371:"550d7635",372:"92ac64b5",373:"f4c5911f",374:"007b1490",375:"5b1b4660",376:"d7a73d2e",377:"a2292a74",378:"cc202952",379:"9753f4d4",380:"bd381dff",381:"c58778b3",382:"c0304d23",383:"804d4204",384:"400ad76c",385:"c2e918b0",386:"c4fec99d",387:"ad7926b4",388:"3785a8de",389:"1ae7f56f",390:"277ce87b",391:"27c19289",392:"60d2472f",393:"b5d2e2b0",394:"e77227f2",395:"14f884ca",396:"43990ec4",397:"1b744e1f",398:"240e605a",399:"0e1f22b8",400:"b7f6a58f",401:"e87b123f",402:"fd92dc21",403:"15587efe",404:"b9615687",405:"5e3f46ac",406:"d4e65436",408:"cc79baee",409:"e25be067",412:"b5a85152",413:"d4719bd0",414:"800491da",415:"699ed992",416:"c35ad783"}[chunkId]+".iframe.bundle.js"}(chunkId);var error=new Error;onScriptComplete=function(event){script.onerror=script.onload=null,clearTimeout(timeout);var chunk=installedChunks[chunkId];if(0!==chunk){if(chunk){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,chunk[1](error)}installedChunks[chunkId]=void 0}};var timeout=setTimeout((function(){onScriptComplete({type:"timeout",target:script})}),12e4);script.onerror=script.onload=onScriptComplete,document.head.appendChild(script)}return Promise.all(promises)},__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__.oe=function(err){throw console.error(err),err};var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
\ No newline at end of file
diff --git a/scale-components.css b/scale-components.css
index bf9b01fe9d..a0c996ae02 100644
--- a/scale-components.css
+++ b/scale-components.css
@@ -10,4 +10,4 @@
     url('./fonts/TeleNeoWeb/TeleNeoWeb-Regular.woff2') format('woff2');font-display:swap}@font-face{font-family:'TeleNeoWeb';font-weight:400;font-style:italic;src:url('./fonts/TeleNeoWeb/TeleNeoWeb-RegularItalic.eot');src:url('./fonts/TeleNeoWeb/TeleNeoWeb-RegularItalic.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-RegularItalic.woff2') format('woff2');font-display:swap}@font-face{font-family:'TeleNeoWeb';font-weight:200;font-style:normal;src:url('./fonts/TeleNeoWeb/TeleNeoWeb-Thin.eot');src:url('./fonts/TeleNeoWeb/TeleNeoWeb-Thin.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-Thin.woff2') format('woff2');font-display:swap}@font-face{font-family:'TeleNeoWeb';font-weight:200;font-style:italic;src:url('./fonts/TeleNeoWeb/TeleNeoWeb-ThinItalic.eot');src:url('./fonts/TeleNeoWeb/TeleNeoWeb-ThinItalic.woff') format('woff'),
-    url('./fonts/TeleNeoWeb/TeleNeoWeb-ThinItalic.woff2') format('woff2');font-display:swap}:root{font-family:'TeleNeoWeb', sans-serif}:root{--scl-spacing-1:0.0625rem;--scl-spacing-2:0.125rem;--scl-spacing-4:0.25rem;--scl-spacing-8:0.5rem;--scl-spacing-12:0.75rem;--scl-spacing-16:1rem;--scl-spacing-24:1.5rem;--scl-spacing-32:2rem;--scl-spacing-40:2.5rem;--scl-spacing-48:3rem;--scl-spacing-64:4rem;--scl-spacing-80:5rem;--scl-font-family-sans:TeleNeoWeb, sans-serif;--scl-font-family-mono:monospace;--scl-font-size-10:0.625rem;--scl-font-size-12:0.75rem;--scl-font-size-14:0.875rem;--scl-font-size-16:1rem;--scl-font-size-20:1.25rem;--scl-font-size-24:1.5rem;--scl-font-size-32:2rem;--scl-font-size-40:2.5rem;--scl-font-size-56:3.5rem;--scl-font-weight-thin:200;--scl-font-weight-regular:400;--scl-font-weight-medium:500;--scl-font-weight-bold:700;--scl-font-weight-extrabold:800;--scl-font-line-height-114:114%;--scl-font-line-height-120:120%;--scl-font-line-height-125:125%;--scl-font-line-height-133:133%;--scl-font-line-height-150:150%;--scl-font-line-height-160:160%;--scl-font-variant-body-family:TeleNeoWeb, sans-serif;--scl-font-variant-body-size:1rem;--scl-font-variant-body-weight:500;--scl-font-variant-body-line-height:150%;--scl-font-variant-body-letter-spacing:normal;--scl-font-variant-body-short-family:TeleNeoWeb, sans-serif;--scl-font-variant-body-short-size:1rem;--scl-font-variant-body-short-weight:500;--scl-font-variant-body-short-line-height:125%;--scl-font-variant-body-short-letter-spacing:normal;--scl-font-variant-body-large-family:TeleNeoWeb, sans-serif;--scl-font-variant-body-large-size:1.25rem;--scl-font-variant-body-large-weight:500;--scl-font-variant-body-large-line-height:160%;--scl-font-variant-body-large-letter-spacing:normal;--scl-font-variant-smaller-family:TeleNeoWeb, sans-serif;--scl-font-variant-smaller-size:0.75rem;--scl-font-variant-smaller-weight:500;--scl-font-variant-smaller-line-height:125%;--scl-font-variant-smaller-letter-spacing:normal;--scl-font-variant-label-family:TeleNeoWeb, sans-serif;--scl-font-variant-label-size:0.75rem;--scl-font-variant-label-weight:500;--scl-font-variant-label-line-height:120%;--scl-font-variant-label-letter-spacing:normal;--scl-font-variant-caption-family:TeleNeoWeb, sans-serif;--scl-font-variant-caption-size:0.75rem;--scl-font-variant-caption-weight:500;--scl-font-variant-caption-line-height:133%;--scl-font-variant-caption-letter-spacing:normal;--scl-font-variant-heading-6-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-6-size:1rem;--scl-font-variant-heading-6-weight:700;--scl-font-variant-heading-6-line-height:150%;--scl-font-variant-heading-6-letter-spacing:normal;--scl-font-variant-heading-5-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-5-size:1.25rem;--scl-font-variant-heading-5-weight:800;--scl-font-variant-heading-5-line-height:125%;--scl-font-variant-heading-5-letter-spacing:normal;--scl-font-variant-heading-4-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-4-size:1.5rem;--scl-font-variant-heading-4-weight:800;--scl-font-variant-heading-4-line-height:133%;--scl-font-variant-heading-4-letter-spacing:normal;--scl-font-variant-heading-3-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-3-size:2rem;--scl-font-variant-heading-3-weight:800;--scl-font-variant-heading-3-line-height:125%;--scl-font-variant-heading-3-letter-spacing:normal;--scl-font-variant-heading-2-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-2-size:2.5rem;--scl-font-variant-heading-2-weight:800;--scl-font-variant-heading-2-line-height:120%;--scl-font-variant-heading-2-letter-spacing:normal;--scl-font-variant-heading-1-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-1-size:3.5rem;--scl-font-variant-heading-1-weight:800;--scl-font-variant-heading-1-line-height:114%;--scl-font-variant-heading-1-letter-spacing:normal;--scl-color-primary:hsl(329.20000000000005, 100%, 44.3%);--scl-color-black:hsl(0, 0%, 0%);--scl-color-white:hsl(0, 0%, 100%);--scl-color-grey-0:hsl(0, 0%, 94.9%);--scl-color-grey-10:hsl(0, 0%, 89.8%);--scl-color-grey-20:hsl(0, 0%, 80%);--scl-color-grey-30:hsl(0, 0%, 69.8%);--scl-color-grey-40:hsl(0, 0%, 60%);--scl-color-grey-50:hsl(0, 0%, 49.8%);--scl-color-grey-60:hsl(0, 0%, 40%);--scl-color-grey-70:hsl(0, 0%, 29.8%);--scl-color-grey-80:hsl(0, 0%, 20%);--scl-color-grey-90:hsl(0, 0%, 9.8%);--scl-color-grey-100:hsl(0, 0%, 0%);--scl-color-orange-0:hsl(54.39999999999998, 100%, 93.7%);--scl-color-orange-10:hsl(48.39999999999998, 100%, 88.8%);--scl-color-orange-20:hsl(43.69999999999999, 100%, 84.1%);--scl-color-orange-30:hsl(38.69999999999999, 100%, 79.6%);--scl-color-orange-40:hsl(33.5, 100%, 75.1%);--scl-color-orange-50:hsl(29, 100%, 70.8%);--scl-color-orange-60:hsl(24.80000000000001, 96.5%, 66.1%);--scl-color-orange-70:hsl(17.30000000000001, 71.4%, 56.1%);--scl-color-orange-80:hsl(17.30000000000001, 72.3%, 39.6%);--scl-color-orange-90:hsl(17.30000000000001, 88.8%, 31.4%);--scl-color-orange-100:hsl(11.399999999999977, 86.6%, 26.3%);--scl-color-red-0:hsl(353.79999999999995, 100%, 88.6%);--scl-color-red-10:hsl(351.5, 100%, 83.3%);--scl-color-red-20:hsl(350.4, 98.1%, 78.8%);--scl-color-red-30:hsl(350.6, 91%, 73.9%);--scl-color-red-40:hsl(350.4, 85.1%, 68.4%);--scl-color-red-50:hsl(350.29999999999995, 82.8%, 63.5%);--scl-color-red-60:hsl(351.20000000000005, 82.6%, 59.4%);--scl-color-red-70:hsl(349.70000000000005, 69%, 50.6%);--scl-color-red-80:hsl(348.9, 74.9%, 43.7%);--scl-color-red-90:hsl(347.1, 84%, 36.9%);--scl-color-red-100:hsl(345.9, 100%, 30%);--scl-color-blue-0:hsl(190.20000000000005, 100%, 92%);--scl-color-blue-10:hsl(196.20000000000005, 100%, 85.5%);--scl-color-blue-20:hsl(200.89999999999998, 100%, 79.2%);--scl-color-blue-30:hsl(206, 100%, 73.3%);--scl-color-blue-40:hsl(210.70000000000005, 100%, 67.5%);--scl-color-blue-50:hsl(215.60000000000002, 100%, 62%);--scl-color-blue-60:hsl(220, 100%, 56.5%);--scl-color-blue-70:hsl(227.39999999999998, 89%, 46.3%);--scl-color-blue-80:hsl(236.5, 100%, 37.5%);--scl-color-blue-90:hsl(241.10000000000002, 100%, 31.2%);--scl-color-blue-100:hsl(249.39999999999998, 100%, 25.1%);--scl-color-teal-0:hsl(176.10000000000002, 63.3%, 90.4%);--scl-color-teal-10:hsl(178.89999999999998, 60%, 82.4%);--scl-color-teal-20:hsl(180, 58.5%, 74.5%);--scl-color-teal-30:hsl(181.20000000000005, 57.6%, 66.7%);--scl-color-teal-40:hsl(182.10000000000002, 55.2%, 58.8%);--scl-color-teal-50:hsl(183.60000000000002, 53.8%, 50.8%);--scl-color-teal-60:hsl(184.79999999999995, 68.9%, 42.9%);--scl-color-teal-70:hsl(182.89999999999998, 80.1%, 35.5%);--scl-color-teal-80:hsl(180.5, 91.5%, 27.8%);--scl-color-teal-90:hsl(178.89999999999998, 100%, 20.6%);--scl-color-teal-100:hsl(176.5, 100%, 16.9%);--scl-color-green-0:hsl(78.30000000000001, 59%, 92.4%);--scl-color-green-10:hsl(82.5, 55.6%, 85.9%);--scl-color-green-20:hsl(86.30000000000001, 55.3%, 79.8%);--scl-color-green-30:hsl(90.39999999999998, 52.6%, 73.5%);--scl-color-green-40:hsl(95.30000000000001, 50.9%, 67.3%);--scl-color-green-50:hsl(98.80000000000001, 49.7%, 61%);--scl-color-green-60:hsl(103.19999999999999, 48.1%, 54.7%);--scl-color-green-70:hsl(111.5, 46.1%, 48%);--scl-color-green-80:hsl(120, 52.4%, 41.2%);--scl-color-green-90:hsl(127.60000000000002, 58.9%, 34.3%);--scl-color-green-100:hsl(136.3, 65.7%, 27.5%);--scl-color-clay-0:hsl(15.800000000000011, 42.2%, 91.2%);--scl-color-clay-10:hsl(19.399999999999977, 46.3%, 86.9%);--scl-color-clay-20:hsl(20.899999999999977, 49.4%, 82.9%);--scl-color-clay-30:hsl(21.899999999999977, 48.1%, 78.8%);--scl-color-clay-40:hsl(22.30000000000001, 48.4%, 74.9%);--scl-color-clay-50:hsl(22.80000000000001, 48.3%, 71.2%);--scl-color-clay-60:hsl(25.100000000000023, 46.7%, 66.9%);--scl-color-clay-70:hsl(22.899999999999977, 35.8%, 58.4%);--scl-color-clay-80:hsl(21.399999999999977, 27.6%, 50.2%);--scl-color-clay-90:hsl(18.899999999999977, 26.8%, 41.8%);--scl-color-clay-100:hsl(18.600000000000023, 24.7%, 33.3%);--scl-color-rose-0:hsl(338.79999999999995, 48.6%, 93.1%);--scl-color-rose-10:hsl(341.4, 46%, 87.6%);--scl-color-rose-20:hsl(341.4, 45.7%, 82%);--scl-color-rose-30:hsl(341.9, 43.8%, 76.3%);--scl-color-rose-40:hsl(343.79999999999995, 42.3%, 70.8%);--scl-color-rose-50:hsl(346, 41.2%, 65.3%);--scl-color-rose-60:hsl(346.79999999999995, 39.8%, 59.6%);--scl-color-rose-70:hsl(344.79999999999995, 31.5%, 49.2%);--scl-color-rose-80:hsl(342.9, 35.4%, 38.8%);--scl-color-rose-90:hsl(340.29999999999995, 40.3%, 28.2%);--scl-color-rose-100:hsl(338.4, 44.6%, 22%);--scl-color-lilac-0:hsl(307.5, 33.3%, 95.3%);--scl-color-lilac-10:hsl(310, 27.3%, 91.4%);--scl-color-lilac-20:hsl(310.6, 28.8%, 88.4%);--scl-color-lilac-30:hsl(310, 30.8%, 84.7%);--scl-color-lilac-40:hsl(300, 28.2%, 77.1%);--scl-color-lilac-50:hsl(293.6, 30.7%, 70%);--scl-color-lilac-60:hsl(292.9, 30.9%, 62.5%);--scl-color-lilac-70:hsl(292.79999999999995, 24.4%, 53.3%);--scl-color-lilac-80:hsl(293.20000000000005, 23.8%, 43.7%);--scl-color-lilac-90:hsl(291.79999999999995, 29.1%, 34.3%);--scl-color-lilac-100:hsl(291.1, 37%, 24.9%);--scl-color-pigeon-0:hsl(226.20000000000005, 41.9%, 93.9%);--scl-color-pigeon-10:hsl(227.5, 42.9%, 89%);--scl-color-pigeon-20:hsl(227.60000000000002, 41.5%, 83.9%);--scl-color-pigeon-30:hsl(228.60000000000002, 38.9%, 78.8%);--scl-color-pigeon-40:hsl(230.60000000000002, 38.3%, 73.9%);--scl-color-pigeon-50:hsl(230.79999999999995, 37.1%, 68.8%);--scl-color-pigeon-60:hsl(232.70000000000005, 35.9%, 63.9%);--scl-color-pigeon-70:hsl(239.10000000000002, 29.8%, 55.9%);--scl-color-pigeon-80:hsl(244.60000000000002, 26.5%, 48%);--scl-color-pigeon-90:hsl(251.60000000000002, 30.4%, 40%);--scl-color-pigeon-100:hsl(257.5, 33.7%, 32%);--scl-color-neptune-0:hsl(176, 29.4%, 90%);--scl-color-neptune-10:hsl(180, 31.6%, 85.1%);--scl-color-neptune-20:hsl(178.29999999999995, 34.7%, 80.2%);--scl-color-neptune-30:hsl(180, 34.4%, 74.9%);--scl-color-neptune-40:hsl(182.29999999999995, 34.6%, 70%);--scl-color-neptune-50:hsl(184, 33.7%, 65.1%);--scl-color-neptune-60:hsl(184.39999999999998, 33.3%, 60%);--scl-color-neptune-70:hsl(182.70000000000005, 27.5%, 52.9%);--scl-color-neptune-80:hsl(180, 25.3%, 45.7%);--scl-color-neptune-90:hsl(178.79999999999995, 24.9%, 38.6%);--scl-color-neptune-100:hsl(178.20000000000005, 21.2%, 31.4%);--scl-color-olive-0:hsl(95, 33.3%, 92.9%);--scl-color-olive-10:hsl(96, 30.3%, 87.1%);--scl-color-olive-20:hsl(98.60000000000002, 29.8%, 81.6%);--scl-color-olive-30:hsl(100, 29%, 75.7%);--scl-color-olive-40:hsl(101.89999999999998, 28.1%, 70%);--scl-color-olive-50:hsl(103.19999999999999, 27.5%, 64.3%);--scl-color-olive-60:hsl(103.89999999999998, 26.4%, 58.4%);--scl-color-olive-70:hsl(102.19999999999999, 22%, 48.2%);--scl-color-olive-80:hsl(100, 24.7%, 38%);--scl-color-olive-90:hsl(97.5, 28.2%, 27.8%);--scl-color-olive-100:hsl(97.69999999999999, 32.7%, 21%);--scl-color-primary-hover:hsl(329.29999999999995, 95.2%, 50.6%);--scl-color-primary-active:hsl(329.29999999999995, 100%, 39.8%);--scl-color-focus:hsl(215.60000000000002, 100%, 62%);--scl-color-text-standard:hsl(0, 0%, 9.8%);--scl-color-text-additional:hsl(0, 0%, 40%);--scl-color-text-link:hsl(227.39999999999998, 89%, 46.3%);--scl-color-text-link-hover:hsl(236.5, 100%, 37.5%);--scl-color-text-link-active:hsl(220, 100%, 56.5%);--scl-color-text-link-visited:hsl(227.39999999999998, 89%, 46.3%);--scl-color-text-info:hsl(227.39999999999998, 89%, 46.3%);--scl-color-text-disabled:hsl(0, 0%, 49.8%);--scl-color-text-success:hsl(136.3, 65.7%, 27.5%);--scl-color-text-error:hsl(349.70000000000005, 69%, 50.6%);--scl-color-background-standard:hsl(0, 0%, 100%);--scl-color-background-light:hsl(0, 0%, 94.9%);--scl-color-background-darker:hsl(0, 0%, 80%);--scl-color-background-overlay:hsla(0, 0%, 42.4%, 0.7);--scl-color-background-disabled:hsl(0, 0%, 80%);--scl-color-background-success:hsl(136.3, 65.7%, 27.5%);--scl-color-background-error:hsl(349.70000000000005, 69%, 50.6%);--scl-color-functional-red:hsl(349.70000000000005, 69%, 50.6%);--scl-color-functional-green:hsl(136.3, 65.7%, 27.5%);--scl-color-functional-blue:hsl(227.39999999999998, 89%, 46.3%);--scl-shadow-level-0:0px 2px 8px 0px hsla(0, 0%, 0%, 0.1), 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-1:0px 4px 16px 0px hsla(0, 0%, 0%, 0.1), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-2:0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-3:0px 12px 48px 0px hsla(0, 0%, 0%, 0.1), 0px 6px 12px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-4:0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-5:0px 20px 80px 0px hsla(0, 0%, 0%, 0.1), 0px 10px 20px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-1-hover:0px 6px 24px 0px hsla(0, 0%, 0%, 0.1), 0px 3px 6px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-1-active:0px 2px 8px 0px hsla(0, 0%, 0%, 0.1), 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-2-hover:0px 10px 40px 0px hsla(0, 0%, 0%, 0.1), 0px 5px 10px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-2-active:0px 6px 24px 0px hsla(0, 0%, 0%, 0.1), 0px 3px 6px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-3-hover:0px 14px 56px 0px hsla(0, 0%, 0%, 0.1), 0px 7px 14px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-3-active:0px 10px 40px 0px hsla(0, 0%, 0%, 0.1), 0px 5px 10px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-4-hover:0px 18px 72px 0px hsla(0, 0%, 0%, 0.1), 0px 9px 18px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-4-active:0px 14px 56px 0px hsla(0, 0%, 0%, 0.1), 0px 7px 14px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-5-hover:0px 22px 88px 0px hsla(0, 0%, 0%, 0.1), 0px 11px 22px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-5-active:0px 18px 72px 0px hsla(0, 0%, 0%, 0.1), 0px 9px 18px 0px hsla(0, 0%, 0%, 0.1);--scl-radius-1:1px;--scl-radius-2:2px;--scl-radius-4:4px;--scl-radius-8:8px;--scl-radius-12:12px;--scl-opacity-50:0.5;--scl-motion-duration-immediate:100ms;--scl-motion-duration-fast:200ms;--scl-motion-duration-slower:600ms;--scl-motion-duration-deliberate:800ms;--scl-motion-easing-standard:cubic-bezier(0.42, 0, 0.58, 1);--scl-motion-easing-enter:cubic-bezier(0.390, 0.575, 0.565, 1);--scl-z-index-10:10;--scl-z-index-20:20;--scl-z-index-30:30;--scl-z-index-40:40;--scl-z-index-50:50;--scl-z-index-60:60;--scl-z-index-70:70}.scl-font-variant-body{font-family:var(--scl-font-variant-body-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-body-size, 1rem);font-weight:var(--scl-font-variant-body-weight, 500);line-height:var(--scl-font-variant-body-line-height, 150%);letter-spacing:var(--scl-font-variant-body-letter-spacing, normal)}.scl-font-variant-body-short{font-family:var(--scl-font-variant-body-short-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-body-short-size, 1rem);font-weight:var(--scl-font-variant-body-short-weight, 500);line-height:var(--scl-font-variant-body-short-line-height, 125%);letter-spacing:var(--scl-font-variant-body-short-letter-spacing, normal)}.scl-font-variant-body-large{font-family:var(--scl-font-variant-body-large-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-body-large-size, 1.25rem);font-weight:var(--scl-font-variant-body-large-weight, 500);line-height:var(--scl-font-variant-body-large-line-height, 160%);letter-spacing:var(--scl-font-variant-body-large-letter-spacing, normal)}.scl-font-variant-smaller{font-family:var(--scl-font-variant-smaller-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-smaller-size, 0.75rem);font-weight:var(--scl-font-variant-smaller-weight, 500);line-height:var(--scl-font-variant-smaller-line-height, 125%);letter-spacing:var(--scl-font-variant-smaller-letter-spacing, normal)}.scl-font-variant-label{font-family:var(--scl-font-variant-label-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-label-size, 0.75rem);font-weight:var(--scl-font-variant-label-weight, 500);line-height:var(--scl-font-variant-label-line-height, 120%);letter-spacing:var(--scl-font-variant-label-letter-spacing, normal)}.scl-font-variant-caption{font-family:var(--scl-font-variant-caption-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-caption-size, 0.75rem);font-weight:var(--scl-font-variant-caption-weight, 500);line-height:var(--scl-font-variant-caption-line-height, 133%);letter-spacing:var(--scl-font-variant-caption-letter-spacing, normal)}.scl-font-variant-heading-6{font-family:var(--scl-font-variant-heading-6-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-6-size, 1rem);font-weight:var(--scl-font-variant-heading-6-weight, 700);line-height:var(--scl-font-variant-heading-6-line-height, 150%);letter-spacing:var(--scl-font-variant-heading-6-letter-spacing, normal)}.scl-font-variant-heading-5{font-family:var(--scl-font-variant-heading-5-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-5-size, 1.25rem);font-weight:var(--scl-font-variant-heading-5-weight, 800);line-height:var(--scl-font-variant-heading-5-line-height, 125%);letter-spacing:var(--scl-font-variant-heading-5-letter-spacing, normal)}.scl-font-variant-heading-4{font-family:var(--scl-font-variant-heading-4-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-4-size, 1.5rem);font-weight:var(--scl-font-variant-heading-4-weight, 800);line-height:var(--scl-font-variant-heading-4-line-height, 133%);letter-spacing:var(--scl-font-variant-heading-4-letter-spacing, normal)}.scl-font-variant-heading-3{font-family:var(--scl-font-variant-heading-3-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-3-size, 2rem);font-weight:var(--scl-font-variant-heading-3-weight, 800);line-height:var(--scl-font-variant-heading-3-line-height, 125%);letter-spacing:var(--scl-font-variant-heading-3-letter-spacing, normal)}.scl-font-variant-heading-2{font-family:var(--scl-font-variant-heading-2-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-2-size, 2.5rem);font-weight:var(--scl-font-variant-heading-2-weight, 800);line-height:var(--scl-font-variant-heading-2-line-height, 120%);letter-spacing:var(--scl-font-variant-heading-2-letter-spacing, normal)}.scl-font-variant-heading-1{font-family:var(--scl-font-variant-heading-1-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-1-size, 3.5rem);font-weight:var(--scl-font-variant-heading-1-weight, 800);line-height:var(--scl-font-variant-heading-1-line-height, 114%);letter-spacing:var(--scl-font-variant-heading-1-letter-spacing, normal)}:root{--telekom-color-text-and-icon-standard:#000000;--telekom-color-text-and-icon-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-disabled:hsla(0, 0%, 0%, 0.4);--telekom-color-text-and-icon-link-standard:#2238df;--telekom-color-text-and-icon-link-hovered:#0819bd;--telekom-color-text-and-icon-link-visited:#6c3bdb;--telekom-color-text-and-icon-link-active:#000d99;--telekom-color-text-and-icon-primary-standard:#e20074;--telekom-color-text-and-icon-primary-hovered:#c00063;--telekom-color-text-and-icon-primary-pressed:#9e0051;--telekom-color-text-and-icon-inverted-standard:#ffffff;--telekom-color-text-and-icon-inverted-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-white-standard:#ffffff;--telekom-color-text-and-icon-white-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-black-standard:#000000;--telekom-color-text-and-icon-black-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-functional-informational:#2238df;--telekom-color-text-and-icon-functional-success:#008653;--telekom-color-text-and-icon-functional-danger:#d91308;--telekom-color-text-and-icon-functional-warning:#b63d00;--telekom-color-text-and-icon-on-subtle-informational:#2238df;--telekom-color-text-and-icon-on-subtle-success:#00774b;--telekom-color-text-and-icon-on-subtle-danger:#c30a03;--telekom-color-text-and-icon-on-subtle-warning:#b63d00;--telekom-color-text-and-icon-on-subtle-violet:#6c3bdb;--telekom-color-text-and-icon-on-subtle-blue:#2238df;--telekom-color-text-and-icon-on-subtle-cyan:#00738A;--telekom-color-text-and-icon-on-subtle-teal:#177364;--telekom-color-text-and-icon-on-subtle-green:#00774b;--telekom-color-text-and-icon-on-subtle-olive:#557317;--telekom-color-text-and-icon-on-subtle-brown:#82581c;--telekom-color-text-and-icon-on-subtle-yellow:#AC5600;--telekom-color-text-and-icon-on-subtle-orange:#b63d00;--telekom-color-text-and-icon-on-subtle-red:#c30a03;--telekom-color-background-canvas:#ffffff;--telekom-color-background-canvas-subtle:#fbfbfb;--telekom-color-background-backdrop:hsla(0, 0%, 0%, 0.5);--telekom-color-background-surface:#ffffff;--telekom-color-background-surface-subtle:#efeff0;--telekom-color-background-surface-highlight:#242426;--telekom-color-primary-standard:#e20074;--telekom-color-primary-hovered:#c00063;--telekom-color-primary-pressed:#9e0051;--telekom-color-ui-base:#ffffff;--telekom-color-ui-subtle:#efeff0;--telekom-color-ui-faint:#dfdfe1;--telekom-color-ui-regular:#929296;--telekom-color-ui-strong:#747478;--telekom-color-ui-extra-strong:#242426;--telekom-color-ui-white:#ffffff;--telekom-color-ui-black:#000000;--telekom-color-ui-disabled:#d0d0d2;--telekom-color-ui-border-standard:hsla(0, 0%, 0%, 0.44);--telekom-color-ui-border-hovered:hsla(0, 0%, 0%, 0.71);--telekom-color-ui-border-pressed:hsla(0, 0%, 0%, 0.71);--telekom-color-ui-border-disabled:hsla(0, 0%, 0%, 0.14);--telekom-color-ui-state-fill-standard:hsla(0, 0%, 0%, 0);--telekom-color-ui-state-fill-hovered:hsla(0, 0%, 0%, 0.07);--telekom-color-ui-state-fill-pressed:hsla(0, 0%, 0%, 0.21);--telekom-color-ui-state-fill-hovered-inverted:hsla(0, 0%, 100%, 0.14);--telekom-color-ui-state-fill-pressed-inverted:hsla(0, 0%, 100%, 0.21);--telekom-color-functional-focus-standard:#2238df;--telekom-color-functional-focus-inverted:#7d94f9;--telekom-color-functional-focus-on-dark-background:#7d94f9;--telekom-color-functional-focus-on-light-background:#2238df;--telekom-color-functional-informational-standard:#2238df;--telekom-color-functional-informational-hovered:#1326cf;--telekom-color-functional-informational-pressed:#0819bd;--telekom-color-functional-informational-subtle:#d3d7f9;--telekom-color-functional-success-standard:#00b367;--telekom-color-functional-success-hovered:#00a461;--telekom-color-functional-success-pressed:#00955a;--telekom-color-functional-success-subtle:#ccf0e1;--telekom-color-functional-danger-standard:#e82010;--telekom-color-functional-danger-hovered:#d91308;--telekom-color-functional-danger-pressed:#c30a03;--telekom-color-functional-danger-subtle:#fad2cf;--telekom-color-functional-warning-standard:#f97012;--telekom-color-functional-warning-hovered:#f46409;--telekom-color-functional-warning-pressed:#e65703;--telekom-color-functional-warning-subtle:#fee2d0;--telekom-color-additional-violet-0:#e2d9ff;--telekom-color-additional-violet-100:#c8b5fd;--telekom-color-additional-violet-200:#af93fb;--telekom-color-additional-violet-300:#9a75f8;--telekom-color-additional-violet-400:#885df2;--telekom-color-additional-violet-500:#794ae9;--telekom-color-additional-violet-600:#6c3bdb;--telekom-color-additional-violet-700:#5e2ec6;--telekom-color-additional-violet-800:#5024ab;--telekom-color-additional-violet-900:#411c8c;--telekom-color-additional-violet-subtle:#e4dbfb;--telekom-color-additional-blue-0:#d9e2ff;--telekom-color-additional-blue-100:#aabcfd;--telekom-color-additional-blue-200:#7d94f9;--telekom-color-additional-blue-300:#576ff3;--telekom-color-additional-blue-400:#3950ea;--telekom-color-additional-blue-500:#2238df;--telekom-color-additional-blue-600:#1326cf;--telekom-color-additional-blue-700:#0819bd;--telekom-color-additional-blue-800:#0311ab;--telekom-color-additional-blue-900:#000d99;--telekom-color-additional-blue-subtle:#d3d7f9;--telekom-color-additional-cyan-0:#d9fcff;--telekom-color-additional-cyan-100:#a4ecf4;--telekom-color-additional-cyan-200:#75dbe8;--telekom-color-additional-cyan-300:#4fcadd;--telekom-color-additional-cyan-400:#33bbd2;--telekom-color-additional-cyan-500:#1eadc6;--telekom-color-additional-cyan-600:#11a0bb;--telekom-color-additional-cyan-700:#0894b0;--telekom-color-additional-cyan-800:#038aa4;--telekom-color-additional-cyan-900:#008099;--telekom-color-additional-cyan-subtle:#d2eff4;--telekom-color-additional-teal-0:#d9fff2;--telekom-color-additional-teal-100:#acf1dc;--telekom-color-additional-teal-200:#85e3ca;--telekom-color-additional-teal-300:#65d5ba;--telekom-color-additional-teal-400:#4cc6ac;--telekom-color-additional-teal-500:#3ab89f;--telekom-color-additional-teal-600:#2eaa93;--telekom-color-additional-teal-700:#259c87;--telekom-color-additional-teal-800:#1e8e7b;--telekom-color-additional-teal-900:#19806f;--telekom-color-additional-teal-subtle:#d8f1ec;--telekom-color-additional-green-0:#dbffed;--telekom-color-additional-green-100:#8ff0c1;--telekom-color-additional-green-200:#4ee19c;--telekom-color-additional-green-300:#1bd27f;--telekom-color-additional-green-400:#00c26d;--telekom-color-additional-green-500:#00b367;--telekom-color-additional-green-600:#00a461;--telekom-color-additional-green-700:#00955a;--telekom-color-additional-green-800:#008653;--telekom-color-additional-green-900:#00774b;--telekom-color-additional-green-subtle:#ccf0e1;--telekom-color-additional-olive-0:#f2ffd9;--telekom-color-additional-olive-100:#daf1ac;--telekom-color-additional-olive-200:#c3e385;--telekom-color-additional-olive-300:#afd565;--telekom-color-additional-olive-400:#9ec64c;--telekom-color-additional-olive-500:#8eb83a;--telekom-color-additional-olive-600:#81aa2e;--telekom-color-additional-olive-700:#749c25;--telekom-color-additional-olive-800:#688e1e;--telekom-color-additional-olive-900:#5e8019;--telekom-color-additional-olive-subtle:#e8f1d8;--telekom-color-additional-brown-0:#ffefd9;--telekom-color-additional-brown-100:#efd3ab;--telekom-color-additional-brown-200:#e0b983;--telekom-color-additional-brown-300:#d0a363;--telekom-color-additional-brown-400:#c18f4a;--telekom-color-additional-brown-500:#b17f38;--telekom-color-additional-brown-600:#a2702b;--telekom-color-additional-brown-700:#926322;--telekom-color-additional-brown-800:#82581c;--telekom-color-additional-brown-900:#734d17;--telekom-color-additional-brown-subtle:#efe5d7;--telekom-color-additional-yellow-0:#fffcd9;--telekom-color-additional-yellow-100:#fcf1aa;--telekom-color-additional-yellow-200:#f9e47e;--telekom-color-additional-yellow-300:#f7d358;--telekom-color-additional-yellow-400:#f4c23b;--telekom-color-additional-yellow-500:#f1b125;--telekom-color-additional-yellow-600:#eea015;--telekom-color-additional-yellow-700:#eb900b;--telekom-color-additional-yellow-800:#e88104;--telekom-color-additional-yellow-900:#e67300;--telekom-color-additional-yellow-subtle:#fcefd3;--telekom-color-additional-orange-0:#ffe6cc;--telekom-color-additional-orange-100:#ffc48e;--telekom-color-additional-orange-200:#fea75b;--telekom-color-additional-orange-300:#fd9038;--telekom-color-additional-orange-400:#fc7e21;--telekom-color-additional-orange-500:#f97012;--telekom-color-additional-orange-600:#f46409;--telekom-color-additional-orange-700:#e65703;--telekom-color-additional-orange-800:#cd4901;--telekom-color-additional-orange-900:#b63d00;--telekom-color-additional-orange-subtle:#fee2d0;--telekom-color-additional-red-0:#ffcabf;--telekom-color-additional-red-100:#fd9684;--telekom-color-additional-red-200:#fb6a55;--telekom-color-additional-red-300:#f84934;--telekom-color-additional-red-400:#f2321e;--telekom-color-additional-red-500:#e82010;--telekom-color-additional-red-600:#d91308;--telekom-color-additional-red-700:#c30a03;--telekom-color-additional-red-800:#a70401;--telekom-color-additional-red-900:#870000;--telekom-color-additional-red-subtle:#fad2cf;--telekom-radius-none:0rem;--telekom-radius-extra-small:0.125rem;--telekom-radius-small:0.25rem;--telekom-radius-medium-small:0.375rem;--telekom-radius-standard:0.5rem;--telekom-radius-large:0.75rem;--telekom-radius-pill:62.4375rem;--telekom-radius-circle:50%;--telekom-size-icon-extra-small:0.75rem;--telekom-size-icon-small:1rem;--telekom-size-icon-medium:1.25rem;--telekom-size-icon-large:1.5rem;--telekom-size-icon-extra-large:3rem;--telekom-size-form-element-height-small:2rem;--telekom-size-form-element-height-standard:2.75rem;--telekom-size-generic-size-01:0.25rem;--telekom-size-generic-size-02:0.375rem;--telekom-size-generic-size-03:0.5rem;--telekom-size-generic-size-04:0.75rem;--telekom-size-generic-size-05:1rem;--telekom-size-generic-size-06:1.25rem;--telekom-size-generic-size-07:1.5rem;--telekom-size-generic-size-08:1.75rem;--telekom-size-generic-size-09:2rem;--telekom-size-generic-size-10:2.25rem;--telekom-size-generic-size-11:2.5rem;--telekom-size-generic-size-12:2.75rem;--telekom-size-generic-size-13:3rem;--telekom-size-generic-size-14:3.25rem;--telekom-size-generic-size-15:3.5rem;--telekom-size-generic-size-16:4rem;--telekom-size-generic-size-17:4.5rem;--telekom-size-generic-size-18:5rem;--telekom-size-generic-size-19:6rem;--telekom-size-generic-size-20:8rem;--telekom-size-generic-size-21:12rem;--telekom-size-generic-size-22:16rem;--telekom-size-generic-size-23:20rem;--telekom-size-generic-size-24:28rem;--telekom-size-generic-size-25:36rem;--telekom-line-weight-standard:0.0625rem;--telekom-line-weight-highlight:0.125rem;--telekom-line-weight-bold:0.25rem;--telekom-motion-duration-instant:0ms;--telekom-motion-duration-immediate:100ms;--telekom-motion-duration-transition:200ms;--telekom-motion-duration-animation:600ms;--telekom-motion-duration-animation-deliberate:800ms;--telekom-motion-easing-standard:cubic-bezier(0.4,0,0.6,1);--telekom-motion-easing-enter:cubic-bezier(0.4,0.6,0.6,1);--telekom-motion-easing-leave:cubic-bezier(0.4,0,1,1);--telekom-opacity-invisible:0;--telekom-opacity-transparent:0.35;--telekom-opacity-semi-transparent:0.5;--telekom-opacity-translucent:0.75;--telekom-opacity-semi-translucent:0.85;--telekom-opacity-solid:1;--telekom-shadow-raised-standard:0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-raised-hover:0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-raised-pressed:0px 4px 16px 0px hsla(0, 0%, 0%, 0.1), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-floating-standard:0px 12px 48px 0px hsla(0, 0%, 0%, 0.1), 0px 6px 12px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-floating-hover:0px 24px 96px 0px hsla(0, 0%, 0%, 0.1), 0px 12px 24px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-floating-pressed:0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-top:0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-overlay:0px 24px 96px 0px hsla(0, 0%, 0%, 0.1), 0px 12px 24px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-intense:0px 0px 2px 0px hsla(0, 0%, 0%, 0.24), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.24), 0px 4px 12px 0px hsla(0, 0%, 0%, 0.26);--telekom-shadow-app-bar-top-raised:0px 1px 0px 0px hsla(0, 0%, 0%, 0.05), 0px 2px 8px 0px hsla(0, 0%, 0%, 0.05);--telekom-shadow-app-bar-top-flat:0px 1px 0px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-app-bar-bottom-raised:0px -1px 0px 0px hsla(0, 0%, 0%, 0.05), 0px -2px 8px 0px hsla(0, 0%, 0%, 0.05);--telekom-shadow-app-bar-bottom-flat:0px -1px 0px 0px hsla(0, 0%, 0%, 0.1);--telekom-spacing-composition-space-00:0rem;--telekom-spacing-composition-space-01:0.0625rem;--telekom-spacing-composition-space-02:0.125rem;--telekom-spacing-composition-space-03:0.25rem;--telekom-spacing-composition-space-04:0.5rem;--telekom-spacing-composition-space-05:0.75rem;--telekom-spacing-composition-space-06:1rem;--telekom-spacing-composition-space-07:1.25rem;--telekom-spacing-composition-space-08:1.5rem;--telekom-spacing-composition-space-09:1.75rem;--telekom-spacing-composition-space-10:2rem;--telekom-spacing-composition-space-11:2.25rem;--telekom-spacing-composition-space-12:2.5rem;--telekom-spacing-composition-space-13:2.75rem;--telekom-spacing-composition-space-14:3rem;--telekom-spacing-composition-space-15:3.25rem;--telekom-spacing-composition-space-16:3.5rem;--telekom-spacing-composition-space-17:4rem;--telekom-spacing-composition-space-18:4.5rem;--telekom-spacing-composition-space-19:5rem;--telekom-spacing-composition-space-20:5.5rem;--telekom-spacing-composition-space-21:6rem;--telekom-spacing-baseline-space-00:0rem;--telekom-spacing-baseline-space-01:0.25rem;--telekom-spacing-baseline-space-02:0.5rem;--telekom-spacing-baseline-space-03:0.75rem;--telekom-spacing-baseline-space-04:1rem;--telekom-spacing-baseline-space-05:1.5rem;--telekom-spacing-baseline-space-06:2rem;--telekom-spacing-baseline-space-07:3rem;--telekom-spacing-baseline-space-08:4rem;--telekom-spacing-baseline-space-09:6rem;--telekom-spacing-baseline-space-10:8rem;--telekom-spacing-baseline-space-11:12rem;--telekom-spacing-baseline-space-12:16rem;--telekom-spacing-baseline-space-13:24rem;--telekom-spacing-baseline-space-14:32rem;--telekom-spacing-baseline-space-15:64rem;--telekom-text-style-badge:400 0.625rem/1.2 TeleNeoWeb, sans-serif;--telekom-text-style-small:500 0.75rem/1.35 TeleNeoWeb, sans-serif;--telekom-text-style-small-bold:700 0.75rem/1.35 TeleNeoWeb, sans-serif;--telekom-text-style-caption:400 0.875rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-caption-bold:700 0.875rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-body:400 1rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-body-bold:700 1rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-ui:500 1rem/1 TeleNeoWeb, sans-serif;--telekom-text-style-ui-bold:700 1rem/1 TeleNeoWeb, sans-serif;--telekom-text-style-lead-text:400 1.25rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-heading-6:700 1rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-heading-5:800 1.25rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-heading-4:800 1.5rem/1.35 TeleNeoWeb, sans-serif;--telekom-text-style-heading-3:800 2rem/1.25 TeleNeoWeb, sans-serif;--telekom-text-style-heading-2:800 2.625rem/1.15 TeleNeoWeb, sans-serif;--telekom-text-style-heading-1:800 3.375rem/1.2 TeleNeoWeb, sans-serif;--telekom-text-style-title-2:800 4.25rem/1.15 TeleNeoWeb, sans-serif;--telekom-text-style-title-1:800 4.75rem/1.15 TeleNeoWeb, sans-serif;--telekom-typography-font-size-badge:0.625rem;--telekom-typography-font-size-small:0.75rem;--telekom-typography-font-size-caption:0.875rem;--telekom-typography-font-size-body:1rem;--telekom-typography-font-size-callout:1.25rem;--telekom-typography-font-size-headline-3:1.5rem;--telekom-typography-font-size-headline-2:2rem;--telekom-typography-font-size-headline-1:2.625rem;--telekom-typography-font-size-title-3:3.375rem;--telekom-typography-font-size-title-2:4.25rem;--telekom-typography-font-size-title-1:4.75rem;--telekom-typography-font-family-sans:TeleNeoWeb, sans-serif;--telekom-typography-font-family-mono:monospace;--telekom-typography-font-weight-thin:200;--telekom-typography-font-weight-regular:400;--telekom-typography-font-weight-medium:500;--telekom-typography-font-weight-bold:700;--telekom-typography-font-weight-extra-bold:800;--telekom-typography-font-weight-ultra:900;--telekom-typography-line-spacing-none:1;--telekom-typography-line-spacing-extra-tight:1.15;--telekom-typography-line-spacing-tight:1.25;--telekom-typography-line-spacing-moderate:1.35;--telekom-typography-line-spacing-standard:1.4;--telekom-typography-line-spacing-loose:1.5;--telekom-typography-letter-spacing-standard:0}[data-mode="dark"]{--telekom-color-text-and-icon-standard:#ffffff;--telekom-color-text-and-icon-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-disabled:hsla(0, 0%, 100%, 0.3);--telekom-color-text-and-icon-link-standard:#7d94f9;--telekom-color-text-and-icon-link-hovered:#aabcfd;--telekom-color-text-and-icon-link-visited:#9a75f8;--telekom-color-text-and-icon-link-active:#d9e2ff;--telekom-color-text-and-icon-primary-standard:#e20074;--telekom-color-text-and-icon-primary-hovered:#ec59a5;--telekom-color-text-and-icon-primary-pressed:#f080ba;--telekom-color-text-and-icon-inverted-standard:#000000;--telekom-color-text-and-icon-inverted-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-white-standard:#ffffff;--telekom-color-text-and-icon-white-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-black-standard:#000000;--telekom-color-text-and-icon-black-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-functional-informational:#7d94f9;--telekom-color-text-and-icon-functional-success:#00b367;--telekom-color-text-and-icon-functional-danger:#f84934;--telekom-color-text-and-icon-functional-warning:#f97012;--telekom-color-text-and-icon-on-subtle-informational:#7d94f9;--telekom-color-text-and-icon-on-subtle-success:#1bd27f;--telekom-color-text-and-icon-on-subtle-danger:#fb6a55;--telekom-color-text-and-icon-on-subtle-warning:#fd9038;--telekom-color-text-and-icon-on-subtle-violet:#af93fb;--telekom-color-text-and-icon-on-subtle-blue:#7d94f9;--telekom-color-text-and-icon-on-subtle-cyan:#33bbd2;--telekom-color-text-and-icon-on-subtle-teal:#4cc6ac;--telekom-color-text-and-icon-on-subtle-green:#1bd27f;--telekom-color-text-and-icon-on-subtle-olive:#9ec64c;--telekom-color-text-and-icon-on-subtle-brown:#d0a363;--telekom-color-text-and-icon-on-subtle-yellow:#f1b125;--telekom-color-text-and-icon-on-subtle-orange:#fd9038;--telekom-color-text-and-icon-on-subtle-red:#fb6a55;--telekom-color-background-canvas:#000000;--telekom-color-background-canvas-subtle:#0e0e0f;--telekom-color-background-backdrop:hsla(0, 0%, 0%, 0.65);--telekom-color-background-surface:#1c1c1e;--telekom-color-background-surface-subtle:#242426;--telekom-color-background-surface-highlight:#48484b;--telekom-color-primary-standard:#e20074;--telekom-color-primary-hovered:#c00063;--telekom-color-primary-pressed:#9e0051;--telekom-color-ui-base:#0e0e0f;--telekom-color-ui-subtle:#1c1c1e;--telekom-color-ui-faint:#39393c;--telekom-color-ui-regular:#656569;--telekom-color-ui-strong:#929296;--telekom-color-ui-extra-strong:#efeff0;--telekom-color-ui-white:#ffffff;--telekom-color-ui-black:#000000;--telekom-color-ui-disabled:#2b2b2d;--telekom-color-ui-border-standard:hsla(0, 0%, 100%, 0.4);--telekom-color-ui-border-hovered:hsla(0, 0%, 100%, 0.54);--telekom-color-ui-border-pressed:hsla(0, 0%, 100%, 0.94);--telekom-color-ui-border-disabled:hsla(0, 0%, 100%, 0.21);--telekom-color-ui-state-fill-standard:hsla(0, 0%, 100%, 0);--telekom-color-ui-state-fill-hovered:hsla(0, 0%, 100%, 0.14);--telekom-color-ui-state-fill-pressed:hsla(0, 0%, 100%, 0.27);--telekom-color-ui-state-fill-hovered-inverted:hsla(0, 0%, 0%, 0.07);--telekom-color-ui-state-fill-pressed-inverted:hsla(0, 0%, 0%, 0.21);--telekom-color-functional-focus-standard:#7d94f9;--telekom-color-functional-focus-inverted:#2238df;--telekom-color-functional-informational-standard:#2238df;--telekom-color-functional-informational-hovered:#3950ea;--telekom-color-functional-informational-pressed:#576ff3;--telekom-color-functional-informational-subtle:#131f7b;--telekom-color-functional-success-standard:#00b367;--telekom-color-functional-success-hovered:#00c26d;--telekom-color-functional-success-pressed:#1bd27f;--telekom-color-functional-success-subtle:#004829;--telekom-color-functional-danger-standard:#e82010;--telekom-color-functional-danger-hovered:#f2321e;--telekom-color-functional-danger-pressed:#f84934;--telekom-color-functional-danger-subtle:#5d0d06;--telekom-color-functional-warning-standard:#f97012;--telekom-color-functional-warning-hovered:#fc7e21;--telekom-color-functional-warning-pressed:#fd9038;--telekom-color-functional-warning-subtle:#642d07;--telekom-color-additional-violet-subtle:#301e5d;--telekom-color-additional-blue-subtle:#131f7b;--telekom-color-additional-cyan-subtle:#0c454f;--telekom-color-additional-teal-subtle:#174a40;--telekom-color-additional-green-subtle:#004829;--telekom-color-additional-olive-subtle:#394a17;--telekom-color-additional-brown-subtle:#473316;--telekom-color-additional-yellow-subtle:#60470f;--telekom-color-additional-orange-subtle:#642d07;--telekom-color-additional-red-subtle:#5d0d06}@media (prefers-color-scheme: dark){:root{--telekom-color-text-and-icon-standard:#ffffff;--telekom-color-text-and-icon-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-disabled:hsla(0, 0%, 100%, 0.3);--telekom-color-text-and-icon-link-standard:#7d94f9;--telekom-color-text-and-icon-link-hovered:#aabcfd;--telekom-color-text-and-icon-link-visited:#9a75f8;--telekom-color-text-and-icon-link-active:#d9e2ff;--telekom-color-text-and-icon-primary-standard:#e20074;--telekom-color-text-and-icon-primary-hovered:#ec59a5;--telekom-color-text-and-icon-primary-pressed:#f080ba;--telekom-color-text-and-icon-inverted-standard:#000000;--telekom-color-text-and-icon-inverted-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-white-standard:#ffffff;--telekom-color-text-and-icon-white-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-black-standard:#000000;--telekom-color-text-and-icon-black-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-functional-informational:#7d94f9;--telekom-color-text-and-icon-functional-success:#00b367;--telekom-color-text-and-icon-functional-danger:#f84934;--telekom-color-text-and-icon-functional-warning:#f97012;--telekom-color-text-and-icon-on-subtle-informational:#7d94f9;--telekom-color-text-and-icon-on-subtle-success:#1bd27f;--telekom-color-text-and-icon-on-subtle-danger:#fb6a55;--telekom-color-text-and-icon-on-subtle-warning:#fd9038;--telekom-color-text-and-icon-on-subtle-violet:#af93fb;--telekom-color-text-and-icon-on-subtle-blue:#7d94f9;--telekom-color-text-and-icon-on-subtle-cyan:#33bbd2;--telekom-color-text-and-icon-on-subtle-teal:#4cc6ac;--telekom-color-text-and-icon-on-subtle-green:#1bd27f;--telekom-color-text-and-icon-on-subtle-olive:#9ec64c;--telekom-color-text-and-icon-on-subtle-brown:#d0a363;--telekom-color-text-and-icon-on-subtle-yellow:#f1b125;--telekom-color-text-and-icon-on-subtle-orange:#fd9038;--telekom-color-text-and-icon-on-subtle-red:#fb6a55;--telekom-color-background-canvas:#000000;--telekom-color-background-canvas-subtle:#0e0e0f;--telekom-color-background-backdrop:hsla(0, 0%, 0%, 0.65);--telekom-color-background-surface:#1c1c1e;--telekom-color-background-surface-subtle:#242426;--telekom-color-background-surface-highlight:#48484b;--telekom-color-primary-standard:#e20074;--telekom-color-primary-hovered:#c00063;--telekom-color-primary-pressed:#9e0051;--telekom-color-ui-base:#0e0e0f;--telekom-color-ui-subtle:#1c1c1e;--telekom-color-ui-faint:#39393c;--telekom-color-ui-regular:#656569;--telekom-color-ui-strong:#929296;--telekom-color-ui-extra-strong:#efeff0;--telekom-color-ui-white:#ffffff;--telekom-color-ui-black:#000000;--telekom-color-ui-disabled:#2b2b2d;--telekom-color-ui-border-standard:hsla(0, 0%, 100%, 0.4);--telekom-color-ui-border-hovered:hsla(0, 0%, 100%, 0.54);--telekom-color-ui-border-pressed:hsla(0, 0%, 100%, 0.94);--telekom-color-ui-border-disabled:hsla(0, 0%, 100%, 0.21);--telekom-color-ui-state-fill-standard:hsla(0, 0%, 100%, 0);--telekom-color-ui-state-fill-hovered:hsla(0, 0%, 100%, 0.14);--telekom-color-ui-state-fill-pressed:hsla(0, 0%, 100%, 0.27);--telekom-color-ui-state-fill-hovered-inverted:hsla(0, 0%, 0%, 0.07);--telekom-color-ui-state-fill-pressed-inverted:hsla(0, 0%, 0%, 0.21);--telekom-color-functional-focus-standard:#7d94f9;--telekom-color-functional-focus-inverted:#2238df;--telekom-color-functional-informational-standard:#2238df;--telekom-color-functional-informational-hovered:#3950ea;--telekom-color-functional-informational-pressed:#576ff3;--telekom-color-functional-informational-subtle:#131f7b;--telekom-color-functional-success-standard:#00b367;--telekom-color-functional-success-hovered:#00c26d;--telekom-color-functional-success-pressed:#1bd27f;--telekom-color-functional-success-subtle:#004829;--telekom-color-functional-danger-standard:#e82010;--telekom-color-functional-danger-hovered:#f2321e;--telekom-color-functional-danger-pressed:#f84934;--telekom-color-functional-danger-subtle:#5d0d06;--telekom-color-functional-warning-standard:#f97012;--telekom-color-functional-warning-hovered:#fc7e21;--telekom-color-functional-warning-pressed:#fd9038;--telekom-color-functional-warning-subtle:#642d07;--telekom-color-additional-violet-subtle:#301e5d;--telekom-color-additional-blue-subtle:#131f7b;--telekom-color-additional-cyan-subtle:#0c454f;--telekom-color-additional-teal-subtle:#174a40;--telekom-color-additional-green-subtle:#004829;--telekom-color-additional-olive-subtle:#394a17;--telekom-color-additional-brown-subtle:#473316;--telekom-color-additional-yellow-subtle:#60470f;--telekom-color-additional-orange-subtle:#642d07;--telekom-color-additional-red-subtle:#5d0d06}[data-mode="light"]{--telekom-color-text-and-icon-standard:#000000;--telekom-color-text-and-icon-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-disabled:hsla(0, 0%, 0%, 0.4);--telekom-color-text-and-icon-link-standard:#2238df;--telekom-color-text-and-icon-link-hovered:#0819bd;--telekom-color-text-and-icon-link-visited:#6c3bdb;--telekom-color-text-and-icon-link-active:#000d99;--telekom-color-text-and-icon-primary-standard:#e20074;--telekom-color-text-and-icon-primary-hovered:#c00063;--telekom-color-text-and-icon-primary-pressed:#9e0051;--telekom-color-text-and-icon-inverted-standard:#ffffff;--telekom-color-text-and-icon-inverted-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-white-standard:#ffffff;--telekom-color-text-and-icon-white-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-black-standard:#000000;--telekom-color-text-and-icon-black-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-functional-informational:#2238df;--telekom-color-text-and-icon-functional-success:#008653;--telekom-color-text-and-icon-functional-danger:#d91308;--telekom-color-text-and-icon-functional-warning:#b63d00;--telekom-color-text-and-icon-on-subtle-informational:#2238df;--telekom-color-text-and-icon-on-subtle-success:#00774b;--telekom-color-text-and-icon-on-subtle-danger:#c30a03;--telekom-color-text-and-icon-on-subtle-warning:#b63d00;--telekom-color-text-and-icon-on-subtle-violet:#6c3bdb;--telekom-color-text-and-icon-on-subtle-blue:#2238df;--telekom-color-text-and-icon-on-subtle-cyan:#00738A;--telekom-color-text-and-icon-on-subtle-teal:#177364;--telekom-color-text-and-icon-on-subtle-green:#00774b;--telekom-color-text-and-icon-on-subtle-olive:#557317;--telekom-color-text-and-icon-on-subtle-brown:#82581c;--telekom-color-text-and-icon-on-subtle-yellow:#AC5600;--telekom-color-text-and-icon-on-subtle-orange:#b63d00;--telekom-color-text-and-icon-on-subtle-red:#c30a03;--telekom-color-background-canvas:#ffffff;--telekom-color-background-canvas-subtle:#fbfbfb;--telekom-color-background-backdrop:hsla(0, 0%, 0%, 0.5);--telekom-color-background-surface:#ffffff;--telekom-color-background-surface-subtle:#efeff0;--telekom-color-background-surface-highlight:#242426;--telekom-color-primary-standard:#e20074;--telekom-color-primary-hovered:#c00063;--telekom-color-primary-pressed:#9e0051;--telekom-color-ui-base:#ffffff;--telekom-color-ui-subtle:#efeff0;--telekom-color-ui-faint:#dfdfe1;--telekom-color-ui-regular:#929296;--telekom-color-ui-strong:#747478;--telekom-color-ui-extra-strong:#242426;--telekom-color-ui-white:#ffffff;--telekom-color-ui-black:#000000;--telekom-color-ui-disabled:#d0d0d2;--telekom-color-ui-border-standard:hsla(0, 0%, 0%, 0.44);--telekom-color-ui-border-hovered:hsla(0, 0%, 0%, 0.71);--telekom-color-ui-border-pressed:hsla(0, 0%, 0%, 0.71);--telekom-color-ui-border-disabled:hsla(0, 0%, 0%, 0.14);--telekom-color-ui-state-fill-standard:hsla(0, 0%, 0%, 0);--telekom-color-ui-state-fill-hovered:hsla(0, 0%, 0%, 0.07);--telekom-color-ui-state-fill-pressed:hsla(0, 0%, 0%, 0.21);--telekom-color-ui-state-fill-hovered-inverted:hsla(0, 0%, 100%, 0.14);--telekom-color-ui-state-fill-pressed-inverted:hsla(0, 0%, 100%, 0.21);--telekom-color-functional-focus-standard:#2238df;--telekom-color-functional-focus-inverted:#7d94f9;--telekom-color-functional-informational-standard:#2238df;--telekom-color-functional-informational-hovered:#1326cf;--telekom-color-functional-informational-pressed:#0819bd;--telekom-color-functional-informational-subtle:#d3d7f9;--telekom-color-functional-success-standard:#00b367;--telekom-color-functional-success-hovered:#00a461;--telekom-color-functional-success-pressed:#00955a;--telekom-color-functional-success-subtle:#ccf0e1;--telekom-color-functional-danger-standard:#e82010;--telekom-color-functional-danger-hovered:#d91308;--telekom-color-functional-danger-pressed:#c30a03;--telekom-color-functional-danger-subtle:#fad2cf;--telekom-color-functional-warning-standard:#f97012;--telekom-color-functional-warning-hovered:#f46409;--telekom-color-functional-warning-pressed:#e65703;--telekom-color-functional-warning-subtle:#fee2d0;--telekom-color-additional-violet-subtle:#e4dbfb;--telekom-color-additional-blue-subtle:#d3d7f9;--telekom-color-additional-cyan-subtle:#d2eff4;--telekom-color-additional-teal-subtle:#d8f1ec;--telekom-color-additional-green-subtle:#ccf0e1;--telekom-color-additional-olive-subtle:#e8f1d8;--telekom-color-additional-brown-subtle:#efe5d7;--telekom-color-additional-yellow-subtle:#fcefd3;--telekom-color-additional-orange-subtle:#fee2d0;--telekom-color-additional-red-subtle:#fad2cf}}:root{--telekom-spacing-unit-base:0.25rem;--telekom-spacing-unit-x0:calc(var(--telekom-spacing-unit-base) * 0);--telekom-spacing-unit-x025:calc(var(--telekom-spacing-unit-base) * 0.25);--telekom-spacing-unit-x05:calc(var(--telekom-spacing-unit-base) * 0.5);--telekom-spacing-unit-x1:calc(var(--telekom-spacing-unit-base) * 1);--telekom-spacing-unit-x2:calc(var(--telekom-spacing-unit-base) * 2);--telekom-spacing-unit-x3:calc(var(--telekom-spacing-unit-base) * 3);--telekom-spacing-unit-x4:calc(var(--telekom-spacing-unit-base) * 4);--telekom-spacing-unit-x5:calc(var(--telekom-spacing-unit-base) * 5);--telekom-spacing-unit-x6:calc(var(--telekom-spacing-unit-base) * 6);--telekom-spacing-unit-x7:calc(var(--telekom-spacing-unit-base) * 7);--telekom-spacing-unit-x8:calc(var(--telekom-spacing-unit-base) * 8);--telekom-spacing-unit-x9:calc(var(--telekom-spacing-unit-base) * 9);--telekom-spacing-unit-x10:calc(var(--telekom-spacing-unit-base) * 10);--telekom-spacing-unit-x11:calc(var(--telekom-spacing-unit-base) * 11);--telekom-spacing-unit-x12:calc(var(--telekom-spacing-unit-base) * 12);--telekom-spacing-unit-x13:calc(var(--telekom-spacing-unit-base) * 13);--telekom-spacing-unit-x14:calc(var(--telekom-spacing-unit-base) * 14);--telekom-spacing-unit-x15:calc(var(--telekom-spacing-unit-base) * 15);--telekom-spacing-unit-x16:calc(var(--telekom-spacing-unit-base) * 16);--telekom-spacing-unit-x17:calc(var(--telekom-spacing-unit-base) * 17);--telekom-spacing-unit-x18:calc(var(--telekom-spacing-unit-base) * 18);--telekom-spacing-unit-x19:calc(var(--telekom-spacing-unit-base) * 19);--telekom-spacing-unit-x20:calc(var(--telekom-spacing-unit-base) * 20)}.scl-font-variant-body{font:var(--telekom-text-style-body)}.scl-font-variant-body-short{font:var(--telekom-text-style-body);line-height:var(--telekom-typography-line-spacing-tight)}.scl-font-variant-body-large{font:var(--telekom-text-style-lead-text)}.scl-font-variant-smaller{font:var(--telekom-text-style-small)}.scl-font-variant-label{font:var(--telekom-text-style-small)}.scl-font-variant-caption{font:var(--telekom-text-style-caption)}.scl-font-variant-heading-6{font:var(--telekom-text-style-heading-6)}.scl-font-variant-heading-5{font:var(--telekom-text-style-heading-5)}.scl-font-variant-heading-4{font:var(--telekom-text-style-heading-4)}.scl-font-variant-heading-3{font:var(--telekom-text-style-heading-3)}.scl-font-variant-heading-2{font:var(--telekom-text-style-heading-2)}.scl-font-variant-heading-1{font:var(--telekom-text-style-heading-1)}:root{--scl-grid-max-width:1504px}scale-grid,.scl-grid{--spacing-md:var(--spacing-sm);--spacing-lg:var(--spacing-md);--spacing-xl:var(--spacing-lg);--spacing-xxl:var(--spacing-xl);--gutter-y-md:var(--gutter-y-sm);--gutter-y-lg:var(--gutter-y-md);--gutter-y-xl:var(--gutter-y-lg);--gutter-y-xxl:var(--gutter-y-xl);--gutter-x-md:var(--gutter-x-sm);--gutter-x-lg:var(--gutter-x-md);--gutter-x-xl:var(--gutter-x-lg);--gutter-x-xxl:var(--gutter-x-xl);--columns-md:var(--columns-sm);--columns-lg:var(--columns-md);--columns-xl:var(--columns-lg);--columns-xxl:var(--columns-xl);display:grid;box-sizing:content-box;margin-left:auto;margin-right:auto;grid-template-columns:repeat(var(--columns-sm, 4), minmax(0, 1fr));padding-left:var(--spacing-sm, var(--telekom-spacing-unit-x4, 1em));padding-right:var(--spacing-sm, var(--telekom-spacing-unit-x4, 1em));column-gap:var(--gutter-y-sm, var(--telekom-spacing-unit-x8, 2em));row-gap:var(--gutter-x-sm, var(--telekom-spacing-unit-x8, 2em));max-width:none}scale-grid-item,.scl-grid-item{--size-md:var(--size-sm);--size-lg:var(--size-md);--size-xl:var(--size-lg);--size-xxl:var(--size-xl);--offset-md:var(--offset-sm);--offset-lg:var(--offset-md);--offset-xl:var(--offset-lg);--offset-xxl:var(--offset-xl);grid-column:var(--offset-sm, auto) / span var(--size-sm, 4)}@media screen and (min-width: 640px){scale-grid,.scl-grid{grid-template-columns:repeat(var(--columns-md, 8), minmax(0, 1fr));padding-left:var(--spacing-md, var(--telekom-spacing-unit-x4, 1em));padding-right:var(--spacing-md, var(--telekom-spacing-unit-x4, 1em));column-gap:var(--gutter-y-md, var(--telekom-spacing-unit-x8, 2em));row-gap:var(--gutter-x-md, var(--telekom-spacing-unit-x8, 2em))}scale-grid-item,.scl-grid-item{grid-column:var(--offset-md, auto) / span var(--size-md, 4)}}@media screen and (min-width: 1040px){scale-grid,.scl-grid{grid-template-columns:repeat(var(--columns-lg, 16), minmax(0, 1fr));padding-left:var(--spacing-lg, var(--telekom-spacing-unit-x6, 1.5em));padding-right:var(--spacing-lg, var(--telekom-spacing-unit-x6, 1.5em));column-gap:var(--gutter-y-lg, var(--telekom-spacing-unit-x8, 2em));row-gap:var(--gutter-x-lg, var(--telekom-spacing-unit-x8, 2em))}scale-grid-item,.scl-grid-item{grid-column:var(--offset-lg, auto) / span var(--size-lg, 4)}}@media screen and (min-width: 1296px){scale-grid,.scl-grid{grid-template-columns:repeat(var(--columns-xl, 16), minmax(0, 1fr));padding-left:var(--spacing-xl, var(--telekom-spacing-unit-x6, 1.5em));padding-right:var(--spacing-xl, var(--telekom-spacing-unit-x6, 1.5em));column-gap:var(--gutter-y-xl, var(--telekom-spacing-unit-x8, 2em));row-gap:var(--gutter-x-xl, var(--telekom-spacing-unit-x8, 2em))}scale-grid-item,.scl-grid-item{grid-column:var(--offset-xl, auto) / span var(--size-xl, 4)}}@media screen and (min-width: 1680px){scale-grid,.scl-grid{grid-template-columns:repeat(var(--columns-xxl, 16), minmax(0, 1fr));padding-left:var(--spacing-xxl, var(--telekom-spacing-unit-x6, 1.5em));padding-right:var(--spacing-xxl, var(--telekom-spacing-unit-x6, 1.5em));column-gap:var(--gutter-y-xxl, var(--telekom-spacing-unit-x8, 2em));row-gap:var(--gutter-x-xxl, var(--telekom-spacing-unit-x8, 2em));max-width:var(--max-width, var(--scl-grid-max-width))}scale-grid-item,.scl-grid-item{grid-column:var(--offset-xxl, auto) / span var(--size-xxl, 4)}}:root{--scl-z-index-10:10;--scl-z-index-20:20;--scl-z-index-30:30;--scl-z-index-40:40;--scl-z-index-50:50;--scl-z-index-60:60;--scl-z-index-70:70}.scl-toast-stack{position:fixed;top:var(--telekom-spacing-composition-space-06);inset-inline-end:var(--telekom-spacing-composition-space-06);z-index:var(--scl-z-index-70);z-index:100;max-height:100%;overflow:visible;display:flex;flex-direction:column;gap:var(--telekom-spacing-composition-space-04)}
\ No newline at end of file
+    url('./fonts/TeleNeoWeb/TeleNeoWeb-ThinItalic.woff2') format('woff2');font-display:swap}:root{font-family:'TeleNeoWeb', sans-serif}:root{--scl-spacing-1:0.0625rem;--scl-spacing-2:0.125rem;--scl-spacing-4:0.25rem;--scl-spacing-8:0.5rem;--scl-spacing-12:0.75rem;--scl-spacing-16:1rem;--scl-spacing-24:1.5rem;--scl-spacing-32:2rem;--scl-spacing-40:2.5rem;--scl-spacing-48:3rem;--scl-spacing-64:4rem;--scl-spacing-80:5rem;--scl-font-family-sans:TeleNeoWeb, sans-serif;--scl-font-family-mono:monospace;--scl-font-size-10:0.625rem;--scl-font-size-12:0.75rem;--scl-font-size-14:0.875rem;--scl-font-size-16:1rem;--scl-font-size-20:1.25rem;--scl-font-size-24:1.5rem;--scl-font-size-32:2rem;--scl-font-size-40:2.5rem;--scl-font-size-56:3.5rem;--scl-font-weight-thin:200;--scl-font-weight-regular:400;--scl-font-weight-medium:500;--scl-font-weight-bold:700;--scl-font-weight-extrabold:800;--scl-font-line-height-114:114%;--scl-font-line-height-120:120%;--scl-font-line-height-125:125%;--scl-font-line-height-133:133%;--scl-font-line-height-150:150%;--scl-font-line-height-160:160%;--scl-font-variant-body-family:TeleNeoWeb, sans-serif;--scl-font-variant-body-size:1rem;--scl-font-variant-body-weight:500;--scl-font-variant-body-line-height:150%;--scl-font-variant-body-letter-spacing:normal;--scl-font-variant-body-short-family:TeleNeoWeb, sans-serif;--scl-font-variant-body-short-size:1rem;--scl-font-variant-body-short-weight:500;--scl-font-variant-body-short-line-height:125%;--scl-font-variant-body-short-letter-spacing:normal;--scl-font-variant-body-large-family:TeleNeoWeb, sans-serif;--scl-font-variant-body-large-size:1.25rem;--scl-font-variant-body-large-weight:500;--scl-font-variant-body-large-line-height:160%;--scl-font-variant-body-large-letter-spacing:normal;--scl-font-variant-smaller-family:TeleNeoWeb, sans-serif;--scl-font-variant-smaller-size:0.75rem;--scl-font-variant-smaller-weight:500;--scl-font-variant-smaller-line-height:125%;--scl-font-variant-smaller-letter-spacing:normal;--scl-font-variant-label-family:TeleNeoWeb, sans-serif;--scl-font-variant-label-size:0.75rem;--scl-font-variant-label-weight:500;--scl-font-variant-label-line-height:120%;--scl-font-variant-label-letter-spacing:normal;--scl-font-variant-caption-family:TeleNeoWeb, sans-serif;--scl-font-variant-caption-size:0.75rem;--scl-font-variant-caption-weight:500;--scl-font-variant-caption-line-height:133%;--scl-font-variant-caption-letter-spacing:normal;--scl-font-variant-heading-6-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-6-size:1rem;--scl-font-variant-heading-6-weight:700;--scl-font-variant-heading-6-line-height:150%;--scl-font-variant-heading-6-letter-spacing:normal;--scl-font-variant-heading-5-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-5-size:1.25rem;--scl-font-variant-heading-5-weight:800;--scl-font-variant-heading-5-line-height:125%;--scl-font-variant-heading-5-letter-spacing:normal;--scl-font-variant-heading-4-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-4-size:1.5rem;--scl-font-variant-heading-4-weight:800;--scl-font-variant-heading-4-line-height:133%;--scl-font-variant-heading-4-letter-spacing:normal;--scl-font-variant-heading-3-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-3-size:2rem;--scl-font-variant-heading-3-weight:800;--scl-font-variant-heading-3-line-height:125%;--scl-font-variant-heading-3-letter-spacing:normal;--scl-font-variant-heading-2-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-2-size:2.5rem;--scl-font-variant-heading-2-weight:800;--scl-font-variant-heading-2-line-height:120%;--scl-font-variant-heading-2-letter-spacing:normal;--scl-font-variant-heading-1-family:TeleNeoWeb, sans-serif;--scl-font-variant-heading-1-size:3.5rem;--scl-font-variant-heading-1-weight:800;--scl-font-variant-heading-1-line-height:114%;--scl-font-variant-heading-1-letter-spacing:normal;--scl-color-primary:hsl(329.20000000000005, 100%, 44.3%);--scl-color-black:hsl(0, 0%, 0%);--scl-color-white:hsl(0, 0%, 100%);--scl-color-grey-0:hsl(0, 0%, 94.9%);--scl-color-grey-10:hsl(0, 0%, 89.8%);--scl-color-grey-20:hsl(0, 0%, 80%);--scl-color-grey-30:hsl(0, 0%, 69.8%);--scl-color-grey-40:hsl(0, 0%, 60%);--scl-color-grey-50:hsl(0, 0%, 49.8%);--scl-color-grey-60:hsl(0, 0%, 40%);--scl-color-grey-70:hsl(0, 0%, 29.8%);--scl-color-grey-80:hsl(0, 0%, 20%);--scl-color-grey-90:hsl(0, 0%, 9.8%);--scl-color-grey-100:hsl(0, 0%, 0%);--scl-color-orange-0:hsl(54.39999999999998, 100%, 93.7%);--scl-color-orange-10:hsl(48.39999999999998, 100%, 88.8%);--scl-color-orange-20:hsl(43.69999999999999, 100%, 84.1%);--scl-color-orange-30:hsl(38.69999999999999, 100%, 79.6%);--scl-color-orange-40:hsl(33.5, 100%, 75.1%);--scl-color-orange-50:hsl(29, 100%, 70.8%);--scl-color-orange-60:hsl(24.80000000000001, 96.5%, 66.1%);--scl-color-orange-70:hsl(17.30000000000001, 71.4%, 56.1%);--scl-color-orange-80:hsl(17.30000000000001, 72.3%, 39.6%);--scl-color-orange-90:hsl(17.30000000000001, 88.8%, 31.4%);--scl-color-orange-100:hsl(11.399999999999977, 86.6%, 26.3%);--scl-color-red-0:hsl(353.79999999999995, 100%, 88.6%);--scl-color-red-10:hsl(351.5, 100%, 83.3%);--scl-color-red-20:hsl(350.4, 98.1%, 78.8%);--scl-color-red-30:hsl(350.6, 91%, 73.9%);--scl-color-red-40:hsl(350.4, 85.1%, 68.4%);--scl-color-red-50:hsl(350.29999999999995, 82.8%, 63.5%);--scl-color-red-60:hsl(351.20000000000005, 82.6%, 59.4%);--scl-color-red-70:hsl(349.70000000000005, 69%, 50.6%);--scl-color-red-80:hsl(348.9, 74.9%, 43.7%);--scl-color-red-90:hsl(347.1, 84%, 36.9%);--scl-color-red-100:hsl(345.9, 100%, 30%);--scl-color-blue-0:hsl(190.20000000000005, 100%, 92%);--scl-color-blue-10:hsl(196.20000000000005, 100%, 85.5%);--scl-color-blue-20:hsl(200.89999999999998, 100%, 79.2%);--scl-color-blue-30:hsl(206, 100%, 73.3%);--scl-color-blue-40:hsl(210.70000000000005, 100%, 67.5%);--scl-color-blue-50:hsl(215.60000000000002, 100%, 62%);--scl-color-blue-60:hsl(220, 100%, 56.5%);--scl-color-blue-70:hsl(227.39999999999998, 89%, 46.3%);--scl-color-blue-80:hsl(236.5, 100%, 37.5%);--scl-color-blue-90:hsl(241.10000000000002, 100%, 31.2%);--scl-color-blue-100:hsl(249.39999999999998, 100%, 25.1%);--scl-color-teal-0:hsl(176.10000000000002, 63.3%, 90.4%);--scl-color-teal-10:hsl(178.89999999999998, 60%, 82.4%);--scl-color-teal-20:hsl(180, 58.5%, 74.5%);--scl-color-teal-30:hsl(181.20000000000005, 57.6%, 66.7%);--scl-color-teal-40:hsl(182.10000000000002, 55.2%, 58.8%);--scl-color-teal-50:hsl(183.60000000000002, 53.8%, 50.8%);--scl-color-teal-60:hsl(184.79999999999995, 68.9%, 42.9%);--scl-color-teal-70:hsl(182.89999999999998, 80.1%, 35.5%);--scl-color-teal-80:hsl(180.5, 91.5%, 27.8%);--scl-color-teal-90:hsl(178.89999999999998, 100%, 20.6%);--scl-color-teal-100:hsl(176.5, 100%, 16.9%);--scl-color-green-0:hsl(78.30000000000001, 59%, 92.4%);--scl-color-green-10:hsl(82.5, 55.6%, 85.9%);--scl-color-green-20:hsl(86.30000000000001, 55.3%, 79.8%);--scl-color-green-30:hsl(90.39999999999998, 52.6%, 73.5%);--scl-color-green-40:hsl(95.30000000000001, 50.9%, 67.3%);--scl-color-green-50:hsl(98.80000000000001, 49.7%, 61%);--scl-color-green-60:hsl(103.19999999999999, 48.1%, 54.7%);--scl-color-green-70:hsl(111.5, 46.1%, 48%);--scl-color-green-80:hsl(120, 52.4%, 41.2%);--scl-color-green-90:hsl(127.60000000000002, 58.9%, 34.3%);--scl-color-green-100:hsl(136.3, 65.7%, 27.5%);--scl-color-clay-0:hsl(15.800000000000011, 42.2%, 91.2%);--scl-color-clay-10:hsl(19.399999999999977, 46.3%, 86.9%);--scl-color-clay-20:hsl(20.899999999999977, 49.4%, 82.9%);--scl-color-clay-30:hsl(21.899999999999977, 48.1%, 78.8%);--scl-color-clay-40:hsl(22.30000000000001, 48.4%, 74.9%);--scl-color-clay-50:hsl(22.80000000000001, 48.3%, 71.2%);--scl-color-clay-60:hsl(25.100000000000023, 46.7%, 66.9%);--scl-color-clay-70:hsl(22.899999999999977, 35.8%, 58.4%);--scl-color-clay-80:hsl(21.399999999999977, 27.6%, 50.2%);--scl-color-clay-90:hsl(18.899999999999977, 26.8%, 41.8%);--scl-color-clay-100:hsl(18.600000000000023, 24.7%, 33.3%);--scl-color-rose-0:hsl(338.79999999999995, 48.6%, 93.1%);--scl-color-rose-10:hsl(341.4, 46%, 87.6%);--scl-color-rose-20:hsl(341.4, 45.7%, 82%);--scl-color-rose-30:hsl(341.9, 43.8%, 76.3%);--scl-color-rose-40:hsl(343.79999999999995, 42.3%, 70.8%);--scl-color-rose-50:hsl(346, 41.2%, 65.3%);--scl-color-rose-60:hsl(346.79999999999995, 39.8%, 59.6%);--scl-color-rose-70:hsl(344.79999999999995, 31.5%, 49.2%);--scl-color-rose-80:hsl(342.9, 35.4%, 38.8%);--scl-color-rose-90:hsl(340.29999999999995, 40.3%, 28.2%);--scl-color-rose-100:hsl(338.4, 44.6%, 22%);--scl-color-lilac-0:hsl(307.5, 33.3%, 95.3%);--scl-color-lilac-10:hsl(310, 27.3%, 91.4%);--scl-color-lilac-20:hsl(310.6, 28.8%, 88.4%);--scl-color-lilac-30:hsl(310, 30.8%, 84.7%);--scl-color-lilac-40:hsl(300, 28.2%, 77.1%);--scl-color-lilac-50:hsl(293.6, 30.7%, 70%);--scl-color-lilac-60:hsl(292.9, 30.9%, 62.5%);--scl-color-lilac-70:hsl(292.79999999999995, 24.4%, 53.3%);--scl-color-lilac-80:hsl(293.20000000000005, 23.8%, 43.7%);--scl-color-lilac-90:hsl(291.79999999999995, 29.1%, 34.3%);--scl-color-lilac-100:hsl(291.1, 37%, 24.9%);--scl-color-pigeon-0:hsl(226.20000000000005, 41.9%, 93.9%);--scl-color-pigeon-10:hsl(227.5, 42.9%, 89%);--scl-color-pigeon-20:hsl(227.60000000000002, 41.5%, 83.9%);--scl-color-pigeon-30:hsl(228.60000000000002, 38.9%, 78.8%);--scl-color-pigeon-40:hsl(230.60000000000002, 38.3%, 73.9%);--scl-color-pigeon-50:hsl(230.79999999999995, 37.1%, 68.8%);--scl-color-pigeon-60:hsl(232.70000000000005, 35.9%, 63.9%);--scl-color-pigeon-70:hsl(239.10000000000002, 29.8%, 55.9%);--scl-color-pigeon-80:hsl(244.60000000000002, 26.5%, 48%);--scl-color-pigeon-90:hsl(251.60000000000002, 30.4%, 40%);--scl-color-pigeon-100:hsl(257.5, 33.7%, 32%);--scl-color-neptune-0:hsl(176, 29.4%, 90%);--scl-color-neptune-10:hsl(180, 31.6%, 85.1%);--scl-color-neptune-20:hsl(178.29999999999995, 34.7%, 80.2%);--scl-color-neptune-30:hsl(180, 34.4%, 74.9%);--scl-color-neptune-40:hsl(182.29999999999995, 34.6%, 70%);--scl-color-neptune-50:hsl(184, 33.7%, 65.1%);--scl-color-neptune-60:hsl(184.39999999999998, 33.3%, 60%);--scl-color-neptune-70:hsl(182.70000000000005, 27.5%, 52.9%);--scl-color-neptune-80:hsl(180, 25.3%, 45.7%);--scl-color-neptune-90:hsl(178.79999999999995, 24.9%, 38.6%);--scl-color-neptune-100:hsl(178.20000000000005, 21.2%, 31.4%);--scl-color-olive-0:hsl(95, 33.3%, 92.9%);--scl-color-olive-10:hsl(96, 30.3%, 87.1%);--scl-color-olive-20:hsl(98.60000000000002, 29.8%, 81.6%);--scl-color-olive-30:hsl(100, 29%, 75.7%);--scl-color-olive-40:hsl(101.89999999999998, 28.1%, 70%);--scl-color-olive-50:hsl(103.19999999999999, 27.5%, 64.3%);--scl-color-olive-60:hsl(103.89999999999998, 26.4%, 58.4%);--scl-color-olive-70:hsl(102.19999999999999, 22%, 48.2%);--scl-color-olive-80:hsl(100, 24.7%, 38%);--scl-color-olive-90:hsl(97.5, 28.2%, 27.8%);--scl-color-olive-100:hsl(97.69999999999999, 32.7%, 21%);--scl-color-primary-hover:hsl(329.29999999999995, 95.2%, 50.6%);--scl-color-primary-active:hsl(329.29999999999995, 100%, 39.8%);--scl-color-focus:hsl(215.60000000000002, 100%, 62%);--scl-color-text-standard:hsl(0, 0%, 9.8%);--scl-color-text-additional:hsl(0, 0%, 40%);--scl-color-text-link:hsl(227.39999999999998, 89%, 46.3%);--scl-color-text-link-hover:hsl(236.5, 100%, 37.5%);--scl-color-text-link-active:hsl(220, 100%, 56.5%);--scl-color-text-link-visited:hsl(227.39999999999998, 89%, 46.3%);--scl-color-text-info:hsl(227.39999999999998, 89%, 46.3%);--scl-color-text-disabled:hsl(0, 0%, 49.8%);--scl-color-text-success:hsl(136.3, 65.7%, 27.5%);--scl-color-text-error:hsl(349.70000000000005, 69%, 50.6%);--scl-color-background-standard:hsl(0, 0%, 100%);--scl-color-background-light:hsl(0, 0%, 94.9%);--scl-color-background-darker:hsl(0, 0%, 80%);--scl-color-background-overlay:hsla(0, 0%, 42.4%, 0.7);--scl-color-background-disabled:hsl(0, 0%, 80%);--scl-color-background-success:hsl(136.3, 65.7%, 27.5%);--scl-color-background-error:hsl(349.70000000000005, 69%, 50.6%);--scl-color-functional-red:hsl(349.70000000000005, 69%, 50.6%);--scl-color-functional-green:hsl(136.3, 65.7%, 27.5%);--scl-color-functional-blue:hsl(227.39999999999998, 89%, 46.3%);--scl-shadow-level-0:0px 2px 8px 0px hsla(0, 0%, 0%, 0.1), 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-1:0px 4px 16px 0px hsla(0, 0%, 0%, 0.1), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-2:0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-3:0px 12px 48px 0px hsla(0, 0%, 0%, 0.1), 0px 6px 12px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-4:0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-5:0px 20px 80px 0px hsla(0, 0%, 0%, 0.1), 0px 10px 20px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-1-hover:0px 6px 24px 0px hsla(0, 0%, 0%, 0.1), 0px 3px 6px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-1-active:0px 2px 8px 0px hsla(0, 0%, 0%, 0.1), 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-2-hover:0px 10px 40px 0px hsla(0, 0%, 0%, 0.1), 0px 5px 10px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-2-active:0px 6px 24px 0px hsla(0, 0%, 0%, 0.1), 0px 3px 6px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-3-hover:0px 14px 56px 0px hsla(0, 0%, 0%, 0.1), 0px 7px 14px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-3-active:0px 10px 40px 0px hsla(0, 0%, 0%, 0.1), 0px 5px 10px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-4-hover:0px 18px 72px 0px hsla(0, 0%, 0%, 0.1), 0px 9px 18px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-4-active:0px 14px 56px 0px hsla(0, 0%, 0%, 0.1), 0px 7px 14px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-5-hover:0px 22px 88px 0px hsla(0, 0%, 0%, 0.1), 0px 11px 22px 0px hsla(0, 0%, 0%, 0.1);--scl-shadow-level-5-active:0px 18px 72px 0px hsla(0, 0%, 0%, 0.1), 0px 9px 18px 0px hsla(0, 0%, 0%, 0.1);--scl-radius-1:1px;--scl-radius-2:2px;--scl-radius-4:4px;--scl-radius-8:8px;--scl-radius-12:12px;--scl-opacity-50:0.5;--scl-motion-duration-immediate:100ms;--scl-motion-duration-fast:200ms;--scl-motion-duration-slower:600ms;--scl-motion-duration-deliberate:800ms;--scl-motion-easing-standard:cubic-bezier(0.42, 0, 0.58, 1);--scl-motion-easing-enter:cubic-bezier(0.390, 0.575, 0.565, 1);--scl-z-index-10:10;--scl-z-index-20:20;--scl-z-index-30:30;--scl-z-index-40:40;--scl-z-index-50:50;--scl-z-index-60:60;--scl-z-index-70:70}.scl-font-variant-body{font-family:var(--scl-font-variant-body-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-body-size, 1rem);font-weight:var(--scl-font-variant-body-weight, 500);line-height:var(--scl-font-variant-body-line-height, 150%);letter-spacing:var(--scl-font-variant-body-letter-spacing, normal)}.scl-font-variant-body-short{font-family:var(--scl-font-variant-body-short-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-body-short-size, 1rem);font-weight:var(--scl-font-variant-body-short-weight, 500);line-height:var(--scl-font-variant-body-short-line-height, 125%);letter-spacing:var(--scl-font-variant-body-short-letter-spacing, normal)}.scl-font-variant-body-large{font-family:var(--scl-font-variant-body-large-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-body-large-size, 1.25rem);font-weight:var(--scl-font-variant-body-large-weight, 500);line-height:var(--scl-font-variant-body-large-line-height, 160%);letter-spacing:var(--scl-font-variant-body-large-letter-spacing, normal)}.scl-font-variant-smaller{font-family:var(--scl-font-variant-smaller-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-smaller-size, 0.75rem);font-weight:var(--scl-font-variant-smaller-weight, 500);line-height:var(--scl-font-variant-smaller-line-height, 125%);letter-spacing:var(--scl-font-variant-smaller-letter-spacing, normal)}.scl-font-variant-label{font-family:var(--scl-font-variant-label-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-label-size, 0.75rem);font-weight:var(--scl-font-variant-label-weight, 500);line-height:var(--scl-font-variant-label-line-height, 120%);letter-spacing:var(--scl-font-variant-label-letter-spacing, normal)}.scl-font-variant-caption{font-family:var(--scl-font-variant-caption-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-caption-size, 0.75rem);font-weight:var(--scl-font-variant-caption-weight, 500);line-height:var(--scl-font-variant-caption-line-height, 133%);letter-spacing:var(--scl-font-variant-caption-letter-spacing, normal)}.scl-font-variant-heading-6{font-family:var(--scl-font-variant-heading-6-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-6-size, 1rem);font-weight:var(--scl-font-variant-heading-6-weight, 700);line-height:var(--scl-font-variant-heading-6-line-height, 150%);letter-spacing:var(--scl-font-variant-heading-6-letter-spacing, normal)}.scl-font-variant-heading-5{font-family:var(--scl-font-variant-heading-5-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-5-size, 1.25rem);font-weight:var(--scl-font-variant-heading-5-weight, 800);line-height:var(--scl-font-variant-heading-5-line-height, 125%);letter-spacing:var(--scl-font-variant-heading-5-letter-spacing, normal)}.scl-font-variant-heading-4{font-family:var(--scl-font-variant-heading-4-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-4-size, 1.5rem);font-weight:var(--scl-font-variant-heading-4-weight, 800);line-height:var(--scl-font-variant-heading-4-line-height, 133%);letter-spacing:var(--scl-font-variant-heading-4-letter-spacing, normal)}.scl-font-variant-heading-3{font-family:var(--scl-font-variant-heading-3-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-3-size, 2rem);font-weight:var(--scl-font-variant-heading-3-weight, 800);line-height:var(--scl-font-variant-heading-3-line-height, 125%);letter-spacing:var(--scl-font-variant-heading-3-letter-spacing, normal)}.scl-font-variant-heading-2{font-family:var(--scl-font-variant-heading-2-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-2-size, 2.5rem);font-weight:var(--scl-font-variant-heading-2-weight, 800);line-height:var(--scl-font-variant-heading-2-line-height, 120%);letter-spacing:var(--scl-font-variant-heading-2-letter-spacing, normal)}.scl-font-variant-heading-1{font-family:var(--scl-font-variant-heading-1-family, TeleNeoWeb, sans-serif);font-size:var(--scl-font-variant-heading-1-size, 3.5rem);font-weight:var(--scl-font-variant-heading-1-weight, 800);line-height:var(--scl-font-variant-heading-1-line-height, 114%);letter-spacing:var(--scl-font-variant-heading-1-letter-spacing, normal)}:root{--telekom-color-text-and-icon-standard:#000000;--telekom-color-text-and-icon-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-disabled:hsla(0, 0%, 0%, 0.4);--telekom-color-text-and-icon-link-standard:#2238df;--telekom-color-text-and-icon-link-hovered:#0819bd;--telekom-color-text-and-icon-link-visited:#6c3bdb;--telekom-color-text-and-icon-link-active:#000d99;--telekom-color-text-and-icon-primary-standard:#e20074;--telekom-color-text-and-icon-primary-hovered:#c00063;--telekom-color-text-and-icon-primary-pressed:#9e0051;--telekom-color-text-and-icon-inverted-standard:#ffffff;--telekom-color-text-and-icon-inverted-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-white-standard:#ffffff;--telekom-color-text-and-icon-white-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-black-standard:#000000;--telekom-color-text-and-icon-black-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-functional-informational:#2238df;--telekom-color-text-and-icon-functional-success:#008653;--telekom-color-text-and-icon-functional-danger:#d91308;--telekom-color-text-and-icon-functional-warning:#b63d00;--telekom-color-text-and-icon-on-subtle-informational:#2238df;--telekom-color-text-and-icon-on-subtle-success:#00774b;--telekom-color-text-and-icon-on-subtle-danger:#c30a03;--telekom-color-text-and-icon-on-subtle-warning:#b63d00;--telekom-color-text-and-icon-on-subtle-violet:#6c3bdb;--telekom-color-text-and-icon-on-subtle-blue:#2238df;--telekom-color-text-and-icon-on-subtle-cyan:#00738A;--telekom-color-text-and-icon-on-subtle-teal:#177364;--telekom-color-text-and-icon-on-subtle-green:#00774b;--telekom-color-text-and-icon-on-subtle-olive:#557317;--telekom-color-text-and-icon-on-subtle-brown:#82581c;--telekom-color-text-and-icon-on-subtle-yellow:#AC5600;--telekom-color-text-and-icon-on-subtle-orange:#b63d00;--telekom-color-text-and-icon-on-subtle-red:#c30a03;--telekom-color-background-canvas:#ffffff;--telekom-color-background-canvas-subtle:#fbfbfb;--telekom-color-background-backdrop:hsla(0, 0%, 0%, 0.5);--telekom-color-background-surface:#ffffff;--telekom-color-background-surface-subtle:#efeff0;--telekom-color-background-surface-highlight:#242426;--telekom-color-primary-standard:#e20074;--telekom-color-primary-hovered:#c00063;--telekom-color-primary-pressed:#9e0051;--telekom-color-ui-base:#ffffff;--telekom-color-ui-subtle:#efeff0;--telekom-color-ui-faint:#dfdfe1;--telekom-color-ui-regular:#929296;--telekom-color-ui-strong:#747478;--telekom-color-ui-extra-strong:#242426;--telekom-color-ui-white:#ffffff;--telekom-color-ui-black:#000000;--telekom-color-ui-disabled:#d0d0d2;--telekom-color-ui-border-standard:hsla(0, 0%, 0%, 0.44);--telekom-color-ui-border-hovered:hsla(0, 0%, 0%, 0.71);--telekom-color-ui-border-pressed:hsla(0, 0%, 0%, 0.71);--telekom-color-ui-border-disabled:hsla(0, 0%, 0%, 0.14);--telekom-color-ui-state-fill-standard:hsla(0, 0%, 0%, 0);--telekom-color-ui-state-fill-hovered:hsla(0, 0%, 0%, 0.07);--telekom-color-ui-state-fill-pressed:hsla(0, 0%, 0%, 0.21);--telekom-color-ui-state-fill-hovered-inverted:hsla(0, 0%, 100%, 0.14);--telekom-color-ui-state-fill-pressed-inverted:hsla(0, 0%, 100%, 0.21);--telekom-color-functional-focus-standard:#2238df;--telekom-color-functional-focus-inverted:#7d94f9;--telekom-color-functional-focus-on-dark-background:#7d94f9;--telekom-color-functional-focus-on-light-background:#2238df;--telekom-color-functional-informational-standard:#2238df;--telekom-color-functional-informational-hovered:#1326cf;--telekom-color-functional-informational-pressed:#0819bd;--telekom-color-functional-informational-subtle:#d3d7f9;--telekom-color-functional-success-standard:#00b367;--telekom-color-functional-success-hovered:#00a461;--telekom-color-functional-success-pressed:#00955a;--telekom-color-functional-success-subtle:#ccf0e1;--telekom-color-functional-danger-standard:#e82010;--telekom-color-functional-danger-hovered:#d91308;--telekom-color-functional-danger-pressed:#c30a03;--telekom-color-functional-danger-subtle:#fad2cf;--telekom-color-functional-warning-standard:#f97012;--telekom-color-functional-warning-hovered:#f46409;--telekom-color-functional-warning-pressed:#e65703;--telekom-color-functional-warning-subtle:#fee2d0;--telekom-color-additional-violet-0:#e2d9ff;--telekom-color-additional-violet-100:#c8b5fd;--telekom-color-additional-violet-200:#af93fb;--telekom-color-additional-violet-300:#9a75f8;--telekom-color-additional-violet-400:#885df2;--telekom-color-additional-violet-500:#794ae9;--telekom-color-additional-violet-600:#6c3bdb;--telekom-color-additional-violet-700:#5e2ec6;--telekom-color-additional-violet-800:#5024ab;--telekom-color-additional-violet-900:#411c8c;--telekom-color-additional-violet-subtle:#e4dbfb;--telekom-color-additional-blue-0:#d9e2ff;--telekom-color-additional-blue-100:#aabcfd;--telekom-color-additional-blue-200:#7d94f9;--telekom-color-additional-blue-300:#576ff3;--telekom-color-additional-blue-400:#3950ea;--telekom-color-additional-blue-500:#2238df;--telekom-color-additional-blue-600:#1326cf;--telekom-color-additional-blue-700:#0819bd;--telekom-color-additional-blue-800:#0311ab;--telekom-color-additional-blue-900:#000d99;--telekom-color-additional-blue-subtle:#d3d7f9;--telekom-color-additional-cyan-0:#d9fcff;--telekom-color-additional-cyan-100:#a4ecf4;--telekom-color-additional-cyan-200:#75dbe8;--telekom-color-additional-cyan-300:#4fcadd;--telekom-color-additional-cyan-400:#33bbd2;--telekom-color-additional-cyan-500:#1eadc6;--telekom-color-additional-cyan-600:#11a0bb;--telekom-color-additional-cyan-700:#0894b0;--telekom-color-additional-cyan-800:#038aa4;--telekom-color-additional-cyan-900:#008099;--telekom-color-additional-cyan-subtle:#d2eff4;--telekom-color-additional-teal-0:#d9fff2;--telekom-color-additional-teal-100:#acf1dc;--telekom-color-additional-teal-200:#85e3ca;--telekom-color-additional-teal-300:#65d5ba;--telekom-color-additional-teal-400:#4cc6ac;--telekom-color-additional-teal-500:#3ab89f;--telekom-color-additional-teal-600:#2eaa93;--telekom-color-additional-teal-700:#259c87;--telekom-color-additional-teal-800:#1e8e7b;--telekom-color-additional-teal-900:#19806f;--telekom-color-additional-teal-subtle:#d8f1ec;--telekom-color-additional-green-0:#dbffed;--telekom-color-additional-green-100:#8ff0c1;--telekom-color-additional-green-200:#4ee19c;--telekom-color-additional-green-300:#1bd27f;--telekom-color-additional-green-400:#00c26d;--telekom-color-additional-green-500:#00b367;--telekom-color-additional-green-600:#00a461;--telekom-color-additional-green-700:#00955a;--telekom-color-additional-green-800:#008653;--telekom-color-additional-green-900:#00774b;--telekom-color-additional-green-subtle:#ccf0e1;--telekom-color-additional-olive-0:#f2ffd9;--telekom-color-additional-olive-100:#daf1ac;--telekom-color-additional-olive-200:#c3e385;--telekom-color-additional-olive-300:#afd565;--telekom-color-additional-olive-400:#9ec64c;--telekom-color-additional-olive-500:#8eb83a;--telekom-color-additional-olive-600:#81aa2e;--telekom-color-additional-olive-700:#749c25;--telekom-color-additional-olive-800:#688e1e;--telekom-color-additional-olive-900:#5e8019;--telekom-color-additional-olive-subtle:#e8f1d8;--telekom-color-additional-brown-0:#ffefd9;--telekom-color-additional-brown-100:#efd3ab;--telekom-color-additional-brown-200:#e0b983;--telekom-color-additional-brown-300:#d0a363;--telekom-color-additional-brown-400:#c18f4a;--telekom-color-additional-brown-500:#b17f38;--telekom-color-additional-brown-600:#a2702b;--telekom-color-additional-brown-700:#926322;--telekom-color-additional-brown-800:#82581c;--telekom-color-additional-brown-900:#734d17;--telekom-color-additional-brown-subtle:#efe5d7;--telekom-color-additional-yellow-0:#fffcd9;--telekom-color-additional-yellow-100:#fcf1aa;--telekom-color-additional-yellow-200:#f9e47e;--telekom-color-additional-yellow-300:#f7d358;--telekom-color-additional-yellow-400:#f4c23b;--telekom-color-additional-yellow-500:#f1b125;--telekom-color-additional-yellow-600:#eea015;--telekom-color-additional-yellow-700:#eb900b;--telekom-color-additional-yellow-800:#e88104;--telekom-color-additional-yellow-900:#e67300;--telekom-color-additional-yellow-subtle:#fcefd3;--telekom-color-additional-orange-0:#ffe6cc;--telekom-color-additional-orange-100:#ffc48e;--telekom-color-additional-orange-200:#fea75b;--telekom-color-additional-orange-300:#fd9038;--telekom-color-additional-orange-400:#fc7e21;--telekom-color-additional-orange-500:#f97012;--telekom-color-additional-orange-600:#f46409;--telekom-color-additional-orange-700:#e65703;--telekom-color-additional-orange-800:#cd4901;--telekom-color-additional-orange-900:#b63d00;--telekom-color-additional-orange-subtle:#fee2d0;--telekom-color-additional-red-0:#ffcabf;--telekom-color-additional-red-100:#fd9684;--telekom-color-additional-red-200:#fb6a55;--telekom-color-additional-red-300:#f84934;--telekom-color-additional-red-400:#f2321e;--telekom-color-additional-red-500:#e82010;--telekom-color-additional-red-600:#d91308;--telekom-color-additional-red-700:#c30a03;--telekom-color-additional-red-800:#a70401;--telekom-color-additional-red-900:#870000;--telekom-color-additional-red-subtle:#fad2cf;--telekom-radius-none:0rem;--telekom-radius-extra-small:0.125rem;--telekom-radius-small:0.25rem;--telekom-radius-medium-small:0.375rem;--telekom-radius-standard:0.5rem;--telekom-radius-large:0.75rem;--telekom-radius-pill:62.4375rem;--telekom-radius-circle:50%;--telekom-size-icon-extra-small:0.75rem;--telekom-size-icon-small:1rem;--telekom-size-icon-medium:1.25rem;--telekom-size-icon-large:1.5rem;--telekom-size-icon-extra-large:3rem;--telekom-size-form-element-height-small:2rem;--telekom-size-form-element-height-standard:2.75rem;--telekom-size-generic-size-01:0.25rem;--telekom-size-generic-size-02:0.375rem;--telekom-size-generic-size-03:0.5rem;--telekom-size-generic-size-04:0.75rem;--telekom-size-generic-size-05:1rem;--telekom-size-generic-size-06:1.25rem;--telekom-size-generic-size-07:1.5rem;--telekom-size-generic-size-08:1.75rem;--telekom-size-generic-size-09:2rem;--telekom-size-generic-size-10:2.25rem;--telekom-size-generic-size-11:2.5rem;--telekom-size-generic-size-12:2.75rem;--telekom-size-generic-size-13:3rem;--telekom-size-generic-size-14:3.25rem;--telekom-size-generic-size-15:3.5rem;--telekom-size-generic-size-16:4rem;--telekom-size-generic-size-17:4.5rem;--telekom-size-generic-size-18:5rem;--telekom-size-generic-size-19:6rem;--telekom-size-generic-size-20:8rem;--telekom-size-generic-size-21:12rem;--telekom-size-generic-size-22:16rem;--telekom-size-generic-size-23:20rem;--telekom-size-generic-size-24:28rem;--telekom-size-generic-size-25:36rem;--telekom-line-weight-standard:0.0625rem;--telekom-line-weight-highlight:0.125rem;--telekom-line-weight-bold:0.25rem;--telekom-motion-duration-instant:0ms;--telekom-motion-duration-immediate:100ms;--telekom-motion-duration-transition:200ms;--telekom-motion-duration-animation:600ms;--telekom-motion-duration-animation-deliberate:800ms;--telekom-motion-easing-standard:cubic-bezier(0.4,0,0.6,1);--telekom-motion-easing-enter:cubic-bezier(0.4,0.6,0.6,1);--telekom-motion-easing-leave:cubic-bezier(0.4,0,1,1);--telekom-opacity-invisible:0;--telekom-opacity-transparent:0.35;--telekom-opacity-semi-transparent:0.5;--telekom-opacity-translucent:0.75;--telekom-opacity-semi-translucent:0.85;--telekom-opacity-solid:1;--telekom-shadow-raised-standard:0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-raised-hover:0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-raised-pressed:0px 4px 16px 0px hsla(0, 0%, 0%, 0.1), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-floating-standard:0px 12px 48px 0px hsla(0, 0%, 0%, 0.1), 0px 6px 12px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-floating-hover:0px 24px 96px 0px hsla(0, 0%, 0%, 0.1), 0px 12px 24px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-floating-pressed:0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-top:0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-overlay:0px 24px 96px 0px hsla(0, 0%, 0%, 0.1), 0px 12px 24px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-intense:0px 0px 2px 0px hsla(0, 0%, 0%, 0.24), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.24), 0px 4px 12px 0px hsla(0, 0%, 0%, 0.26);--telekom-shadow-app-bar-top-raised:0px 1px 0px 0px hsla(0, 0%, 0%, 0.05), 0px 2px 8px 0px hsla(0, 0%, 0%, 0.05);--telekom-shadow-app-bar-top-flat:0px 1px 0px 0px hsla(0, 0%, 0%, 0.1);--telekom-shadow-app-bar-bottom-raised:0px -1px 0px 0px hsla(0, 0%, 0%, 0.05), 0px -2px 8px 0px hsla(0, 0%, 0%, 0.05);--telekom-shadow-app-bar-bottom-flat:0px -1px 0px 0px hsla(0, 0%, 0%, 0.1);--telekom-spacing-composition-space-00:0rem;--telekom-spacing-composition-space-01:0.0625rem;--telekom-spacing-composition-space-02:0.125rem;--telekom-spacing-composition-space-03:0.25rem;--telekom-spacing-composition-space-04:0.5rem;--telekom-spacing-composition-space-05:0.75rem;--telekom-spacing-composition-space-06:1rem;--telekom-spacing-composition-space-07:1.25rem;--telekom-spacing-composition-space-08:1.5rem;--telekom-spacing-composition-space-09:1.75rem;--telekom-spacing-composition-space-10:2rem;--telekom-spacing-composition-space-11:2.25rem;--telekom-spacing-composition-space-12:2.5rem;--telekom-spacing-composition-space-13:2.75rem;--telekom-spacing-composition-space-14:3rem;--telekom-spacing-composition-space-15:3.25rem;--telekom-spacing-composition-space-16:3.5rem;--telekom-spacing-composition-space-17:4rem;--telekom-spacing-composition-space-18:4.5rem;--telekom-spacing-composition-space-19:5rem;--telekom-spacing-composition-space-20:5.5rem;--telekom-spacing-composition-space-21:6rem;--telekom-spacing-baseline-space-00:0rem;--telekom-spacing-baseline-space-01:0.25rem;--telekom-spacing-baseline-space-02:0.5rem;--telekom-spacing-baseline-space-03:0.75rem;--telekom-spacing-baseline-space-04:1rem;--telekom-spacing-baseline-space-05:1.5rem;--telekom-spacing-baseline-space-06:2rem;--telekom-spacing-baseline-space-07:3rem;--telekom-spacing-baseline-space-08:4rem;--telekom-spacing-baseline-space-09:6rem;--telekom-spacing-baseline-space-10:8rem;--telekom-spacing-baseline-space-11:12rem;--telekom-spacing-baseline-space-12:16rem;--telekom-spacing-baseline-space-13:24rem;--telekom-spacing-baseline-space-14:32rem;--telekom-spacing-baseline-space-15:64rem;--telekom-text-style-badge:400 0.625rem/1.2 TeleNeoWeb, sans-serif;--telekom-text-style-small:500 0.75rem/1.35 TeleNeoWeb, sans-serif;--telekom-text-style-small-bold:700 0.75rem/1.35 TeleNeoWeb, sans-serif;--telekom-text-style-caption:400 0.875rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-caption-bold:700 0.875rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-body:400 1rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-body-bold:700 1rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-ui:500 1rem/1 TeleNeoWeb, sans-serif;--telekom-text-style-ui-bold:700 1rem/1 TeleNeoWeb, sans-serif;--telekom-text-style-lead-text:400 1.25rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-heading-6:700 1rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-heading-5:800 1.25rem/1.4 TeleNeoWeb, sans-serif;--telekom-text-style-heading-4:800 1.5rem/1.35 TeleNeoWeb, sans-serif;--telekom-text-style-heading-3:800 2rem/1.25 TeleNeoWeb, sans-serif;--telekom-text-style-heading-2:800 2.625rem/1.15 TeleNeoWeb, sans-serif;--telekom-text-style-heading-1:800 3.375rem/1.2 TeleNeoWeb, sans-serif;--telekom-text-style-title-2:800 4.25rem/1.15 TeleNeoWeb, sans-serif;--telekom-text-style-title-1:800 4.75rem/1.15 TeleNeoWeb, sans-serif;--telekom-typography-font-size-badge:0.625rem;--telekom-typography-font-size-small:0.75rem;--telekom-typography-font-size-caption:0.875rem;--telekom-typography-font-size-body:1rem;--telekom-typography-font-size-callout:1.25rem;--telekom-typography-font-size-headline-3:1.5rem;--telekom-typography-font-size-headline-2:2rem;--telekom-typography-font-size-headline-1:2.625rem;--telekom-typography-font-size-title-3:3.375rem;--telekom-typography-font-size-title-2:4.25rem;--telekom-typography-font-size-title-1:4.75rem;--telekom-typography-font-family-sans:TeleNeoWeb, sans-serif;--telekom-typography-font-family-mono:monospace;--telekom-typography-font-weight-thin:200;--telekom-typography-font-weight-regular:400;--telekom-typography-font-weight-medium:500;--telekom-typography-font-weight-bold:700;--telekom-typography-font-weight-extra-bold:800;--telekom-typography-font-weight-ultra:900;--telekom-typography-line-spacing-none:1;--telekom-typography-line-spacing-extra-tight:1.15;--telekom-typography-line-spacing-tight:1.25;--telekom-typography-line-spacing-moderate:1.35;--telekom-typography-line-spacing-standard:1.4;--telekom-typography-line-spacing-loose:1.5;--telekom-typography-letter-spacing-standard:0}[data-mode="dark"]{--telekom-color-text-and-icon-standard:#ffffff;--telekom-color-text-and-icon-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-disabled:hsla(0, 0%, 100%, 0.3);--telekom-color-text-and-icon-link-standard:#7d94f9;--telekom-color-text-and-icon-link-hovered:#aabcfd;--telekom-color-text-and-icon-link-visited:#9a75f8;--telekom-color-text-and-icon-link-active:#d9e2ff;--telekom-color-text-and-icon-primary-standard:#e20074;--telekom-color-text-and-icon-primary-hovered:#ec59a5;--telekom-color-text-and-icon-primary-pressed:#f080ba;--telekom-color-text-and-icon-inverted-standard:#000000;--telekom-color-text-and-icon-inverted-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-white-standard:#ffffff;--telekom-color-text-and-icon-white-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-black-standard:#000000;--telekom-color-text-and-icon-black-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-functional-informational:#7d94f9;--telekom-color-text-and-icon-functional-success:#00b367;--telekom-color-text-and-icon-functional-danger:#f84934;--telekom-color-text-and-icon-functional-warning:#f97012;--telekom-color-text-and-icon-on-subtle-informational:#7d94f9;--telekom-color-text-and-icon-on-subtle-success:#1bd27f;--telekom-color-text-and-icon-on-subtle-danger:#fb6a55;--telekom-color-text-and-icon-on-subtle-warning:#fd9038;--telekom-color-text-and-icon-on-subtle-violet:#af93fb;--telekom-color-text-and-icon-on-subtle-blue:#7d94f9;--telekom-color-text-and-icon-on-subtle-cyan:#33bbd2;--telekom-color-text-and-icon-on-subtle-teal:#4cc6ac;--telekom-color-text-and-icon-on-subtle-green:#1bd27f;--telekom-color-text-and-icon-on-subtle-olive:#9ec64c;--telekom-color-text-and-icon-on-subtle-brown:#d0a363;--telekom-color-text-and-icon-on-subtle-yellow:#f1b125;--telekom-color-text-and-icon-on-subtle-orange:#fd9038;--telekom-color-text-and-icon-on-subtle-red:#fb6a55;--telekom-color-background-canvas:#000000;--telekom-color-background-canvas-subtle:#0e0e0f;--telekom-color-background-backdrop:hsla(0, 0%, 0%, 0.65);--telekom-color-background-surface:#1c1c1e;--telekom-color-background-surface-subtle:#242426;--telekom-color-background-surface-highlight:#48484b;--telekom-color-primary-standard:#e20074;--telekom-color-primary-hovered:#c00063;--telekom-color-primary-pressed:#9e0051;--telekom-color-ui-base:#0e0e0f;--telekom-color-ui-subtle:#1c1c1e;--telekom-color-ui-faint:#39393c;--telekom-color-ui-regular:#656569;--telekom-color-ui-strong:#929296;--telekom-color-ui-extra-strong:#efeff0;--telekom-color-ui-white:#ffffff;--telekom-color-ui-black:#000000;--telekom-color-ui-disabled:#2b2b2d;--telekom-color-ui-border-standard:hsla(0, 0%, 100%, 0.4);--telekom-color-ui-border-hovered:hsla(0, 0%, 100%, 0.54);--telekom-color-ui-border-pressed:hsla(0, 0%, 100%, 0.94);--telekom-color-ui-border-disabled:hsla(0, 0%, 100%, 0.21);--telekom-color-ui-state-fill-standard:hsla(0, 0%, 100%, 0);--telekom-color-ui-state-fill-hovered:hsla(0, 0%, 100%, 0.14);--telekom-color-ui-state-fill-pressed:hsla(0, 0%, 100%, 0.27);--telekom-color-ui-state-fill-hovered-inverted:hsla(0, 0%, 0%, 0.07);--telekom-color-ui-state-fill-pressed-inverted:hsla(0, 0%, 0%, 0.21);--telekom-color-functional-focus-standard:#7d94f9;--telekom-color-functional-focus-inverted:#2238df;--telekom-color-functional-informational-standard:#2238df;--telekom-color-functional-informational-hovered:#3950ea;--telekom-color-functional-informational-pressed:#576ff3;--telekom-color-functional-informational-subtle:#131f7b;--telekom-color-functional-success-standard:#00b367;--telekom-color-functional-success-hovered:#00c26d;--telekom-color-functional-success-pressed:#1bd27f;--telekom-color-functional-success-subtle:#004829;--telekom-color-functional-danger-standard:#e82010;--telekom-color-functional-danger-hovered:#f2321e;--telekom-color-functional-danger-pressed:#f84934;--telekom-color-functional-danger-subtle:#5d0d06;--telekom-color-functional-warning-standard:#f97012;--telekom-color-functional-warning-hovered:#fc7e21;--telekom-color-functional-warning-pressed:#fd9038;--telekom-color-functional-warning-subtle:#642d07;--telekom-color-additional-violet-subtle:#301e5d;--telekom-color-additional-blue-subtle:#131f7b;--telekom-color-additional-cyan-subtle:#0c454f;--telekom-color-additional-teal-subtle:#174a40;--telekom-color-additional-green-subtle:#004829;--telekom-color-additional-olive-subtle:#394a17;--telekom-color-additional-brown-subtle:#473316;--telekom-color-additional-yellow-subtle:#60470f;--telekom-color-additional-orange-subtle:#642d07;--telekom-color-additional-red-subtle:#5d0d06}@media (prefers-color-scheme: dark){:root{--telekom-color-text-and-icon-standard:#ffffff;--telekom-color-text-and-icon-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-disabled:hsla(0, 0%, 100%, 0.3);--telekom-color-text-and-icon-link-standard:#7d94f9;--telekom-color-text-and-icon-link-hovered:#aabcfd;--telekom-color-text-and-icon-link-visited:#9a75f8;--telekom-color-text-and-icon-link-active:#d9e2ff;--telekom-color-text-and-icon-primary-standard:#e20074;--telekom-color-text-and-icon-primary-hovered:#ec59a5;--telekom-color-text-and-icon-primary-pressed:#f080ba;--telekom-color-text-and-icon-inverted-standard:#000000;--telekom-color-text-and-icon-inverted-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-white-standard:#ffffff;--telekom-color-text-and-icon-white-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-black-standard:#000000;--telekom-color-text-and-icon-black-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-functional-informational:#7d94f9;--telekom-color-text-and-icon-functional-success:#00b367;--telekom-color-text-and-icon-functional-danger:#f84934;--telekom-color-text-and-icon-functional-warning:#f97012;--telekom-color-text-and-icon-on-subtle-informational:#7d94f9;--telekom-color-text-and-icon-on-subtle-success:#1bd27f;--telekom-color-text-and-icon-on-subtle-danger:#fb6a55;--telekom-color-text-and-icon-on-subtle-warning:#fd9038;--telekom-color-text-and-icon-on-subtle-violet:#af93fb;--telekom-color-text-and-icon-on-subtle-blue:#7d94f9;--telekom-color-text-and-icon-on-subtle-cyan:#33bbd2;--telekom-color-text-and-icon-on-subtle-teal:#4cc6ac;--telekom-color-text-and-icon-on-subtle-green:#1bd27f;--telekom-color-text-and-icon-on-subtle-olive:#9ec64c;--telekom-color-text-and-icon-on-subtle-brown:#d0a363;--telekom-color-text-and-icon-on-subtle-yellow:#f1b125;--telekom-color-text-and-icon-on-subtle-orange:#fd9038;--telekom-color-text-and-icon-on-subtle-red:#fb6a55;--telekom-color-background-canvas:#000000;--telekom-color-background-canvas-subtle:#0e0e0f;--telekom-color-background-backdrop:hsla(0, 0%, 0%, 0.65);--telekom-color-background-surface:#1c1c1e;--telekom-color-background-surface-subtle:#242426;--telekom-color-background-surface-highlight:#48484b;--telekom-color-primary-standard:#e20074;--telekom-color-primary-hovered:#c00063;--telekom-color-primary-pressed:#9e0051;--telekom-color-ui-base:#0e0e0f;--telekom-color-ui-subtle:#1c1c1e;--telekom-color-ui-faint:#39393c;--telekom-color-ui-regular:#656569;--telekom-color-ui-strong:#929296;--telekom-color-ui-extra-strong:#efeff0;--telekom-color-ui-white:#ffffff;--telekom-color-ui-black:#000000;--telekom-color-ui-disabled:#2b2b2d;--telekom-color-ui-border-standard:hsla(0, 0%, 100%, 0.4);--telekom-color-ui-border-hovered:hsla(0, 0%, 100%, 0.54);--telekom-color-ui-border-pressed:hsla(0, 0%, 100%, 0.94);--telekom-color-ui-border-disabled:hsla(0, 0%, 100%, 0.21);--telekom-color-ui-state-fill-standard:hsla(0, 0%, 100%, 0);--telekom-color-ui-state-fill-hovered:hsla(0, 0%, 100%, 0.14);--telekom-color-ui-state-fill-pressed:hsla(0, 0%, 100%, 0.27);--telekom-color-ui-state-fill-hovered-inverted:hsla(0, 0%, 0%, 0.07);--telekom-color-ui-state-fill-pressed-inverted:hsla(0, 0%, 0%, 0.21);--telekom-color-functional-focus-standard:#7d94f9;--telekom-color-functional-focus-inverted:#2238df;--telekom-color-functional-informational-standard:#2238df;--telekom-color-functional-informational-hovered:#3950ea;--telekom-color-functional-informational-pressed:#576ff3;--telekom-color-functional-informational-subtle:#131f7b;--telekom-color-functional-success-standard:#00b367;--telekom-color-functional-success-hovered:#00c26d;--telekom-color-functional-success-pressed:#1bd27f;--telekom-color-functional-success-subtle:#004829;--telekom-color-functional-danger-standard:#e82010;--telekom-color-functional-danger-hovered:#f2321e;--telekom-color-functional-danger-pressed:#f84934;--telekom-color-functional-danger-subtle:#5d0d06;--telekom-color-functional-warning-standard:#f97012;--telekom-color-functional-warning-hovered:#fc7e21;--telekom-color-functional-warning-pressed:#fd9038;--telekom-color-functional-warning-subtle:#642d07;--telekom-color-additional-violet-subtle:#301e5d;--telekom-color-additional-blue-subtle:#131f7b;--telekom-color-additional-cyan-subtle:#0c454f;--telekom-color-additional-teal-subtle:#174a40;--telekom-color-additional-green-subtle:#004829;--telekom-color-additional-olive-subtle:#394a17;--telekom-color-additional-brown-subtle:#473316;--telekom-color-additional-yellow-subtle:#60470f;--telekom-color-additional-orange-subtle:#642d07;--telekom-color-additional-red-subtle:#5d0d06}[data-mode="light"]{--telekom-color-text-and-icon-standard:#000000;--telekom-color-text-and-icon-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-disabled:hsla(0, 0%, 0%, 0.4);--telekom-color-text-and-icon-link-standard:#2238df;--telekom-color-text-and-icon-link-hovered:#0819bd;--telekom-color-text-and-icon-link-visited:#6c3bdb;--telekom-color-text-and-icon-link-active:#000d99;--telekom-color-text-and-icon-primary-standard:#e20074;--telekom-color-text-and-icon-primary-hovered:#c00063;--telekom-color-text-and-icon-primary-pressed:#9e0051;--telekom-color-text-and-icon-inverted-standard:#ffffff;--telekom-color-text-and-icon-inverted-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-white-standard:#ffffff;--telekom-color-text-and-icon-white-additional:hsla(0, 0%, 100%, 0.65);--telekom-color-text-and-icon-black-standard:#000000;--telekom-color-text-and-icon-black-additional:hsla(0, 0%, 0%, 0.65);--telekom-color-text-and-icon-functional-informational:#2238df;--telekom-color-text-and-icon-functional-success:#008653;--telekom-color-text-and-icon-functional-danger:#d91308;--telekom-color-text-and-icon-functional-warning:#b63d00;--telekom-color-text-and-icon-on-subtle-informational:#2238df;--telekom-color-text-and-icon-on-subtle-success:#00774b;--telekom-color-text-and-icon-on-subtle-danger:#c30a03;--telekom-color-text-and-icon-on-subtle-warning:#b63d00;--telekom-color-text-and-icon-on-subtle-violet:#6c3bdb;--telekom-color-text-and-icon-on-subtle-blue:#2238df;--telekom-color-text-and-icon-on-subtle-cyan:#00738A;--telekom-color-text-and-icon-on-subtle-teal:#177364;--telekom-color-text-and-icon-on-subtle-green:#00774b;--telekom-color-text-and-icon-on-subtle-olive:#557317;--telekom-color-text-and-icon-on-subtle-brown:#82581c;--telekom-color-text-and-icon-on-subtle-yellow:#AC5600;--telekom-color-text-and-icon-on-subtle-orange:#b63d00;--telekom-color-text-and-icon-on-subtle-red:#c30a03;--telekom-color-background-canvas:#ffffff;--telekom-color-background-canvas-subtle:#fbfbfb;--telekom-color-background-backdrop:hsla(0, 0%, 0%, 0.5);--telekom-color-background-surface:#ffffff;--telekom-color-background-surface-subtle:#efeff0;--telekom-color-background-surface-highlight:#242426;--telekom-color-primary-standard:#e20074;--telekom-color-primary-hovered:#c00063;--telekom-color-primary-pressed:#9e0051;--telekom-color-ui-base:#ffffff;--telekom-color-ui-subtle:#efeff0;--telekom-color-ui-faint:#dfdfe1;--telekom-color-ui-regular:#929296;--telekom-color-ui-strong:#747478;--telekom-color-ui-extra-strong:#242426;--telekom-color-ui-white:#ffffff;--telekom-color-ui-black:#000000;--telekom-color-ui-disabled:#d0d0d2;--telekom-color-ui-border-standard:hsla(0, 0%, 0%, 0.44);--telekom-color-ui-border-hovered:hsla(0, 0%, 0%, 0.71);--telekom-color-ui-border-pressed:hsla(0, 0%, 0%, 0.71);--telekom-color-ui-border-disabled:hsla(0, 0%, 0%, 0.14);--telekom-color-ui-state-fill-standard:hsla(0, 0%, 0%, 0);--telekom-color-ui-state-fill-hovered:hsla(0, 0%, 0%, 0.07);--telekom-color-ui-state-fill-pressed:hsla(0, 0%, 0%, 0.21);--telekom-color-ui-state-fill-hovered-inverted:hsla(0, 0%, 100%, 0.14);--telekom-color-ui-state-fill-pressed-inverted:hsla(0, 0%, 100%, 0.21);--telekom-color-functional-focus-standard:#2238df;--telekom-color-functional-focus-inverted:#7d94f9;--telekom-color-functional-informational-standard:#2238df;--telekom-color-functional-informational-hovered:#1326cf;--telekom-color-functional-informational-pressed:#0819bd;--telekom-color-functional-informational-subtle:#d3d7f9;--telekom-color-functional-success-standard:#00b367;--telekom-color-functional-success-hovered:#00a461;--telekom-color-functional-success-pressed:#00955a;--telekom-color-functional-success-subtle:#ccf0e1;--telekom-color-functional-danger-standard:#e82010;--telekom-color-functional-danger-hovered:#d91308;--telekom-color-functional-danger-pressed:#c30a03;--telekom-color-functional-danger-subtle:#fad2cf;--telekom-color-functional-warning-standard:#f97012;--telekom-color-functional-warning-hovered:#f46409;--telekom-color-functional-warning-pressed:#e65703;--telekom-color-functional-warning-subtle:#fee2d0;--telekom-color-additional-violet-subtle:#e4dbfb;--telekom-color-additional-blue-subtle:#d3d7f9;--telekom-color-additional-cyan-subtle:#d2eff4;--telekom-color-additional-teal-subtle:#d8f1ec;--telekom-color-additional-green-subtle:#ccf0e1;--telekom-color-additional-olive-subtle:#e8f1d8;--telekom-color-additional-brown-subtle:#efe5d7;--telekom-color-additional-yellow-subtle:#fcefd3;--telekom-color-additional-orange-subtle:#fee2d0;--telekom-color-additional-red-subtle:#fad2cf}}:root{--telekom-spacing-unit-base:0.25rem;--telekom-spacing-unit-x0:calc(var(--telekom-spacing-unit-base) * 0);--telekom-spacing-unit-x025:calc(var(--telekom-spacing-unit-base) * 0.25);--telekom-spacing-unit-x05:calc(var(--telekom-spacing-unit-base) * 0.5);--telekom-spacing-unit-x1:calc(var(--telekom-spacing-unit-base) * 1);--telekom-spacing-unit-x2:calc(var(--telekom-spacing-unit-base) * 2);--telekom-spacing-unit-x3:calc(var(--telekom-spacing-unit-base) * 3);--telekom-spacing-unit-x4:calc(var(--telekom-spacing-unit-base) * 4);--telekom-spacing-unit-x5:calc(var(--telekom-spacing-unit-base) * 5);--telekom-spacing-unit-x6:calc(var(--telekom-spacing-unit-base) * 6);--telekom-spacing-unit-x7:calc(var(--telekom-spacing-unit-base) * 7);--telekom-spacing-unit-x8:calc(var(--telekom-spacing-unit-base) * 8);--telekom-spacing-unit-x9:calc(var(--telekom-spacing-unit-base) * 9);--telekom-spacing-unit-x10:calc(var(--telekom-spacing-unit-base) * 10);--telekom-spacing-unit-x11:calc(var(--telekom-spacing-unit-base) * 11);--telekom-spacing-unit-x12:calc(var(--telekom-spacing-unit-base) * 12);--telekom-spacing-unit-x13:calc(var(--telekom-spacing-unit-base) * 13);--telekom-spacing-unit-x14:calc(var(--telekom-spacing-unit-base) * 14);--telekom-spacing-unit-x15:calc(var(--telekom-spacing-unit-base) * 15);--telekom-spacing-unit-x16:calc(var(--telekom-spacing-unit-base) * 16);--telekom-spacing-unit-x17:calc(var(--telekom-spacing-unit-base) * 17);--telekom-spacing-unit-x18:calc(var(--telekom-spacing-unit-base) * 18);--telekom-spacing-unit-x19:calc(var(--telekom-spacing-unit-base) * 19);--telekom-spacing-unit-x20:calc(var(--telekom-spacing-unit-base) * 20)}.scl-font-variant-body{font:var(--telekom-text-style-body)}.scl-font-variant-body-short{font:var(--telekom-text-style-body);line-height:var(--telekom-typography-line-spacing-tight)}.scl-font-variant-body-large{font:var(--telekom-text-style-lead-text)}.scl-font-variant-smaller{font:var(--telekom-text-style-small)}.scl-font-variant-label{font:var(--telekom-text-style-small)}.scl-font-variant-caption{font:var(--telekom-text-style-caption)}.scl-font-variant-heading-6{font:var(--telekom-text-style-heading-6)}.scl-font-variant-heading-5{font:var(--telekom-text-style-heading-5)}.scl-font-variant-heading-4{font:var(--telekom-text-style-heading-4)}.scl-font-variant-heading-3{font:var(--telekom-text-style-heading-3)}.scl-font-variant-heading-2{font:var(--telekom-text-style-heading-2)}.scl-font-variant-heading-1{font:var(--telekom-text-style-heading-1)}:root{--scl-grid-max-width:1504px}scale-grid,.scl-grid{--spacing-md:var(--spacing-sm);--spacing-lg:var(--spacing-md);--spacing-xl:var(--spacing-lg);--spacing-xxl:var(--spacing-xl);--gutter-y-md:var(--gutter-y-sm);--gutter-y-lg:var(--gutter-y-md);--gutter-y-xl:var(--gutter-y-lg);--gutter-y-xxl:var(--gutter-y-xl);--gutter-x-md:var(--gutter-x-sm);--gutter-x-lg:var(--gutter-x-md);--gutter-x-xl:var(--gutter-x-lg);--gutter-x-xxl:var(--gutter-x-xl);--columns-md:var(--columns-sm);--columns-lg:var(--columns-md);--columns-xl:var(--columns-lg);--columns-xxl:var(--columns-xl);display:grid;box-sizing:content-box;margin-left:auto;margin-right:auto;grid-template-columns:repeat(var(--columns-sm, 4), minmax(0, 1fr));padding-left:var(--spacing-sm, var(--telekom-spacing-unit-x4, 1em));padding-right:var(--spacing-sm, var(--telekom-spacing-unit-x4, 1em));column-gap:var(--gutter-y-sm, var(--telekom-spacing-unit-x8, 2em));row-gap:var(--gutter-x-sm, var(--telekom-spacing-unit-x8, 2em));max-width:none}scale-grid-item,.scl-grid-item{--size-md:var(--size-sm);--size-lg:var(--size-md);--size-xl:var(--size-lg);--size-xxl:var(--size-xl);--offset-md:var(--offset-sm);--offset-lg:var(--offset-md);--offset-xl:var(--offset-lg);--offset-xxl:var(--offset-xl);grid-column:var(--offset-sm, auto) / span var(--size-sm, 4)}@media screen and (min-width: 640px){scale-grid,.scl-grid{grid-template-columns:repeat(var(--columns-md, 8), minmax(0, 1fr));padding-left:var(--spacing-md, var(--telekom-spacing-unit-x4, 1em));padding-right:var(--spacing-md, var(--telekom-spacing-unit-x4, 1em));column-gap:var(--gutter-y-md, var(--telekom-spacing-unit-x8, 2em));row-gap:var(--gutter-x-md, var(--telekom-spacing-unit-x8, 2em))}scale-grid-item,.scl-grid-item{grid-column:var(--offset-md, auto) / span var(--size-md, 4)}}@media screen and (min-width: 1040px){scale-grid,.scl-grid{grid-template-columns:repeat(var(--columns-lg, 16), minmax(0, 1fr));padding-left:var(--spacing-lg, var(--telekom-spacing-unit-x6, 1.5em));padding-right:var(--spacing-lg, var(--telekom-spacing-unit-x6, 1.5em));column-gap:var(--gutter-y-lg, var(--telekom-spacing-unit-x8, 2em));row-gap:var(--gutter-x-lg, var(--telekom-spacing-unit-x8, 2em))}scale-grid-item,.scl-grid-item{grid-column:var(--offset-lg, auto) / span var(--size-lg, 4)}}@media screen and (min-width: 1296px){scale-grid,.scl-grid{grid-template-columns:repeat(var(--columns-xl, 16), minmax(0, 1fr));padding-left:var(--spacing-xl, var(--telekom-spacing-unit-x6, 1.5em));padding-right:var(--spacing-xl, var(--telekom-spacing-unit-x6, 1.5em));column-gap:var(--gutter-y-xl, var(--telekom-spacing-unit-x8, 2em));row-gap:var(--gutter-x-xl, var(--telekom-spacing-unit-x8, 2em))}scale-grid-item,.scl-grid-item{grid-column:var(--offset-xl, auto) / span var(--size-xl, 4)}}@media screen and (min-width: 1680px){scale-grid,.scl-grid{grid-template-columns:repeat(var(--columns-xxl, 16), minmax(0, 1fr));padding-left:var(--spacing-xxl, var(--telekom-spacing-unit-x6, 1.5em));padding-right:var(--spacing-xxl, var(--telekom-spacing-unit-x6, 1.5em));column-gap:var(--gutter-y-xxl, var(--telekom-spacing-unit-x8, 2em));row-gap:var(--gutter-x-xxl, var(--telekom-spacing-unit-x8, 2em));max-width:var(--max-width, var(--scl-grid-max-width))}scale-grid-item,.scl-grid-item{grid-column:var(--offset-xxl, auto) / span var(--size-xxl, 4)}}:root{--scl-z-index-10:10;--scl-z-index-20:20;--scl-z-index-30:30;--scl-z-index-40:40;--scl-z-index-50:50;--scl-z-index-60:60;--scl-z-index-70:70;color-scheme:light dark}.scl-toast-stack{position:fixed;top:var(--telekom-spacing-composition-space-06);inset-inline-end:var(--telekom-spacing-composition-space-06);z-index:var(--scl-z-index-70);z-index:100;max-height:100%;overflow:visible;display:flex;flex-direction:column;gap:var(--telekom-spacing-composition-space-04)}[data-mode='light']{color-scheme:light}[data-mode='dark']{color-scheme:dark}
\ No newline at end of file